/* llisabauer.de – Entwurf. Farben/Schriften aus dem Brand-Reel (lib/brand.ts) */
:root{
  --ink:#0C0C0E; --ink2:#15151a; --white:#F7F2EA; --muted:#b9b2a6; --dim:#7d776e;
  --amber:#FFB547; --amber-deep:#E8912A; --peach:#FFC9A3;
  --run:#FF5A1F; --bike:#2F5BFF; --strength:#E8E4DA; --swim:#19C3C9;
  --glass:rgba(255,255,255,.08); --glass-b:rgba(255,255,255,.20);
  --r:28px; --pad:clamp(20px,5vw,72px);
  --display:'Archivo',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; --sans:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{margin:0;color:var(--white);font:16px/1.6 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--amber);color:var(--ink)}

/* Filmkorn + Entwurfs-Hinweis */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.draft{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:100;
  font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--amber);
  padding:9px 14px;border-radius:99px;box-shadow:0 10px 30px rgba(0,0,0,.4);display:flex;gap:8px;align-items:center}
.draft .dot{width:7px;height:7px;border-radius:50%;background:var(--ink);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.25}}
@media(max-width:760px){.draft{font-size:10px;padding:8px 11px;left:12px;bottom:calc(12px + env(safe-area-inset-bottom))}.draft .long{display:none}}

/* Navigation */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;justify-content:space-between;align-items:center;
  padding:16px var(--pad);transition:background .3s,backdrop-filter .3s}
.nav.solid{background:rgba(12,12,14,.72);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
.logo{font:900 22px/1 var(--display);font-stretch:85%;text-decoration:none;letter-spacing:-.02em}
.logo span{color:var(--amber)}
.nav nav{display:flex;gap:clamp(12px,2.4vw,30px);align-items:center}
.nav nav a{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--muted);transition:color .2s}
.nav nav a:hover{color:var(--white)}
.cta-mini{color:var(--ink)!important;background:var(--amber);padding:10px 14px;border-radius:99px}
@media(max-width:760px){.nav nav a:not(.cta-mini){display:none}}

/* Typo-Bausteine */
.kicker,.chip,.date{font:500 12px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.big{font-family:var(--display);font-weight:900;font-stretch:72%;line-height:.88;letter-spacing:-.01em;
  font-size:clamp(44px,8.4vw,132px);margin:.15em 0 .25em;text-wrap:balance}
[data-stretch]{transition:font-stretch 1.4s cubic-bezier(.2,.8,.2,1),letter-spacing 1.4s cubic-bezier(.2,.8,.2,1)}
[data-stretch].is-in{font-stretch:100%}
.sec-head{padding:0 var(--pad);max-width:1400px;margin:0 auto}
.sub{max-width:560px;color:var(--muted);font-size:clamp(16px,1.4vw,19px)}
section{position:relative}

/* HERO */
.hero{min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:2vw;
  padding:110px var(--pad) 80px;overflow:hidden;isolation:isolate}
.glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(600px circle at var(--mx,70%) var(--my,40%),rgba(255,181,71,.20),transparent 60%),
             radial-gradient(900px circle at 15% 110%,rgba(255,90,31,.14),transparent 60%),
             radial-gradient(700px circle at 100% 0%,rgba(47,91,255,.10),transparent 60%)}
.chip{display:inline-flex;align-items:center;gap:10px;padding:9px 14px;border:1px solid var(--glass-b);border-radius:99px;background:var(--glass);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--white)}
.live{width:8px;height:8px;border-radius:50%;background:var(--run);box-shadow:0 0 0 0 rgba(255,90,31,.6);animation:live 1.8s infinite}
@keyframes live{70%{box-shadow:0 0 0 10px rgba(255,90,31,0)}100%{box-shadow:0 0 0 0 rgba(255,90,31,0)}}
.mega{margin:.25em 0 .15em;font-family:var(--display);font-weight:900;line-height:.8;font-size:clamp(76px,10.6vw,210px);letter-spacing:-.02em;white-space:nowrap}
.mega .line{display:block;font-stretch:62%;opacity:0;transform:translateY(30px)}
.mega .line.is-in{font-stretch:112%;opacity:1;transform:none;transition:font-stretch 1.6s cubic-bezier(.2,.8,.2,1),opacity .8s,transform 1s cubic-bezier(.2,.8,.2,1)}
.mega .line:nth-child(2).is-in{transition-delay:.15s}
.outline{color:transparent;-webkit-text-stroke:2px var(--white)}
.lead{max-width:520px;font-size:clamp(17px,1.5vw,20px);color:var(--muted)}
.disc-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:22px 0 30px;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.disc-legend span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;background:var(--c);margin-right:8px;vertical-align:-1px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;gap:10px;align-items:center;padding:16px 24px;border-radius:99px;text-decoration:none;font:600 15px/1 var(--sans);
  background:var(--amber);color:var(--ink);transition:transform .2s,box-shadow .2s;box-shadow:0 10px 40px rgba(255,181,71,.25)}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 50px rgba(255,181,71,.38)}
.btn.ghost{background:transparent;color:var(--white);border:1px solid var(--glass-b);box-shadow:none}
.hero-stage{position:relative;height:min(80vh,780px)}
.card{position:absolute;margin:0;border-radius:var(--r);overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.14);will-change:transform}
.card img,.card video{width:100%;height:100%;object-fit:cover}
.card-video{width:min(50%,360px);aspect-ratio:9/16;left:27%;top:4%;z-index:3;transform:rotate(-2deg)}
.card-a{width:min(34%,250px);aspect-ratio:3/4;left:0;top:30%;z-index:2;transform:rotate(-7deg)}
.card-b{width:min(30%,220px);aspect-ratio:9/16;right:0;top:2%;z-index:1;transform:rotate(6deg)}
.glass-tag{position:absolute;left:14px;top:14px;white-space:nowrap;padding:8px 12px;border-radius:12px;background:rgba(12,12,14,.35);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.2);font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.pill{position:absolute;z-index:4;padding:14px 18px;border-radius:20px;background:rgba(12,12,14,.55);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,181,71,.45);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.pill b{display:block;font:900 34px/1 var(--display);font-stretch:85%;color:var(--amber);font-variant-numeric:tabular-nums}
.pill span{font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pill-time{right:6%;bottom:6%}
.scroll-hint{position:absolute;left:50%;bottom:72px;width:26px;height:42px;border:2px solid rgba(255,255,255,.35);border-radius:14px;transform:translateX(-50%)}
.scroll-hint span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--amber);animation:scroll 1.6s infinite}
@keyframes scroll{60%{transform:translateY(12px);opacity:0}100%{opacity:0}}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:96px;gap:30px}
  .hero-stage{height:auto;aspect-ratio:1/1.05;order:-1}
  .card-video{width:52%;left:24%;top:2%}
  .card-a{width:36%;top:28%}
  .card-b{width:32%}
  .pill-time{left:0;right:auto;bottom:0}
  .pill b{font-size:28px}
  .mega{font-size:clamp(64px,21vw,120px)}
  .scroll-hint{display:none}
}

/* Laufband */
.marquee{overflow:hidden;border-block:1px solid rgba(255,255,255,.08);padding:22px 0;background:linear-gradient(90deg,rgba(255,181,71,.06),transparent 40%,rgba(255,90,31,.06))}
.track{display:flex;gap:28px;width:max-content;animation:marquee 32s linear infinite}
.track span{font:900 clamp(34px,5vw,72px)/1 var(--display);font-stretch:70%;color:transparent;-webkit-text-stroke:1.5px rgba(247,242,234,.55);letter-spacing:.02em}
.track i{color:var(--amber);font-style:normal;font-size:18px;align-self:center}
@keyframes marquee{to{transform:translateX(-50%)}}

/* EIN JAHR */
.year{padding:clamp(80px,12vw,160px) 0 60px}
.rail-wrap{position:relative;max-width:1200px;margin:50px auto 0;padding:0 var(--pad)}
.rail{position:absolute;top:0;bottom:0;left:calc(var(--pad) + 9px);width:3px;background:rgba(255,255,255,.08);border-radius:3px}
.rail-fill{position:absolute;left:0;top:0;width:100%;height:var(--p,0%);background:linear-gradient(var(--amber-deep),var(--amber));border-radius:3px;box-shadow:0 0 18px rgba(255,181,71,.7)}
.stations{list-style:none;margin:0;padding:0 0 0 54px;display:grid;gap:clamp(70px,10vw,140px)}
.station{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center;opacity:.35;transform:translateY(40px);transition:opacity .8s,transform .9s cubic-bezier(.2,.8,.2,1)}
.station.is-in{opacity:1;transform:none}
.node{position:absolute;left:-54px;top:12px;width:21px;height:21px;border-radius:50%;background:var(--ink);border:3px solid rgba(255,255,255,.25);transition:all .5s}
.station.is-in .node{border-color:var(--amber);background:var(--amber);box-shadow:0 0 0 7px rgba(255,181,71,.18),0 0 26px rgba(255,181,71,.8)}
.st-text h3{font:900 clamp(34px,4.6vw,64px)/.95 var(--display);font-stretch:78%;margin:.25em 0 .3em}
.st-text p{color:var(--muted);max-width:420px}
.st-text em{color:var(--white);font-style:normal}
.metric{font:500 14px/1.4 var(--mono);color:var(--white)!important}
.metric span{color:var(--amber);margin-right:6px}.metric small{color:var(--dim);margin-left:6px}
.time{font:900 clamp(60px,9vw,120px)/1 var(--display)!important;font-stretch:80%;color:var(--white)!important;font-variant-numeric:tabular-nums;margin:.15em 0 0;letter-spacing:-.02em}
.time.hot{color:var(--amber)!important;text-shadow:0 0 40px rgba(255,181,71,.45)}
.delta{display:inline-block;font:700 15px/1 var(--mono)!important;letter-spacing:.1em;color:var(--ink)!important;background:var(--amber);padding:10px 14px;border-radius:99px;margin-top:6px}
.badge{display:inline-block;font:900 26px/1 var(--display)!important;font-stretch:85%;color:var(--ink)!important;background:linear-gradient(135deg,#f3d9a4,#c9944a);padding:12px 18px;border-radius:14px;box-shadow:0 10px 30px rgba(201,148,74,.35)}
.st-media{margin:0;width:100%;max-width:440px;justify-self:center;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;box-shadow:0 30px 80px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.1);transform:scale(.94);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.station.is-in .st-media{transform:none}
.st-media img,.st-media video{width:100%;height:100%;object-fit:cover}
.station:nth-child(even) .st-media{order:-1}
@media(max-width:800px){
  .station{grid-template-columns:1fr}
  .station:nth-child(even) .st-media{order:0}
  .stations{padding-left:40px}
  .node{left:-40px}
  .rail{left:calc(var(--pad) + 9px)}
}

/* DISZIPLINEN */
.disciplines{padding:clamp(80px,10vw,140px) 0}
.disc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:20px var(--pad) 0;max-width:1500px;margin:0 auto}
.disc{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4.4;border:1px solid rgba(255,255,255,.1);cursor:default;isolation:isolate}
.disc img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .6s;filter:saturate(.85) brightness(.85)}
.disc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(12,12,14,.92));z-index:1}
.disc:hover img{transform:scale(1.12);filter:none}
.disc-info{position:absolute;left:20px;right:20px;bottom:20px;z-index:2}
.disc-info h3{font:900 clamp(30px,3vw,46px)/1 var(--display);font-stretch:78%;margin:8px 0 6px}
.disc-info p{margin:0;color:var(--muted);font-size:15px}
.glyph{display:block;width:34px;height:5px;border-radius:3px;background:var(--c);box-shadow:0 0 18px var(--c);transition:width .5s}
.disc:hover .glyph{width:70px}
@media(max-width:1000px){.disc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.disc-grid{grid-template-columns:1fr 1fr;gap:10px}.disc{aspect-ratio:3/4.6}.disc-info{left:12px;right:12px;bottom:12px}.disc-info p{font-size:13px}}

/* ZAHLEN */
.numbers{padding:clamp(90px,12vw,170px) 0;overflow:hidden;isolation:isolate}
.numbers-bg{position:absolute;inset:0;z-index:-1}
.numbers-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 30%;opacity:.28;filter:saturate(1.2)}
.numbers-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 15%,rgba(12,12,14,.6) 60%,rgba(12,12,14,.85))}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:20px var(--pad);max-width:1400px;margin:0 auto}
.stat{padding:26px 24px;border-radius:22px;background:var(--glass);border:1px solid var(--glass-b);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
.stat b{display:block;white-space:nowrap;font:900 clamp(38px,4.4vw,72px)/1 var(--display);font-stretch:80%;color:var(--amber);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat span{display:block;margin-top:10px;font:500 12px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--white)}
.stat small{color:var(--dim);letter-spacing:.06em}
.footnote{padding:0 var(--pad);max-width:1400px;margin:10px auto 0;color:var(--dim);font-size:13px}
@media(max-width:900px){.stat-grid{grid-template-columns:1fr 1fr}}

/* WERTE */
.values{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:clamp(30px,6vw,90px);padding:clamp(80px,10vw,150px) var(--pad);max-width:1400px;margin:0 auto}
.values-photos{position:relative;aspect-ratio:1/1.1}
.values-photos img{position:absolute;width:62%;height:auto;border-radius:var(--r);box-shadow:0 30px 70px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.12);aspect-ratio:3/4;object-fit:cover}
.v1{left:0;top:0;transform:rotate(-5deg)}.v2{right:0;bottom:0;transform:rotate(4deg)}
blockquote{margin:0}
.quote{font:900 clamp(48px,7vw,110px)/.92 var(--display);font-stretch:75%;margin:0;letter-spacing:-.01em}
.quote span{display:inline-block}
.amber{color:var(--amber)}
.quote-sub{color:var(--muted);font-size:clamp(17px,1.5vw,20px);max-width:560px;margin-top:24px}
@media(max-width:800px){.values{grid-template-columns:1fr}.values-photos{max-width:420px}}

/* FILME */
.films{padding:clamp(80px,10vw,140px) 0}
.tabs{display:flex;gap:8px;padding:10px var(--pad) 22px;max-width:1400px;margin:0 auto;flex-wrap:wrap}
.tabs button{font:600 14px/1 var(--sans);padding:13px 18px;border-radius:99px;border:1px solid var(--glass-b);background:transparent;color:var(--muted);cursor:pointer;transition:all .2s}
.tabs button[aria-selected=true]{background:var(--white);color:var(--ink);border-color:var(--white)}
.player{position:relative;max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.player video{width:100%;aspect-ratio:16/9;border-radius:var(--r);background:#000;box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1);object-fit:cover}
.player.portrait video{aspect-ratio:9/16;max-width:420px;margin:0 auto}
.film-cap{text-align:center;color:var(--muted);font-size:14px;letter-spacing:.02em;margin-top:22px;padding:0 var(--pad);min-height:1.4em}
.film-cap:empty{display:none}
@media (max-width:600px){.tabs{display:grid;grid-template-columns:1fr 1fr}.tabs button{font-size:13px;line-height:1.25;padding:11px 12px}}
.st-film{display:inline-block;margin-top:14px;font:600 14px/1 var(--sans);color:var(--white);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}
.st-film:hover{opacity:.75}
.film-note{text-align:center;color:var(--dim);font-size:13px;margin-top:18px;padding:0 var(--pad)}

/* PARTNER */
.partners{padding:40px 0 80px;text-align:center}
.ticker{overflow:hidden;margin-top:18px;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker-track{display:flex;width:max-content;gap:56px;animation:marquee 26s linear infinite}
.ticker-track span{font:800 clamp(24px,3vw,40px)/1 var(--display);font-stretch:90%;color:rgba(247,242,234,.5);white-space:nowrap}

/* KONTAKT */
.contact{min-height:90svh;display:grid;place-items:center;text-align:center;overflow:hidden;isolation:isolate;padding:120px var(--pad)}
.contact-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:saturate(1.15)}
.contact::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 60%,rgba(12,12,14,.45),rgba(12,12,14,.88) 70%),linear-gradient(180deg,var(--ink),transparent 25%,transparent 75%,var(--ink))}
.contact .big{max-width:1100px}
.mail{display:inline-block;margin-top:14px;font:900 clamp(28px,5vw,64px)/1 var(--display);font-stretch:85%;color:var(--amber);text-decoration:none;
  border-bottom:3px solid rgba(255,181,71,.4);padding-bottom:6px;transition:border-color .3s,text-shadow .3s;word-break:break-all}
.mail:hover{border-color:var(--amber);text-shadow:0 0 40px rgba(255,181,71,.6)}
.mgmt{color:var(--muted);margin-top:22px}
.socials{display:flex;gap:12px;justify-content:center;margin-top:18px}
.socials a{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:12px 16px;border-radius:99px;border:1px solid var(--glass-b);background:var(--glass)}
.foot{padding:40px var(--pad) 90px;color:var(--dim);font-size:13px;border-top:1px solid rgba(255,255,255,.06);text-align:center}
.foot b{color:var(--amber)}

/* Weniger Bewegung */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .mega .line,.station,[data-stretch]{opacity:1;transform:none}
}