@font-face{font-family:"Metal Mania";src:url(../fonts/metal-mania.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--fg:#ecebe7;--bg:#070708;--grau:#9c9da2;--linie:#232327;--matt:#121214;--blau:#8fa8ff;--tafel:#0f0f12;--rand:clamp(18px,4.5vw,64px);--ease:cubic-bezier(.2,.7,.1,1)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.0625rem/1.55 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}img{height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
button,select{font:inherit;color:inherit}button{background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blau);outline-offset:3px}
h1,h2,h3,p,dl,dd{margin:0}
[hidden]{display:none!important}

.leiste{position:sticky;top:0;z-index:60;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:16px var(--rand);background:rgba(7,7,8,.88);border-bottom:1px solid var(--linie)}
.leiste__name{font-weight:600;letter-spacing:-.02em;text-decoration:none;font-size:1.1rem}
.leiste nav{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.8rem);font-size:.97rem}
.leiste nav a{text-decoration:none;color:var(--grau)}
.leiste nav a:hover,.leiste nav a[aria-current]{color:var(--fg)}
/* Sprachlink im Menü: wie die anderen Punkte, mit feinem Strich davor abgesetzt */
.leiste nav a.sprache{padding-left:clamp(.8rem,2vw,1.8rem);border-left:1px solid var(--linie)}
.korbknopf{font-weight:500;white-space:nowrap}
.korbknopf b{display:inline-block;min-width:1.55em;padding:0 .4em;margin-left:.35em;border-radius:1em;background:var(--fg);color:var(--bg);text-align:center;font-weight:500;font-size:.88em}
@media (max-width:860px){.leiste nav a:not(.immer){display:none}}

.ort{padding:clamp(64px,10vw,140px) var(--rand)}
.ort+.ort{border-top:1px solid var(--linie)}
.ort>h2,.kopf h2{font-size:clamp(2rem,4.4vw,3.6rem);font-weight:500;letter-spacing:-.04em;line-height:1.02}
.einl{max-width:56ch;color:var(--grau);margin-top:1rem}
.knopf{display:inline-flex;align-items:center;justify-content:center;padding:.72em 1.3em;border:1px solid var(--fg);border-radius:999px;font-weight:500;text-decoration:none;transition:background .2s,color .2s;white-space:nowrap}
.knopf:hover{background:var(--fg);color:var(--bg)}
.knopf--voll{background:var(--fg);color:var(--bg)}.knopf--voll:hover{background:var(--bg);color:var(--fg)}
.knopf[disabled]{opacity:.45;pointer-events:none}
.knopf--klein{padding:.45em 1em;font-size:.93rem}

/* Start */
.start{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,5vw,90px);align-items:center;padding:clamp(30px,5vw,70px) var(--rand) clamp(50px,7vw,100px);min-height:calc(100svh - 62px)}
.start h1{font-size:clamp(3rem,8.4vw,8rem);font-weight:500;letter-spacing:-.055em;line-height:.92}
.start__text p{font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.35;max-width:30ch;margin:1.6rem 0 2rem;color:var(--grau)}
.start__zeile{display:flex;gap:.7rem;flex-wrap:wrap}
.start__werk{display:block;text-align:left;width:100%}
.start__rahmen{position:relative;background:var(--matt);aspect-ratio:1/1.08;overflow:hidden}
.start__rahmen img{position:absolute;inset:7%;width:86%;height:86%;object-fit:contain;opacity:0;transition:opacity 1.1s;filter:drop-shadow(0 18px 30px rgba(0,0,0,.16))}
.start__rahmen img.da{opacity:1}
.start__schild{display:flex;justify-content:space-between;gap:1rem;margin-top:.8rem;font-size:.95rem;color:var(--grau)}
.start__schild b{color:var(--fg);font-weight:500}
@media (max-width:860px){.start{grid-template-columns:1fr;min-height:0}.start__bild{order:-1}}

/* Start als 3D-Bühne */
.start{position:relative;overflow:hidden}
.flug{position:absolute;inset:0;width:100%;height:100%;z-index:1;touch-action:pan-y}
.start--flug{background:radial-gradient(90% 70% at 50% 35%,#101013 0,#050506 70%);min-height:calc(100svh - 58px);align-items:end;grid-template-columns:1fr}
.start--flug .start__text p{color:#b9b9bd}
.start--flug .start__text p:not(.start__tipp){margin-bottom:.9rem}
.start--flug .start__bild{display:none}
.start--flug .start__text{position:relative;z-index:2;pointer-events:none}
.start--flug .start__text a{pointer-events:auto}
.start .start__tipp{display:none;font-size:.95rem;margin:0 0 1.7rem}
.start--flug .start__tipp{display:block}
@media (max-width:860px){.start--flug{min-height:calc(100svh - 58px);align-items:end}.start--flug h1{font-size:clamp(2.6rem,13vw,4rem)}.start--flug .start__text p{margin:.8rem 0 1.1rem}}

.fang{position:absolute;z-index:3;left:74.5%;right:calc(var(--rand)*.6);top:50%;translate:0 -50%;opacity:0;transition:opacity .5s .45s;background:var(--tafel);border:1px solid var(--linie);padding:22px 22px 20px;box-shadow:0 1px 1px rgba(0,0,0,.08),0 24px 50px -22px rgba(0,0,0,.4)}
.start--gefangen .fang{opacity:1}
.fang h2{font-size:clamp(1.4rem,2.1vw,2rem);font-weight:500;letter-spacing:-.035em;line-height:1.08}
.fang dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;font-size:.9rem;margin:1.1rem 0}
.fang dt{color:var(--grau)}
.fang__preis{font-size:1.6rem;font-weight:500;letter-spacing:-.03em;margin-bottom:1rem}
.fang__zeile{display:flex;flex-wrap:wrap;gap:.5rem}
.fang__hinweis{font-size:.85rem;color:var(--grau);margin-top:1rem}
@media (max-width:860px){.fang{left:var(--rand);right:var(--rand);top:auto;bottom:18px;translate:none;padding:16px 18px}.fang dl{display:none}.fang h2{margin-bottom:.3rem}.fang__preis{margin-bottom:.7rem}.start--gefangen .start__text{visibility:hidden}}

/* Werke */
.kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1.4rem 3rem}
.filter{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.filter button{padding:.5em 1.05em;border:1px solid var(--linie);border-radius:999px;font-size:.95rem;color:var(--grau);transition:border-color .2s,color .2s}
.filter button:hover{border-color:var(--fg);color:var(--fg)}
.filter button[aria-pressed=true]{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.filter select{padding:.5em .9em;border:1px solid var(--linie);border-radius:999px;background:var(--bg);font-size:.95rem}
.filter label{display:flex;align-items:center;gap:.45em;font-size:.95rem;color:var(--grau);margin-left:.4rem}
.werke{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(40vw,250px),1fr));gap:clamp(22px,3vw,44px) clamp(14px,2vw,30px);margin-top:clamp(30px,5vw,60px)}
.werk{display:block;text-align:left;width:100%}
.werk__bild{background:var(--matt);aspect-ratio:1/1.18;display:grid;place-items:center;padding:9%;overflow:hidden}
.werk__bild img{max-width:100%;max-height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.14));transition:transform .5s var(--ease)}
.werk:hover .werk__bild img{transform:scale(1.035)}
.werk h3{font-size:1rem;font-weight:500;margin-top:.75rem;line-height:1.3}
.werk p{font-size:.9rem;color:var(--grau);line-height:1.4}
.werk .preis{color:var(--fg);margin-top:.15rem}
.werk.weg .werk__bild img{opacity:.4}
.punkt{display:inline-block;width:.55em;height:.55em;border-radius:50%;background:var(--blau);margin-right:.45em;vertical-align:.05em}
.leerhinweis{margin-top:3rem;color:var(--grau)}

/* Film */
.filme{list-style:none;margin:clamp(30px,5vw,60px) 0 0;padding:0;border-top:1px solid var(--linie)}
.filme li{border-bottom:1px solid var(--linie)}
.filme .zeile{display:grid;grid-template-columns:132px minmax(0,1fr) auto;gap:clamp(.9rem,2vw,1.8rem);align-items:center;width:100%;text-align:left;padding:.8rem 0}
.filme img,.filme .ohne{width:132px;aspect-ratio:16/9;object-fit:cover;background:var(--matt)}
.filme .t{font-size:clamp(1.15rem,2vw,1.6rem);font-weight:500;letter-spacing:-.025em;line-height:1.15}
.filme .a{font-size:.92rem;color:var(--grau)}
.filme .j{font-variant-numeric:tabular-nums;color:var(--grau)}
.filme button.zeile:hover .t{text-decoration:underline}
@media (max-width:600px){.filme .zeile{grid-template-columns:96px 1fr}.filme img,.filme .ohne{width:96px}.filme .j{display:none}}

/* Musik */
.platten{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(44vw,230px),1fr));gap:clamp(16px,2.5vw,36px);margin-top:clamp(30px,5vw,60px)}
.platte button{display:block;width:100%;text-align:left}
.platte img{aspect-ratio:1;object-fit:cover;width:100%;transition:opacity .2s}.platte button:hover img{opacity:.85}
.platte h3{font-size:1rem;font-weight:500;margin-top:.7rem}.platte p{font-size:.9rem;color:var(--grau)}
.platte iframe{width:100%;height:120px;border:0;margin-top:.7rem}

/* Bühne */
.buehne{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(24px,3.5vw,56px);margin-top:clamp(30px,5vw,60px)}
.buehne h3{font-size:1.3rem;font-weight:500;letter-spacing:-.02em;line-height:1.15}
.buehne p{margin-top:.5rem;color:var(--grau);font-size:.97rem;max-width:40ch}
.buehne .j{display:block;color:var(--grau);font-variant-numeric:tabular-nums;font-size:.92rem;margin-bottom:.3rem}
.buehne p:has(.knopf){margin-top:.9rem}

/* Spiel, Über */
.zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,90px);align-items:center}
.zwei video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.zwei h2{font-size:clamp(2rem,4.4vw,3.6rem);font-weight:500;letter-spacing:-.04em;line-height:1.02}
.zwei .einl{margin-bottom:1.6rem}
.ueber{align-items:start;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
.ueber video{aspect-ratio:480/854;max-width:340px}
.ueber .lauf p{max-width:60ch;margin-top:1.1rem}
.vita{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.6rem;margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--linie);font-size:.97rem;max-width:60ch}
.vita dt{color:var(--grau);font-variant-numeric:tabular-nums}
.links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
@media (max-width:860px){.zwei{grid-template-columns:1fr}.ueber video{max-width:220px}}
.kontakt h2{font-size:clamp(2rem,4.4vw,3.6rem);font-weight:500;letter-spacing:-.04em;line-height:1.02}
.kontakt a.gross{display:inline-block;font-size:clamp(1.4rem,3.6vw,3rem);letter-spacing:-.035em;margin-top:1.6rem}

.fuss{display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;padding:26px var(--rand) 30px;font-size:.9rem;color:var(--grau);border-top:1px solid var(--linie)}
.fuss nav{display:flex;gap:1.4rem;flex-wrap:wrap}

/* Werk-Ansicht */
.ansicht{position:fixed;inset:0;z-index:80;background:var(--bg);display:grid;grid-template-columns:minmax(0,1fr) min(420px,38vw);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.ansicht.auf{opacity:1;visibility:visible}
.ansicht__bild{position:relative;overflow:hidden;cursor:zoom-in;display:grid;place-items:center;padding:clamp(16px,4vh,56px);background:var(--matt)}
.ansicht__bild img{max-width:100%;max-height:calc(100svh - 2*clamp(16px,4vh,56px));object-fit:contain;transition:transform .35s var(--ease);filter:drop-shadow(0 20px 36px rgba(0,0,0,.18))}
.ansicht__bild.nah{cursor:zoom-out}.ansicht__bild.nah img{transition:none;transform:scale(2.6)}
.ansicht__info{padding:clamp(76px,12vh,120px) clamp(20px,3vw,44px) 30px;overflow:auto}
.ansicht__info h2{font-size:clamp(1.7rem,2.6vw,2.4rem);font-weight:500;letter-spacing:-.035em;line-height:1.05}
.ansicht__info dl{margin:1.5rem 0;display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.2rem;font-size:.95rem}
.ansicht__info dt{color:var(--grau)}
.ansicht__info .preis{font-size:1.6rem;font-weight:500;letter-spacing:-.03em;margin-bottom:1rem}
.ansicht__info .hinweis{font-size:.88rem;color:var(--grau);margin-top:1.1rem;max-width:42ch}
.ansicht__zug{display:flex;gap:.5rem;margin-top:2rem}
.zu{position:fixed;z-index:95;top:14px;right:var(--rand);background:var(--bg)}
@media (max-width:860px){.ansicht{grid-template-columns:1fr;grid-template-rows:56svh max-content;overflow:auto}.ansicht__info{padding-top:22px}.ansicht__bild{padding-top:58px}.ansicht__bild img{max-height:calc(56svh - 74px)}}

/* Korb */
.korb{position:fixed;z-index:90;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--tafel);padding:72px 24px 24px;display:flex;flex-direction:column;transform:translateX(102%);transition:transform .4s var(--ease)}
.korb.auf{transform:none;box-shadow:-30px 0 60px -30px rgba(0,0,0,.3)}
.korb h2{font-size:1.9rem;font-weight:500;letter-spacing:-.035em}
.korb ul{list-style:none;margin:1.3rem 0;padding:0;overflow:auto;flex:1}
.korb li{display:grid;grid-template-columns:64px 1fr auto;gap:.9rem;align-items:center;padding:.7rem 0;border-bottom:1px solid var(--linie)}
.korb li img{width:64px;height:84px;object-fit:contain;background:var(--matt)}
.korb li small{display:block;color:var(--grau)}
.korb li button{text-decoration:underline;font-size:.86rem}
.korb .summe{display:grid;grid-template-columns:1fr auto;gap:.3rem 1rem;margin-bottom:1rem}.korb .summe b{font-size:1.2rem;font-weight:500}
.korb .klein{font-size:.84rem;color:var(--grau);margin-top:.9rem}
.korb .fehler{color:#ff9c8f;font-size:.92rem;margin-top:.8rem}
.korb .leer{color:var(--grau);margin:1.3rem 0}
.schleier{position:fixed;inset:0;z-index:85;background:rgba(0,0,0,.4);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.schleier.auf{opacity:1;visibility:visible}
.kino{position:fixed;inset:0;z-index:92;background:#000;display:grid;place-items:center;padding:64px var(--rand)}
.kino iframe{width:min(100%,calc((100svh - 128px)*16/9));aspect-ratio:16/9;border:0}

.recht{max-width:68ch;margin:0 auto;padding:70px var(--rand) 80px}
.recht h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:500;letter-spacing:-.04em;line-height:1;margin-bottom:2rem}
.recht h2{font-size:1.2rem;font-weight:600;margin:2.2rem 0 .5rem}
.recht p{margin:.6rem 0}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important}}

/* Schrift wie auf der bisherigen leokoeppen.de: Metal Mania für Titel und Knöpfe, Inter für Text */
.leiste__name,.start h1,.ort>h2,.kopf h2,.zwei h2,.kontakt h2,.ansicht__info h2,.korb h2,.fang h2,.recht h1,.tor__name,.knopf,.filter button,.leiste nav a,.korbknopf,.tonknopf,.buehne h3,.filme .t{font-family:"Metal Mania",Inter,sans-serif;font-weight:400;letter-spacing:.06em;text-transform:uppercase}
.start h1{letter-spacing:.04em;line-height:1;font-size:clamp(2.8rem,7.6vw,7rem)}
.ort>h2,.kopf h2,.zwei h2,.kontakt h2{letter-spacing:.05em;line-height:1.1}
.knopf,.filter button{letter-spacing:.08em;font-size:.95rem}
.leiste nav a,.korbknopf,.tonknopf{font-size:.95rem;letter-spacing:.08em}
.tonknopf{color:var(--grau)}.tonknopf:hover{color:var(--fg)}
.korbknopf b{font-family:Inter,sans-serif;letter-spacing:0}
.kontakt a.gross{letter-spacing:-.02em}
.start__rahmen img,.werk__bild img,.ansicht__bild img{filter:drop-shadow(0 14px 26px rgba(0,0,0,.6))}
/* Tor: erst eintreten, dann beginnt der Sturm mit Ton */
.tor{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;gap:1.6rem;text-align:center;padding:var(--rand);background:radial-gradient(60% 50% at 50% 50%,rgba(5,5,6,.35),rgba(5,5,6,.82));transition:opacity .9s}
.tor.weg{opacity:0;pointer-events:none}
.tor__name{font-size:clamp(2.6rem,9vw,7.5rem);line-height:1;letter-spacing:.05em}
.tor .knopf{font-size:1.15rem;padding:.8em 1.9em}
.tor__klein{font-size:.9rem;color:var(--grau)}.tor__klein button{text-decoration:underline;color:inherit}
.start--flug .start__text{opacity:0;transition:opacity 1.2s 1.5s}
.start--flug.start--offen .start__text{opacity:1}
.start--flug.start--gefangen .start__text{opacity:.0;transition-delay:0s}
@media (max-width:860px){.start--flug.start--gefangen .start__text{visibility:hidden}}
.start--flug .start__text{text-shadow:0 2px 18px #000,0 0 3px #000}
.start--flug .start__text::before{content:"";position:absolute;z-index:-1;inset:-18% -30% -40% -40%;background:radial-gradient(closest-side,rgba(5,5,6,.78),rgba(5,5,6,0))}
.start--flug .start__text .knopf{text-shadow:none}

/* Filmbild über der Bühne: abgedunkelte Ränder und feines Korn */
.start--flug::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(115% 95% at 50% 46%,rgba(0,0,0,0) 52%,rgba(0,0,0,.62) 100%)}
.start--flug::before{content:"";position:absolute;inset:-60px;z-index:1;pointer-events:none;opacity:.11;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23k)'/%3E%3C/svg%3E");animation:korn .5s steps(5) infinite}
@keyframes korn{20%{transform:translate(-22px,14px)}40%{transform:translate(18px,-30px)}60%{transform:translate(-34px,-12px)}80%{transform:translate(26px,28px)}}
@media (prefers-reduced-motion:reduce){.start--flug::before{animation:none}}

/* Am Anfang kein Menü: die Leiste kommt erst beim Scrollen */
.hat-flug .leiste{position:fixed;left:0;right:0;transform:translateY(-102%);transition:transform .45s var(--ease)}
.hat-flug.unten .leiste{transform:none}
.hat-flug .start--flug{min-height:100svh}
.start__ton{position:absolute;z-index:3;right:var(--rand);bottom:22px;padding:.5em 1em;border:1px solid var(--linie);border-radius:999px;background:rgba(7,7,8,.6)}

/* Handy: alle Tippziele mindestens 44 px, ohne das Bild zu ändern (die Fläche wächst unsichtbar um das Wort) */
@media (pointer:coarse){
  .leiste nav a,.leiste .korbknopf,.leiste__name{display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center}
  .leiste__name{justify-content:flex-start}
  .zu{min-height:44px;min-width:44px}
  .korb li button{display:inline-flex;align-items:center;min-height:44px;padding:0 .2rem;margin:-.6rem 0 -.6rem -.2rem}
  .fuss nav a{display:inline-flex;align-items:center;min-height:44px}
}