/* ============================================================
 * Tom Wilcox — Website. Dunkel, edel, EFFEKTREICH.
 * Morphing-Aurora, Glow, Marquee, 3D-Hover, animierte Headline.
 * Alles GPU-leicht (transform/opacity/filter), mobil-safe, CLS=0.
 * ============================================================ */

@font-face { font-family:'Space Grotesk'; src:url('/fonts/spacegrotesk-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Space Grotesk'; src:url('/fonts/spacegrotesk-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/fonts/inter-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/fonts/inter-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/fonts/inter-600.woff2') format('woff2'); font-weight:600; font-display:swap; }

:root{
  --bg:#070709; --surface:#111116; --surface-2:#17171e; --border:#26262f;
  --text:#F4F4F6; --muted:#9A9AA4;
  --accent:#E7C26B; --accent-2:#C9A24E; --accent-deep:#8a6c2c;
  --glow-a:rgba(231,194,107,.55); --glow-b:rgba(110,139,255,.45); --glow-c:rgba(180,92,255,.40);
  --maxw:1180px; --radius:16px;
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --mx:50%; --my:50%;
}
*,*::before,*::after{box-sizing:border-box;}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;position:relative;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:20px;}

/* ===== Morphing-Aurora (Hintergrund) ===== */
.aurora{position:fixed;inset:-20vmax;z-index:-2;pointer-events:none;filter:blur(70px);opacity:.55;}
.aurora span{position:absolute;width:60vmax;height:60vmax;border-radius:50%;mix-blend-mode:screen;will-change:transform;}
.aurora .a1{background:radial-gradient(circle at 50% 50%,var(--glow-a),transparent 60%);top:-10vmax;left:-6vmax;animation:drift1 26s ease-in-out infinite;}
.aurora .a2{background:radial-gradient(circle at 50% 50%,var(--glow-b),transparent 60%);bottom:-12vmax;right:-8vmax;animation:drift2 32s ease-in-out infinite;}
.aurora .a3{background:radial-gradient(circle at 50% 50%,var(--glow-c),transparent 62%);top:30%;left:40%;animation:drift3 38s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(18vmax,12vmax) scale(1.25);}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1.1);}50%{transform:translate(-16vmax,-10vmax) scale(.85);}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(.9);}50%{transform:translate(-12vmax,14vmax) scale(1.2);}}
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at var(--mx) var(--my),rgba(231,194,107,.06),transparent 38%);transition:background .2s;}

/* ===== Scroll-Fortschritt ===== */
.progress{position:fixed;top:0;left:0;height:2px;width:var(--p,0%);z-index:60;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent));box-shadow:0 0 12px var(--glow-a);}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--font-display);font-weight:500;font-size:.95rem;letter-spacing:.02em;padding:.9rem 1.6rem;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .3s,background .25s,border-color .25s;text-align:center;line-height:1;position:relative;}
.btn:active{transform:scale(.97);}
.btn-primary{background:linear-gradient(120deg,var(--accent),var(--accent-2));color:#1a1408;box-shadow:0 6px 26px -8px var(--glow-a),inset 0 1px 0 rgba(255,255,255,.4);}
.btn-primary:hover{box-shadow:0 8px 36px -6px var(--glow-a),inset 0 1px 0 rgba(255,255,255,.5);}
.btn-ghost{background:rgba(255,255,255,.03);color:var(--text);border-color:var(--border);backdrop-filter:blur(6px);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn-block{width:100%;}

/* ===== Eyebrow + Headings ===== */
.eyebrow{font-family:var(--font-display);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin:0 0 .7rem;display:inline-flex;align-items:center;gap:.6rem;}
.eyebrow::before{content:'';width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--accent));}
.section{padding:clamp(3.5rem,9vw,7rem) 0;position:relative;}
.section-head{margin-bottom:clamp(1.8rem,5vw,3rem);}
.section-head h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(1.9rem,7vw,3.4rem);line-height:1.02;letter-spacing:-.01em;margin:0;
  background:linear-gradient(180deg,#fff 30%,#b9b9c2);-webkit-background-clip:text;background-clip:text;color:transparent;}
.section-head p{color:var(--muted);margin:.9rem 0 0;max-width:60ch;}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:background .3s,border-color .3s,backdrop-filter .3s;}
.site-header.scrolled{background:rgba(8,8,11,.6);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--border);}
.header-inner{display:flex;align-items:center;gap:1rem;height:70px;}
.brand{display:inline-flex;align-items:center;gap:.6rem;min-width:0;}
.brand img{height:36px;width:auto;filter:drop-shadow(0 2px 8px rgba(231,194,107,.25));}
.brand .wordmark{font-family:var(--font-display);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:1.05rem;white-space:nowrap;
  background:linear-gradient(120deg,#fff,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;}
.nav{margin-left:auto;display:flex;align-items:center;gap:.2rem;}
.nav a.navlink{padding:.5rem .9rem;border-radius:10px;color:var(--muted);font-size:.92rem;transition:color .2s,background .2s;position:relative;}
.nav a.navlink::after{content:'';position:absolute;left:.9rem;right:.9rem;bottom:.35rem;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s;}
.nav a.navlink:hover{color:var(--text);}
.nav a.navlink:hover::after{transform:scaleX(1);}
.nav .btn{margin-left:.5rem;padding:.62rem 1.2rem;}
.nav-toggle{display:none;margin-left:auto;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text);width:46px;height:46px;border-radius:12px;cursor:pointer;}
.nav-toggle svg{width:22px;height:22px;display:block;margin:auto;}
@media (max-width:760px){
  .nav{position:fixed;inset:70px 0 auto 0;flex-direction:column;align-items:stretch;gap:.2rem;background:rgba(8,8,11,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:1rem 20px 1.4rem;transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;}
  .nav.open{transform:none;opacity:1;pointer-events:auto;}
  .nav a.navlink{padding:.95rem .6rem;font-size:1.05rem;}
  .nav a.navlink::after{display:none;}
  .nav .btn{margin:.4rem 0 0;}
  .nav-toggle{display:inline-flex;}
}

/* ===== Hero ===== */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;}
.hero-bg{position:absolute;inset:0;z-index:0;}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.42;transform:scale(1.05);}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,9,.45) 0%,rgba(7,7,9,.72) 50%,var(--bg) 100%);}
.hero-inner{position:relative;z-index:1;padding:6rem 20px 6rem;max-width:920px;}
.hero-logo{width:min(72vw,360px);height:auto;margin:0 auto 1.4rem;filter:drop-shadow(0 0 30px rgba(231,194,107,.35)) drop-shadow(0 10px 30px rgba(0,0,0,.6));animation:float 6s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.hero h1{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(2.6rem,12vw,6.5rem);line-height:.94;letter-spacing:-.02em;margin:0;
  background:linear-gradient(100deg,#fff 20%,var(--accent) 45%,#fff 70%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 7s linear infinite;}
@keyframes sheen{to{background-position:220% center;}}
.hero .tagline{color:#cdcdd4;font-size:clamp(1rem,3.5vw,1.3rem);margin:1.1rem auto 2rem;max-width:34ch;}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;}
.scroll-cue{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:1;color:var(--muted);}
.scroll-cue svg{width:26px;height:26px;animation:bounce 1.8s infinite;}
@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(7px);}}

/* Equalizer-Akzent */
.eq{display:inline-flex;align-items:flex-end;gap:3px;height:16px;margin-left:.1rem;vertical-align:middle;}
.eq i{width:3px;background:var(--accent);border-radius:2px;animation:eq 1s ease-in-out infinite;}
.eq i:nth-child(1){animation-delay:0s;} .eq i:nth-child(2){animation-delay:.2s;} .eq i:nth-child(3){animation-delay:.4s;} .eq i:nth-child(4){animation-delay:.1s;} .eq i:nth-child(5){animation-delay:.3s;}
@keyframes eq{0%,100%{height:4px;}50%{height:16px;}}

/* ===== Marquee ===== */
.marquee{overflow:hidden;border-block:1px solid var(--border);background:rgba(255,255,255,.015);padding:1.1rem 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:inline-flex;gap:2.5rem;white-space:nowrap;will-change:transform;animation:marq 28s linear infinite;}
.marquee-track span{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(1.2rem,3.6vw,2rem);letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px rgba(244,244,246,.5);}
.marquee-track .dot{color:var(--accent);-webkit-text-stroke:0;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marq{to{transform:translateX(-50%);}}

/* ===== Singles ===== */
.singles{display:grid;grid-template-columns:1fr;gap:1.2rem;}
@media(min-width:720px){.singles{grid-template-columns:repeat(3,1fr);}}
.single{position:relative;background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,border-color .25s,box-shadow .35s;}
.single::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,var(--accent),transparent 40%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s;pointer-events:none;}
.single .cover{aspect-ratio:1;background:var(--surface-2);overflow:hidden;}
.single .cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.single .body{padding:1.1rem 1.2rem 1.35rem;display:flex;flex-direction:column;gap:.55rem;flex:1;}
.single h3{font-family:var(--font-display);font-weight:700;font-size:1.25rem;margin:0;letter-spacing:.01em;}
.single .meta{color:var(--muted);font-size:.85rem;}
.single .btn{margin-top:auto;}
@media(hover:hover){.single:hover{transform:translateY(-6px);box-shadow:0 24px 60px -30px rgba(0,0,0,.9);}.single:hover::before{opacity:1;}.single:hover .cover img{transform:scale(1.07);}}
.versions{margin-top:.2rem;border-top:1px solid var(--border);padding-top:.6rem;}
.versions summary{cursor:pointer;color:var(--accent);font-size:.85rem;font-family:var(--font-display);list-style:none;}
.versions summary::-webkit-details-marker{display:none;}
.versions ul{margin:.6rem 0 0;padding-left:1.1rem;color:var(--muted);font-size:.85rem;}

/* ===== Videos ===== */
.featured{margin-bottom:1.4rem;}
.video-card{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--surface-2);border:1px solid var(--border);cursor:pointer;transition:transform .25s,box-shadow .35s,border-color .25s;transform-style:preserve-3d;}
.video-card img{width:100%;height:100%;object-fit:cover;transition:transform .45s,opacity .3s;opacity:.85;}
.video-card .play{position:absolute;inset:0;display:grid;place-items:center;}
.video-card .play span{width:64px;height:64px;border-radius:999px;background:rgba(8,8,11,.5);border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;backdrop-filter:blur(4px);transition:background .25s,transform .2s,box-shadow .3s;}
.video-card .play svg{width:24px;height:24px;color:#fff;margin-left:3px;transition:color .2s;}
.video-card .vlabel{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .95rem .85rem;background:linear-gradient(180deg,transparent,rgba(7,7,9,.94));font-family:var(--font-display);font-weight:500;font-size:.92rem;}
.video-card .badge{position:absolute;top:.7rem;left:.7rem;background:rgba(8,8,11,.65);border:1px solid var(--border);color:var(--accent);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px;backdrop-filter:blur(4px);}
@media(hover:hover){.video-card:hover{border-color:rgba(231,194,107,.5);box-shadow:0 26px 70px -34px rgba(0,0,0,.95);}.video-card:hover img{transform:scale(1.06);opacity:1;}.video-card:hover .play span{background:var(--accent);box-shadow:0 0 30px var(--glow-a);transform:scale(1.08);}.video-card:hover .play svg{color:#1a1408;}}
.video-card:active .play span{transform:scale(.94);}
.video-grid{display:grid;grid-template-columns:1fr;gap:1.1rem;}
@media(min-width:480px){.video-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:920px){.video-grid{grid-template-columns:repeat(3,1fr);}}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:20px;background:rgba(4,4,6,.93);backdrop-filter:blur(8px);}
.lightbox.open{display:grid;animation:fade .2s ease;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.lightbox .frame{position:relative;width:min(100%,1040px);aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 40px 100px -20px rgba(0,0,0,.9),0 0 0 1px var(--border);}
.lightbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.lightbox .close{position:absolute;top:-54px;right:0;width:46px;height:46px;border-radius:12px;background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;display:grid;place-items:center;}
.lightbox .close svg{width:22px;height:22px;}

/* ===== About ===== */
.about-photo{border-radius:var(--radius);overflow:hidden;margin-bottom:2rem;border:1px solid var(--border);box-shadow:0 30px 70px -40px rgba(0,0,0,.9);aspect-ratio:4/3;}
@media(min-width:680px){.about-photo{aspect-ratio:16/7;}}
.about-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:58% 22%;}
.about-wrap{display:grid;gap:2rem;align-items:start;}
@media(min-width:880px){.about-wrap{grid-template-columns:1.4fr 1fr;gap:3rem;}}
.about-text p{color:#d6d6db;margin:0 0 1rem;}
.about-text p:first-of-type{font-size:1.14rem;color:var(--text);}
.facts{position:relative;background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem 1.6rem;overflow:hidden;}
.facts::before{content:'';position:absolute;top:-40%;right:-30%;width:60%;height:120%;background:radial-gradient(circle,var(--glow-a),transparent 60%);opacity:.12;}
.facts h3{font-family:var(--font-display);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 1rem;}
.facts ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem;position:relative;}
.facts li{padding-left:1.5rem;position:relative;color:#d6d6db;font-size:.95rem;}
.facts li::before{content:'';position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:999px;background:var(--accent);box-shadow:0 0 10px var(--glow-a);}

/* ===== Booking ===== */
.booking-wrap{display:grid;gap:2rem;}
@media(min-width:880px){.booking-wrap{grid-template-columns:1fr 1.1fr;gap:3rem;}}
.booking-aside p{color:var(--muted);}
.booking-aside .direct{margin-top:1.4rem;display:flex;flex-direction:column;gap:.7rem;}
.booking-aside .direct a{display:inline-flex;align-items:center;gap:.6rem;color:var(--text);font-family:var(--font-display);transition:color .2s;}
.booking-aside .direct a:hover{color:var(--accent);}
.booking-aside .direct a svg{width:18px;height:18px;color:var(--accent);flex:none;}
.form{position:relative;background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--border);border-radius:var(--radius);padding:clamp(1.3rem,4vw,2rem);display:grid;gap:1rem;}
.field{display:flex;flex-direction:column;gap:.4rem;}
.field.row{display:grid;gap:1rem;}
@media(min-width:560px){.field.row{grid-template-columns:1fr 1fr;}}
.field label{font-size:.82rem;color:var(--muted);font-family:var(--font-display);letter-spacing:.03em;}
.field label .req{color:var(--accent);}
.input,.textarea,.select{width:100%;background:rgba(0,0,0,.35);border:1px solid var(--border);border-radius:11px;color:var(--text);font:inherit;padding:.85rem .95rem;transition:border-color .2s,box-shadow .2s;}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft,rgba(231,194,107,.14));}
.textarea{min-height:120px;resize:vertical;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-note{font-size:.82rem;color:var(--muted);}
.form-status{font-size:.92rem;padding:.8rem 1rem;border-radius:11px;display:none;}
.form-status.show{display:block;}
.form-status.ok{background:rgba(80,180,120,.12);border:1px solid rgba(80,180,120,.4);color:#b7e6c8;}
.form-status.err{background:rgba(210,90,90,.12);border:1px solid rgba(210,90,90,.4);color:#efb3b3;}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--border);padding:3rem 0 2.5rem;margin-top:2rem;position:relative;}
.footer-inner{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between;}
.footer-brand{display:flex;align-items:center;gap:.7rem;}
.footer-brand img{height:32px;}
.socials{display:flex;gap:.5rem;flex-wrap:wrap;}
.socials a{width:44px;height:44px;border-radius:12px;border:1px solid var(--border);display:grid;place-items:center;color:var(--muted);transition:color .2s,border-color .2s,background .2s,transform .2s;}
.socials a:hover{color:var(--accent);border-color:var(--accent);background:rgba(231,194,107,.1);transform:translateY(-3px);}
.socials svg{width:20px;height:20px;}
.footer-meta{width:100%;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;justify-content:space-between;color:var(--muted);font-size:.85rem;border-top:1px solid var(--border);margin-top:1.6rem;padding-top:1.6rem;}
.footer-meta a:hover{color:var(--accent);}

/* ===== Reveal ===== */
.reveal{opacity:0;transform:translateY(26px) scale(.985);filter:blur(6px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),filter .7s;will-change:opacity,transform,filter;}
.reveal.in{opacity:1;transform:none;filter:none;}

/* ===== Legal pages ===== */
.legal{max-width:760px;padding-top:7rem;padding-bottom:4rem;}
.legal h1{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.8rem,6vw,2.6rem);}
.legal h2{font-family:var(--font-display);font-size:1.15rem;margin-top:2rem;}
.legal p,.legal li{color:#cfcfd6;}
.legal a{color:var(--accent);}
.backlink{color:var(--muted);font-family:var(--font-display);font-size:.85rem;}

/* ===== Reduced motion / Mobil-Sicherung ===== */
@media (prefers-reduced-motion:reduce){
  .aurora span,.hero-logo,.hero h1,.eq i,.marquee-track,.scroll-cue svg{animation:none!important;}
  .reveal{opacity:1;transform:none;filter:none;transition:none;}
  .hero h1{background-position:0 center;}
}