/* ============================================================
   INSPEKTO KABLAN — PREMIUM DARK
   Kino-Look: Near-Black, Signal-Orange, Grain, Glas, große Typo
   ============================================================ */

@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/barlow-condensed-v13-latin-500.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/barlow-condensed-v13-latin-600.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/barlow-condensed-v13-latin-700.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-v20-latin-regular.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-v20-latin-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-v20-latin-600.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-mono-v20-latin-regular.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-mono-v20-latin-500.woff2') format('woff2');}

:root{
  --bg:#0B0D0C;
  --bg-2:#101312;
  --panel:rgba(255,255,255,.045);
  --panel-brd:rgba(255,255,255,.09);
  --txt:#F4F2EC;
  --dim:#9AA5A0;
  --orange:#FF5C1A;
  --orange-soft:rgba(255,92,26,.14);
  --green:#5DBB8B;
  --f-d:'Barlow Condensed',Impact,sans-serif;
  --f-b:'Inter',-apple-system,sans-serif;
  --f-m:'IBM Plex Mono','Courier New',monospace;
  --maxw:1280px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:var(--f-b); font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
/* Filmkorn über allem */
body::after{
  content:""; position:fixed; inset:0; z-index:999; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block;}
a{color:inherit;}
::selection{background:var(--orange); color:#000;}

h1,h2,h3{font-family:var(--f-d); font-weight:700; line-height:.95; margin:0 0 .35em; text-transform:uppercase; letter-spacing:.3px;}
h1{font-size:clamp(3.4rem,9vw,8rem);}
h2{font-size:clamp(2.4rem,5.5vw,4.6rem);}
h3{font-size:1.35rem; letter-spacing:.5px;}
p{margin:0 0 1em;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.kicker{
  font-family:var(--f-m); font-size:.75rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--orange); display:flex; align-items:center; gap:.8em; margin-bottom:1.4em;
}
.kicker::before{content:""; width:34px; height:1px; background:var(--orange);}
.dim{color:var(--dim);}

/* Scroll-Fortschritt */
#scrollbar{position:fixed; top:0; left:0; height:2px; background:var(--orange); width:0; z-index:1000; box-shadow:0 0 12px var(--orange);}

/* ===== NAV ===== */
header.site{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .3s, border .3s;
  border-bottom:1px solid transparent;
}
header.site.scrolled{background:rgba(11,13,12,.82); backdrop-filter:blur(14px); border-bottom-color:var(--panel-brd);}
.nav{
  max-width:var(--maxw); margin:0 auto; padding:20px 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{font-family:var(--f-d); font-weight:700; font-size:1.5rem; text-transform:uppercase; text-decoration:none; letter-spacing:.5px;}
.logo span{color:var(--orange);}
nav.links{display:flex; gap:34px;}
nav.links a{font-size:.9rem; color:var(--dim); text-decoration:none; transition:color .2s; position:relative;}
nav.links a:hover{color:var(--txt);}
nav.links a::after{content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--orange); transition:width .25s;}
nav.links a:hover::after{width:100%;}
.nav-cta{display:flex; gap:12px;}
@media(max-width:960px){nav.links,.nav-cta .btn-ghost{display:none;}}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-m); font-size:.82rem; letter-spacing:.04em;
  text-decoration:none; padding:1em 1.7em; border-radius:100px;
  border:1px solid transparent; cursor:pointer; position:relative; overflow:hidden;
  transition:transform .2s, box-shadow .3s, background .2s, color .2s;
}
.btn-fire{background:var(--orange); color:#0B0D0C; font-weight:500;}
.btn-fire:hover{transform:translateY(-2px); box-shadow:0 8px 34px rgba(255,92,26,.45);}
.btn-ghost{border-color:rgba(255,255,255,.25); color:var(--txt);}
.btn-ghost:hover{border-color:var(--txt); background:rgba(255,255,255,.06);}

/* ===== HERO ===== */
.hero{
  min-height:100svh; display:flex; align-items:flex-end; position:relative;
  padding:140px 0 0; overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
}
.hero-bg img{
  width:100%; height:100%; object-fit:cover; object-position:70% 20%;
  filter:grayscale(.35) contrast(1.08) brightness(.62);
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 78% 30%, rgba(255,92,26,.16), transparent 60%),
    linear-gradient(to right, rgba(11,13,12,.96) 22%, rgba(11,13,12,.55) 55%, rgba(11,13,12,.25)),
    linear-gradient(to top, var(--bg) 4%, transparent 45%);
}
.hero-inner{position:relative; z-index:2; width:100%; padding-bottom:64px;}
.hero h1{max-width:11ch;}
.hero h1 em{font-style:normal; color:var(--orange); position:relative; white-space:nowrap;}
.hero h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.08em;
  background:var(--orange); transform:scaleX(0); transform-origin:left;
  animation:underline 1s cubic-bezier(.2,.8,.2,1) 1.1s forwards;
}
@keyframes underline{to{transform:scaleX(1);}}
.hero .lede{max-width:52ch; font-size:1.12rem; color:var(--dim); margin:1.4em 0 2em;}
.hero-badge{
  position:absolute; right:28px; bottom:150px; z-index:3;
  font-family:var(--f-m); font-size:.72rem; color:var(--dim);
  border:1px solid var(--panel-brd); border-radius:8px;
  background:rgba(11,13,12,.6); backdrop-filter:blur(8px);
  padding:.9em 1.2em; max-width:230px; line-height:1.7;
}
.hero-badge strong{color:var(--txt); display:block; font-size:.82rem;}
.hero-badge .live{color:var(--green);}
.hero-badge .live::before{content:"● "; animation:blink 1.4s infinite;}
@keyframes blink{50%{opacity:.25;}}
@media(max-width:900px){.hero-badge{display:none;} .hero-bg img{object-position:70% 0%;}}

/* Einblend-Choreografie */
@keyframes rise{from{opacity:0; transform:translateY(34px);}to{opacity:1; transform:none;}}
.st>*{opacity:0; animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards;}
.st>*:nth-child(1){animation-delay:.1s;}
.st>*:nth-child(2){animation-delay:.25s;}
.st>*:nth-child(3){animation-delay:.45s;}
.st>*:nth-child(4){animation-delay:.65s;}

/* ===== MARQUEE ===== */
.marquee{
  border-top:1px solid var(--panel-brd); border-bottom:1px solid var(--panel-brd);
  overflow:hidden; padding:18px 0; background:var(--bg-2); position:relative; z-index:2;
}
.marquee-track{display:flex; gap:3.2em; width:max-content; animation:mq 28s linear infinite;}
.marquee-track span{
  font-family:var(--f-d); font-weight:600; font-size:1.25rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--dim); display:flex; align-items:center; gap:3.2em; white-space:nowrap;
}
.marquee-track span::after{content:"✦"; color:var(--orange); font-size:.8em;}
@keyframes mq{to{transform:translateX(-50%);}}

/* ===== STATS ===== */
.stats{padding:110px 0 40px;}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--panel-brd); border:1px solid var(--panel-brd); border-radius:14px; overflow:hidden;}
@media(max-width:860px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
.stat{background:var(--bg-2); padding:38px 30px; transition:background .3s;}
.stat:hover{background:#141816;}
.stat .n{font-family:var(--f-d); font-weight:700; font-size:clamp(3rem,6vw,4.6rem); line-height:1; color:var(--txt);}
.stat .n b{color:var(--orange); font-weight:700;}
.stat .l{font-family:var(--f-m); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-top:10px;}

/* ===== SECTIONS ===== */
section{padding:110px 0;}
.head{max-width:720px; margin-bottom:64px;}
.head p{color:var(--dim); font-size:1.05rem;}

/* Reveals */
.rv{opacity:0; transform:translateY(36px); filter:blur(6px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1), filter .8s;}
.rv.in{opacity:1; transform:none; filter:none;}
.rv2{transition-delay:.12s;} .rv3{transition-delay:.24s;}

/* ===== ANSPRUCHS-EXPLORER (Premium) ===== */
.explorer{background:linear-gradient(180deg,var(--bg) 0%, #0E1411 50%, var(--bg) 100%); position:relative;}
.seg{
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:44px;
}
.seg button{
  font-family:var(--f-d); font-weight:600; font-size:1.15rem; text-transform:uppercase; letter-spacing:.05em;
  background:transparent; color:var(--dim); border:1px solid var(--panel-brd);
  padding:.7em 1.6em; border-radius:100px; cursor:pointer;
  transition:all .25s;
}
.seg button:hover{color:var(--txt); border-color:rgba(255,255,255,.3);}
.seg button.on{background:var(--orange); border-color:var(--orange); color:#0B0D0C; box-shadow:0 6px 30px rgba(255,92,26,.4);}
.claims{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
@media(max-width:820px){.claims{grid-template-columns:1fr;}}
.claim{
  background:var(--panel); border:1px solid var(--panel-brd); border-radius:14px;
  padding:28px; position:relative; overflow:hidden;
  opacity:0; transform:translateY(16px); animation:cIn .5s ease forwards;
  transition:border-color .3s, transform .3s;
}
.claim:hover{border-color:rgba(255,92,26,.5); transform:translateY(-3px);}
.claim::before{
  content:""; position:absolute; top:0; left:0; width:3px; height:100%;
  background:linear-gradient(var(--orange), transparent);
}
@keyframes cIn{to{opacity:1; transform:none;}}
.claim .num{font-family:var(--f-m); font-size:.7rem; color:var(--orange); letter-spacing:.2em;}
.claim h3{margin:.5em 0 .3em; text-transform:none; font-family:var(--f-b); font-weight:600; font-size:1.08rem; letter-spacing:0;}
.claim p{color:var(--dim); font-size:.92rem; margin:0;}
.explorer-cta{margin-top:44px; display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
.explorer-note{font-family:var(--f-m); font-size:.74rem; color:var(--dim);}

/* ===== PROZESS ===== */
.process .step{
  display:grid; grid-template-columns:120px 1fr 380px; gap:44px; align-items:center;
  padding:54px 0; border-top:1px solid var(--panel-brd);
}
.process .step:last-child{border-bottom:1px solid var(--panel-brd);}
@media(max-width:960px){.process .step{grid-template-columns:70px 1fr; } .process .step .ph{grid-column:1/-1;}}
.process .no{
  font-family:var(--f-d); font-weight:700; font-size:clamp(3.4rem,6vw,5.4rem); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.28);
  transition:color .4s, -webkit-text-stroke .4s;
}
.process .step:hover .no{color:var(--orange); -webkit-text-stroke:1.5px var(--orange);}
.process h3{font-size:1.9rem;}
.process .t{font-family:var(--f-m); font-size:.72rem; letter-spacing:.18em; color:var(--orange); text-transform:uppercase;}
.process p{color:var(--dim); max-width:52ch; margin:.6em 0 0;}
.process .ph{
  border-radius:14px; overflow:hidden; border:1px solid var(--panel-brd);
  aspect-ratio:16/10; transform:perspective(900px) rotateY(0) rotateX(0); transition:transform .35s ease;
}
.process .ph img{width:100%; height:100%; object-fit:cover; filter:grayscale(.5) contrast(1.05) brightness(.85); transition:filter .4s, transform .6s;}
.process .step:hover .ph img{filter:grayscale(0) brightness(1); transform:scale(1.04);}

/* ===== VERSUS ===== */
.versus{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media(max-width:860px){.versus{grid-template-columns:1fr;}}
.vs-card{
  border-radius:16px; padding:44px; border:1px solid var(--panel-brd); position:relative; overflow:hidden;
}
.vs-card.a{background:var(--panel);}
.vs-card.b{background:linear-gradient(145deg, rgba(255,92,26,.14), rgba(255,92,26,.03)); border-color:rgba(255,92,26,.35);}
.vs-card .tag{font-family:var(--f-m); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);}
.vs-card.b .tag{color:var(--orange);}
.vs-card h3{font-size:1.7rem; margin-top:.6em;}
.vs-card ul{margin:1.2em 0 0; padding:0; list-style:none;}
.vs-card li{padding:.55em 0 .55em 1.6em; position:relative; color:var(--dim); font-size:.95rem;}
.vs-card li::before{content:"—"; position:absolute; left:0; color:var(--dim);}
.vs-card.b li::before{content:"✓"; color:var(--orange);}
.vs-card.b li{color:#E8E4DA;}

/* ===== PORTRAIT / ÜBER MICH ===== */
.about{position:relative; overflow:hidden;}
.about-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center;}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;}}
.about-ph{position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--panel-brd);}
.about-ph img{filter:grayscale(.25) contrast(1.06); width:100%;}
.about-ph::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(11,13,12,.55), transparent 55%);}
.about-ph .cred{
  position:absolute; left:18px; bottom:18px; z-index:2;
  font-family:var(--f-m); font-size:.72rem; color:var(--txt);
  background:rgba(11,13,12,.66); backdrop-filter:blur(8px);
  border:1px solid var(--panel-brd); border-radius:8px; padding:.8em 1.1em;
}
.vals{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:2.4em;}
@media(max-width:560px){.vals{grid-template-columns:1fr;}}
.val{border-top:1px solid var(--panel-brd); padding-top:16px;}
.val b{font-family:var(--f-d); font-size:1.2rem; text-transform:uppercase; letter-spacing:.04em;}
.val p{color:var(--dim); font-size:.9rem; margin:.4em 0 0;}

/* ===== QUOTES ===== */
.quotes{background:var(--bg-2); border-top:1px solid var(--panel-brd); border-bottom:1px solid var(--panel-brd);}
.q-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media(max-width:900px){.q-grid{grid-template-columns:1fr;}}
.q{
  background:var(--panel); border:1px solid var(--panel-brd); border-radius:16px; padding:34px;
  display:flex; flex-direction:column; gap:18px; transition:transform .3s, border-color .3s;
}
.q:hover{transform:translateY(-4px); border-color:rgba(255,255,255,.2);}
.q .stars{color:var(--orange); letter-spacing:3px;}
.q p{font-size:1.02rem; color:#E8E4DA; margin:0; flex:1;}
.q footer{font-family:var(--f-m); font-size:.72rem; color:var(--dim); letter-spacing:.08em; text-transform:uppercase;}

/* ===== FAQ ===== */
details.faq{border-top:1px solid var(--panel-brd);}
details.faq:last-of-type{border-bottom:1px solid var(--panel-brd);}
details.faq summary{
  cursor:pointer; list-style:none; padding:26px 0;
  font-family:var(--f-d); font-size:clamp(1.2rem,2.4vw,1.7rem); font-weight:600; text-transform:uppercase;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  transition:color .2s;
}
details.faq summary:hover{color:var(--orange);}
details.faq summary::after{content:"+"; font-family:var(--f-m); color:var(--orange); font-size:1.6rem; transition:transform .3s;}
details.faq[open] summary::after{transform:rotate(45deg);}
details.faq p{color:var(--dim); max-width:70ch; padding-bottom:26px; margin:0;}

/* ===== AREAS ===== */
.areas p{line-height:2.4;}
.pill{
  display:inline-block; font-size:.88rem; color:var(--dim);
  border:1px solid var(--panel-brd); border-radius:100px; padding:.35em 1em; margin:0 8px 8px 0;
  transition:all .25s; text-decoration:none;
}
.pill:hover, a.pill:hover{color:var(--txt); border-color:var(--orange); background:var(--orange-soft);}

/* ===== FINAL CTA ===== */
.final{
  position:relative; text-align:center; padding:150px 0; overflow:hidden;
}
.final::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(700px 400px at 50% 60%, rgba(255,92,26,.18), transparent 70%);
}
.final h2{font-size:clamp(3rem,8vw,6.5rem);}
.final .wrap{position:relative;}
.final .dim{max-width:52ch; margin:0 auto 2.2em;}
.tel-big{
  font-family:var(--f-d); font-weight:700; font-size:clamp(1.6rem,4vw,2.6rem);
  color:var(--txt); text-decoration:none; letter-spacing:.03em;
  border-bottom:3px solid var(--orange); transition:color .2s;
}
.tel-big:hover{color:var(--orange);}

/* ===== FOOTER ===== */
footer.site{border-top:1px solid var(--panel-brd); padding:70px 0 30px; background:var(--bg-2);}
.f-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px;}
@media(max-width:800px){.f-grid{grid-template-columns:1fr 1fr;}}
footer.site h4{font-family:var(--f-m); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin:0 0 1.2em;}
footer.site a{display:block; color:#C9CFCB; text-decoration:none; margin-bottom:.7em; font-size:.92rem; transition:color .2s;}
footer.site a:hover{color:var(--orange);}
.f-bottom{
  margin-top:54px; padding-top:24px; border-top:1px solid var(--panel-brd);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-family:var(--f-m); font-size:.7rem; color:var(--dim);
}
.f-word{
  font-family:var(--f-d); font-weight:700; text-transform:uppercase; line-height:.85;
  font-size:clamp(3.4rem,10vw,8.5rem); color:rgba(255,255,255,.05);
  user-select:none; margin-top:40px; white-space:nowrap; overflow:hidden;
}

/* ===== MOBILE CTA ===== */
.mobile-cta{
  position:fixed; bottom:14px; left:14px; right:14px; z-index:90;
  display:none; gap:10px; padding:10px;
  background:rgba(11,13,12,.8); backdrop-filter:blur(14px);
  border:1px solid var(--panel-brd); border-radius:100px;
}
.mobile-cta a{flex:1; justify-content:center;}
@media(max-width:640px){.mobile-cta{display:flex;}}

.skip-link{position:absolute; left:-999px;}
.skip-link:focus{left:16px; top:16px; background:var(--orange); color:#000; padding:10px; z-index:1001;}

@media (prefers-reduced-motion: reduce){
  .st>*{animation:none !important; opacity:1 !important;}
  .rv{opacity:1; transform:none; filter:none; transition:none;}
  .marquee-track{animation:none;}
  .hero h1 em::after{animation:none; transform:scaleX(1);}
  html{scroll-behavior:auto;}
}

/* ===== 3D EXPERIENCE ===== */
#xp{height:420vh; position:relative; background:var(--bg);}
#xp.xp-dead{display:none;}
.xp-sticky{position:sticky; top:0; height:100svh; overflow:hidden;}
#xp-canvas{width:100%; height:100%; display:block; opacity:0; transition:opacity 1.2s ease;}
#xp.xp-ready #xp-canvas{opacity:1;}
.xp-card{
  position:absolute; z-index:5; max-width:420px;
  left:6vw; top:50%; transform:translateY(-50%);
  opacity:0; transition:opacity .3s;
  background:rgba(11,13,12,.55); backdrop-filter:blur(12px);
  border:1px solid var(--panel-brd); border-radius:16px; padding:32px;
}
.xp-card:nth-child(odd){left:auto; right:6vw;}
.xp-card .num{font-family:var(--f-m); font-size:.7rem; color:var(--orange); letter-spacing:.22em;}
.xp-card h3{font-size:1.9rem; margin:.4em 0 .3em;}
.xp-card p{color:var(--dim); font-size:.95rem; margin:0;}
@media(max-width:700px){
  .xp-card, .xp-card:nth-child(odd){left:16px; right:16px; max-width:none; top:auto; bottom:110px; transform:none;}
}
.xp-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:5;
  font-family:var(--f-m); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
  animation:hintPulse 2.2s infinite;
}
@keyframes hintPulse{50%{opacity:.35;}}

/* ===== UNFALL-STORY (Scroll-Kino mit echten Fallfotos) ===== */
#story{height:520vh; position:relative; background:var(--bg);}
.story-sticky{position:sticky; top:0; height:100svh; overflow:hidden;}
.story-frame{position:absolute; inset:0;}
.story-frame img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.72) contrast(1.14) brightness(.66);
  transform:scale(1.08);
  will-change:opacity, transform;
}
.story-frame::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(11,13,12,.82) 100%),
    linear-gradient(to top, rgba(11,13,12,.85), transparent 40%),
    linear-gradient(to bottom, rgba(11,13,12,.6), transparent 30%);
}
.story-frame{opacity:0;}
.story-frame.f1{opacity:1;}
.story-head{
  position:absolute; top:90px; left:0; right:0; z-index:6; text-align:center;
  font-family:var(--f-m); font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--dim);
}
.story-head b{color:var(--orange); font-weight:500;}
.story-card{
  position:absolute; z-index:6; max-width:540px;
  left:6vw; bottom:12vh;
  opacity:0; transform:translateY(24px);
  background:rgba(11,13,12,.55); backdrop-filter:blur(12px);
  border:1px solid var(--panel-brd); border-left:3px solid var(--orange);
  border-radius:14px; padding:40px;
  transition:opacity .3s;
}
.story-card:nth-of-type(even){left:auto; right:6vw;}
.story-card .num{
  display:block; margin:0 0 .7rem;
  font-family:var(--f-m); font-size:1.3rem; font-weight:500;
  color:var(--orange); letter-spacing:.16em; line-height:1.2;
}
.story-card h3{font-size:2.4rem; margin:0 0 .35em;}
.story-card p{color:#C9CFCB; font-size:.93rem; margin:0;}
@media(max-width:700px){
  .story-card, .story-card:nth-of-type(even){left:16px; right:16px; max-width:none; bottom:100px; padding:26px;}
  .story-card .num{font-size:1rem; margin-bottom:.55rem;}
  .story-card h3{font-size:1.8rem;}
}
.story-progress{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:6;
  display:flex; gap:10px;
}
.story-progress span{width:34px; height:2px; background:rgba(255,255,255,.18); position:relative; overflow:hidden;}
.story-progress span i{position:absolute; inset:0; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .2s linear;}

/* Logo-Bild */
.logo img{height:46px; width:auto; display:block;}
footer.site .logo img{height:40px;}
@media(max-width:640px){.logo img{height:38px;}}

/* ===== HERO V3: Schwebendes Fahrzeug (Joker-Prinzip, dunkel) ===== */
.hero.car-mode{align-items:center; padding-top:120px;}
.hero.car-mode .hero-bg, .hero.car-mode .hero-badge{display:none;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; width:100%;}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;}}
.hero-car{position:relative; z-index:2;}
.hero-car::before{
  content:""; position:absolute; inset:-14% -8%;
  background:radial-gradient(closest-side, rgba(255,92,26,.28), transparent 72%);
  filter:blur(6px); z-index:-1;
}
.hero-car img{
  width:100%; height:auto;
  filter:drop-shadow(0 40px 44px rgba(0,0,0,.65)) saturate(.92) contrast(1.06);
  animation:carFloat 6s ease-in-out infinite;
}
@keyframes carFloat{0%,100%{transform:translateY(0) rotate(-.4deg);}50%{transform:translateY(-14px) rotate(.4deg);}}
.hero-car .car-tag{
  position:absolute; top:4%; right:2%;
  font-family:var(--f-m); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--orange); border:1px solid rgba(255,92,26,.5); border-radius:100px;
  padding:.55em 1.1em; background:rgba(11,13,12,.6); backdrop-filter:blur(6px);
}
.hero-proof{display:flex; gap:26px; flex-wrap:wrap; margin-top:2em;}
.hero-proof .hp{display:flex; align-items:center; gap:.7em; font-size:.85rem; color:var(--dim);}
.hero-proof .hp b{color:var(--txt); font-family:var(--f-d); font-size:1.25rem; letter-spacing:.03em;}
.hero-proof .g{color:#FBBC05; letter-spacing:1px;}

/* ===== GOOGLE-REVIEW-KARTEN ===== */
.g-badge{
  display:inline-flex; align-items:center; gap:14px;
  border:1px solid var(--panel-brd); border-radius:14px; padding:14px 22px;
  background:var(--panel); margin-bottom:34px;
}
.g-badge .score{font-family:var(--f-d); font-weight:700; font-size:2.2rem; line-height:1;}
.g-badge .stars{color:#FBBC05; letter-spacing:2px;}
.g-badge small{color:var(--dim); font-family:var(--f-m); font-size:.7rem; display:block;}
.q .who{display:flex; align-items:center; gap:12px;}
.q .ava{
  width:42px; height:42px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-d); font-weight:700; font-size:1.1rem;
  background:linear-gradient(145deg, var(--orange), #B33A0A); color:#fff;
}
.q .who b{display:block; font-size:.92rem; color:var(--txt);}
.q .who small{color:var(--dim); font-family:var(--f-m); font-size:.68rem;}

/* ===== ANSPRUCHS-CHECK ===== */
.check{background:linear-gradient(160deg, #101312, #0E1613 60%, var(--bg)); border-top:1px solid var(--panel-brd); border-bottom:1px solid var(--panel-brd);}
.check-box{
  max-width:720px; margin:0 auto;
  background:rgba(11,13,12,.5); backdrop-filter:blur(10px);
  border:1px solid var(--panel-brd); border-radius:20px; padding:44px;
  min-height:330px;
}
@media(max-width:640px){.check-box{padding:26px;}}
.check-q{font-family:var(--f-d); font-size:clamp(1.5rem,3.4vw,2.2rem); font-weight:600; text-transform:uppercase; margin-bottom:1em;}
.check-opts{display:grid; gap:12px;}
.check-opts button{
  text-align:left; font-family:var(--f-b); font-size:1rem; color:var(--txt);
  background:var(--panel); border:1px solid var(--panel-brd); border-radius:12px;
  padding:1.05em 1.3em; cursor:pointer; transition:all .2s;
}
.check-opts button:hover{border-color:var(--orange); background:rgba(255,92,26,.1); transform:translateX(4px);}
.check-steps{font-family:var(--f-m); font-size:.7rem; letter-spacing:.2em; color:var(--dim); margin-bottom:1.6em;}
.check-steps b{color:var(--orange);}
.check-result h3{font-size:1.9rem;}
.check-result p{color:var(--dim);}
.check-back{background:none; border:none; color:var(--dim); font-family:var(--f-m); font-size:.75rem; cursor:pointer; margin-top:1.4em; text-decoration:underline;}

/* ===== SCHWEBENDER WHATSAPP-BUTTON ===== */
.wa-float{
  position:fixed; right:26px; bottom:26px; z-index:95;
  display:flex; align-items:center; gap:10px;
  background:#25D366; color:#0B0D0C; text-decoration:none;
  font-family:var(--f-m); font-size:.82rem; font-weight:500;
  padding:.95em 1.4em; border-radius:100px;
  box-shadow:0 10px 34px rgba(37,211,102,.4);
  transition:transform .2s;
}
.wa-float:hover{transform:translateY(-3px) scale(1.03);}
.wa-float svg{width:20px; height:20px; flex:none;}
@media(max-width:640px){.wa-float{display:none;}}

/* ===== BEISPIEL-ABRECHNUNG (Explorer v2) ===== */
.invoice{
  max-width:860px; margin:0 auto;
  background:rgba(11,13,12,.55); backdrop-filter:blur(12px);
  border:1px solid var(--panel-brd); border-radius:20px; overflow:hidden;
}
.inv-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 30px; border-bottom:1px dashed rgba(255,255,255,.15);
  font-family:var(--f-m); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
}
.inv-head b{color:var(--orange);}
.inv-rows{padding:8px 30px;}
.inv-row{
  display:grid; grid-template-columns:1fr auto; gap:18px; align-items:baseline;
  padding:16px 0; border-bottom:1px solid rgba(255,255,255,.07);
  opacity:0; transform:translateX(-14px); animation:rowIn .45s ease forwards;
}
@keyframes rowIn{to{opacity:1; transform:none;}}
.inv-row b{font-size:1rem; font-weight:600;}
.inv-row small{display:block; color:var(--dim); font-size:.82rem; margin-top:2px;}
.inv-row .val{font-family:var(--f-d); font-size:1.5rem; font-weight:700; white-space:nowrap;}
.inv-row .val.zero{color:#5DBB8B;}
.inv-total{
  display:flex; justify-content:space-between; align-items:center;
  padding:24px 30px; background:rgba(255,92,26,.08); border-top:1px solid rgba(255,92,26,.35);
}
.inv-total span{font-family:var(--f-m); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);}
.inv-total .sum{font-family:var(--f-d); font-weight:700; font-size:clamp(2.2rem,5vw,3.4rem); color:var(--orange); line-height:1;}
.inv-note{padding:14px 30px 22px; font-family:var(--f-m); font-size:.68rem; color:var(--dim);}
@media(max-width:640px){.inv-rows,.inv-total,.inv-head,.inv-note{padding-left:18px; padding-right:18px;}}

/* Spotlight-Hover auf Karten */
.spot{position:relative; overflow:hidden;}
.spot::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(255,92,26,.12), transparent 65%);
}
.spot:hover::before{opacity:1;}

/* ===== HERO V4: LUPE MIT SCROLL-ZOOM ===== */
.hero.lens-mode{display:block; height:230vh; padding:0; align-items:initial;}
.hero.lens-mode .hero-bg, .hero.lens-mode .hero-badge{display:none;}
.hero-sticky{position:sticky; top:0; height:100svh; display:flex; align-items:center; overflow:hidden;
  background:radial-gradient(900px 600px at 72% 42%, rgba(255,92,26,.1), transparent 65%);}
.lens-wrap{position:relative; display:flex; justify-content:center;}
@media(min-width:941px) and (max-width:1099px){.lens-wrap{transform:translateX(-90px);}}
@media(min-width:1100px){.lens-wrap{transform:translateX(-220px);}}
.lens{
  position:relative; width:min(46vw,480px); aspect-ratio:1;
  border-radius:50%;
  border:10px solid #2A2F2D;
  box-shadow:
    0 0 0 3px rgba(255,92,26,.55),
    0 0 60px rgba(255,92,26,.25),
    inset 0 0 40px rgba(0,0,0,.6),
    0 30px 60px rgba(0,0,0,.6);
  overflow:hidden;
  background:#0E1110;
}
@media(max-width:940px){.lens{width:min(78vw,420px); margin-top:30px;}}
.lens img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(.55); opacity:.25; filter:blur(12px) grayscale(.6) brightness(.7);
  will-change:transform, filter, opacity;
}
.lens::after{ /* Glas-Reflex */
  content:""; position:absolute; inset:0; border-radius:50%;
  background:linear-gradient(135deg, rgba(255,255,255,.16), transparent 38%);
  pointer-events:none;
}
.lens-handle{
  position:absolute; width:13%; height:46%;
  right:-4%; bottom:-32%;
  transform:rotate(-42deg);
  background:linear-gradient(#2A2F2D, #171A19);
  border-radius:100px;
  box-shadow:0 14px 30px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,92,26,.35);
}
.lens-tag{
  position:absolute; top:-6px; left:50%; transform:translateX(-50%) translateY(-100%);
  font-family:var(--f-m); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); white-space:nowrap;
}
.lens-tag b{color:var(--orange); font-weight:500;}
.lens-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  font-family:var(--f-m); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--dim);
  animation:hintPulse 2.2s infinite;
}

/* ===== FALL-AKTE (Invoice v3 mit Foto) ===== */
.inv-body{display:grid; grid-template-columns:320px 1fr;}
.inv-body.no-photo{grid-template-columns:1fr;}
@media(max-width:760px){.inv-body{grid-template-columns:1fr;}}
.inv-photo{position:relative; min-height:260px;}
.inv-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.8) contrast(1.1) brightness(.8);}
.inv-photo::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to right, transparent 60%, rgba(11,13,12,.9));}
@media(max-width:760px){.inv-photo::after{background:linear-gradient(to top, rgba(11,13,12,.9), transparent 50%);}}
.inv-photo .real-badge{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:var(--f-m); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  background:var(--orange); color:#0B0D0C; padding:.5em .9em; border-radius:100px; font-weight:500;
}

/* ===== HERO V5: LOGO-LUPE ===== */
.hero.lens-mode{height:260vh;}
.hero-sticky .hero-grid{grid-template-columns:1.15fr .85fr; gap:70px; align-items:center;}
.lens-stage{
  position:relative;
  width:min(32vw, 380px);
  aspect-ratio:153/180;
  margin:0 auto;
  filter:drop-shadow(0 24px 50px rgba(0,0,0,.55));
}
@media(max-width:940px){.lens-stage{width:min(64vw,340px); margin-top:20px;}}
.lens-frame-img{position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none;}
.lens-glass{
  position:absolute; z-index:1;
  left:37.78%; top:41.32%; width:53.83%; aspect-ratio:1;
  border-radius:50%; overflow:hidden;
  background:#0E1110;
  box-shadow:inset 0 0 26px rgba(0,0,0,.7), 0 0 40px rgba(255,92,26,.22);
}
.lens-glass img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(.5); opacity:.25; filter:blur(14px) grayscale(.6) brightness(.7);
  will-change:transform, filter, opacity;
}
.lens-glass::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:linear-gradient(135deg, rgba(255,255,255,.14), transparent 40%);
  pointer-events:none;
}
.lens-caption{
  position:absolute; left:50%; bottom:-14px; transform:translate(-50%,100%);
  font-family:var(--f-m); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); white-space:nowrap;
}
.lens-caption b{color:var(--orange); font-weight:500;}

/* Fall-Akte: Freisteller-Modus (ganzes Auto, transparent) */
.inv-photo.contain{background:radial-gradient(closest-side, rgba(255,92,26,.1), transparent 75%);}
.inv-photo.contain img{object-fit:contain; padding:12px; filter:drop-shadow(0 18px 26px rgba(0,0,0,.5));}
.inv-photo.contain::after{display:none;}
.case-slider{position:absolute; left:12px; right:12px; bottom:12px; z-index:7; display:flex; align-items:center; justify-content:center; gap:10px; padding:7px 10px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(11,13,12,.78); backdrop-filter:blur(10px);}
.case-slider[hidden]{display:none;}
.case-slider>button{width:30px; height:30px; border:1px solid rgba(255,255,255,.22); border-radius:50%; background:transparent; color:var(--txt); font-size:1.25rem; line-height:1; cursor:pointer;}
.case-slider>button:hover{border-color:var(--orange); color:var(--orange);}
#case-slide-label{min-width:42px; font-family:var(--f-m); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; text-align:center;}
.case-dots{display:flex; gap:6px;}
.case-dots button{width:7px; height:7px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.3); cursor:pointer;}
.case-dots button.on{background:var(--orange); box-shadow:0 0 8px rgba(255,92,26,.7);}
.inv-photo.slider-mode{cursor:auto; touch-action:pan-y;}
.inv-photo.slider-mode .mag{display:none !important;}
.total-outcomes{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--panel-brd); border-top:1px solid var(--panel-brd);}
.total-outcomes[hidden]{display:none;}
.total-outcomes>div{display:grid; gap:5px; padding:18px 22px; background:#0E1110;}
.total-outcomes small{font-family:var(--f-m); font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; color:var(--dim);}
.total-outcomes b{font-family:var(--f-d); font-size:1.65rem; color:var(--orange);}
.total-outcomes span{font-size:.72rem; color:var(--dim); line-height:1.45;}
@media(max-width:560px){.total-outcomes{grid-template-columns:1fr;}}

/* ===== FIXES + LUPE V6 (SVG) ===== */
.hero.lens-mode{overflow:visible;}              /* overflow:hidden bricht position:sticky! */
.hero.lens-mode .hero-sticky{overflow:hidden;}  /* Clipping stattdessen am Sticky selbst */

/* Glas exakt auf den SVG-Kreis (Zentrum 100/120, r=57 im 200x235-ViewBox) */
.lens-stage{aspect-ratio:3373/5000; width:min(26vw,300px);}
@media(max-width:940px){.lens-stage{width:min(52vw,280px);}}
.lens-glass{left:26.16%; top:21.02%; width:66.05%;}
.lens-frame-svg{position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.5));}

/* ===== FOTO-LUPE in der Fall-Akte ===== */
.inv-photo{cursor:none;}
.mag{
  position:absolute; z-index:5; pointer-events:none;
  width:180px; height:180px; border-radius:50%;
  border:5px solid #E9E6DD;
  box-shadow:0 0 0 4px rgba(255,92,26,.9), 0 14px 30px rgba(0,0,0,.55), inset 0 0 18px rgba(0,0,0,.35);
  background-repeat:no-repeat;
  display:none;
  background-color:#0E1110;
}
.mag::after{ /* kleiner Griff */
  content:""; position:absolute; width:12px; height:44px;
  right:-10px; bottom:-30px; transform:rotate(-42deg);
  background:linear-gradient(#E9E6DD,#B9B5AA); border-radius:100px;
}
.inv-photo:hover .mag{display:block;}
@media(pointer:coarse){.inv-photo{cursor:auto;} .mag{display:none !important;}}

/* ===== LUPE: ZWEI-AKT-GLAS ===== */
.lens-glass{background:radial-gradient(closest-side, #17201C, #0C0F0E);}
.lens-glass img{position:absolute; inset:0;}
.lens-glass .b1{object-fit:contain; padding:8%;}
.lens-glass .b2{object-fit:cover; object-position:58% 50%; opacity:0;}

/* Straffung: Effekt endet bei 72%, Sektion kürzer -> kein toter Nachlauf */
.hero.lens-mode{height:180vh;}

/* Finaler Hero-Fit: Navigation und Inhalt dürfen sich in kleinen Viewports nicht überlagern. */
.hero-sticky{padding-top:92px;}
.hero.lens-mode h1{font-size:clamp(3.4rem,7vw,6.4rem);}
@media(max-width:940px){
  .hero-sticky{align-items:flex-start; padding:110px 0 94px;}
  .hero-sticky .hero-grid{grid-template-columns:1fr; gap:0;}
  .lens-wrap{display:none;}
  .hero.lens-mode h1{font-size:clamp(3.2rem,14vw,5.2rem);}
  .hero .lede{font-size:1rem; margin:1.15em 0 1.5em;}
  .hero-proof{margin-top:1.4em; gap:18px;}
}
@media(max-width:520px){
  .hero-sticky{padding-top:104px;}
  .hero.lens-mode h1{font-size:clamp(3rem,14vw,3.7rem);}
}