/* ===========================================
   KOSTEN: CSS (Seite ID 57, /kosten/)
   Design-System: Royal Sapphire
   Prefix: kpn-kosten-
   Seit 04.10.2026. Kein JavaScript auf dieser Seite: alle Zahlen setzt
   PHP ueber Shortcodes ein, siehe functions.php ganz unten.
   =========================================== */

/* "KI-Telefonassistent" in der Ueberschrift nicht am Bindestrich trennen.
   Am Handy stand sonst "KI-" allein am Zeilenende. color: inherit, weil
   .vh-hero-eyebrow span jedes span in der Ueberschrift blau faerbt; blau
   bleibt nur "Oesterreich" (design-rules.md, Ueberschrift mit blauem Wort). */
.vh-hero-eyebrow .kpn-kosten-nowrap {
  color: inherit;
  white-space: nowrap;
}

.kpn-kosten {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 32px 72px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Abschnittskopf: H2 und graue Zeile, sonst nichts (design-rules.md).
   Mittig wie auf /neukundenrabatt/, /roi-rechner/ und der Startseite. Stand
   bis 04.10.2026 links, als einzige Seite. */
.kpn-kosten-head {
  margin: 0 0 24px;
  text-align: center;
}
.kpn-kosten-head h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 8px;
}
.kpn-kosten-head p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 auto;
}

/* Fliesstext unter Tabellen und in Abschnitten. Zeilenlaenge begrenzt,
   bei 960px Breite waeren es ueber 120 Zeichen je Zeile.
   Der Block steht mittig, der Text darin bleibt linksbuendig. So auch die
   Fragen auf der Startseite: 720 breit, mittig. Mehrzeilige Absaetze
   zentriert setzen hiesse, jede Zeile faengt woanders an. */
.kpn-kosten-text {
  max-width: 720px;
  margin: 20px auto 0;
}
.kpn-kosten-text p,
.kpn-kosten-text li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.kpn-kosten-text ul {
  margin: 0 0 12px;
  padding-left: 20px;
}
.kpn-kosten-text strong {
  color: var(--ink);
  font-weight: 600;
}
.kpn-kosten-text a {
  color: var(--brand);
  font-weight: 600;
}
.kpn-kosten-hinweis,
.kpn-kosten-text p.kpn-kosten-hinweis {
  font-size: 13px;
  line-height: 1.6;
}
.kpn-kosten-quelle,
.kpn-kosten-text p.kpn-kosten-quelle {
  font-size: 13px;
  line-height: 1.6;
}

/* Tabelle in einer Karte. Netto gross, brutto klein darunter. */
.kpn-kosten-tabelle-wrap {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  overflow-x: auto;
}
/* Seit 21.10.2026 steht die Tabelle in .kpn-teil-inhalt (Stil der Linie). */
.kpn-teil-inhalt > .kpn-kosten-tabelle-wrap {
  margin: 0 0 24px;
}
.kpn-kosten-tabelle {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  border: 0;
  font-variant-numeric: tabular-nums;
}
.kpn-kosten-tabelle th,
.kpn-kosten-tabelle td {
  padding: 16px 20px;
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: right;
  vertical-align: top;
  font-size: 15px;
  color: var(--ink);
}
.kpn-kosten-tabelle tbody tr:last-child th,
.kpn-kosten-tabelle tbody tr:last-child td {
  border-bottom: 0;
}
.kpn-kosten-tabelle th:first-child {
  text-align: left;
}
.kpn-kosten-tabelle thead th {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--bg-low);
}
.kpn-kosten-tabelle tbody th {
  font-weight: 700;
}
.kpn-kosten-netto {
  display: block;
  font-weight: 700;
  white-space: nowrap;
}
.kpn-kosten-brutto {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
}
/* Minuten unter dem Paketnamen, nur am Handy. Am Desktop hat die Tabelle
   dafuer eine eigene Spalte. */
.kpn-kosten-min {
  display: none;
}

/* Zusatzkosten als Karten, zwei Spalten. */
.kpn-kosten-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.kpn-kosten-karte {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px 24px 20px;
}
.kpn-kosten-karte--breit {
  grid-column: 1 / -1;
}
.kpn-kosten-karte h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--ink);
  margin: 0 0 4px;
}
.kpn-kosten-betrag {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
  margin: 0 0 10px;
}
.kpn-kosten-karte p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}
.kpn-kosten-karte p + p {
  margin-top: 8px;
}
.kpn-kosten-karte a {
  color: var(--brand);
  font-weight: 600;
}

/* Seit 08.10.2026 laedt diese Datei auch auf /fonio-erfahrungen/. Dafuer:
   Listen in Karten, fett gesetzte Stichworte und ein Kartenraster zwischen
   zwei Textbloecken. Steht bewusst nach .kpn-kosten-text, damit eine Karte
   innerhalb von .kpn-kosten-text diese Werte bekommt und nicht die des
   Fliesstexts. */
.kpn-kosten-grid--abstand {
  margin: 24px 0;
}
.kpn-kosten-karte ul {
  margin: 8px 0 0;
  padding-left: 20px;
}
.kpn-kosten-karte li {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 6px;
}
.kpn-kosten-karte li:last-child {
  margin-bottom: 0;
}
.kpn-kosten-karte strong {
  color: var(--ink);
  font-weight: 600;
}
.kpn-kosten-karte ul + p {
  margin-top: 16px;
}

/* Zeitleiste auf /fonio-erfahrungen/, seit 09.10.2026. Gleiches Bild wie die
   Schritte auf /neukundenrabatt/ (.vb3 in vergleich.css): Nummer im blauen
   Kreis links, gestrichelte Linie darunter. Nachgebaut statt vergleich.css
   zu laden, die bringt den ganzen Rechner mit. Wer dort Kreis oder Linie
   aendert, aendert es hier mit. Am Handy fallen Nummer und Linie weg wie
   dort, die Reihenfolge zeigt dann das Datum unter jeder Ueberschrift. */
.kpn-zeit {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 32px 0 112px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.kpn-zeit-punkt {
  position: relative;
  padding: 0 0 72px;
}
.kpn-zeit-num {
  position: absolute;
  left: -80px;
  top: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(4, 75, 185, 0.18);
  z-index: 2;
}
.kpn-zeit-linie {
  position: absolute;
  left: -53px;
  top: 56px;
  bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--line-strong) 0, var(--line-strong) 7px, transparent 7px, transparent 14px);
  z-index: 0;
}

/* Weiter-Link mit Pfeil. min-height ist Tippflaeche. */
.kpn-kosten-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
  transition: color 0.2s, gap 0.2s;
}
.kpn-kosten-text a.kpn-kosten-link {
  text-decoration: none;
}
.kpn-kosten-link:hover {
  color: var(--accent);
  gap: 10px;
}
.kpn-kosten-link .material-symbols-outlined {
  font-size: 16px !important;
}

/* FAQ mit details/summary, ohne Skript. 720 breit und mittig wie
   .kpn-kosten-text. */
.kpn-kosten-faq {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line);
  border-radius: 16px;
  max-width: 720px;
  margin: 0 auto 12px;
}
.kpn-kosten-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.kpn-kosten-faq summary::-webkit-details-marker {
  display: none;
}
.kpn-kosten-faq summary .material-symbols-outlined {
  flex-shrink: 0;
  font-size: 22px !important;
  color: var(--brand);
  transition: transform 0.2s;
}
.kpn-kosten-faq[open] summary .material-symbols-outlined {
  transform: rotate(180deg);
}
.kpn-kosten-faq summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 16px;
}
.kpn-kosten-faq-antwort {
  padding: 0 22px 18px;
}
.kpn-kosten-faq-antwort p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}
.kpn-kosten-faq-antwort a {
  color: var(--brand);
  font-weight: 600;
}

@media (max-width: 768px) {
  .kpn-kosten {
    padding: 0 20px 52px;
  }
  .kpn-zeit {
    padding: 0 20px;
  }
  .kpn-zeit-punkt {
    padding-bottom: 52px;
  }
  .kpn-zeit-num,
  .kpn-zeit-linie {
    display: none;
  }
  .kpn-kosten-head h2 {
    font-size: 22px;
  }
  .kpn-kosten-head p,
  .kpn-kosten-text p,
  .kpn-kosten-text li,
  .kpn-kosten-faq-antwort p {
    font-size: 14px;
  }
  /* Gemessen am 04.10.2026 bei 375 Pixeln: die Karte ist 333 breit, die
     Jahrestabelle brauchte mit 14px und Brutto in einer Zeile 393. Mit 13px
     und umbrechendem "brutto" passt sie ohne seitliches Wischen. */
  .kpn-kosten-tabelle th,
  .kpn-kosten-tabelle td {
    padding: 12px 6px;
    font-size: 13px;
  }
  .kpn-kosten-tabelle th:first-child,
  .kpn-kosten-tabelle td:first-child {
    padding-left: 12px;
  }
  .kpn-kosten-tabelle th:last-child,
  .kpn-kosten-tabelle td:last-child {
    padding-right: 12px;
  }
  .kpn-kosten-tabelle thead th {
    font-size: 11px;
  }
  .kpn-kosten-brutto {
    font-size: 11px;
    white-space: normal;
  }
  .kpn-kosten-tabelle--pakete th:nth-child(2),
  .kpn-kosten-tabelle--pakete td:nth-child(2) {
    display: none;
  }
  .kpn-kosten-min {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    color: var(--ink-soft);
    white-space: nowrap;
  }
  .kpn-kosten-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .kpn-kosten-faq summary {
    padding: 16px 18px;
    font-size: 15px;
  }
  .kpn-kosten-faq-antwort {
    padding: 0 18px 16px;
  }
}