:root {
  --partner-fs-hero: clamp(30px, 8.6vw, 40px);
  --partner-fs-hero-tablet: 48px;
  --partner-fs-hero-desktop: clamp(40px, 3.8vw, 48px);
  --partner-lh-hero: 1.08;
  --partner-ls-hero: -0.015em;
  --partner-rechner-breite: 44%;
  --partner-fs-prozent: 24px;
  --partner-fs-prozent-gross: 32px;
  --partner-fs-wert: 40px;
  --partner-fs-betrag: clamp(40px, 11vw, 52px);
  --partner-regler-spur: 6px;
  --partner-regler-knopf: 28px;
  --partner-haken: 20px;
  --partner-linie: var(--rand-betont);
  --partner-faq-pfeil-drehung: rotate(180deg);
}

.partner-hero__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
}

.partner-pille {
  display: inline-block;
  padding: var(--chip-innen);
  border: var(--rand) solid var(--teal);
  border-radius: var(--radius-pille);
  color: var(--weiss);
  font-size: var(--fs-chip);
  font-weight: var(--fw-medium);
  line-height: var(--lh-label-mobil);
}

.partner-hero__titel {
  margin-top: var(--s-3);
  font-size: var(--partner-fs-hero);
  line-height: var(--partner-lh-hero);
  letter-spacing: var(--partner-ls-hero);
}

.partner-hero__titel > span {
  display: block;
}

.on-dark .partner-hero__akzent {
  color: var(--teal);
}

.partner-hero__lead {
  max-width: var(--einl-breite);
  margin-top: var(--abstand-titel-einl-mobil);
  color: var(--weiss);
  font-size: var(--fs-text-gross);
  line-height: var(--lh-text-gross);
}

.partner-hero__aktionen {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--abstand-aktionen-mobil);
}

.partner-knopf {
  min-height: var(--knopf-hoehe-mobil);
  padding-inline: var(--knopf-innen);
  font-weight: var(--fw-semibold);
}

.btn.partner-knopf--teal {
  border: var(--rand-betont) solid var(--teal);
  background-color: var(--teal);
  color: var(--navy);
}

.btn.partner-knopf--teal:hover {
  border-color: var(--teal-soft);
  background-color: var(--teal-soft);
  color: var(--navy);
}

.btn.partner-knopf--umriss {
  border: var(--rand-betont) solid var(--weiss);
  background-color: transparent;
  color: var(--weiss);
}

.btn.partner-knopf--umriss:hover {
  background-color: var(--navy-hover);
  color: var(--weiss);
}

.partner-haken {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  margin-top: var(--s-4);
  list-style: none;
  color: var(--weiss);
}

.partner-haken li,
.partner-zielgruppen li {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.partner-haken__icon {
  flex: none;
  width: var(--partner-haken);
  height: var(--partner-haken);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--rand-betont);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.partner-haken .partner-haken__icon {
  color: var(--teal);
}

.partner-stufen__titel {
  margin-top: var(--s-5);
}

.partner-stufen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-1);
  list-style: none;
}

.partner-stufe {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
  padding: var(--s-2) var(--s-1);
  border: var(--rand-betont) solid var(--navy-hover);
  border-radius: var(--radius-kachel-mobil);
  text-align: center;
  transition: border-color var(--uebergang) var(--kurve);
}

.partner-stufe.is-aktiv {
  border-color: var(--teal);
}

.partner-stufe__prozent {
  color: var(--weiss);
  font-size: var(--partner-fs-prozent);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h3-mobil);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.partner-stufe__name {
  color: var(--weiss);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-label);
}

.partner-stufe__spanne {
  color: var(--text-leise);
  font-size: var(--fs-klein-mobil);
  line-height: var(--lh-klein);
}

.partner-rechner {
  padding: var(--kachel-innen-mobil);
  border-radius: var(--radius-kachel-mobil);
  background-color: var(--weiss);
  color: var(--text);
}

.on-dark .partner-rechner__titel {
  color: var(--text);
  font-size: var(--fs-h3-mobil);
  line-height: var(--lh-h3-mobil);
  letter-spacing: var(--ls-h3);
}

.on-dark .partner-rechner :focus-visible {
  outline-color: var(--fokus);
}

.partner-rechner ::selection {
  background-color: var(--navy);
  color: var(--weiss);
}

.partner-rechner__inhalt {
  margin-top: var(--s-3);
}

.partner-rechner__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
}

.partner-rechner__label {
  font-weight: var(--fw-semibold);
}

.partner-rechner__wert {
  color: var(--navy);
  font-size: var(--partner-fs-wert);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h2-mobil);
  font-variant-numeric: tabular-nums;
}

.partner-regler {
  display: block;
  width: 100%;
  height: var(--tippziel);
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.partner-regler:focus-visible {
  outline: none;
}

.partner-regler::-webkit-slider-runnable-track {
  height: var(--partner-regler-spur);
  border-radius: var(--radius-pille);
  background-color: var(--linie);
}

.partner-regler::-moz-range-track {
  height: var(--partner-regler-spur);
  border-radius: var(--radius-pille);
  background-color: var(--linie);
}

.partner-regler::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: var(--partner-regler-knopf);
  height: var(--partner-regler-knopf);
  margin-top: calc((var(--partner-regler-spur) - var(--partner-regler-knopf)) / 2);
  border: var(--rand-betont) solid var(--weiss);
  border-radius: var(--radius-rund);
  background-color: var(--navy);
}

.partner-regler::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--partner-regler-knopf);
  height: var(--partner-regler-knopf);
  border: var(--rand-betont) solid var(--weiss);
  border-radius: var(--radius-rund);
  background-color: var(--navy);
}

.partner-regler:focus-visible::-webkit-slider-thumb {
  outline: var(--fokus-breite) solid var(--fokus);
  outline-offset: var(--fokus-abstand);
}

.partner-regler:focus-visible::-moz-range-thumb {
  outline: var(--fokus-breite) solid var(--fokus);
  outline-offset: var(--fokus-abstand);
}

.partner-rechner__enden {
  display: flex;
  justify-content: space-between;
  color: var(--text-2);
  font-size: var(--fs-klein-mobil);
  line-height: var(--lh-klein);
}

.partner-rechner__felder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-1);
  margin-top: var(--s-3);
}

.partner-rechner__feld,
.partner-rechner__ergebnis {
  padding: var(--s-2);
  border-radius: var(--radius-feld);
  background-color: var(--hellgrau);
}

.partner-rechner__feld dt,
.partner-rechner__ergebnis-label {
  color: var(--text-2);
  font-size: var(--fs-label-mobil);
  line-height: var(--lh-label-mobil);
}

.partner-rechner__feld dd {
  margin: var(--s-1) 0 0;
  font-weight: var(--fw-semibold);
}

.partner-rechner__spanne {
  display: block;
  color: var(--text-2);
  font-size: var(--fs-label-mobil);
  font-weight: var(--fw-regular);
  line-height: var(--lh-label-mobil);
}

.partner-rechner__feld .partner-rechner__anteil {
  color: var(--link);
  font-size: var(--partner-fs-prozent);
  line-height: var(--lh-h3-mobil);
  font-variant-numeric: tabular-nums;
}

.partner-rechner__ergebnis {
  margin-top: var(--s-1);
}

.partner-rechner__betrag {
  margin-top: var(--s-1);
  color: var(--navy);
  font-size: var(--partner-fs-betrag);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h2-mobil);
  font-variant-numeric: tabular-nums;
}

.partner-rechner__jahr {
  margin-top: var(--s-1);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.partner-rechner__preis {
  margin-top: var(--s-3);
}

.partner-rechner__beispiel {
  margin-top: var(--s-3);
  font-size: var(--fs-text-gross);
  line-height: var(--lh-text-gross);
}

.partner-rechner__fuss {
  margin-top: var(--s-2);
  color: var(--text-2);
  font-size: var(--fs-klein-mobil);
  line-height: var(--lh-klein);
}

.partner-vorteile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kachel-abstand-mobil);
  list-style: none;
}

.partner-vorteil {
  padding: var(--kachel-innen-mobil);
  border: var(--rand) solid var(--linie);
  border-radius: var(--radius-kachel-mobil);
  background-color: var(--weiss);
}

.partner-icon {
  display: block;
  width: var(--icon);
  height: var(--icon);
  fill: none;
  stroke: var(--link);
  stroke-width: var(--icon-strich);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.partner-vorteil__titel {
  margin-top: var(--s-2);
  font-size: var(--fs-text-gross);
  line-height: var(--lh-text-gross);
  letter-spacing: normal;
}

.partner-vorteil__text {
  margin-top: var(--s-1);
  color: var(--text-2);
}

.partner-zielgruppen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-1);
  list-style: none;
}

.partner-zielgruppen li {
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-2);
  border: var(--rand) solid var(--linie);
  border-radius: var(--radius-feld);
  background-color: var(--weiss);
  font-weight: var(--fw-semibold);
}

.partner-zielgruppen .partner-haken__icon {
  margin-top: calc((var(--lh-text) * 1em - var(--partner-haken)) / 2);
  color: var(--link);
}

.partner-ablauf {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  list-style: none;
  counter-reset: partner-schritt;
}

.partner-ablauf__schritt {
  position: relative;
  counter-increment: partner-schritt;
}

.partner-ablauf__schritt::before {
  content: counter(partner-schritt);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--kreis-mobil);
  height: var(--kreis-mobil);
  border-radius: var(--radius-rund);
  background-color: var(--navy);
  color: var(--weiss);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.partner-ablauf__titel {
  margin-top: var(--s-2);
}

.partner-ablauf__text {
  margin-top: var(--s-1);
  color: var(--text-2);
}

.partner-ablauf__aktion {
  margin-top: var(--s-6);
}

.partner-ablauf__aktion .btn {
  width: 100%;
}

.partner-faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2);
  align-items: start;
}

.partner-faq__eintrag {
  border: var(--rand) solid var(--linie);
  border-radius: var(--radius-kachel-mobil);
  background-color: var(--weiss);
}

.partner-faq__frage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: var(--tippziel);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-kachel-mobil);
  color: var(--text);
  font-weight: var(--fw-semibold);
  list-style: none;
  cursor: pointer;
}

.partner-faq__frage::-webkit-details-marker {
  display: none;
}

.partner-faq__pfeil {
  flex: none;
  width: var(--icon);
  height: var(--icon);
  fill: none;
  stroke: var(--text-2);
  stroke-width: var(--icon-strich);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--uebergang) var(--kurve);
}

.partner-faq__eintrag[open] .partner-faq__pfeil {
  transform: var(--partner-faq-pfeil-drehung);
}

.partner-faq__antwort {
  padding: 0 var(--s-3) var(--s-3);
  color: var(--text-2);
}

.partner-form {
  max-width: var(--einl-breite);
}

.partner-abschluss__karte {
  padding: var(--kachel-innen-mobil);
  border-radius: var(--radius-kachel-mobil);
  background-color: var(--navy);
}

.partner-abschluss__text {
  max-width: var(--einl-breite);
  margin-top: var(--s-2);
  font-size: var(--fs-einl);
  line-height: var(--lh-einl-mobil);
  letter-spacing: var(--ls-einl-mobil);
}

.partner-abschluss__aktion {
  display: flex;
  flex-direction: column;
  margin-top: var(--abstand-aktionen-mobil);
}

@media (prefers-reduced-motion: reduce) {
  .partner-stufe,
  .partner-faq__pfeil {
    transition: none;
  }
}

@media (forced-colors: active) {
  .partner-stufe.is-aktiv {
    border-color: Highlight;
  }

  .partner-regler::-webkit-slider-thumb {
    forced-color-adjust: none;
    background-color: Highlight;
  }

  .partner-regler::-moz-range-thumb {
    forced-color-adjust: none;
    background-color: Highlight;
  }
}

@media (min-width: 735px) {
  .partner-hero__titel {
    font-size: var(--partner-fs-hero-tablet);
  }

  .partner-hero__aktionen {
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: var(--abstand-aktionen);
  }

  .partner-knopf {
    min-height: var(--knopf-hoehe-gross);
    padding-inline: var(--knopf-innen-gross);
  }

  .partner-stufen {
    gap: var(--s-2);
  }

  .partner-stufe {
    padding: var(--s-3) var(--s-2);
    border-radius: var(--radius-kachel);
  }

  .partner-stufe__prozent {
    font-size: var(--partner-fs-prozent-gross);
  }

  .partner-stufe__spanne {
    font-size: var(--fs-label-mobil);
    line-height: var(--lh-label-mobil);
  }

  .partner-rechner {
    padding: var(--kachel-innen);
    border-radius: var(--radius-kachel);
  }

  .on-dark .partner-rechner__titel {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
  }

  .partner-vorteile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kachel-abstand-tablet);
  }

  .partner-vorteil {
    padding: var(--s-4);
    border-radius: var(--radius-kachel);
  }

  .partner-zielgruppen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-2);
  }

  .partner-ablauf__schritt::before {
    width: var(--kreis);
    height: var(--kreis);
  }

  .partner-ablauf__text {
    font-size: var(--fs-text-gross);
    line-height: var(--lh-text-gross);
  }

  .partner-ablauf__aktion .btn {
    width: auto;
  }

  .partner-faq__eintrag,
  .partner-faq__frage {
    border-radius: var(--radius-kachel);
  }

  .partner-faq__frage {
    padding: var(--s-3) var(--s-4);
  }

  .partner-faq__antwort {
    padding: 0 var(--s-4) var(--s-4);
  }

  .partner-abschluss__karte {
    padding: var(--kachel-innen);
    border-radius: var(--radius-kachel);
  }

  .partner-abschluss__text {
    line-height: var(--lh-einl);
    letter-spacing: var(--ls-einl);
  }

  .partner-abschluss__aktion {
    flex-direction: row;
    margin-top: var(--abstand-aktionen);
  }
}

@media (min-width: 1069px) {
  .partner-hero__raster {
    grid-template-columns: minmax(0, 1fr) var(--partner-rechner-breite);
    gap: var(--s-8);
    align-items: start;
  }

  .partner-hero__titel {
    font-size: var(--partner-fs-hero-desktop);
  }

  .partner-vorteile {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--kachel-abstand);
  }

  .partner-zielgruppen {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .partner-ablauf {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-4);
  }

  .partner-ablauf__schritt:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc((var(--kreis) - var(--partner-linie)) / 2);
    left: calc(var(--kreis) + var(--s-2));
    right: calc(var(--s-2) - var(--s-4));
    height: var(--partner-linie);
    background-color: var(--linie);
  }

  .partner-faq {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .partner-abschluss__karte {
    padding: var(--s-8);
  }
}