/* ==========================================================================
   Vergleichsseite: Externe CSS
   Geladen nur auf /vergleich/ via is_page()
   Sections: Hero · Calculator · Tabelle · Modals · Mobile-Tabs · Steps · FAQ · CTA
   ========================================================================== */

/* Der alte, seitenspezifische Hero stand hier. Die Seite nutzt seit
   15.09.2026 das gemeinsame .vh-hero aus hero.css. Am 16.09.2026
   entfernt, 128 Zeilen. */

/* ── RECHNER: CALCULATOR SECTION ── */

/* SCOPED CSS - Mobile Optimiert */
#ki-calc-root {
  --table-sep: rgba(4, 75, 185, 0.08);

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: transparent;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

#ki-calc-root *, #ki-calc-root *::before, #ki-calc-root *::after {
  box-sizing: border-box;
}

#ki-calc-root .page-wrapper {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

/* Stand mit 1160px als einziger Block aus der Reihe, Nachbarn sind 880px.
   Gemessen am 16.09.2026 bei 1440px Fensterbreite. */
#ki-calc-root .vergleich-hinweis {
  position: relative;
  max-width: 880px;
  margin: 8px auto 0;
  padding: 20px;
  color: var(--ink-soft);
}

/* RECHNER - MOBILE OPTIMIERT */
/* Die Anzeige gehoert neben die Schieber, nicht darunter. Vorher:
   760px Kasten, 30px Polster, zwei Schieber mit je 200px Mindestbreite
   und eine 220px breite Anzeige plus drei Luecken a 20px. Das ging sich
   um wenige Pixel nicht aus, die Anzeige rutschte in die zweite Zeile
   und der Kasten wurde doppelt so hoch. */
#ki-calc-root .smart-calculator {
  background: var(--card); border-radius: 16px; padding: 24px; margin: 0 auto 60px auto;
  width: 960px; max-width: 100%;
  box-shadow: 0 4px 32px rgba(4, 75, 185, 0.12);
  border: 1px solid rgba(4, 75, 185, 0.08);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  transition: transform 0.3s ease;
}

#ki-calc-root .calc-label {
  font-size: 11px; font-weight: 800; color: var(--ink-soft); margin-bottom: 6px;
  display: flex; justify-content: space-between; width: 100%;
  text-transform: uppercase; letter-spacing: 0.5px;
}

#ki-calc-root .calc-input {
  width: 70px; border: none; background: rgba(243, 244, 246, 0.8); border-radius: 8px;
  text-align: center; font-weight: 900; color: var(--brand); font-size: 24px; padding: 8px 5px;
  outline: none; transition: all 0.2s; font-family: 'Inter', sans-serif;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.03); height: auto; margin: 0;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}
#ki-calc-root .calc-input::-webkit-inner-spin-button,
#ki-calc-root .calc-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#ki-calc-root .calc-input:hover { background: rgba(4, 75, 185, 0.05); }
#ki-calc-root .calc-input:focus { background: var(--card); box-shadow: 0 0 0 2px var(--brand); }

#ki-calc-root .calc-sep { width: 1px; background: var(--line); height: 60px; margin: 0 10px; }

/* Range Slider - Touch Optimiert & Abgerundet */
/* touch-action stand bis zum 22.09.2026 auf none. Damit nahm der Regler jede
   Wischgeste an und gab keine weiter: ueber diesen beiden Reglern liess sich
   die Seite ueberhaupt nicht scrollen, der Finger verstellte nur den Wert.
   pan-y gibt senkrechtes Wischen an die Seite, waagrechtes bleibt beim
   Regler, sonst liesse er sich nicht mehr ziehen.

   Das allein genuegt nicht: ein input type=range setzt seinen Wert schon beim
   ersten Beruehren, bevor der Browser die Geste erkannt hat. Den Teil
   uebernimmt nurAmGriff in vergleich.js, dort steht auch die Begruendung. */
#ki-calc-root input[type=range] {
  width: 100%; height: 8px; background: var(--line); border-radius: 8px;
  outline: none; -webkit-appearance: none; appearance: none;
  margin-top: 10px; padding: 0; border: none; cursor: pointer;
  touch-action: pan-y;
  transition: none;
}
#ki-calc-root input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 28px; height: 28px;
  background: var(--brand); border: 3px solid var(--card); border-radius: 50%;
  cursor: pointer; box-shadow: 0 2px 8px rgba(4, 75, 185, 0.2);
  transition: box-shadow 0.1s, transform 0.1s;
  margin-top: -10px;
}
#ki-calc-root input[type=range]::-webkit-slider-runnable-track {
  height: 8px; background: var(--line); border: none; border-radius: 8px;
}
#ki-calc-root input[type=range]::-moz-range-thumb {
  width: 28px; height: 28px; background: var(--brand);
  border: 3px solid var(--card); border-radius: 50%; cursor: pointer;
  box-shadow: 0 2px 8px rgba(4, 75, 185, 0.2);
}
#ki-calc-root input[type=range]::-moz-range-track {
  height: 8px; background: var(--line); border: none; border-radius: 8px;
}
#ki-calc-root input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.1); box-shadow: 0 4px 12px rgba(4, 75, 185, 0.25);
}

/* Tastaturfokus am Griff.
 *
 * Der Regler trug outline: none ohne Ersatz. Wer mit Tab hierher kam, sah
 * nicht, wo er steht, und die Pfeiltasten verstellten dann eine Zahl, die er
 * nicht sehen konnte. Gemessen am 19.09.2026: :focus-visible griff, outline
 * und box-shadow waren beide none.
 *
 * Der Ring sitzt am Griff, nicht an der 8px hohen Schiene. Er wandert dadurch
 * mit und markiert die Stelle, auf die es ankommt. Weisser Abstand zuerst,
 * dann --accent: so steht der Ring auf beiden Griffen der Seite ab, dem
 * blauen hier und dem weissen im ROI-Rechner.
 */
#ki-calc-root input[type=range]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--accent);
}
#ki-calc-root input[type=range]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--accent);
}

/* RESULT BOX - Zentriert & Mobile Fix */
/* Hinweis unter dem Rechner, sobald der Bedarf ueber das groesste Paket
   geht. Ersetzt seit 17.09.2026 ein Modal, das mitten im Schieben aufsprang
   und weggeklickt werden musste. */
/* Erklaerung unter dem Umschalter. Der Schalter aenderte die Preise, ohne zu
   sagen, was Jahreszahlung bedeutet. Der Besucher fragte sich, ob er zwoelf
   Monate im Voraus zahlt und ob er gebunden ist. */
/* 14px seit 25.09.2026, vorher 12. Hier steht der Provisionshinweis zu den
   Knoepfen darunter, und ein Pflichthinweis darf nicht kleiner sein als der
   Text um ihn herum. Die Tabelle hat 13, die Antworten der FAQ 14. */
/* Pflichtangaben zur Tabelle, seit 27.09.2026. Vorher drei Absaetze ueber und
   207 Woerter in kleinerer Schrift unter der Tabelle. Ein Hinweis darf nicht
   kleiner oder blasser sein als sein Umfeld und steht vor den Knoepfen, siehe
   ressourcen/lernings.md.
   Stichwort links in einer eigenen Spalte, der Text daneben, so breit wie die
   Tabelle und buendig mit ihrer linken Kante. Auf Wunsch des Nutzers, vorher
   war alles zentriert. */
#ki-calc-root .kpn-tabelle-hinweise {
  max-width: 960px;
  margin: 0 auto 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  text-align: left;
}
#ki-calc-root .kpn-tabelle-hinweise > div {
  display: grid;
  grid-template-columns: 5.6em 1fr;
  column-gap: 12px;
}
#ki-calc-root .kpn-tabelle-hinweise > div + div { margin-top: 6px; }
#ki-calc-root .kpn-tabelle-hinweise dt { font-weight: 600; color: var(--ink); }
#ki-calc-root .kpn-tabelle-hinweise dd { margin: 0; }
/* Unter der Tabelle: Auswahl und Quellen. Die Quellen sind keine
   Pflichtangabe und duerfen kleiner sein. */
#ki-calc-root .kpn-tabelle-hinweise--unten { margin: 16px auto 8px; }
#ki-calc-root .kpn-tabelle-quelle { font-size: 13px; }
/* Am Handy nimmt eine eigene Spalte dem Text zu viel Breite. Dort steht das
   Stichwort vorne im Absatz. Das Leerzeichen dazwischen steht im Markup. */
@media (max-width: 768px) {
  #ki-calc-root .kpn-tabelle-hinweise > div { display: block; }
  #ki-calc-root .kpn-tabelle-hinweise dt,
  #ki-calc-root .kpn-tabelle-hinweise dd { display: inline; }
}

#ki-calc-root .calc-result-box {
  background: var(--brand);
  color: var(--card); padding: 20px 15px; border-radius: 16px;
  text-align: center; width: 100%; max-width: 190px; flex-shrink: 0;
  box-shadow: 0 15px 30px -10px rgba(4, 75, 185, 0.35);
  position: relative; overflow: hidden;
  margin: 0 auto;
}
#ki-calc-root .calc-result-box::after {
  content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 60%);
  pointer-events: none;
}
#ki-calc-root .calc-result-box > div:first-child {
  color: var(--card); opacity: 0.85; letter-spacing: 0.12em; font-weight: 700;
  position: relative; z-index: 1;
}
/* Jede Zeile im Kasten hat eine feste Hoehe und bricht nie um, seit
   26.09.2026. Vorher wuchs der Kasten mit dem Text, und die Regler daneben
   rutschten beim Ziehen mit. Lieber ein Auslassungszeichen als ein Sprung. */
#ki-calc-root .res-number {
  font-size: 28px; font-weight: 900; display: block; line-height: 34px;
  white-space: nowrap;
  color: var(--card); font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  position: relative; z-index: 1;
}
/* Ab sechs Stellen, nur ueber das Zahlenfeld erreichbar. Setzt vergleich.js.
   Die Zeilenhoehe oben bleibt, nur die Schrift wird kleiner. */
#ki-calc-root .res-number.is-lang { font-size: 22px; }
#ki-calc-root .res-hours {
  font-size: 13px; opacity: 0.92; display: block; margin-top: 4px;
  white-space: nowrap;
  color: var(--card); position: relative; z-index: 1;
}
/* Welches Paket passt, seit 25.09.2026. In zwei festen Zeilen seit
   26.09.2026: Paket und Monatspreis, darunter ein Hinweis. Schreibt
   vergleich.js. */
#ki-calc-root .res-plan {
  font-size: 12px; display: block;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--card); position: relative; z-index: 1;
}
#ki-calc-root .res-plan-paket,
#ki-calc-root .res-plan-info {
  display: block; line-height: 18px; min-height: 18px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#ki-calc-root .res-plan-paket { font-weight: 700; }
#ki-calc-root .res-plan-info { font-weight: 400; opacity: 0.9; }
#ki-calc-root .toggle-container { text-align: center; margin-bottom: 30px; }
#ki-calc-root .toggle-row {
  display: flex; justify-content: center; align-items: center;
  gap: 12px; font-weight: 700; color: var(--ink); font-size: 14px;
}
/* 28px hoch sieht der Schalter richtig aus, zum Tippen ist das knapp. Die
   Polsterung macht die Flaeche 36px hoch, ohne dass der Schalter groesser
   wird: der Rand um ihn herum faengt den Finger mit ab. */
#ki-calc-root .switch {
  position: relative; display: inline-block; width: 50px; height: 28px;
  margin: 0; flex-shrink: 0;
  box-sizing: content-box; padding: 4px 0;
}
#ki-calc-root .switch .slider { top: 4px; bottom: 4px; }
#ki-calc-root .switch input { opacity: 0; width: 0; height: 0; position: absolute; }
#ki-calc-root .slider {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--line); border-radius: 34px;
  transition: background-color 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}
#ki-calc-root .slider:before {
  position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px;
  background-color: white; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#ki-calc-root input:checked + .slider { background-color: var(--brand); }
#ki-calc-root input:checked + .slider:before { transform: translateX(22px); }
/* Steht seit 18.09.2026 UNTER der Tabelle. Oben war es ein Block aus sechs
   Zeilen Kleingedrucktem zwischen Umschalter und Tabelle. */
/* 13px wie die Tabelle darueber, seit 25.09.2026. Mit 11 war das die
   kleinste Schrift der Seite, und hier stehen die Rabattbedingungen. */

/* Der Provisionshinweis muss vor den Knoepfen in der Tabelle stehen. */

/* STATIC DEAL BADGE (pulsierend) */
/* Das pulsierende Rabatt-Abzeichen ueber der Tabelle stand hier samt
   @keyframes deal-pulse. Es wird seit dem Umbau nirgends mehr erzeugt.
   Am 16.09.2026 entfernt. */

/* TABLE & ALIGNMENT */
#ki-calc-root .table-box {
  background: var(--card); border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--line); overflow: hidden;
  /* Auf dieselbe Breite wie die Rechnerkarte darueber. Seit Scale dazukam
     sind es drei Pakete, mit 760px wurden die Knoepfe zu schmal. 960px ist
     die Hoechstbreite aus docs/design-rules.md. */
  max-width: 960px;
  margin: 0 auto 20px;
}
#ki-calc-root .table-scroll-wrapper {
  width: 100%; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#ki-calc-root table {
  width: 100%; min-width: 100%; border-collapse: separate;
  border-spacing: 0; table-layout: fixed; margin: 0; border: none;
}

#ki-calc-root table td, #ki-calc-root table th {
  text-align: center; vertical-align: middle; padding: 10px 5px;
  border-bottom: 1px solid var(--line) !important;
  font-size: 12px; color: var(--ink-soft); word-wrap: break-word;
  transition: all 0.3s ease;
}

#ki-calc-root table th.col-prod {
  vertical-align: top; padding: 10px 5px 10px 5px;
  border-bottom: 1px solid var(--line) !important;
  background: var(--card); height: 100%;
}

#ki-calc-root .th-content {
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; height: 100%; min-height: 100px;
}

#ki-calc-root thead tr.logo-row th {
  position: sticky; top: 0; z-index: 60; background: var(--card);
  border-bottom: none !important;
}
#ki-calc-root thead tr.plan-row th {
  position: sticky; top: 54px; z-index: 50; background: var(--card);
  border-bottom: 2px solid var(--line) !important;
  box-shadow: 0 4px 16px -4px rgba(4, 75, 185, 0.08);
}
#ki-calc-root thead tr.logo-row th.col-label,
#ki-calc-root thead tr.plan-row th.col-label { z-index: 70; }

#ki-calc-root .provider-logo {
  font-weight: 900; font-size: 16px; color: var(--ink);
  letter-spacing: 0.5px; margin: 0 auto; display: block;
  border: none; box-shadow: none;
}
#ki-calc-root .plan-name {
  display: block; font-size: 15px; font-weight: 700;
  color: var(--ink-soft); margin-top: 0px; margin-bottom: 0px;
}

#ki-calc-root .col-label {
  text-align: left; padding-left: 15px; font-weight: 600;
  color: var(--ink); position: sticky; left: 0; background: var(--card);
  z-index: 40; font-size: 13px; white-space: nowrap;
  box-shadow: 8px 0 16px -4px rgba(4, 75, 185, 0.04);
  border-right: none !important;
  vertical-align: top; padding-top: 10px;
}

#ki-calc-root thead tr.plan-row th.col-label {
  position: sticky;
  left: 0;
}

#ki-calc-root .label-cell-content {
  display: flex; flex-direction: column;
  justify-content: flex-start; align-items: center;
}
#ki-calc-root .label-text-bottom {
  font-weight: 800; color: var(--ink); font-size: 15px;
  margin-bottom: 0px; text-transform: uppercase;
  letter-spacing: 0.5px; text-align: center; width: 100%;
  margin-top: 0px; line-height: 1.5;
}

/* PREIS CONTAINER */
#ki-calc-root .price-wrapper {
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; margin-top: 0px; margin-bottom: 8px;
  min-height: 32px;
}

#ki-calc-root .price-old-slot {
  height: 14px; display: flex; align-items: flex-end;
  justify-content: center; width: 100%; margin-bottom: -2px;
}

#ki-calc-root .old {
  color: var(--ink-soft); font-size: 12px; font-weight: 700;
  text-decoration: line-through; line-height: 1.2;
}

#ki-calc-root .price-group {
  display: flex; align-items: flex-start; justify-content: center;
  line-height: 1; color: var(--ink);
}
#ki-calc-root .price-val {
  font-size: 24px; font-weight: 800; letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
#ki-calc-root .price-curr {
  font-size: 13px; font-weight: 700; margin-top: 2px; margin-left: 1px;
}
#ki-calc-root .price-period {
  font-size: 10px; color: var(--ink-soft); font-weight: 600;
  align-self: flex-end; margin-bottom: 3px; margin-left: 2px;
}

/* CTA BUTTONS */
#ki-calc-root .btn-select {
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto; width: 90%; padding: 10px 0;
  background: var(--brand);
  color: white; text-decoration: none;
  font-size: 12px; font-weight: 700; border-radius: 8px;
  transition: 0.2s; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; border: none; margin-top: auto;
  cursor: pointer; touch-action: manipulation;
  /* Seit 20.10.2026 Satzschreibung wie jeder Knopf der Seite, statt 9 px
     in Grossbuchstaben mit Sperrung. */
  line-height: 1; text-transform: none; letter-spacing: 0;
}
#ki-calc-root .btn-select:hover {
  background: var(--brand);
  transform: translateY(-1px);
  color: white;
}
#ki-calc-root .btn-select:active {
  transform: translateY(0);
}

/* Button Disclaimer */
#ki-calc-root .btn-disclaimer {
  display: block;
  font-size: 9px;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 4px;
  line-height: 1.3;
  font-weight: 600;
}

@keyframes pulse-soft {
  0% { box-shadow: 0 0 0 0 rgba(4, 75, 185, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(4, 75, 185, 0); }
  100% { box-shadow: 0 0 0 0 rgba(4, 75, 185, 0); }
}

#ki-calc-root .highlighted-head .btn-select,
#ki-calc-root .highlighted .btn-select {
  animation: pulse-soft 2s infinite;
  background: var(--brand);
}

#ki-calc-root .icon-check {
  width: 18px; height: 18px; stroke: var(--brand); stroke-width: 3;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
#ki-calc-root .icon-cross {
  width: 16px; height: 16px; stroke: var(--alert); stroke-width: 3;
  fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0.4;
}

/* Die Tabelle hatte einmal eine Fusszeile mit wiederholten Knoepfen.
   Sie steht nicht mehr im HTML. Am 16.09.2026 entfernt. */

#ki-calc-root tbody tr:nth-child(even) td { background: var(--bg); }
#ki-calc-root tbody tr:nth-child(even) td.col-label { background: var(--bg); }
#ki-calc-root tbody tr:nth-child(even) td.highlighted { background: var(--line) !important; }

/* ROW HOVER */
#ki-calc-root tbody tr:hover td { background: rgba(4, 75, 185, 0.06) !important; transition: background 0.15s; }
#ki-calc-root tbody tr:hover td.col-label { background: rgba(4, 75, 185, 0.06) !important; }

/* FOCUS BLUR */
#ki-calc-root .dimmed {
  opacity: 0.35; filter: grayscale(100%) blur(1.5px);
  transition: all 0.3s ease;
}
#ki-calc-root .highlighted {
  background-color: var(--accent-bg) !important; filter: blur(0); opacity: 1;
}
#ki-calc-root .highlighted-head {
  background-color: var(--accent-bg) !important; filter: blur(0); opacity: 1;
}

/* MODAL */
#ki-calc-root .modal-overlay {
  display: none; position: fixed; top: 0; left: 0;
  width: 100%; height: 100%; background: rgba(31, 41, 55, 0.8);
  z-index: 99999; backdrop-filter: blur(5px);
  justify-content: center; align-items: center;
  padding: 20px;
}
#ki-calc-root .modal-box {
  background: var(--card); width: 90%; max-width: 500px;
  padding: 30px 20px; border-radius: 16px; text-align: center;
  animation: popIn 0.3s ease; box-shadow: 0 20px 50px rgba(4, 75, 185, 0.15);
}
@keyframes popIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
#ki-calc-root .modal-title {
  font-size: 22px; font-weight: 700; color: var(--ink);
  margin-bottom: 10px; margin-top: 0;
}
#ki-calc-root .modal-text {
  color: var(--ink-soft); margin-bottom: 25px; line-height: 1.6;
}
#ki-calc-root .btn-modal {
  display: inline-block; background: var(--brand);
  color: white; padding: 14px 36px; border-radius: 8px;
  text-decoration: none; font-weight: 700; margin-top: 10px;
  touch-action: manipulation; border: none; cursor: pointer;
  font-family: inherit; font-size: 14px;
}
#ki-calc-root .btn-modal:hover {
  background: var(--accent);
}

/* GOAI CODE MODAL */
#ki-calc-root .modal-code {
  background: var(--gold-bg); border: 2px dashed var(--gold);
  border-radius: 12px; padding: 20px; text-align: center; margin: 24px 0;
}
#ki-calc-root .modal-code-label {
  font-size: 12px; font-weight: 700; color: var(--gold-dark);
  margin-bottom: 8px; text-transform: uppercase;
}
#ki-calc-root .modal-code-value {
  font-size: 32px; font-weight: 900; color: var(--gold-dark);
  letter-spacing: 2px; user-select: all;
}
#ki-calc-root .modal-steps {
  margin: 24px 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; align-items: center;
}
#ki-calc-root .modal-steps li {
  padding: 12px 0; font-size: 14px; color: var(--ink-soft);
  display: flex; align-items: center; gap: 12px;
}
#ki-calc-root .modal-steps li::before {
  content: "\2713"; display: inline-block; width: 24px; height: 24px;
  background: var(--brand); color: white; border-radius: 50%;
  text-align: center; line-height: 24px; font-weight: 900; flex-shrink: 0;
}
#ki-calc-root .btn-modal.secondary {
  background: var(--bg-low); color: var(--ink);
}
#ki-calc-root .btn-modal.secondary:hover {
  background: var(--line);
}

/* Spaltenbreiten fuer ZWEI Produktspalten.
   Bis 15.09.2026 stand hier 15 % und 12,14 %. Die 12,14 sind 85/7 und waren
   fuer sieben Produktspalten gerechnet, wie bei top3-ki. Mit zwei Spalten
   ergab das 39 % Gesamtbreite, und table-layout: fixed verteilt den Rest
   proportional: die Merkmalspalte wurde 442px breit, jede Paketspalte 358px
   fuer ein 18px grosses Haekchen. */
/* Drei Pakete seit 18.09.2026: Solo, Team, Scale. Vorher 38 + 2 x 31. */
#ki-calc-root th.col-label, #ki-calc-root td.col-label,
#ki-calc-root #row-mins td.col-label {
  width: 31%; border-right: 1px solid var(--line) !important;
}
#ki-calc-root td.col-prod, #ki-calc-root th.col-prod {
  width: 23%; border-right: 1px solid var(--line) !important;
}
#ki-calc-root td.col-prod:last-child, #ki-calc-root th.col-prod:last-child {
  border-right: none !important;
}
/* Die letzte Zeile lag frueher ueber einer Fusszeile mit Knoepfen. Die gibt
   es nicht mehr, die Linie sass dadurch direkt auf dem gerundeten Rand. */
#ki-calc-root tbody tr:last-child td {
  border-bottom: none !important;
}
/* Bleibt bewusst stehen, obwohl derzeit ungenutzt: baue-tabelle.pl setzt
   die Klasse, sobald wieder mehr als ein Anbieter in der Tabelle steht. */
#ki-calc-root .sep-right, #ki-calc-root #row-mins td.sep-right {
  border-right: 1px solid var(--line) !important;
}

/* RESPONSIVE - TABLET & MOBILE */
@media(max-width: 1100px) {
  /* 1200px waren fuer sieben Produktspalten noetig. Mit zweien zwang die
     Regel auf dem Tablet zu 250px Wischen, um eine Spalte mit einem Haekchen
     zu sehen. */
  #ki-calc-root table { min-width: 620px; }
  #ki-calc-root .provider-logo { font-size: 16px; }
  #ki-calc-root td { font-size: 12px; }
}

@media(max-width: 768px) {
  #ki-calc-root .smart-calculator {
    padding: 20px 15px; gap: 15px;
  }

  #ki-calc-root .calc-label { font-size: 10px; }

  #ki-calc-root .calc-input {
    font-size: 22px; width: 60px; padding: 6px 3px;
  }

  #ki-calc-root .toggle-row {
    flex-direction: row; font-size: 13px; gap: 10px;
  }

  #ki-calc-root .calc-sep {
    width: 100%; height: 1px; margin: 15px 0;
  }

  #ki-calc-root .calc-result-box {
    width: 100%; max-width: 100%; padding: 18px 12px;
  }

  #ki-calc-root .res-number { font-size: 26px; }
  #ki-calc-root .res-hours { font-size: 12px; }

  #ki-calc-root .modal-title { font-size: 18px; }
  #ki-calc-root .modal-box { padding: 20px 15px; max-width: 340px; }
  #ki-calc-root .modal-text { font-size: 14px; margin-bottom: 16px; }
  #ki-calc-root .btn-modal { padding: 12px 24px; font-size: 13px; }
  #ki-calc-root .modal-code-value { font-size: 22px; letter-spacing: 1px; }

  #ki-calc-root input[type=range]::-webkit-slider-thumb {
    width: 36px; height: 36px;
    margin-top: -14px;
  }
  #ki-calc-root input[type=range]::-moz-range-thumb {
    width: 36px; height: 36px;
  }
}

@media(max-width: 480px) {
  #ki-calc-root .smart-calculator { padding: 15px 12px; }
  #ki-calc-root .calc-input { font-size: 20px; width: 55px; }
  #ki-calc-root .res-number { font-size: 24px; }
  #ki-calc-root .toggle-row { font-size: 12px; }
}

/* ===== MOBILE: Tabs + Karten statt Tabelle ===== */
@media (max-width: 768px) {
  #ki-calc-root .mobile-tabs {
    display: flex; gap: 0; margin-bottom: 0;
    border-radius: 12px 12px 0 0; overflow: hidden;
    background: var(--bg-low); border: 1px solid rgba(4, 75, 185, 0.08); border-bottom: none;
  }
  #ki-calc-root .mobile-tab {
    flex: 1; padding: 12px 8px; text-align: center;
    font-size: 13px; font-weight: 700; color: var(--ink-soft);
    background: var(--bg-low); border: none; cursor: pointer;
    transition: all 0.25s ease; font-family: inherit;
  }
  #ki-calc-root .mobile-tab.active {
    background: var(--card); color: var(--brand);
    box-shadow: 0 -2px 0 var(--brand) inset;
  }
  #ki-calc-root .mobile-tab img {
    height: 22px; width: auto; display: block;
    margin: 0 auto 4px; object-fit: contain;
  }
  #ki-calc-root .table-box .table-scroll-wrapper { display: none; }
  #ki-calc-root .mobile-cards-container { display: block; padding: 0; }
  #ki-calc-root .mobile-provider-section { display: none; }
  #ki-calc-root .mobile-provider-section.active { display: block; }
  #ki-calc-root .mobile-plans-row {
    display: flex; gap: 10px; padding: 14px; background: var(--card);
  }
  /* min-width: 0 gehoert zu flex: 1.
   *
   * Ohne das steht min-width auf auto, und dann schrumpft eine Flex-Box nie
   * unter ihren Inhalt. Die Scale-Karte braucht wegen des vorangestellten
   * "ab" mehr Platz als die anderen zwei: drei Karten kamen auf 298px, die
   * Reihe hat auf einem 320px-Handy aber nur 263. Die dritte Karte ragte
   * 48px heraus und war halb abgeschnitten. Gemessen am 18.09.2026.
   * Dasselbe Muster wie bei den Branchenkacheln weiter unten.
   */
  #ki-calc-root .mobile-plan-card {
    flex: 1; min-width: 0;
    background: var(--bg); border: 1px solid rgba(4, 75, 185, 0.08);
    border-radius: 12px; padding: 16px 8px; text-align: center;
    transition: all 0.25s ease; cursor: pointer;
  }
  #ki-calc-root .mobile-plan-card.active {
    border-color: var(--brand); background: var(--accent-bg);
    box-shadow: 0 0 0 1px var(--brand), 0 4px 16px rgba(4, 75, 185, 0.08);
  }
  #ki-calc-root .mobile-plan-card .plan-name {
    font-size: 14px; font-weight: 800; color: var(--ink);
    margin-bottom: 6px; display: block;
  }
  #ki-calc-root .mobile-plan-card .price-val { font-size: 22px; font-weight: 900; color: var(--ink); }
  #ki-calc-root .mobile-plan-card .price-curr { font-size: 12px; font-weight: 700; }
  #ki-calc-root .mobile-plan-card .price-period { font-size: 10px; color: var(--ink-soft); }
  #ki-calc-root .mobile-plan-card .old { font-size: 11px; display: block; margin-bottom: 2px; min-height: 14px; }
  #ki-calc-root .mobile-features {
    list-style: none; margin: 0; padding: 0 12px 12px;
    background: var(--card); border-radius: 0 0 12px 12px;
  }
  #ki-calc-root .mobile-feature-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 8px; border-bottom: 1px solid rgba(188, 202, 192, 0.1); font-size: 13px;
  }
  #ki-calc-root .mobile-feature-row:last-child { border-bottom: none; }
  #ki-calc-root .mobile-feature-label { color: var(--ink-soft); font-weight: 500; flex: 1; padding-right: 8px; }
  #ki-calc-root .mobile-feature-value { color: var(--ink); font-weight: 700; text-align: right; flex-shrink: 0; }
  #ki-calc-root .mobile-cta {
    display: block; margin: 12px; padding: 14px;
    background: var(--brand); color: white; text-align: center;
    text-decoration: none; font-weight: 700; font-size: 15px;
    border-radius: 10px; border: none; cursor: pointer;
    font-family: inherit; animation: pulse-soft 2s infinite;
  }
  #ki-calc-root .mobile-cta-disclaimer {
    display: block; text-align: center; font-size: 10px;
    color: var(--ink-soft); margin-bottom: 12px; font-style: italic;
  }
  #ki-calc-root .mobile-deal-badge { display: none; }
}
#ki-calc-root .mobile-deal-badge span {
  font-size: 11px; font-weight: 900; color: var(--warn);
  text-transform: uppercase; letter-spacing: 0.3px;
}
#ki-calc-root .mobile-feature-value .icon-check { width: 16px; height: 16px; }
#ki-calc-root .mobile-feature-value .icon-cross { width: 14px; height: 14px; }

@media (min-width: 769px) {
  #ki-calc-root .mobile-tabs,
  #ki-calc-root .mobile-cards-container { display: none !important; }
}
#ki-calc-root .mobile-cta {
  display: block; margin: 12px; padding: 14px;
  background: var(--brand); color: white; text-align: center;
  text-decoration: none; font-weight: 700; font-size: 15px;
  border-radius: 10px; border: none; cursor: pointer;
  font-family: inherit; animation: pulse-soft 2s infinite;
  width: calc(100% - 24px);
}

/* Hier lag der V2-Entwurf des unteren Seitenbereichs mit eigenen Stats,
   Branchen, FAQ und CTA. Abgeloest durch den vb3-Block weiter unten,
   kein einziges .v2-Element steht im HTML. Am 16.09.2026 entfernt,
   369 Zeilen. */

/* Hinweis-Text unter Tabelle */
.vergleich-hinweis {
  margin-top: -30px;
  margin-bottom: 20px;
  text-align: center;
}
/* Traegt den Affiliate-Hinweis, deshalb seit 25.09.2026 14px statt 11. */
.vergleich-hinweis p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ===========================================
   REDUCED MOTION: Accessibility Fallback
   =========================================== */
@media (prefers-reduced-motion: reduce) {
  #ki-calc-root .modal-overlay {
    backdrop-filter: none;
    background: rgba(31, 41, 55, 0.95);
  }

}

/* ==========================================================================
   Performance & Accessibility Hints
   ========================================================================== */

/* Lazy rendering für viewport-ferne FAQ- und Branchen-Sections */
.vb3-faq {
  content-visibility: auto;
  contain-intrinsic-size: auto 80px;
}
.vb3-branche {
  content-visibility: auto;
  contain-intrinsic-size: auto 140px;
}
.vb3-branche:hover { will-change: transform; }

/* Tabellenscroll-Performance */
#ki-calc-root .table-scroll-wrapper {
  contain: layout paint;
}

/* Mobile-Provider-Cards lazy */
#ki-calc-root .mobile-provider-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* ===========================================
   CONTENT-BREAKOUT: Vergleichstabelle braucht Breite
   Überschreibt GeneratePress Container-Limit nur auf dieser Seite.
   =========================================== */
body.page-id-37 .site.grid-container,
body.page-id-37 .inside-article {
  max-width: 1320px;
}
/* layout.css setzt .site-content global auf padding: 0 !important. Ohne das
   !important hier war diese Regel wirkungslos, die Tabelle stand also ohne
   den gemeinten Seitenrand. Oben bleibt es bei 0, dafuer sorgt der Hero. */
body.page-id-37 .site-content {
  padding: 0 16px !important;
}
/* Am Handy kein eigener Rand mehr, seit 21.10.2026. Mit den 8px hier und
   den 16px von .page-wrapper stand die Rabattseite bei 24px, alle anderen
   Seiten bei 20px. Den Rand traegt jetzt .page-wrapper allein. */
@media (max-width: 768px) {
  body.page-id-37 .site-content {
    padding: 0 !important;
  }
}

/* ===========================================
   SERVICE-CALLOUT (20% Einrichtungs-Service)
   =========================================== */
.kpn-service-callout {
  max-width: 860px;
  margin: 48px auto 24px;
  padding: 0 16px;
}
/* Der Kasten steht in .page-wrapper, der schon einen Rand hat. Mit dem
   eigenen Polster darauf war er am Handy und am Tablet schmaler als die
   Tabelle, am 28.09.2026 gemeldet. Ohne Polster und mit 828px Hoechstbreite
   bleibt er am Desktop genau so breit wie vorher. */
#ki-calc-root .kpn-service-callout {
  max-width: 828px;
  padding-left: 0;
  padding-right: 0;
}

.kpn-service-callout-inner {
  position: relative;
  background: var(--brand);
  color: var(--card);
  border-radius: 20px;
  padding: 40px 36px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(4, 75, 185, 0.05),
              0 16px 40px rgba(4, 75, 185, 0.18);
  overflow: hidden;
}

/* 28px wie jede andere Abschnittsueberschrift der Seite. Gemessen am
   16.09.2026 standen hier drei Groessen nebeneinander: 24, 28 und 30. */
.kpn-service-callout-inner h2,
.kpn-service-callout-inner h3 {
  font-size: 28px;
  font-weight: 700;
  color: var(--card);
  letter-spacing: -0.4px;
  margin: 0 0 14px;
  line-height: 1.25;
}

.kpn-service-callout-inner p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  max-width: 560px;
  margin: 0 auto 24px;
}

.kpn-service-callout-inner strong {
  color: var(--card);
  font-weight: 700;
}

.kpn-service-callout-btn {
  display: inline-block;
  background: var(--card);
  color: var(--brand);
  font-size: 14px;
  font-weight: 700;
  padding: 14px 36px;
  border-radius: 8px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.25s;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.kpn-service-callout-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  color: var(--brand);
}

@media (max-width: 768px) {
  .kpn-service-callout {
    margin: 32px auto 16px;
  }
  .kpn-service-callout-inner {
    padding: 32px 22px;
  }
  .kpn-service-callout-inner h2,
.kpn-service-callout-inner h3 {
    font-size: 20px;
  }
}

/* ===========================================
   VB3: Anbieter-Details, Stats, Branchen, FAQ, CTA
   (ausgelagert aus HTML/pages/neukundenrabatt/04-bottom.html)
   =========================================== */
  /* ===== VB3 BASE (Sapphire Deep) ===== */
  .vb3 {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 32px 0 112px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.6;
    color: var(--ink);
  }
  .vb3 *, .vb3 *::before, .vb3 *::after { box-sizing: border-box; }

  /* ===== STEP LAYOUT ===== */
  .vb3-section {
    position: relative;
    padding: 0 0 80px;
  }
  .vb3-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-family: 'Inter', sans-serif;
    font-size: 22px; font-weight: 700;
    box-shadow: 0 8px 24px rgba(4, 75, 185, 0.18);
    z-index: 2;
  }
  /* Die Schrittlinie laeuft ueber zwei WordPress-Bloecke: Schritt 1 steht in
     03-empfehlung, Schritt 2 bis 5 in 04-bottom. Den Abstand, den WordPress
     zwischen zwei Bloecken setzt, konnte die Linie nicht ueberbruecken, sie
     riss genau ueber der 2 auf. Dieses Stueck zieht sie nach oben weiter. */
  .vb3-num--anschluss::before {
    content: '';
    position: absolute;
    left: 27px;
    bottom: 56px;
    width: 2px;
    height: 96px;
    background: repeating-linear-gradient(to bottom, var(--line-strong) 0, var(--line-strong) 7px, transparent 7px, transparent 14px);
  }

  .vb3-line {
    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;
  }
  .vb3-body { padding-top: 0; }

  .vb3-header {
    text-align: center;
    margin-bottom: 40px;
  }
  .vb3 h2 {
    font-family: 'Inter', sans-serif;
    font-size: 28px; font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.4px;
    line-height: 1.2;
    margin: 0 0 8px;
  }
  .vb3-sub {
    font-size: 16px; color: var(--ink-soft);
    line-height: 1.7; margin: 0;
    margin-left: auto;
    margin-right: auto;
  }
  /* Hier stand die Kennzahlenreihe mit animierten Zaehlern.
     Sie steht nicht im HTML dieser Seite, vergleich.js sucht
     #vb3-stats vergeblich. Am 16.09.2026 entfernt. */

  /* ===== BRANCHEN GRID ===== */
  /* Sechs Kacheln. Bei vier Spalten blieben in der zweiten Reihe zwei Felder
     leer, bei drei gehen 3 und 3 auf. Die Aufklappboxen sind in
     04-bottom.html und vergleich.js entsprechend umgehaengt. */
  .vb3-branchen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .vb3-branche {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 1px 2px rgba(11,42,74,0.04), 0 8px 24px rgba(11,42,74,0.05);
    position: relative;
  }
  /* Kein transform: beim Durchklicken sprangen die Kacheln auf und ab. */
  .vb3-branche:hover {
    background: var(--brand);
    border-color: var(--brand);
    box-shadow: 0 12px 28px rgba(4, 75, 185, 0.18);
  }
  .vb3-branche:hover .vb3-branche-icon svg { stroke: var(--card); }
  .vb3-branche:hover .vb3-branche-name { color: var(--card); }
  .vb3-branche:hover .vb3-branche-hint { color: rgba(255,255,255,0.78); }
  .vb3-branche.active {
    background: var(--brand);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 94, 240, 0.22), 0 12px 28px rgba(4, 75, 185, 0.22);
  }
  .vb3-branche.active .vb3-branche-icon svg { stroke: var(--card); }
  .vb3-branche.active .vb3-branche-name { color: var(--card); }
  .vb3-branche.active .vb3-branche-hint { color: rgba(255,255,255,0.78); }

  .vb3-branche-icon { margin: 0 auto 12px; }
  .vb3-branche-icon svg {
    width: 32px; height: 32px;
    stroke: var(--brand); fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    transition: stroke 0.3s;
  }
  .vb3-branche-name {
    font-family: 'Inter', sans-serif;
    font-size: 12px; font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px;
    transition: color 0.3s;
  }
  .vb3-branche-hint {
    font-size: 10px; color: var(--ink-soft);
    transition: color 0.3s;
  }

  /* Mobile-Detail-Boxen auf Desktop verstecken */
  .vb3-detail-mobile { display: none; }
  .vb3-detail-desktop { display: block; }
  @media (max-width: 768px) {
    .vb3-detail-mobile { display: block; }
    .vb3-detail-desktop { display: none; }
  }

  /* Branchen Detail Box */
  .vb3-branche-detail {
    grid-column: 1 / -1;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 16px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    border: 0 solid var(--line);
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, padding 0.3s ease, border-width 0.1s;
    box-shadow: var(--shadow-soft);
    padding: 0 28px;
  }
  .vb3-branche-detail.visible {
    max-height: 200px;
    opacity: 1;
    padding: 24px 28px;
    border-width: 1px;
  }
  .vb3-branche-detail h3 {
    font-family: 'Inter', sans-serif;
    font-size: 15px; font-weight: 700;
    color: var(--ink);
    margin: 0 0 8px;
    letter-spacing: -0.2px;
  }
  .vb3-branche-detail p {
    font-size: 14px; color: var(--ink-soft);
    line-height: 1.7; margin: 0;
  }

  /* ===== FAQ ===== */
  .vb3-faq-list { display: flex; flex-direction: column; gap: 6px; }
  .vb3-faq {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s;
  }
  .vb3-faq[open] {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px var(--brand);
  }
  .vb3-faq summary {
    padding: 18px 24px;
    font-family: 'Inter', sans-serif;
    font-size: 15px; font-weight: 600;
    color: var(--ink);
    cursor: pointer; list-style: none;
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; line-height: 1.4;
    user-select: none;
    transition: background 0.15s;
  }
  .vb3-faq summary:hover { background: var(--bg); }
  .vb3-faq summary::-webkit-details-marker { display: none; }
  .vb3-faq summary::marker { display: none; content: ""; }
  .vb3-faq-chev {
    flex-shrink: 0; width: 20px; height: 20px;
    transition: transform 0.25s ease;
  }
  .vb3-faq-chev svg {
    width: 20px; height: 20px;
    stroke: var(--line); stroke-width: 2; fill: none;
  }
  .vb3-faq[open] .vb3-faq-chev { transform: rotate(180deg); }
  .vb3-faq[open] .vb3-faq-chev svg { stroke: var(--brand); }
  .vb3-faq-ans {
    padding: 0 24px 18px;
    font-size: 14px; color: var(--ink-soft);
    line-height: 1.7;
    border-top: 1px solid var(--line);
    padding-top: 16px; margin: 0 12px;
  }

  /* Antworten duerfen mehrere Absaetze haben, seit die Rabattfrage Fonio und
     goai getrennt erklaert. Sonst liest jemand den goai-Code als Fonio-Code. */
  .vb3-faq-ans p {
    margin: 0 0 12px;
  }

  .vb3-faq-ans p:last-child {
    margin-bottom: 0;
  }

  /* ===========================================
     EMPFEHLUNG: Fonio links, goai rechts
     Loest das gestapelte Akkordeon ab. Beide Karten
     sind gleich breit, weil die CLAUDE.md Anbieter
     gleichwertig darstellen will.
     =========================================== */
  .kpn-emp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
  }

  /* Beide Karten gleich hoch, der Knopf sitzt unten buendig.
     Ohne das haengt er an der Textlaenge und die Karten wirken schief. */
  .kpn-emp-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    padding: 24px;
    display: flex;
    flex-direction: column;
  }

  /* Anbieterlogo statt Symbol. Beide auf dieselbe Hoehe gebracht, die
     Breite ergibt sich aus dem Seitenverhaeltnis: fonio 300x94 wird
     rund 90px breit, goai 300x179 rund 47px. Kein Co-Branding: jedes
     Logo steht allein in seiner Karte, nie zusammen mit dem eigenen. */
  .kpn-emp-logo {
    display: block;
    width: auto;
    height: 44px;
    max-width: 170px;
    object-fit: contain;
    object-position: center;
  }

  /* Die beiden Dateien sind verschieden beschnitten, gemessen am 18.09.2026:
     fonio.png traegt 14 % durchsichtigen Rand oben, goai.png nur 3 %. Bei
     gleicher Bildhoehe sitzt goai deshalb hoeher und wirkt groesser. Die
     Hoehen sind so gewaehlt, dass das sichtbare Zeichen bei beiden rund 30px
     hoch ist. */
  .kpn-emp-logo[src*="goai"] {
    height: 34px;
  }

  /* Die Ueberschrift steht seit 18.09.2026 unter dem Logo und nennt nicht mehr
     den Markennamen, sondern wofuer der Anbieter steht. Den Namen traegt das
     Logo. */
  .kpn-emp-card h3 {
    margin: 0 0 8px;
    font-size: 18px; font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--ink);
  }

  /* Kopf enthaelt nur noch das Logo, mittig ueber der Karte. */
  /* Feste Hoehe und mittig: damit ist der Abstand zur Kartenkante bei beiden
     Logos gleich, unabhaengig vom Rand in der Datei. */
  .kpn-emp-kopf {
    height: 48px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .kpn-emp-lead {
    margin: 0 0 20px;
    font-size: 14px; line-height: 1.7;
    color: var(--ink-soft);
  }

  .kpn-emp-card h4 {
    margin: 0 0 10px;
    font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--ink-soft);
  }

  .kpn-emp-liste {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
  }
  .kpn-emp-liste li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; line-height: 1.6;
    color: var(--ink);
    padding: 6px 0;
  }
  .kpn-emp-liste svg {
    flex-shrink: 0;
    width: 16px; height: 16px;
    margin-top: 3px;
    fill: none; stroke: var(--ok); stroke-width: 2.5;
    stroke-linecap: round; stroke-linejoin: round;
  }

  .kpn-emp-fazit {
    margin: 0 0 24px;
    padding: 16px;
    background: var(--bg-low);
    border-radius: 12px;
    font-size: 13px; line-height: 1.7;
    color: var(--ink-soft);
  }

  .kpn-emp-cta { margin: auto 0 0; text-align: center; }
  .kpn-emp-cta a {
    display: inline-block;
    background: var(--brand);
    color: var(--card);
    text-decoration: none;
    padding: 12px 24px;
    border-radius: var(--radius-button);
    font-size: 14px; font-weight: 700;
    transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .kpn-emp-cta a:hover { background: var(--brand-hover); }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 768px) {
    .vb3 { padding: 0 20px; }
    .kpn-emp-grid { grid-template-columns: 1fr; gap: 16px; }
    .kpn-emp-card { padding: 20px; }
    .vb3 h2 { font-size: 22px; letter-spacing: -0.4px; }
    .vb3-sub { font-size: 14px; }

    .vb3-section { padding-bottom: 40px; }
    .vb3-section:first-child { padding-top: 0; }
    .vb3-num { display: none; }
    .vb3-line { display: none; }
    .vb3-header { margin-bottom: 24px; }

    /* minmax(0, 1fr), nicht 1fr.
     *
     * 1fr heisst in einem Grid "minmax(auto, 1fr)", und auto laesst die Spalte
     * nie schmaler werden als ihr Inhalt. Die Kacheln kamen dadurch auf feste
     * 166px, zweimal plus 10px Abstand sind 342px. Auf einem Handy mit 360px
     * Bildschirm bleiben nach dem Polster aber nur 320px, also ragten sie 22px
     * hinaus und die ganze Seite liess sich seitlich schieben. Gemessen am
     * 18.09.2026 bei 375px Geraetebreite. Mit minmax(0, ...) duerfen die
     * Spalten schrumpfen, die Kacheln werden 155px und passen. */
    .vb3-branchen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .vb3-branche { padding: 18px 12px; }
    .vb3-branche-icon svg { width: 28px; height: 28px; }
    .vb3-branche-name { font-size: 11px; }

    .vb3-faq summary { padding: 14px 18px; font-size: 14px; }
    .vb3-faq-ans { font-size: 13px; padding: 0 18px 14px; margin: 0 8px; }

  }

/* Fehlende Angabe in der Tabelle.
   Absichtlich unauffaellig und nicht rot: "wir haben nichts gefunden" ist
   kein Mangel des Anbieters. Bis 25.08.2026 stand an diesen Stellen ein
   rotes Kreuz, das etwas anderes behauptet hat. */
.zelle-unbekannt {
  color: var(--ink-soft);
  font-size: 0.9em;
  cursor: help;
  border-bottom: 1px dotted currentColor;
}

/* ==========================================================================
   Was neben der Tabelle steht

   Uebernommen von top3-ki am 25.08.2026, Farben auf die Kiphonaut-Palette
   gebracht. Hier landen drei Faelle, die in einer Preistabelle nichts
   verloren haben: Tarife mit Startpreis statt Festpreis, goai ohne jeden
   Listenpreis, und die Bausteine, die auf den Monatspreis obendraufkommen.
   Der Inhalt wird von scripts/baue-tabelle.pl erzeugt.
   ========================================================================== */

/* Grundregeln des Blocks. Bei top3-ki stehen sie als <style> im
   Seiteninhalt, hier gehoeren sie in die Stildatei. Farben und Schrift auf
   die Kiphonaut-Palette gebracht, Manrope gibt es hier nicht. */
/* 1180px stammten aus der Zeit mit drei Anbietern und drei Karten je Reihe.
   Gemessen am 15.09.2026: der Block stand 1160px breit unter einer 760px
   breiten Tabelle, die beiden Karten waren je 542px breit fuer eine kurze
   Liste. 880px ist dieselbe Breite wie Methodik-, Vertrags- und vb3-Block. */
/* Innen 960px, genau so breit wie die Tabelle darueber. */
.vmehr {
  max-width: 1024px;
  margin: 0 auto;
  padding: 48px 32px 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
}
/* Beide .vmehr-Bloecke stehen in .page-wrapper, der schon einen Rand hat.
   Das seitliche Polster kam dazu, die Kaesten waren deshalb am Tablet und am
   Handy schmaler als die Tabelle: bei 375 Pixel 295 statt 327, am 28.09.2026
   gemeldet. Ohne Polster und mit 960px Hoechstbreite sind sie ueberall so breit
   wie die Tabelle, am Desktop wie vorher. Schlaegt auch die Regel unten mit
   dem 16px-Rand fuer das Handy. */
#ki-calc-root .page-wrapper .vmehr {
  max-width: 960px;
  padding-left: 0;
  padding-right: 0;
}
.vmehr *, .vmehr *::before, .vmehr *::after { box-sizing: border-box; }
/* Mittig wie jeder andere Sektionskopf der Seite. Beide Koepfe standen als
   einzige linksbuendig, dadurch kippte der Block optisch nach links. */
.vmehr-kopf { margin-bottom: 24px; text-align: center; }
.vmehr-kopf h2,
.vmehr-kopf h3 {
  font-family: 'Inter', sans-serif;
  /* 18px waren kleiner als das H3 "Fonio" weiter unten mit 20px: eine
     Ebene hoeher, aber zwei Punkt kleiner. */
  font-size: 28px; font-weight: 700;
  letter-spacing: -0.4px; margin: 0 0 8px; color: var(--ink);
}
.vmehr-kopf p {
  font-size: 14px; color: var(--ink-soft); line-height: 1.7;
  margin: 0 auto; max-width: 620px;
}
/* Nur noch eine Karte, seit Fonio Scale in der Tabelle steht. */
.vmehr-grid--einzeln { grid-template-columns: 1fr; }

#ki-calc-root .price-ab {
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  align-self: flex-end; margin-bottom: 4px; margin-right: 2px;
}

.vmehr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.vmehr-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.vmehr-item .vmehr-name { font-size: 14px; font-weight: 700; margin: 0 0 2px; }
.vmehr-item .vmehr-info { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 0; }
.vmehr-preis {
  font-family: 'Inter', sans-serif;
  font-size: 20px; font-weight: 800; white-space: nowrap;
}
.vmehr-preis span { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
@media (max-width: 768px) {
  .vmehr { padding: 20px 20px 0; }
  .vmehr-grid { grid-template-columns: 1fr; }
}

/* --- Desktop, uebernommen von top3-ki ---
Die Grundregeln (.vmehr, .vmehr-item, .vmehr-preis) liegen noch als
   <style> im Seiteninhalt und stehen im Dokument nach dieser Datei. Bei
   gleicher Spezifitaet gewinnen sie deshalb. Alles hier ist entweder ein
   neuer Klassenname oder mit .vmehr davor geschrieben, damit es sticht.
   Der Rest des Blocks gehoert spaeter genauso hierher wie der VB3-Teil.
   ========================================================================== */

/* Drei statt zwei Spalten. Bei den Zusatzpaketen sind die Kaesten
   schmaler, davon passen mehr in eine Reihe. */
/* Zwei Karten je Block, seit VITAS raus ist. Drei Spalten liessen rechts ein
   372px breites Loch, und das zweimal untereinander. */
.vmehr .vmehr-grid,
.vmehr .vmehr-grid-drei { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
/* Eine einzelne Karte laeuft ueber die volle Breite. Muss hier stehen und
   nicht beim Modifier weiter oben: .vmehr .vmehr-grid ist staerker als
   .vmehr-grid--einzeln und wuerde ihn sonst ueberschreiben. */
.vmehr .vmehr-grid--einzeln { grid-template-columns: 1fr; }
.vmehr-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vmehr-liste li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bg-low);
}
.vmehr-liste li:last-child { border-bottom: 0; padding-bottom: 0; }
.vmehr-liste li > span {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vmehr-liste li > span i {
  font-style: normal;
  font-weight: 400;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.vmehr-liste li > b {
  /* Manrope hat andere Ziffernformen als Inter. Bei vier Preisen
     untereinander faellt der Bruch auf. */
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  text-align: right;
  line-height: 1.25;
}
.vmehr-liste li > b em {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: line-through;
}
.vmehr-fussnote {
  font-size: 11px;
  color: var(--ink-soft);
}
.vmehr .vmehr-item {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
}
.vmehr-marke {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
}
.vmehr-marke img {
  max-height: 28px;
  width: auto;
  max-width: 115px;
  object-fit: contain;
  object-position: left center;
}
.vmehr-fuss {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid var(--bg-low);
}
.vmehr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  background: var(--brand);
  color: var(--card);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  white-space: nowrap;
  transition: transform 0.2s, box-shadow 0.2s;
}
.vmehr-btn:hover {
  color: var(--card);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(4, 75, 185, 0.25);
}
.vmehr-btn:focus-visible {
  outline: 3px solid var(--brand-hover);
  outline-offset: 2px;
}
.vmehr-quelle {
  /* 13 statt 11 seit 27.09.2026: "netto" gehoert zur Preisangabe und darf
     nicht kleiner sein als der Text daneben. */
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 18px 0 0;
  text-align: center;
}
@media (max-width: 1024px) {
  .vmehr .vmehr-grid,
  .vmehr .vmehr-grid-drei { grid-template-columns: repeat(2, 1fr); }
  .vmehr .vmehr-grid--einzeln { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .vmehr .vmehr-grid,
  .vmehr .vmehr-grid-drei { grid-template-columns: 1fr; }
}
.vmehr-fuss {
  flex-wrap: nowrap;
}
.vmehr-fussnote {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
}
.vmehr-btn {
  flex: 0 0 auto;
}

/* --- Mobil, uebernommen von top3-ki ---
   Stand ohne Medienabfrage im Stylesheet, dadurch galten diese
   Regeln auch am Desktop. Am 26.08.2026 nachgetragen. --- */
@media (max-width: 768px) {
  #content .vmehr .vmehr-grid,
  #content .vmehr .vmehr-grid-drei {
    grid-template-columns: minmax(0, 1fr);
  }
  #content .vmehr .vmehr-grid--einzeln {
    grid-template-columns: minmax(0, 1fr);
  }
  #content .vmehr-item {
    min-width: 0;
  }
  #content .vmehr-item > * {
    min-width: 0;
    max-width: 100%;
  }
  /* Am 19.08.2026 bekam .vmehr-fuss flex-wrap: nowrap, damit der Knopf in den
     Zusatzpaket-Karten neben der Fussnote bleibt. In den Volumen-Karten steht
     dort aber der Preis, und Preis plus Knopf brauchen mehr Platz als die
     Karte hat: der Knopf stand bis zu 60px heraus. Am Handy liegen die Karten
     ohnehin untereinander, gleiche Kartenhoehe spielt keine Rolle mehr.

     Mit blossem Umbruch entschied dann aber die Beschriftung, wie eine Karte
     aussieht. Gemessen bei 360px am 23.09.2026: "Bei Fonio starten" ist 130
     Pixel breit und blieb neben der Fussnote stehen, rechtsbuendig.
     "Konditionen ansehen" ist 153 breit, passte nicht mehr daneben, rutschte
     in eine eigene Zeile und stand dort linksbuendig. Zwei Karten
     untereinander, zwei Knoepfe an verschiedenen Stellen.

     Deshalb am Handy immer untereinander, und der Knopf nimmt die volle
     Breite. Damit steht er in jeder Karte an derselben Stelle, unabhaengig
     davon, wie lang seine Beschriftung ist, und er ist mit dem Daumen leichter
     zu treffen. Dieselbe Loesung wie auf top3-ki.de. */
  #content .vmehr-fuss {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  #content .vmehr-btn {
    width: 100%;
  }
  #content .vmehr-quelle,
  #content .vmehr-fussnote,
  #content .vb3-branche-name {
    font-size: 12px;
  }
  #content .vmehr-liste em,
  #content .vb3-branche-hint {
    font-size: 11px;
  }
  #content .vmehr-btn {
    min-height: 44px;
  }
}

/* ===========================================
   SEHR SCHMALE GERAETE (bis 360px)

   Steht bewusst am Dateiende und auf oberster Ebene. Eine @media-Regel in
   einer anderen @media-Regel ist erst seit CSS Nesting erlaubt und nicht
   ueberall verlaesslich, deshalb hier getrennt.
   =========================================== */
@media (max-width: 360px) {
  /* Der Preis darf umbrechen.
     Bei 320px Bildschirm ist eine Mobilkarte 72px breit, "ab 599 € / Mt."
     braucht 70. Bei Scale fiel das "/ Mt." aus der Karte, damit stand dort
     ein Preis ohne Zeitraum. Umbruch statt kleinerer Schrift: die drei
     Karten bleiben gleich hoch und der Preis behaelt seine Groesse, die
     Karte wird nur 29px hoeher. Gemessen am 18.09.2026.

     Seit dem 23.09.2026 steht der Umbruch bereits in der 768er-Abfrage, und
     dort ist auch festgelegt, WO umgebrochen wird: "/ Mt." bekommt immer eine
     eigene Zeile, der Rest nie. Diese Regel hier ist seitdem eine
     Wiederholung und bleibt nur stehen, damit die Reihenfolge der Abfragen
     nichts kippt, falls oben etwas geaendert wird. */
  #ki-calc-root .mobile-plan-card .price-group {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Die Zahl eine Spur kleiner, damit "ab 599 €" in eine Zeile passt.
     Seit dem 23.09.2026 bricht die erste Zeile nicht mehr um, sie muesste
     sonst aus der Karte ragen. Bei 320px hat eine Karte 61 Pixel Innenraum,
     "ab 599 €" braucht in 22px Schrift 68 und in 20px noch 62: es bleibt
     knapp, deshalb faengt das Polster der Karte den Rest ab. Solo und Team
     brauchen 50 beziehungsweise 46 und haetten den Platz, bekommen aber
     dieselbe Groesse: drei verschieden grosse Preise nebeneinander lesen sich
     wie drei verschieden wichtige Angebote. */
  #ki-calc-root .mobile-plan-card .price-val {
    font-size: 20px;
  }
}

/* ===========================================
   HANDY-DURCHSICHT 19.09.2026
   Gegenstueck zum Abschnitt gleichen Namens in layout.css. Nur 768er-Abfrage,
   der Desktop bleibt unberuehrt.
   =========================================== */
@media (max-width: 768px) {

    /* --- Seitliches Polster ---
       Am 19.09.2026 von 20 auf 16, damals mit 8px von .site-content davor.
       Seit 21.10.2026 wieder 20 und .site-content auf 0: dieselbe Kante wie
       .kpn-teil und der Kopf, auf allen Seiten 20px. Inhalt bei 360px:
       320 Pixel statt 312. */
    #ki-calc-root .page-wrapper,
    .vmehr,
    .vb3 {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* --- Bezeichnung und Wert untereinander ---
       .vmehr-liste li ist eine Flex-Zeile: Bezeichnung links, Wert rechts.
       Der Wert traegt white-space: nowrap und kann nicht schrumpfen, also
       quetscht er die Bezeichnung zusammen.

       Gemessen am 19.09.2026 bei 360px:
         "Keine Zusatzpreisliste / nach Projekt"   brauchte 207px, hatte 162.
             45 Pixel ragten aus der Karte.
         "Betrieb im eigenen Haus / auf Anfrage"   Bezeichnung auf 62px
             gequetscht und dadurch 172 Pixel hoch, ein Turm aus Einzelwoertern.

       Untereinander gestellt braucht keine Zeile mehr als 53 Pixel, und nichts
       ragt hinaus. Der Wert verliert dabei seinen rechten Anschlag, sonst
       stuende er allein auf weiter Flur. */
    .vmehr-liste li {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .vmehr-liste li > b {
        text-align: left;
    }

    /* --- Die drei Preise auf eine Linie ---
       Scale traegt ein "ab" vor der Zahl, und "/ Mt." braucht Platz. Die
       Preisgruppe ist eine Flex-Zeile mit Umbruch, also entschied bis zum
       23.09.2026 die Stellenzahl, wo umgebrochen wird: bei "99" passte
       "/ Mt." noch daneben, bei "299" nicht.

       Der erste Versuch am 19.09.2026 war eine Mindesthoehe von 53 Pixeln mit
       Anschlag unten. Das stellte Scale richtig, erzeugte aber einen neuen
       Fehler: eine einzeilige Gruppe wurde nach unten gedrueckt. Beim
       Umschalten auf Jaehrlich wurde aus Solos 119 eine 99, die Gruppe passte
       plotzlich in eine Zeile, und die Zahl sprang um 22 Pixel nach unten.
       Am Geraet gemeldet, bei 360px nachgemessen.

       Jetzt wird nicht mehr geraten, wo umgebrochen wird, sondern festgelegt:
       Zeile eins ist die Huelle .price-main mit "ab", Zahl und Euro, sie
       bricht nie um. "/ Mt." bekommt mit flex-basis 100 Prozent immer eine
       eigene zweite Zeile. Damit sind alle drei Gruppen gleich hoch, egal wie
       viele Stellen der Preis hat und ob ein "ab" davorsteht.

       Nachgemessen bei 320, 360, 375 und 412 Pixel: alle drei Zahlen auf einer
       Linie, kein Sprung beim Umschalten, nichts ragt aus der Karte. */
    #ki-calc-root .mobile-plan-card .price-group {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    #ki-calc-root .mobile-plan-card .price-main {
        display: inline-flex;
        align-items: flex-start;
        white-space: nowrap;
    }
    #ki-calc-root .mobile-plan-card .price-period {
        flex: 0 0 100%;
        text-align: center;
        align-self: auto;
        margin-left: 0;
        margin-bottom: 0;
        margin-top: 2px;
    }

    /* --- Werbehinweise unter den Knoepfen ---
       Standen in 9 und 10 Pixel. Wer eine Provision offenlegt, muss das
       lesbar tun. */
    #ki-calc-root .btn-disclaimer,
    #ki-calc-root .mobile-cta-disclaimer {
        font-size: 12px;
    }
}