/* ==========================================================================
   Vergleichsseite – Externe CSS (extrahiert aus vergleich.html)
   Geladen nur auf der Vergleichsseite (Post-ID 831)
   ========================================================================== */

/* Hero-Styles sind jetzt in hero.css (shared) */

/* ── RECHNER – CALCULATOR SECTION ── */

/* Inline-Style Ersatz für Calculator-Bereich */
.calc-slider-group {
  flex: 1;
  min-width: 200px;
}
.calc-range-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.calc-range-hint {
  font-size: 12px;
  color: #999;
}
.calc-result-label {
  font-size: 11px;
  opacity: 0.8;
  text-transform: uppercase;
}
.calc-label-addon {
  font-weight: 400;
  font-size: 11px;
}

/* SCOPED CSS - Mobile Optimiert */
#ki-calc-root {
  --primary: #069669;
  --primary-dark: #047857;
  --dark: #111827;
  --border: #E5E7EB;
  --table-sep: rgba(188, 202, 192, 0.15);
  --deal-bg: #FFF7ED;
  --deal-text: #C2410C;
  --deal-border: #F97316;

  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;
}
#ki-calc-root .page-wrapper::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: #fcfbf7;
  z-index: -1;
}

/* RECHNER - MOBILE OPTIMIERT */
#ki-calc-root .smart-calculator {
  background: #ffffff; border-radius: 16px; padding: 14px 20px; margin: 0 auto 60px auto;
  position: relative;
  width: 1100px; max-width: 100%;
  box-shadow: 0 4px 32px rgba(5, 150, 105, 0.12);
  border: 1px solid rgba(5, 150, 105, 0.08);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  transition: transform 0.3s ease;
}

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

/* Drei Stufen, damit die Beschriftung nicht als Auswahl zwischen zwei
   Einheiten gelesen wird: das Hauptwort dunkel, die Bezugsgroesse grau und
   halbfett, der Klammerzusatz grau und normal. Die Wrapper-Klasse
   calc-label-text ist noetig, weil das label ein Flexcontainer mit
   space-between ist. Ohne sie waeren Hauptwort und Bezugsgroesse zwei
   Flexitems und wuerden an die gegenueberliegenden Raender gezogen.
   Der Zusatz "(5 Tage/Woche)" ist eine Annahme der Rechnung und stand bis
   28.09.2026 in #9CA3AF, heller als jeder andere Text am Rechner. */
#ki-calc-root .calc-label-bezug { color: #6B7280; font-weight: 600; }
#ki-calc-root .calc-label-zusatz { color: #6B7280; }

#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(--primary); 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(5, 150, 105, 0.05); }
#ki-calc-root .calc-input:focus { background: #fff; box-shadow: 0 0 0 2px var(--primary); }

#ki-calc-root .calc-sep { width: 1px; background: #E5E7EB; 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: #E5E7EB; 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(--primary); border: 3px solid #fff; border-radius: 50%;
  cursor: pointer; box-shadow: 0 2px 8px rgba(5, 150, 105, 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: #E5E7EB; border: none; border-radius: 8px;
}
#ki-calc-root input[type=range]::-moz-range-thumb {
  width: 28px; height: 28px; background: var(--primary);
  border: 3px solid #fff; border-radius: 50%; cursor: pointer;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.2);
}
#ki-calc-root input[type=range]::-moz-range-track {
  height: 8px; background: #E5E7EB; 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(5, 150, 105, 0.25);
}

/* RESULT BOX - Zentriert & Mobile Fix */
#ki-calc-root .calc-result-box {
  background: var(--dark); color: #fff; padding: 10px 15px; border-radius: 16px;
  text-align: center; width: 100%; max-width: 284px; flex-shrink: 0;
  box-shadow: 0 15px 30px -10px rgba(5, 150, 105, 0.15);
  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.1) 0%, transparent 60%);
  pointer-events: none;
}
/* Die grosse Zahl bricht nie um. "2.000 Anrufe" in einem Zug war bei 28
   Pixeln 192 Pixel breit, im Feld sind 190 Platz: bei 100 Anrufen am Tag
   rutschte "Anrufe" in eine zweite Zeile, und der Rechner sprang. Seit
   26.09.2026 steht die Einheit kleiner hinter der Zahl, zusammen 146 Pixel. */
#ki-calc-root .res-number {
  font-size: 28px; font-weight: 900; display: block; line-height: 1.2;
  color: var(--primary); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#ki-calc-root .res-einheit {
  font-size: 16px; font-weight: 800;
}

/* Ergebnis je Anbieter, dritte Fassung vom 26.09.2026: eine Zeile mit Name,
   Menge in der Einheit des Anbieters, Paket und Preis. Die erste Fassung
   hatte drei schmale Spalten, "Unternehmen ab 499" brach darin um, das Feld
   wurde beim Ziehen hoeher und der Rechner sprang. Die zweite liess die
   Mengen weg, dann war der Preis nicht mehr zu verstehen.
   Ein Raster fuer alle drei Zeilen, damit alles untereinander steht. Nichts
   bricht um. Die Mengenspalte ist fest 74 Pixel breit ("2.000 Autom." braucht
   72), sonst wanderten die Paketnamen beim Ziehen seitlich mit. Die
   Paketspalte darf schrumpfen und kuerzt mit drei Punkten, statt aus dem
   Feld zu ragen. Dafuer ist das Feld am Rechner 284 statt 220 Pixel breit:
   die laengste Zeile, "Meiti 2.000 Autom. Unternehmen ab 499", braucht
   rund 247 von 254. */
#ki-calc-root .calc-tipps {
  display: grid;
  grid-template-columns: auto 74px minmax(0, 1fr) auto;
  column-gap: 6px;
  align-items: baseline;
  max-width: 280px;
  margin: 8px auto 0;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  text-align: left;
  line-height: 1.7;
}
#ki-calc-root .calc-tipp { display: contents; }
#ki-calc-root .calc-tipp > * { white-space: nowrap; min-width: 0; }
#ki-calc-root .calc-tipp b {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.55;
}
#ki-calc-root .calc-tipp i {
  font-size: 11px;
  font-style: normal;
  opacity: 0.6;
  text-align: right;
}
#ki-calc-root .calc-tipp span {
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}
#ki-calc-root .calc-tipp em {
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* Sagt, wonach das Feld die Pakete auswaehlt, und ist damit die Angabe, die
   das Ergebnis erklaert. Bis 28.09.2026 9,5 Pixel bei 60 % Deckkraft, jetzt
   so gross und so hell wie "Monatsbedarf" oben im selben Feld. */
#ki-calc-root .calc-tipp-hinweis {
  grid-column: 1 / -1;
  display: block;
  font-size: 11px;
  line-height: 1.3;
  opacity: 0.8;
  margin-top: 4px;
  text-align: center;
}
/* Unter 360 Pixel passt die Zeile nicht, am Handy stehen dort 11 Pixel als
   Untergrenze. Dann steht die Menge neben dem Namen und Paket und Preis
   darunter. Die festen Spaltennummern sorgen dafuer, dass das Raster jede
   Zeile an der richtigen Stelle umbricht. */
@media (max-width: 359px) {
  #ki-calc-root .calc-tipps { grid-template-columns: auto minmax(0, 1fr) auto; }
  #ki-calc-root .calc-tipp b { grid-column: 1; }
  #ki-calc-root .calc-tipp i { grid-column: 2 / -1; text-align: left; }
  #ki-calc-root .calc-tipp span { grid-column: 2; }
  #ki-calc-root .calc-tipp em { grid-column: 3; }
}

/* Reihenfolge im Umschalter-Block: erst die Pflichtangaben, dann der
   Schalter. Rechtlich muss der Provisionshinweis vor den Knoepfen stehen,
   auf die er sich bezieht, und die stecken in der Tabelle darunter. Der
   Schalter gehoert trotzdem direkt an die Tabelle, sonst sucht man ihn.
   Seit 28.09.2026 steht beides schon im Seiteninhalt in dieser
   Reihenfolge, die order-Regeln fuer den alten Absatz sind entfallen. */
#ki-calc-root .toggle-container {
  text-align: center;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
}
#ki-calc-root .toggle-row {
  display: flex; justify-content: center; align-items: center;
  gap: 12px; font-weight: 700; color: var(--dark); font-size: 14px;
}
#ki-calc-root .switch {
  position: relative; display: inline-block; width: 50px; height: 28px;
  margin: 0; flex-shrink: 0;
}
#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: #cbd5e1; 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(--primary); }
#ki-calc-root input:checked + .slider:before { transform: translateX(22px); }

/* STATIC DEAL BADGE (pulsierend) */
#ki-calc-root .deal-hint-badge {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  border: 2px solid #F97316;
  border-radius: 12px;
  padding: 8px 8px;
  text-align: center;
  width: 90%;
  margin: 20px auto 0 auto;
  align-self: center;
  animation: deal-pulse 2s infinite;
}
#ki-calc-root .deal-hint-text {
  font-size: 11px;
  font-weight: 900;
  color: #ea580c;
  text-transform: uppercase;
  line-height: 1.4;
  letter-spacing: 0.3px;
}
@keyframes deal-pulse {
  0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(249, 115, 22, 0); }
  100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}

/* TABLE & ALIGNMENT */
#ki-calc-root .table-box {
  background: #fff; border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid #E5E7EB; overflow: hidden;
  margin-bottom: 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 #E5E7EB !important;
  font-size: 12px; color: #374151; 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 #E5E7EB !important;
  background: #fff; 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: #ffffff;
  border-bottom: none !important;
}
#ki-calc-root thead tr.plan-row th {
  position: sticky; top: 54px; z-index: 50; background: #ffffff;
  border-bottom: 2px solid #E5E7EB !important;
  box-shadow: 0 4px 16px -4px rgba(5, 150, 105, 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(--dark);
  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: #4B5563; margin-top: 0px; margin-bottom: 0px;
}

#ki-calc-root .col-label {
  text-align: left; padding-left: 15px; font-weight: 600;
  color: var(--dark); position: sticky; left: 0; background: #fff;
  z-index: 40; font-size: 13px; white-space: nowrap;
  box-shadow: 8px 0 16px -4px rgba(5, 150, 105, 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(--dark); 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: #9CA3AF; 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(--dark);
}
#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: 3px;
}
#ki-calc-root .price-period {
  font-size: 10px; color: #6B7280; 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: 8px 0;
  background: linear-gradient(135deg, #069669 0%, #10B981 100%);
  color: white; text-decoration: none;
  font-size: 9px; 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;
  line-height: 1; text-transform: uppercase; letter-spacing: 0.08em;
}
/* .btn-select ist fuer die schmalen Tabellenspalten gebaut: 90% Breite
   und 9px Schrift. Im goai-Block sitzt derselbe Knopf in einem Kasten
   ueber die ganze Seitenbreite und wird dort auf ueber 900px gezogen,
   bei 25px Hoehe und unveraendert 9px Schrift. Hier bekommt er
   normale Knopfmasse. */
#ki-calc-root .vgoai .btn-select {
  width: auto;
  max-width: 340px;
  padding: 14px 32px;
  font-size: 14px;
  letter-spacing: 0.02em;
  border-radius: 10px;
}

#ki-calc-root .btn-select:hover {
  background: linear-gradient(135deg, #047857 0%, #069669 100%);
  transform: translateY(-1px);
  color: white;
}
#ki-calc-root .btn-select:active {
  transform: translateY(0);
}

/* Button Disclaimer */
#ki-calc-root .btn-disclaimer {
  display: block;
  /* Die Bedingung des Rabatts ("auf die Erstzahlung", "fuer 6 Monate") stand
     bis 26.09.2026 in 9 Pixel unter einem Knopf in 14 Pixel, bis 28.09.2026
     in 11. Jetzt 12 wie die Werte der Tabelle, am Handy wie die Karten. */
  font-size: 12px;
  color: #4B5563;
  text-align: center;
  margin-top: 4px;
  line-height: 1.3;
  font-weight: 600;
}

@keyframes pulse-soft {
  0% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(5, 150, 105, 0); }
  100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
}

#ki-calc-root .highlighted-head .btn-select,
#ki-calc-root .highlighted .btn-select {
  animation: pulse-soft 2s infinite;
  background: linear-gradient(135deg, #069669 0%, #10B981 100%);
}

#ki-calc-root .icon-check {
  width: 18px; height: 18px; stroke: #069669; stroke-width: 3;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
#ki-calc-root .icon-cross {
  width: 16px; height: 16px; stroke: #EF4444; stroke-width: 3;
  fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0.4;
}

/* "k. A." heisst: der Anbieter veroeffentlicht dazu nichts. Das ist bewusst
   etwas anderes als das rote Kreuz, das eine fehlende Funktion anzeigt.
   Deshalb zurueckhaltend gesetzt und nicht als Wertung lesbar. */
#ki-calc-root .val-na {
  color: #9CA3AF;
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: help;
}

#ki-calc-root .footer-row td {
  padding-top: 20px; padding-bottom: 20px; background: #ffffff;
  border-top: none !important;
  border-bottom: none !important;
  vertical-align: middle;
}
#ki-calc-root .footer-row .btn-select {
  padding: 10px 0; font-size: 9px;
  background: linear-gradient(135deg, #069669 0%, #10B981 100%); width: 95%;
}
#ki-calc-root .footer-row .btn-select:hover {
  background: linear-gradient(135deg, #047857 0%, #069669 100%);
  box-shadow: 0 0 16px rgba(5, 150, 105, 0.25);
}

/* ZEBRA STRIPING */
#ki-calc-root tbody tr:nth-child(even) td { background: #f7f9fb; }
#ki-calc-root tbody tr:nth-child(even) td.col-label { background: #f7f9fb; }
#ki-calc-root tbody tr:nth-child(even) td.highlighted { background: #e0faf0 !important; }

/* ROW HOVER */
#ki-calc-root tbody tr:not(.footer-row):hover td { background: rgba(5, 150, 105, 0.06) !important; transition: background 0.15s; }
#ki-calc-root tbody tr:not(.footer-row):hover td.col-label { background: rgba(5, 150, 105, 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: #ecfdf5 !important; filter: blur(0); opacity: 1;
}
#ki-calc-root .highlighted-head {
  background-color: #ecfdf5 !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: #fff; 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(5, 150, 105, 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: 800; color: var(--dark);
  margin-bottom: 10px; margin-top: 0;
}
#ki-calc-root .modal-text {
  color: #4B5563; margin-bottom: 25px; line-height: 1.6;
}
#ki-calc-root .btn-modal {
  display: inline-block; background: var(--primary);
  color: white; padding: 12px 30px; 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(--primary-dark);
}
#ki-calc-root .modal-close {
  display: block; margin-top: 15px; font-size: 12px;
  color: #9CA3AF; cursor: pointer; text-decoration: underline;
  background: none; border: none; font-family: inherit;
}

/* GOAI CODE MODAL */
#ki-calc-root .modal-code {
  background: var(--deal-bg); border: 2px dashed var(--deal-border);
  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(--deal-text);
  margin-bottom: 8px; text-transform: uppercase;
}
#ki-calc-root .modal-code-value {
  font-size: 32px; font-weight: 900; color: var(--deal-text);
  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: #6B7280;
  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(--primary); color: white; border-radius: 50%;
  text-align: center; line-height: 24px; font-weight: 900; flex-shrink: 0;
}
#ki-calc-root .btn-modal.secondary {
  background: #F3F4F6; color: var(--dark);
}
/* Provisionshinweis im Rabattfenster, seit 26.09.2026. Das Fenster verdeckt
   die Seite und damit jeden Hinweis darunter. So gross wie die Schritte.
   Seit 28.09.2026 mit Stichwort wie die Hinweise an der Tabelle, und mit
   der Rabattbedingung davor: das Fenster wirbt selbst mit dem Rabatt. */
#ki-calc-root .modal-hinweis {
  font-size: 14px; line-height: 1.5; color: #6B7280;
  margin: 0 0 16px; text-align: center;
}
#ki-calc-root .modal-hinweis strong { font-weight: 600; color: var(--dark); }
#ki-calc-root .btn-modal.secondary:hover {
  background: #E5E7EB;
}

#ki-calc-root th.col-label, #ki-calc-root td.col-label,
#ki-calc-root #row-mins td.col-label {
  width: 15%; border-right: 1px solid #E5E7EB !important;
}
#ki-calc-root td.col-prod, #ki-calc-root th.col-prod {
  width: 12.14%; border-right: 1px solid #E5E7EB !important;
}
#ki-calc-root td.col-prod:last-child, #ki-calc-root th.col-prod:last-child {
  border-right: none !important;
}
#ki-calc-root .sep-right, #ki-calc-root #row-mins td.sep-right {
  border-right: 1px solid #E5E7EB !important;
}

/* RESPONSIVE - TABLET & MOBILE */
@media(max-width: 1100px) {
  #ki-calc-root table { min-width: 1200px; }
  #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 .badge {
    font-size: 11px; padding: 5px 10px;
  }

  #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 .deal-hint-text { font-size: 10px; }

  #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: #f2f4f6; border: 1px solid rgba(188, 202, 192, 0.15); border-bottom: none;
  }
  #ki-calc-root .mobile-tab {
    flex: 1; padding: 12px 8px; text-align: center;
    font-size: 13px; font-weight: 700; color: #6B7280;
    background: #f2f4f6; border: none; cursor: pointer;
    transition: all 0.25s ease; font-family: inherit;
  }
  #ki-calc-root .mobile-tab.active {
    background: #fff; color: var(--primary);
    box-shadow: 0 -2px 0 var(--primary) inset;
  }
  #ki-calc-root .mobile-tab img {
    height: 22px; width: auto; display: block;
    margin: 0 auto 4px; object-fit: contain;
  }
  /* Wie in den Zusatzpaket-Karten: Meitis Marke ist quadratisch und kommt
     bei 22px Hoehe auf 22px Breite, Fonio auf 70 und VITAS auf 64. Sie
     bekommt mehr Hoehe, die Randabstaende gleichen das wieder aus, damit
     alle drei Reiter gleich hoch bleiben: 22+4 oben wie unten, bei Meiti
     -4+30+0. Gemessen am 13.08.2026. */
  #ki-calc-root .mobile-tab img[src*="meiti"] {
    height: 30px;
    margin-top: -4px;
    margin-bottom: 0;
  }
  #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: #fff;
  }
  #ki-calc-root .mobile-plan-card {
    flex: 1; background: #f7f9fb; border: 1px solid rgba(188, 202, 192, 0.15);
    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(--primary); background: #ECFDF5;
    box-shadow: 0 0 0 1px var(--primary), 0 4px 16px rgba(5, 150, 105, 0.08);
  }
  #ki-calc-root .mobile-plan-card .plan-name {
    font-size: 14px; font-weight: 800; color: var(--dark);
    margin-bottom: 6px; display: block;
  }
  #ki-calc-root .mobile-plan-card .price-val { font-size: 22px; font-weight: 900; color: var(--dark); }
  #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: #6B7280; }
  #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: #fff; 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: #6B7280; font-weight: 500; flex: 1; padding-right: 8px; }
  #ki-calc-root .mobile-feature-value { color: var(--dark); font-weight: 700; text-align: right; flex-shrink: 0; }
  #ki-calc-root .mobile-cta {
    display: block; margin: 12px; padding: 14px;
    background: var(--primary); 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: 12px;
    color: #4B5563; margin-bottom: 12px; font-style: normal;
  }
  #ki-calc-root .mobile-deal-badge { display: none; }
}
#ki-calc-root .mobile-deal-badge span {
  font-size: 11px; font-weight: 900; color: #ea580c;
  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; }

/* .mobile-hinweise gehoert seit 28.09.2026 dazu. vergleich.js baut die
   Kartenansicht samt Hinweisen, sobald die Seite schmal geladen wird, und
   blendet beim Breiterwerden nur Reiter und Karten aus. Die Hinweise blieben
   stehen und erschienen doppelt: oben aus der Kartenansicht, unten in der
   Tabelle. Passiert beim Drehen eines Tablets von hoch auf quer und in jedem
   Fenster, das beim Laden noch schmal war. Von Marc in der Vorschau gesehen. */
@media (min-width: 769px) {
  #ki-calc-root .mobile-tabs,
  #ki-calc-root .mobile-cards-container,
  #ki-calc-root .mobile-hinweise { display: none !important; }
}
#ki-calc-root .mobile-cta {
  display: block; margin: 12px; padding: 14px;
  background: var(--primary); 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);
}

/* Begriffe, die nicht am Bindestrich umbrechen duerfen. Gesetzt am
   22.09.2026 auf die drei H2 mit "KI-Telefonie", "KI-Telefonassistent" und
   "KI-Telefonassistenten" sowie auf die Domain in der Fahne des unteren
   Aufrufs. Vorher stand dort "Warum Unternehmen auf KI-" und darunter
   "Telefonie setzen", und die Domain zerfiel in "top3-" und "ki.de".

   Nachgemessen bei 360 Pixel: die Ueberschriften haben 320 Pixel Platz und
   das laengste geschuetzte Wort braucht 223. Bei der Fahne reicht der Platz
   nicht fuer die ganze Zeile, 258 gegen 248 Pixel, deshalb ist dort nur die
   Domain geschuetzt. Der Umbruch faellt damit hinter "ueber". */
.vb3 .nowrap,
.vb3-cta-pill .nowrap {
  white-space: nowrap;
}

/* ===========================================
   REDUCED MOTION – Accessibility Fallback

   Gilt fuer beide Bereiche der Seite: den Rechner samt Tabelle
   (#ki-calc-root) und den unteren Block (.vb3).

   Warum 0.01ms und nicht "none": mit "none" feuern die Ereignisse
   transitionend und animationend nicht mehr. Code, der darauf wartet,
   bliebe stehen. Eine Dauer unterhalb der Wahrnehmungsschwelle ist
   sichtbar dasselbe und bleibt technisch berechenbar.

   Am wichtigsten sind die vier Endlos-Animationen: deal-pulse am
   Rabatt-Hinweis und pulse-soft an den drei Handy-Schaltflaechen. Die
   liefen bisher ohne Ende, auch bei abgeschalteter Bewegung.
   =========================================== */
@media (prefers-reduced-motion: reduce) {
  #ki-calc-root .modal-overlay {
    backdrop-filter: none;
    background: rgba(31, 41, 55, 0.95);
  }

  #ki-calc-root,
  #ki-calc-root *,
  #ki-calc-root *::before,
  #ki-calc-root *::after,
  .vb3,
  .vb3 *,
  .vb3 *::before,
  .vb3 *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  /* Bewusst NICHT angefasst: die beiden gedrehten Pfeile
     .vb3-acc-chevron und .vb3-faq-chev. Ihre Drehung um 180 Grad zeigt
     an, ob ein Abschnitt offen ist. Das ist eine Zustandsanzeige, keine
     Zierde, und muss auch ohne Bewegung sichtbar bleiben. Sie klappt
     durch die 0.01ms jetzt um, statt zu drehen. */
}


/* ==========================================================================
   VB3 UNTERER BEREICH - Anbieter-Akkordeon, Statistiken, Branchen, FAQ, CTA

   Lag bis 13.08.2026 als <style>-Block im Inhalt der WordPress-Seiten 831
   und 1100. Beide Seiten trugen denselben Block, Unterschied waren nur
   20 Leerzeilen. Hier steht er, damit Designaenderungen wieder Datei-
   aenderungen sind: versioniert in Git und per scp deploybar.
   ========================================================================== */


/* ===== VB3 BASE ===== */
.vb3 {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 32px 0 112px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.5;
  color: #191c1e;
  --primary: #069669;
  --primary-dark: #047857;
  --primary-deep: #064E3B;
  --surface: #f7f9fb;
  --on-surface: #191c1e;
  --muted: #6B7280;
  --border: rgba(188, 202, 192, 0.25);
}
.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(--primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Manrope', sans-serif;
  font-size: 22px; font-weight: 800;
  box-shadow: 0 10px 28px -6px rgba(6, 150, 105, 0.35);
  z-index: 2;
}
.vb3-line {
  position: absolute;
  left: -53px; top: 56px; bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(to bottom, #bccac0 0, #bccac0 6px, transparent 6px, transparent 14px);
  z-index: 0;
}
.vb3-body { padding-top: 0; }
/* ===== TYPOGRAPHY (CENTERED) ===== */
.vb3-label {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(6, 150, 105, 0.08);
  color: var(--primary-dark);
  border-radius: 50px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.vb3-header {
  text-align: center;
  margin-bottom: 40px;
}
.vb3 h2 {
  font-family: 'Manrope', sans-serif;
  font-size: 28px; font-weight: 800;
  color: var(--on-surface);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 8px;
}
.vb3-sub {
  font-size: 16px; color: var(--muted);
  line-height: 1.7; margin: 0;
  margin-left: auto;
  margin-right: auto;
}
/* ===== ANBIETER CLICK-ACCORDION ===== */
.vb3-acc {
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 32px 48px -12px rgba(0, 105, 72, 0.04);
  overflow: hidden;
  margin-bottom: 12px;
  transition: box-shadow 0.3s;
}
.vb3-acc:hover { box-shadow: 0 32px 48px -12px rgba(0, 105, 72, 0.08); }
.vb3-acc-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 28px;
  cursor: pointer;
  transition: background 0.2s;
  user-select: none;
}
.vb3-acc-header:hover { background: var(--surface); }
.vb3-acc-left {
  display: flex; align-items: center; gap: 20px;
}
.vb3-acc-icon {
  width: 52px; height: 52px;
  background: rgba(6, 150, 105, 0.08);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.vb3-acc-icon svg {
  width: 26px; height: 26px;
  stroke: var(--primary); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.vb3-acc-meta h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 20px; font-weight: 800;
  color: var(--on-surface);
  margin: 0 0 2px; letter-spacing: -0.02em;
}
.vb3-acc-meta .vb3-badge {
  display: inline-block;
  font-size: 9px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(6, 150, 105, 0.1);
  color: var(--primary-deep);
  margin-right: 8px;
}
.vb3-acc-meta p {
  font-size: 13px; color: var(--muted);
  margin: 4px 0 0; line-height: 1.5;
}
.vb3-acc-chevron {
  flex-shrink: 0;
  width: 24px; height: 24px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.vb3-acc-chevron svg {
  width: 24px; height: 24px;
  stroke: var(--primary); stroke-width: 2; fill: none;
}
/* Aufklappen, gesteuert allein ueber die Klasse .is-open aus vergleich.js.

   Bis zum 22.09.2026 stand hier eine feste max-height von 500 Pixeln. Am Handy
   wird .vb3-acc-grid einspaltig, der Inhalt ist dort 602 (Meiti), 712 (Fonio)
   und 776 Pixel (VITAS) hoch: bis zu 276 Pixel wurden abgeschnitten, der
   Absatz im grauen Kasten endete mitten im Satz. Gemessen bei 360 Pixel
   Geraetebreite.

   Eine groessere feste Zahl loest das nicht, sie verschiebt die Grenze nur.
   grid-template-rows von 0fr auf 1fr nimmt stattdessen die echte Inhaltshoehe
   und laesst sich trotzdem animieren. Der innere Kasten braucht dafuer
   min-height: 0, sonst besteht er auf seiner Mindesthoehe und die 0fr wirken
   nicht.

   Zwei Dinge, beide am 22.09.2026 gemessen:

   1. Das Polster nach unten sitzt am Rahmen, nicht am inneren Kasten. Innen
      blieb der Kasten im geschlossenen Zustand 20 Pixel hoch statt 0, weil
      min-height und overflow nur den Inhalt fassen und das Polster ausserhalb
      davon liegt. Am Rahmen faellt es im geschlossenen Zustand auf 0.

   2. Hier steht bewusst gar kein Uebergang mehr, auch keiner auf opacity.
      Der geschlossene Zustand ist schon durch die Zeilenhoehe 0 und das
      overflow: hidden im inneren Kasten unsichtbar. Eine zusaetzliche
      Deckkraft koennte in einer Lage haengen bleiben, in der die Hoehe
      bereits steht: dann waere der Text da und trotzdem nicht zu sehen.
      Diese Lage gibt es jetzt nicht mehr. Der Abschnitt klappt dafuer ohne
      Bewegung auf.

      Die Deckkraft war vorher animiert. Wer die Bewegung zurueck will,
      braucht den Weg ueber JavaScript und scrollHeight: max-height laesst
      sich in jedem Browser animieren, 0fr auf 1fr nicht. */
.vb3-acc-detail {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 28px;
}
.vb3-acc-detail-inner {
  min-height: 0;
  overflow: hidden;
}
.vb3-acc.is-open .vb3-acc-detail {
  grid-template-rows: 1fr;
  padding-bottom: 28px;
}
.vb3-acc.is-open .vb3-acc-chevron {
  transform: rotate(180deg);
}
.vb3-acc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  border-top: 1px solid var(--border);
  padding-top: 24px;
}
.vb3-acc-grid h4 {
  font-family: 'Manrope', sans-serif;
  font-size: 10px; font-weight: 800;
  color: var(--primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin: 0 0 14px;
}
.vb3-acc-grid ul {
  list-style: none; margin: 0; padding: 0;
}
.vb3-acc-grid li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--muted);
  padding: 5px 0;
}
.vb3-acc-grid li svg {
  width: 18px; height: 18px; flex-shrink: 0;
  stroke: var(--primary); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.vb3-acc-summary-box {
  background: var(--surface);
  border-radius: 12px;
  padding: 20px;
}
.vb3-acc-summary-box p {
  font-size: 13px; color: var(--muted);
  line-height: 1.7; margin: 0;
}
/* ===== STATS ===== */
.vb3-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.vb3-stat {
  background: var(--surface);
  border-radius: 16px;
  padding: 32px 24px;
  border: 1px solid var(--border);
  text-align: center;
  transition: box-shadow 0.3s;
}
.vb3-stat:nth-child(2) {
  background: rgba(6, 150, 105, 0.04);
  border-color: rgba(6, 150, 105, 0.15);
  box-shadow: 0 0 0 2px rgba(6, 150, 105, 0.08);
}
.vb3-stat:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06); }
.vb3-stat-prefix {
  font-family: 'Manrope', sans-serif;
  font-size: 12px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 4px;
  display: block;
}
.vb3-stat-val {
  font-family: 'Manrope', sans-serif;
  font-size: 40px; font-weight: 800;
  color: var(--primary);
  line-height: 1; margin: 0 0 8px;
  letter-spacing: -0.04em;
}
.vb3-glow {
  animation: vb3Pop 1.4s ease-in-out 1;
}
@keyframes vb3Pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.vb3-stat-desc {
  font-size: 13px; font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}
/* ===== BRANCHEN GRID ===== */
.vb3-branchen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.vb3-branche {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 32px 48px -12px rgba(0, 105, 72, 0.04);
  position: relative;
}
.vb3-branche:hover {
  background: var(--primary);
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(6, 150, 105, 0.2);
}
.vb3-branche:hover .vb3-branche-icon svg { stroke: #fff; }
.vb3-branche:hover .vb3-branche-name { color: #fff; }
.vb3-branche:hover .vb3-branche-hint { color: rgba(255,255,255,0.7); }
.vb3-branche.active {
  background: var(--primary); border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(6, 150, 105, 0.2);
}
.vb3-branche.active .vb3-branche-icon svg { stroke: #fff; }
.vb3-branche.active .vb3-branche-name { color: #fff; }
.vb3-branche.active .vb3-branche-hint { color: rgba(255,255,255,0.7); }
.vb3-branche-icon {
  margin: 0 auto 12px;
}
.vb3-branche-icon svg {
  width: 32px; height: 32px;
  stroke: var(--primary); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 0.3s;
}
.vb3-branche-name {
  font-family: 'Manrope', sans-serif;
  font-size: 12px; font-weight: 700;
  color: var(--on-surface);
  margin: 0 0 4px;
  transition: color 0.3s;
}
.vb3-branche-hint {
  font-size: 10px; color: var(--muted);
  transition: color 0.3s;
  opacity: 0.6;
}
/* Mobile-Detail-Boxen auf Desktop verstecken */
.vb3-detail-mobile { display: none; }
@media (max-width: 768px) { .vb3-detail-mobile { display: block; } }
/* Branchen Detail Box */
.vb3-branche-detail {
  grid-column: 1 / -1;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  border: 0 solid var(--border);
  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: 0 32px 48px -12px rgba(0, 105, 72, 0.04);
  padding: 0 28px;
}
.vb3-branche-detail.visible {
  max-height: 200px;
  opacity: 1;
  padding: 24px 28px;
  border-width: 1px;
}
.vb3-branche-detail h4 {
  font-family: 'Manrope', sans-serif;
  font-size: 15px; font-weight: 700;
  color: var(--on-surface);
  margin: 0 0 8px;
}
.vb3-branche-detail p {
  font-size: 14px; color: var(--muted);
  line-height: 1.7; margin: 0;
}
/* ===== FAQ ===== */
.vb3-faq-list { display: flex; flex-direction: column; gap: 6px; }
.vb3-faq {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.vb3-faq[open] {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.vb3-faq summary {
  padding: 18px 24px;
  font-family: 'Manrope', sans-serif;
  font-size: 15px; font-weight: 600;
  color: var(--on-surface);
  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(--surface); }
.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: #9CA3AF; stroke-width: 2; fill: none;
}
.vb3-faq[open] .vb3-faq-chev { transform: rotate(180deg); }
.vb3-faq[open] .vb3-faq-chev svg { stroke: var(--primary); }
.vb3-faq-ans {
  padding: 0 24px 18px;
  font-size: 14px; color: var(--muted);
  line-height: 1.7;
  border-top: 1px solid rgba(0,0,0,0.04);
  padding-top: 16px; margin: 0 12px;
}

/* ===== CTA ===== */
.vb3-cta {
  position: relative;
  background: linear-gradient(135deg, #064E3B 0%, #065F46 40%, #047857 100%);
  border-radius: 24px;
  padding: 64px 48px;
  text-align: center;
  overflow: hidden;
  margin-top: 48px;
  box-shadow: 0 32px 64px -16px rgba(6, 78, 59, 0.3);
}
.vb3-cta::before {
  content: ''; position: absolute;
  top: -40%; right: -20%; width: 50%; height: 120%;
  background: radial-gradient(ellipse, rgba(52,211,153,0.15) 0%, transparent 65%);
  pointer-events: none;
}
.vb3-cta-inner { position: relative; z-index: 1; }
.vb3-cta-pill {
  display: inline-block;
  background: rgba(255,255,255,0.1);
  color: #A7F3D0;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
  margin: 0 0 24px;
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(4px);
}
.vb3-cta h2 {
  font-family: 'Manrope', sans-serif;
  font-size: 30px; font-weight: 800;
  color: #fff; letter-spacing: -0.03em;
  margin: 0 0 14px; line-height: 1.2;
}
.vb3-cta-sub {
  font-size: 16px; color: rgba(255,255,255,0.65);
  max-width: 480px; margin: 0 auto 36px; line-height: 1.7;
}
.vb3-cta-btn {
  display: inline-block;
  background: #fff; color: var(--primary-deep);
  font-family: 'Manrope', sans-serif;
  font-size: 15px; font-weight: 700;
  padding: 16px 40px;
  border-radius: 100px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.3s;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.vb3-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.2);
  color: var(--primary-deep);
}
.vb3-cta-note {
  font-size: 13px; color: rgba(255,255,255,0.45);
  margin: 20px 0 0; line-height: 1.6;
}
.vb3-cta-note a {
  color: #A7F3D0; text-decoration: none; font-weight: 600;
}
.vb3-cta-note a:hover { text-decoration: underline; color: #fff; }
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .vb3 { padding: 0 20px; }
  .vb3 h2 { font-size: 22px; }
  .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; }
  .vb3-acc-summary-box { margin-top: 16px; }
  .vb3-acc-detail { padding: 0 16px; }
  .vb3-acc.is-open .vb3-acc-detail { padding-bottom: 20px; }
  .vb3-acc-header { padding: 18px 20px; }
  .vb3-acc-left { gap: 14px; }
  .vb3-acc-icon { width: 44px; height: 44px; border-radius: 12px; }
  .vb3-acc-icon svg { width: 22px; height: 22px; }
  .vb3-acc-meta h3 { font-size: 17px; }
  .vb3-acc-meta p { display: none; }
  /* Die Fahne stand neben der Ueberschrift und hatte dort 196 Pixel.
     "Multichannel-Allrounder" braucht mit seinem Polster 203 und brach
     deshalb am Bindestrich um, zweizeilig gegen einzeilig bei den beiden
     anderen Anbietern. Schuetzen liesse das Wort 7 Pixel ueberstehen.
     Auf einer eigenen Zeile hat es die volle Kartenbreite und passt mit
     Abstand. Gemessen am 22.09.2026 bei 360 Pixel. */
  .vb3-acc-meta .vb3-badge {
    display: block;
    width: fit-content;
    margin-top: 6px;
    white-space: nowrap;
  }
  .vb3-acc-detail { padding: 0 20px; }
  .vb3-acc.is-open .vb3-acc-detail { padding-bottom: 20px; }
  .vb3-acc-grid { grid-template-columns: 1fr; gap: 16px; }
  .vb3-stats { grid-template-columns: 1fr; gap: 10px; }
  .vb3-stat { padding: 24px 20px; }
  .vb3-stat-val { font-size: 32px; }
  .vb3-branchen { grid-template-columns: repeat(2, 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; }
  .vb3-cta { padding: 36px 20px; border-radius: 18px; }
  .vb3-cta h2 { font-size: 20px; }
  .vb3-cta-sub { font-size: 13px; margin-bottom: 24px; }
  .vb3-cta-btn { width: 100%; text-align: center; padding: 14px 20px; font-size: 14px; }
  .vb3-cta-note { font-size: 12px; }
}


/* ==========================================================================
   VMEHR - Groessere Pakete und Zusatzpakete unter der Tabelle

   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. */
.vmehr .vmehr-grid { grid-template-columns: repeat(3, 1fr); }
.vmehr .vmehr-grid-drei { grid-template-columns: repeat(3, 1fr); align-items: stretch; }

/* Zweite Gruppe: eine Karte je Anbieter statt eine je Zusatzpaket.
   Vorher standen dort sieben Karten mit sieben Knoepfen, fuenf davon
   VITAS. Das streute die Aufmerksamkeit und stellte ausgerechnet den
   Anbieter gross heraus, der am wenigsten einbringt. Jetzt fuehrt je
   Anbieter genau ein Knopf weiter. */
.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 #F3F4F6;
}
.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: #9CA3AF;
}
.vmehr-liste li > b {
  font-family: 'Manrope', '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: #9CA3AF;
  text-decoration: line-through;
}
/* Der Posten, der den Tabellenpreis erklaert. */
.vmehr-liste li.vmehr-li-wichtig > b { color: #C2410C; }

/* "Preise je Monat" gehoert zur Preisangabe im Kasten. Bis 28.09.2026 in 11
   Pixel #9CA3AF, heller als alles daneben. Jetzt wie die Hinweise der Seite. */
.vmehr-fussnote {
  font-size: 13px;
  color: #6B7280;
}

/* Aus der zweigeteilten Zeile wird eine Karte von oben nach unten:
   Marke, Name, Text, dann unten buendig Preis und Knopf. */
.vmehr .vmehr-item {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
}

.vmehr-kopf-zwei { margin-top: 34px; }

.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;
}
/* Gleiche Hoehe heisst nicht gleiche Wirkung. Fonio und VITAS sind breite
   Schriftzuege und kommen bei 28px auf 89 beziehungsweise 82 Pixel Breite,
   Meitis Marke ist quadratisch und war damit nur 26 Pixel breit, also ein
   Drittel. Sie bekommt mehr Hoehe, damit die drei optisch gleich stark
   auftreten. Gemessen am 13.08.2026. */
.vmehr-marke img[src*="meiti"] { max-height: 34px; }
.vmehr-fahne {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #C2410C;
  background: #FFF7ED;
  border: 1px solid #FDBA74;
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}

/* Der Kasten zum VITAS Pro-Paket erklaert, warum die Grundpreise in der
   Tabelle taeuschen. Er ist deshalb hervorgehoben, nicht aus Zierde. */
.vmehr .vmehr-item-wichtig {
  border-color: #FDBA74;
  background: #FFFCF8;
}
.vmehr-rechnung {
  font-size: 12.5px;
  line-height: 1.55;
  color: #9A3412;
  background: #FFF7ED;
  border-radius: 8px;
  padding: 8px 10px;
  margin: 0;
}
.vmehr-rechnung strong { font-weight: 800; }

/* Preis und Knopf sitzen immer am unteren Rand, damit die Karten einer
   Reihe trotz verschieden langer Texte gleich aussehen. */
.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 #F3F4F6;
}

.vmehr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  background: linear-gradient(135deg, #069669 0%, #10B981 100%);
  color: #fff;
  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: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(6, 150, 105, 0.25);
}
.vmehr-btn:focus-visible {
  outline: 3px solid #047857;
  outline-offset: 2px;
}

@media (max-width: 1024px) {
  .vmehr .vmehr-grid,
  .vmehr .vmehr-grid-drei { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .vmehr .vmehr-grid,
  .vmehr .vmehr-grid-drei { grid-template-columns: 1fr; }
  .vmehr-kopf-zwei { margin-top: 26px; }
}


/* ===========================================
   NACHBESSERUNGEN 19.08.2026
   =========================================== */

/* --- Fusszeile der Zusatzpaket-Karten ---------------------------------
   Die Karten haben unterschiedlich lange Fussnoten. Bei Meiti steht dort
   "Preise je Monat, Einrichtung einmalig" statt "Preise je Monat". Mit
   flex-wrap sprang der Knopf dadurch in eine eigene Zeile und die Karte sah
   anders aus als die beiden daneben. Jetzt darf die Fussnote selbst
   umbrechen, der Knopf bleibt an seinem Platz. */
.vmehr-fuss {
  flex-wrap: nowrap;
}

.vmehr-fussnote {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
}

.vmehr-btn {
  flex: 0 0 auto;
}

/* --- Umbruch in den Tabellenzellen -----------------------------------
   Bei 141 Pixel Spaltenbreite und 12 Pixel Schrift passen Angaben wie
   "eigene Nummer weiterleiten" nicht in eine Zeile. Einzeilig ginge nur mit
   unlesbar kleiner Schrift. text-wrap: balance verteilt den Text stattdessen
   gleichmaessig auf die Zeilen, statt eine lange und eine kurze zu erzeugen.
   Browser ohne Unterstuetzung ignorieren die Zeile und brechen wie bisher. */
#mainTable td,
#mainTable th {
  text-wrap: balance;
  hyphens: auto;
}

/* --- Pflichtangaben zur Tabelle ----------------------------------------
   Seit 28.09.2026 eine Liste mit Stichwort links: ueber der Tabelle
   Provision, Reihenfolge, Auswahl, Rabatt und Preise, unter der Tabelle die
   Quellen mit Stand, unter den Kaesten die Preise. Vorher standen dieselben
   Angaben in zwei mittigen Absaetzen ueber der Tabelle und zusaetzlich an
   bis zu sieben weiteren Stellen der Seite, in 9,5 bis 14 Pixel, drei
   Grautoenen und zum Teil mit opacity. Entfallen sind dabei der "Hinweis"
   ganz unten, der Absatz unter der FAQ und die vier Regelkarten der
   Methodik, alles Wiederholungen. Ein Pflichthinweis darf nicht kleiner,
   nicht blasser und nicht spaeter kommen als das, worauf er sich bezieht
   (ressourcen/lernings.md, "Der Werbehinweis steht vor dem Link").

   13 Pixel wie die Beschriftung der Tabelle. Die Stichwortspalte ist so
   breit wie das laengste Stichwort: "Reihenfolge:" misst in Inter 600 bei
   13 Pixel 79 Pixel. Wer ein laengeres einfuehrt, misst neu.
   Der Block ist so breit wie seine laengste Zeile und steht mittig, wie der
   Rechner darueber und der Umschalter darunter. Buendig mit der linken
   Tabellenkante stand er in der Vorschau vom 28.09.2026, Marc: "viel zu
   weit links". Ohne fit-content (sehr alte Browser) wird er so breit wie die
   Tabelle und steht links, wie in jener Vorschau. Unter der Tabelle und unter
   den Kaesten steht je eine Zeile, mittig mit dem Stichwort vorne.
   Am Handy steht das Stichwort vorne im Absatz, das Leerzeichen zwischen dt
   und dd steht dafuer im Seiteninhalt. */
#ki-calc-root .t3k-tabelle-hinweise {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 20px;
  font-size: 13px;
  line-height: 1.6;
  color: #6B7280;
  text-align: left;
}
#ki-calc-root .t3k-tabelle-hinweise > div {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  column-gap: 12px;
}
#ki-calc-root .t3k-tabelle-hinweise > div + div { margin-top: 4px; }
#ki-calc-root .t3k-tabelle-hinweise dt { font-weight: 600; color: var(--dark); }
#ki-calc-root .t3k-tabelle-hinweise dd { margin: 0; }
#ki-calc-root .t3k-tabelle-hinweise a { color: #047857; text-decoration: underline; }
#ki-calc-root .t3k-tabelle-hinweise--unten { margin: 14px auto 0; text-align: center; }
#ki-calc-root .t3k-tabelle-hinweise--unten > div { display: block; }
#ki-calc-root .t3k-tabelle-hinweise--unten dt,
#ki-calc-root .t3k-tabelle-hinweise--unten dd { display: inline; }
@media (max-width: 768px) {
  #ki-calc-root .t3k-tabelle-hinweise > div { display: block; }
  #ki-calc-root .t3k-tabelle-hinweise dt,
  #ki-calc-root .t3k-tabelle-hinweise dd { display: inline; }
}

/* HINWEISZEILE AM TABELLENENDE
   Ergaenzt 12.09.2026. Merkmale koennen in anbieter-daten.js ein Feld "hinweis"
   tragen; baue-tabelle.pl gab es bis dahin nicht aus, die Hinweise an
   "Ausprobieren" und "Unabhaengig zertifiziert" erreichten den Leser nie.

   Das innere div steht sticky, weil die Tabelle auf schmalen Fenstern waagerecht
   scrollt. Ohne das waere der Text ueber die volle Tabellenbreite gezogen und nur
   durch Scrollen lesbar. Zebra und Hover sind ausgenommen: Die Zeile ist keine
   Datenzeile und soll sich auch nicht so verhalten. */
#ki-calc-root tr.hinweis-row td.tabellen-hinweise {
  padding: 14px 15px 10px;
  border-top: 1px solid var(--border);
  background: #fff !important;
  white-space: normal;
}
#ki-calc-root tbody tr.hinweis-row:hover td { background: #fff !important; }
#ki-calc-root .tabellen-hinweise > div {
  position: sticky;
  left: 15px;
  max-width: 760px;
}
/* Ab 1240 Pixel scrollt die Tabelle nicht mehr seitlich (gemessen am
   28.09.2026: bei 1024 Pixel 1200 Pixel Tabelle in 967 Pixel Rahmen, bei
   1280 passt sie genau). Dann duerfen die Hinweise so breit sein wie die
   Tabelle, wie die Pflichtangaben darueber, und jeder steht in einer Zeile. */
@media (min-width: 1240px) {
  #ki-calc-root .tabellen-hinweise > div { max-width: none; }
}
/* Seit 28.09.2026 wie die Pflichtangaben ueber der Tabelle: 13 statt 12
   Pixel, Stichwort dunkel statt #4B5563. Die Tabellenzellen stehen auf
   text-wrap: balance und hyphens: auto (siehe #mainTable td). Hier nicht:
   balance legte den Umbruch in die Mitte, und die fiel genau auf
   "Geld-zurueck-" mit "Garantie" in der naechsten Zeile. */
#ki-calc-root .tabellen-hinweise p {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.6;
  color: #6B7280;
  text-align: left;
  white-space: normal;
  text-wrap: wrap;
  hyphens: manual;
}
#ki-calc-root .tabellen-hinweise p:last-child { margin-bottom: 0; }
#ki-calc-root .tabellen-hinweise strong {
  color: var(--dark);
  font-weight: 600;
}

/* Dieselben Hinweise unter der Kartenansicht am Handy. Die Tabelle steht dort
   auf display none, ihre Hinweiszeile ginge also mit ihr verloren;
   vergleich.js zieht den Inhalt heraus und haengt ihn hier an. */
#ki-calc-root .mobile-hinweise {
  /* 4 auf 20 Pixel seitlich am 22.09.2026. Der Text stand bei 25 Pixel, die
     Merkmalzeilen der Karten darueber bei 41: der Block sah aus, als gehoere
     er nicht dazu. Unten standen 0 Pixel, der letzte Absatz endete einen
     Pixel ueber dem Kartenrand. Gemessen bei 360 Pixel Geraetebreite. */
  padding: 16px 20px;
}
#ki-calc-root .mobile-hinweise p {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.6;
  color: #6B7280;
  text-align: left;
}
#ki-calc-root .mobile-hinweise p:last-child { margin-bottom: 0; }
#ki-calc-root .mobile-hinweise strong {
  color: var(--dark);
  font-weight: 600;
}

/* ===== TASTATURFOKUS AM REGLER =====
   Die Regel oben setzt outline: none. Fuer .calc-input gibt es weiter oben
   einen Ersatz (:focus mit box-shadow), fuer den Regler bisher nicht. Ohne ihn
   sieht niemand, wo er steht, der mit der Tabulatortaste arbeitet.
   Der Ring sitzt am Griff, damit er mit dem Wert wandert. */
#ki-calc-root input[type=range]:focus-visible {
  outline: none;
}
#ki-calc-root input[type=range]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--primary);
}
#ki-calc-root input[type=range]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--primary);
}