/* KIbAV – neuer Stil (Vorschau), Vorlage: saléa.de
 * Wird nach site.css geladen und überschreibt Schrift, Farben und Formen:
 * Jost (dünne, große Überschriften), helles Blaugrau statt Weiß, Navy-Text,
 * Vollbild-Foto im Einstieg, Pill-Buttons, kaum Boxen – Inhalte stehen frei mit feinen Linien.
 */
@import url('fonts/jost.css');

:root{
  --navy:#0E2A52; --navy-2:#0A1F3E; --navy-3:#163A6B;
  --blue:#2D68AE; --blue-light:#9CC0EA; --blue-soft:rgba(45,104,174,0.08);
  --bg:#F3F6F9; --bg-1:#EDF1F6; --bg-2:#E6EBF2;
  --surface:#FFFFFF; --surface-strong:rgba(14,42,82,0.05); --surface-solid:#FFFFFF;
  --border:rgba(14,42,82,0.10); --border-strong:rgba(14,42,82,0.18);
  --text:#172640; --text-dim:#4B5872; --text-dimmer:#7C879B;
  /* Gold-Variablen auf Blau umgelenkt, damit bestehende Bausteine mitziehen */
  --gold:var(--blue); --gold-bright:var(--navy); --gold-deep:var(--blue); --gold-light:#FFFFFF; --gold-mid:var(--blue);
  --gold-soft:var(--blue-soft); --gold-soft-strong:rgba(45,104,174,0.14);
  --navy-glow:var(--navy-3); --navy-glow-2:var(--navy);
  --radius-sm:6px; --radius:10px; --radius-lg:12px;
  --shadow:none; --shadow-lg:0 20px 50px rgba(14,42,82,0.10);
  --sans:'Jost',ui-sans-serif,system-ui,sans-serif;
  --serif:'Jost',ui-sans-serif,system-ui,sans-serif;
}

body{background:var(--bg);font-size:17px;line-height:1.55;}
h1,h2,h3{font-family:var(--sans);font-weight:300;letter-spacing:-.02em;}
h3{font-weight:500;letter-spacing:0;}
.orb,.grain{display:none;}

/* Kleine Versal-Zeile über Überschriften (wie „SALT FACE MIST · 0,5 % SALZ“) */
.eyebrow{font-size:13px;font-weight:500;letter-spacing:3px;color:var(--text-dim);margin-bottom:16px;}
.eyebrow::before{display:none;}
.claim{font-size:13px;font-weight:500;letter-spacing:3px;text-transform:uppercase;line-height:1.6;}

/* Überschriften: groß und dünn */
.hero h1{font-size:clamp(44px,6.6vw,92px);font-weight:300;line-height:1.02;letter-spacing:-.02em;}
.hero h1 .hl,.page-hero h1 .hl{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--blue);font-style:normal;font-weight:300;}
.page-hero h1{font-size:clamp(40px,5.6vw,76px);font-weight:300;line-height:1.04;}
.sec-head h2{font-size:clamp(32px,4.2vw,56px);font-weight:300;letter-spacing:-.02em;line-height:1.08;}
.sec-head p{font-size:17px;}
.stat-num{font-family:var(--sans);font-weight:300;letter-spacing:-.03em;font-size:56px;}

/* Navigation: Wortmarke gesperrt, Links dezent, Pill-Button */
.topnav.scrolled{background:rgba(243,246,249,0.9);}
.wm{font-family:var(--sans);font-size:21px;font-weight:500;letter-spacing:4px;color:var(--navy);}
.wm .wm-ki{color:var(--blue);}
.wm .wm-ki ~ em{font-style:normal;font-weight:500;color:var(--navy);margin-left:0;}
.wm .wm-dot{display:inline-block;width:.24em;height:.24em;border-radius:50%;background:var(--blue);box-shadow:none;margin:0 4px 0 0;vertical-align:middle;}
.brand-mark{background:var(--navy);border-color:var(--navy);border-radius:50%;}
.brand-sub{font-family:var(--sans);letter-spacing:.3px;}
.nav-links a,.nav-tab{font-size:15px;font-weight:400;}
.nav-links > a.active::after,.nav-item.active > .nav-tab::after{background:var(--navy);height:1px;}

/* Buttons: Pill-Form */
.btn{border-radius:999px;font-weight:500;letter-spacing:.3px;padding:12px 24px;font-size:15px;}
.btn-sm{padding:8px 20px;font-size:14px;}
.btn-primary{background:var(--navy);color:#FFFFFF;box-shadow:none;}
.btn-primary:hover{background:var(--navy-3);transform:none;box-shadow:0 10px 26px rgba(14,42,82,.18);}
.btn-ghost{background:transparent;border-color:var(--border-strong);color:var(--text);}
.btn-ghost:hover{background:transparent;border-color:var(--navy);}

/* ── Einstieg als Vollbild-Szene (Startseite) ── */
.hero-scene{position:relative;min-height:100vh;display:flex;align-items:center;padding:150px 0 110px;color:#FFFFFF;
  background:linear-gradient(90deg,rgba(10,31,62,.94) 0%,rgba(10,31,62,.84) 45%,rgba(10,31,62,.45) 66%,rgba(10,31,62,.15) 100%),url('bilder/einstieg.jpg') 70% center/cover no-repeat,url('team-meeting.jpg') 70% center/cover no-repeat;}
.hero-scene .hero-grid{grid-template-columns:1fr;margin-bottom:0;max-width:560px;}
.hero-scene h1{font-size:clamp(42px,4.6vw,70px);}
.hero-scene .hero-photo{display:none;}
.hero-scene h1{color:#FFFFFF;}
.hero-scene h1 .hl{color:var(--blue-light);}
.hero-scene p.lede{color:rgba(255,255,255,.88);font-size:18px;max-width:46ch;text-shadow:0 1px 12px rgba(10,31,62,.5);}
.hero-scene .claim{color:rgba(255,255,255,.88);}
.hero-scene .btn-primary{background:#FFFFFF;color:var(--navy);}
.hero-scene .btn-primary:hover{background:#E8EFF8;}
.hero-scene .btn-ghost{color:#FFFFFF;border-color:rgba(255,255,255,.6);}
.hero-scene .btn-ghost:hover{border-color:#FFFFFF;}
.hero-scene .cobrand .partner-name{color:rgba(255,255,255,.75);}
.hero-scene .cobrand .sep{background:rgba(255,255,255,.35);}
.hero-cockpit{padding:90px 0 40px;}

/* Menü über dem Foto: weiß, bis gescrollt wird */
body.dark-hero .topnav:not(.scrolled) .wm,
body.dark-hero .topnav:not(.scrolled) .wm .wm-ki ~ em,
body.dark-hero .topnav:not(.scrolled) .nav-links a,
body.dark-hero .topnav:not(.scrolled) .nav-tab,
body.dark-hero .topnav:not(.scrolled) .brand-sub{color:#FFFFFF;}
body.dark-hero .topnav:not(.scrolled) .wm .wm-ki{color:var(--blue-light);}
body.dark-hero .topnav:not(.scrolled) .wm .wm-dot{background:var(--blue-light);}
/* Aufklappmenü bleibt weiß mit dunkler Schrift, auch über dem Foto */
body.dark-hero .topnav:not(.scrolled) .nav-links .nav-drop a{color:var(--text-dim);}
body.dark-hero .topnav:not(.scrolled) .nav-links .nav-drop a:hover{color:var(--text);}
body.dark-hero .topnav:not(.scrolled) .brand-mark{background:transparent;border-color:rgba(255,255,255,.5);}
body.dark-hero .topnav:not(.scrolled) .nav-cta .btn-primary{background:transparent;border:1px solid rgba(255,255,255,.85);color:#FFFFFF;}
body.dark-hero .topnav:not(.scrolled) .burger{background:transparent;border-color:rgba(255,255,255,.5);}
body.dark-hero .topnav:not(.scrolled) .burger span,
body.dark-hero .topnav:not(.scrolled) .burger span::before,
body.dark-hero .topnav:not(.scrolled) .burger span::after{background:#FFFFFF;}
body.dark-hero .topnav:not(.scrolled) .nav-links > a.active::after,
body.dark-hero .topnav:not(.scrolled) .nav-item.active > .nav-tab::after{background:#FFFFFF;}

/* ── Inhalte ohne Kästen: frei stehend mit feiner Linie oben ── */
.stat-card,.concept-card,.step-card,.split-card{
  --text:#172640; --text-dim:#4B5872; --text-dimmer:#7C879B;
  --border:rgba(14,42,82,0.10); --border-strong:rgba(14,42,82,0.18);
  --surface:transparent; --surface-strong:rgba(14,42,82,0.05);
  --gold:var(--blue); --gold-bright:var(--navy); --gold-deep:var(--blue); --gold-mid:var(--blue);
  --gold-soft:var(--blue-soft); --gold-soft-strong:rgba(45,104,174,0.14);
  --green:#1E8A5F; --green-soft:rgba(30,138,95,0.10);
  background:transparent !important;color:var(--text);
  border:0;border-top:1px solid var(--border-strong);border-radius:0;box-shadow:none;padding:24px 0 0;
}
.stat-card:hover,.concept-card:hover,.split-card:hover{transform:none;border-color:var(--navy);}
.concept-icon,.split-icon{background:transparent;border:1px solid var(--border-strong);border-radius:50%;}
.step-card.final{border-top-color:var(--navy);box-shadow:none;}
.step-num{background:transparent;border-color:var(--border-strong);color:var(--navy);font-family:var(--sans);font-weight:400;}
.step-card.final .step-num{background:var(--navy);border-color:var(--navy);color:#FFFFFF;}
.split-card.accent{background:transparent !important;border-top-color:var(--navy);}
.faq details{background:transparent;border:0;border-bottom:1px solid var(--border-strong);border-radius:0;box-shadow:none;
  --text:#172640; --text-dim:#4B5872; --border:rgba(14,42,82,0.10); --border-strong:rgba(14,42,82,0.18); --gold:var(--blue);}

/* ── Navy-Szenen: wenige, große dunkle Flächen ── */
.calc-panel,.final-cta,.glass-panel,.why-panel,.mentor-main,.diff-panel{
  --text:#F2F5FA; --text-dim:#B3C2D8; --text-dimmer:#8295B0;
  --border:rgba(255,255,255,0.10); --border-strong:rgba(255,255,255,0.18);
  --gold:var(--blue-light); --gold-bright:#FFFFFF; --gold-deep:var(--blue-light); --gold-mid:var(--blue-light);
  --gold-soft:rgba(156,192,234,0.12); --gold-soft-strong:rgba(156,192,234,0.22);
  background:linear-gradient(160deg,var(--navy-3),var(--navy-2)) !important;border:0;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);color:#F2F5FA;
}
.calc-panel::before{background:radial-gradient(circle,rgba(156,192,234,.14),transparent 70%);}
.calc-row{background:rgba(255,255,255,.03);}
.calc-row.hi{background:linear-gradient(90deg,rgba(78,217,160,.10),rgba(78,217,160,.03));}
.why-cell{background:transparent;}
.calc-panel input[type="range"]::-webkit-slider-thumb{background:#FFFFFF;border-color:var(--navy);}
.final-cta .btn-primary,.calc-panel .btn-primary,.mentor-main .btn-primary,.diff-panel .btn-primary,.why-panel .btn-primary{background:#FFFFFF;color:var(--navy);}
.final-cta .btn-ghost,.calc-panel .btn-ghost,.mentor-main .btn-ghost,.diff-panel .btn-ghost{color:#FFFFFF;border-color:rgba(255,255,255,.4);}
.hero-photo-badge{background:rgba(10,31,62,.85);color:#FFFFFF;border:0;}

/* Fotos: leicht gerundet, ohne Rahmen */
.hero-photo,.person-photo{border-radius:var(--radius-lg);border:0;}
.hero-photo::after{display:none;}
.person-quote{background:var(--navy);color:#FFFFFF;border-radius:var(--radius);}
.person-quote::before{color:var(--blue-light);font-family:var(--sans);}
.person-role,.team-role{color:var(--blue);font-weight:400;}
.team-photo{font-family:var(--sans);font-weight:300;color:var(--navy);}
.mentor-card,.mentor-band{background:transparent;border:0;border-top:1px solid var(--border-strong);border-left:0;border-radius:0;box-shadow:none;padding-left:0;}
.mentor-icon{background:transparent;border:1px solid var(--border-strong);border-radius:50%;}
.mentor-num{font-family:var(--sans);font-weight:300;color:#FFFFFF;}
.mentor-label,.mentor-band-label{letter-spacing:3px;}
.mentor-label{color:var(--blue-light);}
.mentor-band-label{color:var(--text-dim);}
.ms-n{font-family:var(--sans);background:rgba(156,192,234,.12);border-color:rgba(156,192,234,.45);color:#FFFFFF;}
.mentor-steps strong{color:#FFFFFF;}
.mentor-num span,.mentor-sub,.mentor-steps li{color:#B3C2D8;}

/* Goldtöne, die fest in Logo und Grafiken stehen, auf Blau/Weiß umstellen */
.brand-mark svg [fill="#E9CE9C"]{fill:#FFFFFF;}
.brand-mark svg [stroke="#E9CE9C"]{stroke:var(--blue-light);}
svg [stop-color="#C8A96E"],svg [stop-color="#E9CE9C"]{stop-color:var(--blue-light);}
.chart-wrap svg [stroke="#E9CE9C"],.chart-wrap svg [stroke="#C8A96E"]{stroke:var(--blue-light);}
.chart-wrap svg [fill="#E9CE9C"]{fill:var(--blue-light);}

/* Co-Branding */
.cobrand{display:flex;align-items:center;gap:20px;margin:0 0 30px;}
.cobrand .sep{width:1px;height:30px;background:var(--border-strong);}
.cobrand .partner-name{font-size:13px;color:var(--text-dim);letter-spacing:.3px;}
.cobrand .partner-logo{height:32px;width:auto;}

/* Werte-Band */
.values-band{background:var(--navy);color:#FFFFFF;padding:52px 0;}
.values-band .wrap{display:grid;grid-template-columns:1.1fr 2fr;gap:40px;align-items:center;}
.values-words{font-size:clamp(24px,2.8vw,34px);font-weight:300;line-height:1.3;letter-spacing:-.01em;}
.values-icons{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.values-icons div{display:flex;flex-direction:column;gap:10px;font-size:14px;color:#C9D6E8;}
.values-icons svg{width:28px;height:28px;stroke:#FFFFFF;}

/* Fußzeile */
.site-foot{border-top:1px solid var(--border-strong);}
.foot-partner{display:inline-flex;align-items:center;gap:10px;margin-right:22px;font-size:13px;color:var(--text-dimmer);}
.foot-partner img{height:18px;width:auto;}

@media(max-width:820px){
  .values-band .wrap{grid-template-columns:1fr;}
  .values-icons{grid-template-columns:repeat(3,1fr);}
  .hero-scene{min-height:auto;padding:130px 0 80px;background:linear-gradient(180deg,rgba(10,31,62,.80),rgba(10,31,62,.70)),url('bilder/einstieg.jpg') center/cover no-repeat,url('team-meeting.jpg') center/cover no-repeat;}
}
@media(max-width:600px){
  .hero-scene .hero-copy{text-align:left;}
  .hero-scene .hero-ctas{justify-content:flex-start;}
  .cobrand{flex-wrap:wrap;gap:12px;}
  .foot-partner{margin:0 0 8px;display:flex;justify-content:center;}
}
.glass-panel .cm-cell{background:rgba(255,255,255,.04);}
.glass-panel .cockpit-metrics{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.08);}

/* ── Bildplätze: Bild aus assets/bilder/, sonst dezenter Platzhalter mit Dateiname ── */
.img-slot{position:relative;margin:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-2);}
.img-slot img{display:block;width:100%;height:100%;object-fit:cover;}
.img-slot.empty img{visibility:hidden;}
.img-slot.empty::after{content:attr(data-label) "\A" "assets/bilder/" attr(data-file);white-space:pre;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:13px;line-height:1.6;color:var(--text-dimmer);border:1px dashed var(--border-strong);border-radius:inherit;padding:12px;
  background:linear-gradient(160deg,var(--bg-1),var(--bg-2));}
.img-slot figcaption{font-size:14px;color:var(--text-dim);padding-top:10px;background:var(--bg);}

/* Abschnitt „Ein Gespräch. Klare Zahlen. Eine Entscheidung.“ (wie Saléas Produkt-Einführung) */
.scene-intro{padding:120px 0 40px;}
.si-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:80px;align-items:start;}
.si-main{aspect-ratio:4/5;}
.si-copy h2{font-size:clamp(34px,4vw,52px);font-weight:300;line-height:1.08;margin-bottom:22px;}
.si-lede{font-size:17px;color:var(--text-dim);margin:0 0 30px;max-width:48ch;}
.si-features{display:grid;grid-template-columns:1fr 1fr;gap:26px 34px;border-top:1px solid var(--border-strong);padding-top:28px;margin-bottom:36px;}
.si-features b{display:block;font-weight:500;font-size:15.5px;margin-bottom:4px;}
.si-features span{font-size:14.5px;color:var(--text-dim);line-height:1.55;}
.si-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.si-thumbs .img-slot{overflow:visible;background:none;}
.si-thumbs .img-slot img{aspect-ratio:3/4;border-radius:var(--radius);}
.si-thumbs .img-slot.empty::after{bottom:34px;border-radius:var(--radius);}
@media(max-width:900px){
  .si-grid{grid-template-columns:1fr;gap:40px;}
  .si-main{aspect-ratio:4/3;}
}
@media(max-width:560px){
  .si-features{grid-template-columns:1fr;}
  .si-thumbs{grid-template-columns:repeat(3,1fr);gap:8px;}
  .si-thumbs .img-slot figcaption{font-size:12px;}
}
.img-slot figcaption small{display:block;font-size:13px;color:var(--text-dimmer);margin-top:1px;}
.team-photo{overflow:hidden;}
.team-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;}

/* Über uns: Ansprechpartner (Foto links, Text und Eckdaten rechts) */
.me-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.me-photo{position:relative;margin:0;border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:var(--bg-2)}
.me-photo img{width:100%;height:100%;object-fit:cover;display:block}
.me-photo figcaption{position:absolute;left:16px;bottom:16px;background:rgba(14,42,82,.88);color:#fff;border-radius:10px;padding:10px 14px;line-height:1.3}
.me-photo figcaption b{display:block;font-weight:600}
.me-photo figcaption span{font-size:12.5px;color:var(--blue-light)}
.me-h{font-size:clamp(28px,3.6vw,44px);line-height:1.08;letter-spacing:-.02em;margin-bottom:18px}
.me-lede{color:var(--text-dim);font-size:17px;line-height:1.7;margin-bottom:18px}
.me-p{color:var(--text);font-size:16px;line-height:1.7;margin-bottom:26px}
.me-facts{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.me-facts>div{border-top:1px solid var(--border-strong);padding:16px 0;font-size:15.5px;line-height:1.5}
.me-facts span{display:block;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px}
.me-facts a{color:var(--navy)}
.me-quote{position:relative;margin:0;padding:26px 30px 26px 34px;border-radius:14px;background:linear-gradient(160deg,var(--navy-3),var(--navy) 60%,var(--navy-2));overflow:hidden}
.me-quote::before{content:"“";position:absolute;right:18px;top:-6px;font-family:Georgia,serif;font-size:110px;line-height:1;color:var(--blue-light);opacity:.35}
.me-quote blockquote{position:relative;margin:0;font-size:clamp(20px,2vw,24px);line-height:1.35;letter-spacing:-.01em;color:#fff}
.me-quote blockquote span{display:block;color:var(--blue-light);margin-top:.2em}
@media (max-width:900px){.me-grid{grid-template-columns:1fr;gap:36px}.me-photo{max-width:420px}}
@media (max-width:640px){.me-facts{grid-template-columns:1fr}}

/* Über uns: Leitsatz als ruhiges Zitatband zwischen Profil und Team */
.quote-band{position:relative;overflow:hidden;padding:96px 0;background:linear-gradient(160deg,var(--navy-3),var(--navy) 50%,var(--navy-2));color:#F2F5FA}
.quote-band::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 85% 0%,rgba(156,192,234,.18),transparent 70%);pointer-events:none}
.qb{position:relative;max-width:900px;margin:0 auto;text-align:center}
.qb-mark{display:block;font-size:140px;line-height:.6;height:56px;color:var(--blue-light);opacity:.55;font-family:Georgia,serif}
.qb blockquote{margin:0;font-size:clamp(26px,3.6vw,44px);font-weight:400;line-height:1.25;letter-spacing:-.01em;color:#fff}
.qb blockquote span{display:block;color:var(--blue-light);margin-top:.25em}
.qb figcaption{display:inline-flex;align-items:center;gap:14px;margin-top:40px;text-align:left}
.qb figcaption img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:2px solid rgba(156,192,234,.5)}
.qb figcaption b{display:block;font-weight:600;color:#fff;font-size:15px}
.qb figcaption span{font-size:13px;color:#B3C2D8;letter-spacing:.04em}
@media (max-width:640px){.quote-band{padding:64px 0}.qb-mark{font-size:100px;height:40px}}

/* ── Startseite: Erklärfilm, Beispielrechnung, Vergleich, 30 Jahre, Arbeitgeber, KI-Mentoring, Kontaktformular ── */
/* Erklärfilm */
.film-frame{max-width:980px;margin:0 auto;aspect-ratio:16/9;border-radius:16px;overflow:hidden;box-shadow:0 30px 70px rgba(14,42,82,.25);background:#0E2A52}
.film-frame iframe{width:100%;height:100%;border:0;display:block}

/* Gemeinsame Typo für neue Zweispalter */
.ex-h{font-size:clamp(28px,3.6vw,44px);line-height:1.08;letter-spacing:-.02em;margin-bottom:18px}
.ex-p{color:var(--text-dim);font-size:17px;line-height:1.7;margin-bottom:18px}
.ex-quote{border-left:3px solid var(--blue);padding:4px 0 4px 18px;font-size:clamp(20px,2.2vw,26px);font-weight:600;line-height:1.3;margin:24px 0 18px}
.ex-quote s{color:var(--text-dimmer);text-decoration-thickness:2px}
.ex-quote b{color:var(--blue);font-weight:600}
.ex-fine{color:var(--text-dimmer);font-size:13px;line-height:1.6}
.pos{color:var(--blue)}

/* Beispielrechnung */
.ex-grid,.ag-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.slip{background:#fff;border:1px solid var(--border);border-radius:16px;padding:30px 30px 26px;box-shadow:0 24px 60px rgba(14,42,82,.10)}
.slip-h{display:flex;justify-content:space-between;gap:12px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);padding-bottom:14px;border-bottom:1px dashed var(--border-strong)}
.slip-l{display:flex;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--border);font-size:16px}
.slip-l b{font-weight:600;white-space:nowrap}
.slip-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.slip-t{background:#EDF1F6;border-radius:12px;padding:16px 18px}
.slip-t span{font-size:12.5px;color:var(--text-dim)}
.slip-t b{display:block;font-size:clamp(26px,3vw,34px);font-weight:600;margin-top:4px;letter-spacing:-.01em}
.slip-t.dk{background:var(--navy);color:#fff}.slip-t.dk span{color:var(--blue-light)}
.slip-bar{display:flex;gap:3px;height:12px;margin-top:20px;border-radius:999px;overflow:hidden}
.slip-bar i:nth-child(1){background:var(--navy)}.slip-bar i:nth-child(2){background:#9AA8BE}.slip-bar i:nth-child(3){background:var(--blue)}
.slip-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:12.5px;color:var(--text-dim)}
.slip-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.slip-legend span:nth-child(1) i{background:var(--navy)}.slip-legend span:nth-child(2) i{background:#9AA8BE}.slip-legend span:nth-child(3) i{background:var(--blue)}

/* Vergleichstabelle */
.cmp{max-width:1000px;margin:0 auto;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--border)}
.cmp-row{display:grid;grid-template-columns:.7fr 1.15fr 1.15fr;border-top:1px solid var(--border)}
.cmp-row>span{padding:20px 24px;font-size:15.5px;line-height:1.5}
.cmp-head{border-top:0}
.cmp-head>span{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim)}
.cmp-head .cmp-ki{color:#fff;font-size:20px;letter-spacing:0;text-transform:none}
.cmp-k{font-weight:600}
.cmp-old{color:var(--text-dimmer);text-decoration:line-through;text-decoration-color:rgba(14,42,82,.25)}
.cmp-ki{background:var(--navy);color:#F2F5FA;display:flex;gap:12px;align-items:flex-start}
.cmp-ki i{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--blue-light);color:var(--blue-light);font-style:normal;font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.cmp-row:not(.cmp-head) .cmp-ki{border-top:1px solid rgba(255,255,255,.08)}
.cmp-sum>span{padding-top:24px;padding-bottom:24px}
.cmp-old-n{font-size:clamp(20px,2.4vw,28px);font-weight:600;color:var(--text-dim)}
.cmp-n{font-size:clamp(22px,2.8vw,34px)!important;font-weight:600;color:var(--blue-light)!important}
.cmp-fine{max-width:1000px;margin:14px auto 0;text-align:center;font-size:12.5px;color:var(--text-dimmer)}

/* Nach 30 Jahren (dunkle Sektion) */
.sec-dark{background:linear-gradient(160deg,var(--navy-3),var(--navy) 45%,var(--navy-2));color:#F2F5FA}
.sec-dark .eyebrow{color:var(--blue-light)}.sec-dark .eyebrow::before{background:var(--blue-light)}
.yr-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.yr-h{font-size:clamp(30px,3.8vw,48px);line-height:1.06;letter-spacing:-.02em;color:#fff;margin-bottom:26px}
.yr-lbl{color:#B3C2D8;font-size:15px}
.yr-big{white-space:nowrap;font-size:clamp(36px,4.6vw,64px);font-weight:600;letter-spacing:-.03em;color:var(--blue-light);line-height:1.05;margin:6px 0 22px}
.yr-row{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid rgba(255,255,255,.12);font-size:15.5px;color:#D7E1EF}
.yr-row b{font-weight:600;color:#fff;white-space:nowrap}
.yr-row.dim,.yr-row.dim b{color:#8295B0}
.yr-link{display:inline-block;margin-top:22px;color:var(--blue-light);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.yr-chart{position:relative;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:22px 22px 16px}
.yr-chart-h{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#B3C2D8;margin-bottom:14px}
.yr-leg{letter-spacing:0;text-transform:none;font-weight:400;display:flex;align-items:center;gap:6px}
.yr-leg i{display:inline-block;width:16px;height:3px;border-radius:2px;margin-left:8px}
.yr-leg .l10{background:var(--blue-light)}.yr-leg .l6{background:#5E86BD}.yr-leg .l0{background:#8295B0}
.yr-chart svg{width:100%;height:280px;display:block;overflow:visible}
.yr-chart .gl{stroke:rgba(255,255,255,.08);stroke-width:1}
.yr-chart .gt{fill:#8295B0;font-size:11px}
.yr-chart path{fill:none;stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.yr-chart.in path{transition:stroke-dashoffset 2.2s ease-in-out}
.yr-chart.in path{stroke-dashoffset:0}
.yr-chart .l10{stroke:var(--blue-light);stroke-width:3}.yr-chart .l6{stroke:#5E86BD;transition-delay:.3s!important}.yr-chart .l0{stroke:#8295B0;transition-delay:.6s!important}
.yr-x{display:flex;justify-content:space-between;font-size:12px;color:#8295B0;margin-top:8px}
.yr-badge{position:absolute;left:84px;top:64px;background:rgba(10,31,62,.85);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:10px 14px;font-size:13px;color:#D7E1EF}
.yr-badge b{color:var(--blue-light);font-size:18px;margin-right:4px}
.yr-fine{margin-top:34px;font-size:12.5px;line-height:1.6;color:#8295B0;max-width:820px}

/* Für Arbeitgeber */
.ag-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:28px 30px;box-shadow:0 24px 60px rgba(14,42,82,.10)}
.ag-h{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);margin-bottom:18px}
.ag-l{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:16px;margin-top:14px}
.ag-l b{font-size:clamp(22px,2.4vw,28px);font-weight:600;white-space:nowrap}
.ag-tr{height:10px;background:#EDF1F6;border-radius:999px;margin-top:10px;overflow:hidden}
.ag-tr i{display:block;height:100%;border-radius:999px;background:var(--blue)}
.ag-tr i.dk{background:var(--navy)}
.ag-foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--border);font-weight:600;line-height:1.5}
.ag-points{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:64px}
.ag-points>div{border-top:1px solid var(--border-strong);padding-top:20px}
.ag-points span{font-size:13px;font-weight:600;color:var(--blue);letter-spacing:.08em}
.ag-points h3{font-size:19px;line-height:1.3;margin:10px 0 10px}
.ag-points p{color:var(--text-dim);font-size:15px;line-height:1.65}

/* KI-Mentoring */
.km-grid{max-width:820px}
.km-sub{color:var(--blue);font-weight:500}
.km-list{list-style:none;padding:0;margin:0 0 26px}
.km-list li{position:relative;padding:8px 0 8px 34px;font-size:17px;font-weight:500}
.km-list li::before{content:"✓";position:absolute;left:0;top:8px;width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}

/* Erstgespräch */
.ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.ct-p{color:#D7E1EF;font-size:17px;line-height:1.7;margin-bottom:22px}
.ct-list{list-style:none;padding:0;margin:0 0 30px}
.ct-list li{position:relative;padding:8px 0 8px 34px;font-size:16.5px;color:#fff}
.ct-list li::before{content:"✓";position:absolute;left:0;top:8px;width:22px;height:22px;border-radius:50%;background:var(--blue-light);color:var(--navy);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.ct-me{display:flex;gap:16px;align-items:center;border-top:1px solid rgba(255,255,255,.14);padding-top:22px}
.ct-me img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none}
.ct-me p{color:#B3C2D8;font-size:14.5px;line-height:1.6}
.ct-me a,.ct-c a{color:var(--blue-light)}
.ct-form{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:30px}
.ct-form h3{font-size:26px;color:#fff;margin-bottom:6px}
.ct-small{font-size:13.5px;color:#B3C2D8;line-height:1.5;margin-bottom:18px}
.ct-form label{display:block;font-size:14px;font-weight:600;color:#fff;margin-bottom:14px}
.ct-form em,.ct-lbl em{font-style:normal;font-weight:400;color:#8295B0}
.ct-form input:not([type=checkbox]),.ct-form select{display:block;width:100%;margin-top:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:12px 14px;color:#fff;font:inherit;font-weight:400}
.ct-form select option{color:#172640}
.ct-form input:focus,.ct-form select:focus{outline:2px solid var(--blue-light);outline-offset:1px}
.ct-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ct-lbl{font-size:14px;font-weight:600;color:#fff;margin-bottom:8px}
.ct-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.ct-chips label{margin:0;font-weight:400}
.ct-chips input{position:absolute;opacity:0;pointer-events:none}
.ct-chips span{display:inline-block;border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:9px 14px;font-size:14px;cursor:pointer;color:#D7E1EF}
.ct-chips input:checked+span{background:var(--blue-light);border-color:var(--blue-light);color:var(--navy);font-weight:600}
.ct-chips input:focus-visible+span{outline:2px solid var(--blue-light);outline-offset:2px}
.ct-err{color:#FFB4A8;font-size:13.5px;margin-top:10px}
.ct-c{margin:14px 0 0;text-align:center}
@media (max-width:900px){
  .ex-grid,.ag-grid,.yr-grid,.ct-grid{grid-template-columns:1fr;gap:36px}
  .ag-points{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .cmp-row{grid-template-columns:1fr 1fr}
  .cmp-row>.cmp-k{grid-column:1/-1;padding-bottom:4px;border-bottom:0}
  .cmp-head>span:first-child{display:none}
  .cmp-row>span{padding:14px 16px;font-size:14.5px}
  .ag-points,.ct-2,.slip-tiles{grid-template-columns:1fr}
  .yr-badge{position:static;margin-top:12px;display:inline-block}
  .yr-chart svg{height:220px}
  .slip{padding:22px 18px}
}
.sec-dark .btn-primary{background:#fff;color:var(--navy);box-shadow:none}
.sec-dark .btn-primary:hover{background:var(--blue-light)}
.ct-page{padding-top:170px;min-height:100vh}
@media (max-width:640px){.ct-page{padding-top:120px}}
.slip-h{flex-wrap:wrap;row-gap:4px}
.slip-h span{white-space:nowrap}
/* KI-Kennzeichnung (EU-KI-Verordnung, Transparenz) */
.hero-scene,.img-slot{position:relative}
.ai-note{position:absolute;right:12px;bottom:12px;z-index:3;font-size:10.5px;letter-spacing:.02em;color:rgba(255,255,255,.85);background:rgba(10,31,62,.55);padding:3px 8px;border-radius:999px;pointer-events:none}
.ai-note-hero{right:16px;bottom:16px}
.film-note{text-align:center;font-size:12px;color:var(--text-dimmer);margin-top:12px}
/* Handy: lange Wörter in Überschriften trennen, Logo nicht abschneiden */
@media (max-width:640px){h1,h2{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}}
@media (max-width:400px){.nav-cta .btn-sm{padding:8px 11px;font-size:11.5px}.nav-cta{gap:6px}}
.ct-small a{color:var(--blue-light)}
.legal .muted{color:var(--text-dimmer);font-size:13px}
.legal ul{padding-left:20px;margin:0 0 16px}
.legal li{margin:4px 0;line-height:1.6}
/* Menü: Einträge nie umbrechen, bei mittlerer Breite enger, darunter Burger-Menü */
.nav-links a,.nav-links .nav-tab{white-space:nowrap}
@media (max-width:1180px){.nav-links{gap:20px}.brand-text .brand-sub{display:none}}
@media (max-width:1000px){.nav-links{display:none}.burger{display:flex}}
/* Zwei Karten nebeneinander (Für Unternehmen / Für Mitarbeiter): Beschreibung, Listenpunkte und Button zeilengleich */
@media (min-width:921px){
  .split-grid{grid-template-rows:repeat(9,auto);row-gap:0}
  .split-grid > .split-card{display:grid;grid-row:span 9;grid-template-rows:subgrid;align-content:start}
  .split-grid > .split-card > .split-list{display:contents}
  .split-grid .split-item{margin-bottom:14px}
  .split-grid .split-item:last-child{margin-bottom:28px}
  .split-grid > .split-card > .btn{align-self:end}
}