@font-face{font-family:"Bungee";src:url(/w/schrift/bungee-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Bungee Shade";src:url(/w/schrift/bungee-shade-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Nunito";font-weight:400;src:url(/w/schrift/nunito-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Nunito";font-weight:700;src:url(/w/schrift/nunito-latin-700-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Nunito";font-weight:800;src:url(/w/schrift/nunito-latin-800-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Share Tech Mono";src:url(/w/schrift/share-tech-mono-latin-400-normal.woff2) format("woff2");font-display:swap}

:root{
  --nacht:#160F26; --tief:#0E0A18; --pult:#231938; --pult2:#2E2148; --linie:#45346B; --schatten:#1B132D;
  --text:#F6F1FF; --leise:#BDB0D8; --lila:#B57BFF; --lila-hell:#D9BDFF; --lila-tief:#4A1F96;
  --gelb:#FFD23F; --rot:#FF5A3C; --rot-hell:#FF8A73; --gruen:#4BE0A0;
  --anzeige:"Bungee",system-ui,sans-serif; --mono:"Share Tech Mono",ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nacht);color:var(--text);font-family:"Nunito",system-ui,sans-serif;font-size:17px;line-height:1.55;overflow-x:hidden}
a{color:var(--lila-hell)} a:hover{color:#fff}
img{max-width:100%}
.lade{font-family:var(--mono);color:var(--leise);text-align:center;margin:30vh 16px}
.breit{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
@media (min-width:700px){.breit{padding-left:24px;padding-right:24px}}
.mono{font-family:var(--mono);letter-spacing:.12em}
.streifen{height:14px;background:repeating-linear-gradient(-45deg,var(--gelb) 0 18px,var(--nacht) 18px 36px)}
.streifen.rot{background:repeating-linear-gradient(-45deg,var(--rot) 0 18px,var(--nacht) 18px 36px)}
h1,h2,h3{font-family:var(--anzeige);font-weight:400;line-height:1.1;margin:0}
h2{font-size:clamp(24px,4vw,32px);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
h2 img{height:54px;width:auto}

/* Glühbirnen */
@keyframes gluehen{0%,100%{opacity:1;filter:brightness(1.15)}50%{opacity:.35;filter:brightness(.7)}}
.birnen{position:absolute;left:14px;right:14px;display:flex;justify-content:space-between;pointer-events:none}
.birnen.oben{top:-11px}.birnen.unten{bottom:-11px}
.birne{width:16px;height:16px;border-radius:50%;animation:gluehen 1.5s ease-in-out infinite}
.birne.b1{animation-delay:-.5s}.birne.b2{animation-delay:-1s}
@media (max-width:600px){.birne:nth-child(n+9){display:none}}

/* Kopf */
.kopf{padding-top:40px}
.schild{position:relative;background:var(--pult);border:4px solid var(--linie);border-radius:26px;padding:34px 28px 30px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.schild .text{flex:1 1 460px;min-width:0;container-type:inline-size}
.schild .kennung{color:var(--gelb);font-size:15px}
.schild h1 .eins{display:block;font-family:"Bungee Shade","Bungee",sans-serif;font-size:clamp(20px,6vw,58px);font-size:clamp(20px,8.4cqi,58px);color:#fff;line-height:.98}
.schild h1 .zwei{display:block;font-size:clamp(20px,5.6cqi,46px);color:var(--lila);text-shadow:0 0 18px rgba(181,123,255,.55)}
.schild p{margin:10px 0 0;color:var(--leise);font-size:19px}
.schild .wagen{flex:0 1 270px;width:270px;max-width:100%;filter:drop-shadow(0 10px 14px rgba(0,0,0,.55))}

/* Nächster Einsatz */
.pult{background:var(--pult);border:3px solid var(--linie);border-radius:18px;padding:20px 22px;box-shadow:inset 0 -6px 0 var(--schatten)}
.naechster{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-top:22px}
.naechster > img{width:92px;height:auto;filter:drop-shadow(0 0 16px rgba(181,123,255,.6))}
.naechster .was{flex:1 1 260px;display:flex;flex-direction:column;gap:6px}
.naechster .was b{font-family:var(--anzeige);font-weight:400;font-size:30px;line-height:1.1}
.naechster .was .mono{color:var(--leise);font-size:15px}
.anzeigen{display:flex;gap:12px;flex-wrap:wrap}
.anzeige{background:var(--tief);border:2px solid var(--linie);border-radius:10px;padding:10px 16px;min-width:120px}
.anzeige .k{font-family:var(--mono);color:var(--leise);font-size:13px;letter-spacing:.12em}
.anzeige .w{font-family:var(--mono);color:var(--gelb);font-size:30px;text-shadow:0 0 8px rgba(255,210,63,.55)}
.anzeige .w.gruen{color:var(--gruen);text-shadow:0 0 8px rgba(75,224,160,.5)}

/* Einsatzbuch */
.abschnitt{padding-top:40px}
.abschnitt-kopf{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;margin-bottom:18px}
.abschnitt-kopf .mono{color:var(--leise);font-size:15px;letter-spacing:.04em}
.gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.karte{display:flex;flex-direction:column;text-decoration:none;color:var(--text);background:var(--pult);border:3px solid var(--linie);border-radius:16px;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
.karte:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 14px 0 -6px #7B3FE4;color:var(--text)}
.karte:focus-visible{outline:3px solid var(--gelb);outline-offset:3px}
.karte.smut{border-color:var(--rot)}
.karte.aus{background:var(--schatten);border-style:dashed}
.karte .bild{position:relative;aspect-ratio:4/3;background:var(--pult2);display:grid;place-items:center;overflow:hidden}
.karte .bild img.foto{width:100%;height:100%;object-fit:cover}
.karte .bild img.deko{width:58%;height:auto;opacity:.92}
.karte.smut .bild{background:#120C1E}
.karte.smut .bild img.deko{width:86%}
.karte.aus .bild{background:repeating-linear-gradient(-45deg,#1B132D 0 14px,#211836 14px 28px)}
.stempel{font-family:var(--anzeige);color:var(--leise);font-size:16px;border:3px solid var(--leise);padding:4px 10px;border-radius:8px;transform:rotate(-6deg);margin-top:8px;display:inline-block}
.marke{position:absolute;top:10px;left:10px;color:var(--nacht);font-family:var(--anzeige);font-size:13px;padding:4px 9px;border-radius:6px;background:var(--gruen)}
.marke.rot{background:var(--rot)}
.karte .unten{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px}
.karte .unten .mono{color:var(--lila-hell);font-size:14px;letter-spacing:.1em}
.karte.smut .unten .mono{color:var(--rot-hell)}
.karte .unten b{font-family:var(--anzeige);font-weight:400;font-size:21px;line-height:1.15}
.karte .unten span{color:var(--leise);font-size:15px}
.fuss{padding-top:40px;padding-bottom:48px;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;color:var(--leise);font-size:15px}

/* Fest-Seite */
.nav{padding-top:18px;padding-bottom:18px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.nav a.zurueck{font-family:var(--anzeige);text-decoration:none;font-size:18px}
.nav .status{display:flex;align-items:center;gap:10px;color:var(--gruen);font-size:14px}
.nav .status i{width:12px;height:12px;border-radius:50%;background:var(--gruen);box-shadow:0 0 10px var(--gruen)}
.held{position:relative;border-radius:20px;overflow:hidden;border:3px solid var(--linie);min-height:220px;aspect-ratio:21/8;background:var(--pult2);display:grid;place-items:center}
.held > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.held .deko{position:absolute;inset:auto;right:6%;top:8%;width:auto;height:72%;object-fit:contain;opacity:.9}
@media (max-width:600px){.held .deko{right:12px;top:12px;height:46%;opacity:.45}.sperre{margin-top:16px}}
.held .schrift{position:absolute;left:0;right:0;bottom:0;padding:22px 26px;background:linear-gradient(transparent,rgba(22,15,38,.92));display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px}
.held h1{font-size:clamp(28px,4.6vw,54px)}
.held .mono{color:var(--gelb);font-size:15px}
.held .wann{font-family:var(--mono);color:var(--lila-hell)}
@media (max-width:600px){.held{aspect-ratio:auto;min-height:240px}}
.sperre{margin:-40px auto 0;position:relative;max-width:560px;display:flex;flex-direction:column;gap:14px;box-shadow:0 10px 0 -2px var(--tief),inset 0 -6px 0 var(--schatten)}
.sperre .kennung{display:flex;align-items:center;gap:12px;color:var(--rot-hell);font-size:15px}
.sperre .kennung img{width:72px;height:auto}
.sperre h2{font-size:26px}
.sperre p{margin:0;color:var(--leise)}
.sperre form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.sperre .fach{flex:1 1 220px;display:flex;flex-direction:column;gap:6px}
.sperre label{font-family:var(--mono);color:var(--leise);font-size:14px;letter-spacing:.12em}
.sperre input{height:52px;padding:0 16px;border-radius:12px;border:2px solid var(--linie);background:var(--tief);color:var(--gelb);font-family:var(--mono);font-size:22px;letter-spacing:.12em;width:100%}
.sperre input:focus{outline:3px solid var(--gelb);outline-offset:2px}
.knopf{min-height:56px;padding:0 20px 0 10px;border:2px solid var(--linie);border-radius:16px;background:var(--tief);color:var(--text);font-family:var(--anzeige);font-size:18px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;box-shadow:0 6px 0 #0B0713;text-decoration:none}
.knopf img{height:46px;width:auto}
.knopf:active{transform:translateY(4px);box-shadow:0 2px 0 #0B0713}
.knopf:focus-visible{outline:3px solid var(--gelb);outline-offset:3px}
.knopf.gross{min-height:72px;font-size:20px;padding:0 24px 0 12px}
.knopf.gross img{height:56px}
.meldung{font-family:var(--mono);color:var(--gelb);min-height:1.3em;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:10px;padding-top:22px}
.chips a{text-decoration:none;background:var(--pult);border:2px solid var(--linie);border-radius:999px;padding:8px 16px;font-weight:800}
.inhalt{padding-top:28px;padding-bottom:56px;display:flex;flex-direction:column;gap:44px}
.reihe{display:flex;flex-wrap:wrap;gap:28px}
.reihe > section{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:12px}
.bericht{font-size:19px;white-space:pre-line;margin:0}
.leise{color:var(--leise)}
.daten{flex:1 1 260px;display:flex;flex-direction:column;gap:12px}
.daten > img{width:170px;align-self:center}
.daten .anzeige{min-width:0;flex:1 1 92px}
.programm{padding:8px 0}
.programm .zeile{display:flex;gap:18px;padding:12px 20px;border-bottom:1px solid var(--linie);align-items:baseline;flex-wrap:wrap}
.programm .zeile:last-child{border-bottom:0}
.programm .zeit{font-family:var(--mono);color:var(--gelb);font-size:22px;min-width:76px}
.programm .was{font-weight:800;flex:1 1 220px}
.programm .wer{color:var(--leise)}
.video{position:relative;aspect-ratio:16/9;border:4px solid var(--rot);border-radius:20px;overflow:hidden;background:#0B0713}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hochladen{display:flex;flex-direction:column;gap:12px;scroll-margin-top:20px}
.hochladen.blinkt{animation:aufmerksam 1.2s ease-in-out 3}
@keyframes aufmerksam{50%{box-shadow:0 0 0 6px rgba(181,123,255,.55)}}
.hochladen .zeile{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.fortschritt{height:10px;border-radius:5px;background:var(--tief);overflow:hidden;border:1px solid var(--linie)}
.fortschritt i{display:block;height:100%;width:0;background:var(--lila);transition:width .2s}
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
@media (max-width:500px){.galerie{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}}
.galerie .fotofeld{position:relative}
.galerie button.foto{display:block;width:100%;aspect-ratio:1/1;padding:0;border:3px solid var(--linie);border-radius:14px;overflow:hidden;background:var(--pult2);cursor:zoom-in;transition:transform .15s ease}
.galerie button.foto:hover{transform:scale(1.03) rotate(.6deg)}
.galerie button.foto:focus-visible{outline:3px solid var(--gelb);outline-offset:3px}
.galerie img{width:100%;height:100%;object-fit:cover;display:block}
.galerie label.wahl{position:absolute;top:6px;left:6px;background:rgba(14,10,24,.85);border-radius:8px;padding:6px;display:flex}
.galerie label.wahl input{width:22px;height:22px;accent-color:var(--rot)}
.admin{border:2px dashed var(--rot);border-radius:14px;padding:12px 14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.admin .mono{color:var(--rot-hell)}
.admin button{min-height:44px;border-radius:10px;border:2px solid var(--linie);background:var(--tief);color:var(--text);font:inherit;font-weight:800;padding:0 14px;cursor:pointer}
.admin button.gefahr,.leuchte button.gefahr{border-color:var(--rot);color:var(--rot-hell)}
.sponsoren{display:flex;flex-wrap:wrap;gap:14px}
.sponsoren a,.sponsoren span.logo{background:#1E1826;border:2px solid var(--linie);border-radius:10px;padding:10px 16px;display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;min-height:60px}
.sponsoren img{height:40px;width:auto;max-width:170px;object-fit:contain}
.leer{border:3px dashed var(--linie);border-radius:18px;padding:18px 20px;color:var(--leise)}

/* Leuchtkasten */
.leuchte{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;margin:0}
.leuchte::backdrop{background:rgba(8,5,14,.94)}
.leuchte[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.leuchte img{max-width:96vw;max-height:calc(100vh - 110px);object-fit:contain;border-radius:8px}
.leuchte-leiste{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.leuchte-leiste button,.leuchte-leiste a{min-height:48px;min-width:48px;border-radius:12px;border:2px solid var(--linie);background:var(--tief);color:var(--text);font:inherit;font-weight:800;padding:0 16px;cursor:pointer;display:inline-flex;align-items:center;text-decoration:none}

@media (prefers-reduced-motion:reduce){.birne,.hochladen.blinkt{animation:none}.karte,.galerie button.foto{transition:none}}