:root{
  --bg:#F6F6F4;
  --bg-soft:#FFFFFF;
  --bg-tint:#EFEFE9;
  --line:#E4E2D8;
  --line-strong:#D4D1C1;
  --ink:#111A22;
  --ink-2:#19272E;
  --ink-mute:#5A6470;
  --primary:#183D6A;
  --primary-deep:#0F3144;
  --primary-soft:#E8EEF6;
  --gold:#C2A677;
  --gold-deep:#A88A56;
  --gold-soft:#F5EEE0;
  --radius:10px;
  --radius-lg:18px;
  --container:1200px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --sans:"Roboto",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --display:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-y:scroll;scrollbar-gutter:stable}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  font-weight:400;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.container{max-width:var(--container);margin:0 auto;padding:0 28px}

/* ───── Premium Opener (Header + Hero + Logos on dark blue) ───── */
.opener{
  position:relative;
  background:linear-gradient(180deg,#0A1D3A 0%,#0F2B52 100%);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
/* Gold/Mint-Glow (sitewide-Standard, übernommen aus optimus-ai .oai2-hero) */
.opener::before{
  content:"";position:absolute;inset:-20%;z-index:-2;
  background:
    radial-gradient(circle at 85% 15%,rgba(194,166,119,.16),transparent 55%),
    radial-gradient(circle at 12% 85%,rgba(78,204,163,.10),transparent 55%),
    radial-gradient(50% 50% at 60% 40%,rgba(36,86,148,.28),transparent 70%);
  filter:blur(38px) saturate(120%);
  animation:meshShift 24s ease-in-out infinite alternate;
}
@keyframes meshShift{
  0%   {transform:translate(0,0) rotate(0deg) scale(1)}
  33%  {transform:translate(-3%,2%) rotate(2deg) scale(1.05)}
  66%  {transform:translate(2%,-2%) rotate(-1deg) scale(1.02)}
  100% {transform:translate(-1%,3%) rotate(1deg) scale(1.06)}
}
/* Subtle grid overlay — disabled on request (May 2026) */
.opener::after{display:none}

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:22px 0;
  transition:padding .35s var(--ease),background .35s,box-shadow .35s,border-color .35s,backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(15,43,82,.85);
  backdrop-filter:saturate(180%) blur(18px);
  border-bottom-color:rgba(255,255,255,.08);
  padding:14px 0;
}
@media(max-width:820px){
  .site-header{padding:14px 0}
  .site-header.scrolled{padding:10px 0}
}
@media(max-width:560px){
  .site-header{padding:10px 0}
  .site-header.scrolled{padding:8px 0}
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{
  font-weight:700;font-size:17px;letter-spacing:-.01em;
  display:flex;align-items:center;gap:12px;color:#fff;
  font-family:var(--display);
}
.logo-mark{
  width:40px;height:40px;
  display:block;
  filter:invert(1) brightness(2);
  transition:filter .3s var(--ease),transform .3s var(--ease);
}
.logo:hover .logo-mark{transform:rotate(-12deg)}
.nav-links{display:flex;gap:34px;list-style:none}
.nav-links a{
  font-size:14px;color:rgba(255,255,255,.78);
  font-weight:500;letter-spacing:.005em;
  transition:color .2s;position:relative;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{transform:scaleX(1)}
/* Aktiver Navi-Zustand (gold) – gesetzt via site.js */
.nav-links a.is-active,
.nav-links a[aria-current="page"]{color:var(--gold)}
.nav-links a.is-active::after,
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-links .sub a.is-active,
.nav-links .sub a[aria-current="page"]{background:rgba(194,166,119,.12);color:var(--gold)}
.nav-cta{
  padding:13px 24px;border-radius:6px;
  background:var(--gold);
  color:var(--ink);font-size:14px;font-weight:700;letter-spacing:.005em;
  transition:background .2s,transform .2s var(--ease),box-shadow .25s;
  border:1px solid var(--gold);
  box-shadow:0 8px 24px rgba(194,166,119,.25);
  white-space:nowrap;
  flex-shrink:0;
  line-height:1.2;
}
.nav-cta:hover{background:#d4ba8e;border-color:#d4ba8e;transform:translateY(-2px);box-shadow:0 12px 30px rgba(194,166,119,.4)}

/* Navi rechtsbündig + Dropdown „Unternehmen" (sitewide) */
.nav-links{margin-left:auto;margin-right:28px}
.nav-links .has-sub{position:relative}
.nav-links .has-sub > a{cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.nav-links .has-sub .caret{font-size:10px;transition:transform .25s var(--ease)}
.nav-links .has-sub:hover .caret,
.nav-links .has-sub:focus-within .caret{transform:rotate(180deg)}
.nav-links .has-sub::after{content:"";position:absolute;top:100%;left:-12px;right:-12px;height:16px}
.nav-links .sub{
  position:absolute;top:calc(100% + 10px);left:50%;
  transform:translateX(-50%) translateY(6px);
  min-width:190px;list-style:none;padding:8px;margin:0;
  background:#0C1F3A;border:1px solid rgba(255,255,255,.12);border-radius:12px;
  box-shadow:0 24px 50px -18px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease);z-index:60;
}
.nav-links .has-sub:hover .sub,
.nav-links .has-sub:focus-within .sub{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.nav-links .sub li{display:block}
.nav-links .sub a{display:block;padding:9px 14px;border-radius:8px;font-size:14px;color:rgba(255,255,255,.82);white-space:nowrap}
.nav-links .sub a::after{display:none}
.nav-links .sub a:hover{background:rgba(255,255,255,.08);color:#fff}

/* Gold-Button mit Glaseffekt im Dropdown (29.07.2026, „Agent Ready? Check!").
   Hoehere Spezifitaet als .nav-links .sub a, damit die seiteneigenen
   Inline-Kopien der Dropdown-Stile ihn nicht ueberschreiben. */
.nav-links .sub li.nav-sub-cta-item{margin:7px 2px 2px;padding-top:8px;border-top:1px solid rgba(255,255,255,.14)}
.nav-links .sub a.nav-sub-cta{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:6px;padding:11px 16px;border-radius:9px;
  background:linear-gradient(135deg,rgba(212,186,142,.88),rgba(168,138,86,.88));
  -webkit-backdrop-filter:blur(12px) saturate(170%);backdrop-filter:blur(12px) saturate(170%);
  border:1px solid rgba(255,255,255,.42);
  color:#0E2140;font-size:13.5px;font-weight:700;letter-spacing:.005em;text-align:center;
  box-shadow:0 10px 24px -10px rgba(194,166,119,.6),inset 0 1px 0 rgba(255,255,255,.5);
  transition:background .25s var(--ease),transform .2s var(--ease),box-shadow .25s var(--ease);
}
.nav-links .sub a.nav-sub-cta::after{content:"→";font-size:13px;transition:transform .25s var(--ease)}
.nav-links .sub a.nav-sub-cta:hover{
  background:linear-gradient(135deg,rgba(226,203,163,.94),rgba(194,166,119,.94));
  color:#0E2140;transform:translateY(-1px);
  box-shadow:0 14px 30px -10px rgba(194,166,119,.75),inset 0 1px 0 rgba(255,255,255,.6);
}
.nav-links .sub a.nav-sub-cta:hover::after{transform:translateX(3px)}
.nav-links .sub a.nav-sub-cta:focus-visible{outline:2px solid #fff;outline-offset:2px}
.nav-links .sub a.nav-sub-cta.is-active,
.nav-links .sub a.nav-sub-cta[aria-current="page"]{
  background:linear-gradient(135deg,rgba(226,203,163,.96),rgba(194,166,119,.96));color:#0E2140}
@media(prefers-reduced-motion:reduce){
  .nav-links .sub a.nav-sub-cta,.nav-links .sub a.nav-sub-cta::after{transition:none}
  .nav-links .sub a.nav-sub-cta:hover{transform:none}
}

@media(max-width:920px){.nav-links{display:none}}
@media(max-width:560px){
  .nav{gap:12px}
  .nav-cta{padding:11px 16px;font-size:13px}
  .logo{font-size:15px;gap:10px}
  .logo-mark{width:34px;height:34px}
}
@media(max-width:400px){
  .nav-cta{font-size:0;padding:11px 14px;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;position:relative}
  .nav-cta::before{content:"Termin";font-size:13px;font-weight:700}
}

/* ───── Hero ───── */
.hero{
  padding:190px 0 120px;
  position:relative;
}
@media(max-width:820px){
  .hero{padding:152px 0 80px}
}
@media(max-width:560px){
  .hero{padding:150px 0 60px}
}
.hero-grid{
  position:relative;
  display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:center;
}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:56px}}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 18px;border-radius:999px;
  background:rgba(194,166,119,.12);
  border:1px solid rgba(194,166,119,.4);
  color:var(--gold);
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:32px;
}
.eyebrow .dot{
  width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 0 rgba(194,166,119,.6);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(194,166,119,.6)}
  70%{box-shadow:0 0 0 12px rgba(194,166,119,0)}
  100%{box-shadow:0 0 0 0 rgba(194,166,119,0)}
}

h1.hero-title{
  font-family:var(--display);
  font-size:clamp(22px,2.6vw,32px);
  line-height:1.2;
  letter-spacing:-.01em;
  font-weight:600;
  color:#aa8e5f;
  margin-bottom:28px;
  text-wrap:balance;
  max-width:560px;
}
.hero-title em{
  font-style:normal;
  font-weight:900;
  color:#a18b65;
  position:relative;
  display:block;
  font-size:clamp(46px,6.4vw,82px);
  line-height:1;
  letter-spacing:-.015em;
  margin-top:10px;
}
.hero-sub{
  font-size:clamp(17px,1.4vw,20px);
  color:rgba(255,255,255,.78);
  max-width:580px;
  margin-bottom:40px;
  font-weight:400;
  line-height:1.6;
}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:48px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:17px 30px;border-radius:6px;
  font-size:15px;font-weight:700;letter-spacing:.005em;
  transition:transform .2s var(--ease),background .2s,border-color .2s,color .2s,box-shadow .25s;
  border:1px solid transparent;
  font-family:var(--sans);
}
.btn-primary{
  background:var(--gold);color:var(--ink);
  border-color:var(--gold);
  box-shadow:0 10px 28px rgba(194,166,119,.3);
}
.btn-primary:hover{background:#d4ba8e;border-color:#d4ba8e;transform:translateY(-2px);box-shadow:0 14px 36px rgba(194,166,119,.45)}
.btn-primary .arrow{transition:transform .25s var(--ease);display:inline-block}
.btn-primary:hover .arrow{transform:translateX(4px)}
.btn-ghost{
  border-color:rgba(255,255,255,.3);background:transparent;
  color:#fff;
}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);transform:translateY(-1px)}
/* On light sections */
.section-light .btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 10px 28px rgba(24,61,106,.22)}
.section-light .btn-primary:hover{background:var(--primary-deep);border-color:var(--primary-deep);box-shadow:0 14px 36px rgba(24,61,106,.32)}
.section-light .btn-ghost{border-color:var(--line-strong);color:var(--ink)}
.section-light .btn-ghost:hover{border-color:var(--primary);color:var(--primary);background:transparent}
/* Hero-CTA im dunklen Opener/Hero: Glas-Sheen + Gold-Glow (sitewide) */
.opener .btn-primary,.hero .btn-primary{
  background:
    linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 48%),
    linear-gradient(135deg,#D8BE86 0%,var(--gold) 45%,#B99A64 100%);
  border-color:rgba(255,255,255,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 42px rgba(194,166,119,.38),0 16px 34px rgba(194,166,119,.34);
}
.opener .btn-primary:hover,.hero .btn-primary:hover{
  background:
    linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 48%),
    linear-gradient(135deg,#E7D199 0%,#d4ba8e 45%,#C2A677 100%);
  border-color:rgba(255,255,255,.42);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 56px rgba(194,166,119,.5),0 20px 42px rgba(194,166,119,.45);
}

.hero-trust{
  display:flex;gap:22px;align-items:center;
  font-size:12px;color:rgba(255,255,255,.65);
  flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:24px;
  letter-spacing:.005em;
}
.hero-trust .item{display:flex;align-items:center;gap:6px;white-space:nowrap}
.hero-trust strong{color:#fff;font-weight:700}
.stars{display:inline-flex;gap:1px;color:var(--gold);font-size:14px}

/* ───── Hero special effects ───── */
.hero-orbs{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;
}
.orb{
  position:absolute;bottom:-20px;
  width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle,rgba(194,166,119,.9) 0%,rgba(194,166,119,.2) 50%,transparent 75%);
  filter:blur(.5px);
  opacity:0;
  animation:orbDrift linear infinite;
}
@keyframes orbDrift{
  0%   {transform:translateY(0) scale(.6);opacity:0}
  10%  {opacity:.7}
  50%  {transform:translateY(-50vh) scale(1)}
  90%  {opacity:.5}
  100% {transform:translateY(-110vh) scale(1.2);opacity:0}
}

/* Hero visual: refined report card */
.hero-visual{position:relative;perspective:1400px}

/* Orbital ring behind report */
.hero-orbital{
  position:absolute;top:50%;left:50%;
  width:120%;height:120%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:0;
}
.hero-orbital::before,
.hero-orbital::after{
  content:"";position:absolute;inset:0;
  border-radius:50%;
  border:1px solid rgba(194,166,119,.18);
}
.hero-orbital::before{
  border-style:dashed;
  animation:slowSpin 60s linear infinite;
}
.hero-orbital::after{
  inset:8%;
  border-color:rgba(255,255,255,.08);
  animation:slowSpin 80s linear infinite reverse;
}
.hero-orbital .tick{
  position:absolute;top:50%;left:50%;
  width:4px;height:4px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 12px rgba(194,166,119,.6);
  transform-origin:0 0;
}

.report{
  position:relative;z-index:2;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
  transform-style:preserve-3d;
  will-change:transform;
}
.report{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:34px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 40px 80px -20px rgba(0,0,0,.5),
    0 20px 40px -20px rgba(0,0,0,.4);
  position:relative;
}
.report::before{
  content:"";position:absolute;top:0;left:32px;right:32px;height:3px;
  background:linear-gradient(90deg,var(--primary),var(--gold));
  border-radius:0 0 3px 3px;
}
.report-label{
  font-size:11px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-mute);font-weight:600;margin-bottom:8px;
}
.report-value{
  font-family:var(--display);
  font-size:48px;font-weight:900;letter-spacing:-.025em;color:var(--ink);
  line-height:1;
}
.report-delta{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:14px;
  padding:6px 12px;border-radius:999px;
  background:var(--primary-soft);color:var(--primary);
  font-size:12px;font-weight:600;
}
.report-divider{height:1px;background:var(--line);margin:24px 0}
.report-rows{display:flex;flex-direction:column;gap:14px}
.report-row{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.report-row span:first-child{color:var(--ink-mute)}
.report-row span:last-child{font-weight:600;color:var(--ink)}
.report-bar-wrap{
  height:6px;background:var(--bg-tint);border-radius:99px;overflow:hidden;
  margin-top:18px;
}
.report-bar{
  height:100%;
  background:linear-gradient(90deg,var(--primary),var(--gold));
  border-radius:99px;
  transform-origin:left;transform:scaleX(0);
  transition:transform 1.8s var(--ease);
}
.report-bar.in{transform:scaleX(.84)}

/* Hero portrait — David überlappt die Report-Box rechts, wächst nach unten raus */
.hero-portrait-img{
  position:absolute;right:-89px;bottom:-139px;
  width:500px;height:auto;z-index:30;
  pointer-events:none;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.5));
}
@media(max-width:960px){
  .hero-portrait-img{right:-20px;bottom:-90px;width:340px}
}

/* David-Badge auf dem Portrait, im Anschnitt links-unten */
.hero-portrait-badge{
  position:absolute;right:180px;bottom:30px;z-index:31;
}
.hpb-name{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  background:rgba(11,22,32,.88);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(194,166,119,.5);
  color:#fff;font-size:13px;font-weight:700;letter-spacing:.01em;
  cursor:help;white-space:nowrap;user-select:none;
  box-shadow:0 12px 24px -10px rgba(0,0,0,.55);
  position:relative;bottom:-184px;
}
.hpb-name::before{
  content:"";width:8px;height:8px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.22);
  animation:floatY 0s; /* placeholder, no animation */
}
.hpb-tooltip{
  position:absolute;left:0;top:calc(100% + 194px);
  min-width:280px;max-width:320px;
  background:rgba(11,22,32,.96);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(194,166,119,.4);
  border-radius:12px;padding:14px 16px;
  font-size:13px;color:rgba(255,255,255,.88);line-height:1.5;
  opacity:0;pointer-events:none;transform:translateY(-4px);
  transition:opacity .2s ease,transform .2s ease;
  box-shadow:0 24px 50px -16px rgba(0,0,0,.6);
  z-index:32;
}
.hpb-tooltip strong{
  display:block;color:var(--gold);margin-bottom:6px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
}
.hpb-tooltip p{margin:0;color:rgba(255,255,255,.85)}
.hero-portrait-badge:hover .hpb-tooltip,
.hero-portrait-badge:focus-within .hpb-tooltip{
  opacity:1;transform:translateY(0);pointer-events:auto;
}
@media(max-width:960px){
  .hero-portrait-badge{right:120px;bottom:20px}
  .hpb-tooltip{min-width:240px;max-width:280px}
}
@media(max-width:560px){.hero-portrait-badge{display:none}}
@media(max-width:560px){
  .hero-portrait-img{display:none}
}

/* Floating credibility tag */
.credibility{
  position:absolute;left:-24px;bottom:30px;
  z-index:3;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 18px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 20px 40px -10px rgba(0,0,0,.5);
  animation:floatY 5s ease-in-out infinite;
}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.credibility .icn{
  width:36px;height:36px;border-radius:50%;
  background:var(--primary-soft);color:var(--primary);
  display:grid;place-items:center;font-weight:700;font-size:14px;
}
.credibility b{display:block;font-size:13px;color:var(--ink)}
.credibility small{font-size:11px;color:var(--ink-mute)}

/* ───── Logo strip (inside opener, on dark blue) ───── */
.logo-strip{
  padding:60px 0 80px;
  position:relative;
  border-top:1px solid rgba(255,255,255,.1);
}
.logo-strip-label{
  text-align:center;font-size:11px;text-transform:uppercase;letter-spacing:.2em;
  color:rgba(255,255,255,.55);margin-bottom:34px;font-weight:600;
}
.logo-marquee{
  position:relative;overflow:hidden;
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);
}
.logo-track{
  display:flex;align-items:center;gap:72px;width:max-content;
  animation:logoScroll 50s linear infinite;
}
.logo-marquee:hover .logo-track{animation-play-state:paused}
@keyframes logoScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.logo-track img{
  height:38px;width:auto;flex-shrink:0;
  filter:brightness(0) invert(1);
  opacity:.7;
  transition:opacity .3s var(--ease),transform .3s var(--ease),filter .3s var(--ease);
}
.logo-track img:hover{
  opacity:1;
  transform:scale(1.08);
}
.logo-track a{display:flex;align-items:center;flex-shrink:0;line-height:0}
.logo-track a img{display:block}

/* ───── Sections ───── */
section{padding:110px 0}
.section-head{text-align:center;max-width:720px;margin:0 auto 64px}
.section-eyebrow{
  display:inline-block;
  color:var(--primary);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;
  margin-bottom:18px;
}
h2{
  font-family:var(--display);
  font-size:clamp(34px,4.4vw,52px);
  line-height:1.08;letter-spacing:-.025em;font-weight:900;color:var(--ink);
  margin-bottom:20px;
}
.section-sub{font-size:17px;color:var(--ink-mute)}

/* Services */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:960px){.services{grid-template-columns:1fr}}
.service-card{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:36px 32px;
  position:relative;
  transition:transform .35s var(--ease),border-color .3s,box-shadow .3s;
  display:block;
  text-decoration:none;
  color:inherit;
}
.service-card:hover{
  transform:translateY(-4px);
  border-color:var(--gold);
  box-shadow:0 20px 40px -20px rgba(17,26,34,.18);
}
.service-card .num{
  font-family:var(--display);
  font-size:13px;font-weight:700;color:var(--gold-deep);
  letter-spacing:.05em;margin-bottom:18px;
  display:block;
}
.service-card h3{
  font-family:var(--display);
  font-size:22px;font-weight:700;color:var(--ink);margin-bottom:12px;letter-spacing:-.01em;
}
.service-card p{color:var(--ink-mute);font-size:15px}
.service-card .more{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:20px;font-size:14px;font-weight:600;color:var(--primary);
  transition:gap .25s var(--ease);
}
.service-card:hover .more{gap:10px}

/* ───── KIT Framework Module ───── */
.kit-section{
  position:relative;
  background:
    linear-gradient(180deg,var(--bg) 0%,var(--bg-tint) 50%,var(--bg) 100%);
  overflow:hidden;
}
/* Dot pattern — disabled on request (May 2026) */
.kit-section::before{display:none}
.kit-section .container{position:relative}

.kit-grid{
  display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center;
  margin-top:24px;
}
@media(max-width:960px){.kit-grid{grid-template-columns:1fr;gap:48px}}

/* Left: giant interactive letters */
.kit-mark{
  position:relative;
  display:flex;align-items:flex-start;justify-content:center;
  gap:clamp(16px,2vw,32px);
  padding:20px 0;
}
.kit-letter{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(150px,18vw,260px);
  line-height:.85;
  letter-spacing:-.05em;
  color:rgba(24,61,106,.12);
  background:none;border:none;cursor:pointer;
  padding:0;
  transition:color .8s var(--ease),transform .8s var(--ease),text-shadow .8s var(--ease);
  position:relative;
  font-family:var(--display);
}
.kit-letter span{
  display:inline-block;
  transition:transform .8s var(--ease);
}
.kit-letter.active{
  color:var(--primary);
  text-shadow:
    0 0 60px rgba(194,166,119,.4),
    0 30px 60px rgba(24,61,106,.3);
}
.kit-letter.active span{transform:translateY(-8px)}
.kit-letter::after{
  content:attr(data-name);
  position:absolute;left:50%;bottom:-8px;
  transform:translate(-50%,8px);
  font-family:var(--sans);
  font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep);
  opacity:0;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  white-space:nowrap;
}
.kit-letter.active::after{opacity:1;transform:translate(-50%,0)}

/* Decorative ring behind active letter */
.kit-mark::before{
  content:"";
  position:absolute;
  width:clamp(220px,26vw,360px);
  height:clamp(220px,26vw,360px);
  border-radius:50%;
  border:1px solid rgba(194,166,119,.3);
  top:50%;left:var(--ring-x,50%);
  transform:translate(-50%,-50%);
  transition:left 1s var(--ease),opacity .6s;
  pointer-events:none;
  background:radial-gradient(circle,rgba(194,166,119,.08) 0%,transparent 60%);
}
.kit-mark::after{
  content:"";
  position:absolute;
  width:clamp(160px,18vw,260px);
  height:clamp(160px,18vw,260px);
  border-radius:50%;
  border:1px dashed rgba(24,61,106,.18);
  top:50%;left:var(--ring-x,50%);
  transform:translate(-50%,-50%) rotate(0deg);
  transition:left 1s var(--ease);
  pointer-events:none;
  animation:slowSpin 40s linear infinite;
}
@keyframes slowSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Right: pillar cards stack */
.kit-pillars{display:flex;flex-direction:column;gap:18px}
.pillar{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:26px 30px;
  display:flex;gap:20px;align-items:flex-start;
  position:relative;
  transition:transform .5s var(--ease),border-color .5s,box-shadow .5s,background .5s;
  cursor:pointer;
}
.pillar:hover{transform:translateX(4px)}
.pillar.active{
  border-color:var(--gold);
  background:#fff;
  transform:translateX(8px);
  box-shadow:
    0 30px 60px -20px rgba(24,61,106,.25),
    0 0 0 1px var(--gold) inset;
}
.pillar.active::before{
  content:"";
  position:absolute;left:-1px;top:20%;bottom:20%;
  width:3px;background:var(--gold);
  border-radius:0 3px 3px 0;
  animation:pillarStripe .8s var(--ease);
}
@keyframes pillarStripe{from{top:50%;bottom:50%;opacity:0}to{top:20%;bottom:20%;opacity:1}}

.pillar-icon{
  flex-shrink:0;
  width:48px;height:48px;border-radius:10px;
  background:var(--primary-soft);
  color:var(--primary);
  display:grid;place-items:center;
  font-size:22px;
  transition:background .5s,color .5s,transform .5s var(--ease);
}
.pillar.active .pillar-icon{
  background:var(--primary);color:var(--gold);
  transform:scale(1.05) rotate(-4deg);
}
.pillar h4{
  font-family:var(--display);
  font-size:19px;font-weight:700;color:var(--ink);
  margin-bottom:6px;letter-spacing:-.01em;
  display:flex;align-items:center;gap:10px;
}
.pillar h4 .letter{
  font-size:13px;color:var(--gold-deep);font-weight:700;
  letter-spacing:.05em;
}
.pillar p{font-size:14px;color:var(--ink-mute);line-height:1.55;margin:0}

/* Promise quote */
.kit-promise{
  margin-top:64px;
  text-align:center;
  position:relative;
}
.kit-promise blockquote{
  font-family:var(--display);
  font-size:clamp(24px,2.6vw,34px);
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.25;
  color:var(--ink);
  max-width:780px;
  margin:0 auto 32px;
}
.kit-promise blockquote em{
  font-style:normal;
  color:var(--primary);
  position:relative;
  white-space:nowrap;
}
.kit-promise blockquote em::after{
  content:"";position:absolute;left:0;right:0;bottom:.04em;height:.16em;
  background:var(--gold);opacity:.5;z-index:-1;
}
.kit-promise .author{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;color:var(--ink-mute);
  text-transform:uppercase;letter-spacing:.18em;font-weight:600;
}
.kit-promise .author::before,
.kit-promise .author::after{
  content:"";width:32px;height:1px;background:var(--line-strong);
}

.kit-cta{text-align:center;margin-top:40px}

/* Stats */
.stats-band{
  background:var(--primary);
  position:relative;overflow:hidden;
}
/* Grid pattern — disabled on request (May 2026) */
.stats-band::before{display:none}
.stats-band .container{position:relative}
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
  text-align:left;
}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{
  border-left:2px solid var(--gold);
  padding-left:20px;
  color:#fff;
}
.stat-num{
  font-family:var(--display);
  font-size:clamp(44px,5vw,68px);font-weight:900;letter-spacing:-.03em;
  color:#fff;line-height:1;
}
.stat-label{font-size:14px;color:rgba(255,255,255,.72);margin-top:8px}

/* Methodology */
.method{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--bg-soft);
  overflow:hidden;
}
@media(max-width:960px){.method{grid-template-columns:1fr}}
.step{
  padding:36px 32px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
  transition:background .25s;
}
.step:hover{background:var(--bg)}
.step:nth-child(3n){border-right:none}
.step:nth-last-child(-n+3){border-bottom:none}
@media(max-width:960px){
  .step{border-right:none}
  .step:last-child{border-bottom:none}
}
.step-num{
  font-family:var(--display);
  font-size:13px;font-weight:700;color:var(--gold-deep);font-weight:700;
  letter-spacing:.05em;
}
.step h3{
  font-family:var(--display);
  font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.01em;
  margin:10px 0 10px;
}
.step p{font-size:14px;color:var(--ink-mute)}

/* Testimonials */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:960px){.testimonials{grid-template-columns:1fr}}
.quote{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:36px 32px;
  display:flex;flex-direction:column;
  position:relative;
  transition:transform .3s var(--ease),box-shadow .3s;
}
.quote:hover{transform:translateY(-3px);box-shadow:0 20px 40px -20px rgba(17,26,34,.18)}
.quote-mark{
  font-family:var(--display);
  font-size:72px;line-height:.5;color:var(--gold);
  margin-bottom:16px;font-weight:900;
}
.quote blockquote{margin:0;padding:0;border:0;flex:1}
.quote p,
.quote blockquote p{
  font-family:var(--sans);
  font-size:17px;color:var(--ink);margin:0 0 28px;
  line-height:1.6;font-weight:400;
}
.quote-author{display:flex;flex-direction:column;gap:3px;border-top:1px solid var(--line);padding-top:20px;margin:0}
.quote-author strong{display:block;font-size:14.5px;color:var(--ink);font-weight:700}
.quote-author span{font-size:12.5px;color:var(--ink-mute);letter-spacing:.01em}

.testimonial-hint{text-align:center;margin-top:38px;font-size:14px;color:var(--ink-mute)}
.testimonial-hint a{color:var(--gold-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Final CTA */
.final-wrap{padding-bottom:130px}
.final-cta{
  background:#0c2a4d;
  color:#fff;
  border-radius:var(--radius-lg);
  padding:96px 56px;
  text-align:center;
  position:relative;overflow:hidden;
  isolation:isolate;
}
.final-cta::before{
  content:"";position:absolute;inset:-20%;z-index:-2;
  background:
    radial-gradient(40% 40% at 30% 20%,rgba(194,166,119,.25),transparent 70%),
    radial-gradient(50% 50% at 80% 80%,rgba(36,86,148,.55),transparent 70%);
  filter:blur(40px) saturate(120%);
  animation:meshShift 22s ease-in-out infinite alternate;
}
.final-cta::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:64px 64px;
  mask:radial-gradient(70% 80% at 50% 50%,#000 30%,transparent 90%);
  -webkit-mask:radial-gradient(70% 80% at 50% 50%,#000 30%,transparent 90%);
}
.final-cta h2{color:#fff}
.final-cta .section-eyebrow{color:var(--gold)}
.final-cta .btn-primary{background:var(--gold);color:var(--ink);border-color:var(--gold);box-shadow:0 12px 32px rgba(194,166,119,.35)}
.final-cta .btn-primary:hover{background:#d4ba8e;border-color:#d4ba8e;box-shadow:0 16px 40px rgba(194,166,119,.5)}
.final-cta > *{position:relative}
.final-cta p{color:rgba(255,255,255,.78);max-width:600px;margin:18px auto 36px;font-size:17px}
.final-cta .cta-steps{list-style:none;margin:0 auto 38px;padding:0;display:flex;gap:32px;justify-content:center;flex-wrap:wrap;max-width:920px}
.final-cta .cta-steps li{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.9);font-size:19px;font-weight:500}
.final-cta .cta-check{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:#2E9E5B url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='3.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%206%209%2017l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}
.final-cta .availability{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:32px;padding:11px 20px;border-radius:999px;
  background:rgba(194,166,119,.12);border:1px solid rgba(194,166,119,.4);
  color:var(--gold);font-size:13px;font-weight:600;
}
.final-cta .availability .dot{
  width:7px;height:7px;border-radius:50%;background:var(--gold);
  animation:pulse 2.4s infinite;
}

/* Footer — solides Dunkelblau, kein Verlauf */
footer{
  position:relative;
  background:#0A1D3A;
  color:rgba(255,255,255,.68);
  padding:90px 0 32px;
  overflow:hidden;
  isolation:isolate;
}
/* Animated dot-grid overlay — disabled on request (May 2026) */
footer::after{display:none}
footer > .container{position:relative;z-index:1}
/* Solide Gold-Linie oben */
footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:2;
  background:#D4AF37
}

.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:40px;margin-bottom:48px}
@media(max-width:1100px){.foot-grid{grid-template-columns:1.4fr repeat(2,1fr);gap:36px}}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}
.foot-col h4{
  color:#fff;font-size:13px;margin-bottom:16px;
  text-transform:uppercase;letter-spacing:.12em;font-weight:700;
}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot-col a{font-size:14px;color:rgba(255,255,255,.65);transition:color .2s ease, transform .2s ease;display:inline-block}
.foot-col a:hover{color:var(--gold);transform:translateX(3px)}
.foot-brand .logo{color:#fff}
.foot-brand .logo-mark{filter:invert(1) brightness(2)}
.foot-brand p{font-size:14px;max-width:300px;margin:18px 0 0;color:rgba(255,255,255,.72)}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding-top:26px;
  display:flex;justify-content:space-between;font-size:13px;flex-wrap:wrap;gap:12px;
  color:rgba(255,255,255,.55);
}
.foot-bottom a{color:rgba(255,255,255,.55);transition:color .2s ease}
.foot-bottom a:hover{color:var(--gold)}

@media (prefers-reduced-motion: reduce){
  footer::before,footer::after{animation:none}
}

/* Reveal-on-scroll (subtle) */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal.delay-1{transition-delay:.08s}
.reveal.delay-2{transition-delay:.16s}
.reveal.delay-3{transition-delay:.24s}
.reveal.delay-4{transition-delay:.32s}

/* Sticky bottom CTA (mobile) */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  padding:14px 16px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  display:none;
  transform:translateY(100%);transition:transform .4s var(--ease);
  box-shadow:0 -8px 24px rgba(17,26,34,.08);
}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta .btn{width:100%;justify-content:center}
@media(max-width:760px){.sticky-cta{display:block}}

/* ───── Inner Hero (Subpages) ───── */
.inner-hero{
  padding:170px 0 110px;
  position:relative;
  text-align:left;
}
@media(max-width:820px){
  .inner-hero{padding:110px 0 70px}
}
@media(max-width:560px){
  .inner-hero{padding:90px 0 56px}
}
.inner-hero .container{position:relative;max-width:980px}
.inner-hero.has-visual .container{max-width:var(--container)}
.inner-hero.has-visual .inner-hero-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center;
}
@media(max-width:960px){
  .inner-hero.has-visual .inner-hero-grid{grid-template-columns:1fr;gap:56px}
}
.breadcrumb{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
  margin-bottom:28px;
}
.breadcrumb a{color:rgba(255,255,255,.55);transition:color .2s}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb .sep{color:rgba(194,166,119,.5)}
.breadcrumb .here{color:var(--gold)}

.inner-hero h1{
  font-family:var(--display);
  font-size:clamp(36px,5vw,64px);
  line-height:1.05;
  letter-spacing:-.025em;
  font-weight:900;
  color:#fff;
  margin-bottom:24px;
  max-width:820px;
}
.inner-hero h1 em{
  font-style:normal;
  color:var(--gold);
  font-weight:900;
  display:block;
}
.inner-hero .lead{
  font-size:clamp(17px,1.4vw,20px);
  color:rgba(255,255,255,.78);
  max-width:680px;
  margin-bottom:36px;
  line-height:1.6;
}
.inner-hero .cta-row{margin-bottom:0}

/* Direct-Answer-Block (TL;DR) — GEO/Featured-Snippet-optimiert.
   Sitzt direkt unter H1 und liefert 3-4 zitierfähige Sätze. */
.inner-hero .tldr{
  max-width:720px;
  margin:26px 0 30px;
  padding:18px 22px 18px 20px;
  border-left:3px solid var(--gold);
  background:rgba(194,166,119,.07);
  border-radius:6px;
}
.inner-hero .tldr-label{
  display:inline-block;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-bottom:8px;
}
.inner-hero .tldr p{
  font-size:clamp(15px,1.2vw,17px);
  color:rgba(255,255,255,.92);
  line-height:1.6;margin:0;
}
.inner-hero .tldr p + p{margin-top:10px}
.inner-hero .tldr strong{color:#fff;font-weight:700}

/* Inner-hero meta strip (deliverable badges) */
.hero-meta{
  display:flex;flex-wrap:wrap;gap:14px;
  margin-top:36px;
}
.hero-meta .chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.78);
  font-size:12.5px;font-weight:500;
  backdrop-filter:blur(6px);
  white-space:nowrap;
  text-decoration:none;
  transition:border-color .25s,background .25s,color .25s,transform .2s var(--ease);
}
.hero-meta .chip:hover{
  border-color:rgba(194,166,119,.5);
  background:rgba(194,166,119,.08);
  color:#fff;
  transform:translateY(-2px);
}
.hero-meta .chip .ico{color:var(--gold);font-size:14px}

/* ───── Generic content wrapper ───── */
.prose{
  max-width:760px;margin:0 auto;
  font-size:17px;color:var(--ink-2);line-height:1.75;
}
.prose p{margin-bottom:1.4em}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:700}

/* Focus areas grid (6-card grid for analyse page) */
.focus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:960px){.focus-grid{grid-template-columns:1fr}}
.focus-card{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px;
  position:relative;
  transition:transform .35s var(--ease),border-color .3s,box-shadow .3s;
}
.focus-card:hover{
  transform:translateY(-4px);
  border-color:var(--gold);
  box-shadow:0 24px 48px -24px rgba(17,26,34,.2);
}
.focus-card .num{
  font-family:var(--display);
  font-size:13px;font-weight:700;color:var(--gold-deep);
  letter-spacing:.05em;display:block;margin-bottom:14px;
}
.focus-card h3{
  font-family:var(--display);
  font-size:20px;font-weight:700;color:var(--ink);
  margin-bottom:10px;letter-spacing:-.01em;
}
.focus-card p{font-size:14.5px;color:var(--ink-mute);line-height:1.6}

/* ───── Analyzer mockup (subpage hero visual) ───── */
.analyzer-wrap{position:relative;perspective:1400px}
.analyzer{
  position:relative;z-index:2;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 40px 80px -20px rgba(0,0,0,.55),
    0 20px 40px -20px rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.1);
  transform-style:preserve-3d;
}
.analyzer-bar{
  background:#f1f1ee;
  padding:11px 14px;
  display:flex;align-items:center;gap:7px;
  border-bottom:1px solid var(--line);
}
.analyzer-bar .b-dot{width:10px;height:10px;border-radius:50%}
.analyzer-bar .b-dot.r{background:#ff5f57}
.analyzer-bar .b-dot.y{background:#febc2e}
.analyzer-bar .b-dot.g{background:#28c840}
.analyzer-bar .url{
  flex:1;
  background:#fff;
  border-radius:5px;
  padding:5px 12px;
  font-size:11px;
  color:var(--ink-mute);
  margin-left:10px;
  border:1px solid var(--line);
  font-family:var(--sans);
  letter-spacing:.01em;
}
.analyzer-screen{
  position:relative;
  height:380px;
  background:#fff;
  padding:22px 24px;
  overflow:hidden;
}
@media(max-width:480px){.analyzer-screen{height:340px}}

/* Wireframe blocks */
.wf{background:var(--bg-tint);border-radius:4px}
.wf-head{
  display:flex;align-items:center;gap:12px;
  margin-bottom:24px;
}
.wf-logo{width:50px;height:14px;background:var(--primary-soft);border-radius:3px}
.wf-nav{display:flex;gap:10px;margin-left:auto}
.wf-nav span{width:30px;height:8px;background:var(--bg-tint);border-radius:2px}
.wf-hero{margin-bottom:22px}
.wf-title{height:18px;background:var(--bg-tint);border-radius:4px;margin-bottom:9px;width:85%}
.wf-title.short{width:62%;margin-bottom:14px}
.wf-cta{
  width:108px;height:30px;
  background:var(--primary-soft);
  border-radius:6px;
  border:1px solid rgba(24,61,106,.15);
}
.wf-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:16px}
.wf-img{height:84px;background:var(--bg-tint);border-radius:5px;position:relative;overflow:hidden}
.wf-img::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,var(--bg-tint) 0%,#e8e6dc 50%,var(--bg-tint) 100%);
}
.wf-text > div{height:7px;background:var(--bg-tint);border-radius:2px;margin-bottom:8px}
.wf-text > div:nth-child(1){width:100%}
.wf-text > div:nth-child(2){width:92%}
.wf-text > div:nth-child(3){width:78%}
.wf-text > div:nth-child(4){width:88%}
.wf-text > div:nth-child(5){width:60%}

/* Scanner line */
.scanner{
  position:absolute;left:0;right:0;
  top:-90px;height:90px;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(194,166,119,.05) 30%,
    rgba(194,166,119,.25) 70%,
    rgba(194,166,119,.6) 100%);
  border-bottom:1.5px solid var(--gold);
  box-shadow:0 0 28px rgba(194,166,119,.55);
  pointer-events:none;
  opacity:0;
  z-index:5;
}
.analyzer.scanning .scanner{
  animation:scannerRun 2.4s linear forwards;
}
@keyframes scannerRun{
  0%   {top:-90px;opacity:0}
  6%   {opacity:1}
  92%  {opacity:1}
  100% {top:100%;opacity:0}
}

/* Findings (issue markers) */
.finding{
  position:absolute;
  width:28px;height:28px;
  border-radius:50%;
  background:#e85d4a;
  border:2.5px solid #fff;
  box-shadow:0 6px 18px rgba(232,93,74,.55);
  display:grid;place-items:center;
  font-family:var(--display);
  font-size:14px;font-weight:900;color:#fff;
  transform:scale(0);
  opacity:0;
  transition:transform .5s cubic-bezier(.25,1.6,.5,1),opacity .3s,background .5s var(--ease),box-shadow .5s var(--ease);
  z-index:6;
}
.finding::before{
  content:"!";
  transition:opacity .3s;
}
.finding::after{
  content:"✓";
  position:absolute;
  opacity:0;
  transition:opacity .3s;
  font-size:15px;
}
.finding.show{
  transform:scale(1);
  opacity:1;
}
.finding.done{
  background:var(--gold);
  border-color:#fff;
  box-shadow:0 6px 22px rgba(194,166,119,.6);
  transform:scale(1.08);
}
.finding.done::before{opacity:0}
.finding.done::after{opacity:1}

/* Connector pulse rings around findings */
.finding.show::before{animation:none}
.finding.show{
  box-shadow:0 6px 18px rgba(232,93,74,.55),0 0 0 0 rgba(232,93,74,.45);
  animation:findingPulse 1.4s ease-out infinite;
}
.finding.done{
  animation:none;
}
@keyframes findingPulse{
  0%   {box-shadow:0 6px 18px rgba(232,93,74,.55),0 0 0 0 rgba(232,93,74,.55)}
  70%  {box-shadow:0 6px 18px rgba(232,93,74,.55),0 0 0 14px rgba(232,93,74,0)}
  100% {box-shadow:0 6px 18px rgba(232,93,74,.55),0 0 0 0 rgba(232,93,74,0)}
}

/* Success panel */
.success{
  position:absolute;
  left:14px;right:14px;bottom:14px;
  background:linear-gradient(135deg,#0f2240 0%,#0c2a4d 100%);
  color:#fff;
  padding:16px 20px;
  border-radius:10px;
  display:flex;align-items:center;gap:14px;
  transform:translateY(150%);
  opacity:0;
  transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .4s;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.08);
  z-index:7;
}
.success.show{transform:translateY(0);opacity:1}
.success-icon{
  flex-shrink:0;
  width:38px;height:38px;border-radius:50%;
  background:var(--gold);
  color:var(--ink);
  display:grid;place-items:center;
  font-weight:900;font-size:19px;
  box-shadow:0 0 24px rgba(194,166,119,.55);
}
.success-title{
  font-family:var(--display);
  font-weight:700;font-size:14px;color:#fff;margin-bottom:2px;letter-spacing:.005em;
}
.success-meta{
  font-size:12px;color:rgba(255,255,255,.72);font-weight:400;
}

/* ───── Feature modules (Z-pattern) ───── */
.feature-module{
  padding:120px 0;
  scroll-margin-top:100px;
}
.feature-module:nth-of-type(even){
  background:var(--bg-soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.fm-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
}
@media(max-width:960px){.fm-grid{grid-template-columns:1fr;gap:48px}}
.fm-grid.reverse .fm-text{order:2}
.fm-grid.reverse .fm-visual{order:1}
@media(max-width:960px){
  .fm-grid.reverse .fm-text{order:1}
  .fm-grid.reverse .fm-visual{order:2}
}

.fm-eyebrow{
  display:inline-block;padding:7px 16px;border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;
  margin-bottom:18px;
}
.fm-text h3{
  font-family:var(--display);
  font-size:clamp(28px,3.2vw,42px);
  line-height:1.08;letter-spacing:-.02em;font-weight:900;color:var(--ink);
  margin-bottom:18px;
}
.fm-text > p{
  font-size:16.5px;color:var(--ink-mute);line-height:1.7;
  margin-bottom:14px;
  max-width:520px;
}
.fm-checks{list-style:none;margin:24px 0 32px;padding:0}
.fm-checks li{
  display:flex;align-items:flex-start;gap:12px;
  padding:8px 0;
  font-size:15px;color:var(--ink-2);line-height:1.55;
}
.fm-checks li::before{
  content:"✓";flex-shrink:0;
  width:22px;height:22px;border-radius:50%;
  background:var(--gold-soft);color:var(--gold-deep);
  display:grid;place-items:center;
  font-size:12px;font-weight:900;
  margin-top:1px;
}
.fm-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.fm-cta .small{font-size:13px;color:var(--ink-mute);font-weight:500}

/* Visual base */
.fm-mockup{
  background:#fff;
  border-radius:14px;
  border:1px solid var(--line);
  box-shadow:0 30px 60px -20px rgba(17,26,34,.18),0 14px 28px -14px rgba(24,61,106,.14);
  overflow:hidden;
  position:relative;
}
.fm-mockup .top{
  background:#f1f1ee;
  padding:11px 14px;
  display:flex;align-items:center;gap:7px;
  border-bottom:1px solid var(--line);
}
.fm-mockup .top .b-dot{width:10px;height:10px;border-radius:50%}
.fm-mockup .top .b-dot.r{background:#ff5f57}
.fm-mockup .top .b-dot.y{background:#febc2e}
.fm-mockup .top .b-dot.g{background:#28c840}
.fm-mockup .top .label{
  margin-left:auto;font-size:11px;font-weight:600;
  color:var(--ink-mute);letter-spacing:.04em;
  display:inline-flex;align-items:center;gap:6px;
}
.fm-mockup .top .label .live{
  width:7px;height:7px;border-radius:50%;background:#ff4444;
  box-shadow:0 0 0 0 rgba(255,68,68,.5);
  animation:pulseRec 1.5s ease-in-out infinite;
}
@keyframes pulseRec{
  0%   {box-shadow:0 0 0 0 rgba(255,68,68,.5)}
  70%  {box-shadow:0 0 0 8px rgba(255,68,68,0)}
  100% {box-shadow:0 0 0 0 rgba(255,68,68,0)}
}

/* ─── Heatmap mockup ─── */
.heat-screen{
  position:relative;
  height:340px;
  padding:22px 24px;
  overflow:hidden;
}
.heat-screen .wf-head{margin-bottom:18px}
.heat-screen .wf-title{height:16px;background:var(--bg-tint);border-radius:4px;margin-bottom:8px;width:78%}
.heat-screen .wf-title.short{width:55%;margin-bottom:14px}
.heat-screen .wf-cta{width:108px;height:30px;background:var(--primary-soft);border-radius:6px;margin-bottom:18px}
.heat-screen .wf-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:14px}
.heat-screen .wf-img{height:80px;background:var(--bg-tint);border-radius:5px}
.heat-screen .wf-text > div{height:7px;background:var(--bg-tint);border-radius:2px;margin-bottom:7px}
.heat-screen .wf-text > div:nth-child(1){width:100%}
.heat-screen .wf-text > div:nth-child(2){width:88%}
.heat-screen .wf-text > div:nth-child(3){width:75%}
.heat-screen .wf-text > div:nth-child(4){width:92%}
.blob{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(255,70,30,.65) 0%,rgba(255,140,30,.45) 30%,rgba(255,210,60,.28) 55%,transparent 80%);
  filter:blur(6px);
  mix-blend-mode:multiply;
  opacity:0;
  pointer-events:none;
  animation:blobFade 7s ease-in-out infinite;
}
@keyframes blobFade{
  0%,100%{opacity:0;transform:scale(.85)}
  20%,80%{opacity:1;transform:scale(1)}
}
.heat-cursor{
  position:absolute;
  width:18px;height:18px;border-radius:50%;
  background:rgba(24,61,106,.95);
  border:2px solid #fff;
  box-shadow:0 0 0 6px rgba(24,61,106,.18),0 4px 12px rgba(0,0,0,.25);
  pointer-events:none;
  animation:cursorPath 9s ease-in-out infinite;
  z-index:5;
}
@keyframes cursorPath{
  0%   {top:60px;left:60px}
  20%  {top:80px;left:220px}
  40%  {top:140px;left:80px}
  55%  {top:170px;left:200px}
  75%  {top:240px;left:120px}
  100% {top:60px;left:60px}
}

/* ─── Funnel mockup ─── */
.funnel-mockup .heat-screen{padding:32px 30px;height:340px}
.fm-funnel{display:flex;flex-direction:column;gap:14px;height:100%;justify-content:center;position:relative}
.funnel-step{
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-deep) 100%);
  color:#fff;
  padding:14px 22px;
  border-radius:8px;
  display:flex;justify-content:space-between;align-items:center;
  margin:0 auto;
  width:0;
  opacity:0;
  transition:width 1.2s var(--ease),opacity .6s var(--ease);
  box-shadow:0 8px 20px -10px rgba(24,61,106,.4);
}
.fm-funnel.in .funnel-step:nth-child(1){width:100%;opacity:1;transition-delay:.1s}
.fm-funnel.in .funnel-step:nth-child(2){width:78%;opacity:1;transition-delay:.35s}
.fm-funnel.in .funnel-step:nth-child(3){width:42%;opacity:1;transition-delay:.6s}
.fm-funnel.in .funnel-step:nth-child(4){width:22%;opacity:1;transition-delay:.85s}
.fm-funnel.in .funnel-step:nth-child(5){width:11%;opacity:1;transition-delay:1.1s;background:linear-gradient(135deg,var(--gold-deep) 0%,var(--gold) 100%);box-shadow:0 8px 20px -10px rgba(194,166,119,.5)}
.funnel-step .label{font-size:13px;font-weight:600;opacity:.85;white-space:nowrap}
.funnel-step .num{font-family:var(--display);font-size:16px;font-weight:900;margin-left:14px;white-space:nowrap}
.funnel-step:nth-child(4) .label,.funnel-step:nth-child(4) .num,
.funnel-step:nth-child(5) .label,.funnel-step:nth-child(5) .num{font-size:11px}
.funnel-leak{
  position:absolute;
  right:14px;top:50%;
  transform:translate(20px,-50%);
  background:rgba(232,93,74,.95);
  color:#fff;
  padding:8px 12px;
  border-radius:6px;
  font-size:11px;font-weight:700;letter-spacing:.02em;
  white-space:nowrap;
  box-shadow:0 8px 20px rgba(232,93,74,.4);
  opacity:0;
  transition:opacity .6s 1.5s,transform .6s 1.5s;
}
.fm-funnel.in .funnel-leak{opacity:1;transform:translate(0,-50%)}
.funnel-leak::before{
  content:"";position:absolute;
  left:-6px;top:50%;transform:translateY(-50%);
  border:6px solid transparent;
  border-right-color:rgba(232,93,74,.95);
}

/* ─── KI-Beratung mockup ─── */
.ki-mockup .heat-screen{padding:30px 24px;height:340px;display:flex;flex-direction:column;justify-content:center}
.ki-pipeline{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  margin-bottom:32px;
}
.ki-node{
  flex:1;min-width:0;
  background:var(--bg-tint);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 6px 12px;
  text-align:center;
  transition:all .55s var(--ease);
  position:relative;
}
.ki-node .icon{
  display:grid;place-items:center;
  width:34px;height:34px;border-radius:8px;
  background:#fff;border:1px solid var(--line);
  margin:0 auto 8px;
  font-size:14px;font-weight:900;color:var(--primary);
  font-family:var(--display);
  transition:all .55s var(--ease);
}
.ki-node .label{
  font-size:10.5px;font-weight:600;color:var(--ink-mute);
  letter-spacing:.01em;line-height:1.2;
}
.ki-node.active{
  background:var(--primary);
  border-color:var(--gold);
  transform:translateY(-3px);
  box-shadow:0 12px 28px -10px rgba(24,61,106,.4),0 0 0 3px rgba(194,166,119,.3);
}
.ki-node.active .label{color:#fff}
.ki-node.active .icon{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--ink);
  box-shadow:0 0 18px rgba(194,166,119,.55);
}
.ki-line{
  flex:0 0 18px;
  height:2px;
  background:var(--bg-tint);
  position:relative;
  border-radius:2px;
}
.ki-line::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--primary),var(--gold));
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
  border-radius:2px;
}
.ki-line.active::before{transform:scaleX(1)}

.ki-result{
  background:linear-gradient(135deg,#0f2240 0%,#0c2a4d 100%);
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:18px 22px;
  display:flex;align-items:center;gap:18px;
  opacity:0;
  transform:translateY(20px);
  transition:all .65s var(--ease);
  box-shadow:0 18px 40px -10px rgba(0,0,0,.35);
}
.ki-result.show{opacity:1;transform:translateY(0)}
.ki-result .big{
  font-family:var(--display);
  font-size:38px;font-weight:900;color:var(--gold);
  letter-spacing:-.025em;line-height:1;flex-shrink:0;
}
.ki-result .meta{font-size:12.5px;color:rgba(255,255,255,.78);line-height:1.4}
.ki-result .meta strong{color:#fff;font-weight:700;display:block;font-size:13px}

/* ─── Backlog mockup ─── */
.backlog-mockup .heat-screen{padding:22px;height:340px;overflow-y:hidden}
.backlog-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:14px;padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.backlog-header .title{
  font-family:var(--display);font-size:13px;font-weight:700;color:var(--ink);
  letter-spacing:-.005em;
}
.backlog-header .count{
  font-size:11px;color:var(--ink-mute);font-weight:600;
  background:var(--bg-tint);padding:3px 9px;border-radius:99px;
}
.fm-backlog .card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:8px;
  padding:11px 14px;
  margin-bottom:8px;
  display:flex;align-items:center;gap:12px;
  opacity:0;
  transform:translateX(24px);
  transition:opacity .55s var(--ease),transform .55s var(--ease),border-color .4s,box-shadow .4s;
}
.fm-backlog.in .card{opacity:1;transform:translateX(0)}
.fm-backlog.in .card:nth-child(1){transition-delay:.1s}
.fm-backlog.in .card:nth-child(2){transition-delay:.22s}
.fm-backlog.in .card:nth-child(3){transition-delay:.34s}
.fm-backlog.in .card:nth-child(4){transition-delay:.46s}
.fm-backlog.in .card:nth-child(5){transition-delay:.58s}
.fm-backlog.in .card.p1{
  border-color:var(--gold);
  box-shadow:0 6px 18px -6px rgba(194,166,119,.3);
  background:#fff;
}
.priority-badge{
  flex-shrink:0;
  padding:3px 8px;border-radius:4px;
  font-family:var(--display);
  font-size:10px;font-weight:900;letter-spacing:.06em;
}
.priority-badge.p1{background:rgba(194,166,119,.18);color:var(--gold-deep)}
.priority-badge.p2{background:rgba(24,61,106,.1);color:var(--primary)}
.priority-badge.p3{background:var(--bg-tint);color:var(--ink-mute)}
.task-title{
  flex:1;font-size:12.5px;color:var(--ink);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.task-impact{display:flex;gap:3px;flex-shrink:0}
.task-impact span{width:5px;height:5px;border-radius:50%;background:var(--bg-tint)}
.task-impact span.on{background:var(--gold)}

/* ─── Walkthrough mockup ─── */
.wt-mockup .top{background:#1a1d2e;border-bottom-color:#2a2d3e}
.wt-mockup .top .b-dot.r{background:#ff5f57}
.wt-mockup .top .b-dot.y{background:#febc2e}
.wt-mockup .top .b-dot.g{background:#28c840}
.wt-mockup .top .label{color:rgba(255,255,255,.85)}
.wt-avatars{display:flex;margin-right:14px}
.wt-avatars .av{
  width:24px;height:24px;border-radius:50%;
  border:2px solid #1a1d2e;
  background:var(--gold);color:var(--ink);
  display:grid;place-items:center;
  font-family:var(--display);
  font-size:10px;font-weight:900;
  margin-left:-7px;
}
.wt-avatars .av:first-child{margin-left:0}
.wt-avatars .av:nth-child(2){background:var(--primary);color:#fff}
.wt-avatars .av:nth-child(3){background:#fff;color:var(--ink)}
.wt-screen{
  position:relative;
  height:340px;
  background:#fff;
  padding:24px;
  overflow:hidden;
}
.wt-screen .wt-title{height:18px;background:var(--bg-tint);border-radius:4px;margin-bottom:10px;width:70%}
.wt-screen .wt-line{height:9px;background:var(--bg-tint);border-radius:3px;margin-bottom:9px}
.wt-screen .wt-line.l1{width:95%}
.wt-screen .wt-line.l2{width:88%}
.wt-screen .wt-line.l3{width:72%}
.wt-screen .wt-img{height:74px;background:var(--bg-tint);border-radius:5px;margin:14px 0}
.wt-screen .wt-line.l4{width:90%}
.wt-screen .wt-line.l5{width:62%}
.wt-cursor{
  position:absolute;
  width:0;height:0;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));
  animation:wtCursor 12s ease-in-out infinite;
  z-index:5;
}
.wt-cursor::before{
  content:"";display:block;
  width:0;height:0;
  border-left:12px solid var(--ink);
  border-top:6px solid transparent;
  border-right:7px solid transparent;
  border-bottom:14px solid var(--ink);
  transform:rotate(-25deg);
}
.wt-cursor::after{
  content:"David O.";
  position:absolute;
  left:14px;top:14px;
  background:var(--primary);
  color:#fff;
  padding:3px 9px;
  border-radius:4px;
  font-size:10px;font-weight:700;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(24,61,106,.3);
}
@keyframes wtCursor{
  0%   {top:24%;left:55%}
  20%  {top:30%;left:35%}
  40%  {top:50%;left:62%}
  60%  {top:65%;left:25%}
  80%  {top:42%;left:50%}
  100% {top:24%;left:55%}
}
.wt-circle{
  position:absolute;
  border:2.5px solid var(--gold);
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  box-shadow:0 0 0 0 rgba(194,166,119,.4);
}
.wt-circle.c1{
  top:24%;left:25%;width:90px;height:38px;
  animation:circleDraw 12s ease-in-out infinite;
}
.wt-circle.c2{
  top:58%;left:18%;width:75px;height:32px;
  animation:circleDraw 12s ease-in-out infinite;
  animation-delay:4s;
}
@keyframes circleDraw{
  0%,15%   {opacity:0;transform:scale(.4)}
  20%      {opacity:1;transform:scale(1.15)}
  25%,55%  {opacity:1;transform:scale(1)}
  60%,100% {opacity:0;transform:scale(.5)}
}
.wt-chat{
  position:absolute;
  bottom:14px;left:14px;right:14px;
  background:#0f2240;
  color:#fff;
  padding:13px 16px;
  border-radius:10px;
  display:flex;gap:12px;align-items:flex-start;
  box-shadow:0 14px 30px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);
  opacity:0;
  transform:translateY(20px);
  animation:wtChat 12s ease-in-out infinite;
}
.wt-chat .ic{
  width:26px;height:26px;border-radius:50%;
  background:var(--gold);color:var(--ink);
  display:grid;place-items:center;
  font-family:var(--display);font-weight:900;font-size:11px;
  flex-shrink:0;
}
.wt-chat .text{font-size:12.5px;line-height:1.4}
.wt-chat .text strong{color:var(--gold);font-weight:700}
@keyframes wtChat{
  0%,40%   {opacity:0;transform:translateY(20px)}
  45%,90%  {opacity:1;transform:translateY(0)}
  95%,100% {opacity:0;transform:translateY(20px)}
}

/* ───── A/B Split test (hero visual) ───── */
.ab-hero-wrap{position:relative;perspective:1400px}
.ab-hero{
  position:relative;z-index:2;
  display:flex;flex-direction:column;gap:24px;
  padding:6px 4px 4px;
  transform-style:preserve-3d;
  will-change:transform;
}
.ab-cards{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
  position:relative;
}
.ab-card{
  background:#fff;
  border-radius:13px;
  border:1px solid var(--line);
  position:relative;
  transition:transform .8s var(--ease),box-shadow .8s var(--ease),border-color .8s,filter .8s;
  filter:saturate(.85);
  box-shadow:0 24px 50px -22px rgba(0,0,0,.5);
}
.ab-card.a{transform:rotate(-2deg)}
.ab-card.b{transform:rotate(2deg)}
.ab-card.is-winner{
  transform:rotate(0deg) translateY(-8px) scale(1.04);
  border-color:var(--gold);
  filter:saturate(1.05);
  box-shadow:
    0 0 0 2px var(--gold),
    0 30px 60px -18px rgba(194,166,119,.55),
    0 16px 36px -16px rgba(0,0,0,.5);
  z-index:5;
}
.ab-card .top{
  background:#f1f1ee;
  padding:9px 11px;
  display:flex;align-items:center;gap:6px;
  border-bottom:1px solid var(--line);
  border-radius:12px 12px 0 0;
}
.ab-card .top .b-dot{width:8px;height:8px;border-radius:50%}
.ab-card .top .b-dot.r{background:#ff5f57}
.ab-card .top .b-dot.y{background:#febc2e}
.ab-card .top .b-dot.g{background:#28c840}
.ab-letter{
  margin-left:auto;
  font-family:var(--display);
  font-size:11px;font-weight:900;
  color:var(--ink);
  background:var(--bg-tint);
  padding:2px 8px;border-radius:4px;
  letter-spacing:.04em;
}
.ab-card.b .ab-letter{background:var(--gold-soft);color:var(--gold-deep)}
.ab-screen{
  padding:18px 16px 14px;
  background:#fff;
  min-height:130px;
}
.ab-screen .wf-title{height:11px;background:var(--bg-tint);border-radius:3px;margin-bottom:6px;width:88%}
.ab-screen .wf-title.short{width:62%;margin-bottom:14px}
.ab-screen .wf-cta{
  width:88px;height:24px;border-radius:5px;
  background:var(--primary-soft);
  border:1px solid rgba(24,61,106,.18);
}
.ab-card.b .ab-screen .wf-cta{
  background:var(--gold-soft);
  border-color:rgba(194,166,119,.4);
}
.ab-rate{
  border-top:1px solid var(--line);
  padding:11px 14px 12px;
  text-align:center;
  background:linear-gradient(180deg,#fff,#fafaf6);
  border-radius:0 0 12px 12px;
}
.ab-rate .num{
  font-family:var(--display);
  font-size:22px;font-weight:900;color:var(--ink);
  letter-spacing:-.02em;line-height:1;
  display:block;
}
.ab-card.is-winner .ab-rate .num{color:var(--gold-deep)}
.ab-rate .lbl{
  display:block;
  font-size:9.5px;font-weight:600;color:var(--ink-mute);
  text-transform:uppercase;letter-spacing:.12em;
  margin-top:5px;
}
.winner-badge{
  position:absolute;top:-12px;left:50%;
  transform:translateX(-50%) scale(.5);
  background:var(--gold);color:var(--ink);
  padding:5px 14px;border-radius:99px;
  font-family:var(--display);
  font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 8px 20px rgba(194,166,119,.55);
  opacity:0;
  transition:all .55s cubic-bezier(.2,1.6,.4,1) .3s;
  z-index:7;
  white-space:nowrap;
  border:1.5px solid #fff;
}
.ab-card.is-winner .winner-badge{
  transform:translateX(-50%) scale(1);
  opacity:1;
}

.ab-uplift{
  background:linear-gradient(135deg,#0f2240 0%,#0c2a4d 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:18px 22px;
  display:flex;align-items:center;gap:18px;
  box-shadow:0 18px 40px -10px rgba(0,0,0,.4);
  opacity:0;
  transform:translateY(15px);
  transition:all .65s var(--ease) .6s;
}
.ab-hero.has-winner .ab-uplift{opacity:1;transform:translateY(0)}
.ab-uplift .big{
  font-family:var(--display);
  font-size:34px;font-weight:900;
  color:var(--gold);
  letter-spacing:-.025em;line-height:1;flex-shrink:0;
}
.ab-uplift .meta{
  font-size:12px;color:rgba(255,255,255,.78);line-height:1.4;
}
.ab-uplift .meta strong{
  display:block;color:#fff;font-size:13px;font-weight:700;margin-bottom:2px;
}

/* ───── Gelbe Seiten case study visual (real images) ───── */
.gs-mockup .heat-screen{padding:18px;height:auto;display:flex;flex-direction:column;gap:14px}
.gs-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.gs-variant{
  position:relative;
  border-radius:9px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff;
  transition:all .8s var(--ease);
}
.gs-variant.b.win{
  border-color:var(--gold);
  box-shadow:0 20px 40px -16px rgba(194,166,119,.5),0 0 0 1px var(--gold);
  transform:translateY(-3px);
}
.gs-variant .label{
  position:absolute;top:8px;left:8px;z-index:3;
  background:var(--ink);color:#fff;
  padding:3px 9px;border-radius:4px;
  font-family:var(--display);
  font-size:9.5px;font-weight:900;letter-spacing:.1em;
}
.gs-variant.b .label{background:var(--gold);color:var(--ink)}
.gs-variant img{
  display:block;width:100%;
  aspect-ratio:5/4;
  object-fit:cover;
  object-position:center;
  transition:filter .8s var(--ease),transform 1.2s var(--ease);
  filter:saturate(.9);
}
.gs-variant.b.win img{
  filter:saturate(1.05);
  transform:scale(1.02);
}
.gs-rate-row{
  display:flex;align-items:baseline;justify-content:center;gap:6px;
  padding:9px 8px 11px;
  border-top:1px solid var(--line);
  background:#fff;
}
.gs-rate{
  font-family:var(--display);
  font-size:19px;font-weight:900;color:var(--ink);
  letter-spacing:-.02em;line-height:1;
}
.gs-variant.b.win .gs-rate{color:var(--gold-deep)}
.gs-rate-lbl{
  font-size:10px;font-weight:600;color:var(--ink-mute);
  text-transform:uppercase;letter-spacing:.08em;
}
.gs-result{
  background:linear-gradient(135deg,#0f2240 0%,#0c2a4d 100%);
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:14px 18px;
  display:flex;align-items:center;gap:14px;
  margin-top:18px;
  opacity:0;
  transform:translateY(12px);
  transition:all .6s var(--ease);
  box-shadow:0 14px 30px -10px rgba(0,0,0,.35);
}
.gs-mockup.in .gs-result{opacity:1;transform:translateY(0);transition-delay:1.6s}
.gs-result .big{
  font-family:var(--display);font-size:30px;font-weight:900;
  color:var(--gold);letter-spacing:-.025em;line-height:1;flex-shrink:0;
}
.gs-result .meta{font-size:11.5px;color:rgba(255,255,255,.78);line-height:1.4}
.gs-result .meta strong{display:block;color:#fff;font-size:12.5px;font-weight:700;margin-bottom:2px}

/* ───── Download form (case study) ───── */
.download-section{padding:90px 0}
.download-card{
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:18px;
  padding:54px 56px;
  box-shadow:0 30px 60px -22px rgba(17,26,34,.18);
  align-items:center;
}
@media(max-width:900px){
  .download-card{grid-template-columns:1fr;gap:36px;padding:36px 28px}
}
.dl-text .fm-eyebrow{margin-bottom:18px}
.dl-text h3{
  font-family:var(--display);
  font-size:clamp(26px,2.8vw,36px);
  line-height:1.1;letter-spacing:-.02em;font-weight:900;color:var(--ink);
  margin-bottom:16px;
}
.dl-text p{
  font-size:16px;color:var(--ink-mute);line-height:1.65;
  margin-bottom:20px;max-width:480px;
}
.dl-bullets{list-style:none;padding:0;margin:0}
.dl-bullets li{
  display:flex;align-items:center;gap:10px;
  padding:6px 0;
  font-size:14.5px;color:var(--ink-2);font-weight:500;
}
.dl-bullets li::before{
  content:"";width:16px;height:16px;border-radius:50%;
  background:var(--gold-soft);
  position:relative;
  flex-shrink:0;
}
.dl-bullets li::after{
  content:"";position:absolute;
  width:5px;height:9px;
  border:solid var(--gold-deep);
  border-width:0 2px 2px 0;
  transform:translate(-12px,-2px) rotate(45deg);
}

.dl-form{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:34px 32px 30px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 14px 30px -14px rgba(17,26,34,.12);
}
.dl-form-head{
  display:flex;align-items:center;gap:12px;
  margin-bottom:22px;
  padding-bottom:18px;border-bottom:1px solid var(--line);
}
.dl-form-head .ic{
  width:40px;height:40px;border-radius:8px;
  background:var(--primary-soft);color:var(--primary);
  display:grid;place-items:center;
  font-family:var(--display);font-size:16px;font-weight:900;flex-shrink:0;
}
.dl-form-head .meta{flex:1}
.dl-form-head .meta strong{
  display:block;font-family:var(--display);
  font-size:15px;font-weight:700;color:var(--ink);
  letter-spacing:-.005em;
}
.dl-form-head .meta span{
  font-size:12px;color:var(--ink-mute);
}
.dl-field{margin-bottom:16px}
.dl-field label{
  display:block;
  font-size:11px;font-weight:700;color:var(--ink);
  text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:6px;
}
.dl-field input{
  width:100%;
  padding:13px 16px;
  border:1px solid var(--line-strong);
  border-radius:8px;
  font-family:var(--sans);
  font-size:15px;
  color:var(--ink);
  background:#fff;
  transition:border-color .2s,box-shadow .2s;
}
.dl-field input::placeholder{color:#b0b6c0}
.dl-field input:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(24,61,106,.08);
}
.dl-checkbox{
  display:flex;align-items:flex-start;gap:10px;
  margin:18px 0 22px;
  font-size:12.5px;color:var(--ink-mute);line-height:1.55;
}
.dl-checkbox input{
  flex-shrink:0;margin-top:3px;
  accent-color:var(--primary);
}
.dl-checkbox a{color:var(--primary);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:2px}
.dl-submit{
  width:100%;
  padding:15px 24px;
  background:var(--primary);
  color:#fff;border:none;
  border-radius:8px;
  font-family:var(--sans);
  font-size:15px;font-weight:700;letter-spacing:.005em;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:background .2s,transform .2s var(--ease),box-shadow .25s;
  box-shadow:0 8px 22px -8px rgba(24,61,106,.4);
}
.dl-submit:hover{
  background:var(--primary-deep);
  transform:translateY(-2px);
  box-shadow:0 14px 28px -8px rgba(24,61,106,.5);
}
.dl-submit .arrow{transition:transform .25s var(--ease)}
.dl-submit:hover .arrow{transform:translateX(4px)}
.dl-hint{
  font-size:11.5px;color:var(--ink-mute);
  margin-top:14px;line-height:1.5;text-align:center;
}

/* ───── Rocket stage (KI hero visual) ───── */
.rocket-wrap-outer{position:relative;perspective:1400px}
.rocket-stage{
  position:relative;z-index:2;
  border-radius:16px;
  overflow:hidden;
  background:
    radial-gradient(70% 50% at 50% 95%,rgba(255,140,40,.18),transparent 70%),
    radial-gradient(45% 35% at 50% 30%,rgba(36,86,148,.4),transparent 70%),
    linear-gradient(180deg,#0a1735 0%,#0c2a4d 60%,#0f3144 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 40px 80px -20px rgba(0,0,0,.55),
    0 20px 40px -20px rgba(0,0,0,.4);
  aspect-ratio:5/6;
  isolation:isolate;
  transform-style:preserve-3d;
  will-change:transform;
}
.rs-stars span{
  position:absolute;
  width:2px;height:2px;border-radius:50%;
  background:#fff;
  opacity:.3;
  animation:twinkle 4s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{opacity:.2;transform:scale(.8)}
  50%{opacity:1;transform:scale(1.4)}
}

/* dashed orbit ring */
.rs-orbit{
  position:absolute;
  top:50%;left:50%;
  width:74%;aspect-ratio:1;
  border-radius:50%;
  border:1px dashed rgba(194,166,119,.22);
  transform:translate(-50%,-50%);
  animation:slowSpin 60s linear infinite;
}

/* Rocket */
.rocket-wrap{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:4;
  animation:rocketBob 4.5s ease-in-out infinite;
  filter:drop-shadow(0 14px 32px rgba(255,140,40,.35));
}
@keyframes rocketBob{
  0%,100%{transform:translate(-50%,-50%)}
  50%{transform:translate(-50%,calc(-50% - 14px))}
}
.rocket-svg{
  width:96px;height:auto;display:block;
}

/* Flame under rocket */
.flame{
  position:absolute;
  top:100%;left:50%;
  transform:translateX(-50%);
  width:36px;
  pointer-events:none;
}
.flame .core{
  width:18px;height:60px;
  background:linear-gradient(180deg,#fff5d8 0%,#ffd24a 30%,#ff8a3d 60%,rgba(232,93,74,.3) 85%,transparent 100%);
  border-radius:50% 50% 50% 50% / 25% 25% 75% 75%;
  margin:0 auto;
  filter:blur(.5px);
  animation:flameFlicker .15s ease-in-out infinite alternate;
  transform-origin:top center;
}
.flame .glow{
  position:absolute;
  top:-4px;left:50%;
  transform:translateX(-50%);
  width:60px;height:90px;
  background:radial-gradient(ellipse at top,rgba(255,160,40,.55) 0%,transparent 70%);
  filter:blur(10px);
  z-index:-1;
}
@keyframes flameFlicker{
  from{transform:scaleY(1) scaleX(1)}
  to{transform:scaleY(1.12) scaleX(.92)}
}

/* Smoke trail particles below rocket */
.trail{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,40px);
  width:30px;height:240px;
  pointer-events:none;
  z-index:3;
}
.trail span{
  position:absolute;
  left:50%;
  width:14px;height:14px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,180,80,.55) 0%,rgba(255,140,40,.2) 50%,transparent 80%);
  filter:blur(3px);
  transform:translateX(-50%);
  animation:trailRise 3s ease-out infinite;
}
.trail span:nth-child(1){animation-delay:0s}
.trail span:nth-child(2){animation-delay:.4s}
.trail span:nth-child(3){animation-delay:.8s}
.trail span:nth-child(4){animation-delay:1.2s}
.trail span:nth-child(5){animation-delay:1.6s}
.trail span:nth-child(6){animation-delay:2s}
.trail span:nth-child(7){animation-delay:2.4s}
@keyframes trailRise{
  0%{top:0;opacity:0;transform:translateX(-50%) scale(.6)}
  15%{opacity:.8}
  100%{top:100%;opacity:0;transform:translateX(-50%) scale(2.6)}
}

/* Floating value badges */
.rs-badge{
  position:absolute;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:10px;
  padding:11px 16px;
  font-size:11px;font-weight:600;
  color:var(--ink);
  box-shadow:0 16px 32px -10px rgba(0,0,0,.45);
  z-index:6;
  animation:floatY 5s ease-in-out infinite;
}
.rs-badge .num{
  font-family:var(--display);
  font-size:18px;font-weight:900;
  color:var(--gold-deep);
  letter-spacing:-.018em;line-height:1;
  display:block;
}
.rs-badge .lbl{
  display:block;
  font-size:9.5px;font-weight:600;
  color:var(--ink-mute);
  text-transform:uppercase;letter-spacing:.12em;
  margin-top:3px;
}
.rs-badge.b1{top:14%;left:14px;animation-delay:0s}
.rs-badge.b2{top:42%;right:14px;animation-delay:1.5s}
.rs-badge.b3{bottom:18%;left:14px;animation-delay:3s}

/* Caption at top */
.rs-caption{
  position:absolute;top:18px;left:50%;
  transform:translateX(-50%);
  z-index:6;
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:99px;
  background:rgba(12,42,77,.7);
  backdrop-filter:blur(10px);
  border:1px solid rgba(194,166,119,.4);
  color:var(--gold);
  font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;
  white-space:nowrap;
}
.rs-caption .ld{
  width:6px;height:6px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 0 rgba(194,166,119,.5);
  animation:pulseRec 2s ease-in-out infinite;
}

/* ───── AI model pills (in hero text area) ───── */
.ai-models{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin-bottom:24px;
}
@media(min-width:780px){
  .ai-models{flex-wrap:nowrap;white-space:nowrap}
}
.ai-models .lbl{
  font-size:11px;color:rgba(255,255,255,.55);
  text-transform:uppercase;letter-spacing:.12em;font-weight:600;
  margin-right:4px;
}
.ai-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  border-radius:99px;
  font-size:12px;font-weight:600;
  color:rgba(255,255,255,.85);
  letter-spacing:.005em;
  transition:border-color .25s,background .25s,transform .2s var(--ease);
}
.ai-pill:hover{border-color:rgba(194,166,119,.4);background:rgba(194,166,119,.08);transform:translateY(-2px)}
.ai-pill img{
  width:14px;height:14px;
  filter:brightness(0) invert(1);
  flex-shrink:0;
}

/* ───── AI Use Case cards (KI references) ───── */
.uc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media(max-width:780px){.uc-grid{grid-template-columns:1fr}}
.uc-card{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px;
  position:relative;
  transition:transform .35s var(--ease),border-color .3s,box-shadow .3s;
  display:flex;flex-direction:column;
}
.uc-card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 24px 48px -24px rgba(17,26,34,.2)}
.uc-card .industry{
  display:inline-block;
  font-family:var(--display);
  font-size:11px;font-weight:700;
  color:var(--gold-deep);
  letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:12px;
}
.uc-card h3{
  font-family:var(--display);
  font-size:22px;font-weight:900;
  letter-spacing:-.018em;color:var(--ink);
  margin-bottom:12px;
}
.uc-card p{
  font-size:14.5px;color:var(--ink-mute);
  line-height:1.65;
  margin-bottom:18px;
  flex:1;
}
.uc-card .stack{
  display:flex;gap:8px;flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:auto;
}
.uc-card .stack span{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;
  background:var(--bg-tint);
  color:var(--ink-2);
  border-radius:99px;
  font-size:11px;font-weight:600;
}
.uc-card .stack span img{
  width:11px;height:11px;
  flex-shrink:0;
}

/* ───── Models showcase (light section) ───── */
.models-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
@media(max-width:900px){.models-grid{grid-template-columns:1fr}}
.model-card{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:36px 32px;
  text-align:center;
  transition:transform .35s var(--ease),border-color .3s,box-shadow .3s;
}
.model-card:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 24px 48px -24px rgba(17,26,34,.2)}
.model-card .logo-wrap{
  width:64px;height:64px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--line);
  display:grid;place-items:center;
  margin:0 auto 18px;
  box-shadow:0 8px 18px -8px rgba(17,26,34,.15);
}
.model-card .logo-wrap img{
  width:34px;height:34px;
}
.model-card h3{
  font-family:var(--display);
  font-size:22px;font-weight:900;
  letter-spacing:-.015em;color:var(--ink);
  margin-bottom:6px;
}
.model-card .vendor{
  font-size:11px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--gold-deep);font-weight:700;
  margin-bottom:16px;display:block;
}
.model-card p{
  font-size:14px;color:var(--ink-mute);line-height:1.6;
  margin-bottom:16px;
}
.model-card .strength{
  display:inline-block;
  font-size:11px;font-weight:700;color:var(--primary);
  background:var(--primary-soft);
  padding:5px 12px;border-radius:99px;
}

/* ───── Book section (David's book) ───── */
.book-section{
  padding:120px 0;
  background:linear-gradient(180deg,#0a1735 0%,#0c2a4d 100%);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.book-section::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:64px 64px;
  mask:radial-gradient(70% 60% at 50% 50%,#000 30%,transparent 90%);
  -webkit-mask:radial-gradient(70% 60% at 50% 50%,#000 30%,transparent 90%);
  pointer-events:none;
}
.book-section .container{position:relative}
.book-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
}
@media(max-width:900px){.book-grid{grid-template-columns:1fr;gap:56px}}
.book-text .fm-eyebrow{
  background:rgba(194,166,119,.12);
  border:1px solid rgba(194,166,119,.4);
  color:var(--gold);
  margin-bottom:18px;
}
.book-text h2{
  font-family:var(--display);
  font-size:clamp(32px,4vw,52px);
  line-height:1.05;letter-spacing:-.025em;font-weight:900;
  color:#fff;
  margin-bottom:24px;
}
.book-text h2 em{
  font-style:normal;color:var(--gold);display:block;
}
.book-text > p{
  font-size:17px;color:rgba(255,255,255,.78);line-height:1.7;
  margin-bottom:18px;max-width:540px;
}
.book-text blockquote{
  font-family:var(--display);
  font-size:17px;font-style:italic;
  color:#fff;
  border-left:3px solid var(--gold);
  padding:14px 0 14px 22px;
  margin:28px 0;
  line-height:1.55;
  max-width:540px;
}
.book-text .author-line{
  font-size:12px;color:rgba(255,255,255,.55);
  text-transform:uppercase;letter-spacing:.12em;font-weight:600;
  margin-bottom:24px;
  display:flex;align-items:center;gap:10px;
}
.book-text .author-line::before{
  content:"";width:24px;height:1px;background:var(--gold);
}
.book-text .btn-primary{
  background:var(--gold);color:var(--ink);border-color:var(--gold);
}
.book-text .btn-primary:hover{background:#d4ba8e;border-color:#d4ba8e}

/* Book cover mockup */
.book-mockup{
  display:flex;justify-content:center;align-items:center;
  perspective:1200px;
}
.book-cover{
  background:linear-gradient(135deg,#0a1735 0%,#0c2a4d 60%,#0f3144 100%);
  color:#fff;
  width:280px;
  aspect-ratio:5/7;
  padding:36px 30px;
  border-radius:3px 8px 8px 3px;
  position:relative;
  border-left:8px solid var(--gold);
  box-shadow:
    0 50px 100px -25px rgba(0,0,0,.7),
    -8px 0 0 -2px rgba(0,0,0,.25),
    -14px 0 30px -10px rgba(0,0,0,.4),
    inset 1px 0 0 rgba(255,255,255,.08);
  transform:rotateY(-15deg) rotateX(4deg);
  animation:bookFloat 6s ease-in-out infinite;
  display:flex;flex-direction:column;
}
@keyframes bookFloat{
  0%,100%{transform:rotateY(-15deg) rotateX(4deg) translateY(0)}
  50%{transform:rotateY(-15deg) rotateX(4deg) translateY(-10px)}
}
.book-cover .b-author{
  font-size:11px;font-weight:700;color:var(--gold);
  text-transform:uppercase;letter-spacing:.18em;
  margin-bottom:14px;
}
.book-cover .b-title{
  font-family:var(--display);
  font-size:32px;font-weight:900;
  letter-spacing:-.025em;line-height:1;
  margin-bottom:14px;
  color:#fff;
}
.book-cover .b-and{
  font-family:var(--display);
  font-size:18px;font-weight:300;font-style:italic;
  color:var(--gold);
  margin:6px 0;
}
.book-cover .b-sub{
  font-size:13px;font-style:italic;
  color:rgba(255,255,255,.7);
  line-height:1.4;
  margin-top:auto;
  border-top:1px solid rgba(194,166,119,.25);
  padding-top:18px;
}
.book-cover .b-sub::before{
  content:"";display:block;width:30px;height:2px;
  background:var(--gold);margin-bottom:10px;
}

/* ───── Location card (about hero visual) ───── */
.location-wrap{position:relative;perspective:1400px}
.location-card{
  position:relative;z-index:2;
  border-radius:16px;
  overflow:hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 40px 80px -20px rgba(0,0,0,.55),
    0 20px 40px -20px rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.1);
  aspect-ratio:5/4;
  background:#0c2a4d;
  transform-style:preserve-3d;
  will-change:transform;
}
.location-img{
  position:absolute;inset:0;
  background-image:url('../koeln-standort.jpg');
  background-size:cover;
  background-position:center 38%;
  animation:locZoom 22s ease-in-out infinite alternate;
  transform-origin:center;
}
@keyframes locZoom{
  from{transform:scale(1)}
  to{transform:scale(1.08)}
}
.location-card::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(12,42,77,.15) 0%,rgba(12,42,77,0) 30%,rgba(12,42,77,.45) 75%,rgba(12,42,77,.85) 100%);
  pointer-events:none;
}
.location-card::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(110deg,rgba(15,49,68,.65) 0%,transparent 35%);
}

/* Pulsing location pin on the building */
.loc-pin{
  position:absolute;
  top:38%;left:48%;
  z-index:5;
  width:18px;height:18px;
  border-radius:50%;
  background:var(--gold);
  border:2.5px solid #fff;
  box-shadow:
    0 0 0 0 rgba(194,166,119,.7),
    0 4px 14px rgba(0,0,0,.4);
  animation:locPulse 2.6s ease-out infinite;
}
@keyframes locPulse{
  0%   {box-shadow:0 0 0 0 rgba(194,166,119,.7),0 4px 14px rgba(0,0,0,.4)}
  70%  {box-shadow:0 0 0 22px rgba(194,166,119,0),0 4px 14px rgba(0,0,0,.4)}
  100% {box-shadow:0 0 0 0 rgba(194,166,119,0),0 4px 14px rgba(0,0,0,.4)}
}
.loc-pin::after{
  content:"Schanzenstraße";
  position:absolute;
  left:24px;top:-2px;
  background:rgba(12,42,77,.92);
  backdrop-filter:blur(8px);
  color:#fff;
  padding:4px 10px;
  border-radius:5px;
  font-size:11px;font-weight:700;letter-spacing:.02em;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.12);
}

/* Top-right small badge: "Live" */
.loc-live{
  position:absolute;top:18px;right:18px;z-index:6;
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px;border-radius:99px;
  background:rgba(12,42,77,.7);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
}
.loc-live .ld{
  width:6px;height:6px;border-radius:50%;
  background:#28c840;
  box-shadow:0 0 0 0 rgba(40,200,64,.5);
  animation:pulseRec 2s ease-in-out infinite;
}

/* Floating stat cards (right side) */
.loc-float{
  position:absolute;z-index:6;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:12px;
  padding:14px 18px;
  box-shadow:0 18px 40px -10px rgba(0,0,0,.4);
  animation:floatY 5s ease-in-out infinite;
}
.loc-float .num{
  font-family:var(--display);
  font-size:24px;font-weight:900;color:var(--ink);letter-spacing:-.02em;line-height:1;
}
.loc-float .lbl{
  font-size:11px;color:var(--ink-mute);font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;
  margin-top:4px;
}
.loc-float.gold .num{color:var(--gold-deep)}
.loc-float.f1{top:14%;right:-18px;animation-delay:0s}
.loc-float.f2{top:42%;right:-12px;animation-delay:1.5s}
@media(max-width:1100px){
  .loc-float.f1,.loc-float.f2{right:14px}
}

/* Bottom address block */
.loc-address{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  padding:24px 28px 26px;
  color:#fff;
}
.loc-address .pre{
  font-size:11px;font-weight:600;color:var(--gold);
  text-transform:uppercase;letter-spacing:.18em;
  margin-bottom:6px;
  display:flex;align-items:center;gap:8px;
}
.loc-address .pre::before{
  content:"";width:20px;height:1px;background:var(--gold);
}
.loc-address .name{
  font-family:var(--display);
  font-size:22px;font-weight:900;letter-spacing:-.012em;
  margin-bottom:4px;
}
.loc-address .addr{
  font-size:13px;color:rgba(255,255,255,.78);font-weight:400;
}

/* ───── Founder / team showcase ───── */
.team-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:32px;
}
@media(max-width:780px){.team-grid{grid-template-columns:1fr}}
.team-card{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:0;
  overflow:hidden;
  position:relative;
  transition:transform .45s var(--ease),box-shadow .45s,border-color .45s;
  display:flex;flex-direction:column;
}
.team-card:hover{
  transform:translateY(-6px);
  border-color:var(--gold);
  box-shadow:0 30px 60px -22px rgba(17,26,34,.22);
}
.team-photo{
  position:relative;
  aspect-ratio:5/6;
  overflow:hidden;
  background:linear-gradient(180deg,var(--primary-soft) 0%,var(--bg-tint) 100%);
}
.team-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(15,49,68,.55) 100%);
  z-index:1;
}
.team-photo img{
  width:100%;height:100%;object-fit:cover;object-position:center 18%;
  transition:transform 1.2s var(--ease),filter .5s;
  filter:saturate(1.02) contrast(1.04);
}
.team-card:hover .team-photo img{transform:scale(1.05)}
.team-photo .role{
  position:absolute;left:24px;bottom:22px;z-index:2;
  font-size:11px;text-transform:uppercase;letter-spacing:.18em;
  color:var(--gold);font-weight:700;
}
.team-photo .role::before{
  content:"";display:inline-block;
  width:24px;height:1px;background:var(--gold);
  vertical-align:middle;margin-right:10px;
}
.team-body{padding:30px 32px 34px}
.team-name{
  font-family:var(--display);
  font-size:26px;font-weight:900;letter-spacing:-.018em;color:var(--ink);
  margin-bottom:14px;
}
.team-desc{
  font-size:15px;color:var(--ink-mute);line-height:1.65;
  margin-bottom:18px;
}
.team-quote{
  font-family:var(--display);
  font-size:14px;font-style:italic;color:var(--ink-2);
  border-left:2px solid var(--gold);
  padding-left:14px;margin:18px 0 22px;
  line-height:1.55;
}
.team-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.team-tags span{
  font-size:11px;font-weight:600;color:var(--ink-mute);
  background:var(--bg-tint);
  padding:4px 10px;border-radius:99px;
  letter-spacing:.02em;
}
.team-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:var(--primary);
  letter-spacing:.005em;
  transition:gap .25s var(--ease),color .25s;
}
.team-link::after{content:"→";transition:transform .25s var(--ease)}
.team-link:hover{color:var(--gold-deep)}
.team-link:hover::after{transform:translateX(4px)}

/* Story timeline (about page) */
.story-timeline{
  max-width:780px;margin:0 auto;
  position:relative;
}
.story-timeline::before{
  content:"";position:absolute;
  left:30px;top:14px;bottom:14px;width:2px;
  background:linear-gradient(180deg,var(--primary) 0%,var(--gold) 100%);
  border-radius:2px;
}
.story-step{
  position:relative;padding-left:84px;padding-bottom:54px;
}
.story-step:last-child{padding-bottom:0}
.story-step .year{
  position:absolute;left:0;top:0;
  width:62px;height:62px;border-radius:50%;
  background:var(--bg-soft);
  border:2px solid var(--primary);
  display:grid;place-items:center;
  font-family:var(--display);font-size:14px;font-weight:900;color:var(--primary);
  box-shadow:0 8px 18px -6px rgba(24,61,106,.2);
}
.story-step:last-child .year{border-color:var(--gold);color:var(--gold-deep);box-shadow:0 8px 18px -6px rgba(194,166,119,.4)}
.story-step h3{
  font-family:var(--display);
  font-size:22px;font-weight:700;color:var(--ink);
  margin-bottom:8px;letter-spacing:-.012em;
}
.story-step p{font-size:15.5px;color:var(--ink-mute);line-height:1.65;max-width:600px}

/* Values grid */
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.values-grid{grid-template-columns:1fr}}
.value-card{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:34px 30px;
  position:relative;
  transition:transform .35s var(--ease),border-color .3s;
}
.value-card:hover{transform:translateY(-4px);border-color:var(--gold)}
.value-card .num{
  font-family:var(--display);
  font-size:13px;font-weight:700;color:var(--gold-deep);
  letter-spacing:.06em;display:block;margin-bottom:14px;
}
.value-card h4{
  font-family:var(--display);
  font-size:20px;font-weight:700;color:var(--ink);
  margin-bottom:10px;letter-spacing:-.01em;
}
.value-card p{font-size:14.5px;color:var(--ink-mute);line-height:1.6}

/* Process timeline (vertical, premium) */
.timeline{
  max-width:780px;margin:0 auto;
  position:relative;
}
.timeline::before{
  content:"";position:absolute;
  left:24px;top:10px;bottom:10px;width:2px;
  background:linear-gradient(180deg,var(--primary),var(--gold));
  border-radius:2px;
}
.tl-step{
  position:relative;padding-left:72px;padding-bottom:48px;
}
.tl-step:last-child{padding-bottom:0}
.tl-step .dot{
  position:absolute;left:14px;top:6px;
  width:22px;height:22px;border-radius:50%;
  background:var(--bg);
  border:2px solid var(--primary);
  display:grid;place-items:center;
  font-family:var(--display);font-size:11px;font-weight:900;color:var(--primary);
}
.tl-step.gold .dot{border-color:var(--gold);color:var(--gold-deep)}
.tl-step h3{
  font-family:var(--display);
  font-size:22px;font-weight:700;color:var(--ink);
  margin-bottom:8px;letter-spacing:-.01em;
}
.tl-step p{font-size:15.5px;color:var(--ink-mute);line-height:1.65}

/* ============================================================
   NO-BOXES OVERRIDE · solide Akzente statt Hintergründe/Rahmen
   ============================================================ */

/* Service-Cards (Home) */
.service-card{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:30px 28px !important;
  border-top:2px solid var(--gold) !important;
}
.service-card:hover{
  transform:translateY(-4px) !important;
  box-shadow:none !important;
  border-color:var(--gold-deep) !important;
}

/* Team-Cards (das-sind-wir) */
.team-card{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.team-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:none !important;
  border:none !important;
}
.team-photo{
  border:1px solid var(--line);
  border-radius:0 !important;
  overflow:hidden;
}
.team-body{padding:22px 0 0 !important}

/* Feat-Cards (optimus-ai Features) */
.feat-card{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:30px 24px 26px 0 !important;
  border-left:2px solid rgba(212,175,55,.35) !important;
  padding-left:28px !important;
}
.feat-card:hover{
  transform:translateX(3px) !important;
  border-left-color:#D4AF37 !important;
  box-shadow:none !important;
}
.feat-card .ico-box{
  background:transparent !important;
  border:none !important;
  width:auto !important;height:auto !important;
  font-size:30px;margin-bottom:14px;color:#8a6d10 !important;
}

/* Val-Cards (karriere, siteclinic warum) */
.val-card{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:28px 24px 24px 0 !important;
  border-top:2px solid var(--gold) !important;
  padding-top:24px !important;
}
.val-card:hover{
  transform:translateY(-3px) !important;
  box-shadow:none !important;
}
.val-card .ico{
  background:transparent !important;
  width:auto !important;height:auto !important;
  font-size:26px;color:#8a6d10 !important;margin-bottom:14px;
}

/* Jury-Cards (siteclinic) */
.jury-card{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:24px 18px 0 !important;
  text-align:center;
}
.jury-card:hover{
  transform:translateY(-4px) !important;
  box-shadow:none !important;
}

/* TL-Step (siteclinic timeline) */
.tl-step{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:30px 22px 20px !important;
  border-top:2px solid var(--gold);
}
.tl-step .num{
  box-shadow:none !important;
}
/* Scope-Fix: der „vertikale Prozess-Timeline" (Process/About)
   braucht die alte Spacing-/Linien-Logik — kein Gold-Oberrand hier. */
.timeline > .tl-step{
  padding:0 0 48px 72px !important;
  border-top:none !important;
}
.timeline > .tl-step:last-child{padding-bottom:0 !important}

/* NSP (night speakers) */
.nsp{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:28px 24px 28px 0 !important;
  border-left:2px solid rgba(212,175,55,.35);
  padding-left:28px !important;
}
.nsp:hover{
  transform:translateX(3px) !important;
  box-shadow:none !important;
  border-left-color:#D4AF37 !important;
}

/* PSP (past speakers slider cards) */
.psp{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:20px 16px !important;
  border-top:2px solid var(--gold);
}
.psp:hover{
  transform:translateY(-4px) !important;
  box-shadow:none !important;
  border-color:var(--gold-deep) !important;
}

/* Jobs-Wrap (karriere mmp jobs container) */
.jobs-wrap{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:32px 0 !important;
  border-top:2px solid var(--gold) !important;
}

/* Sc-Form-Wrap (siteclinic form) */
.sc-form-wrap{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:36px 0 0 !important;
  border-top:2px solid var(--gold) !important;
}
/* Form-Felder bekommen klare Kanten (bleiben lesbar) */
.sc-field input[type=text],
.sc-field input[type=email],
.sc-field input[type=tel],
.sc-field input[type=url],
.sc-field select,
.sc-field textarea{
  border-radius:0 !important;
  border:1.5px solid rgba(24,61,106,.2) !important;
  background:transparent !important;
}
.sc-field input:focus,
.sc-field select:focus,
.sc-field textarea:focus{
  background:#fff !important;
  border-color:#D4AF37 !important;
}
.sc-cat-opt label{
  border-radius:0 !important;
  background:transparent !important;
  border:2px solid rgba(24,61,106,.15) !important;
}
.sc-cat-opt:hover label{background:transparent !important}
.sc-cat-opt input[type=radio]:checked + label{
  background:transparent !important;
  border-color:#D4AF37 !important;
  box-shadow:inset 0 0 0 2px #D4AF37 !important;
}
.sc-summary{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  border-top:1px solid var(--line) !important;
  border-bottom:1px solid var(--line) !important;
  padding:16px 0 !important;
}

/* Ticket-Box (konferenz hero) — kein Gradient */
.ticket{
  background:transparent !important;
  border:1.5px solid rgba(212,175,55,.45) !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* Sections mit bg-soft → transparent (keine Bänder mehr) */
.section-light{background:transparent !important}
section[style*="bg-soft"]{background:transparent !important}

/* Foot-links Hover ohne Verlauf, einfarbig */
.foot-col a:hover{transform:none !important}

/* ───── Sitewide Club-Banner (dismissable) ───── */
:root{--kd-banner-h:40px}
.kd-club-banner{
  position:fixed;top:0;left:0;right:0;z-index:200;height:var(--kd-banner-h);
  background:linear-gradient(90deg,#0B1620 0%,#162B40 50%,#0B1620 100%);
  border-bottom:1px solid rgba(212,175,55,.35);
  display:flex;align-items:center;color:#fff;
  font-size:13px;letter-spacing:.005em;line-height:1.3;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
  font-family:var(--sans);
}
.kd-has-banner{padding-top:var(--kd-banner-h)}
.kd-has-banner .site-header{top:var(--kd-banner-h)}
.kd-cb-inner{
  max-width:1180px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:16px;width:100%;
}
.kd-cb-msg{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,255,255,.88)}
.kd-cb-msg strong{color:#D4AF37;font-weight:700;margin-right:12px;text-transform:uppercase;font-size:10.5px;letter-spacing:.2em}
.kd-cb-text--mob{display:none}
.kd-cb-cta{
  flex-shrink:0;color:#0B1620;background:#D4AF37;padding:7px 14px;border-radius:5px;
  font-weight:700;font-size:12.5px;letter-spacing:.01em;
  text-decoration:none;transition:background .2s,transform .2s;line-height:1;
  display:inline-flex;align-items:center;gap:6px;
}
.kd-cb-cta:hover{background:#E0BB55;transform:translateY(-1px)}
.kd-cb-close{
  flex-shrink:0;background:transparent;border:0;color:rgba(255,255,255,.55);
  font-size:20px;line-height:1;padding:4px 8px;cursor:pointer;transition:color .2s;
}
.kd-cb-close:hover{color:#fff}
@media(max-width:820px){
  .kd-cb-text--desk{display:none}
  .kd-cb-text--mob{display:inline}
}
@media(max-width:560px){
  .kd-club-banner{font-size:12px}
  .kd-cb-msg strong{display:none}
  .kd-cb-inner{gap:10px;padding:0 14px}
  .kd-cb-cta{padding:6px 11px;font-size:11.5px}
}

/* ════════ Hell/Dunkel-Switcher + helles Theme (sitewide) ════════ */
.nav .nav-cta{margin-right:4px}
.theme-toggle{
  position:relative;flex-shrink:0;margin-left:12px;
  width:54px;height:28px;border-radius:999px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.24);
  transition:background .25s,border-color .25s
}
.theme-toggle::before{content:"☀";position:absolute;left:7px;top:50%;transform:translateY(-50%);font-size:12px;line-height:1;opacity:.85}
.theme-toggle::after{content:"☾";position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:11px;line-height:1;opacity:.55}
.theme-toggle .tt-thumb{
  position:absolute;top:50%;left:3px;width:22px;height:22px;border-radius:50%;
  background:var(--gold);transform:translateY(-50%);z-index:1;
  box-shadow:0 2px 7px rgba(0,0,0,.45);transition:transform .28s var(--ease),background .25s
}
.theme-toggle:hover{border-color:rgba(255,255,255,.4)}
html[data-theme="dark"] .theme-toggle .tt-thumb{transform:translate(26px,-50%)}
@media(max-width:400px){.theme-toggle{margin-left:8px}}

/* Helles Theme: heller Header-Balken + Navy-Navi (am Seitenanfang; gescrollt bleibt dunkel/weiß) */
html[data-theme="light"] .site-header:not(.scrolled){
  background:rgba(246,246,244,.92);
  -webkit-backdrop-filter:saturate(160%) blur(12px);backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid rgba(34,54,79,.10)
}
html[data-theme="light"] .site-header:not(.scrolled) .logo{color:rgb(34,54,79)}
html[data-theme="light"] .site-header:not(.scrolled) .logo-mark{content:url(/assets/konversion-digital-logo-navy.png);filter:none}
html[data-theme="light"] .site-header:not(.scrolled) .nav-links a{color:rgb(34,54,79)}
html[data-theme="light"] .site-header:not(.scrolled) .nav-links a:hover{color:rgb(20,34,52)}
html[data-theme="light"] .site-header:not(.scrolled) .nav-links .has-sub .caret{color:rgb(34,54,79)}
html[data-theme="light"] .site-header:not(.scrolled) .theme-toggle{border-color:rgba(34,54,79,.5);background:rgba(34,54,79,.08)}
html[data-theme="light"] .site-header:not(.scrolled) .theme-toggle::before,
html[data-theme="light"] .site-header:not(.scrolled) .theme-toggle::after{color:rgb(34,54,79);opacity:.85}
/* Dropdown-Menüs in der hellen Version weiß */
html[data-theme="light"] .site-header:not(.scrolled) .nav-links .sub{
  background:#fff;border-color:rgba(34,54,79,.12);
  box-shadow:0 24px 50px -18px rgba(34,54,79,.3)
}
html[data-theme="light"] .site-header:not(.scrolled) .nav-links .sub a{color:rgb(34,54,79)}
html[data-theme="light"] .site-header:not(.scrolled) .nav-links .sub a:hover{background:rgba(34,54,79,.07);color:rgb(20,34,52)}

/* ════ Helles Theme: gesamte obere Fläche (.opener/Hero) hell ════ */
html[data-theme="light"] .opener{background:#f6f6f4;color:rgb(34,54,79)}
html[data-theme="light"] .opener::before{display:none}
/* Unterseiten-Hero (.inner-hero) — Schrift in Navy */
html[data-theme="light"] .inner-hero h1{color:rgb(34,54,79)}
html[data-theme="light"] .inner-hero h1 em{color:var(--gold-deep)}
html[data-theme="light"] .inner-hero .lead{color:rgba(34,54,79,.82)}
html[data-theme="light"] .inner-hero .tldr{background:#fff;border-color:var(--line)}
html[data-theme="light"] .inner-hero .tldr p{color:rgba(34,54,79,.82)}
html[data-theme="light"] .inner-hero .tldr strong{color:rgb(34,54,79)}
html[data-theme="light"] .eyebrow{color:var(--gold-deep)}
html[data-theme="light"] .breadcrumb a{color:rgba(34,54,79,.7)}
html[data-theme="light"] .breadcrumb .sep{color:var(--gold-deep)}
html[data-theme="light"] .breadcrumb .here{color:var(--gold-deep)}
/* Startseiten-/Spezial-Hero (.hero) — hero-title bleibt gold (#aa8e5f); restliche Schrift Navy */
html[data-theme="light"] .hero .hero-sub{color:rgba(34,54,79,.82)}
html[data-theme="light"] .hero .hero-trust{color:rgba(34,54,79,.7);border-top-color:rgba(34,54,79,.16)}
html[data-theme="light"] .hero .hero-trust strong{color:rgb(34,54,79)}
html[data-theme="light"] .hero .btn-ghost{border-color:var(--line-strong);color:var(--ink)}
html[data-theme="light"] .hero .btn-ghost:hover{border-color:var(--gold-deep);color:var(--gold-deep);background:transparent}

/* Logo-Strip bleibt IMMER blau (eigener Hintergrund, auch im hellen Theme) */
.logo-strip{background:#0c2a4d}

/* ht-line (erste Hero-Titelzeile): dunkel = weiß, hell = Background-Blau */
.hero-title .ht-line{color:#fff}
html[data-theme="light"] .hero .ht-line{color:#0c2a4d}

/* Sekundärer CTA (Ghost-Button) im Hero: hell = Navy-Kontur/Schrift (sitewide) */
html[data-theme="light"] .opener .btn-ghost{border-color:var(--line-strong);color:rgb(34,54,79)}
html[data-theme="light"] .opener .btn-ghost:hover{border-color:var(--gold-deep);color:var(--gold-deep);background:transparent}

/* ══ Glass-Navi für helle Seiten · Klasse .nav-glass am <header> (22.07.2026) ══
   Milchglas-Bar + Navy-Text, damit die Navi auf hellen Heros (z. B. /nebrai/pakete.html)
   lesbar & edel wirkt. Wirkt NUR wo die Klasse gesetzt ist – dunkle Seiten bleiben unberührt. */
.site-header.nav-glass{
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(255,255,255,.55);
  box-shadow:0 8px 32px -14px rgba(17,26,34,.28),inset 0 1px 0 rgba(255,255,255,.75);
}
.site-header.nav-glass.scrolled{
  background:rgba(255,255,255,.72);
  border-bottom-color:rgba(17,26,34,.08);
  box-shadow:0 12px 38px -14px rgba(17,26,34,.34),inset 0 1px 0 rgba(255,255,255,.85);
}
/* Navy-Text + Navy-Logo */
.site-header.nav-glass .logo{color:rgb(34,54,79)}
.site-header.nav-glass .logo-mark{filter:none;content:url(/assets/konversion-digital-logo-navy.png)}
.site-header.nav-glass .nav-links a{color:rgb(34,54,79)}
.site-header.nav-glass .nav-links a:hover{color:rgb(20,34,52)}
.site-header.nav-glass .nav-links .has-sub .caret{color:rgb(34,54,79)}
/* Sub-Dropdown als helles Glas */
.site-header.nav-glass .nav-links .sub{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  border-color:rgba(17,26,34,.10);
  box-shadow:0 24px 50px -18px rgba(17,26,34,.32);
}
.site-header.nav-glass .nav-links .sub a{color:rgb(34,54,79)}
.site-header.nav-glass .nav-links .sub a:hover{background:rgba(34,54,79,.08);color:rgb(20,34,52)}

/* ───── Sitewide Podcast-Toast (neue TRIEBWERK-Folge) ─────────────────────
   Markup wird von assets/js/site.js erzeugt, Daten kommen aus
   /podcast-latest.php. Unten rechts, erscheint erst nach der
   Consent-Entscheidung und nur einmal pro Session. */
.kd-ep-toast{
  position:fixed;right:22px;bottom:22px;z-index:1200;
  width:min(372px,calc(100vw - 32px));
  padding:15px 16px 14px;
  border-radius:18px;
  border:1px solid rgba(194,166,119,.30);
  background:linear-gradient(160deg,rgba(16,38,72,.97) 0%,rgba(9,22,44,.98) 100%);
  box-shadow:0 30px 70px -18px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
          backdrop-filter:saturate(150%) blur(14px);
  color:#fff;font-family:var(--sans);
  overflow:hidden;
  opacity:0;transform:translateY(26px) scale(.96);
  transition:opacity .40s ease,transform .62s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
.kd-ep-toast.is-in{opacity:1;transform:none}
.kd-ep-toast.is-out{opacity:0;transform:translateY(14px) scale(.98)}
/* einmaliger Gold-Sweep beim Einblenden */
.kd-ep-toast::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(247,229,163,.14) 48%,transparent 66%);
  transform:translateX(-120%);
}
.kd-ep-toast.is-in::after{animation:kd-ept-sweep 1.5s cubic-bezier(.4,0,.2,1) .45s 1 forwards}
@keyframes kd-ept-sweep{to{transform:translateX(120%)}}

.kd-ept-head{display:flex;align-items:center;gap:9px;margin-bottom:12px;position:relative;z-index:1}
.kd-ept-eq{display:flex;align-items:flex-end;gap:2px;height:13px}
.kd-ept-eq span{
  display:block;width:2.5px;border-radius:2px;
  background:linear-gradient(180deg,#F7E5A3,#C2A677);
  animation:kd-ept-eq 1.05s ease-in-out infinite
}
.kd-ept-eq span:nth-child(1){height:45%;animation-delay:0s}
.kd-ept-eq span:nth-child(2){height:100%;animation-delay:.14s}
.kd-ept-eq span:nth-child(3){height:65%;animation-delay:.28s}
.kd-ept-eq span:nth-child(4){height:85%;animation-delay:.42s}
@keyframes kd-ept-eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.kd-ept-eq span{transform-origin:bottom}
.kd-ept-kicker{
  font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold)
}
.kd-ept-close{
  margin-left:auto;width:26px;height:26px;border-radius:8px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;line-height:1;color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  transition:color .2s,background .2s
}
.kd-ept-close:hover{color:#fff;background:rgba(255,255,255,.12)}

.kd-ept-body{display:flex;gap:13px;align-items:flex-start;position:relative;z-index:1}
.kd-ept-cover{
  flex:0 0 auto;width:104px;height:70px;border-radius:11px;overflow:hidden;
  border:1px solid rgba(255,255,255,.10);display:block;
  transition:transform .3s var(--ease)
}
.kd-ept-cover:hover{transform:translateY(-2px)}
.kd-ept-cover img{width:100%;height:100%;object-fit:cover;display:block}
.kd-ept-txt{min-width:0}
.kd-ept-guest{font-weight:800;font-size:15px;line-height:1.25;color:#fff;letter-spacing:-.005em}
.kd-ept-sub{font-size:11.5px;color:rgba(255,255,255,.52);margin-top:3px}
.kd-ept-title{
  font-size:12.5px;line-height:1.35;color:rgba(255,255,255,.70);margin-top:7px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.kd-ept-links{display:flex;gap:8px;margin-top:14px;position:relative;z-index:1}
.kd-ept-link{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:37px;border-radius:10px;
  font-size:12.5px;font-weight:700;letter-spacing:.01em;color:#fff;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  transition:background .2s,border-color .2s,color .2s,transform .2s
}
.kd-ept-link svg{width:15px;height:15px;fill:currentColor;flex:0 0 auto}
.kd-ept-link:hover{transform:translateY(-1px)}
.kd-ept-link.is-spotify:hover{background:rgba(30,215,96,.15);border-color:rgba(30,215,96,.55);color:#1ED760}
.kd-ept-link.is-youtube:hover{background:rgba(255,45,45,.14);border-color:rgba(255,45,45,.5);color:#FF5A5A}

@media(max-width:520px){
  .kd-ep-toast{right:12px;left:12px;bottom:12px;width:auto;padding:13px 13px 12px}
  .kd-ept-cover{width:84px;height:58px}
  .kd-ept-guest{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .kd-ep-toast{transform:none;transition:opacity .25s ease}
  .kd-ep-toast.is-in{transform:none}
  .kd-ep-toast.is-out{transform:none}
  .kd-ep-toast.is-in::after{animation:none}
  .kd-ept-eq span{animation:none}
  .kd-ept-cover:hover,.kd-ept-link:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO-NEBEL, sitewide Standard-Optik (10.09.2026)
   ───────────────────────────────────────────────────────────────────────────
   Übernommen von /landingpage-optimierung/, wo die Optik am 08.09.2026
   entstanden ist. Dort stand der Block noch inline in der Seite. Er liegt
   jetzt zentral hier, damit die Startseite und alle Unterseiten nur noch die
   Klasse `hero-nebel` an ihrer Hero-Sektion tragen müssen und nicht jede
   Seite 200 Zeilen CSS mitschleppt.

   Drei Ebenen, in dieser Reihenfolge:
     1. Grundfarbe #0B2038. Sie steht VOR dem Bild, damit die Sektion auch
        dunkel ist, solange das Bild lädt oder gar nicht ankommt. Sonst stünde
        weiße Schrift kurz auf Weiß.
     2. Das Nebelbild, formatfüllend.
     3. Ein Verlauf von links, der die Textspalte abdunkelt. Ohne ihn hängt die
        Lesbarkeit davon ab, wo im Bild gerade eine helle Schwade liegt.

   Die Klasse hängt immer an der Hero-Sektion (.hero oder .inner-hero), nie am
   .opener: dessen ::before und ::after sind bereits für den Mesh-Glow und das
   Raster belegt.
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-nebel{
  position:relative;isolation:isolate;
  background-color:#0B2038;
  color:#fff;
}
.hero-nebel::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url('/assets/img/lp/hero-nebel.webp') center/cover no-repeat;
}
.hero-nebel::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg, rgba(6,20,36,.94) 0%, rgba(8,26,46,.78) 42%, rgba(10,32,56,.35) 72%, rgba(10,32,56,.15) 100%),
    linear-gradient(180deg, rgba(6,20,36,.55) 0%, rgba(6,20,36,0) 30%, rgba(6,20,36,.6) 100%);
}
/* Die schwebenden Goldpunkte würden auf dem Bild schmutzig aussehen. */
.hero-nebel .hero-orbs{display:none}

.hero-nebel .breadcrumb,
.hero-nebel .breadcrumb a{color:rgba(255,255,255,.62)}
.hero-nebel .breadcrumb a:hover{color:#fff}
.hero-nebel .eyebrow{color:var(--gold-2,#C2A677)}
.hero-nebel .hero-title,
.hero-nebel .hero-title .ht-line{color:#fff}
/* Bewusst KEINE pauschale Farbregel fuer h1, p oder .lead: der Hero war auf
   allen Seiten schon dunkel, die Textfarben stimmen also bereits. Eine
   pauschale Regel wuerde nur helle Kaesten im Hero unlesbar machen. */
.hero-nebel .hero-trust,
.hero-nebel .hero-trust .item{color:rgba(255,255,255,.75)}
.hero-nebel .hero-trust strong{color:#fff}
.hero-nebel .btn-ghost{
  color:#fff;border-color:rgba(255,255,255,.4);background:transparent;
}
.hero-nebel .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* Bildrahmen und Kundenlogos, falls die Seite sie im Hero führt. */
.hero-nebel .hv-frame{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  box-shadow:0 50px 110px -40px rgba(0,0,0,.85), 0 6px 22px -10px rgba(0,0,0,.5);
}
.hero-nebel .hv-frame figcaption{
  color:rgba(255,255,255,.66);
  background:rgba(6,20,36,.5);
  border-top-color:rgba(255,255,255,.1);
}
.hero-nebel .hero-logos-label{color:rgba(255,255,255,.6);opacity:1}
.hero-nebel .hero-logos-track img{filter:brightness(0) invert(1);opacity:.62}
.hero-nebel .hero-logos-track img:hover{opacity:1}

/* Kleine Schirme laden die leichtere Fassung des Bildes. */
@media(max-width:760px){
  .hero-nebel::before{background-image:url('/assets/img/lp/hero-nebel-klein.webp')}
}

/* ═══════════════════════════════════════════════════════════════════════════
   KUNDENLOGOS IM HERO (10.09.2026)
   ───────────────────────────────────────────────────────────────────────────
   Uebernommen von /landingpage-optimierung/, wo der Logo-Streifen seit dem
   08.09.2026 im Hero liegt statt als eigene Sektion darunter. Dort stand das
   CSS inline, jetzt liegt es zentral hier.

   Unterschied zur alten `.logo-strip`: kein eigener Kasten mit eigenem
   Hintergrund mehr, sondern ein ruhiger Streifen auf dem Hero-Grund. Er
   schliesst den Hero ab, statt eine zweite Sektion aufzumachen.

   Der Grundzustand ist fuer HELLEN Grund gebaut: grayscale plus brightness(0)
   macht jedes Logo schwarz, die Deckkraft nimmt es zurueck. Sonst
   konkurrieren fuenfzehn Firmenfarben mit der Ueberschrift darueber. Auf dem
   Nebel-Hero dreht der .hero-nebel-Block weiter oben sie auf Weiss.
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-logos{
  margin-top:clamp(34px,4vw,52px);
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
}
.hero-logos-label{
  margin:0 0 20px;text-align:center;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-mute,#5A6470);opacity:.75;
}
.hero-logos-track{
  display:flex;align-items:center;gap:clamp(40px,5vw,68px);width:max-content;
  animation:heroLogoLauf 48s linear infinite;
}
.hero-logos:hover .hero-logos-track{animation-play-state:paused}
@keyframes heroLogoLauf{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.hero-logos-track img{
  height:30px;width:auto;flex-shrink:0;
  filter:grayscale(1) brightness(0);
  opacity:.38;
  transition:opacity .3s ease;
}
.hero-logos-track img:hover{opacity:.72}
/* Verlinkte Logos duerfen die Reihe nicht aufreissen. */
.hero-logos-track a{display:flex;align-items:center;flex-shrink:0;line-height:0}
.hero-logos-track a img{display:block}
@media(max-width:640px){
  .hero-logos-track img{height:24px}
}
/* Ohne Bewegung wird aus der Spur ein ruhiges Raster. Die Kopie fuer den
   Umlauf waere dann sichtbar doppelt, deshalb hier ausgeblendet. */
@media(prefers-reduced-motion:reduce){
  .hero-logos{-webkit-mask-image:none;mask-image:none}
  .hero-logos-track{
    animation:none;width:auto;flex-wrap:wrap;justify-content:center;gap:30px 44px;
  }
  .hero-logos-track img[aria-hidden="true"],
  .hero-logos-track a[aria-hidden="true"]{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Freistehende Glasleiste (14.09.2026)

   Die Kopfleiste war eine über die volle Breite laufende Zeile, die beim
   Scrollen einen blauen Balken bekam. Jetzt ist sie eine eigenständige Fläche:
   abgesetzt vom oberen Rand, abgerundet, mit Milchglas dahinter.

   Warum als Anhang und nicht in den Regeln oben: So bleibt der alte Zustand im
   Original stehen und ist mit dem Löschen dieses Blocks wieder da. Die wenigen
   Eigenschaften, die überschrieben werden müssen, stehen hier ausdrücklich.

   Die Lesbarkeit ist der Grund für die zwei Zustände. Milchglas übernimmt die
   Helligkeit dessen, was dahinter liegt. Oben liegt der dunkle Hero, dort
   genügt ein heller Schleier und weisse Schrift steht mit grossem Abstand.
   Weiter unten liegen helle Abschnitte; derselbe helle Schleier ergäbe dort
   weisse Schrift auf hellem Grund. Ab 30 Pixel Scrollweg setzt site.js die
   Klasse `scrolled`, und die Fläche kippt auf eine dunkle Tönung. Nachgerechnet
   auf hellem Grund (#F6F6F4): rgb(77,90,103), Kontrast zu Weiss 6,7:1.
   ═══════════════════════════════════════════════════════════════════════════ */

.site-header{
  --nav-rand: 0px;    /* seitlicher Abstand der Fläche zum Fensterrand */
  /* Abstand nach oben, damit die Leiste freisteht. 1em = 16px, weil weder
     html noch body einen Schriftgrad setzen, plus 30px auf Ansage. Die Zahl
     hängt an der Hero-Geometrie: Wird sie geändert, ändern sich die drei
     Konstanten in .claude/skills/triebwerk-hero/tools/geometrie-pruefen.php
     und die oberen Polster in index.php mit. */
  --nav-oben: calc(1em + 30px);
  --nav-bogen: 20px;

  top: var(--nav-oben);
  /* Die alten Werte ausdrücklich zurücknehmen: Die Fläche ist jetzt .nav,
     nicht mehr die Leiste selbst. */
  padding: 0 var(--nav-rand);
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header.scrolled{
  padding: 0 var(--nav-rand);
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header .nav{
  position: relative;          /* Bezug für das aufgeklappte Menü darunter */
  /* Waagerecht so viel, dass das Logo zusammen mit --nav-rand genau 28px vom
     Fensterrand steht — dieselbe Kante wie der Seiteninhalt. */
  padding: 10px calc(28px - var(--nav-rand));
  border-radius: var(--nav-bogen);
  background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    0 10px 34px -10px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.16);   /* die Lichtkante oben macht das Glas */
  transition:
    background .3s var(--ease),
    border-color .3s var(--ease),
    box-shadow .3s var(--ease);
}
.site-header.scrolled .nav{
  background: rgba(13,34,56,.72);
  border-color: rgba(255,255,255,.12);
  box-shadow:
    0 14px 40px -12px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.1);
}

/* Ohne Milchglas keine Durchsicht. Dann eine deckende Fläche, sonst stünde die
   weisse Schrift über hellem Inhalt ohne Untergrund. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .site-header .nav{ background: rgba(13,34,56,.94) }
  .site-header.scrolled .nav{ background: rgba(13,34,56,.96) }
}

@media(max-width:1259px){
  .site-header{ --nav-rand: 14px }
}
@media(max-width:600px){
  .site-header{ --nav-bogen: 16px }   /* Abstand nach oben bleibt 1em */
  .site-header .nav{ padding: 8px calc(28px - var(--nav-rand)) }
}

/* Das aufgeklappte Menü wird eine zweite freistehende Fläche unter der ersten,
   statt eines Kastens, der von Fensterkante zu Fensterkante läuft.

   Die Auswahl ist absichtlich enger als nötig. Dieselben Regeln stehen in
   tw_style() in _inc/chrome.php und werden nach dieser Datei ausgeliefert;
   ohne das zusätzliche `ul` würden sie hier gewinnen. */
@media(max-width:920px){
  .site-header .nav ul.nav-links.open{
    top: calc(100% + 10px);
    border-radius: var(--nav-bogen);
    border-top: 0;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(13,34,56,.82);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    box-shadow:
      0 18px 44px -12px rgba(0,0,0,.6),
      inset 0 1px 0 rgba(255,255,255,.12);
    padding: 10px 18px 16px;
    max-height: calc(100dvh - var(--nav-oben) - 96px);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    .site-header .nav ul.nav-links.open{ background: rgba(13,34,56,.97) }
  }
}

@media(prefers-reduced-motion:reduce){
  .site-header, .site-header .nav{ transition: none }
}