/* ==========================================================================
   SiegelAI — Stil der Seite. Fortschreibung des bisherigen Auftritts:
   Geist + Geist Mono, Pillenknöpfe, viel Luft. Ein Akzent je Seite.
   Neu gegenüber der alten Seite: keine Emoji, keine Verlaufsflächen als
   Dekoration, keine Prozentzahlen ohne Quelle.
   ========================================================================== */

@font-face{font-family:'Geist';font-style:normal;font-weight:300 400;font-display:swap;src:url(fonts/geist-300.woff2) format('woff2');}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/geist-500.woff2) format('woff2');}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/geist-600.woff2) format('woff2');}
@font-face{font-family:'Geist';font-style:normal;font-weight:700 800;font-display:swap;src:url(fonts/geist-700.woff2) format('woff2');}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/geist-mono-400.woff2) format('woff2');}

:root{
  --f:  'Geist', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  --fm: 'Geist Mono', 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* --- Gemeinsame Basis, auf allen Seiten gleich --- */
  --bg:    #ffffff;
  --bg2:   #f5f5f7;
  --bg3:   #e8e8ed;
  --ink:   #1d1d1f;
  --body:  #424245;
  --sub:   #6e6e73;
  --line:  #d2d2d7;
  --line2: #e3e3e8;

  /* --- Akzent: Dachfarbe der Startseite (Navy) ---
     Die Unterseiten überschreiben diesen Block über body[data-seite]. */
  --akzent:   #2d2d3f;
  --akzent2:  #1a1a2e;
  --akzent3:  #50506a;
  --akzent4:  #5c5c78;
  --afaint:   rgba(45,45,63,.05);
  --aline:    rgba(45,45,63,.18);
  --asoft:    rgba(45,45,63,.09);

  /* --- Zustandsfarben: seitenunabhängig, überall gleich --- */
  --belegt:      #2a7d45;
  --belegt-bg:   rgba(52,199,89,.07);
  --belegt-line: rgba(52,199,89,.20);
  --fund:        #b45309;
  --fund-bg:     #fff2cc;
  --fund-line:   rgba(180,83,9,.22);
  --nein:        #dc2626;
  --nein-bg:     #fee2e2;
  --haus:        #6d28d9;
  --haus-bg:     rgba(109,40,217,.07);
  --haus-line:   rgba(109,40,217,.20);

  /* --- Altnamen als Verweis, damit vorhandene Regeln weiterlaufen --- */
  --tief:       var(--akzent);
  --tief2:      var(--akzent2);
  --tief3:      var(--akzent3);
  --tief-faint: var(--afaint);
  --tief-line:  var(--aline);
  --ok:         var(--belegt);
  --ok-bg:      var(--belegt-bg);
  --warn:       var(--nein);
  --warn-bg:    var(--nein-bg);

  --nav-h: 60px;
  --wrap:  1320px;   /* Regelbreite: Text, Karten, Tabellen */
  --breit: 1560px;   /* zweite Stufe: Aufmacher und Geräte-Bühnen */
  --lese:   660px;   /* Fließtext, der sonst über die volle Breite liefe */
  --gasse: clamp(22px, 3.4vw, 56px);
}

/* --- Akzentblock je Seite: nur diese Werte unterscheiden sich --- */
body[data-seite="system"]{
  --akzent:#007AFF; --akzent2:#0062cc; --akzent3:#4da6ff; --akzent4:#3d99ff;
  --afaint:rgba(0,122,255,.05); --aline:rgba(0,122,255,.16); --asoft:rgba(0,122,255,.09);
}
body[data-seite="kosten"]{
  --akzent:#d97706; --akzent2:#b45309; --akzent3:#f59e0b; --akzent4:#ea9109;
  --afaint:rgba(217,119,6,.05); --aline:rgba(217,119,6,.16); --asoft:rgba(217,119,6,.09);
}
body[data-seite="pruefung"]{
  --akzent:#7c3aed; --akzent2:#6d28d9; --akzent3:#a78bfa; --akzent4:#8b5cf6;
  --afaint:rgba(124,58,237,.05); --aline:rgba(124,58,237,.16); --asoft:rgba(124,58,237,.09);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px);}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f);font-size:17px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;font-feature-settings:'kern' 1,'liga' 1;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}

/* --- Typografie --------------------------------------------------------- */
h1,h2,h3,h4{margin:0;color:var(--ink);letter-spacing:-.022em;line-height:1.1;font-weight:700;text-wrap:balance;}
h1{font-size:clamp(38px,5vw,68px);letter-spacing:-.03em;line-height:1.06;}
h2{font-size:clamp(28px,3.6vw,46px);letter-spacing:-.026em;}
h3{font-size:clamp(19px,1.6vw,23px);letter-spacing:-.018em;font-weight:600;}
h4{font-size:17px;font-weight:600;letter-spacing:-.01em;}
h1 em,h2 em,h3 em{font-style:normal;font-weight:700;color:var(--akzent);}
p{margin:0 0 1.05em;color:var(--body);text-wrap:pretty;}
p:last-child{margin-bottom:0;}
strong{font-weight:600;color:var(--ink);}
.lead{font-size:clamp(18px,1.5vw,20px);color:var(--sub);line-height:1.6;max-width:48ch;}
.klein{font-size:14px;line-height:1.55;color:var(--sub);}
.mono{font-family:var(--fm);font-variant-numeric:tabular-nums;}

.eyebrow{
  font-family:var(--fm);font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;
  font-weight:600;color:var(--akzent2);margin:0 0 16px;
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:'';width:22px;height:1.5px;background:var(--aline);flex:none;}

/* --- Raster ------------------------------------------------------------- */
.wrap{width:min(100% - var(--gasse)*2, var(--wrap));margin:0 auto;padding:0;}
.wrap.weit{width:min(100% - var(--gasse)*2, var(--breit));}
section{padding:clamp(72px,8.5vw,128px) 0;}
section.getoent{background:var(--bg2);}
/* Zwei graue Abschnitte hintereinander ergäben sonst ein Loch von 256px
   in einer durchgehenden Fläche — dort trennt keine Farbkante mehr. */
section.getoent + section.getoent{padding-top:clamp(40px,4vw,64px);}
section.linie{border-top:1px solid var(--line);}
.kopf{max-width:760px;margin-bottom:clamp(32px,4.5vw,56px);}

/* Fließtext, der sonst über die volle Containerbreite liefe.
   Gemessen: eine Notiz lief bei 1226px Breite auf 169 Zeichen je Zeile. */
.notiz,.hinweis{max-width:var(--lese);}
section > .wrap > p,
.kopf p,
.wrap > .klein{max-width:var(--lese);}
.kopf .lead{margin-top:18px;}

.gitter{display:grid;gap:20px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start;}
.zwei-schmal{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,4vw,64px);align-items:start;}

/* --- Navigation --------------------------------------------------------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  /* richtet sich nach der breiten Stufe — dort steht der Aufmacher,
     der direkt unter der Leiste beginnt. */
  padding:0 max(var(--gasse), calc((100% - var(--breit))/2));
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;transition:background .3s,border-color .3s;
}
nav.gescrollt{background:rgba(255,255,255,.94);border-bottom-color:rgba(0,0,0,.08);}
.marke{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);}
.marke img{width:32px;height:32px;border-radius:7px;}
.marke span{font-size:19px;font-weight:600;letter-spacing:-.3px;}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a{font-size:15px;color:var(--sub);text-decoration:none;transition:color .2s;}
.nav-links a:hover{color:var(--ink);}
.nav-tel{
  font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;
  border:1px solid var(--line);border-radius:100px;padding:8px 16px;transition:border-color .2s,background .2s;
}
.nav-tel:hover{border-color:var(--tief);background:var(--bg2);}
.brenner{display:none;background:none;border:0;padding:10px;cursor:pointer;}
.brenner span{display:block;width:20px;height:1.5px;background:var(--ink);margin:4.5px 0;transition:transform .2s;}
body{padding-top:var(--nav-h);}

/* --- Knöpfe ------------------------------------------------------------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 28px;border-radius:100px;border:1px solid transparent;
  background:linear-gradient(180deg,var(--akzent3) 0%,var(--akzent) 100%);color:#fff;
  font-family:var(--f);font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;
  transition:background .2s,transform .1s,box-shadow .2s;
}
.knopf:hover{background:linear-gradient(180deg,var(--akzent4) 0%,var(--akzent2) 100%);transform:translateY(-1px);box-shadow:0 4px 16px var(--asoft);}
.knopf.leer{background:#fff;color:var(--ink);border-color:var(--line);}
.knopf.leer:hover{background:var(--bg2);border-color:var(--aline);box-shadow:none;transform:none;}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}

/* --- Karten ------------------------------------------------------------- */
.karte{
  background:#fff;border-radius:16px;padding:28px;
  box-shadow:0 2px 12px rgba(0,0,0,.07);
}
.karte h3{margin-bottom:10px;}
.karte p{font-size:15.5px;}
section.getoent .karte{box-shadow:0 2px 14px rgba(0,0,0,.06);}
.karte.rand{box-shadow:none;border:1px solid var(--line);}

/* --- Marke / Chip ------------------------------------------------------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--fm);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:100px;background:var(--bg3);color:var(--sub);
  white-space:nowrap;max-width:100%;
}
/* In schmalen Spalten darf ein langer Chip umbrechen, statt sie zu sprengen. */
.gitter .chip,.karte .chip{white-space:normal;text-align:center;}
.chip.ja{background:var(--belegt-bg);color:var(--belegt);}
.chip.nein{background:var(--nein-bg);color:var(--nein);}
.chip.arbeit{background:var(--afaint);color:var(--akzent);}

/* --- Zahlen ------------------------------------------------------------- */
.zahl{display:flex;flex-direction:column;gap:6px;}
.zahl .wert{font-size:clamp(30px,3.2vw,42px);font-weight:700;letter-spacing:-.03em;color:var(--ink);line-height:1;}
.zahl .was{font-size:14.5px;color:var(--sub);line-height:1.45;}
.zahl .quelle{font-family:var(--fm);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--sub);opacity:.75;}

/* --- Datenblatt --------------------------------------------------------- */
.tab{width:100%;border-collapse:collapse;font-size:15.5px;}
.tab th{
  text-align:left;font-family:var(--fm);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--sub);font-weight:500;
  padding:0 16px 12px 0;border-bottom:1px solid var(--line);
}
.tab td{padding:15px 16px 15px 0;border-bottom:1px solid var(--line2);color:var(--body);vertical-align:top;}
.tab td:first-child{color:var(--ink);font-weight:500;}
.tab tr:last-child td{border-bottom:0;}
.tab .num{font-family:var(--fm);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;}

/* --- Notiz -------------------------------------------------------------- */
.notiz{border-left:2px solid var(--line);padding:2px 0 2px 20px;font-size:15.5px;color:var(--body);}
.notiz.wichtig{border-left-color:var(--akzent);}
.notiz.warn{border-left-color:var(--nein);}

/* --- FAQ ---------------------------------------------------------------- */
details{border-bottom:1px solid var(--line);}
details summary{
  cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;
  font-weight:600;font-size:17px;color:var(--ink);
}
details summary::-webkit-details-marker{display:none;}
details summary::after{
  content:'';position:absolute;right:8px;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--sub);border-bottom:1.5px solid var(--sub);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s;
}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
details .inhalt{padding:0 0 24px;max-width:var(--lese);}

/* --- Fußbereich --------------------------------------------------------- */
footer{padding:64px 0 40px;background:var(--bg2);border-top:1px solid var(--line);font-size:14.5px;}
footer h4{font-family:var(--fm);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sub);margin-bottom:14px;font-weight:500;}
footer a{color:var(--body);text-decoration:none;}
footer a:hover{color:var(--ink);text-decoration:underline;}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.fuss-ende{
  margin-top:44px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;color:var(--sub);font-size:13px;
}

/* --- Erscheinen --------------------------------------------------------- */
.zeig{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease;}
.zeig.da{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.zeig{opacity:1;transform:none;transition:none;}html{scroll-behavior:auto;}}

/* --- Offene Stelle ------------------------------------------------------ */
.offen{background:#fff6d9;border-bottom:1px dashed #c9a227;color:#6b5310;padding:0 .25em;font-family:var(--fm);font-size:.86em;}

/* --- Tastatur ----------------------------------------------------------- */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--akzent2);outline-offset:3px;border-radius:4px;
}

/* --- Schmale Bildschirme ------------------------------------------------ */
@media(max-width:980px){.g4{grid-template-columns:repeat(2,1fr);}.zwei-schmal{grid-template-columns:1fr;}}
@media(max-width:860px){
  .g3{grid-template-columns:1fr;}.zwei{grid-template-columns:1fr;}
  .nav-links{
    display:none;position:fixed;top:var(--nav-h);left:0;right:0;flex-direction:column;
    gap:0;background:#fff;border-bottom:1px solid var(--line);padding:8px var(--gasse) 20px;
  }
  .nav-links.offen{display:flex;}
  .nav-links a{padding:15px 0;border-bottom:1px solid var(--line2);font-size:16px;}
  .brenner{display:block;order:3;}
  .nav-tel{margin-left:auto;order:2;}
}
@media(max-width:640px){
  body{font-size:16px;}
  .g2,.g4{grid-template-columns:1fr;}
  .karte{padding:22px;}
  section{padding:56px 0;}
}
@media print{nav,.knopf-reihe,.brenner{display:none;}section{padding:24px 0;}body{padding-top:0;font-size:11pt;}}

/* --- Rechtstexte als Overlay -------------------------------------------- */
.modal-overlay{display:none;position:fixed;inset:0;z-index:300;background:rgba(29,29,31,.5);padding:5vh 20px;overflow-y:auto;backdrop-filter:blur(4px);}
.modal-overlay.offen{display:block;}
.modal{background:#fff;max-width:760px;margin:0 auto;padding:44px 48px 52px;border-radius:18px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.2);}
.modal h3{font-size:28px;margin-bottom:6px;}
.modal h4{font-size:16px;margin:26px 0 8px;color:var(--ink);}
.modal .meta{font-family:var(--fm);font-size:12px;color:var(--sub);margin-bottom:22px;}
.modal p,.modal li{font-size:15px;color:var(--body);line-height:1.6;}
.modal ul{padding-left:20px;margin:8px 0 16px;}
.modal hr{border:0;border-top:1px solid var(--line);margin:28px 0;}
.modal a{color:var(--tief);}
.modal-close{position:absolute;top:18px;right:18px;background:var(--bg2);border:0;border-radius:50%;width:34px;height:34px;cursor:pointer;color:var(--sub);font-size:15px;line-height:1;}
.modal-close:hover{background:var(--bg3);color:var(--ink);}
@media(max-width:640px){.modal{padding:32px 22px 40px;border-radius:14px;}}

/* --- Korrekturen -------------------------------------------------------- */
/* Grid-Kinder haben min-width:auto und sprengen sonst die Spalte */
.gitter > *,.zwei > *,.zwei-schmal > *{min-width:0;}
.karte{overflow-wrap:break-word;}


/* --- Muster aus dem bisherigen Auftritt ---------------------------------- */

/* Produktkarte mit farbiger Oberkante */
.karte.produkt{position:relative;overflow:hidden;padding-top:32px;display:flex;flex-direction:column;}
.karte.produkt::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--k3,var(--akzent3)),var(--k1,var(--akzent)));
}
.karte.produkt .eyebrow{color:var(--k2,var(--akzent2));}
.karte.produkt .eyebrow::before{background:var(--k1,var(--akzent));opacity:.3;}
.karte.produkt .weiter{
  margin-top:auto;padding-top:18px;font-size:15px;font-weight:600;
  color:var(--k2,var(--akzent2));text-decoration:none;display:inline-flex;align-items:center;gap:7px;
}
.karte.produkt .weiter:hover{gap:11px;}
.karte.produkt .weiter span{transition:transform .2s;}
.karte-blau{--k1:#007AFF;--k2:#0062cc;--k3:#4da6ff;}
.karte-orange{--k1:#d97706;--k2:#b45309;--k3:#f59e0b;}
.karte-lila{--k1:#7c3aed;--k2:#6d28d9;--k3:#a78bfa;}

/* Hinweisbox im Akzent */
.hinweis{
  background:var(--afaint);border-left:3px solid var(--akzent);
  border-radius:0 16px 16px 0;padding:20px 26px;font-size:15.5px;color:var(--body);line-height:1.65;
}
.hinweis strong{color:var(--ink);}

/* Pulsierender Punkt für „läuft“ */
.pulse{width:8px;height:8px;border-radius:50%;background:var(--akzent);flex:none;animation:pulse 2s infinite;}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.45;transform:scale(.72);}
}
@media (prefers-reduced-motion:reduce){.pulse{animation:none;}}

/* Marke im Kopf trägt die Akzentfarbe der Seite */
.nav-links a.aktiv{color:var(--akzent2);font-weight:600;}
.nav-tel:hover{border-color:var(--akzent);}

/* --- Aufmacher zweispaltig mit App-Fenster ------------------------------- */
.hero-raster{display:grid;grid-template-columns:1fr 1.18fr;gap:clamp(28px,4vw,52px);align-items:center;}
.hero-raster > *{min-width:0;}
/* Zweispaltig ist weniger Platz je Zeile — die Überschrift wird entsprechend kleiner */
.hero-raster h1{font-size:clamp(31px,3.3vw,46px);}
@media(max-width:980px){
  .hero-raster{grid-template-columns:1fr;gap:38px;}
  .hero-raster h1{font-size:clamp(34px,5.4vw,56px);}
  .hero-fenster{max-width:560px;}
}

/* Auf schmalen Geräten darf die Zahlenspalte umbrechen — sonst sprengt
   eine Zeile wie „~9 W Leerlauf · ~200 W Last“ die Seitenbreite. */
@media(max-width:560px){
  .tab .num{white-space:normal;}
  .tab td,.tab th{padding-right:10px;}
}
/* „Geheimhaltungsvereinbarung“ passt sonst in keine schmale Spalte */
@media(max-width:700px){
  .tab td,.tab th{overflow-wrap:anywhere;hyphens:auto;}
}

/* Kleine farbige Texte nehmen den dunkleren Ton — er erfüllt 4,5:1.
   Große Überschriften dürfen den helleren Vollton behalten (3:1 genügt dort). */
.rk-gross,.zahl .wert{color:var(--akzent2);}

/* --- Akzente der neuen Seiten -------------------------------------------- */
body[data-seite="vergleich"]{
  --akzent:#0f766e; --akzent2:#0d5f59; --akzent3:#2dd4bf; --akzent4:#14b8a6;
  --afaint:rgba(15,118,110,.05); --aline:rgba(15,118,110,.16); --asoft:rgba(15,118,110,.09);
}
body[data-seite="it"]{
  --akzent:#475569; --akzent2:#334155; --akzent3:#94a3b8; --akzent4:#64748b;
  --afaint:rgba(71,85,105,.05); --aline:rgba(71,85,105,.16); --asoft:rgba(71,85,105,.09);
}

/* --- Formular ------------------------------------------------------------ */
.fm-reihe{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.fm-reihe > *{min-width:0;}
.feld{display:block;margin-top:16px;}
.fm > .feld:first-child,.fm-reihe .feld{margin-top:0;}
.fm-reihe{margin-top:16px;}
.fm > .fm-reihe:first-child{margin-top:0;}
.feld > span{display:block;margin-bottom:6px;font-size:14px;line-height:1.45;color:var(--sub);}
.feld input,.feld select,.feld textarea{
  width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:10px;
  font-family:var(--f);font-size:16px;background:#fff;color:var(--ink);
}
.feld textarea{resize:vertical;}
.feld select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236e6e73' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:38px;}
.feld input:focus,.feld select:focus,.feld textarea{border-color:var(--aline);}
.fm-falle{position:absolute;left:-9999px;}
@media(max-width:640px){.fm-reihe{grid-template-columns:1fr;}}

/* --- Vergleichstabelle --------------------------------------------------- */
.vgl-rahmen{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff;}
.vgl{width:100%;border-collapse:collapse;font-size:14.5px;min-width:720px;}
.vgl th,.vgl td{padding:14px 16px;border-bottom:1px solid var(--line2);text-align:left;vertical-align:top;}
.vgl thead th{
  background:var(--bg2);font-family:var(--fm);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--sub);font-weight:500;border-bottom:1px solid var(--line);
}
.vgl thead th.uns{color:var(--akzent2);background:var(--afaint);}
.vgl tbody td:first-child{color:var(--ink);font-weight:500;width:29%;}
.vgl td.uns{background:var(--afaint);}
.vgl tr:last-child td{border-bottom:0;}
.vgl .ja{color:var(--belegt);font-weight:600;}
.vgl .nein{color:var(--nein);}
.vgl .teils{color:var(--fund);}
.vgl .q{display:block;margin-top:5px;font-family:var(--fm);font-size:10.5px;color:var(--sub);opacity:.85;}

/* --- Preistafel ---------------------------------------------------------- */
.stufe{display:flex;flex-direction:column;position:relative;}
.stufe .preis{
  font-size:clamp(28px,3vw,38px);font-weight:700;letter-spacing:-.03em;
  color:var(--akzent2);line-height:1;margin:6px 0 4px;
}
.stufe .preis small{font-size:15px;font-weight:500;color:var(--sub);letter-spacing:0;}
.stufe .dazu{font-size:13.5px;color:var(--sub);margin-bottom:14px;}
.stufe ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;}
.stufe ul li{position:relative;padding-left:22px;font-size:14.5px;color:var(--body);}
.stufe ul li::before{
  content:'';position:absolute;left:2px;top:.5em;width:9px;height:5px;
  border-left:1.6px solid var(--belegt);border-bottom:1.6px solid var(--belegt);
  transform:rotate(-45deg);
}
.stufe.hervor{border:1.5px solid var(--akzent);box-shadow:0 6px 24px var(--asoft);}
.stufe .marke-oben{
  position:absolute;top:-11px;left:24px;background:var(--akzent);color:#fff;
  font-family:var(--fm);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 11px;border-radius:100px;
}

/* --- Rechner ------------------------------------------------------------- */
.er-feld{margin-bottom:22px;}
.er-feld > label{display:block;font-size:15px;color:var(--ink);margin-bottom:10px;}
.er-feld .er-w{
  font-family:var(--fm);font-size:15px;color:var(--akzent2);font-weight:600;float:right;
  font-variant-numeric:tabular-nums;
}
.er-feld input[type=range]{width:100%;accent-color:var(--akzent);height:22px;}
.er-kasten{background:var(--bg2);border-radius:14px;padding:24px 26px;}
.er-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--line2);}
.er-zeile:last-of-type{border-bottom:0;}
.er-zeile .b{font-size:14.5px;color:var(--body);}
.er-zeile .w{font-family:var(--fm);font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
.er-summe{margin-top:14px;padding-top:16px;border-top:1px solid var(--line);}
.er-summe .w{font-size:clamp(22px,2.4vw,30px);font-weight:700;letter-spacing:-.02em;}

/* Breite Tabelle auf schmalen Geräten: sichtbar machen, dass sie wischbar ist */
@media(max-width:760px){
  .vgl-rahmen{position:relative;}
  .vgl-rahmen::after{
    content:'→ seitlich wischen';position:sticky;left:0;display:block;
    font-family:var(--fm);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--sub);background:var(--bg2);padding:7px 14px;border-top:1px solid var(--line2);
  }
}

/* --- Klappe für die freiwilligen Formularangaben ------------------------- */
.fm-mehr{border:0;border-top:1px solid var(--line2);margin-top:20px;padding-top:4px;}
.fm-mehr summary{
  padding:14px 24px 14px 0;font-size:14.5px;font-weight:500;color:var(--sub);
}
.fm-mehr summary:hover{color:var(--ink);}
.fm-mehr summary::after{width:8px;height:8px;right:6px;}
.fm-mehr[open] summary{color:var(--ink);}
.fm-mehr > .feld:first-of-type,.fm-mehr > .fm-reihe:first-of-type{margin-top:0;}
.fm-mehr .feld,.fm-mehr .fm-reihe{margin-bottom:4px;}

/* Zahlenband: fünf Kacheln, die sich sauber auf drei Breiten verteilen */
.zahlen-band{grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px);}
@media(max-width:980px){.zahlen-band{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.zahlen-band{grid-template-columns:1fr;}}

/* --- Handlungsaufruf in der Navigationsleiste --------------------------- */
.nav-cta{
  font-size:14px;font-weight:600;color:#fff;text-decoration:none;flex:none;
  background:linear-gradient(180deg,var(--akzent3) 0%,var(--akzent) 100%);
  border-radius:100px;padding:9px 18px;transition:filter .2s;
}
.nav-cta:hover{filter:brightness(1.08);}
.nav-cta + .nav-tel{margin-left:12px;}
/* Die Leiste ist ein flex mit space-between: Marke | Links | Knöpfe.
   Damit die Knöpfe zusammenbleiben, stecken sie in einer eigenen Gruppe. */
.nav-rechts{display:flex;align-items:center;gap:12px;flex:none;}
@media(max-width:1080px){.nav-cta{display:none;}}

/* --- Rechtstexte als eigene Seiten -------------------------------------- */
.recht{padding-top:clamp(40px,5vw,72px);}
.recht-text{max-width:760px;}
.recht-text h1{font-size:clamp(30px,3.6vw,44px);margin-bottom:8px;}
.recht-meta{margin-bottom:28px;}
.recht-h2{font-size:18px;font-weight:600;margin:30px 0 8px;letter-spacing:-.01em;}
.recht-text p,.recht-text li{font-size:15.5px;line-height:1.65;color:var(--body);}
.recht-text ul{padding-left:20px;margin:8px 0 16px;}
.recht-text a{color:var(--akzent2);}

/* --- Beta-Marke ---------------------------------------------------------- */
.chip.beta{background:var(--fund-bg);color:var(--fund);font-size:10px;padding:2px 8px;letter-spacing:.08em;vertical-align:middle;margin-left:2px;}
.nav-links a .chip.beta{margin-left:6px;position:relative;top:-1px;}
.eyebrow .chip.beta{margin-left:0;}

/* --- Antwortkarte im Aufmacher ------------------------------------------ */
.hero-antwort{max-width:640px;width:100%;justify-self:end;}
@media(max-width:980px){.hero-antwort{justify-self:start;max-width:560px;}}
.ha-rahmen{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.10);overflow:hidden;}
.ha-leiste{display:flex;align-items:center;gap:7px;padding:12px 16px;background:var(--bg2);border-bottom:1px solid var(--line2);font-family:var(--fm);font-size:12px;color:var(--sub);}
.ha-leiste .zg-punkt{width:9px;height:9px;border-radius:50%;background:var(--line);display:inline-block;}
.ha-titel{margin-left:8px;flex:1;}
.ha-lokal{display:inline-flex;align-items:center;gap:7px;color:var(--belegt);font-weight:500;}
.ha-lokal .pulse{background:var(--belegt);}
.ha-frage,.ha-antwort{padding:18px 22px;}
.ha-frage{border-bottom:1px solid var(--line2);}
.ha-frage p{font-size:16.5px;color:var(--ink);font-weight:500;margin:0;}
.ha-antwort p{font-size:15.5px;color:var(--body);margin:0;}
.ha-wer{display:block;font-family:var(--fm);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);margin-bottom:8px;}
.ha-beleg{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;padding:10px 12px;border-radius:10px;background:var(--belegt-bg);border:1px solid var(--belegt-line);font-size:13.5px;color:var(--body);}
.ha-beleg-marke{font-family:var(--fm);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--belegt);font-weight:600;}
.ha-beleg-text{flex:1;min-width:200px;}
.ha-beleg-link{color:var(--belegt);font-weight:600;white-space:nowrap;}
.ha-alt{display:flex;gap:10px;align-items:flex-start;margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--fund-bg);border:1px solid var(--fund-line);font-size:13.5px;color:var(--body);}
.ha-alt-marke{font-family:var(--fm);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fund);font-weight:600;white-space:nowrap;padding-top:2px;}
.ha-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 22px;border-top:1px solid var(--line2);background:var(--bg2);font-size:13px;color:var(--sub);}
.ha-fuss .zg-trenn{width:1px;height:14px;background:var(--line);display:inline-block;}
.ha-fuss strong{color:var(--ink);}

/* Preistafel mit vier Stufen: auf mittleren Breiten zweispaltig */
@media(max-width:1180px){#preise .g4{grid-template-columns:repeat(2,1fr);}}