/* ==========================================================================
   corelay - Unterseite „Preise“ (preise.html)
   --------------------------------------------------------------------------
   Enthaelt ausschliesslich die Feinheiten der vier hellen Inhaltssektionen
   dieser Seite:

       1. drei Paketkarten, die mittlere hervorgehoben
       2. Vergleichstabelle mit waagerecht scrollbarer Huelle
       3. Karten der laufenden Betreuung
       4. Hinweis-Akkordeon zu Zahlung, Laufzeit und Foerdermitteln

   Flaechen, Sektionsabstaende, Sektionskoepfe, Karten, Icon-Kacheln,
   Haekchenlisten, Buttons, Seitenkopf und CTA-Band kommen unveraendert aus
   css/base.css und css/layout.css. Hier stehen keine harten Farbwerte -
   alles laeuft ueber die Tokens aus css/tokens.css.

   Saemtliche Selektoren tragen das Praefix .preise-, damit nichts mit den
   Sektionen der Startseite kollidiert.

   Inhalt
     1. Sektionsgeruest und Anker
     2. Fussnoten unter den Sektionen
     3. Paketraster
     4. Paketkarte - Grundgeruest
     5. Paketkopf (Icon-Kachel, Name, Kurzbeschreibung)
     6. Preisangabe („ab“, Betrag, Umsatzsteuer-Hinweis)
     7. Leistungsliste und Button
     8. Hervorgehobenes Paket „Business“ mit Badge
     9. Vergleichstabelle - scrollbare Huelle
    10. Vergleichstabelle - Zellen
    11. Haekchen und Striche in der Tabelle
    12. Hervorgehobene Tabellenspalte
    13. Karten der laufenden Betreuung
    14. Hinweis-Akkordeon
    15. Staffelung des Einblendens
    16. Breakpoint 1023.98px - Pakete einspaltig
    17. Breakpoint 767.98px
    18. Breakpoint 479.98px
    19. Breakpoint 359.98px
    20. Leasing-Band
    21. Leasing - Breakpoints
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Sektionsgeruest und Anker
   --------------------------------------------------------------------------
   Flaeche (.bg-paper / .bg-paper-50) und vertikaler Abstand (.section) stehen
   im Markup. Hier bleibt nur der Abstand fuer Sprungmarken, damit ein Sprung
   auf #pakete, #vergleich, #betreuung oder #hinweise nicht unter dem
   klebenden Header endet.
   -------------------------------------------------------------------------- */

.preise-pakete,
.preise-vergleich,
.preise-betreuung,
.preise-hinweise {
  position: relative;
  scroll-margin-top: var(--header-h);
}


/* --------------------------------------------------------------------------
   2. Fussnoten unter den Sektionen
   --------------------------------------------------------------------------
   Kennzeichnen die Betraege durchgaengig als „ab“-Preise zzgl. gesetzlicher
   Umsatzsteuer. Zentriert und in der Lesebreite gehalten.
   -------------------------------------------------------------------------- */

.preise-fussnote {
  max-width: 720px;
  margin: var(--sp-8) auto 0;
  color: var(--t-on-light-mute);
  text-align: center;
  text-wrap: pretty;
}


/* --------------------------------------------------------------------------
   3. Paketraster
   --------------------------------------------------------------------------
   Bewusst ein eigenes Raster statt .grid-3: Die hervorgehobene Karte in der
   Mitte braucht drei gleich breite Spalten oder eine einzelne - eine
   Zwischenstufe mit zwei Spalten wuerde die Mitte aus der Mitte ruecken.
   -------------------------------------------------------------------------- */

.preise-pakete-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}


/* --------------------------------------------------------------------------
   4. Paketkarte - Grundgeruest
   --------------------------------------------------------------------------
   .card liefert Flaeche, Rahmen, Radius, Schatten und den Hover. Die Karte
   ist bereits ein Flex-Container in Spaltenrichtung; der Button wird unten
   ueber margin-top:auto verankert, damit alle drei Karten auf gleicher Hoehe
   abschliessen.
   -------------------------------------------------------------------------- */

.preise-paket {
  position: relative;
  padding: 28px 26px 26px;
}


/* --------------------------------------------------------------------------
   5. Paketkopf (Icon-Kachel, Name, Kurzbeschreibung)
   -------------------------------------------------------------------------- */

.preise-paket-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

/* .card .card-title bringt 8px Abstand nach unten mit - in der Kopfzeile
   wuerde das den Namen gegen die Icon-Kachel verschieben. */
.preise-paket .preise-paket-name {
  margin: 0;
}

.preise-paket .preise-paket-claim {
  margin: 0 0 20px;
  /* haelt die Preiszeile der drei Karten auf einer Linie (zwei Textzeilen) */
  min-height: calc(2 * var(--fs-body-sm) * var(--lh-body-sm));
}


/* --------------------------------------------------------------------------
   6. Preisangabe
   --------------------------------------------------------------------------
   Das kleine „ab“ steht auf der Grundlinie des Betrags, der Hinweis zur
   Umsatzsteuer eine Zeile darunter. Beide Absaetze liegen in einer .card und
   ueberschreiben deshalb deren Vorgabe von 14px.
   -------------------------------------------------------------------------- */

.preise-paket .preise-preis {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.preise-preis-ab {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--t-on-light-mute);
}

.preise-preis-wert {
  font-family: var(--ff-display);
  font-size: clamp(1.9rem, 2.6vw, 2.25rem);
  font-weight: var(--fw-extrabold);
  line-height: 1.1;
  letter-spacing: var(--ls-h1);
  color: var(--t-on-light);
}

.preise-paket .preise-preis-ust,
.preise-betreuung-karte .preise-preis-ust {
  margin: 6px 0 0;
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  color: var(--t-on-light-mute);
}


/* --------------------------------------------------------------------------
   7. Leistungsliste und Button
   --------------------------------------------------------------------------
   Eine feine Linie trennt Preis und Leistungsumfang. Der Button sitzt immer
   am unteren Kartenrand.
   -------------------------------------------------------------------------- */

.preise-paket-liste {
  margin: 22px 0 24px;
  padding-top: 22px;
  border-top: 1px solid var(--paper-200);
}

.preise-paket-cta {
  margin-top: auto;
}


/* --------------------------------------------------------------------------
   8. Hervorgehobenes Paket „Business“ mit Badge
   --------------------------------------------------------------------------
   Der blaue Rahmen bleibt auch im Hover erhalten - .card faerbt ihn sonst auf
   18 % Alpha um. Angehoben wird die Karte ueber einen negativen oberen
   Aussenabstand und nicht ueber transform: So bleiben der Hover-Versatz von
   .card und das Einblenden aus .reveal unangetastet.
   -------------------------------------------------------------------------- */

.preise-paket--top {
  padding-top: 34px;
  border-color: var(--blue-500);
  box-shadow:
    0 1px 2px rgba(11, 17, 32, .04),
    0 16px 40px rgba(47, 128, 255, .16);
}

.preise-paket--top:hover {
  border-color: var(--blue-500);
}

/* Der Selektor ist bewusst zweistufig: .card p aus css/layout.css setzt sonst
   Groesse, Farbe und Zeilenhoehe des Absatzes. */
.preise-paket .preise-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  height: 26px;
  margin: 0;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background-color: var(--blue-500);
  box-shadow: 0 6px 18px rgba(47, 128, 255, .30);
  color: #fff;
  font-family: var(--ff-body);
  font-size: 11.5px;
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Die Karte ist ab 1024px angehoben - darunter steht sie in einer Spalte */
@media (min-width: 1024px) {

  .preise-paket--top {
    margin-top: -14px;
  }
}


/* --------------------------------------------------------------------------
   9. Vergleichstabelle - scrollbare Huelle
   --------------------------------------------------------------------------
   Die Huelle traegt tabindex="0" und ist damit auch per Tastatur scrollbar.
   Sie haelt die Tabelle unter 320px Breite sicher im Layout, ohne dass die
   Seite selbst waagerecht scrollt.
   -------------------------------------------------------------------------- */

.preise-tabelle-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background-color: var(--paper);
  border: 1px solid var(--paper-200);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}


/* --------------------------------------------------------------------------
   10. Vergleichstabelle - Zellen
   --------------------------------------------------------------------------
   Die Merkmalspalte bleibt linksbuendig, die drei Paketspalten sind zentriert.
   Die Mindestbreite sorgt dafuer, dass die Tabelle nie gequetscht wird -
   stattdessen scrollt die Huelle.
   -------------------------------------------------------------------------- */

.preise-tabelle {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
  line-height: 1.45;
}

.preise-tabelle th,
.preise-tabelle td {
  padding: 13px 18px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--paper-200);
}

/* Kopfzeile */
.preise-tabelle thead th {
  background-color: var(--paper-100);
  font-family: var(--ff-display);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-card-title);
  color: var(--t-on-light);
  white-space: nowrap;
}

/* Merkmalspalte */
.preise-tabelle tbody th {
  width: 34%;
  font-family: var(--ff-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--t-on-light);
}

/* Paketspalten */
.preise-tabelle thead th:not(:first-child),
.preise-tabelle tbody td {
  text-align: center;
}

.preise-tabelle tbody td {
  color: var(--t-on-light-soft);
}

/* Zebra-Streifen fuer bessere Zeilenfuehrung */
.preise-tabelle tbody tr:nth-child(even) {
  background-color: var(--paper-50);
}

.preise-tabelle tbody tr:last-child th,
.preise-tabelle tbody tr:last-child td {
  border-bottom: 0;
}


/* --------------------------------------------------------------------------
   11. Haekchen und Striche in der Tabelle
   --------------------------------------------------------------------------
   Das Haekchen ist dasselbe Inline-SVG (Data-URI) wie in .check-list - keine
   zusaetzliche Datei, kein weiterer Request. Die Bedeutung steht fuer
   Screenreader als .visually-hidden-Text in der Zelle.
   -------------------------------------------------------------------------- */

.preise-ja::before,
.preise-nein::before {
  content: "";
  display: inline-block;
  width: 19px;
  height: 19px;
  vertical-align: -4px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 19px 19px;
}

.preise-ja::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%232F80FF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='8.4'/%3E%3Cpath d='m6.4 10.3 2.4 2.4 4.8-5'/%3E%3C/svg%3E");
}

.preise-nein::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238494AB' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M5.6 10h8.8'/%3E%3C/svg%3E");
}


/* --------------------------------------------------------------------------
   12. Hervorgehobene Tabellenspalte („Business“)
   --------------------------------------------------------------------------
   Nimmt den blauen Rahmen der mittleren Paketkarte als sehr dezente Flaeche
   wieder auf. Die Zellfarbe liegt ueber dem Zebra-Streifen der Zeile.
   -------------------------------------------------------------------------- */

.preise-tabelle .preise-spalte-top {
  background-color: rgba(47, 128, 255, .06);
}

.preise-tabelle thead th.preise-spalte-top {
  background-color: var(--blue-50);
  color: var(--blue-600);
}


/* --------------------------------------------------------------------------
   13. Karten der laufenden Betreuung
   --------------------------------------------------------------------------
   Bewusst kleiner als die Paketkarten: 22px Padding, kompaktere Liste.
   -------------------------------------------------------------------------- */

.preise-betreuung-karte {
  padding: 22px;
}

.preise-betreuung-karte .icon-tile {
  margin-bottom: 16px;
}

.preise-betreuung-karte .card-title {
  margin-bottom: 6px;
}

.preise-betreuung-karte .preise-monat {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
}

.preise-monat-wert {
  font-family: var(--ff-display);
  font-size: 1.75rem;
  font-weight: var(--fw-extrabold);
  line-height: 1.15;
  letter-spacing: var(--ls-h1);
  color: var(--t-on-light);
}

.preise-monat-einheit {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--t-on-light-mute);
}

.preise-betreuung-liste {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--paper-200);
}

.preise-betreuung-liste li {
  font-size: 13.5px;
}


/* --------------------------------------------------------------------------
   14. Hinweis-Akkordeon (Zahlung, Laufzeit, Foerdermittel)
   --------------------------------------------------------------------------
   Aufbau wie das FAQ der Startseite: [data-faq] > [data-faq-item] mit
   <button data-faq-q aria-expanded> und <div data-faq-a>. js/main.js schaltet
   aria-expanded um - die Darstellung haengt allein an diesem Zustand, damit
   das Akkordeon auch ohne JavaScript korrekt (geschlossen) aussieht und die
   Antworten per Tastatur erreichbar bleiben.

   Der geschlossene Zustand wird ueber max-height und opacity gefahren; das
   Plus dreht sich dabei um 45 Grad.
   -------------------------------------------------------------------------- */

.preise-faq {
  display: grid;
  gap: 14px;
  max-width: 860px;
  margin-inline: auto;
}

.preise-faq-item {
  background-color: var(--paper);
  border: 1px solid var(--paper-200);
  border-radius: var(--r-faq);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}

.preise-faq-item:has([data-faq-q][aria-expanded="true"]) {
  border-color: var(--blue-a18);
}

.preise-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 20px;
  background: none;
  border: 0;
  font-family: var(--ff-body);
  font-size: 14.5px;
  font-weight: var(--fw-semibold);
  line-height: 1.45;
  text-align: left;
  color: var(--t-on-light);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.preise-faq-q:hover {
  color: var(--blue-600);
}

.preise-faq-ico {
  width: 18px;
  height: 18px;
  color: var(--t-on-light-mute);
  transition:
    transform var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.preise-faq-q[aria-expanded="true"] .preise-faq-ico {
  transform: rotate(45deg);
  color: var(--blue-500);
}

/* Offener Zustand ist die Vorgabe - geschlossen wird ueber aria-expanded */
.preise-faq-a {
  max-height: 40rem;
  opacity: 1;
  overflow: hidden;
  transition:
    max-height var(--dur-slow) var(--ease),
    opacity var(--dur-slow) var(--ease);
}

.preise-faq-q[aria-expanded="false"] + .preise-faq-a {
  max-height: 0;
  opacity: 0;
}

.preise-faq-a-inner {
  padding: 0 20px 18px;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--t-on-light-soft);
}

.preise-faq-a-inner p + p {
  margin-top: 10px;
}


/* --------------------------------------------------------------------------
   15. Staffelung des Einblendens
   --------------------------------------------------------------------------
   Die Karten tragen --reveal-delay im Markup. Hier bekommen nur die Karten
   der Betreuung eine Reserve, falls das Attribut einmal fehlt.
   -------------------------------------------------------------------------- */

.preise-betreuung-grid > .reveal:nth-child(2) {
  --reveal-delay: 90ms;
}

.preise-betreuung-grid > .reveal:nth-child(3) {
  --reveal-delay: 180ms;
}


/* --------------------------------------------------------------------------
   16. Breakpoint 1023.98px - Pakete einspaltig
   --------------------------------------------------------------------------
   Drei Spalten werden hier zu schmal. Statt einer krummen Zwei-Spalten-Stufe
   stapeln die Pakete in einer zentrierten Spalte.
   -------------------------------------------------------------------------- */

@media (max-width: 1023.98px) {

  .preise-pakete-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
    margin-inline: auto;
    gap: 34px;
  }

  .preise-paket .preise-paket-claim {
    min-height: 0;
  }
}


/* --------------------------------------------------------------------------
   17. Breakpoint 767.98px
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

  .preise-tabelle th,
  .preise-tabelle td {
    padding: 12px 14px;
  }

  .preise-faq-q {
    padding: 14px 16px;
    font-size: 14px;
  }

  .preise-faq-a-inner {
    padding: 0 16px 16px;
  }
}


/* --------------------------------------------------------------------------
   18. Breakpoint 479.98px
   -------------------------------------------------------------------------- */

@media (max-width: 479.98px) {

  .preise-paket {
    padding: 24px 20px 22px;
  }

  .preise-paket--top {
    padding-top: 30px;
  }

  .preise-betreuung-karte {
    padding: 20px;
  }

  .preise-fussnote {
    margin-top: var(--sp-6);
    text-align: left;
  }
}


/* --------------------------------------------------------------------------
   19. Breakpoint 359.98px
   --------------------------------------------------------------------------
   Kleinste unterstuetzte Breite (320px): Der Paketkopf darf umbrechen, die
   Tabelle scrollt weiterhin innerhalb ihrer Huelle.
   -------------------------------------------------------------------------- */

@media (max-width: 359.98px) {

  .preise-paket-kopf {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
  }

  .preise-paket .preise-badge {
    font-size: 11px;
    letter-spacing: .06em;
  }
}


/* --------------------------------------------------------------------------
   20. Leasing-Band
   --------------------------------------------------------------------------
   Eigener dunkler Abschnitt zwischen Paketen und Vergleichstabelle. Das
   Leasing ist kein viertes Paket, sondern ein anderer Weg, dieselbe Leistung
   zu bezahlen - deshalb steht es optisch abgesetzt und nicht im Paketraster.

   Zwei Spalten: links die Leistungen (zweispaltige Liste, weil es viele
   kurze Punkte sind), rechts die Preiskarte mit den Konditionen. Ab 899.98px
   untereinander, ab 619.98px auch die Leistungsliste einspaltig.
   -------------------------------------------------------------------------- */

.preise-leasing {
  scroll-margin-top: var(--header-h);
}

.leasing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.leasing-karte {
  height: 100%;
  padding: 28px;
}

.leasing-karte .card-title {
  font-size: var(--fs-h3);
  margin-bottom: 6px;
}

/* Leistungsliste: zwei Spalten, damit die vierzehn Punkte nicht zu einer
   langen Schlange werden. Die dunkle Variante der Haekchen kommt aus
   css/layout.css (.check-list--dark). */
.leasing-liste {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 26px;
  margin-top: 20px;
}

/* "Auf Anfrage" statt einer Zahl: Der Betrag steht in einer Display-Type mit
   bis zu 2.25rem - ein Wort dieser Laenge wuerde die Karte sprengen. Etwas
   kleiner und ohne das enge Letterspacing der Zahlen liest es sich ruhiger. */
.preise-preis .preise-preis-wert--text {
  font-size: clamp(1.4rem, 1.8vw, 1.6rem);
  letter-spacing: -.01em;
}

/* Plakette der Preiskarte: dieselbe Optik wie an den Paketkarten, aber im
   Textfluss statt ueber dem oberen Kartenrand. Die Paket-Plakette haengt
   absolut positioniert im Raster zwischen den Karten - allein stehend waere
   das nur ein abgeschnittener Anker.
   Der zweistufige Selektor schlaegt .card-dark p aus css/layout.css. */
.leasing-preis .leasing-badge {
  display: inline-flex;
  align-items: center;
  /* Die Karte ist ein Flex-Stapel - ohne align-self zoege sich die Pille
     ueber die volle Kartenbreite. */
  align-self: flex-start;
  height: 26px;
  margin: 0 0 14px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background-color: var(--blue-500);
  box-shadow: 0 6px 18px rgba(47, 128, 255, .30);
  color: #fff;
  font-family: var(--ff-body);
  font-size: 11.5px;
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Preiskarte: etwas heller als die Leistungskarte, damit der Blick
   zuerst auf dem Betrag landet. */
.leasing-preis {
  background-color: var(--ink-800);
  border-color: var(--blue-a18);
}

.leasing-preis .preise-preis {
  margin-top: 14px;
}

.leasing-preis .preise-preis-wert,
.leasing-preis .preise-preis-ab {
  color: var(--t-on-dark);
}

.leasing-preis .preise-preis-ust {
  color: var(--t-on-dark-mute);
}

.leasing-konditionen {
  margin: 20px 0 24px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--t-on-dark-mute);
}

.leasing-konditionen li {
  display: flex;
  gap: 10px;
}

.leasing-konditionen .ico {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: .18em;
  color: var(--blue-400);
}

.leasing-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.leasing-fussnote {
  margin-top: var(--sp-6);
  color: var(--t-on-dark-mute);
}


/* --------------------------------------------------------------------------
   21. Leasing - Breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 899.98px) {

  .leasing-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 619.98px) {

  .leasing-liste {
    grid-template-columns: minmax(0, 1fr);
  }

  .leasing-karte {
    padding: 22px;
  }

  .leasing-aktionen .btn {
    width: 100%;
  }
}