/* ==========================================================================
   SicherAnlage — Visuelles System v4 "Klarvergleich" (sa4.css)
   Nuechternes deutsches Vergleichsportal: viel Weiss, eine Sans-Schrift
   (Inter), Gruen ausschliesslich als Marken-/Aktionsfarbe, Angebote als
   vollbreite Vergleichszeilen. Zielgruppe 55+: Basis 18px, Touchziele
   min. 48px, klare Beschriftungen, hohe Kontraste.
   Ersetzt sa3.css vollstaendig; Klassenvertrag der Modals/Formulare bleibt.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Flaechen */
  --bg:        #F5F7F6;
  --surface:   #FFFFFF;
  --tint:      #E9F5EF;   /* helle Gruenflaeche (Hero, Rueckruf) */
  --tint-line: #CFE8DA;
  --dark:      #10241A;   /* Topbar, Sicherheit, Footer */
  --dark-2:    #1A3527;
  --dark-line: #27452F;

  /* Text */
  --ink:       #1B2A22;
  --muted:     #5B6B62;
  --faint:     #93A29A;
  --on-dark:   #F2F7F4;
  --on-dark-2: #A9C4B4;

  /* Marke / Aktion */
  --green:       #1E7A46;
  --green-hover: #176539;
  --green-light: #22A05C;
  --green-soft:  #DEF2E6;
  --on-dark-acc: #7FD0A2;

  /* Linien & Schatten */
  --line:      #E2E8E4;
  --line-soft: #EDF1EE;
  --sh-hover:  0 2px 8px rgba(16,36,26,.06);
  --sh-card:   0 1px 3px rgba(16,36,26,.05);
  --sh-pop:    0 6px 24px rgba(16,36,26,.14);

  /* Bonus (bewusst warm, ausserhalb der Gruenwelt) */
  --bonus-bg:   #FFF4DC;
  --bonus-text: #7A5200;
  --bonus-line: #EAD9AC;

  /* Status */
  --danger: #B3362B;

  /* Geometrie */
  --r-sm: 8px;
  --r-md: 12px;
  --r-pill: 999px;
  --maxw: 1200px;
  --pad: clamp(12px, 4vw, 32px);

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ---------- Reset & Basis ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* overflow-x auf html UND body: verhindert seitliches "Wackeln" auch auf
   aelteren iOS/Android-Browsern (die kennen overflow:clip nicht) */
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--bg);
  font-size:18px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:var(--green); text-decoration:none; }
a:hover{ color:var(--green-hover); }
h1,h2,h3,h4{ margin:0; line-height:1.2; letter-spacing:-.01em; color:var(--ink); }
h1{ font-size:clamp(28px,5vw,44px); font-weight:800; }
h2{ font-size:clamp(24px,3.5vw,32px); font-weight:700; }
h3{ font-size:20px; font-weight:700; }
p{ margin:0; }
strong,b{ font-weight:700; }
button{ font-family:inherit; }
input,select,textarea{ font-family:inherit; font-size:18px; color:var(--ink); }
[id]{ scroll-margin-top:150px; }
.num, .rate-num, .row-zins b, .row-ertrag b{ font-variant-numeric:tabular-nums; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
/* Grid-Kinder duerfen nie den Viewport sprengen */
.wrap > *, .row-grid > *{ min-width:0; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible{
  outline:2px solid var(--green); outline-offset:2px; border-radius:3px;
}

.section{ padding:clamp(44px,7vw,84px) 0; }
.section-head{ max-width:720px; margin-bottom:clamp(24px,4vw,40px); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ margin-bottom:10px; }
.section-head p{ color:var(--muted); font-size:18px; }
.eyebrow{
  display:inline-block; font-size:14px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--green); margin-bottom:10px;
}

/* Scroll-Fortschritt */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--green-light); z-index:1400; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:.65em 1.4em; border-radius:var(--r-sm);
  font-weight:700; font-size:17px; border:1px solid transparent; cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
  text-align:center;
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn-primary, .btn-lime{ background:var(--green); color:#fff; border-color:var(--green); }
.btn-primary:hover, .btn-lime:hover{ background:var(--green-hover); border-color:var(--green-hover); color:#fff; }
.btn-outline, .btn-ghost{ background:var(--surface); color:var(--ink); border-color:var(--line); }
.btn-outline:hover, .btn-ghost:hover{ border-color:var(--green); color:var(--green); }
.btn-block{ width:100%; }
.btn-sm{ min-height:44px; font-size:16px; padding:.5em 1.1em; }

/* ==========================================================================
   Topbar (Live-Zins) + Header
   ========================================================================== */
.t2{ background:var(--dark); color:var(--on-dark-2); font-size:14px; }
.t2-in{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:38px; }
.t2-live{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; overflow:hidden; }
.t2-live b{ color:var(--on-dark-acc); font-weight:700; }
.t2-dot{ width:8px; height:8px; border-radius:50%; background:var(--green-light); flex:none; animation:pulse 1.8s ease infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
.t2-right{ display:inline-flex; align-items:center; gap:16px; white-space:nowrap; }
.t2-right a{ color:var(--on-dark-2); display:inline-flex; align-items:center; gap:6px; }
.t2-right a:hover{ color:var(--on-dark); }
.t2-right svg{ width:14px; height:14px; color:var(--on-dark-acc); }

header#siteHeader{
  position:sticky; top:0; z-index:1000; background:var(--surface);
  border-bottom:1px solid var(--line);
}
header#siteHeader.scrolled{ box-shadow:var(--sh-hover); }
.hd2{ display:flex; align-items:center; gap:18px; min-height:60px; }
.hd2 .logo{ display:inline-flex; align-items:center; flex:none; min-width:0; }
/* Logogroesse wie im Footer (30 px) — wirkt ruhiger */
.logo-img{ height:30px; width:auto; max-width:min(46vw,200px); }
.nav-links{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav-links a{
  padding:.55em .75em; color:var(--ink); font-weight:600; font-size:16.5px;
  border-radius:6px; position:relative; white-space:nowrap;
}
.nav-links a:hover{ background:var(--line-soft); }
.nav-links a.active{ color:var(--green); }
.hd2-actions{ display:flex; align-items:center; gap:10px; flex:none; }
.hd2-login{
  display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:16.5px;
  color:var(--ink); padding:.55em .8em; border-radius:6px;
}
.hd2-login:hover{ background:var(--line-soft); color:var(--ink); }
.hd2-login svg{ width:17px; height:17px; color:var(--green); }
.nav-toggle{
  display:none; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  width:48px; height:48px; align-items:center; justify-content:center; cursor:pointer;
  color:var(--ink); flex:none;
}
.nav-toggle svg{ width:22px; height:22px; }
/* Burger wird zum X, solange das Menue offen ist */
.nav-toggle .ic-close{ display:none; }
.nav-toggle.open .ic-burger{ display:none; }
.nav-toggle.open .ic-close{ display:block; }
.menu-only{ display:none; }
/* Zwischenzone 1121-1300 px (auch per Browser-Zoom erreichbar):
   Navigation leicht verdichten, damit nichts kollidiert */
@media (min-width:1121px) and (max-width:1300px){
  .logo-img{ max-width:180px; }
  .nav-links{ gap:0; }
  .nav-links a{ font-size:15.5px; padding:.5em .55em; }
  .hd2-actions .btn-sm{ font-size:15px; padding:.45em .8em; }
}
/* Desktop-Navigation: mittig als halbtransparente Pille, Logo betont */
@media (min-width:1121px){
  .hd2{ position:relative; min-height:60px; }
  /* Pille ist absolut zentriert -> Buttons wieder nach rechts schieben */
  .hd2-actions{ margin-left:auto; }
  .nav-links{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    margin:0; flex-wrap:nowrap; overflow:hidden;
    background:rgba(245,247,246,.72); border:1px solid var(--line);
    border-radius:var(--r-pill); padding:5px 7px; gap:2px;
    backdrop-filter:blur(5px);
  }
  .nav-links a{ border-radius:var(--r-pill); padding:.5em .95em; }
  .nav-links a.active{ background:var(--green-soft); }
}

@media (max-width:1120px){
  .t2-right{ display:none; }
  .t2-in{ justify-content:center; min-height:34px; }
  .t2{ font-size:13px; }
  .hd2{ min-height:54px; gap:10px; }
  .logo-img{ height:24px; max-width:min(46vw,150px); }
  .hd2-actions .btn, .hd2-login span{ display:none; }
  .hd2-login{ padding:.5em; }
  .nav-toggle{ display:inline-flex; }
  /* Kompaktes Ausklapp-Menue unter der Kopfzeile */
  .nav-links{
    position:fixed; top:calc(34px + 58px + 8px); left:10px; right:10px; z-index:1300; margin:0;
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-md); box-shadow:var(--sh-pop);
    padding:6px 14px 14px;
    opacity:0; transform:translateY(-8px); visibility:hidden; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .nav-links.open{
    opacity:1; transform:none; visibility:visible; pointer-events:auto;
    transition:opacity .18s ease, transform .18s ease;
  }
  .nav-links a{ padding:.72em 2px; font-size:17px; border-bottom:1px solid var(--line-soft); border-radius:0; }
  .nav-links a:hover{ background:none; color:var(--green); }
  .menu-only{ display:flex; }
  /* Menue-Buttons: untereinander, volle Breite, klare Abstaende */
  .menu-cta-row{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:14px; }
  .nav-links a.menu-cta{
    display:flex; justify-content:center; align-items:center; min-height:52px;
    background:var(--green); color:#fff; font-weight:700; font-size:17px;
    border-radius:var(--r-sm); border-bottom:none; padding:.5em .8em;
    text-align:center; line-height:1.3;
  }
  .nav-links a.menu-cta:hover{ background:var(--green-hover); color:#fff; }
  .nav-links a.menu-cta.ghost{ background:var(--surface); color:var(--ink); border:1px solid var(--line); }
  /* Kontaktblock unten im Menue — ruhige Zeilen wie in der Topbar */
  .menu-contact2{
    display:flex; flex-direction:column; gap:2px; margin-top:12px;
    border-top:1px solid var(--line); padding-top:10px;
  }
  .nav-links .menu-contact2 a{
    display:flex; align-items:center; gap:10px;
    padding:.6em 2px; font-size:16px; font-weight:600; color:var(--ink);
    border-bottom:none;
  }
  .nav-links .menu-contact2 a:hover{ color:var(--green); background:none; }
  .menu-contact2 svg{ width:17px; height:17px; color:var(--green); flex:none; }
  /* Dezente Rechtslinks am Menue-Ende (Impressum muss auffindbar sein) */
  .menu-legal{ margin:8px 0 0; text-align:center; font-size:13.5px; color:var(--faint); }
  .nav-links .menu-legal a{
    display:inline; padding:0; border-bottom:none; font-size:13.5px;
    font-weight:500; color:var(--muted); text-decoration:underline;
  }
  .nav-links .menu-legal a:hover{ color:var(--green); background:none; }
  .menu-note{ margin-top:10px; font-size:14px; color:var(--muted); text-align:center; border-bottom:none !important; }
  .menu-note a{ font-weight:600; }
}
@media (max-width:640px){ .hide-sm{ display:none !important; } }

/* ==========================================================================
   Hero-Zinsband + Trust-Leiste
   ========================================================================== */
.hero4{ background:var(--tint); border-bottom:1px solid var(--tint-line); padding:clamp(26px,4vw,48px) 0; }
.hero4-grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(22px,4vw,52px); align-items:center; }
.hero4-copy h1 b{ color:var(--green); white-space:nowrap; }
.hero4-sub{ margin:14px 0 20px; font-size:19px; color:var(--muted); max-width:60ch; }
.hero4-ctas{ display:flex; flex-wrap:wrap; gap:12px; }
/* "Warum so hohe Zinsen?" als deutlicher Info-Button */
/* "Warum so hohe Zinsen?" — die meistgestellte Frage: als vollwertiger,
   unuebersehbarer Button (weiss mit kraeftigem gruenem Rahmen + Puls-Punkt) */
.hero4-why{ margin:0 0 20px; }
.hero4-why a{
  display:inline-flex; align-items:center; gap:10px;
  min-height:50px; padding:.55em 1.35em;
  background:var(--surface); border:2px solid var(--green);
  border-radius:var(--r-pill); color:var(--green-hover);
  font-size:16.5px; font-weight:700; text-decoration:none;
  box-shadow:var(--sh-card);
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.hero4-why a:hover{ background:var(--green); color:#fff; transform:translateY(-1px); }
.hero4-why a::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--green-light); animation:pulse 1.8s ease infinite;
}
.hero4-why svg{ width:19px; height:19px; flex:none; }
@media (max-width:560px){
  .hero4-why a{ width:100%; justify-content:center; font-size:15.5px; }
}
/* Drei Wege: Portal / E-Mail / Telefon — Icon-Spalte fest, Text buendig */
.hero4-ways{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:9px; }
.hero4-ways li{ display:flex; align-items:flex-start; gap:10px; font-size:15.5px; color:var(--muted); }
.hero4-ways li > svg{
  width:30px; height:30px; flex:none; padding:6px; margin-top:1px;
  color:var(--green); background:var(--green-soft); border-radius:8px;
}
.hero4-ways li > span{ flex:1; min-width:0; line-height:1.5; padding-top:3px; }
.hero4-ways li b{ color:var(--ink); font-weight:700; }
.hero4-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-card); padding:22px 24px; text-align:center;
}
.hero4-card .hc-label{ font-size:14px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:8px; }
.hero4-card .hc-bank{ margin-top:12px; display:flex; align-items:center; justify-content:center; gap:10px; font-weight:700; font-size:17px; }
.hero4-card .hc-bank img{ max-height:30px; max-width:90px; object-fit:contain; }
.hero4-card .hc-rate{ font-size:clamp(38px,4vw,48px); font-weight:800; color:var(--green); line-height:1.1; margin:6px 0 2px; font-variant-numeric:tabular-nums; }
.hero4-card .hc-rate small{ font-size:17px; font-weight:700; color:var(--muted); }
.hero4-card .hc-term{ color:var(--muted); font-size:15px; margin-bottom:12px; }
.hero4-card .hc-link{ font-weight:700; font-size:16px; }
@media (max-width:1000px){
  .hero4-grid{ grid-template-columns:1fr; }
  .hero4-card{ display:none; }
  .hero4-sub{ font-size:17px; }
}

.trust{ background:var(--surface); border-bottom:1px solid var(--line); }
.trust-in{ display:flex; flex-wrap:wrap; gap:8px 28px; justify-content:center; padding-top:13px; padding-bottom:13px; }
.trust-item{ display:inline-flex; align-items:center; gap:8px; font-size:15.5px; color:var(--ink); font-weight:500; }
.trust-item svg{ width:17px; height:17px; color:var(--green); flex:none; }

/* ==========================================================================
   Angebots-Steuerleiste (Laufzeit-Segmente + Betrag)
   ========================================================================== */
.control{ background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:57px; z-index:900; }
@media (min-width:1121px){ .control{ top:71px; } }
.control-in{ display:flex; flex-wrap:wrap; align-items:end; gap:14px 22px; padding-top:14px; padding-bottom:14px; }
.control-group{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.control-label{ font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.seg{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.seg-btn{
  min-height:52px; padding:6px 10px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); cursor:pointer; text-align:center; line-height:1.25;
  transition:border-color .15s ease, background .15s ease;
}
.seg-btn b{ display:block; font-size:16px; font-weight:700; color:var(--ink); white-space:nowrap; }
.seg-btn small{ display:block; font-size:13.5px; font-weight:600; color:var(--green); white-space:nowrap; }
.seg-btn:hover{ border-color:var(--green); }
.seg-btn.on{ background:var(--green); border-color:var(--green); }
.seg-btn.on b, .seg-btn.on small{ color:#fff; }
.control select{
  min-height:52px; min-width:210px; padding:0 .8em; font-size:17px; font-weight:600;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface);
}
.control-note{ margin-left:auto; font-size:14.5px; color:var(--muted); align-self:center; }
.control-note b{ color:var(--green); }
@media (max-width:760px){
  .control{ position:static; }
  .control-in{ align-items:stretch; }
  .control-group{ width:100%; }
  .control select{ width:100%; }
  .control-note{ display:none; }
  .seg-btn{ min-height:48px; }
  .seg-btn b{ font-size:14.5px; }
  .seg-btn small{ font-size:12.5px; }
}
@media (max-width:560px){
  .seg{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .seg-btn b{ font-size:15.5px; }
  .seg-btn small{ font-size:13.5px; }
}

/* ==========================================================================
   Vergleichsliste (Zeilen)
   ========================================================================== */
.list-head{
  display:grid; gap:14px; align-items:center;
  grid-template-columns:88px minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 150px;
  padding:10px 18px; font-size:13.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--faint);
}
@media (max-width:920px){ .list-head{ display:none; } }

.offer-grid{ display:flex; flex-direction:column; gap:14px; }
.offer{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--sh-card);
  transition:box-shadow .18s ease, border-color .18s ease;
}
.offer:hover{ box-shadow:var(--sh-hover); border-color:#CBD8CF; }
.offer.is-top{ border-color:var(--green); }
.offer-badge{
  position:absolute; top:-11px; left:16px; z-index:2;
  background:var(--green); color:#fff; font-size:13px; font-weight:700;
  letter-spacing:.04em; border-radius:6px; padding:.3em .9em;
}
.row-grid{
  display:grid; gap:14px; align-items:center; padding:16px 18px;
  grid-template-columns:88px minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 150px;
}
.row-logo{
  width:88px; height:56px; border:1px solid var(--line); border-radius:var(--r-sm);
  display:grid; place-items:center; background:#fff; overflow:hidden;
}
.row-logo img{ max-width:72px; max-height:44px; object-fit:contain; }
.row-logo.no-logo{ font-size:24px; font-weight:800; color:var(--green); background:var(--green-soft); border-color:var(--tint-line); }
.row-id .row-name{ font-size:19px; font-weight:700; }
.row-id .row-country{ font-size:15px; color:var(--muted); margin-top:2px; }
.row-stars{ display:flex; align-items:center; gap:7px; margin-top:4px; font-size:14px; color:var(--muted); }
.row-stars .st{ color:var(--green-light); letter-spacing:.12em; font-size:13px; }
.bonus-pill{
  display:inline-flex; align-items:center; gap:5px; margin-top:7px;
  background:var(--bonus-bg); color:var(--bonus-text); border:1px solid var(--bonus-line);
  border-radius:var(--r-pill); font-size:14px; font-weight:700; padding:.25em .85em;
  cursor:pointer; border-style:solid;
}
.bonus-pill:hover{ filter:brightness(.97); }
.row-zins .row-mini{ font-size:13.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.row-zins b{ display:block; font-size:34px; font-weight:800; color:var(--green); line-height:1.15; white-space:nowrap; }
.row-zins b small{ font-size:16px; font-weight:700; color:var(--muted); }
.row-terms{ display:inline-flex; gap:4px; margin-top:6px; flex-wrap:wrap; }
.ot{
  min-height:30px; padding:2px 9px; font-size:13.5px; font-weight:700; cursor:pointer;
  border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--muted);
}
.ot:hover{ border-color:var(--green); color:var(--green); }
.ot.on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.row-ertrag .row-mini{ font-size:13.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.row-ertrag b{ display:block; font-size:21px; font-weight:800; color:var(--green); white-space:nowrap; }
.row-amt{ display:flex; align-items:center; gap:6px; font-size:14px; color:var(--muted); margin-top:5px; }
.amt-select{
  min-height:34px; padding:2px 6px; font-size:14px; font-weight:600;
  border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink);
  cursor:pointer; max-width:100%;
}
.amt-select:hover{ border-color:var(--green); }
.row-fakten{ font-size:15px; color:var(--ink); display:flex; flex-direction:column; gap:5px; }
.row-fakten span{ display:block; }
.row-fakten .fl{ color:var(--muted); font-size:13.5px; }
.row-cta{ display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.offer-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; border:none; border-radius:var(--r-sm); cursor:pointer;
  background:var(--green); color:#fff; font-weight:700; font-size:16.5px;
  transition:background .15s ease; padding:.4em 1em;
}
.offer-cta:hover{ background:var(--green-hover); }
.offer-cta svg{ width:16px; height:16px; }
.offer-about-toggle{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:none; border:none; cursor:pointer; min-height:34px;
  font-size:15px; font-weight:600; color:var(--green); padding:2px;
}
.offer-about-toggle svg{ width:15px; height:15px; transition:transform .2s ease; }
.offer-about-toggle.open svg{ transform:rotate(180deg); }

/* Aufklappbereich — kompakt: links Staffel + CTA, rechts Vorteile + Kurztext */
.offer-about{
  border-top:1px solid var(--line); background:#FAFCFA;
  border-radius:0 0 var(--r-md) var(--r-md);
  padding:16px 18px; display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:18px 24px;
}
/* display:grid wuerde das hidden-Attribut ueberschreiben — explizit ausblenden */
.offer-about[hidden]{ display:none; }
/* Grid-Kinder duerfen die Spalte nicht aufspreizen (Staffel-Tabelle scrollt intern) */
.offer-about > *{ min-width:0; }
.oa-col{ display:flex; flex-direction:column; gap:12px; }
.oa-title{ font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); }
.oa-cta{ align-self:flex-start; min-height:44px; font-size:15.5px; padding:.4em 1.3em; }
.oa-desc-text{ font-size:14.5px; color:var(--muted); line-height:1.65; }
.st-row{ cursor:pointer; }
.st-row:hover td{ background:var(--line-soft); }
@media (max-width:920px){ .oa-cta{ align-self:stretch; text-align:center; } }
.offer.is-open{ border-left:3px solid var(--green); }
.oa-desc p{ font-size:16px; color:var(--ink); line-height:1.65; }
.oa-benefits{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:8px; }
.oa-benefits li{ display:flex; gap:9px; align-items:flex-start; font-size:15px; color:var(--ink); }
.oa-benefits svg{ width:15px; height:15px; color:var(--green); flex:none; margin-top:4px; }
.oa-staffel{ overflow-x:auto; }
.oa-staffel table{ border-collapse:collapse; width:100%; font-size:15px; }
.oa-staffel th, .oa-staffel td{ padding:8px 10px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }
@media (max-width:360px){
  .oa-staffel table{ font-size:13.5px; }
  .oa-staffel th, .oa-staffel td{ padding:6px 6px; }
  .oa-staffel th{ font-size:11.5px; }
}
.oa-staffel th{ font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); }
.oa-staffel td b{ color:var(--green); font-variant-numeric:tabular-nums; }
.oa-staffel tr.on td{ background:var(--green-soft); }
.oa-staffel .st-pick{ background:none; border:none; color:var(--green); font-weight:700; cursor:pointer; font-size:14px; padding:2px 4px; }
.oa-staffel .st-pick:hover{ text-decoration:underline; }

/* Bonus-Inline-Erklaerung */
.bonus-note{
  grid-column:1 / -1; margin:0 18px 14px; padding:12px 16px;
  background:var(--bonus-bg); border:1px solid var(--bonus-line); border-radius:var(--r-sm);
  font-size:15px; color:var(--bonus-text);
}
.list-footnote{ margin-top:14px; font-size:14.5px; color:var(--muted); }

/* Beratungs-Kachel in der Liste */
.advice-tile{
  background:var(--tint); border:1px solid var(--tint-line); border-radius:var(--r-md);
  padding:18px 22px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px;
}
.advice-tile .at-ic{
  width:46px; height:46px; flex:none; border-radius:50%; background:var(--surface);
  border:1px solid var(--tint-line); display:grid; place-items:center; color:var(--green);
}
.advice-tile .at-ic svg{ width:22px; height:22px; }
.advice-tile .at-tx{ flex:1 1 280px; min-width:0; }
.advice-tile .at-tx b{ font-size:17px; }
.advice-tile .at-tx span{ display:block; font-size:15px; color:var(--muted); margin-top:2px; }
.advice-tile .btn{ flex:none; }

.offer-empty{
  padding:30px 22px; text-align:center; background:var(--surface);
  border:1px dashed var(--line); border-radius:var(--r-md); color:var(--muted); font-size:16px;
}

/* Mobil: Zeilen werden Karten */
@media (max-width:920px){
  .row-grid{
    grid-template-columns:64px minmax(0,1fr); grid-auto-rows:auto;
    padding:14px; gap:10px 12px; align-items:start;
  }
  .row-logo{ width:64px; height:44px; }
  .row-logo img{ max-width:52px; max-height:34px; }
  .row-zins{ grid-column:1 / -1; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; border-top:1px solid var(--line-soft); padding-top:10px; }
  .row-zins b{ font-size:30px; }
  .row-terms{ width:100%; }
  .ot{ flex:1; text-align:center; min-height:38px; padding:6px 4px; }
  .row-ertrag{ grid-column:1 / -1; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
  .row-ertrag b{ font-size:19px; }
  .row-fakten{ grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; gap:4px 18px; font-size:14.5px; }
  .row-cta{ grid-column:1 / -1; }
  .offer-about{ grid-template-columns:1fr; padding:14px; }
}

/* ==========================================================================
   Zinsrechner
   ========================================================================== */
.calcwrap{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.calc-card{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--surface);
  box-shadow:var(--sh-card);
}
@media (max-width:860px){ .calc-card{ grid-template-columns:1fr; } }
.calc-inputs{ padding:clamp(20px,3.5vw,32px); border-right:1px solid var(--line); }
@media (max-width:860px){ .calc-inputs{ border-right:none; border-bottom:1px solid var(--line); } }
.calc-inputs h3, .calc-output h3{
  font-size:14px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); margin-bottom:18px;
}
.input-group{ margin-bottom:22px; }
.input-group label{ display:flex; justify-content:space-between; align-items:baseline; font-size:16px; color:var(--muted); margin-bottom:10px; gap:10px; }
.input-group .val{ font-size:19px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
input[type="range"]{
  width:100%; height:6px; -webkit-appearance:none; appearance:none;
  background:var(--green-soft); border-radius:var(--r-pill); outline:none; cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:28px; height:28px; border-radius:50%;
  background:#fff; border:3px solid var(--green); box-shadow:var(--sh-card); cursor:grab;
}
input[type="range"]::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; background:#fff; border:3px solid var(--green); cursor:grab; }
.range-bounds{ display:flex; justify-content:space-between; font-size:13.5px; color:var(--faint); margin-top:8px; }
.quick-select{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
@media (max-width:560px){ .quick-select{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.qs{
  min-height:48px; padding:.5em .3em; border-radius:var(--r-sm); font-size:15px; font-weight:700; cursor:pointer;
  background:var(--surface); color:var(--ink); border:1px solid var(--line);
  white-space:nowrap;
}
.qs:hover{ border-color:var(--green); color:var(--green); }
.qs.selected{ background:var(--green); border-color:var(--green); color:#fff; }
.calc-output{ padding:clamp(20px,3.5vw,32px); display:flex; flex-direction:column; background:#FAFCFA; }
.output-final{ display:flex; align-items:baseline; gap:8px; }
.output-final .euro{ font-size:24px; font-weight:700; color:var(--muted); }
#finalAmount{ font-size:clamp(38px,4.5vw,52px); font-weight:800; color:var(--green); letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.output-sub{ color:var(--muted); font-size:16px; margin:6px 0 18px; }
.output-sub strong{ color:var(--ink); }
.breakdown{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:20px; }
.breakdown-item{ border:1px solid var(--line); background:var(--surface); border-radius:var(--r-sm); padding:12px 14px; }
.breakdown-item .lbl{ font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); margin-bottom:3px; }
.breakdown-item .val{ font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; }
.breakdown-item.gain .val{ color:var(--green); }
.yearly-bars{ margin-top:auto; }
.yearly-bars-label{ font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); margin-bottom:10px; }
.bars{ display:flex; align-items:flex-end; gap:8px; height:78px; }
.bar{ flex:1; min-width:0; border-radius:5px 5px 0 0; min-height:8%; background:linear-gradient(180deg,var(--green-light),var(--green)); transition:height .7s cubic-bezier(.16,1,.3,1); }
.bar-labels{ display:flex; gap:8px; margin-top:6px; }
.bar-labels span{ flex:1; text-align:center; font-size:13px; color:var(--faint); }
.calc-cta{ margin-top:18px; display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:16px; }

/* ==========================================================================
   So geht's
   ========================================================================== */
.steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
@media (max-width:980px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }
.step{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:22px 20px; box-shadow:var(--sh-card);
}
.step-n{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--green); color:#fff; font-weight:800; font-size:18px; margin-bottom:14px;
}
.step h3{ font-size:18px; margin-bottom:7px; }
.step p{ font-size:15.5px; color:var(--muted); }
.steps-cta{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:28px; }

/* ==========================================================================
   Sicherheit (dunkle Sektion)
   ========================================================================== */
.secure{ background:var(--dark); color:var(--on-dark); }
.secure .eyebrow{ color:var(--on-dark-acc); }
.secure h2{ color:var(--on-dark); }
.secure-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,5vw,64px); align-items:center; }
@media (max-width:900px){ .secure-grid{ grid-template-columns:1fr; } }
.secure-big{ text-align:center; padding:26px 18px; border:1px solid var(--dark-line); border-radius:var(--r-md); background:var(--dark-2); }
.secure-big .sb-num{ font-size:clamp(44px,6vw,64px); font-weight:800; color:var(--on-dark-acc); line-height:1.05; font-variant-numeric:tabular-nums; }
.secure-big .sb-sub{ font-size:16px; color:var(--on-dark-2); margin-top:6px; }
.secure-list{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.secure-list li{ display:flex; gap:13px; align-items:flex-start; }
.secure-list .ic{
  width:40px; height:40px; flex:none; border-radius:var(--r-sm); display:grid; place-items:center;
  background:rgba(127,208,162,.12); color:var(--on-dark-acc); border:1px solid var(--dark-line);
}
.secure-list .ic svg{ width:19px; height:19px; }
.secure-list strong{ display:block; font-size:17px; color:var(--on-dark); }
.secure-list li > span > span{ font-size:15px; color:var(--on-dark-2); }

/* ==========================================================================
   Kundenstimmen
   ========================================================================== */
.quotes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
@media (max-width:900px){ .quotes{ grid-template-columns:1fr; } }
.tcard{
  margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:22px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--sh-card);
}
.t-stars{ color:var(--green-light); letter-spacing:.15em; font-size:15px; }
.tcard p{ font-size:16px; color:var(--ink); line-height:1.65; }
.t-author{ display:flex; align-items:center; gap:11px; margin-top:auto; border-top:1px solid var(--line-soft); padding-top:13px; }
.t-avatar{
  width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--green-soft); color:var(--green); font-size:14px; font-weight:800;
}
.t-name{ font-weight:700; font-size:15.5px; }
.t-role{ font-size:13.5px; color:var(--faint); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq2{ max-width:780px; margin:0 auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-card); }
.faq2 details + details{ border-top:1px solid var(--line); }
.faq2 summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:13px;
  padding:17px 20px; font-size:17.5px; font-weight:700; min-height:56px;
}
.faq2 summary::-webkit-details-marker{ display:none; }
.q-n{ color:var(--green); font-size:15px; font-weight:800; flex:none; font-variant-numeric:tabular-nums; }
.plus{
  margin-left:auto; flex:none; width:30px; height:30px; border:1px solid var(--line); border-radius:50%;
  display:grid; place-items:center; font-size:18px; font-weight:500; color:var(--green);
  transition:transform .22s ease, background .18s ease;
}
.faq2 details[open] .plus{ transform:rotate(45deg); background:var(--green-soft); }
.faq2 details > div{ padding:0 20px 18px 56px; color:var(--muted); font-size:16px; }

/* ==========================================================================
   Rueckruf (Formular-Band)
   ========================================================================== */
.callback{ background:var(--tint); border-top:1px solid var(--tint-line); }
.callback-grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(24px,4vw,56px); align-items:start; }
@media (max-width:900px){ .callback-grid{ grid-template-columns:1fr; } }
.cb-copy h2{ margin-bottom:12px; }
.cb-copy p{ color:var(--muted); font-size:17px; max-width:50ch; }
.cb-points{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.cb-points li{ display:flex; gap:9px; align-items:flex-start; font-size:16px; }
.cb-points svg{ width:17px; height:17px; color:var(--green); flex:none; margin-top:4px; }
.cb-mail{ margin-top:20px; font-size:15.5px; color:var(--muted); }
.cb-mail a{ font-weight:700; }
.cb-form{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:clamp(20px,3.5vw,30px); box-shadow:var(--sh-card);
}
.f-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:14px; }
@media (max-width:600px){ .f-row{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:15px; font-weight:600; color:var(--ink); }
.req{ color:var(--green); }
.field input,.field select{
  min-height:52px; padding:0 .85em; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); font-size:17px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus,.field select:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(30,122,70,.14); }
.check{ display:flex; align-items:flex-start; gap:10px; font-size:15.5px; color:var(--ink); margin-bottom:16px; line-height:1.55; }
.check input{ width:20px; height:20px; margin-top:.15em; flex:none; accent-color:var(--green); }
.check a{ font-weight:700; text-decoration:underline; }
.form-msg{ display:none; margin-top:12px; padding:.8em 1em; border-radius:var(--r-sm); font-size:15.5px; }
.form-msg.show{ display:block; }
.form-msg.error{ background:#FBEBE9; border:1px solid var(--danger); color:var(--danger); }

/* ==========================================================================
   Footer
   ========================================================================== */
footer{ background:var(--dark); color:var(--on-dark-2); }
.footer-row{ display:grid; grid-template-columns:1.3fr repeat(3,minmax(0,1fr)); gap:26px; padding:44px 0 30px; }
@media (max-width:1000px){ .footer-row{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-row{ grid-template-columns:1fr; } }
.footer-brand p{ font-size:15px; margin-top:14px; max-width:34ch; }
.footer-logo{ height:30px; width:auto; }
footer h4{ font-size:13.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark); margin:0 0 14px; }
footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
footer li{ display:flex; align-items:center; gap:8px; font-size:15.5px; }
footer li svg{ width:15px; height:15px; color:var(--on-dark-acc); flex:none; }
footer a{ color:var(--on-dark-2); }
footer a:hover{ color:var(--on-dark); }
.foot-new{ color:var(--on-dark-acc) !important; font-weight:700; }
.footer-bottom{
  border-top:1px solid var(--dark-line); padding:16px 0 22px;
  display:flex; justify-content:space-between; gap:10px 22px; flex-wrap:wrap;
  font-size:13.5px; color:#7E948A;
}
.footer-legal a{ color:var(--on-dark-2); text-decoration:underline; }
.footer-legal a:hover{ color:var(--on-dark); }

/* ==========================================================================
   Modals (Klassenvertrag unveraendert)
   ========================================================================== */
.modal-overlay{
  position:fixed; inset:0; z-index:1500; display:none;
  align-items:center; justify-content:center; padding:14px;
  background:rgba(16,36,26,.55);
}
.modal-overlay.show{ display:flex; }
.modal-card{
  position:relative; width:100%; max-width:680px; max-height:92vh; overflow:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:clamp(20px,4vw,32px); box-shadow:var(--sh-pop);
}
.modal-close{
  position:absolute; top:12px; right:12px; z-index:5;
  width:44px; height:44px; border-radius:50%;
  background:var(--bg); border:1px solid var(--line); color:var(--muted); cursor:pointer;
  display:grid; place-items:center;
}
.modal-close:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.modal-close svg{ width:18px; height:18px; }
/* Zurueck-Knopf im Textfluss (wie im Wahl-Modal): ueberdeckt nie den Titel */
.modal-back{
  position:static; display:flex; width:fit-content; align-items:center; gap:8px;
  margin:0 0 14px; min-height:44px; padding:.45em 1.05em;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-pill);
  color:var(--ink); font-size:15.5px; font-weight:600; cursor:pointer;
}
.modal-back:hover{ border-color:var(--green); color:var(--green); }
.modal-back svg{ width:17px; height:17px; color:var(--green); }

/* Erfolg-Modal */
.success-card{ text-align:center; max-width:460px; }
.success-card .ic{
  width:72px; height:72px; margin:0 auto 18px; display:grid; place-items:center;
  border-radius:50%; background:var(--green-soft); color:var(--green);
}
.success-card .ic svg{ width:34px; height:34px; }
.success-card h3{ font-size:24px; }

/* Bank-Anfrage-Modal */
.am-badge{
  display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:14.5px; color:var(--muted);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:.45em 1em; margin-bottom:12px;
}
.am-badge .lbl{ text-transform:uppercase; letter-spacing:.06em; font-size:12.5px; color:var(--faint); font-weight:700; }
.am-bank-name{ font-weight:800; color:var(--ink); }
.am-bank-rate{ font-weight:800; color:var(--green); }
.am-intro{ color:var(--muted); font-size:16px; margin:8px 0 18px; }
#bankModal h3{ font-size:24px; }
.am-preview{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;
  background:var(--green-soft); border:1px solid var(--tint-line);
  border-radius:var(--r-sm); padding:12px 14px; margin-bottom:14px;
}
.am-preview-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:560px){ .am-preview, .am-preview-4{ grid-template-columns:1fr 1fr; } }
.amp{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.amp-l{ font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--green-hover); font-weight:700; }
.amp b{ font-size:18px; font-variant-numeric:tabular-nums; }

/* Wahl-Modal */
.wahl-head{ text-align:center; margin-bottom:20px; }
.wahl-pill{
  display:inline-flex; align-items:center; font-size:13px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--green); background:var(--green-soft);
  border:1px solid var(--tint-line); border-radius:var(--r-pill); padding:.45em 1.1em; margin-bottom:12px;
}
.wahl-context{ margin:0 0 10px; font-size:15.5px; font-weight:700; color:var(--green); }
.wahl-head h3{ font-size:clamp(22px,3vw,27px); margin-bottom:6px; }
.wahl-head p{ color:var(--muted); font-size:16px; }
.wahl-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
@media (max-width:640px){ .wahl-grid{ grid-template-columns:1fr; } }
.wahl-opt{
  position:relative; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:20px 18px 18px; display:flex; flex-direction:column; gap:8px;
  font:inherit; color:inherit; transition:border-color .18s ease, box-shadow .18s ease;
}
.wahl-opt:hover{ border-color:var(--green); box-shadow:var(--sh-hover); }
.wahl-opt.primary{ border-color:var(--green); background:#FAFDFB; }
.wahl-badge{
  position:absolute; top:-11px; left:16px;
  background:var(--green); color:#fff; font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; border-radius:5px; padding:.35em .8em;
}
.wahl-ic{
  width:42px; height:42px; border-radius:var(--r-sm); display:grid; place-items:center;
  background:var(--green); color:#fff;
}
.wahl-ic.ghost{ background:var(--green-soft); color:var(--green); border:1px solid var(--tint-line); }
.wahl-ic svg{ width:20px; height:20px; }
.wahl-opt-title{ font-weight:800; font-size:18px; }
.wahl-opt-desc{ font-size:15px; color:var(--muted); }
.wahl-list{ list-style:none; margin:2px 0 6px; padding:0; display:flex; flex-direction:column; gap:6px; }
.wahl-list li{ display:flex; align-items:center; gap:8px; font-size:14.5px; color:var(--ink); }
.wahl-list svg{ width:14px; height:14px; color:var(--green); flex:none; }
.wahl-btn{
  margin-top:auto; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:.5em 1em; border-radius:var(--r-sm); font-weight:700; font-size:16px;
}
.wahl-btn.lime{ background:var(--green); color:#fff; }
.wahl-btn.ghost{ background:var(--bg); color:var(--ink); border:1px solid var(--line); }
.wahl-btn svg{ width:16px; height:16px; }
.wahl-foot{ text-align:center; margin-top:18px; font-size:15.5px; color:var(--muted); }
.wahl-step{ display:none; }
.wahl-step.is-active{ display:block; }
.modal-card.is-form-step{ max-width:580px; }
.wahl-link{
  background:none; border:none; padding:0; font:inherit; cursor:pointer;
  color:var(--green); font-weight:700; text-decoration:underline;
}
.wahl-link:hover{ color:var(--green-hover); }
.wahl-form{ text-align:left; display:flex; flex-direction:column; gap:14px; }
.wahl-form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
@media (max-width:560px){ .wahl-form-grid{ grid-template-columns:1fr; } }
.wahl-field{ display:flex; flex-direction:column; gap:6px; }
.wahl-field label{ font-size:15px; font-weight:600; }
.wahl-field input{
  width:100%; min-height:50px; padding:0 .85em; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface); font-size:17px;
}
.wahl-field input:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(30,122,70,.14); }
/* Rot erst NACH Nutzer-Interaktion — nicht schon beim Oeffnen des Modals */
.wahl-field input:user-invalid{ border-color:var(--danger); }
.wahl-field small{ font-size:13.5px; color:var(--faint); }
.wahl-checks{ display:flex; flex-direction:column; gap:10px; }
.wahl-checks label{ display:flex; align-items:flex-start; gap:10px; font-size:15px; line-height:1.5; }
.wahl-checks input{ width:20px; height:20px; margin-top:.1em; flex:none; accent-color:var(--green); }
.wahl-checks a{ font-weight:700; text-decoration:underline; }
.wahl-submit{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  width:100%; min-height:52px; border:none; border-radius:var(--r-sm);
  background:var(--green); color:#fff; font-size:17.5px; font-weight:700; cursor:pointer;
  transition:background .18s ease;
}
.wahl-submit:hover:not(:disabled){ background:var(--green-hover); }
.wahl-submit:disabled{ opacity:.6; cursor:progress; }
.wahl-submit svg{ width:17px; height:17px; }
.wahl-form-foot{
  display:grid; grid-template-columns:auto 1fr; gap:10px;
  border-top:1px solid var(--line); padding-top:14px; margin-top:2px;
}
.wahl-form-foot-single{ grid-template-columns:1fr; }
@media (max-width:520px){ .wahl-form-foot{ grid-template-columns:1fr; } }
/* "Zur Auswahl" oben im Modal — im Textfluss (ueberdeckt nie den Titel),
   deutlich als Button erkennbar; nur in den Formularschritten sichtbar */
#fkpWahl .fkp-top-back{
  display:none; position:static; margin:0 0 14px;
  align-items:center; gap:8px; min-height:44px; padding:.45em 1.05em;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-pill);
  color:var(--ink); font-size:15.5px; font-weight:600; cursor:pointer;
}
#fkpWahl .fkp-top-back svg{ width:17px; height:17px; color:var(--green); }
#fkpWahl .fkp-top-back:hover{ border-color:var(--green); color:var(--green); }
#fkpWahl .modal-card.is-form-step .fkp-top-back{ display:inline-flex; }
/* Schritt-Icons im Kopf (Registrieren/Anmelden) */
.wh-step-ic{
  display:none; width:52px; height:52px; margin:0 auto 12px; border-radius:50%;
  background:var(--green-soft); color:var(--green); place-items:center;
}
.wh-step-ic svg{ width:24px; height:24px; }
.modal-card[data-fkp-step="register"] .wh-ic-reg{ display:grid; }
.modal-card[data-fkp-step="login"] .wh-ic-log{ display:grid; }
.wahl-nav-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:.5em 1.1em; border-radius:var(--r-sm); cursor:pointer;
  background:var(--bg); border:1px solid var(--line);
  color:var(--ink); font-size:15px; font-weight:600; white-space:nowrap;
}
.wahl-nav-btn svg{ width:16px; height:16px; flex:none; }
.wahl-nav-btn:hover{ border-color:var(--green); color:var(--green); }
.wahl-nav-btn.alt{ background:var(--green-soft); border-color:var(--tint-line); color:var(--green-hover); }
.wahl-nav-btn.alt b{ font-weight:800; }
.wahl-nav-btn.alt:hover{ background:var(--green); border-color:var(--green); color:#fff; }
.wahl-pw-hint{ text-align:center; font-size:15px; margin:0; }
.wahl-pw-hint a{ color:var(--muted); text-decoration:underline; }
.wahl-pw-hint a:hover{ color:var(--green); }
.wahl-form-msg{ padding:.8em 1em; border-radius:var(--r-sm); font-size:15.5px; line-height:1.5; }
.wahl-form-msg.is-error{ background:#FBEBE9; border:1px solid var(--danger); color:var(--danger); }
.wahl-form-msg.is-ok{ background:var(--green-soft); border:1px solid var(--tint-line); color:var(--green-hover); }

/* Honeypot */
.hp-field{
  position:absolute !important; left:-9999px !important; top:auto;
  width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none;
}

/* Dokument-Modal */
.doc-card{ max-width:780px; display:flex; flex-direction:column; padding:0; }
.doc-modal-head{ padding:20px 26px 14px; border-bottom:1px solid var(--line); }
.doc-modal-head h3{ font-size:22px; }
.doc-modal-body{ padding:20px 26px; overflow:auto; flex:1; min-height:180px; max-height:56vh; }
.doc-modal-body h1{ font-size:24px; margin-bottom:14px; }
.doc-modal-body h2{ font-size:19px; margin:22px 0 8px; }
.doc-modal-body h3{ font-size:17px; margin:16px 0 6px; }
.doc-modal-body p, .doc-modal-body li{ font-size:15.5px; color:var(--ink); }
.doc-modal-body p{ margin-bottom:10px; }
.doc-modal-body ul{ margin:0 0 12px; padding-left:20px; }
.doc-modal-body .info-block{
  background:var(--bg); border:1px solid var(--line); border-left:3px solid var(--green);
  border-radius:var(--r-sm); padding:12px 16px; margin:12px 0;
}
.doc-modal-loading{ color:var(--muted); text-align:center; padding:30px 0; }
.doc-modal-foot{
  padding:14px 26px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.doc-modal-foot{ justify-content:flex-end; }
/* Rechtstexte sollen nur als Popup gelesen werden — kein Seitenwechsel */
#docModalFull{ display:none; }
.doc-tpl{ display:none; }

/* ==========================================================================
   Schwebende Buttons / Reveal / Rechtsseiten
   ========================================================================== */
.fab-stack{ position:fixed; right:16px; bottom:16px; z-index:1200; display:flex; flex-direction:column; gap:10px; }
.fab{
  width:48px; height:48px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); cursor:pointer;
  display:grid; place-items:center; box-shadow:var(--sh-pop);
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.fab svg{ width:20px; height:20px; }
.fab.show{ opacity:1; transform:none; pointer-events:auto; }
.fab:hover{ background:var(--green); color:#fff; border-color:var(--green); }

.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible{ opacity:1; transform:none; }

/* Rechtsseiten */
.legal-hero{ background:var(--tint); border-bottom:1px solid var(--tint-line); padding:clamp(32px,5vw,56px) 0; }
.legal-hero h1{ margin:6px 0 8px; }
.legal-hero p{ color:var(--muted); max-width:64ch; }
.legal-wrap{ max-width:880px; margin:0 auto; padding:clamp(24px,4vw,48px) var(--pad); }
.legal-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:clamp(22px,4vw,42px); box-shadow:var(--sh-card); }
.legal-page h1{ font-size:26px; margin-bottom:16px; }
.legal-page h2{ font-size:20px; margin:26px 0 10px; }
.legal-page h3{ font-size:17.5px; margin:18px 0 8px; }
.legal-page p, .legal-page li{ color:var(--ink); font-size:16px; }
.legal-page p{ margin-bottom:12px; }
.legal-page ul{ margin:0 0 14px; padding-left:22px; }
.legal-page .info-block{
  background:var(--bg); border:1px solid var(--line); border-left:3px solid var(--green);
  border-radius:var(--r-sm); padding:14px 18px; margin:14px 0;
}
.legal-back{ display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-weight:700; }
.legal-back svg{ width:16px; height:16px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}