/* ============================================================
   Cleverrente · envestor — site shell + form + legal pages
   Farbwelt passt zum eingebetteten Rechner (rechner.html):
   - Background:      #01204D
   - Surface card:    #012660
   - Border:          #0a3070
   - Akzent Orange:   #F15A24 (= Rechner)
   - Text:            #fff + rgba(255,255,255,.X)
   - Font:            DM Sans
   ============================================================ */

:root{
  --bg:        #01204D;
  --surface:   #012660;
  --surface-2: #001535;
  --border:    #0a3070;
  --orange:    #F15A24;   /* = Akzent aus dem Rechner */
  --orange-2:  #F15A24;
  --orange-dk: #d14d1e;   /* = Hover aus dem Rechner */
  --green:     #16a34a;
  --txt:       #ffffff;
  --txt-mut:   rgba(255,255,255,.72);
  --txt-dim:   rgba(255,255,255,.55);
  --radius:    16px;
  --radius-sm: 10px;
  --max-w:     1180px;
  /* gemeinsamer Desktop-Seitenrand fuer Rechner UND Form (bündig) */
  --side-pad:  clamp(28px, 5vw, 72px);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }
html,body{ background:var(--bg); overflow-x:hidden; max-width:100vw; }

body{
  font-family:'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--txt);
  line-height:1.55;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{ max-width:100%; display:block; }

a{ color:var(--orange); text-decoration:none; }
a:hover{ color:var(--orange-dk); }

.container{
  width:100%;
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 22px;
}

/* ===================== BRAND-MARK (Footer-Logo) ===================== */
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--txt);
  text-decoration:none;
}
img.brand-mark-img{
  width:38px; height:38px;
  background:transparent !important;
  box-shadow:none;
  border-radius:0;
  object-fit:contain;
  display:inline-block;
}
.brand-text{ font-size:15px; letter-spacing:.01em; }
.brand-text strong{ font-weight:700; }
.brand-divider{ color:rgba(255,255,255,.35); margin:0 6px; }
.brand-product{ color:var(--txt-mut); font-weight:500; }
.brand-light{ color:var(--txt); }
a.brand{
  transition:opacity .15s;
}
a.brand:hover{ opacity:.8; }

/* Vollstaendiges Logo (Fuchs + Schriftzug) in Header & Footer */
.logo-full{ width:auto; display:block; }
.site-nav .logo-full{ height:42px; }
.footer-brand .logo-full{ height:42px; }
@media (max-width:640px){ .site-nav .logo-full{ height:34px; } }
@media (max-width:400px){ .site-nav .logo-full{ height:30px; } }

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 22px;
  border-radius:10px;
  font-weight:700;
  font-size:14.5px;
  font-family:inherit;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  transition:background .15s, transform .15s, color .15s;
  white-space:nowrap;
}
.btn-primary{
  background:var(--orange);
  color:#fff;
  box-shadow:0 4px 14px rgba(241,90,36,.35);
}
.btn-primary:hover{
  background:var(--orange-dk);
  color:#fff;
  transform:translateY(-1px);
}

/* ===================== EYEBROW + HEADINGS ===================== */
.eyebrow{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:14px;
}
.h-display{
  font-size:clamp(28px,3.6vw,42px);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.01em;
  color:var(--txt);
}

/* ===================== SECTION UTIL ===================== */
.section{ padding:54px 0; }
@media (max-width:780px){
  .section{ padding:40px 0; }
}

/* ===================== BACK-TO-HOME (Legal-Pages) ===================== */
.back-to-home{
  padding:24px 22px 0;
  max-width:780px;
  margin:0 auto;
}
.back-to-home a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13.5px;
  font-weight:600;
  color:var(--txt-mut);
  text-decoration:none;
  padding:6px 10px;
  border-radius:8px;
  transition:color .15s, background .15s;
}
.back-to-home a:hover{
  color:var(--orange);
  background:rgba(241,90,36,.08);
}

/* ===================== KONTAKT-SECTION + FORM ===================== */
.section-kontakt{
  background:linear-gradient(180deg, var(--bg) 0%, #001a40 100%);
  scroll-margin-top:80px;
  display:block;
  /* kleinerer Abstand zum Rechner darueber (statt 54px der .section) */
  padding-top:16px !important;
}
/* Kontakt-Container nutzt exakt dieselben Seitenraender wie der Rechner
   (.ev-main-grid): full-width, kein 1180px-Cap, gleiches Padding pro
   Breakpoint → Form und Rechner sind links/rechts buendig. */
.section-kontakt .container.kontakt-grid{
  display:block;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 24px !important;          /* = calc default */
}
@media (min-width:901px){
  .section-kontakt .container.kontakt-grid{ padding:0 var(--side-pad) !important; }  /* = calc desktop */
}
@media (max-width:800px){
  .section-kontakt .container.kontakt-grid{ padding:0 12px !important; }  /* = calc mobile */
}
/* Linksbuendig wie die zwei Schritte darueber (fliessender Uebergang) */
.section-kontakt .kontakt-lead{
  display:block;
  width:100%;
  text-align:left;
}
/* Headline im Stil der oberen Schritte, einzeilig auf Desktop */
.kontakt-title{
  font-size:clamp(22px,2.7vw,34px);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--txt);
}
.kontakt-title .hl{ color:var(--orange); }
@media (min-width:801px){
  .kontakt-title{ white-space:nowrap; }
}
.kontakt-sub{
  margin:10px 0 0;
  max-width:680px;
  font-size:clamp(16px,1.6vw,19px);
  line-height:1.6;
  color:var(--txt-mut);
}
.section-kontakt .lead-form{
  display:flex;
  width:100%;
  box-sizing:border-box;
  text-align:left;
}
.section-kontakt .form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  width:100%;
  gap:14px;
}
.section-kontakt .lead-form > label{ width:100%; }
.section-kontakt .form-actions{ justify-content:flex-start; }
.section-kontakt .form-actions .btn{ min-width:200px; }

.lead-form{
  margin-top:22px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width:540px){
  .form-row{ grid-template-columns:1fr; }
  .lead-form{ padding:20px; }
}

.lead-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.lead-form label > span{
  font-size:12.5px;
  font-weight:600;
  color:var(--txt-mut);
  letter-spacing:.01em;
}
.lead-form input[type=text],
.lead-form input[type=email],
.lead-form input[type=tel],
.lead-form textarea{
  width:100%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px;
  padding:11px 13px;
  font-size:15px;
  color:var(--txt);
  font-family:inherit;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.lead-form input::placeholder,
.lead-form textarea::placeholder{
  color:rgba(255,255,255,.35);
}
.lead-form input:focus,
.lead-form textarea:focus{
  outline:none;
  border-color:var(--orange);
  background:rgba(255,255,255,.09);
  box-shadow:0 0 0 3px rgba(241,90,36,.2);
}
.lead-form textarea{
  resize:vertical;
  min-height:90px;
  line-height:1.5;
}

.lead-form .check{
  flex-direction:row;
  gap:13px;
  align-items:flex-start;
  font-size:13.5px;
  color:var(--txt);
  line-height:1.5;
  margin-top:4px;
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.18);
  border-radius:12px;
  padding:15px 16px;
  cursor:pointer;
  transition:border-color .2s, background .2s;
}
.lead-form .check:hover{ border-color:rgba(241,90,36,.55); background:rgba(255,255,255,.07); }
.lead-form .check input[type=checkbox]{
  margin-top:1px;
  width:24px;
  height:24px;
  accent-color:var(--orange);
  flex-shrink:0;
  cursor:pointer;
}
.lead-form .check a{ color:var(--orange); text-decoration:underline; }
/* Fehlerzustand: nicht angehakt + Absenden gedrueckt */
.lead-form .check.invalid{
  border-color:#f87171;
  background:rgba(239,68,68,.12);
  animation:consentShake .4s ease;
}
@keyframes consentShake{
  0%,100%{ transform:translateX(0); }
  20%,60%{ transform:translateX(-6px); }
  40%,80%{ transform:translateX(6px); }
}
.consent-hint{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:-4px;
  font-size:13.5px;
  font-weight:600;
  color:#fca5a5;
  line-height:1.45;
  animation:formMessageIn .2s ease-out;
}
.consent-hint[hidden]{ display:none; }
.consent-hint span{ font-size:15px; line-height:1.3; }

.form-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:6px;
}

/* Kleiner Datenschutzhinweis direkt unter dem Button (ersetzt das Haekchen) */
.lead-form .form-datenschutz{
  margin:12px 0 0;
  font-size:12px;
  line-height:1.5;
  color:var(--txt-dim);
}
.lead-form .form-datenschutz a{
  color:var(--txt-mut);
  text-decoration:underline;
  text-underline-offset:2px;
}
.lead-form .form-datenschutz a:hover{ color:var(--orange); }

.form-success,
.form-error{
  border-radius:10px;
  padding:11px 14px;
  font-size:13.5px;
  font-weight:600;
  animation:formMessageIn .25s ease-out;
}
.form-success{
  background:rgba(22,163,74,.12);
  border:1px solid rgba(22,163,74,.4);
  color:#4ade80;
}
.form-error{
  background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.4);
  color:#fca5a5;
  font-weight:500;
}
.form-error a{ color:#fff; text-decoration:underline; }
@keyframes formMessageIn{
  from{ opacity:0; transform:translateY(-4px); }
  to  { opacity:1; transform:translateY(0); }
}

/* ===================== FOOTER ===================== */
.site-footer{
  background:var(--surface-2);
  border-top:1px solid var(--border);
  padding:48px 0 24px;
  margin-top:40px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap:32px;
}
@media (max-width:1050px){
  .footer-grid{ grid-template-columns:repeat(3, 1fr); }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:720px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:480px){
  .footer-grid{ grid-template-columns:1fr; gap:24px; }
}
.footer-brand p{
  margin-top:6px;
  font-size:13.5px;
  color:var(--txt-mut);
  line-height:1.6;
  max-width:320px;
}
.footer-col h3{
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:14px;
}
.footer-col ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.footer-col li{
  font-size:13.5px;
  color:var(--txt-mut);
}
.footer-col a{
  color:var(--txt-mut);
  transition:color .15s;
}
.footer-col a:hover{ color:var(--orange); }
.footer-legal{
  margin-top:40px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.07);
}
.footer-legal p{
  font-size:12px;
  color:var(--txt-dim);
  line-height:1.7;
  max-width:960px;
}

/* ===================== LEGAL ANCHOR SECTIONS (Inline auf index) ===================== */
.legal-anchor{
  display:none;
  padding:60px 0 80px;
  background:linear-gradient(180deg, var(--bg) 0%, #001a40 100%);
  scroll-margin-top:80px;
  position:relative;
}
.legal-anchor:target,
.legal-anchor.is-open{
  display:block;
}
.legal-anchor .legal-inner{
  position:relative;
  max-width:780px;
}
.legal-anchor .legal-close{
  position:absolute;
  top:0;
  right:22px;
  width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:600; line-height:1;
  color:var(--txt-mut);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  text-decoration:none;
  transition:background .15s, color .15s, border-color .15s;
}
.legal-anchor .legal-close:hover{
  background:var(--orange);
  border-color:var(--orange);
  color:#fff;
}
.legal-anchor .eyebrow{ margin-bottom:10px; }
.legal-anchor h1.h-display{ margin-bottom:32px; padding-right:50px; }
.legal-anchor h2{
  margin-top:32px;
  margin-bottom:10px;
  font-size:18px;
  font-weight:700;
  color:var(--orange);
}
.legal-anchor p{
  margin-bottom:14px;
  font-size:15px;
  line-height:1.7;
  color:var(--txt-mut);
}
.legal-anchor p strong{ color:var(--txt); }
.legal-anchor a{
  color:var(--orange);
  text-decoration:underline;
  text-underline-offset:2px;
}
.legal-anchor a:hover{ color:var(--orange-dk); }

/* ===================== LEGAL PAGES (standalone .html) ===================== */
.legal-page{
  padding:36px 0 80px;
}
.legal-page .container{ max-width:780px; }
.legal-page .eyebrow{ margin-bottom:10px; }
.legal-page h1.h-display{ margin-bottom:32px; }
.legal-page h2{
  margin-top:32px;
  margin-bottom:10px;
  font-size:18px;
  font-weight:700;
  color:var(--orange);
  letter-spacing:-.005em;
}
.legal-page p{
  margin-bottom:14px;
  font-size:15px;
  line-height:1.7;
  color:var(--txt-mut);
}
.legal-page p strong{ color:var(--txt); }
.legal-page a{
  color:var(--orange);
  text-decoration:underline;
  text-underline-offset:2px;
}
.legal-page a:hover{ color:var(--orange-dk); }
.legal-page .legal-note{
  margin-top:42px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:12.5px;
  color:var(--txt-dim);
}

/* ===================== INTRO / VORSPANN ueber dem Rechner ===================== */
/* Linksbuendig zum Rechner (gleiche Seitenraender pro Breakpoint). */
.rechner-intro{ padding:24px 24px 0; }
@media (min-width:901px){ .rechner-intro{ padding:30px var(--side-pad) 0; } }
@media (max-width:800px){ .rechner-intro{ padding:18px 12px 0; } }
.intro-box{
  background:var(--surface);
  border:1px solid rgba(241,90,36,.45);
  border-radius:16px;
  padding:22px 26px;
  box-shadow:0 16px 40px -30px rgba(241,90,36,.55);
}
@media (max-width:600px){ .intro-box{ padding:18px 18px; } }
.intro-box p{
  font-size:clamp(16px,1.9vw,20px);
  line-height:1.6;
  color:var(--txt);
}
.intro-box strong{ font-weight:700; }
.intro-box .io-hl{ color:var(--orange); font-weight:700; }
.intro-box .io-lead{
  margin-top:12px;
  font-weight:700;
  color:var(--txt);
}
.intro-box .io-lead::after{
  content:' ↓';
  color:var(--orange);
}

/* ===================== RECHNER — Hooks fuer den embedded calc ===================== */

#rechner{
  scroll-margin-top:80px;
  width:100%;
}

/* Hero-Wert ("17.280 €") exakt unter die eingebrannte Überschrift "Ihre Zulage"
   zentrieren. Im neuen Bild liegt der Text-Mittelpunkt bei ~51,5 % (Overlay
   war auf 56 % = leicht rechts versetzt). */
.ev-hero-img-overlay{ left:51.5% !important; }

/* Orange Trennstriche zwischen Eingabe-Bloecken ausblenden — ABER nur die rein
   dekorativen. ver2 (Rechner 2) nutzt .ev-grid-sep als Container fuer den
   "Sie wollen es genau wissen?"-Aufklapp-Button (.ev-sep-circle) → der bleibt. */
.ev-grid-sep:not(:has(.ev-sep-circle)),
.ev-grid-sep:not(:has(.ev-sep-circle)) .ev-grid-sep-inner,
.ev-grid-sep:not(:has(.ev-sep-circle)) .ev-grid-sep-inner::after{
  display:none !important;
}

/* Chart-Info-Box: modernes ×-Schliessen (per JS injiziert) */
#ct{ padding-top:22px !important; }   /* Platz fuer den Button schaffen */
.ct-close{
  position:absolute;
  top:5px;
  right:5px;
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:15px;
  font-weight:400;
  line-height:1;
  cursor:pointer;
  pointer-events:auto;
  transition:background .15s, transform .15s;
  -webkit-tap-highlight-color:transparent;
}
.ct-close:hover,
.ct-close:active{
  background:var(--orange);
  transform:scale(1.08);
}

/* Hero-Bild: der "Jetzt vormerken lassen"-Button ist ins PNG eingebrannt
   und sitzt nahe dem unteren Bildrand. NUR auf Desktop (>=901px) wird der
   object-fit:cover-Crop nach unten verschoben → Button optisch hoeher.
   Auf Tablet/Mobile (<=900px, z.B. iPad) bleibt es zentriert, sonst wird
   oben "Ihre persönliche Zulage" abgeschnitten. */
@media (min-width:901px){
  .ev-hero-img-wrap img{ object-position:center 80% !important; }
}

/* Sub-Headline ueber dem zweiten Block ("Sie wollen es ganz genau
   wissen?") hat inline white-space:nowrap → cappt auf Desktop ok,
   laeuft aber auf schmalen Screens aus dem Viewport. Ab 820px
   umbrechen lassen + leicht verkleinern. */
@media (max-width:820px){
  .ev-subheadline{
    white-space:normal !important;
    font-size:18px !important;
  }
}
@media (max-width:480px){
  .ev-subheadline{ font-size:16px !important; }
}
/* ver1/ver2: Teil-2-Titel ("Rente berechnen und mit ungefördertem Fondssparen
   vergleichen.") hat inline white-space:nowrap + 27px → laeuft mobil rechts aus
   dem Bild. Umbrechen lassen + verkleinern. (ver1: div mit grid-row:3,
   ver2: #ev-details-title) */
@media (max-width:820px){
  .ev-main-grid > [style*="grid-row:3"] > p,
  .ev-main-grid > #ev-details-title > p{
    white-space:normal !important;
    font-size:18px !important;
  }
}
@media (max-width:480px){
  .ev-main-grid > [style*="grid-row:3"] > p,
  .ev-main-grid > #ev-details-title > p{ font-size:16px !important; }
}

/* Calc soll die volle Viewport-Breite nutzen (statt 1060px-Cap) */
.ev-wrap{
  max-width:100% !important;
  width:100% !important;
}

/* Desktop: enger gepackt + weniger Rand-Padding */
@media (min-width:901px){
  .ev-hero{ padding:24px var(--side-pad) 14px !important; }
  .ev-main-grid{
    padding:0 var(--side-pad) 14px !important;
    column-gap:4px !important;
    row-gap:6px !important;
  }
  .ev-results-wrap{ gap:6px !important; }
}

/* Desktop: Hero-Bild (rechte Spalte, Zeile 1) und linke Input-Spalte
   sollen buendig auf gleicher Hoehe enden.
   Loesung: die linke Input-Spalte definiert die Hoehe (Inhalt + etwas
   extra Laenge unten); die rechte Spalte stretcht auf dieselbe Hoehe
   und das Bild fuellt sie ABSOLUT — so blaeht das Bild die Zeilenhoehe
   nicht selbst auf und beide Spalten enden exakt gleich. */
@media (min-width:801px){
  /* erste Input-Spalte etwas laenger, damit sie nicht gedrungen wirkt */
  .ev-inputs-top{ padding-bottom:30px !important; }

  /* Bild fuellt die rechte Spalte auf Eingabehoehe → reicht bis zur
     "Nettorente"-Leiste. Bis ~1500px ist die Spalte schmaler als das
     Bildverhaeltnis (1.70) → cover beschneidet nur seitlich, NICHT oben. */
  .ev-main-grid > [style*="grid-column:2;grid-row:1"]{
    align-self:stretch !important;
    position:relative !important;
    min-height:0 !important;
  }
  .ev-main-grid > [style*="grid-column:2;grid-row:1"] .ev-hero-img-wrap{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:auto !important;
  }
  .ev-main-grid > [style*="grid-column:2;grid-row:1"] .ev-hero-img-wrap img{
    object-position:center !important;
  }

  /* Untere Zeile: rechte Spalte (Ergebnisse + Graph) ist laenger als
     die untere Input-Spalte. Input-Spalte auf dieselbe Hoehe strecken,
     damit beide buendig enden. */
  .ev-main-grid > .ev-inputs-bottom{
    align-self:stretch !important;
  }
}

/* Sehr breite Screens (>1500px): die Bildspalte wird breiter als das
   Seitenverhaeltnis des Bildes (1.70) → cover wuerde oben "Ihre Zulage"
   abschneiden. Ab hier behaelt das Bild sein Verhaeltnis und waechst in
   der Hoehe (kein Zuschnitt). Es ist dann mind. so hoch wie die Eingaben,
   reicht also weiterhin bis zur Leiste. Uebergang bei ~1500px nahtlos. */
@media (min-width:1500px){
  .ev-main-grid > [style*="grid-column:2;grid-row:1"]{
    align-self:start !important;
  }
  .ev-main-grid > [style*="grid-column:2;grid-row:1"] .ev-hero-img-wrap{
    position:relative !important;
    inset:auto !important;
    height:auto !important;
    aspect-ratio:1100 / 647 !important;
  }
  /* Das Bild ist hier hoeher als die Eingaben → Eingabespalte auf die
     Bildhoehe strecken und die Eingabe-Bloecke gleichmaessig verteilen,
     damit beide Spalten buendig auf gleicher Hoehe enden. */
  .ev-inputs-top{
    align-self:stretch !important;
    justify-content:space-between !important;
  }
}

/* === MOBILE STACKING (zentraler Fix) ===
   Die Grid-Kinder haben inline grid-column:2 / grid-row:N. Mit dem
   calc-eigenen `grid-template-columns:1fr` @800px wuerde grid-column:2
   eine implizite 2. Spalte erzeugen → rechte Spalte bleibt NEBEN den
   Inputs statt darunter. Loesung: ab 800px auf Flexbox-Column
   umschalten (ignoriert grid-column/grid-row der Kinder) und die
   gewuenschte Reihenfolge per `order` erzwingen:
     1 top-inputs · 2 hero-bild · 3 subheadline · 4 bottom-inputs · 5 results */
@media (max-width:800px){
  .ev-main-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
    padding:0 12px 16px !important;
  }
  .ev-main-grid > *{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  /* Reihenfolge ueber order — stabile Klassen-/Style-Hooks (die inline
     grid-Signaturen sind je nach Export inkonsistent: inputs-top hat
     z.T. gar kein inline-style, inputs-bottom nur grid-row:4). */
  .ev-main-grid > .ev-inputs-top{ order:1; }
  .ev-main-grid > [style*="grid-column:2;grid-row:1"]{ order:2; }
  .ev-main-grid > [style*="grid-row:3"]{ order:3; }
  .ev-main-grid > .ev-inputs-bottom{ order:4; }
  .ev-main-grid > .ev-results-wrap{ order:5; }
  .ev-main-grid > .ev-grid-sep{ order:0; }
  /* ver2 (Rechner 2): die zusaetzlichen Elemente korrekt einreihen:
     Hero(2) → Nettorente(3) → Aufklapp-Toggle(4) → Teil-2-Titel(5) →
     Teil-2-Eingaben(6) → Ergebnisse(7). Greift nur fuer ver2 (die anderen
     Rechner haben diese Elemente nicht bzw. grid-row:4). */
  .ev-main-grid > #r-nettorente-box{ order:3; }
  .ev-main-grid > .ev-grid-sep:has(.ev-sep-circle){ order:4; }
  .ev-main-grid:has(.ev-sep-circle) > #ev-details-title{ order:5; }
  .ev-main-grid:has(.ev-sep-circle) > .ev-inputs-bottom{ order:6; }
  .ev-main-grid:has(.ev-sep-circle) > .ev-results-wrap{ order:7; }

  /* Innere Container ebenfalls auf volle Breite begrenzen */
  .ev-inputs-bar,
  .ev-results-wrap,
  .ev-kpi-box,
  .ev-chart-card,
  .ev-panel,
  .ev-hero-img-wrap,
  .ev-lower-img-wrap{
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}

/* "Ungefoerdertes Fondsdepot" Vergleichs-KPI auf Mobile stacken,
   damit "849 € / Monat" und der Diff-Text nicht abgeschnitten werden. */
@media (max-width:700px){
  div:has(> div > #r-etf-monat-netto-box){
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:8px !important;
  }
  div:has(> #r-etf-monat-netto-box){
    width:100% !important;
    align-items:flex-start !important;
    text-align:left !important;
  }
  #r-etf-monat-netto-box{
    font-size:26px !important;
    white-space:normal !important;
    text-align:left !important;
    word-break:break-word;
  }
  #r-etf-diff-box{
    text-align:left !important;
    font-size:12px !important;
    white-space:normal !important;
  }
  div:has(> div > #r-etf-monat-netto-box) div[style*="font-size:24px"]{
    font-size:18px !important;
  }
}

/* Kinder-Alter <select>: weisse Schriftfarbe wuerde auf Browser-
   Standard-Dropdown-Hintergrund unsichtbar sein → Optionen explizit
   einfaerben. */
.kinder-age-row select{ color-scheme: dark; }
.kinder-age-row select option{
  background-color:#012660 !important;
  color:#ffffff !important;
  font-weight:600;
  padding:6px 10px;
}
.kinder-age-row select option:checked,
.kinder-age-row select option:hover{
  background-color:#F15A24 !important;
  color:#ffffff !important;
}

/* ===================== LIGHTHOUSE: Kontrast + Tap-Targets ===================== */
/* Submit-Button: als "grosser Text" (>=18.66px bold) gilt 3:1 → Weiss
   auf Brand-Orange besteht den Kontrast-Check, Brand bleibt erhalten. */
#leadSubmit{ font-size:19px; }

/* Button-Zustand: erst gedaempft (Outline), bei vollstaendigem & gueltigem
   Formular -> kraeftiges Orange ("bereit zum Absenden"). Bleibt IMMER
   klickbar, damit ein Klick bei fehlendem Haken den Hinweis ausloesen kann. */
#leadSubmit:not(.is-ready){
  background:transparent;
  border:1.5px solid rgba(241,90,36,.6);
  color:#fff;
  box-shadow:none;
}
#leadSubmit:not(.is-ready):hover{
  background:rgba(241,90,36,.16);
  color:#fff;
  transform:none;
}
#leadSubmit.is-ready{
  background:var(--orange);
  border-color:var(--orange);
  color:#fff;
  box-shadow:0 6px 22px rgba(241,90,36,.5);
}
#leadSubmit.is-ready:hover{
  background:var(--orange-dk);
  border-color:var(--orange-dk);
  transform:translateY(-1px);
}
#leadSubmit:disabled{ opacity:.7; cursor:default; }

/* Form-Links weiss + unterstrichen (Orange auf dunkel war zu kontrastarm) */
.section-kontakt .lead-form a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }

/* Rechner-Akzenttexte auf dunklem Grund kontraststaerker (Fuellflaechen/
   Buttons bleiben Brand-#F15A24; nur kleine Akzent-TEXTE werden minimal
   aufgehellt, damit sie 4.5:1 erreichen). */
.hl-green{ color:#22c55e !important; }
/* Graues Vergleichsfeld (#4a5568) auf die Standard-Surface dunkeln —
   einheitlicher zu den anderen Karten UND ausreichend Kontrast fuer
   den gruenen/roten Differenz-Text. */
div:has(> p > #r-etf-diff-box){
  background:#012660 !important;
  border-color:#0a3070 !important;
}
#chip-lz,
#hint-entnahme,
#v-kosten-label,
#v-kosten-etf-label{ color:#FB7A3C !important; }
/* #r-etf-diff-box wird vom Rechner bei jedem render() per JS inline
   gefaerbt → wird in app.js per Observer kontraststark gehalten. */

/* ============================================================
   SITE-NAV (schlankes Geruest, auf allen Seiten)
   ============================================================ */
.site-nav{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(0,21,53,.92);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  width:100%;
  max-width:var(--max-w);
  margin:0 auto;
  padding:16px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.nav-brand{ flex-shrink:0; }
.nav-brand img.brand-mark-img{ width:30px; height:30px; }
.nav-brand .brand-text{ font-size:14px; }
.nav-links{
  display:flex;
  align-items:center;
  gap:22px;
  white-space:nowrap;
}
.nav-links a{
  font-size:14.5px;
  font-weight:600;
  color:var(--txt-mut);
  text-decoration:none;
  padding:6px 2px;
  position:relative;
  transition:color .15s;
}
.nav-links a:hover{ color:var(--txt); }
/* Aktuelle Seite NICHT in der Nav anzeigen — nur die anderen Punkte. */
.nav-links a[aria-current="page"]{ display:none; }
@media (max-width:640px){
  .nav-inner{ padding:12px 14px; gap:12px; }
  .nav-brand .brand-text{ display:none; }
  .nav-links{ gap:16px; }
  .nav-links a{ font-size:13.5px; }
}
@media (max-width:380px){
  .nav-links{ gap:12px; }
  .nav-links a{ font-size:12.5px; }
}
/* Mehr Nav-Eintraege (2 Rechner) → auf schmalen Screens bricht die Nav in
   eine zweite Zeile um (Logo oben, Links darunter), notfalls horizontal
   scrollbar — so wird nie ein Eintrag abgeschnitten. */
@media (max-width:620px){
  .nav-inner{ flex-wrap:wrap; row-gap:8px; }
  .nav-links{
    width:100%;
    justify-content:flex-start;
    gap:16px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .nav-links::-webkit-scrollbar{ display:none; }
}

/* ============================================================
   CONTENT-PAGES (Depot, FAQ, Ueber uns)
   ============================================================ */
.content-page{ padding:0 0 24px; }
.content-page .container{ max-width:980px; }

.content-hero{
  padding:48px 0 36px;
  border-bottom:1px solid rgba(255,255,255,.07);
  margin-bottom:40px;
}
.content-hero .eyebrow{ margin-bottom:12px; }
.content-hero h1{
  font-size:clamp(30px,4.4vw,46px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.015em;
  color:var(--txt);
}
.content-hero h1 .hl{ color:var(--orange); }
.content-hero .lead{
  margin-top:18px;
  max-width:680px;
  font-size:clamp(17px,1.8vw,20px);
  line-height:1.6;
  color:var(--txt-mut);
}
.hero-cta{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:640px){
  .content-hero{ padding:32px 0 26px; margin-bottom:30px; }
}

.content-section{ margin-bottom:44px; }
.content-section > h2{
  font-size:clamp(21px,2.4vw,27px);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--txt);
  margin-bottom:14px;
}
.content-section > p{
  font-size:16.5px;
  line-height:1.75;
  color:var(--txt-mut);
  margin-bottom:14px;
  max-width:760px;
}
.content-section > p strong{ color:var(--txt); }

/* Karten-Raster */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:16px;
  margin:8px 0 4px;
}
.info-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px 22px 20px;
}
.info-card .ic-icon{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
  background:rgba(241,90,36,.14);
  color:var(--orange);
  font-size:20px; font-weight:800;
  margin-bottom:14px;
}
.info-card h3{
  font-size:17px;
  font-weight:700;
  color:var(--txt);
  margin-bottom:8px;
  line-height:1.3;
}
.info-card p{
  font-size:14.5px;
  line-height:1.65;
  color:var(--txt-mut);
}
.info-card p strong{ color:var(--txt); }
.info-card .ic-big{
  font-size:26px;
  font-weight:800;
  color:var(--orange);
  line-height:1;
  margin-bottom:6px;
}

/* CTA-Band */
.cta-band{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px 30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin:8px 0 4px;
}
.cta-band .cb-text h3{
  font-size:20px; font-weight:800; color:var(--txt); line-height:1.25;
}
.cta-band .cb-text p{
  margin-top:6px; font-size:14.5px; color:var(--txt-mut); max-width:520px; line-height:1.6;
}
.cta-band .btn{ flex-shrink:0; }

/* Hinweis-Box (Gesetzesstand etc.) */
.note-box{
  display:flex;
  gap:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  padding:14px 16px;
  font-size:13.5px;
  line-height:1.65;
  color:var(--txt-dim);
}
.note-box strong{ color:var(--txt-mut); }
.note-box .nb-ico{ color:var(--orange); flex-shrink:0; font-weight:800; }

/* Liste mit Haken */
.check-list{ list-style:none; display:flex; flex-direction:column; gap:12px; margin:4px 0; max-width:760px; }
.check-list li{
  position:relative;
  padding-left:30px;
  font-size:16px;
  line-height:1.6;
  color:var(--txt-mut);
}
.check-list li strong{ color:var(--txt); }
.check-list li::before{
  content:'';
  position:absolute;
  left:0; top:3px;
  width:18px; height:18px;
  border-radius:50%;
  background:rgba(34,197,94,.18);
  border:1px solid rgba(34,197,94,.4);
}
.check-list li::after{
  content:'';
  position:absolute;
  left:6px; top:7px;
  width:5px; height:9px;
  border:solid #22c55e;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

/* ============================================================
   TEAM (Ueber uns)
   ============================================================ */
.team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
  margin-top:8px;
}
.team-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
}
.team-card .tc-photo{
  width:128px; height:128px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  margin:0 auto 16px;
  border:3px solid rgba(241,90,36,.55);
  background:#01204D;
}
.team-card .tc-name{ font-size:18px; font-weight:800; color:var(--txt); text-align:center; }
.team-card .tc-role{ font-size:13px; font-weight:600; color:var(--orange); margin-top:3px; letter-spacing:.02em; text-align:center; }
.team-card .tc-bio{ margin-top:14px; font-size:14.5px; line-height:1.65; color:var(--txt-mut); }
.team-card .tc-bio a{ color:var(--orange); text-decoration:underline; text-underline-offset:2px; }
.team-card .tc-bio em{ color:var(--txt-dim); font-style:italic; }

/* Fakten-Leiste */
.fact-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:16px;
  margin-top:8px;
}
.fact{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:18px 20px;
}
.fact .f-val{ font-size:22px; font-weight:800; color:var(--orange); line-height:1.1; }
.fact .f-lbl{ margin-top:6px; font-size:13px; color:var(--txt-mut); line-height:1.4; }

/* ============================================================
   FAQ (Suche + Akkordeon)
   ============================================================ */
.faq-search-wrap{ position:relative; max-width:520px; margin:4px 0 30px; }
.faq-search-wrap svg{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  color:var(--txt-dim); pointer-events:none;
}
#faqSearch{
  width:100%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  padding:14px 16px 14px 46px;
  font-size:16px;
  color:var(--txt);
  font-family:inherit;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
#faqSearch::placeholder{ color:rgba(255,255,255,.4); }
#faqSearch:focus{
  outline:none;
  border-color:var(--orange);
  background:rgba(255,255,255,.09);
  box-shadow:0 0 0 3px rgba(241,90,36,.2);
}
.faq-cat{ margin-bottom:30px; }
.faq-cat > h2{
  font-size:13px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:12px;
}
.faq-item{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  margin-bottom:10px;
  overflow:hidden;
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:16px 48px 16px 18px;
  position:relative;
  font-size:16px;
  font-weight:700;
  color:var(--txt);
  line-height:1.4;
  -webkit-tap-highlight-color:transparent;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'';
  position:absolute;
  right:20px; top:22px;
  width:9px; height:9px;
  border-right:2px solid var(--orange);
  border-bottom:2px solid var(--orange);
  transform:rotate(45deg);
  transition:transform .2s;
}
.faq-item[open] summary::after{ transform:rotate(-135deg); top:25px; }
.faq-item summary:hover{ color:var(--orange); }
.faq-answer{
  padding:0 18px 18px;
  font-size:15px;
  line-height:1.7;
  color:var(--txt-mut);
}
.faq-answer p{ margin-bottom:10px; }
.faq-answer p:last-child{ margin-bottom:0; }
.faq-answer strong{ color:var(--txt); }
.faq-answer a{ color:var(--orange); text-decoration:underline; text-underline-offset:2px; }
.faq-empty{
  display:none;
  padding:20px;
  text-align:center;
  color:var(--txt-mut);
  font-size:15px;
}
.faq-empty.show{ display:block; }
.faq-item.hide,
.faq-cat.hide{ display:none; }

/* ===================== NACHRICHTEN (Liste + Artikel) ===================== */
.news-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px;
  margin-top:8px;
}
.news-card{
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px 22px 20px;
  text-decoration:none;
  transition:border-color .2s, transform .2s, background .2s;
}
.news-card:hover{ border-color:rgba(241,90,36,.5); transform:translateY(-2px); background:#01285e; }
.news-card .news-date{ font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--orange); }
.news-card .news-title{ margin:8px 0; font-size:19px; font-weight:800; line-height:1.3; color:var(--txt); }
.news-card .news-excerpt{ font-size:14.5px; line-height:1.6; color:var(--txt-mut); flex:1; }
.news-card .news-more{ margin-top:14px; font-size:13.5px; font-weight:700; color:var(--orange); }
.news-empty{ color:var(--txt-mut); font-size:16px; }

/* Artikel-Seite */
.article-container{ max-width:760px; }
.article-back{
  display:inline-block;
  margin:0 0 10px;
  font-size:13.5px; font-weight:600;
  color:var(--txt-mut); text-decoration:none;
}
.article-back:hover{ color:var(--orange); }
.article-head{ border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:28px; padding-bottom:8px; }
.article-body{ font-size:17px; line-height:1.75; color:var(--txt-mut); }
.article-body p{ margin:0 0 18px; }
.article-body h2{ font-size:clamp(20px,2.4vw,26px); font-weight:800; color:var(--txt); line-height:1.25; margin:30px 0 12px; }
.article-body strong{ color:var(--txt); }
.article-body a{ color:var(--orange); text-decoration:underline; text-underline-offset:2px; }
.article-body ul{ margin:0 0 18px; padding-left:22px; }
.article-body li{ margin-bottom:8px; }

/* =====================================================================
   FORMULAR-MODERNISIERUNG · Lead-Formular am Seitenende
   ---------------------------------------------------------------------
   Reines Styling – KEINE HTML-Struktur veraendert. Per `git revert` des
   Commits rueckgaengig zu machen.
   Hinweis: Die FARBGEBUNG bleibt bewusst auf dem urspruenglichen
   Brand-Dunkel (kein heller Karten-Hintergrund, kein Akzent-Strich,
   CTA wieder Orange/Ghost via app.js). Beibehalten werden nur die
   farbneutralen Modernisierungen: weiche Schatten, mehr Whitespace,
   groessere/rundere Felder + groesserer CTA, ruhige Typografie.
   ===================================================================== */

/* Moderne, weiche Schatten fuer ALLE Primaer-Buttons (statt hart) */
.btn-primary{ box-shadow:0 10px 26px -10px rgba(241,90,36,.5); }
.btn-primary:hover{ box-shadow:0 16px 32px -10px rgba(241,90,36,.55); }

/* Mehr Luft rund um das Formular + ruhige Typografie */
.section-kontakt{ padding-bottom:clamp(44px,6vw,76px) !important; }
.section-kontakt .kontakt-lead{ max-width:100%; }
.kontakt-title{ letter-spacing:-.015em; line-height:1.12; }
.kontakt-sub{ line-height:1.65; }

/* Karte: Farbgebung wie zuvor (Brand-dunkel), aber weiche diffuse
   Elevation, etwas mehr Radius + grosszuegigeres Padding. */
.section-kontakt .lead-form{
  margin-top:28px;
  border-radius:20px;
  padding:clamp(24px,3.4vw,38px);
  gap:18px;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.5), 0 12px 26px -18px rgba(0,0,0,.4);
}

/* Felder: groesseres, einladenderes Layout. Farben unveraendert (Original).
   16px Schrift verhindert Auto-Zoom auf iOS. Fokus-Ring = Original-Orange. */
.section-kontakt .lead-form input[type=text],
.section-kontakt .lead-form input[type=email],
.section-kontakt .lead-form input[type=tel]{
  border-radius:12px;
  padding:14px 15px;
  font-size:16px;
  line-height:1.4;
}

/* CTA: nur groesser/runder. Farbe = Original (Orange bzw. Ghost-Zustand
   aus app.js) – wird hier NICHT mehr ueberschrieben. */
.section-kontakt .form-actions .btn,
#leadSubmit,
#leadSubmit:not(.is-ready),
#leadSubmit.is-ready{
  min-width:240px;
  padding:16px 30px;
  font-size:16px;
  border-radius:12px;
}
@media (max-width:540px){
  .section-kontakt .form-actions{ width:100%; }
  .section-kontakt .form-actions .btn,
  #leadSubmit,
  #leadSubmit:not(.is-ready),
  #leadSubmit.is-ready{ width:100%; min-width:0; padding:17px 24px; }
}

/* Kontakt-Unterzeile auf Desktop einzeilig (max-width-Cap aufheben +
   nicht umbrechen). Auf Mobile weiterhin normaler Umbruch (kein Ueberlauf). */
@media (min-width:901px){
  .section-kontakt .kontakt-sub{ max-width:none; white-space:nowrap; }
}