/* ============ RESET & BASE ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

:root{
  --navy-950:#070D16;
  --navy-900:#0A1524;
  --navy-800:#0F1F33;
  --navy-700:#16293F;
  --navy-600:#1D3550;
  --anthracite:#121821;
  --glass:rgba(255,255,255,0.045);
  --glass-strong:rgba(255,255,255,0.07);
  --glass-border:rgba(255,255,255,0.10);
  --hairline:rgba(255,255,255,0.09);
  --white:#F5F8FC;
  --slate:#9AACC4;
  --slate-dim:#8797B0; /* WCAG AA-Fix: 6,18:1 Kontrast auf --navy-900 (vorher #647089 = 3,68:1, nicht bestehend) */
  --cyan:#4FD3EF;
  --cyan-strong:#2FB6DB;
  --blue-deep:#2E63D6;
  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:10px;
  --glow:0 0 0 1px rgba(79,211,239,0.10), 0 12px 40px rgba(79,211,239,0.10);
  --ease:cubic-bezier(.19,.85,.24,1);
  --maxw:1200px;
  --font-display:'Manrope',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
}

html,body{background:var(--navy-900);color:var(--white);}
body{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.15;letter-spacing:-0.01em;color:var(--white);}
h1{font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:800;}
h2{font-size:clamp(1.6rem,3vw,2.4rem);}
h3{font-size:1.15rem;font-weight:600;}
p{color:var(--slate);}
a{color:inherit;text-decoration:none;}
img,video{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
ul{list-style:none;}
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:24px;}
section{padding-block:88px;position:relative;content-visibility:auto;contain-intrinsic-size:1px 900px;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:600;font-size:0.72rem;
  letter-spacing:0.09em;text-transform:uppercase;color:var(--cyan);
  padding:6px 14px;border:1px solid var(--glass-border);border-radius:999px;
  background:var(--glass);
}
.section-head{max-width:660px;margin-bottom:44px;}
.section-head p{margin-top:14px;font-size:1.02rem;}
.tabular{font-variant-numeric:tabular-nums;}

/* focus states */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px;
}
.skip-link{
  position:absolute;left:-999px;top:0;background:var(--cyan);color:var(--navy-950);
  padding:12px 18px;border-radius:0 0 10px 0;z-index:999;font-weight:600;
}
.skip-link:focus{left:0;}

/* background texture: subtle growth-curve signature, low opacity, fixed */
.bg-curve{
  position:absolute;inset:0;pointer-events:none;opacity:0.5;z-index:0;
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);font-weight:700;font-size:0.95rem;
  padding:15px 26px;border-radius:12px;border:1px solid transparent;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,var(--cyan-strong),var(--blue-deep));
  color:#04131F;
  box-shadow:0 8px 30px rgba(47,182,219,0.25);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 38px rgba(47,182,219,0.38);}
.btn-secondary{
  background:var(--glass);border:1px solid var(--glass-border);color:var(--white);
  backdrop-filter:blur(8px);
}
.btn-secondary:hover{background:var(--glass-strong);transform:translateY(-2px);}
.btn-block{width:100%;}
.btn-sm{padding:11px 18px;font-size:0.85rem;border-radius:10px;}

/* ============ HEADER / NAV ============ */
header.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(7,13,22,0.7);backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--hairline);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding-block:16px;gap:12px;}
.logo{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-0.02em;color:var(--white);}
.logo span{color:var(--cyan);}
.nav-links{display:none;align-items:center;gap:30px;}
.nav-links a{font-size:0.92rem;color:var(--slate);transition:color .2s;}
.nav-links a:hover{color:var(--white);}
.nav-actions{display:flex;align-items:center;gap:12px;}
.nav-toggle{
  display:inline-flex;background:none;border:1px solid var(--glass-border);border-radius:10px;
  padding:9px;color:var(--white);
}
.nav-toggle svg{width:20px;height:20px;}
.mobile-menu{
  display:none;flex-direction:column;gap:2px;padding:10px 24px 22px;
  background:var(--navy-950);border-bottom:1px solid var(--hairline);
}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:12px 4px;border-bottom:1px solid var(--hairline);color:var(--slate);font-size:0.98rem;}
.mobile-menu a:last-child{border-bottom:none;}

/* Umschaltpunkt zur Desktop-Navigation.
   Bis 2026-09 lag er bei 960px. Dort passten die sieben Navigationspunkte der
   Startseite (zusammen 549px Text) neben Logo (174px) und Vorab-Check-Button
   (134px) jedoch nicht in eine Zeile: Die Leiste brach unterhalb von 1109px auf
   zwei Zeilen um. Der Umschaltpunkt liegt deshalb jetzt bei 1060px; darunter
   übernimmt das Burger-Menü, das dieselben Punkte vollständig enthält. */
@media(min-width:1060px){
  .nav-links{display:flex;}
  .nav-toggle{display:none;}
}
/* Direkt oberhalb des Umschaltpunkts ist die Kopfzeile am engsten. Ein
   reduzierter Abstand zwischen den Links schafft dort die nötige Reserve. */
@media(min-width:1060px) and (max-width:1180px){
  .nav-links{gap:20px;}
}

/* ============ HERO ============ */
.hero{padding-top:64px;padding-bottom:70px;overflow:hidden;}
.hero-grid{
  display:grid;
  grid-template-areas:"heading" "media" "actions";
  gap:34px;
  position:relative;z-index:1;
}
@media(min-width:960px){
  .hero-grid{
    grid-template-columns:1.05fr 0.95fr;
    grid-template-areas:"heading media" "actions media";
    align-items:start;
    gap:24px 56px;
  }
}
.hero-heading{grid-area:heading;}
.hero-heading .eyebrow{margin-bottom:20px;}
.hero-heading h1{margin-bottom:20px;}
.hero-heading .lede{font-size:1.12rem;max-width:52ch;color:var(--slate);}
.hero-actions{grid-area:actions;display:flex;flex-direction:column;gap:14px;align-self:start;}
.hero-actions .cta-row{display:flex;flex-wrap:wrap;gap:14px;}
.hero-actions .microcopy{font-size:0.85rem;color:var(--slate-dim);}
.hero-media{grid-area:media;}

.video-frame{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:16/9;
  background:radial-gradient(120% 140% at 20% 0%,rgba(79,211,239,0.16),transparent 60%),linear-gradient(160deg,var(--navy-700),var(--navy-950));
  border:1px solid var(--glass-border);
  box-shadow:var(--glow);
}
.video-frame video{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-lg);}
/* Steuerelemente sind standardmäßig sichtbar (pausierter Zustand).
   Während der Wiedergabe blenden sie aus, damit sie das Bild nicht verdecken,
   und erscheinen nur kurz bei Maus-/Touch-Interaktion wieder (siehe JS). */
.video-caption,
.play-toggle,
.mute-toggle{
  opacity:1;transition:opacity .35s var(--ease);
}
.video-frame.is-playing .video-caption,
.video-frame.is-playing .play-toggle,
.video-frame.is-playing .mute-toggle{
  opacity:0;pointer-events:none;
}
.video-frame.is-playing.show-controls .video-caption,
.video-frame.is-playing.show-controls .play-toggle,
.video-frame.is-playing.show-controls .mute-toggle{
  opacity:1;pointer-events:auto;
}
/* Fokus per Tastatur macht die Steuerelemente immer sichtbar (Barrierefreiheit) */
.video-frame.is-playing .play-toggle:focus-visible,
.video-frame.is-playing .mute-toggle:focus-visible{
  opacity:1;pointer-events:auto;
}
.video-caption{
  position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:10px;
  background:rgba(7,13,22,0.55);backdrop-filter:blur(6px);border:1px solid var(--glass-border);
  padding:8px 14px;border-radius:999px;font-size:0.78rem;color:var(--slate);
}
.play-toggle{
  position:absolute;inset:0;margin:auto;width:74px;height:74px;border-radius:50%;
  background:rgba(7,13,22,0.55);backdrop-filter:blur(6px);
  border:1px solid var(--glass-border);color:var(--white);
  display:flex;align-items:center;justify-content:center;transition:transform .2s var(--ease),background .2s,opacity .35s var(--ease);
}
.video-frame.is-playing .play-toggle{width:52px;height:52px;}
.play-toggle:hover{transform:scale(1.06);background:rgba(79,211,239,0.18);}
.play-toggle svg{width:26px;height:26px;}
.mute-toggle{
  position:absolute;right:16px;bottom:16px;width:38px;height:38px;border-radius:50%;
  background:rgba(7,13,22,0.55);backdrop-filter:blur(6px);border:1px solid var(--glass-border);
  color:var(--white);display:flex;align-items:center;justify-content:center;
}
.mute-toggle svg{width:16px;height:16px;}

/* ============ TRUST BAR ============ */
.trust-bar{padding-block:56px;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);}
.trust-bar h2{font-size:1.05rem;text-align:center;color:var(--slate);font-weight:600;margin-bottom:36px;font-family:var(--font-body);}
.trust-grid{display:grid;grid-template-columns:1fr;gap:20px;}
@media(min-width:720px){.trust-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1080px){.trust-grid{grid-template-columns:repeat(4,1fr);}}
.trust-item{
  padding:22px;border-radius:var(--radius-md);background:var(--glass);border:1px solid var(--glass-border);
}
.trust-item .icon{width:34px;height:34px;color:var(--cyan);margin-bottom:14px;}
.trust-item h3{margin-bottom:6px;font-size:1rem;}
.trust-item p{font-size:0.88rem;}

/* ============ GLASS CARD ============ */
.glass-card{
  background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-lg);
  backdrop-filter:blur(10px);
}

/* ============ PRODUKTVARIANTEN / VORTEILS-MATRIX ============ */
.variant-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:36px;}
@media(min-width:900px){.variant-grid{grid-template-columns:repeat(3,1fr);}}
.variant-card{padding:28px;display:flex;flex-direction:column;gap:14px;}
.variant-card .tag{
  align-self:flex-start;font-size:0.72rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--cyan);
}
.variant-card ul{display:flex;flex-direction:column;gap:9px;margin-top:8px;}
.variant-card li{
  font-size:0.9rem;color:var(--slate);display:flex;gap:10px;align-items:flex-start;
}
.variant-card li svg{width:16px;height:16px;flex-shrink:0;margin-top:3px;color:var(--cyan);}

.table-wrap{overflow-x:auto;border-radius:var(--radius-md);border:1px solid var(--glass-border);}
table.compare{width:100%;border-collapse:collapse;min-width:640px;font-size:0.9rem;}
table.compare th,table.compare td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--hairline);}
table.compare thead th{
  font-family:var(--font-display);font-size:0.78rem;text-transform:uppercase;letter-spacing:0.05em;
  color:var(--cyan);background:var(--glass-strong);
}
table.compare tbody th{color:var(--white);font-weight:600;white-space:nowrap;}
table.compare tbody td{color:var(--slate);}
table.compare tbody tr:last-child td,table.compare tbody tr:last-child th{border-bottom:none;}
.disclaimer-note{
  margin-top:20px;font-size:0.82rem;color:var(--slate-dim);border-left:2px solid var(--glass-border);
  padding-left:14px;
}

/* ============ FÖRDERUNG ============ */
.fund-band{background:var(--anthracite);}
.fund-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:16px;}
@media(min-width:720px){.fund-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1080px){.fund-grid{grid-template-columns:repeat(4,1fr);}}
.fund-card{padding:26px 24px;text-align:left;}
.fund-card .value{
  font-family:var(--font-display);font-weight:800;font-size:2.1rem;color:var(--white);
  display:flex;align-items:baseline;gap:4px;
}
.fund-card .value .unit{font-size:1.1rem;color:var(--cyan);}
.fund-card .bar{height:6px;border-radius:99px;background:var(--navy-700);margin:14px 0;overflow:hidden;}
.fund-card .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--cyan-strong),var(--blue-deep));width:0;transition:width 1.1s var(--ease);}
.fund-card p{font-size:0.86rem;}
.fund-hint{
  font-size:0.85rem;color:var(--slate-dim);text-align:center;max-width:640px;margin:26px auto 0;
}

/* ============ STEUERN FLOW ============ */
.flow{display:grid;grid-template-columns:1fr;gap:16px;position:relative;}
@media(min-width:900px){.flow{grid-template-columns:repeat(4,1fr);}}
.flow-step{padding:24px;position:relative;}
.flow-step .num{
  font-family:var(--font-display);font-weight:800;font-size:0.78rem;color:var(--cyan);
  letter-spacing:0.05em;margin-bottom:10px;display:block;
}
.flow-step h3{margin-bottom:8px;font-size:1rem;}
.flow-step p{font-size:0.86rem;}
@media(min-width:900px){
  .flow-step:not(:last-child)::after{
    content:"";position:absolute;top:50%;right:-16px;width:16px;height:1px;background:var(--glass-border);
  }
}

/* ============ RIESTER ============ */
/* minmax(0,1fr) statt 1fr: Die Kurzform 1fr hat als Untergrenze min-content.
   Eine Schaltfläche mit langer, nicht umbrechender Beschriftung zieht die Spalte
   damit über die Containerbreite hinaus – auf schmalen Viewports wurde der
   gesamte Abschnitt rechts abgeschnitten. Mit der Untergrenze 0 folgt die Spalte
   dem Container; den Umbruch der Beschriftung regelt der Block am Dateiende. */
.riester-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:center;}
@media(min-width:960px){.riester-wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);}}
.callout{
  padding:20px 22px;border-radius:var(--radius-md);border:1px solid rgba(79,211,239,0.35);
  background:rgba(79,211,239,0.07);display:flex;gap:14px;align-items:flex-start;margin:22px 0 26px;
}
.callout svg{width:22px;height:22px;color:var(--cyan);flex-shrink:0;margin-top:2px;}
.callout strong{display:block;color:var(--white);margin-bottom:2px;}
.callout span{font-size:0.9rem;color:var(--slate);}
.riester-card{padding:32px;}
.riester-card ul{display:flex;flex-direction:column;gap:12px;margin:18px 0 24px;}
.riester-card li{display:flex;gap:10px;font-size:0.9rem;color:var(--slate);}
.riester-card li svg{width:16px;height:16px;color:var(--cyan);flex-shrink:0;margin-top:3px;}
.riester-card .fine{font-size:0.8rem;color:var(--slate-dim);margin-top:16px;}

/* ============ STATEMENT BAND ============ */
.statement{
  text-align:center;padding-block:96px;
  background:radial-gradient(80% 140% at 50% 0%,rgba(79,211,239,0.08),transparent 60%);
}
.statement blockquote{
  font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.3rem);
  max-width:820px;margin:0 auto;color:var(--white);line-height:1.3;
}
.statement .attribution{margin-top:22px;font-size:0.9rem;color:var(--slate-dim);}

/* ============ FORMS ============ */
.form-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;}
@media(min-width:960px){.form-wrap{grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);}}
.form-card{padding:34px;}
@media(max-width:480px){.form-card{padding:22px 18px;}}
.field{margin-bottom:18px;}
.field label{display:block;font-size:0.85rem;font-weight:600;color:var(--white);margin-bottom:7px;}
.field .hint{font-size:0.78rem;color:var(--slate-dim);margin-top:5px;}
.field input[type="text"],.field input[type="email"],.field input[type="tel"],.field input[type="number"],.field input[type="date"],.field select,.field textarea{
  width:100%;padding:13px 14px;border-radius:10px;border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.03);color:var(--white);font-size:0.95rem;font-family:inherit;
  transition:border-color .2s,background .2s;
  color-scheme:dark; /* lässt Browser natives Kalender-Widget/-Icon im Dark-Theme rendern */
}
.field input[type="date"]{
  min-height:47px; /* gleiche Höhe wie Text-/Number-Felder, da date-Inputs abweichendes Line-Height haben */
}
.field input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(1) brightness(1.6) opacity(.75);cursor:pointer;
}
.field input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1;}
.field input::placeholder,.field textarea::placeholder{color:var(--slate-dim);}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--cyan);background:rgba(255,255,255,0.05);outline:none;
}
.field-row{display:grid;grid-template-columns:1fr;gap:14px;}
@media(min-width:560px){.field-row{grid-template-columns:1fr 1fr;}}
fieldset{border:1px solid var(--glass-border);border-radius:10px;padding:14px 16px;margin-bottom:18px;}
fieldset legend{padding:0 6px;font-size:0.85rem;font-weight:600;color:var(--white);}
.radio-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px;}
.radio-row label{display:flex;align-items:center;gap:7px;font-size:0.88rem;color:var(--slate);font-weight:400;}
.consent{display:flex;gap:10px;align-items:flex-start;margin:6px 0 22px;}
.consent label{min-width:0;}
.consent input{margin-top:4px;}
.consent label{font-size:0.82rem;color:var(--slate-dim);}
.form-msg{
  display:none;margin-top:16px;padding:14px 16px;border-radius:10px;font-size:0.88rem;
  background:rgba(79,211,239,0.1);border:1px solid rgba(79,211,239,0.3);color:var(--white);
}
.form-msg.show{display:block;}
.form-msg[data-state="error"]{background:rgba(239,79,79,0.1);border-color:rgba(239,79,79,0.35);}

.info-side h2{margin-bottom:14px;}
.info-side .steps{margin-top:24px;display:flex;flex-direction:column;gap:16px;}
.info-side .steps li{display:flex;gap:14px;font-size:0.9rem;color:var(--slate);align-items:flex-start;}
.info-side .steps .dot{
  width:26px;height:26px;border-radius:50%;background:var(--glass);border:1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:0.75rem;
  color:var(--cyan);flex-shrink:0;
}

/* ============ WARTELISTE ============ */
.waitlist-band{background:var(--anthracite);text-align:center;}
.waitlist-inner{max-width:520px;margin:0 auto;}
.sr-only{position:absolute;left:-9999px;}
.waitlist-form{display:flex;flex-direction:column;gap:10px;margin-top:26px;text-align:left;}
.waitlist-row{display:grid;grid-template-columns:1fr;gap:10px;}
@media(min-width:480px){.waitlist-row{grid-template-columns:1fr 1fr;}}
.waitlist-form input{
  width:100%;padding:13px 15px;border-radius:10px;border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.03);color:var(--white);font-size:0.92rem;font-family:inherit;
}
.waitlist-form input:focus{border-color:var(--cyan);outline:none;background:rgba(255,255,255,0.05);}
.waitlist-form input::placeholder{color:var(--slate-dim);}
.waitlist-consent{max-width:460px;margin:14px auto 0;font-size:0.76rem;color:var(--slate-dim);}

/* ============ FAQ ============ */
.faq-list{display:flex;flex-direction:column;gap:12px;max-width:820px;}
details.faq-item{
  border:1px solid var(--glass-border);border-radius:var(--radius-md);background:var(--glass);
  padding:4px 4px;overflow:hidden;
}
details.faq-item summary{
  list-style:none;cursor:pointer;padding:18px 20px;display:flex;justify-content:space-between;
  align-items:center;gap:16px;font-family:var(--font-display);font-weight:600;font-size:0.98rem;color:var(--white);
}
details.faq-item summary::-webkit-details-marker{display:none;}
details.faq-item summary::marker{content:"";}
.chev{width:18px;height:18px;color:var(--cyan);transition:transform .25s var(--ease);flex-shrink:0;}
details[open] .chev{transform:rotate(180deg);}
.faq-answer{padding:0 20px 20px;font-size:0.92rem;color:var(--slate);}

/* ============ FOOTER ============ */
footer{background:var(--navy-950);border-top:1px solid var(--hairline);padding-block:64px 32px;}
.footer-grid{display:grid;grid-template-columns:1fr;gap:40px;margin-bottom:44px;}
@media(min-width:860px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr;}}
.footer-brand .logo{margin-bottom:14px;}
.footer-brand p{font-size:0.85rem;max-width:38ch;}
.footer-col h4{font-family:var(--font-display);font-size:0.85rem;color:var(--white);margin-bottom:14px;}
.footer-col ul{display:flex;flex-direction:column;gap:9px;}
.footer-col a{font-size:0.85rem;color:var(--slate);}
.footer-col a:hover{color:var(--cyan);}
.legal-block{
  border-top:1px solid var(--hairline);padding-top:32px;font-size:0.78rem;color:var(--slate-dim);
  line-height:1.8;
}
.legal-block strong{color:var(--slate);}
.legal-block .grid2{display:grid;grid-template-columns:1fr;gap:24px;margin:18px 0;}
@media(min-width:760px){.legal-block .grid2{grid-template-columns:1fr 1fr;}}
.legal-flag{color:#FFB86B;font-weight:600;}
.footer-bottom{
  margin-top:32px;padding-top:22px;border-top:1px solid var(--hairline);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:0.78rem;color:var(--slate-dim);
}
.footer-berater{
  margin-top:20px;padding:16px 18px;border:1px solid var(--glass-border);border-radius:var(--radius-md);
  font-size:0.82rem;color:var(--slate);background:var(--glass);
}
.footer-berater a{color:var(--cyan);}

/* ============ SCROLL REVEAL ============ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}

/* ============ AI CHAT ============ */
.chat-launcher{
  position:fixed;right:20px;bottom:20px;z-index:80;width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,var(--cyan-strong),var(--blue-deep));color:#04131F;
  display:flex;align-items:center;justify-content:center;border:none;
  box-shadow:0 10px 30px rgba(47,182,219,0.35);transition:transform .2s var(--ease);
}
.chat-launcher:hover{transform:scale(1.06);}
.chat-launcher svg{width:24px;height:24px;}
.chat-panel{
  position:fixed;right:20px;bottom:88px;z-index:80;width:min(360px,calc(100vw - 40px));
  max-height:min(520px,calc(100vh - 140px));display:none;flex-direction:column;
  background:var(--navy-800);border:1px solid var(--glass-border);border-radius:var(--radius-lg);
  box-shadow:0 24px 60px rgba(0,0,0,0.45);overflow:hidden;
}
.chat-panel.open{display:flex;}
.chat-head{
  padding:16px 18px;border-bottom:1px solid var(--hairline);display:flex;justify-content:space-between;
  align-items:center;background:var(--glass);
}
.chat-head h3{font-size:0.92rem;}
.chat-head button{background:none;border:none;color:var(--slate);width:28px;height:28px;}
.chat-head button svg{width:18px;height:18px;}
.chat-body{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:10px;min-height:180px;}
.msg{max-width:85%;padding:10px 13px;border-radius:12px;font-size:0.86rem;line-height:1.5;}
.msg.bot{background:var(--glass);border:1px solid var(--glass-border);align-self:flex-start;color:var(--white);}
.msg.user{background:var(--blue-deep);align-self:flex-end;color:var(--white);}
.chat-quick{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 14px;}
.chat-quick button{
  font-size:0.78rem;padding:8px 12px;border-radius:999px;border:1px solid var(--glass-border);
  background:var(--glass);color:var(--slate);
}
.chat-quick button:hover{color:var(--white);border-color:var(--cyan);}
.chat-input{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--hairline);}
.chat-input input{
  flex:1;padding:10px 12px;border-radius:10px;border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.03);color:var(--white);font-size:0.86rem;
}
.chat-input button{
  width:38px;height:38px;border-radius:10px;border:none;background:var(--cyan);color:#04131F;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.chat-input button svg{width:16px;height:16px;}
.chat-disclaimer{
  font-size:0.7rem;color:var(--slate-dim);padding:0 18px 14px;line-height:1.5;
}

/* ============ FAQ SEARCH & GLOSSAR ============ */
.faq-search{position:relative;margin-bottom:30px;max-width:540px;}
.faq-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--slate-dim);pointer-events:none;}
.faq-search input{width:100%;padding:14px 16px 14px 46px;border-radius:12px;border:1px solid var(--glass-border);background:var(--glass);color:var(--white);font-size:0.95rem;font-family:inherit;}
.faq-search input:focus{border-color:var(--cyan);outline:none;background:rgba(255,255,255,0.05);}
.faq-search input::placeholder{color:var(--slate-dim);}
.faq-noresult{font-size:0.9rem;color:var(--slate-dim);padding:6px 0 22px;display:none;}
.glossary-head{font-family:var(--font-display);font-size:0.78rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--cyan);margin:6px 0 16px;}
.glossary-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:44px;}
@media(min-width:720px){.glossary-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1080px){.glossary-grid{grid-template-columns:repeat(3,1fr);}}
.glossary-term{padding:18px 20px;border-radius:var(--radius-md);background:var(--glass);border:1px solid var(--glass-border);transition:opacity .2s,transform .2s;}
.glossary-term h4{font-family:var(--font-display);font-size:0.92rem;color:var(--cyan);margin-bottom:6px;}
.glossary-term p{font-size:0.85rem;color:var(--slate);margin:0;}
.glossary-term.hidden,.faq-item.hidden{display:none;}
.faq-list-head{font-family:var(--font-display);font-size:0.78rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--cyan);margin:0 0 16px;}

/* ============ RECHNER ============ */
.rechner-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;}
@media(min-width:960px){.rechner-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;}}
.rechner-card{padding:30px;}
.rechner-field{margin-bottom:20px;min-width:0;}
.rechner-field .rlabel{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;row-gap:2px;column-gap:10px;font-size:0.85rem;font-weight:600;color:var(--white);margin-bottom:8px;}
.rechner-field .rlabel label{min-width:0;}
.rechner-field .rlabel .rval{flex:0 0 auto;white-space:nowrap;color:var(--cyan);font-family:var(--font-display);font-variant-numeric:tabular-nums;}
.rechner-field input[type="range"]{
  width:100%;height:4px;border-radius:99px;background:var(--navy-700);appearance:none;outline:none;
}
.rechner-field input[type="range"]::-webkit-slider-thumb{
  appearance:none;width:18px;height:18px;border-radius:50%;background:var(--cyan);cursor:pointer;box-shadow:0 0 0 4px rgba(79,211,239,0.18);
}
.rechner-field input[type="range"]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:var(--cyan);border:none;cursor:pointer;box-shadow:0 0 0 4px rgba(79,211,239,0.18);
}
.rechner-field select, .rechner-field input[type="number"]{
  width:100%;padding:11px 14px;border-radius:10px;border:1px solid var(--glass-border);background:rgba(255,255,255,0.03);color:var(--white);font-size:0.9rem;font-family:inherit;
}
.rechner-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;min-width:0;}
.rechner-row > .rechner-field{min-width:0;}
.rechner-check{display:flex;align-items:center;gap:10px;margin-top:4px;font-size:0.86rem;color:var(--slate);}
.rechner-check input{width:16px;height:16px;flex:none;}
.result-card{padding:30px;position:sticky;top:100px;min-width:0;}
.result-headline{font-size:0.82rem;color:var(--slate);margin-bottom:6px;}
.result-value{
  font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,7vw,2.6rem);color:var(--white);
  font-variant-numeric:tabular-nums;margin-bottom:22px;word-break:break-word;
}
.result-value span{color:var(--cyan);}
.stack-bar{height:14px;border-radius:99px;overflow:hidden;display:flex;background:var(--navy-700);margin-bottom:16px;width:100%;}
.stack-bar .seg{height:100%;transition:width .5s var(--ease);}
.seg-eigen{background:var(--slate-dim);}
.seg-foerder{background:linear-gradient(90deg,var(--cyan-strong),var(--cyan));}
.seg-wachstum{background:linear-gradient(90deg,var(--blue-deep),#4C7FF0);}
.result-legend{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.result-legend .lrow{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;row-gap:2px;column-gap:10px;font-size:0.86rem;min-width:0;}
.result-legend .lrow > span:first-child{display:inline-flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.result-legend .lrow .ldot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;flex:none;}
.result-legend .amt{flex:0 0 auto;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--white);font-weight:600;}
.result-note{font-size:0.78rem;color:var(--slate-dim);border-top:1px solid var(--hairline);padding-top:16px;margin-top:6px;line-height:1.6;}

@media(max-width:480px){
  .rechner-card,.result-card{padding:22px 18px;}
}

/* ============ WARTELISTE SCARCITY BADGE ============ */
.exclusive-badge{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:8px 16px;border-radius:999px;
  background:rgba(79,211,239,0.08);border:1px solid rgba(79,211,239,0.3);color:var(--cyan);
  font-size:0.78rem;font-weight:600;
}

/* ============ ZWEI SÄULEN: DUAL-ENTRY ============ */
.pathways{padding-top:0;}
.pathway-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;}
@media(min-width:820px){.pathway-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
.pathway-card{
  padding:34px;border-radius:var(--radius-lg);position:relative;overflow:hidden;
  border:1px solid var(--glass-border);transition:transform .25s var(--ease),border-color .25s;
  display:flex;flex-direction:column;gap:14px;
}
.pathway-card:hover{transform:translateY(-4px);border-color:rgba(79,211,239,0.35);}
.pathway-card.kids{background:linear-gradient(160deg,rgba(79,211,239,0.07),rgba(255,255,255,0.03));}
.pathway-card.adults{background:linear-gradient(160deg,rgba(46,99,214,0.10),rgba(255,255,255,0.03));}
.pathway-icon{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:rgba(79,211,239,0.12);color:var(--cyan);
}
.pathway-card.adults .pathway-icon{background:rgba(46,99,214,0.16);color:#7FA3F5;}
.pathway-card .pathway-tag{font-family:var(--font-display);font-size:0.72rem;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--slate);}
.pathway-card h3{font-size:1.5rem;margin:2px 0 4px;}
.pathway-card p{color:var(--slate);font-size:0.95rem;}
.pathway-card .btn{align-self:flex-start;margin-top:8px;}

/* ============ LEBENSZYKLUS-TIMELINE ============ */
.lifecycle{padding-block:70px;}
.lifecycle-track{
  display:grid;grid-template-columns:1fr;gap:0;position:relative;margin-top:44px;
}
@media(min-width:900px){.lifecycle-track{grid-template-columns:repeat(4,1fr);}}
.lifecycle-track::before{
  content:"";position:absolute;left:0;right:0;top:26px;height:1px;background:var(--hairline);
  display:none;
}
@media(min-width:900px){.lifecycle-track::before{display:block;}}
.lifecycle-step{position:relative;padding:0 18px 18px 0;}
.lifecycle-step .ls-dot{
  width:14px;height:14px;border-radius:50%;background:var(--navy-900);border:2px solid var(--cyan);
  margin-bottom:16px;position:relative;z-index:1;
}
.lifecycle-step.is-adult .ls-dot{border-color:#7FA3F5;}
.lifecycle-step .ls-age{font-family:var(--font-display);font-weight:800;font-size:1.1rem;color:var(--white);margin-bottom:4px;}
.lifecycle-step .ls-title{font-family:var(--font-display);font-weight:700;font-size:0.95rem;color:var(--cyan);margin-bottom:8px;}
.lifecycle-step.is-adult .ls-title{color:#7FA3F5;}
.lifecycle-step p{font-size:0.86rem;color:var(--slate);}

/* ============ RECHTSSTATUS-BANNER (Gesetzentwurf) ============ */
.status-banner{
  display:flex;gap:14px;align-items:flex-start;padding:16px 20px;border-radius:var(--radius-md);
  background:rgba(255,183,77,0.07);border:1px solid rgba(255,183,77,0.28);margin-bottom:30px;
}
.status-banner svg{flex:none;width:20px;height:20px;color:#FFB74D;margin-top:2px;}
.status-banner strong{color:#FFB74D;}
.status-banner p{font-size:0.86rem;color:var(--slate);margin:0;}
.status-pill{
  display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;
  background:rgba(255,183,77,0.1);border:1px solid rgba(255,183,77,0.3);color:#FFB74D;
  font-family:var(--font-display);font-size:0.72rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;
  margin-bottom:16px;
}

/* ============ FÖRDER-STAT-KARTEN (Frühstartrente) ============ */
.fsr-stat-grid{display:grid;grid-template-columns:1fr;gap:16px;}
@media(min-width:720px){.fsr-stat-grid{grid-template-columns:repeat(3,1fr);}}
.fsr-stat{padding:26px;text-align:center;}
.fsr-stat .num{font-family:var(--font-display);font-weight:800;font-size:2.1rem;color:var(--cyan);font-variant-numeric:tabular-nums;}
.fsr-stat .label{font-size:0.85rem;color:var(--slate);margin-top:6px;}

/* ============ BRIDGE-BAND (Cross-Conversion) ============ */
.bridge-band{background:var(--anthracite);text-align:center;padding-block:64px;}
.bridge-band .lede{max-width:620px;margin:14px auto 26px;}

/* Zweite Säule optisch im Nav abgesetzt */
.nav-pillar{
  color:var(--cyan) !important;padding:6px 12px;border-radius:999px;
  border:1px solid rgba(79,211,239,0.3);background:rgba(79,211,239,0.06);
  font-size:0.85rem !important;
}

.faq-crosslink{margin-top:26px;padding-top:22px;border-top:1px solid var(--hairline);font-size:0.92rem;color:var(--slate);}
.faq-crosslink a{font-weight:600;}

/* ============ AKTUELLES (News-Übersicht + Artikel) ============ */
.news-grid{display:grid;grid-template-columns:1fr;gap:22px;}
@media(min-width:720px){.news-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1100px){.news-grid{grid-template-columns:repeat(3,1fr);}}
.news-card{
  display:flex;flex-direction:column;padding:26px;border-radius:var(--radius-lg);
  border:1px solid var(--glass-border);background:var(--glass);text-decoration:none;
  transition:transform .2s var(--ease),border-color .2s;min-width:0;
}
.news-card:hover{transform:translateY(-3px);border-color:rgba(79,211,239,0.35);}
.news-card .news-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.news-tag{
  display:inline-block;font-family:var(--font-display);font-size:0.68rem;font-weight:700;
  letter-spacing:0.05em;text-transform:uppercase;padding:4px 10px;border-radius:999px;
}
.news-tag.tag-einordnung{background:rgba(79,211,239,0.12);color:var(--cyan);}
.news-tag.tag-gesetzgebung{background:rgba(255,183,77,0.12);color:#FFB74D;}
.news-tag.tag-markt{background:rgba(46,99,214,0.16);color:#7FA3F5;}
.news-date{font-size:0.76rem;color:var(--slate-dim);}
.news-card h3{font-size:1.08rem;line-height:1.4;margin-bottom:8px;color:var(--white);}
.news-card p{font-size:0.86rem;color:var(--slate);line-height:1.6;margin-bottom:14px;}
.news-card .news-readmore{margin-top:auto;font-family:var(--font-display);font-size:0.82rem;font-weight:700;color:var(--cyan);}
.news-source-note{font-size:0.78rem;color:var(--slate-dim);margin-top:8px;}

/* Einzelner Artikel */
.article-header{max-width:760px;margin:0 auto;}
.article-header .news-meta{margin-bottom:18px;}
.article-body{max-width:760px;margin:0 auto;color:var(--slate);line-height:1.85;font-size:1rem;}
.article-body h2{font-size:1.3rem;color:var(--white);margin:36px 0 14px;}
.article-body p{margin-bottom:18px;}
.article-body a{color:var(--cyan);text-decoration:underline;}
.article-body blockquote{
  margin:24px 0;padding:16px 22px;border-left:3px solid var(--cyan);background:var(--glass);
  border-radius:0 var(--radius-md) var(--radius-md) 0;font-style:italic;color:var(--white);
}
.article-table-wrap{overflow-x:auto;border:1px solid var(--glass-border);border-radius:14px;margin:24px 0;}
.article-table-wrap table{width:100%;border-collapse:collapse;min-width:520px;font-size:0.86rem;}
.article-table-wrap th,.article-table-wrap td{padding:11px 14px;text-align:right;border-bottom:1px solid var(--hairline);}
.article-table-wrap th:first-child,.article-table-wrap td:first-child{text-align:left;}
.article-table-wrap thead th{font-family:var(--font-display);font-size:0.72rem;text-transform:uppercase;color:var(--cyan);background:var(--glass);}
.article-table-wrap tbody tr.highlight td{color:var(--white);font-weight:700;background:rgba(79,211,239,0.06);}
.article-source-box{
  margin:30px auto 0;max-width:760px;padding:18px 22px;border-radius:var(--radius-md);
  border:1px solid var(--glass-border);background:var(--glass);font-size:0.84rem;color:var(--slate-dim);
}
.article-source-box a{color:var(--cyan);}
.article-back{display:inline-flex;align-items:center;gap:6px;font-size:0.85rem;color:var(--slate);margin-bottom:24px;}
.article-back:hover{color:var(--cyan);}

/* ==========================================================================
   START: Fluide Textbreiten und Umbruchverhalten (Stand 2026-09-04)
   Behebt drei getrennte Befunde:
   (1) Desktop: einzelne Textblöcke brachen an einer festen Pixelgrenze um,
       während der darunterliegende Inhalt die volle Containerbreite nutzte.
   (2) Mobil: Schaltflächen mit langer Beschriftung wurden rechts abgeschnitten
       und rissen ganze Abschnitte mit (Ursache: white-space:nowrap in .btn).
   (3) Mobil unter 400px: Logo + Vorab-Check + Burger passten nicht nebeneinander.
   Der Block steht bewusst am Dateiende, damit er als zusammenhängender
   Änderungsstand les- und rückrollbar ist.
   ========================================================================== */

/* --- (1) Fluide Textbreiten -------------------------------------------------
   Bewusst eng gefasst auf die benannten Blöcke. .section-head trägt weiterhin
   global max-width:660px; eine globale Aufhebung würde jeden Abschnittskopf
   auf allen Seiten umbrechen lassen und ist hier nicht gewollt. */
.pathways .section-head{max-width:none;}
#faq .faq-list{max-width:none;}

/* Die beiden Querverweise sind zwei eigenständige Aussagen. Als Blockzeilen
   umbrechen sie unabhängig voneinander; ein <br> hätte den Umbruchpunkt fest
   verdrahtet. */
.faq-crosslink .xline{display:block;}
.faq-crosslink .xline + .xline{margin-top:6px;}

/* --- (2) Umbrechende Schaltflächenbeschriftungen auf schmalen Viewports -----
   Auf dem Desktop bleibt white-space:nowrap erhalten, damit Beschriftungen
   nicht mitten im Satz umbrechen. Der Umschaltpunkt liegt bei 900px: Die
   zweispaltige Rechner-Auswahl im Abschnitt „Förderung“ (auto-fit, minmax
   280px) trägt bis dahin Spalten, die schmaler sind als die Mindestbreite
   langer deutscher Beschriftungen wie „Fördervergleich Basisrente vs.
   Altersvorsorgedepot →“ (389px) oder „Riester und Altersvorsorgedepot
   durchrechnen →“ (416px). Ab 900px passen sie wieder in eine Zeile. */
@media(max-width:900px){
  .btn{white-space:normal;text-align:center;overflow-wrap:break-word;}
  .btn-sm{padding:11px 16px;}
}

/* --- (3) Kopfzeile auf sehr schmalen Geräten -------------------------------
   Bei 360px CSS-Breite standen Logo (174px), Vorab-Check (135px) und
   Burger-Schaltfläche (40px) zusammen 361px breit in einem 312px breiten
   Container. */
@media(max-width:400px){
  .nav{gap:8px;}
  .logo{font-size:1.02rem;}
  .nav-actions{gap:8px;}
  .nav-actions .btn-sm{padding:10px 12px;font-size:0.8rem;}
}
/* ==========================================================================
   ENDE: Fluide Textbreiten und Umbruchverhalten
   ========================================================================== */