/* Inhaltsseiten im Stil des KI·bAV-Erklärfilms.
   Jede Szene vollflächig mit Foto oder Video, Navy-Verlauf von links, Schlagzeile links (zweite Zeile hellblau),
   rechts eine weiße Karte wie die Gehaltsabrechnung im Film. Elemente blenden nacheinander ein, wenn die Szene ins Bild kommt. */
.szene{position:relative;min-height:88vh;min-height:88svh;display:flex;align-items:center;overflow:hidden;color:#F2F5FA;background:#0A1F3E;padding:120px 0 90px;}
.szene-voll{min-height:100vh;min-height:100svh;}
.szene-bg{position:absolute;inset:0;z-index:0;}
.szene-bg img,.szene-bg video{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);transition:transform 8s ease-out;}
.szene.in .szene-bg img,.szene.in .szene-bg video{transform:scale(1);}
.szene-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,31,62,.96) 0%,rgba(10,31,62,.86) 40%,rgba(10,31,62,.55) 72%,rgba(10,31,62,.35) 100%);}
.szene + .szene{border-top:1px solid rgba(255,255,255,.06);}
.szene-inner{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px;align-items:center;}
.szene-text{max-width:640px;}
.sz-eyebrow{font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:#9CC0EA;font-weight:500;margin-bottom:20px;display:flex;align-items:center;gap:14px;}
.sz-eyebrow::before{content:"";width:40px;height:1px;background:#9CC0EA;flex:none;}
.szene h1,.szene h2{color:#F2F5FA;font-weight:600;letter-spacing:-.02em;line-height:1.04;margin:0;}
.szene h1{font-size:clamp(38px,4.3vw,62px);}
.szene h2{font-size:clamp(34px,4.2vw,60px);}
.szene .hl{color:#9CC0EA;}
.sz-sub{font-size:19px;line-height:1.55;color:#B3C2D8;margin:22px 0 0;max-width:560px;}
.sz-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;}
.szene .btn-primary{background:#F2F5FA;color:#0A1F3E;}
.szene .btn-primary:hover{background:#FFFFFF;}
.btn-ghost-hell{background:transparent;color:#F2F5FA;border:1px solid rgba(255,255,255,.45);}
.btn-ghost-hell:hover{border-color:#9CC0EA;color:#9CC0EA;}
.sz-fine{position:absolute;left:0;right:0;bottom:18px;z-index:1;text-align:center;font-size:12px;color:#8295B0;margin:0;padding:0 16px;}

/* Weiße Karte wie die Gehaltsabrechnung im Film */
.sz-karte{background:#FFFFFF;color:#172640;border-radius:18px;padding:26px 30px;box-shadow:0 30px 70px rgba(0,0,0,.38);}
.sk-h{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#4B5872;font-weight:600;padding-bottom:14px;border-bottom:1px dashed rgba(14,42,82,.22);}
.sk-l{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid rgba(14,42,82,.08);font-size:17px;color:#172640;text-decoration:none;}
a.sk-l:hover b{color:#2D68AE;}
.sk-l em{display:block;font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#7C879B;margin-bottom:2px;}
.sk-l b{font-weight:600;white-space:nowrap;text-align:right;}
.sk-l b.p{color:#2D68AE;}
.sk-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
.sk-tile{border-radius:12px;padding:14px 16px;background:#EDF1F6;}
.sk-tile.dk{background:#0E2A52;color:#FFFFFF;}
.sk-tile span{font-size:12.5px;color:#4B5872;}
.sk-tile.dk span{color:#9CC0EA;}
.sk-tile b{display:block;font-size:26px;font-weight:600;margin-top:2px;line-height:1.15;white-space:nowrap;}
.sk-tile b.klein{font-size:16px;margin-top:6px;}
.sk-step{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid rgba(14,42,82,.08);}
.sk-step i{flex:none;width:28px;height:28px;border-radius:50%;background:#0E2A52;color:#FFFFFF;font-style:normal;font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center;}
.sk-step b{display:block;font-size:17px;font-weight:600;}
.sk-step span{display:block;font-size:14.5px;color:#4B5872;line-height:1.5;margin-top:2px;}
.sk-foot{font-size:13px;color:#7C879B;padding-top:14px;}

/* Das runde Bild als Szene: Kreis rechts statt Karte */
.szene-rund .szene-bg::after{background:radial-gradient(70% 90% at 72% 50%,rgba(10,31,62,.35),rgba(10,31,62,.92) 75%);}
.szene-rund .kreis-video{opacity:.7;}
.szene-rund .kreis-stage{background:none;padding:0;margin:0;border-radius:0;overflow:visible;}
.szene-rund .kreis-stage::after{display:none;}
.szene-rund .kreis{width:min(560px,100%);}
.szene-rund .kreis-knoten{width:31%;}.szene-rund .kreis-mitte{width:30%;}.szene-rund .kreis-mitte b{font-size:clamp(18px,2.2vw,26px);}
.szene-rund .kreis-knoten span{font-size:12.5px;}

/* Einblenden nacheinander wie im Film */
.szene .a{opacity:0;transform:translateY(22px);}
.szene.in .a{animation:szAuf .8s cubic-bezier(.2,.7,.2,1) forwards;}
.szene.in .a.d1{animation-delay:.1s}.szene.in .a.d2{animation-delay:.35s}.szene.in .a.d3{animation-delay:.7s}.szene.in .a.d4{animation-delay:1.05s}
@keyframes szAuf{to{opacity:1;transform:none}}
.szene .kreis-stage.a{animation-fill-mode:forwards;}
@media (prefers-reduced-motion:reduce){.szene .a{opacity:1;transform:none;animation:none!important}.szene-bg img,.szene-bg video{transform:none;transition:none}}

.szene .hero-weiter{z-index:2;border-color:rgba(255,255,255,.3);color:#F2F5FA;}
.szene .hero-weiter:hover{border-color:#9CC0EA;color:#9CC0EA;}

@media (max-width:900px){
  .szene{min-height:0;padding:110px 0 70px;}
  .szene-voll{min-height:100svh;}
  .szene-inner{grid-template-columns:1fr;gap:36px;}
  .szene-bg::after{background:linear-gradient(180deg,rgba(10,31,62,.88) 0%,rgba(10,31,62,.92) 55%,rgba(10,31,62,.97) 100%);}
  .sz-sub{font-size:17px;}
  .sz-karte{padding:20px 20px;}
  .sk-l{font-size:15.5px;}
  .sk-tile b{font-size:22px;}
  .szene-rund .kreis-knoten span{display:none;}
  .sz-fine{position:static;margin-top:28px;text-align:left;}
}
.sk-tile b.klein{white-space:normal;}
body.dark-hero .topnav:not(.scrolled) .nav-drop-toggle{color:#FFFFFF;}
/* Kreis-Knoten: breitere Karten, Titel brechen sauber um statt über den Rand zu laufen */
.szene-rund .kreis{width:min(600px,100%);}
.szene-rund .kreis-knoten{width:36%;padding:12px 10px;}
.szene-rund .kreis-knoten.k2{left:86%;}.szene-rund .kreis-knoten.k4{left:14%;}
.szene-rund .kreis-mitte{width:28%;}
.szene-rund .kreis-knoten b{font-size:clamp(13px,1.15vw,16px);line-height:1.25;text-wrap:balance;hyphens:manual;}
@media (max-width:560px){.szene-rund .kreis-knoten{width:34%;padding:8px 4px;}.szene-rund .kreis-knoten.k2{left:82%;}.szene-rund .kreis-knoten.k4{left:18%;}.szene-rund .kreis-mitte{width:26%;}}
.szene-rund .kreis-mitte b{font-size:clamp(16px,1.8vw,22px);}.szene-rund .kreis-mitte span{font-size:11px;letter-spacing:.2em;}

/* Szene mit Erklärfilm: ruhiger Navy-Grund, Film rechts statt Karte */
.szene-film{background:radial-gradient(120% 90% at 85% 10%,#1B4479 0%,#0E2A52 42%,#0A1F3E 100%);}
.szene-film .szene-inner{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:48px;}
.szene-film .film-frame{width:100%;max-width:none;margin:0;box-shadow:0 30px 70px rgba(0,0,0,.4);}
.sz-note{font-size:12.5px;color:#8295B0;margin-top:22px;max-width:460px;line-height:1.5;}
@media (max-width:900px){.szene-film .szene-inner{grid-template-columns:1fr;}.szene-film .film-frame{margin:0 auto;}}
.szene-film h2{font-size:clamp(30px,3.2vw,46px);}
/* Handy: Werte in den Karten dürfen umbrechen, statt über den Rand zu laufen */
@media (max-width:600px){
  .sk-l{flex-wrap:wrap;gap:4px 12px;}
  .sk-l b{white-space:normal;text-align:right;margin-left:auto;}
  .sk-tiles{grid-template-columns:1fr;}
  .sk-tile b{white-space:normal;}
}

/* Breite Szenen: Kopf oben, darunter ein breites Element (Rechner, Vergleich, Chart, FAQ) */
.szene-breit > .wrap{position:relative;z-index:1;width:100%;}
.szene-kopf{margin-bottom:36px;}
.szene-breit .szene-bg::after{background:linear-gradient(180deg,rgba(10,31,62,.9) 0%,rgba(10,31,62,.82) 50%,rgba(10,31,62,.94) 100%);}
.szene .cmp{box-shadow:0 30px 70px rgba(0,0,0,.35);}
.szene .slip{box-shadow:0 30px 70px rgba(0,0,0,.38);border:0;}
.szene .calc-panel{box-shadow:0 30px 70px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);}
.szene .yr-chart{background:rgba(10,31,62,.6);}
.szene .yr-fine{color:#8295B0;font-size:12px;line-height:1.55;margin-top:26px;}
.sz-karte-breit{max-width:900px;}
.sz-karte .faq details{padding-left:0;padding-right:0;}
.sz-punkte{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px;}
.sz-punkte > div{background:rgba(10,31,62,.6);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:22px 20px;}
.sz-punkte span{font-size:12px;letter-spacing:.22em;color:#9CC0EA;font-weight:500;}
.sz-punkte h3{color:#F2F5FA;font-size:17px;font-weight:600;line-height:1.3;margin:10px 0 8px;}
.sz-punkte p{color:#B3C2D8;font-size:14px;line-height:1.55;margin:0;}
@media (max-width:1000px){.sz-punkte{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.sz-punkte{grid-template-columns:1fr;}.szene .cmp-row{grid-template-columns:1fr;}.szene .cmp-head span:first-child{display:none;}}
/* Weiße Bausteine in dunklen Szenen behalten dunkle Schrift */
.szene .slip,.szene .cmp,.szene .sz-karte{color:#172640;}

/* Personen-Szenen: Text links, rechts Porträt mit Zitat als weiße Karte */
.szene-person .szene-inner{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);}
.sz-sub-klein{font-size:16px;color:#B3C2D8;margin-top:14px;}
.sz-fakten{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin-top:26px;max-width:560px;}
.sz-fakten > div{border-top:1px solid rgba(255,255,255,.16);padding:14px 0;font-size:15.5px;color:#F2F5FA;line-height:1.5;}
.sz-fakten span{display:block;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#9CC0EA;margin-bottom:5px;}
.sz-fakten a{color:#F2F5FA;text-decoration:none;border-bottom:1px solid rgba(156,192,234,.6);}
.sz-fakten a:hover{color:#9CC0EA;}
.sz-portrait{margin:0;background:#FFFFFF;border-radius:18px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.38);max-width:420px;justify-self:end;width:100%;}
.sz-portrait img{display:block;width:100%;height:auto;aspect-ratio:4/4.2;object-fit:cover;}
.sz-portrait blockquote{margin:0;padding:22px 26px 24px;font-size:19px;line-height:1.35;font-weight:500;color:#172640;letter-spacing:-.01em;}
.sz-portrait blockquote span{display:block;color:#2D68AE;margin-top:.2em;}
@media (max-width:900px){.szene-person .szene-inner{grid-template-columns:1fr;}.sz-portrait{justify-self:start;max-width:380px;}}
@media (max-width:600px){.sz-fakten{grid-template-columns:1fr;}}

/* Startseite: Partner-Zeile im Einstieg, große Zahlen in der Karte, hervorgehobener letzter Schritt */
.sz-cobrand{margin:0 0 26px;}
.sz-cobrand .partner-name{color:rgba(255,255,255,.75);}
.sz-cobrand .sep{background:rgba(255,255,255,.35);}
.sk-zahl{display:grid;grid-template-columns:118px 1fr;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid rgba(14,42,82,.08);}
.sk-zahl b{font-size:30px;font-weight:600;letter-spacing:-.02em;color:#0E2A52;white-space:nowrap;}
.sk-zahl b.p{color:#2D68AE;}
.sk-zahl span{font-size:14.5px;line-height:1.5;color:#4B5872;}
.sz-punkte > div.hi{border-color:#9CC0EA;background:rgba(156,192,234,.12);}
@media (max-width:600px){.sk-zahl{grid-template-columns:1fr;gap:4px;}}

/* Kontakt im Szenen-Stil: Formular als weiße Karte wie die Gehaltsabrechnung */
.szene .ct-grid{position:relative;z-index:1;width:100%;}
.szene .ct-form{background:#FFFFFF;border:0;border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,.38);padding:30px 32px;color:#172640;}
.szene .ct-form h3{color:#172640;font-weight:600;}
.szene .ct-form .ct-small{color:#4B5872;}
.szene .ct-form .ct-small a,.szene .ct-form .ct-c a{color:#2D68AE;}
.szene .ct-form label,.szene .ct-form .ct-lbl{color:#172640;}
.szene .ct-form em{color:#7C879B;}
.szene .ct-form input:not([type=checkbox]),.szene .ct-form select{background:#F3F6F9;border:1px solid rgba(14,42,82,.14);color:#172640;}
.szene .ct-form input:focus,.szene .ct-form select:focus{outline-color:#2D68AE;}
.szene .ct-chips span{border-color:rgba(14,42,82,.18);color:#172640;}
.szene .ct-chips input:checked+span{background:#0E2A52;border-color:#0E2A52;color:#FFFFFF;}
.szene .ct-form .btn-primary{background:#0E2A52;color:#FFFFFF;}
.szene .ct-form .btn-primary:hover{background:#163A6B;}
.szene .ct-err{color:#B3261E;}
.szene .ct-list li{color:#F2F5FA;}
.szene .ct-me{border-top-color:rgba(255,255,255,.16);}

/* Partner-Zugang als Szene: Anmeldung als weiße Karte */
.szene .login-card{margin:0;justify-self:end;width:100%;max-width:440px;background:#FFFFFF !important;border:0;border-radius:18px;padding:32px 32px 26px;box-shadow:0 30px 70px rgba(0,0,0,.38);color:#172640;}
.szene .login-card h3{color:#172640;font-weight:600;}
.szene .login-card input{background:#F3F6F9;border-color:rgba(14,42,82,.14);color:#172640;}
.szene .login-card label,.szene .login-forgot,.szene .login-foot{color:#4B5872;}
.szene .login-foot a{color:#2D68AE !important;}
.szene .login-card .btn-primary{background:#0E2A52;color:#FFFFFF;}
@media (max-width:900px){.szene .login-card{justify-self:start;}}
/* Szene mit Bild rechts frei: Text und Karte untereinander in der linken Spalte */
.szene-links .szene-inner{grid-template-columns:minmax(0,560px);gap:30px;}
.szene-links .login-card{justify-self:start;}

/* KI-Audit: Zugangskarte rechts */
.au-karte h3{font-size:24px;font-weight:600;color:#172640;margin:16px 0 8px;letter-spacing:-.01em;}
.au-karte p{font-size:15px;line-height:1.6;color:#4B5872;margin:0 0 18px;}
.au-ctas{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 6px;}
.au-karte .btn-primary{background:#0E2A52;color:#FFFFFF;}
.au-karte .btn-primary:hover{background:#163A6B;}
.au-karte .btn-ghost{background:transparent;color:#172640;border:1px solid rgba(14,42,82,.25);}
.szene-inner > *{min-width:0;}