/* Lena Starr. Farben und Schriften: Playfair Display, Cormorant Garamond, Outfit (lokal). */
@font-face{font-family:'Playfair Display';font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/PlayfairDisplay-600.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-weight:600;font-style:italic;font-display:swap;src:url(../fonts/PlayfairDisplay-600i.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/PlayfairDisplay-700.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/CormorantGaramond-500.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:500;font-style:italic;font-display:swap;src:url(../fonts/CormorantGaramond-500i.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-weight:400;font-display:swap;src:url(../fonts/Outfit-400.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-weight:500;font-display:swap;src:url(../fonts/Outfit-500.woff2) format('woff2')}

:root{
  --pink:#b5007c;--pink-l:#d4189a;--pink-hot:#e91e9c;--pink-bg:#2a0e22;--pink-deep:#1e0818;
  --gold:#C5A55A;--gold-l:#E8D48B;--gold-b:#F0E0A0;--gold-d:#A08840;
  --bg:#0e0610;--card:#1c0f1a;--surf:#1a0d18;--white:#F5F0E8;--gray:#9a8a96;--gray-l:#bba8b5;
  --disp:"Playfair Display",Georgia,serif;--acc:"Cormorant Garamond",Georgia,serif;--text:"Outfit","Helvetica Neue",Arial,sans-serif;
  --gx:clamp(20px,4.4vw,72px);--ease:cubic-bezier(.22,.61,.36,1);
  --gp:linear-gradient(100deg,var(--gold-d) 0%,var(--gold-b) 38%,var(--gold) 55%,var(--pink-l) 100%);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--white);font-family:var(--text);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--pink);color:#fff}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
em{font-style:italic}
.grain{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  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='160' height='160' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")}

/* ---------- Kopfleiste ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:28px;padding:18px var(--gx);background:linear-gradient(to bottom,rgba(14,6,16,.72),rgba(14,6,16,0));}
.brand img{height:44px;width:auto}
.links{display:flex;gap:26px;margin-left:auto}
.links a{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gray-l);position:relative;padding:6px 0;transition:color .3s}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.links a:hover{color:var(--gold-l)}.links a:hover::after{transform:scaleX(1)}
.langs{display:flex;gap:2px}
.lang-btn{background:none;border:0;cursor:pointer;font-size:11px;letter-spacing:.14em;color:var(--gray);padding:6px 6px;transition:color .3s}
.lang-btn:hover{color:var(--white)}.lang-btn.on{color:var(--gold-l)}
.menu{display:none;width:40px;height:40px;background:none;border:1px solid rgba(197,165,90,.35);cursor:pointer;position:relative}
.menu span{position:absolute;left:10px;right:10px;height:1px;background:var(--gold-l);transition:transform .35s var(--ease)}
.menu span:first-child{top:16px}.menu span:last-child{top:23px}
.menu[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ---------- Gemeinsame Bausteine ---------- */
.kicker{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);font-weight:500}
.kicker b{font-family:var(--disp);font-size:15px;letter-spacing:.06em;color:var(--gold-l);font-weight:600}
.kicker i{display:block;width:38px;height:1px;background:linear-gradient(90deg,var(--gold),var(--pink-l))}
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 26px;border:1px solid var(--gold);color:var(--gold-b);font-size:12px;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;background:rgba(14,6,16,.45);position:relative;overflow:hidden;transition:color .4s,border-color .4s}
.btn::before{content:"";position:absolute;inset:0;background:var(--gp);opacity:0;transition:opacity .45s var(--ease);z-index:-1}
.btn:hover{color:var(--bg);border-color:transparent}.btn:hover::before{opacity:1}
.btn>*{position:relative}
.btn .play{width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.gold{background:var(--gp);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Die Fahrt ---------- */
.journey{position:relative;height:5000vh;background:var(--bg)}
.mark{position:absolute;left:0;width:1px;height:1px;pointer-events:none}
.jpin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bg)}
.host{position:absolute;inset:0;z-index:0}
.host canvas{display:block;width:100%;height:100%}
.host canvas.pick{cursor:pointer}
.shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(14,6,16,.82) 0,rgba(14,6,16,0) 40%),linear-gradient(to right,rgba(14,6,16,.55) 0,rgba(14,6,16,0) 46%)}
.hud{position:absolute;z-index:3;opacity:0;visibility:hidden;will-change:opacity,transform;transform:translate3d(0,var(--y,0px),0);pointer-events:none}
.hud a,.hud button{pointer-events:auto}
.w-flat{display:none}
.loopvid{position:absolute;width:2px;height:2px;opacity:.01;left:0;top:0;pointer-events:none}

/* Bild 1 · Haken: der Satz ist der Held, das Werk steht rechts im Raum */
.ov-hero{left:var(--gx);top:20vh;max-width:min(760px,56vw)}
.hero-title{font-family:var(--disp);font-weight:700;font-size:clamp(64px,9.6vw,184px);line-height:.86;letter-spacing:-.035em;margin:3.2vh 0 0;text-shadow:0 8px 60px rgba(14,6,16,.6)}
.hero-title .ln{display:block;transform:translate3d(calc(var(--k,0) * var(--dx,0px)),0,0)}
.hero-title .l1{--dx:-90px}
.hero-title .l2{font-family:var(--acc);font-weight:500;font-size:.62em;letter-spacing:0;color:var(--gold-l);padding-left:.18em;line-height:1.08;--dx:40px}
.hero-title .l2 em{font-style:italic}
.hero-title .l3{background:var(--gp);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em;--dx:140px}
.ov-hero .sub{font-family:var(--acc);font-style:italic;font-size:clamp(20px,1.7vw,27px);line-height:1.35;color:rgba(245,240,232,.86);max-width:24em;margin-top:3.4vh}
.cue{display:flex;align-items:center;gap:14px;margin-top:6vh;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--gray-l)}
.cue i{display:block;width:60px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}

/* Werke im Raum: Schild unten links */
.work .w-meta{color:var(--white)}
.w-sig{left:var(--gx);top:22vh;max-width:min(520px,40vw)}
.w-sig .w-title{font-family:var(--disp);font-weight:700;font-size:clamp(52px,6vw,108px);line-height:.92;letter-spacing:-.03em;margin:2.8vh 0 2vh}
.w-tech{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.w-desc{font-family:var(--acc);font-size:clamp(20px,1.55vw,25px);line-height:1.38;color:rgba(245,240,232,.86);margin-top:2.2vh;max-width:22em}
.w-feat,.w-gal{left:var(--gx);right:var(--gx);bottom:40px}
.w-feat .w-meta,.w-gal .w-meta{display:grid;grid-template-columns:auto auto 1fr;gap:30px;align-items:end}
.w-no{font-family:var(--disp);font-weight:700;font-size:clamp(66px,7.6vw,128px);line-height:.78;letter-spacing:-.04em;background:var(--gp);-webkit-background-clip:text;background-clip:text;color:transparent}
.w-feat .kicker{margin-bottom:12px}
.w-feat .w-title,.w-gal .w-title{font-family:var(--disp);font-weight:700;font-size:clamp(38px,4.2vw,72px);line-height:.95;letter-spacing:-.025em;margin-bottom:12px}
.w-feat .w-desc{margin:0 0 4px auto;max-width:21em;text-align:right}
.w-gal .w-meta{grid-template-columns:auto 1fr}

/* Das Auge */
.w-eye{left:var(--gx);right:var(--gx);bottom:6vh;text-align:center}
.quote{max-width:1100px;margin:0 auto}
.q-big{font-family:var(--disp);font-weight:600;font-size:clamp(34px,4.6vw,82px);line-height:1.02;letter-spacing:-.02em;text-shadow:0 6px 50px rgba(14,6,16,.9)}
.q-big span,.q-big em{display:block}
.q-big em{font-style:italic;background:var(--gp);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .1em .08em}
.q-small{font-family:var(--acc);font-style:italic;font-size:clamp(20px,1.7vw,28px);color:rgba(245,240,232,.86);margin-top:2.4vh;text-shadow:0 4px 30px rgba(14,6,16,.9)}
.quote cite{display:block;margin-top:2vh;font-style:normal;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.eye-cap{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4vh;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gray-l)}
.eye-cap b{font-family:var(--disp);font-size:15px;color:var(--gold-l);letter-spacing:.04em}
.eye-cap i{width:24px;height:1px;background:var(--gold);display:block}
.eye-cap .w-title-s{color:var(--white)}

/* Rotunde */
.ov-gal{left:var(--gx);right:var(--gx);bottom:10vh;text-align:center}
.ov-gal .kicker{justify-content:center}
.gal-title{font-family:var(--disp);font-weight:700;font-size:clamp(56px,8vw,150px);line-height:.9;letter-spacing:-.03em;margin-top:2vh}
.gal-title em{font-style:italic;font-weight:600;background:var(--gp);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.ov-q2{left:var(--gx);right:var(--gx);top:15vh;text-align:center}

/* Film */
.ov-film{left:var(--gx);bottom:44px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.film-title{font-family:var(--disp);font-weight:700;font-size:clamp(40px,4.6vw,80px);line-height:.95;letter-spacing:-.025em}
.film-title em{font-style:italic;font-weight:600;background:var(--gp);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}

/* Ende */
.ov-end{left:var(--gx);right:var(--gx);bottom:9vh;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2.6vh}
.end-logo{width:min(440px,70vw);height:auto;filter:drop-shadow(0 0 40px rgba(197,165,90,.35))}
.end-line{font-family:var(--acc);font-style:italic;font-size:clamp(22px,2vw,32px);color:var(--gold-l)}

/* Navigation von Werk zu Werk, Fortschritt */
.w-nav{right:var(--gx);top:110px;display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.16em;color:var(--gray);font-variant-numeric:tabular-nums}
.w-nav b{color:var(--gold-l);font-weight:500;font-family:var(--disp);font-size:15px}
.w-nav button{width:42px;height:42px;background:rgba(14,6,16,.5);border:1px solid rgba(197,165,90,.35);color:var(--gold-l);cursor:pointer;font-size:16px;transition:background .3s,color .3s}
.w-nav button:hover{background:var(--gold);color:var(--bg)}
.rail{position:absolute;left:var(--gx);right:var(--gx);bottom:16px;height:1px;background:rgba(197,165,90,.18);z-index:3}
.rail i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--pink-l));transform-origin:0 50%;transform:scaleX(0)}

/* ---------- Über Lena ---------- */
.about{position:relative;z-index:2;padding:18vh var(--gx) 14vh;background:radial-gradient(ellipse at 20% 30%,rgba(181,0,124,.16),transparent 60%),var(--bg)}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(36px,6vw,110px);align-items:center;max-width:1320px;margin:0 auto}
.about-img{position:relative}
.about-img img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:1px solid rgba(197,165,90,.35);box-shadow:0 40px 120px -40px rgba(181,0,124,.45)}
.about-img::after{content:"";position:absolute;inset:-14px 14px 14px -14px;border:1px solid rgba(197,165,90,.25);z-index:-1}
.about-name{font-family:var(--disp);font-weight:700;font-size:clamp(56px,6.4vw,110px);line-height:.9;letter-spacing:-.03em;margin:2.4vh 0 1.6vh}
.about-name em{font-style:italic;font-weight:600;background:var(--gp);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.about-head{font-family:var(--acc);font-weight:500;font-size:clamp(26px,2.4vw,38px);line-height:1.15;color:var(--gold-l);margin-bottom:3vh}
.about-head em{font-style:italic}
.about-text>p:not(.kicker){color:rgba(245,240,232,.84);margin-bottom:1.6em;max-width:34em}
.about-text .motifs{font-family:var(--acc);font-style:italic;font-size:22px;color:var(--gold-l)}
.stats{display:flex;gap:clamp(24px,4vw,64px);margin-top:4vh;padding-top:3vh;border-top:1px solid rgba(197,165,90,.25)}
.stats b{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(38px,3.6vw,58px);line-height:1;background:var(--gp);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{display:block;margin-top:8px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gray-l)}

/* ---------- Kontakt ---------- */
.contact{position:relative;z-index:2;padding:14vh var(--gx) 16vh;background:linear-gradient(to bottom,var(--bg),var(--pink-deep) 70%,var(--bg))}
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,110px);max-width:1320px;margin:0 auto;align-items:start}
.contact-title{font-family:var(--disp);font-weight:700;font-size:clamp(52px,6vw,104px);line-height:.92;letter-spacing:-.03em;margin:2.4vh 0 3vh}
.contact-title em{font-style:italic;font-weight:600;background:var(--gp);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.contact-intro{font-family:var(--acc);font-size:clamp(22px,1.8vw,28px);line-height:1.35;color:rgba(245,240,232,.86);max-width:20em}
.contact-web{display:flex;gap:18px;align-items:baseline;margin-top:5vh;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gray)}
.contact-web a{font-family:var(--disp);font-size:20px;letter-spacing:.02em;text-transform:none;color:var(--gold-l);border-bottom:1px solid rgba(197,165,90,.4)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px}
.form .wide{grid-column:1/-1}
.form label{display:flex;flex-direction:column;gap:10px}
.form label>span{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gray-l)}
.form input,.form textarea{background:transparent;border:0;border-bottom:1px solid rgba(197,165,90,.35);color:var(--white);font:inherit;font-size:18px;padding:10px 0;outline:none;transition:border-color .35s;border-radius:0}
.form textarea{resize:vertical;min-height:130px}
.form input:focus,.form textarea:focus{border-bottom-color:var(--gold-l)}
.form input::placeholder,.form textarea::placeholder{color:rgba(187,168,181,.45)}
.topics{border:0;display:flex;flex-wrap:wrap;gap:10px}
.topics legend{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gray-l);margin-bottom:12px;width:100%}
.chip{flex-direction:row!important;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-block;padding:10px 18px;border:1px solid rgba(197,165,90,.35);font-size:12px!important;letter-spacing:.14em!important;color:var(--gold-l)!important;transition:background .3s,color .3s,border-color .3s}
.chip input:checked+span{background:var(--gold);color:var(--bg)!important;border-color:var(--gold)}
.chip input:focus-visible+span{outline:1px solid var(--gold-l);outline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-end{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:8px}
.note{font-size:13px;color:var(--gray)}
.btn:disabled{opacity:.5;cursor:default}

/* ---------- Fuss ---------- */
.foot{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:34px var(--gx);border-top:1px solid rgba(197,165,90,.18);font-size:13px;color:var(--gray)}
.foot-logo img{height:38px;width:auto}
.foot a:hover{color:var(--gold-l)}
.foot-top{font-size:11px;letter-spacing:.24em;text-transform:uppercase}

/* ---------- Ansicht eines Werks, Film ---------- */
.lightbox,.filmbox{position:fixed;inset:0;z-index:60;background:rgba(10,4,12,.94);display:flex;align-items:center;justify-content:center;padding:72px var(--gx) 40px;opacity:0;transition:opacity .35s var(--ease)}
.lightbox[hidden],.filmbox[hidden]{display:none}
.lightbox.on,.filmbox.on{opacity:1}
.lb-fig{display:flex;flex-direction:column;align-items:center;gap:18px;max-height:100%}
.lb-fig img{max-width:min(1100px,86vw);max-height:76vh;object-fit:contain;box-shadow:0 0 120px rgba(181,0,124,.25);border:1px solid rgba(197,165,90,.25)}
.lb-fig figcaption{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;justify-content:center}
.lb-fig b{font-family:var(--disp);color:var(--gold-l);font-size:18px}
.lb-fig span{font-family:var(--disp);font-size:24px}
.lb-fig em{font-style:normal;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.lb-close{position:absolute;top:20px;right:var(--gx);width:44px;height:44px;background:none;border:1px solid rgba(197,165,90,.4);cursor:pointer}
.lb-close::before,.lb-close::after{content:"";position:absolute;left:11px;right:11px;top:21px;height:1px;background:var(--gold-l);transform:rotate(45deg)}
.lb-close::after{transform:rotate(-45deg)}
.lb-arrow{position:absolute;top:50%;margin-top:-24px;width:48px;height:48px;background:rgba(14,6,16,.6);border:1px solid rgba(197,165,90,.35);color:var(--gold-l);cursor:pointer;font-size:18px}
.lb-prev{left:var(--gx)}.lb-next{right:var(--gx)}
.lb-arrow:hover,.lb-close:hover{background:rgba(197,165,90,.18)}
.filmbox video{width:min(1280px,92vw);max-height:82vh;aspect-ratio:16/9;background:#000;border:1px solid rgba(197,165,90,.25);box-shadow:0 0 140px rgba(181,0,124,.25)}

/* ---------- Ruhige Ansicht: ruhige Seite mit allen Werken ---------- */
.flat .journey{height:auto!important}
.flat .jpin{position:static;height:auto;overflow:visible;padding:130px var(--gx) 60px}
.flat .host,.flat .shade,.flat .w-nav,.flat .rail,.flat .cue,.flat .loopvid{display:none}
.flat .mark{position:static;display:block;height:0;width:0}
.flat .hud{position:static;opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:auto;max-width:none}
.flat .ov-hero{margin-bottom:10vh}
.flat .w-flat{display:block;width:100%;height:auto;cursor:zoom-in;border:1px solid rgba(197,165,90,.25)}
.flat .work{margin-bottom:9vh}
.flat .w-sig{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5vw;align-items:center}
.flat .w-feat .w-meta{margin-top:24px;grid-template-columns:auto 1fr}
.flat .w-feat .w-desc{grid-column:1/-1;text-align:left;margin:0}
.flat .w-feat{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:4vw;align-items:end}
.flat .w-feat .w-flat{max-height:80vh;object-fit:contain;background:#000}
.flat .w-eye .w-flat{max-width:900px;margin:0 auto 5vh}
.flat .ov-gal{margin:4vh 0 6vh}
.flat .gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:48px 26px}
.flat .w-gal{margin:0}
.flat .w-gal .w-flat{aspect-ratio:4/5;object-fit:contain;background:#0a040c}
.flat .w-gal .w-meta{margin-top:16px}
.flat .w-gal .w-no{font-size:44px}
.flat .w-gal .w-title{font-size:28px}
.flat .ov-q2{margin:10vh 0}
.flat .ov-film .w-flat{max-width:900px;margin-bottom:2vh}
.flat .ov-film{margin-bottom:10vh}
.flat .ov-end{margin-bottom:4vh}

/* ---------- Handy ---------- */
@media (max-width:900px){
  .links{position:fixed;top:0;left:0;right:0;flex-direction:column;gap:0;padding:96px var(--gx) 30px;background:rgba(14,6,16,.97);transform:translateY(-105%);transition:transform .5s var(--ease);margin:0}
  .links.open{transform:none}
  .links a{font-size:15px;padding:16px 0;border-bottom:1px solid rgba(197,165,90,.15)}
  .menu{display:block;margin-left:auto;z-index:2}
  .brand{z-index:2}
  .langs{position:absolute;top:24px;right:calc(var(--gx) + 52px);z-index:2}
  .lang-btn{padding:6px 4px;font-size:10px}
  .brand img{height:36px}
  .nav{gap:12px}
}
@media (max-width:760px){
  body{font-size:16px}
  .shade{background:linear-gradient(to top,rgba(14,6,16,.9) 0,rgba(14,6,16,.6) 30%,rgba(14,6,16,0) 56%)}
  .ov-hero{top:auto;bottom:9vh;max-width:none;right:var(--gx)}
  .hero-title{font-size:clamp(48px,14.5vw,84px)}
  .ov-hero .kicker span:first-child,.ov-hero .kicker i{display:none}
  .hero-title .l1{--dx:-40px}.hero-title .l2{--dx:20px}.hero-title .l3{--dx:60px}
  .ov-hero .sub{font-size:19px;margin-top:2vh}
  .cue{margin-top:3vh}
  .w-sig{top:auto;bottom:6vh;max-width:none;right:var(--gx)}
  .w-sig .w-title{font-size:46px;margin:1.6vh 0 1.2vh}
  .w-desc{font-size:19px;margin-top:1.4vh}
  .w-feat,.w-gal{bottom:30px}
  .w-feat .w-meta,.w-gal .w-meta{grid-template-columns:auto 1fr;gap:16px}
  .w-feat .w-desc{grid-column:1/-1;text-align:left;margin:0}
  .w-no{font-size:56px}
  .w-feat .w-title,.w-gal .w-title{font-size:34px}
  .w-eye{bottom:5vh}
  .q-big{font-size:31px}
  .q-small{font-size:19px}
  .ov-q2{top:150px}
  .w-nav{top:auto;bottom:auto;top:84px}
  .ov-film{bottom:34px}
  .about-grid,.contact-grid{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .stats{gap:22px}
  .flat .w-sig,.flat .w-feat{grid-template-columns:1fr}
  .lb-arrow{top:auto;bottom:20px;margin:0}
}
/* Fokus sichtbar in Gold; Sprungziele nicht unter der Kopfleiste */
:focus-visible{outline:1px solid var(--gold-l);outline-offset:3px}
.flat [id],.about,.contact{scroll-margin-top:84px}

/* ---------- Einstieg: das Weltall der ersten Seite (Logo, Panther, Walk Like a Panther). Beim ersten Scrollen fährt man hinunter in die Galerie ---------- */
.intro{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;overflow:hidden;pointer-events:none;--q:0;--ib:1;--lo:1}
.intro-bg{position:absolute;inset:0;opacity:calc(var(--ib) * .64);background:linear-gradient(135deg,var(--bg) 0%,var(--pink-deep) 25%,var(--pink-bg) 50%,var(--bg) 75%,#120a18 100%);background-size:400% 400%;animation:bgShift 25s ease infinite}
@keyframes bgShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.intro-stars{position:absolute;inset:-10%;opacity:calc(var(--ib) * .85);pointer-events:none;
  background-image:radial-gradient(1.2px 1.2px at 12% 18%,#F5F0E8,transparent),radial-gradient(1px 1px at 28% 72%,#E8D48B,transparent),radial-gradient(1.4px 1.4px at 47% 33%,#F5F0E8,transparent),radial-gradient(1px 1px at 63% 81%,#d4189a,transparent),radial-gradient(1.3px 1.3px at 78% 24%,#F0E0A0,transparent),radial-gradient(1px 1px at 88% 58%,#F5F0E8,transparent),radial-gradient(1.1px 1.1px at 6% 52%,#E8D48B,transparent),radial-gradient(1px 1px at 37% 91%,#F5F0E8,transparent);
  background-size:340px 300px;animation:twinkle 7s ease-in-out infinite alternate;scale:calc(1 + var(--q) * .5)}
.intro-stars.s2{background-size:520px 460px;background-position:130px 90px;animation-delay:-3.5s;opacity:calc(var(--ib) * .6);scale:calc(1 + var(--q) * .9)}
@keyframes twinkle{0%{filter:brightness(.7)}100%{filter:brightness(1.35)}}
.orb{position:absolute;border-radius:50%;filter:blur(80px);animation:orbFloat 12s ease-in-out infinite alternate;opacity:var(--ib)}
.orb-1{width:500px;height:500px;background:radial-gradient(circle,rgba(181,0,124,.35),transparent 70%);top:10%;left:15%;translate:calc(var(--q) * -34vw) calc(var(--q) * -24vh)}
.orb-2{width:400px;height:400px;background:radial-gradient(circle,rgba(197,165,90,.25),transparent 70%);bottom:10%;right:10%;animation-delay:-4s;translate:calc(var(--q) * 30vw) calc(var(--q) * 26vh)}
.orb-3{width:300px;height:300px;background:radial-gradient(circle,rgba(212,24,154,.2),transparent 70%);top:60%;left:55%;animation-delay:-8s;translate:calc(var(--q) * 12vw) calc(var(--q) * 34vh)}
@keyframes orbFloat{0%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-40px) scale(1.1)}66%{transform:translate(-20px,30px) scale(.95)}100%{transform:translate(15px,-15px) scale(1.05)}}
.hero-line{position:absolute;width:1px;background:linear-gradient(to bottom,transparent,var(--gold),transparent);opacity:calc(var(--ib) * .2)}
.hero-line-1{height:300px;top:5%;right:15%;transform:rotate(15deg)}
.hero-line-2{height:200px;bottom:15%;left:10%;transform:rotate(-10deg)}
.intro-content{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2rem;opacity:var(--lo);transform:translate3d(0,calc(var(--q) * -26vh),0) scale(calc(1 - var(--q) * .42));transform-origin:50% 30%}
.intro-logo{width:min(550px,75vw);height:auto;opacity:0;transform:scale(.85) translateY(20px);animation:introReveal 1.8s cubic-bezier(0,0,.2,1) .3s forwards}
@keyframes introReveal{to{opacity:1;transform:scale(1) translateY(0)}}
.intro-divider{width:140px;height:2px;position:relative;background:linear-gradient(90deg,transparent,var(--gold),var(--pink),var(--gold),transparent);opacity:0;animation:introFade 1s var(--ease) 1.2s forwards}
.intro-divider::after{content:"";position:absolute;inset:-4px -20px;background:linear-gradient(90deg,transparent,rgba(197,165,90,.3),transparent);filter:blur(8px)}
.intro-tagline{font-family:var(--acc);font-size:clamp(1.25rem,2.6vw,1.7rem);font-weight:500;font-style:italic;letter-spacing:.15em;background:linear-gradient(135deg,var(--gold-l),var(--gold),var(--gold-b),var(--gold));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;animation:introFade 1s var(--ease) 1.5s forwards,goldShimmer 6s ease-in-out 2.5s infinite}
@keyframes goldShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes introFade{to{opacity:1}}
.intro-scroll{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.7rem;opacity:0;animation:introFade 1s var(--ease) 2.5s forwards}
.intro-scroll span{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gray);opacity:var(--ib)}
.scroll-bar{width:2px;height:50px;border-radius:1px;background:rgba(181,0,124,.2);position:relative;overflow:hidden;opacity:var(--ib)}
.scroll-bar::after{content:"";position:absolute;top:-100%;width:100%;height:60%;border-radius:1px;background:linear-gradient(to bottom,var(--gold),var(--pink));animation:scrollDrop 2.5s ease infinite}
@keyframes scrollDrop{0%{top:-60%}100%{top:120%}}
.flat .intro{position:relative;inset:auto;height:92vh;height:92svh;margin:-130px calc(-1 * var(--gx)) 8vh}
@media (max-width:760px){
  .intro-logo{width:min(320px,85vw)}
  .orb-1{width:300px;height:300px}.orb-2{width:250px;height:250px}.orb-3{width:200px;height:200px}
}
@media (prefers-reduced-motion:reduce){.orb,.intro-bg,.intro-stars,.intro-tagline,.scroll-bar::after{animation:none}.intro-logo,.intro-divider,.intro-tagline{animation:none;opacity:1;transform:none}.intro-scroll{animation:none;opacity:1}}

/* ---------- Vergolden: wo die Maus über das Logo fährt, bleibt es golden ---------- */
.shine{position:relative;display:inline-block;line-height:0;vertical-align:top}
.shine .gild{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.hud .shine,.intro .shine{pointer-events:auto}

/* ---------- Goldrahmen der grossen Ansicht ---------- */
.lb-fig img{border:16px solid transparent;border-image:linear-gradient(135deg,#7a5418 0%,#f3d27a 18%,#b8862e 34%,#fff0b8 50%,#a9792a 68%,#e9c56c 84%,#7a5418 100%) 1;
  outline:1px solid rgba(255,240,184,.85);outline-offset:-17px;
  box-shadow:0 0 0 2px #4a320c,0 0 0 5px #e2b45c,0 0 0 7px #6e4c16,0 0 0 9px #f3d98a,0 0 0 10px #5a3d10,0 30px 90px rgba(0,0,0,.65),0 0 120px rgba(181,0,124,.22)}
.lb-fig img{box-sizing:content-box;max-width:calc(min(1100px,86vw) - 32px);max-height:calc(76vh - 32px);width:auto;height:auto}