/* PARADISE LOST · BRANDSPUR 2026 — eigene Formensprache: Nacht · Glut · Asche · Kunstrasen · Pergament */
@font-face{font-family:"IM Fell English";src:url(../fonts/imfell-regular.woff2) format("woff2");font-style:normal;font-display:swap}
@font-face{font-family:"IM Fell English";src:url(../fonts/imfell-italic.woff2) format("woff2");font-style:italic;font-display:swap}
@font-face{font-family:"IM Fell English SC";src:url(../fonts/imfell-sc.woff2) format("woff2");font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/plexmono-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/plexmono-light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/plexmono-bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --nacht:#070504; --nacht2:#100b08; --glut:#ff7a1a; --glut2:#ffd28c; --rot:#c8321a; --asche:#958f86; --asche2:#5d5852;
  --rasen:#2ee858; --rost:#b0683a; --perg:#eee2c8; --perg2:#cbbd9f;
  --serif:"IM Fell English",Georgia,"Times New Roman",serif; --sc:"IM Fell English SC","IM Fell English",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --w:min(1240px,92vw);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--nacht);color:var(--perg);font:400 19px/1.55 var(--serif);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--glut2);text-decoration:none;border-bottom:1px solid rgba(255,122,26,.35)}
a:hover{color:#fff;border-color:var(--glut)}
img{max-width:100%;height:auto;display:block}
.wrap{width:var(--w);margin:0 auto}
.mono{font-family:var(--mono)}
::selection{background:var(--glut);color:#000}

/* ---------- Brandlinie (Unternavigation) */
.brandlinie{position:sticky;top:0;z-index:40;background:linear-gradient(#070504f2,#070504d9);backdrop-filter:blur(6px);border-bottom:1px solid #2a1a10}
.brandlinie .wrap{display:flex;align-items:center;gap:18px;min-height:46px}
.brandlinie nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1}
.brandlinie nav::-webkit-scrollbar{display:none}
.brandlinie nav a{font:400 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--perg2);border:0;padding:16px 10px;white-space:nowrap;position:relative}
.brandlinie nav a:hover,.brandlinie nav a.an{color:var(--glut2)}
.brandlinie nav a.an::after{content:"";position:absolute;left:10px;right:10px;bottom:8px;height:2px;background:var(--glut);box-shadow:0 0 10px var(--glut)}
.brandlinie .fort{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:linear-gradient(90deg,var(--rot),var(--glut),var(--glut2));box-shadow:0 0 12px var(--glut)}
.brandlinie.statisch{position:relative}
.zur{font:400 12px var(--mono);letter-spacing:.1em;white-space:nowrap}

/* ---------- Hero: das Paradies brennt unter dem Cursor */
.hero{position:relative;height:min(56.25vw,88vh);min-height:460px;overflow:hidden;background:#000;cursor:crosshair;touch-action:pan-y}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}
.hero .titel{position:absolute;left:0;right:0;bottom:7%;pointer-events:none;text-align:center;text-shadow:0 2px 30px #000,0 0 4px #000}
.hero .k{font:400 12px var(--mono);letter-spacing:.32em;color:var(--glut2);text-transform:uppercase}
.hero h1{font:400 clamp(54px,10.5vw,168px)/.9 var(--sc);margin:.08em 0 .06em;letter-spacing:.01em;color:var(--perg)}
.hero .u{font:italic clamp(22px,3vw,42px)/1.15 var(--serif);color:var(--perg)}
.hero .m{font:400 clamp(11px,1.2vw,14px) var(--mono);letter-spacing:.14em;color:var(--perg2);margin-top:1.1em}
.hero .werkzeug{position:absolute;right:18px;top:18px;display:flex;gap:6px;z-index:3}
.hero .hinweis{position:absolute;left:18px;top:18px;font:400 11px var(--mono);letter-spacing:.12em;color:var(--asche);z-index:3;max-width:44ch}
.btn{font:400 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--perg);background:#140d09cc;border:1px solid #4a2c18;padding:10px 13px;cursor:pointer;border-radius:0;transition:.2s}
.btn:hover,.btn[aria-pressed=true]{border-color:var(--glut);color:var(--glut2);box-shadow:0 0 14px #ff7a1a44 inset}
.btn.rot{background:var(--rot);border-color:var(--rot);color:#fff}
.btn.gruen{border-color:#1f7a37;color:#9ff5b4}

/* ---------- Abschnitte */
section{padding:clamp(64px,9vw,128px) 0;position:relative}
section+section{border-top:1px solid #1d130c}
.kopf{display:grid;grid-template-columns:minmax(80px,140px) 1fr;gap:24px;align-items:end;margin-bottom:42px}
.kopf .nr{font:400 clamp(56px,8vw,110px)/.8 var(--sc);color:transparent;-webkit-text-stroke:1px var(--glut);opacity:.85}
.kopf h2{font:400 clamp(34px,4.6vw,64px)/1 var(--sc);margin:0;color:var(--perg)}
.kopf .sub{font:400 13px/1.6 var(--mono);color:var(--asche);letter-spacing:.06em;margin-top:.9em}
p{margin:0 0 1em;max-width:68ch}
.lead{font:italic clamp(22px,2.4vw,30px)/1.35 var(--serif);color:var(--perg);max-width:46ch}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px)}
.klein{font:400 13px/1.7 var(--mono);color:var(--perg2)}
.glut{color:var(--glut2)} .rasen{color:var(--rasen)}
blockquote{margin:1.4em 0;padding:0 0 0 1.2em;border-left:2px solid var(--glut);font:italic clamp(21px,2.1vw,28px)/1.35 var(--serif);max-width:52ch}
blockquote cite{display:block;font:normal 12px/1.6 var(--mono);color:var(--glut2);margin-top:.7em;letter-spacing:.06em}
blockquote .de{display:block;font:normal 14px/1.6 var(--mono);color:var(--asche);margin-top:.5em}

/* ---------- AV-Player */
.player{position:relative;aspect-ratio:16/9;background:#000 center/cover no-repeat;border:1px solid #2a1a10;overflow:hidden}
.player iframe,.player video{position:absolute;inset:0;width:100%;height:100%;border:0}
.player .gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(#0008,#000c);text-align:center;padding:20px}
.player .gate b{font:400 clamp(24px,3vw,40px) var(--sc)}
.player .gate small{font:400 12px/1.6 var(--mono);color:var(--perg2);max-width:52ch}
.av-meta{display:flex;flex-wrap:wrap;gap:6px 20px;font:400 12px var(--mono);color:var(--asche);margin:12px 0 30px;letter-spacing:.05em}
.kapitel{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px}
.kapitel li{background:#0f0a07;border:1px solid #20140c;padding:14px 16px;cursor:pointer;transition:.2s;position:relative;overflow:hidden}
.kapitel li::before{content:"";position:absolute;left:0;bottom:0;height:2px;width:var(--b,0%);background:var(--glut);box-shadow:0 0 10px var(--glut);transition:width .6s}
.kapitel li:hover{border-color:#6a3a1a}
.kapitel li:hover::before{--b:100%}
.kapitel .z{font:400 12px var(--mono);color:var(--glut2)}
.kapitel .t{font:400 22px/1.15 var(--sc);display:block;margin:.3em 0 .2em}
.kapitel .s{font:400 12px/1.5 var(--mono);color:var(--asche)}

/* ---------- Doppelprojektion-Bänder (32:9) */
.band{aspect-ratio:32/9;background:#000 center/cover no-repeat;border:1px solid #1d130c}
.baender{display:grid;gap:10px}
.still-reihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:18px}
.still-reihe img{aspect-ratio:16/9;object-fit:cover;width:100%;border:1px solid #1d130c}

/* ---------- Partitur / Raumplan */
.partitur{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.plan{position:sticky;top:90px;background:#0c0806;border:1px solid #24170e;padding:14px}
.plan svg{width:100%;height:auto;display:block}
.plan .raum{fill:#120c08;stroke:#5a3a22;stroke-width:1.2;transition:.4s}
.plan .raum.an{fill:#3a1606;stroke:var(--glut);filter:drop-shadow(0 0 8px #ff7a1a)}
.plan .rasen-f{fill:#1d7a35;transition:.4s}
.plan .raum.an + .rasen-f{fill:var(--rasen)}
.plan text{font:400 10px var(--mono);fill:var(--perg2);letter-spacing:.08em}
.programm{list-style:none;margin:0;padding:0}
.programm>li{border-top:1px solid #24170e;padding:18px 0;cursor:pointer;transition:.25s}
.programm>li:hover,.programm>li.an{padding-left:14px;border-color:var(--glut)}
.programm .teil{font:400 12px var(--mono);letter-spacing:.2em;color:var(--glut2);text-transform:uppercase}
.programm h3{font:400 30px/1.1 var(--sc);margin:.2em 0 .3em}
.programm ul{margin:.4em 0 0;padding:0 0 0 1.1em;font:400 14px/1.7 var(--mono);color:var(--perg2)}
.programm .ort{font:italic 16px var(--serif);color:var(--asche)}

/* ---------- Zwölf Bücher */
.buecher{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;perspective:1200px}
.buch{position:relative;aspect-ratio:3/4;cursor:pointer;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.buch.offen{transform:rotateY(180deg)}
.buch .v,.buch .r{position:absolute;inset:0;backface-visibility:hidden;border:1px solid #3a2414;padding:18px;display:flex;flex-direction:column}
.buch .v{background:radial-gradient(circle at 50% 120%,#5a1d06 0,#170d07 60%);justify-content:space-between}
.buch .v .l{font:400 11px var(--mono);letter-spacing:.3em;color:var(--glut)}
.buch .v .n{font:400 76px/1 var(--sc);text-align:center}
.buch .v .x{font:400 11px var(--mono);color:var(--asche);text-align:center}
.buch .r{background:#efe3c6;color:#1a1008;transform:rotateY(180deg);justify-content:center}
.buch .r q{font:italic 21px/1.3 var(--serif);quotes:none}
.buch .r small{font:400 11px/1.5 var(--mono);color:#6a5640;margin-top:1em;display:block}
.buch.verbrannt .v{background:#0a0807;filter:grayscale(1) brightness(.6)}
.buch.verbrannt::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--x,50%) var(--y,50%),transparent 0,#000 70%);pointer-events:none;mix-blend-mode:multiply}

/* ---------- Galerie */
.galerie{columns:3 280px;column-gap:8px}
.galerie button{display:block;width:100%;margin:0 0 8px;padding:0;border:1px solid #1d130c;background:#000;cursor:zoom-in;position:relative;break-inside:avoid;overflow:hidden}
.galerie button img{width:100%;transition:transform .8s,filter .8s}
.galerie button:hover img{transform:scale(1.04);filter:saturate(1.3) contrast(1.05)}
.galerie button::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 0 var(--glut);transition:.4s}
.galerie button:hover::after{box-shadow:inset 0 0 0 2px var(--glut),inset 0 -30px 40px -20px #ff7a1a66}
.lb{position:fixed;inset:0;z-index:100;background:#000e;display:none;align-items:center;justify-content:center;flex-direction:column;padding:4vh 4vw}
.lb.an{display:flex}
.lb img{max-height:82vh;max-width:92vw;border:1px solid #3a2414}
.lb p{font:400 13px var(--mono);color:var(--perg2);margin-top:12px;text-align:center}
.lb button{position:absolute;background:none;border:0;color:var(--perg);font:400 44px var(--serif);cursor:pointer;padding:10px 18px}
.lb .zu{top:10px;right:14px}.lb .vor{right:6px;top:50%}.lb .zur{left:6px;top:50%}

/* ---------- Tabellen / Listen */
.liste{list-style:none;margin:0;padding:0;columns:2 340px;column-gap:40px}
.liste li{break-inside:avoid;padding:9px 0;border-bottom:1px solid #1d130c;font:400 15px/1.5 var(--mono);color:var(--perg2)}
.liste li b{display:block;font:400 21px/1.2 var(--serif);color:var(--perg)}
.clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.clip{background:#0d0907;border:1px solid #1d130c}
.clip img{aspect-ratio:32/9;object-fit:cover;width:100%}
.clip div{padding:10px 12px;font:400 12px/1.5 var(--mono);color:var(--asche)}
.clip b{display:block;font:400 18px/1.2 var(--serif);color:var(--perg);margin-bottom:2px}

/* ---------- Teaser 3D / Spiel */
.tore{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tor{position:relative;display:block;aspect-ratio:16/9;border:1px solid #3a2414;overflow:hidden;background:#000 center/cover}
.tor img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s,filter 1s;filter:brightness(.75)}
.tor:hover img{transform:scale(1.05);filter:brightness(1)}
.tor span{position:absolute;left:0;right:0;bottom:0;padding:20px 22px;background:linear-gradient(transparent,#000d);font:400 clamp(24px,2.6vw,36px)/1.1 var(--sc);color:var(--perg)}
.tor small{display:block;font:400 12px/1.6 var(--mono);color:var(--glut2);letter-spacing:.06em;margin-top:6px}

/* ---------- Laufband */
.laufband{overflow:hidden;border-top:1px solid #24170e;border-bottom:1px solid #24170e;padding:14px 0;white-space:nowrap;font:italic 22px var(--serif);color:var(--asche)}
.laufband span{display:inline-block;animation:lauf 80s linear infinite;padding-left:100%}
.laufband b{color:var(--glut);font-weight:400;margin:0 .6em}
@keyframes lauf{to{transform:translateX(-100%)}}

/* ---------- Spielseite */
.spiel{position:relative;height:min(82vh,56.25vw + 120px);min-height:520px;background:#000;overflow:hidden}
.spiel canvas{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}
.laden{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#070504;z-index:20;text-align:center;font:400 13px/1.8 var(--mono);color:var(--asche);transition:opacity .8s}
.laden b{display:block;font:400 54px var(--sc);color:var(--perg)}
.laden.weg{opacity:0;pointer-events:none}
.stand{position:absolute;left:14px;top:14px;z-index:5;background:#0a0705d9;border:1px solid #3a2414;padding:12px 14px;width:min(320px,70vw);font:400 11px/1.5 var(--mono);color:var(--perg2)}
.stand .t{display:flex;justify-content:space-between;font:400 20px var(--sc);color:var(--perg)}
.stand #buecher{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;margin:8px 0}
.stand #buecher i{font:normal 11px/22px var(--mono);text-align:center;border:1px solid #3a2414;color:var(--asche2)}
.stand #buecher i.an{background:var(--glut);color:#1a0a00;border-color:var(--glut);box-shadow:0 0 8px var(--glut)}
.stand #brand{margin:8px 0 4px}
.stand #brand span{display:flex;justify-content:space-between}
.stand #brand .bar{height:5px;background:#1d3a22;margin-top:4px;position:relative}
.stand #brand .bar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--rot),var(--glut));box-shadow:0 0 10px var(--glut)}
.stand #stationen{list-style:none;margin:8px 0 0;padding:0}
.stand #stationen li{position:relative;padding:3px 0 3px 18px}
.stand #stationen li::before{content:"◇";position:absolute;left:0;color:var(--asche)}
.stand #stationen li.ok::before{content:"◆";color:var(--rasen)}
.stand #stationen li::after{content:"";position:absolute;left:18px;bottom:0;height:1px;width:calc((100% - 18px) * var(--p,0));background:var(--glut)}
.stand #ort{margin-top:8px;color:var(--asche)} .stand #ort b{color:var(--glut2);font-weight:400}
#karte{position:absolute;top:auto;right:auto;left:14px;bottom:14px;z-index:5;width:190px!important;height:190px!important;border:1px solid #3a2414}
#meldung{position:absolute;left:50%;top:16%;transform:translate(-50%,-10px);z-index:6;opacity:0;transition:.6s;pointer-events:none;text-align:center;max-width:min(760px,90%);background:radial-gradient(ellipse at center,#000c 30%,transparent 72%);padding:30px 50px}
#meldung.an{opacity:1;transform:translate(-50%,0)}
#meldung small{display:block;font:400 11px var(--mono);letter-spacing:.3em;color:var(--glut)}
#meldung b{display:block;font:italic 400 clamp(24px,3vw,40px)/1.2 var(--serif);color:var(--perg);margin:.2em 0}
#meldung span{display:block;font:400 13px/1.6 var(--mono);color:var(--perg2)}
#meldung i{display:block;font:normal 11px var(--mono);color:var(--glut2);margin-top:.8em}
#ende{position:absolute;inset:0;z-index:15;display:none;align-items:center;justify-content:center;background:#000c;text-align:center;padding:20px}
#ende.an{display:flex}
#ende b{display:block;font:italic 400 clamp(26px,3.6vw,52px)/1.2 var(--serif);margin:.3em 0}
#ende small{font:400 12px var(--mono);color:var(--glut2);letter-spacing:.2em}
#ende span{display:block;font:400 14px/1.6 var(--mono);color:var(--perg2);margin:0 auto 1.4em;max-width:56ch}
.kasten{position:absolute;right:14px;top:14px;z-index:7;width:min(330px,86vw);background:#0a0705ee;border:1px solid #3a2414;font:400 12px/1.5 var(--mono);color:var(--perg2)}
.kasten.zu{display:none}
.kasten .reiter{display:flex;border-bottom:1px solid #3a2414}
.kasten .reiter button{flex:1;background:none;border:0;color:var(--asche);font:400 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:10px 4px;cursor:pointer}
.kasten .reiter button[aria-selected=true]{color:var(--glut2);box-shadow:inset 0 -2px var(--glut)}
.kasten .inhalt{padding:12px;max-height:52vh;overflow:auto}
.kasten .seite{display:none}.kasten .seite.an{display:block}
.kasten h4{font:400 11px var(--mono);letter-spacing:.2em;color:var(--glut);margin:12px 0 6px;text-transform:uppercase}
.kasten .reihe{display:flex;flex-wrap:wrap;gap:4px}
.kasten label{display:block;margin:6px 0}
.kasten input[type=range]{width:100%;accent-color:var(--glut)}
.kasten select,.kasten input[type=file]{width:100%;background:#140d09;color:var(--perg);border:1px solid #3a2414;font:400 11px var(--mono);padding:6px}
.kasten .hinweis{color:var(--asche);font-size:11px;margin:6px 0}
#kasten-auf{position:absolute;right:14px;top:14px;z-index:6}
.pfeile{position:absolute;right:14px;bottom:90px;z-index:5;display:none;grid-template-columns:repeat(3,48px);gap:4px}
.pfeile button{height:48px;background:#140d09cc;border:1px solid #3a2414;color:var(--perg);font-size:18px}
@media (hover:none){.pfeile{display:grid}}
.anleitung{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.anleitung div{border:1px solid #24170e;padding:16px;background:#0c0806}
.anleitung b{display:block;font:400 22px var(--sc);margin-bottom:6px}
.anleitung p{font:400 13px/1.6 var(--mono);color:var(--perg2);margin:0}

/* ---------- 3D-Seite */
model-viewer{width:100%;height:auto;aspect-ratio:16/9;background:#050404;--poster-color:#050404;border:1px solid #2a1a10}
.modelle{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px;margin-top:10px}
.modelle button{text-align:left;background:#0d0907;border:1px solid #2a1a10;color:var(--perg);padding:12px;cursor:pointer;font:400 12px/1.5 var(--mono)}
.modelle button b{display:block;font:400 19px/1.2 var(--serif)}
.modelle button[aria-pressed=true]{border-color:var(--glut);box-shadow:0 0 0 1px var(--glut) inset}
.fahrplan{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid #24170e}
.fahrplan li{display:grid;grid-template-columns:80px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid #1d130c;cursor:pointer;font:400 13px/1.5 var(--mono);color:var(--perg2)}
.fahrplan li b{font:400 19px var(--serif);color:var(--perg);display:block}
.fahrplan li .z{color:var(--glut2)}
.fahrplan li:hover{background:#120b07}

@media (max-width:860px){
  .still-reihe{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body{font-size:17px}
  .zwei,.partitur,.tore{grid-template-columns:1fr}
  .plan{position:relative;top:0}
  .kopf{grid-template-columns:1fr;gap:6px}
  .hero{height:auto;aspect-ratio:auto;min-height:0}
  .hero canvas{position:relative;height:auto;aspect-ratio:16/10}
  .hero .titel{position:relative;bottom:auto;padding:18px 16px 26px;background:var(--nacht)}
  .hero .hinweis{display:none}
  .still-reihe{grid-template-columns:repeat(2,1fr)}
  #karte{width:120px;height:120px}
  .stand{font-size:10px;width:min(250px,64vw)}
  .spiel{height:78vh}
}
@media (prefers-reduced-motion:reduce){.laufband span{animation:none}.buch{transition:none}}

/* Sketchfab-Einbettung */
.sketchfab{position:relative;aspect-ratio:21/9;border:1px solid #2a1a10;background:#050404;margin-top:18px}
.sketchfab iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:860px){.sketchfab{aspect-ratio:4/3}}