/* Meet the Uuulmer — Stylesheet, destilliert aus dem Design-Canvas (Stand feedback-5c-31-08).
   CI: Orange #FF6500 / Schwarz / Weiß, Crystal mit Fallback-Stack, 0px Radius, keine Gradients auf Orange. */

/* ---------- Fonts (Fallback-Stack: Wechsel ohne Layoutbruch möglich, CLAUDE.md) ---------- */
@font-face{font-family:"Crystal";font-weight:400;font-style:normal;src:url(../fonts/Crystal-Regular.otf) format("opentype");font-display:swap;}
@font-face{font-family:"Crystal";font-weight:700;font-style:normal;src:url(../fonts/Crystal-Bold.otf) format("opentype");font-display:swap;}
@font-face{font-family:"Crystal Cond";font-weight:900;font-style:normal;src:url(../fonts/Crystal-CondensedBlack.otf) format("opentype");font-display:swap;}
@font-face{font-family:"Crystal XCond";font-weight:900;font-style:italic;src:url(../fonts/Crystal-ExtraCondBlackIta.otf) format("opentype");font-display:swap;}

/* ---------- Tokens: Bewegung + Gutter. Farben stehen als Literale — die CI-Palette ist klein
   (Orange #FF6500 / Schwarz / Weiß / Grau #9a9a9a #6a6a6a #b3b3b3 / Linie #2a2a2a) und abgenommen ---------- */
:root{
  --ease:cubic-bezier(0.5,0.6,0,1); --d-fast:140ms; --d-base:240ms; --d-slow:480ms;
  --gut:20px;
}
@media(min-width:700px){:root{--gut:32px;}}
@media(min-width:1100px){:root{--gut:48px;}}

html{color-scheme:dark;} /* Site ist durchgehend dunkel: dunkle Scrollbars/Controls + Basis fürs dunkle Spotify-Embed */
html,body{margin:0;padding:0;background:#000;}
body{font-family:"Crystal",system-ui,sans-serif;color:#fff;-webkit-font-smoothing:antialiased;}
a{color:#FF6500;text-decoration:none;} a:hover{color:#fff;}
*{box-sizing:border-box;}
/* Full-bleed bis Full-HD; auf größeren Bildschirmen (Ultrawide) gedeckelt + zentriert,
   sonst skalieren Hero/Kacheln/Zeilenlängen ins Unansehnliche (Entscheidung 31.08.) */
.site{width:100%;max-width:1920px;margin:0 auto;background:#0a0a0a;position:relative;overflow-x:clip;}
.wrap{width:100%;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut);}
/* Lesebreite 1280px (wie ratiopharmulm.com) NUR auf den Spielerseiten;
   Landing (.hub: Teambild + Kader) bleibt breit bis zur 1920-Deckelung (Korbi 02.09.) */
.site:not(.hub) .wrap{max-width:calc(1280px + 2*var(--gut));}
/* Spielerseiten: Ränder durchgehend schwarz bis zur Lesebreite — das #0a0a0a der .site lief
   sonst bis zur 1920er-Deckelung und stand als grauer Streifen neben dem Body-Schwarz (Korbi 02.09.) */
.site:not(.hub){background:#000;}

/* ---------- Typo ---------- */
.display{text-transform:uppercase;line-height:.86;letter-spacing:-.01em;}
.display-it{text-transform:uppercase;line-height:.9;}
/* Display-Stacks EINMAL: Condensed Black (Headlines/Labels) + ExtraCond Black Italic (Subheads) —
   die Einzelregeln setzen nur noch Größe, Zeilenhöhe und Transform */
.display,.marquee,.nav .lockup,.card .nm,.card.lock .lnum,.hl,.sf .lbl,.tag,.face .fword,.face .bword,.qi .bq .qt,.outro{font-family:"Crystal Cond","Crystal",sans-serif;font-weight:900;}
.display-it,.card.lock .lsoon,.st,.qi .bq .n{font-family:"Crystal XCond","Crystal",sans-serif;font-style:italic;font-weight:900;}
.eyebrow{font-family:"Crystal",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:11px;}
.eyebrow.grau{color:#9a9a9a;} .eyebrow.orange{color:#FF6500;}
.eyebrow.wortmarke{text-transform:none;} /* „ratiopharm ulm“ bleibt klein (CLAUDE.md) */
@media(min-width:1100px){.eyebrow{font-size:12px;}}
.body{font-family:"Crystal",sans-serif;font-weight:400;font-size:15px;line-height:1.55;color:#d6d6d6;}
p.body{margin:0;} /* Abstände kommen vom Container (gap), nicht vom Absatz */
@media(min-width:1100px){.body{font-size:17px;}}
.body b,.acc{color:#FF6500;font-weight:700;}

.btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:1.5px solid #FF6500;color:#FF6500;font-family:"Crystal",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:12px;cursor:pointer;background:transparent;transition:background var(--d-base) var(--ease),color var(--d-base) var(--ease);}
.btn:hover{background:#FF6500;color:#000;}
.btn.solid{background:#FF6500;color:#000;} .btn.solid:hover{background:#fff;}

/* ---------- Laufband (Playoff-Magazin) ---------- */
.marquee{white-space:nowrap;overflow:hidden;text-transform:uppercase;font-size:96px;line-height:.86;color:#FF6500;letter-spacing:-.02em;}
@media(min-width:1100px){.marquee{font-size:180px;}}
.marquee .track{display:inline-flex;animation:scroll-uuu 30s linear infinite;}
.marquee .track>span{white-space:nowrap;padding-right:.35em;}
@keyframes scroll-uuu{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.marquee .track{animation:none;}}

/* ---------- Nav ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;height:56px;border-bottom:1px solid #2a2a2a;background:#000;position:sticky;top:0;z-index:10;}
@media(min-width:1100px){.nav{height:72px;}}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.nav .marke{display:flex;align-items:center;gap:12px;color:#fff;}
.nav .marke:hover{color:#fff;}
.nav .marke img{height:40px;width:auto;display:block;}
.nav .lockup{text-transform:uppercase;line-height:.9;font-size:15px;}
.nav .zurueck{display:flex;align-items:center;gap:8px;min-height:44px;color:#fff;}
.nav .zaehler{color:#9a9a9a;white-space:nowrap;} .nav .zaehler b{color:#fff;}
.nav .logo{height:34px;width:auto;display:block;} /* Spielerseite: Logo rechts */
/* Startseite Desktop: Nav transparent über dem Hero (Korb frei) */
@media(min-width:1100px){
.hub .nav{position:absolute;top:0;left:0;right:0;background:transparent;border-bottom:0;}
}

/* ---------- Hub: Hero (ganzes Teambild, Textblock darunter im Fluss — auf Desktop wie Mobil, Korbi 31.08.) ---------- */
.hero{position:relative;background:#000;}
.hero .hi{position:relative;}
.hero .hi img{display:block;width:100%;height:auto;opacity:.9;}
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.85) 92%,#000 100%);}
.hero .wrap{position:relative;padding-top:14px;padding-bottom:36px;display:flex;flex-direction:column;gap:12px;}
/* Intro 2 Stufen ueber .body — gleiche Staffelung auf Mobil + Desktop */
.hero .h{font-size:60px;margin:0;}
.hero p.body{font-size:18px;max-width:640px;}
.hero .cta{display:flex;align-items:center;gap:16px;margin-top:6px;flex-wrap:wrap;}
@media(min-width:1100px){
.hero .shade{background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,transparent 35%,transparent 62%,rgba(0,0,0,.8) 96%,#000 100%);}
.hero .wrap{padding-top:20px;padding-bottom:44px;gap:16px;}
.hero .h{font-size:min(140px,9.5vw);} .hero .h br{display:none;}
.hero p.body{font-size:20px;max-width:none;}
}

/* KI-Kennzeichnung (Art. 50 KI-VO): EU-Icon „AI MODIFIED" ohne Zusatztext, exakt in der Seitenmitte zwischen
   Impressum und Datenschutz — absolut positioniert, weil space-between bei ungleich breiten Links nicht zentriert */
.ki-marke{height:18px;width:auto;display:block;opacity:.7;}
@media(min-width:700px){.ki-marke{position:absolute;left:50%;top:0;bottom:0;margin:auto;transform:translateX(-50%);}} /* mobil bleibt es im Fluss (space-between), sonst überlappt es den Impressum-Link */
@media(min-width:1100px){.ki-marke{height:20px;}}

/* ---------- Hub: Kalender-Raster ---------- */
.kal{padding:24px 0 64px;}
@media(min-width:1100px){.kal{padding:36px 0 96px;}}
.kal .h{font-size:42px;margin:0;}
.kal .h .acc{white-space:nowrap;} /* .acc statt span: der Markierer (mark_json) umhüllt die ganze Headline mit einem span */
@media(min-width:1100px){.kal .h{font-size:110px;}}
.kal-head{display:flex;flex-direction:column;gap:12px;margin-bottom:18px;}
.kal-head .body{max-width:420px;}
@media(min-width:1100px){.kal-head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:24px;}}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
@media(min-width:700px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}}
@media(min-width:900px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(min-width:1100px){.grid{grid-template-columns:repeat(var(--spalten,6),minmax(0,1fr));gap:20px;}}

.card{position:relative;aspect-ratio:3/4;display:block;}
.card .f{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;}
.card.active .f{border:1.5px solid #FF6500;background:#0a0a0a;transition:border-color var(--d-base) var(--ease);}
.card.active:hover .f{border-color:#fff;}
.card .photo{position:relative;flex:1;background:#1a1a1a center 15%/cover no-repeat;}
.card .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.88));}
/* Name + CTA in EINEM Fluss-Container unten — können sich nie überlappen, lange Namen wachsen nach oben über den Bildverlauf */
.card .unten{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;display:flex;flex-direction:column;gap:10px;}
@media(min-width:1100px){.card .unten{left:14px;right:14px;bottom:14px;}}
.card .num{font-weight:700;color:#FF6500;font-size:12px;letter-spacing:.08em;}
.card .nm{text-transform:uppercase;font-size:22px;line-height:.92;color:#fff;margin-top:2px;overflow-wrap:break-word;}
.card .pos{font-family:"Crystal",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:#b3b3b3;margin-top:4px;}
.card .cta{text-align:center;padding:9px 8px;background:#FF6500;color:#000;font-weight:700;font-size:10px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transition:background var(--d-base) var(--ease);}
@media(min-width:1100px){.card .cta{padding:10px 12px;font-size:11px;letter-spacing:.1em;}}
.card.active:hover .cta{background:#fff;}
/* Gesperrt: abgedunkeltes Foto (Verdunkelung ist im Build ins Bild eingebrannt) + große Trikot-Nr., anonym */
.card.lock .f{border:1px solid #2a2a2a;background:#0a0a0a;}
.card.lock .photo{position:absolute;inset:0;}
.card.lock .lmeta{position:relative;z-index:2;margin:auto;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
.card.lock .lnum{font-size:56px;line-height:1;color:#fff;}
.card.lock .lsoon{text-transform:uppercase;font-size:15px;color:#b3b3b3;}
.card.lock.next .lsoon{color:#FF6500;}

/* ---------- Footer ---------- */
.footer{background:#000;border-top:1px solid #2a2a2a;padding:40px 0 30px;}
.footer .sw{display:flex;justify-content:center;margin-bottom:36px;}
.footer .sw img{height:64px;width:auto;display:block;}
.footer .mitte{text-align:center;}
.footer .zeile{font-size:44px;}
.footer .mitte .eyebrow{margin-top:22px;}
.footer .marquee{margin-top:40px;}
.footer .links{position:relative;display:flex;justify-content:space-between;align-items:center;margin-top:22px;}
/* Impressum · KI-Icon · Datenschutz — gleiche Optik unter der Landing (.footer .links) und unter der Spielerkarte (.rechtliches) */
.footer .links a,.rechtliches a{color:#6a6a6a;} .footer .links a:hover,.rechtliches a:hover{color:#fff;}

/* ---------- 404 (dist/404.html): Hero-Typo ohne Bild, fuellt den Viewport bis zum Footer ---------- */
.fehler{background:#000;display:flex;align-items:center;min-height:calc(100vh - 56px - 220px);padding:56px 0;}
.fehler .wrap{display:flex;flex-direction:column;gap:14px;}
.fehler .h{font-size:60px;margin:0;}
.fehler p.body{font-size:18px;max-width:560px;}
.fehler .cta{margin-top:6px;}
@media(min-width:1100px){
.fehler{min-height:calc(100vh - 72px - 220px);padding:96px 0;}
.fehler .h{font-size:min(140px,9.5vw);} .fehler .h br{display:none;} .fehler .h .acc{padding-left:.12em;}
.fehler p.body{font-size:20px;}
}

/* ---------- Detail: Karten-Rahmen (Korbi 02.09., Korrektur): komplett orange, durchgehend
   in Eck-Marken-Dicke (2,5 px), um die KOMPLETTE Karte inkl. Abschluss ---------- */
.karte{position:relative;border:2.5px solid #FF6500;margin:20px 0 0;padding:0 16px;}
@media(min-width:1100px){.karte{margin:32px 0 0;padding:0 32px;}}
/* Impressum/Datenschutz unter der Karte (Korbi 03.09.): dezent wie im Landing-Footer, gleicher Rhythmus wie dort */
.rechtliches{position:relative;display:flex;justify-content:space-between;align-items:center;gap:20px;margin:22px 0 40px;}
@media(min-width:1100px){.rechtliches{margin:26px 0 56px;}}
.abschluss{display:flex;flex-direction:column;align-items:center;gap:32px;padding:56px 0 48px;}
.abschluss img{width:auto;display:block;} .abschluss .sw{height:64px;} .abschluss .logo{height:48px;}

/* ---------- Detail: Page-Grid (mobil gestapelt, ab 768px zwei Spalten) ---------- */
.pg{display:grid;grid-template-columns:1fr;grid-template-areas:"hero" "subdesc" "video" "starting" "hobbys" "qa";row-gap:40px;padding:24px 0 0;}
.a-hero{grid-area:hero;} .a-sub{grid-area:subdesc;} .a-video{grid-area:video;} .a-start{grid-area:starting;align-self:start;} .a-hob{grid-area:hobbys;} .a-qa{grid-area:qa;min-width:0;}
@media(min-width:768px){.pg{grid-template-columns:1.7fr 1fr;grid-template-areas:"hero video" "hero starting" "subdesc qa" "hobbys qa";column-gap:64px;row-gap:40px;padding-top:40px;}}

/* Hero-Stack: Portrait, Headline als EINE Zeile darunter; lange Namen brechen automatisch um */
.hs{position:relative;container-type:inline-size;}
.hp{position:relative;aspect-ratio:4/5;overflow:hidden;background:#1a1a1a;}
.hp img{width:100%;height:100%;object-fit:cover;object-position:center 15%;display:block;}
.hp::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,rgba(0,0,0,.55));}
.hl{margin:16px 0 0;text-transform:uppercase;font-size:clamp(28px,9cqw,96px);line-height:.9;text-wrap:balance;letter-spacing:-.01em;}
.hl .name{color:#FF6500;}
.subh{font-size:22px;color:#FF6500;} @media(min-width:1100px){.subh{font-size:36px;}}
/* Ton-Block „Sound der Arena“ (Korbi 04.09., Variante V4 aus dem Entscheidungs-Artefakt): Namensaufnahme
   und Einlaufsong als zwei Zeilen EINER Box, bündig unter dem Namen — Panel wie die Starting Five. */
.ton{margin-top:18px;max-width:640px;background:#0a0a0a;border:1px solid #2a2a2a;padding:18px;}
.ton>.st{margin:0 0 12px;font-size:24px;}
.ton-zeile{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:13px;align-items:center;width:100%;padding:11px 0;background:transparent;border:0;text-align:left;color:#fff;font:inherit;cursor:pointer;}
.ton-zeile+.ton-zeile{border-top:1px solid #2a2a2a;}
.ton-zeile .chip{width:34px;height:34px;background:#FF6500;display:flex;align-items:center;justify-content:center;transition:background var(--d-base) var(--ease);}
.ton-zeile .chip svg{width:16px;height:16px;color:#000;display:block;}
.ton-zeile .zwei{display:flex;flex-direction:column;gap:3px;min-width:0;}
.ton-zeile .tag{text-transform:uppercase;font-size:18px;line-height:1;transition:color var(--d-base) var(--ease);overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;} /* langer Songtitel laeuft sonst aus der Box */
.ton-zeile .tag.lau{text-transform:none;} /* Lautschrift „DEH-win SCHMITT“: die Kleinschreibung zeigt die unbetonte Silbe */
.ton-zeile:hover .tag{color:#FF6500;}
.ton-zeile.an .chip{background:#fff;} /* spielt gerade — nur CI-Farben, keine Animation auf Orange */
.ton-zeile.an .tag{color:#FF6500;}
/* Einlaufsong: Klick tauscht die Zeile gegen den Spotify-Embed (statt beide zu stapeln); sichtbar erst,
   wenn der Iframe fertig geladen hat — kein leeres Loch. Die Trennlinie über dem Embed steht nur, wenn
   die Aussprache-Zeile darüber liegt (ohne :has() fehlt sie — eine Linie weniger, sonst nichts).
   152px = Mindesthöhe des aktuellen Spotify-Embeds (Compact); bei 80px bleibt nur ein Werbebanner sichtbar.
   Dunkel rendert der Embed durch theme=0 in der URL + color-scheme:dark EXPLIZIT am iframe (wird dem
   Frame als prefers-color-scheme gereicht; geerbtes Schema vom html reicht dafür nicht zuverlässig). */
.spotify-einbettung{display:none;}
.ton.getauscht .ton-zeile[data-spotify]{display:none;}
.ton.getauscht .spotify-einbettung{display:block;animation:song-einblenden .35s var(--ease);}
.ton:has([data-ton]) .spotify-einbettung{border-top:1px solid #2a2a2a;padding-top:12px;}
@keyframes song-einblenden{from{opacity:0;}to{opacity:1;}}
.spotify-einbettung iframe{display:block;width:100%;height:152px;border:0;color-scheme:dark;}
.st{text-transform:uppercase;color:#FF6500;font-size:28px;margin-bottom:14px;}
.a-sub{display:flex;flex-direction:column;gap:18px;}
.a-sub .body{max-width:56ch;}
@media(min-width:1100px){.a-sub{gap:22px;} .a-sub .body{font-size:20px;line-height:1.6;} .metaline{font-size:14px;}}
.metaline{display:flex;flex-wrap:wrap;column-gap:10px;row-gap:6px;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#b3b3b3;}
.metaline b{color:#fff;} .metaline .sep{color:#FF6500;}

/* ---------- Detail: Video (zentriert, Unterschrift darunter; läuft komplett auf der Seite, kein YouTube) ---------- */
.a-video{text-align:center;}
.vcol{display:flex;flex-direction:column;align-items:center;gap:18px;}
.vthumb{position:relative;aspect-ratio:9/16;width:min(320px,86%);overflow:hidden;background:#1a1a1a;border:1px solid #2a2a2a;cursor:pointer;}
.vthumb:hover{border-color:#FF6500;}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block;}
.play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border:2px solid #fff;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:2;}
.play svg{width:24px;height:24px;color:#fff;}
.vcap{color:#b3b3b3;letter-spacing:.04em;max-width:34ch;line-height:1.6;}
.vmodal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.94);display:none;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px;}
.vmodal.offen{display:flex;}
.vmodal .frame{position:relative;width:min(300px,70vw);aspect-ratio:9/16;background:#0a0a0a;border:2px solid #FF6500;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px;overflow:hidden;}
/* Desktop: Modal so groß, wie die Viewport-Höhe hergibt (140px Reserve = Schließen-Button + Gap + Padding) */
@media(min-width:1100px){.vmodal .frame{width:min(calc((100vh - 140px) * 9 / 16),700px,90vw);}}
.vmodal video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;}

/* ---------- Detail: Starting Five (dunkel, einzeilig) ---------- */
.a-start.dark{background:#0a0a0a;color:#fff;border:1px solid #2a2a2a;padding:26px;}
.sf{margin:0;padding:0;}
.sf li{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #2a2a2a;list-style:none;}
.sf li:last-child{border-bottom:0;}
/* Label darf schrumpfen und im Wort brechen, die Ball-Skala nie: sonst schiebt ein langes Wort
   ("Sonntagsspaziergaenge") die ganze Spalte nach rechts aus der Karte (Korbi 04.09.: Umbruch ok,
   Verrutschen nicht). Getrennt wird an der Silbengrenze (`hyphens:auto` greift auf das deutsche
   Woerterbuch zu, weil <html lang="de"> gesetzt ist; Safari braucht das Praefix). `overflow-wrap`
   bleibt als Netz fuer Woerter, die das Woerterbuch nicht kennt (Namen, Fremdwoerter). */
.sf .lbl{text-transform:uppercase;font-size:16px;color:#fff;min-width:0;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;}
/* Ball-Skala 0–5 (Korbis Wahl 02.09., Artefakt V4): 5 offizielle Ball-Glyphen,
   N orange / Rest dunkel — HTML kommt aus build.py, Symbol #ball steht im Template */
.bars{display:flex;align-items:center;gap:4px;flex:none;}
.bars svg{width:18px;height:18px;display:block;fill:#2a2a2a;} .bars svg.an{fill:#FF6500;}
@media(min-width:1100px){.bars svg{width:20px;height:20px;}}

/* ---------- Detail: Vier Dinge / Hobby-Flips (mittig, Desktop-Typo im Mobil-Verhältnis) ---------- */
.vd-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;margin-bottom:18px;border-bottom:1px dotted #333;}
.vd-hint{color:#FF6500;font-weight:900;}
.flips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
@media(min-width:1100px){.flips{grid-template-columns:repeat(4,minmax(0,1fr));}}
.flip{perspective:900px;aspect-ratio:3/4;cursor:pointer;}
.flip .in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform var(--d-slow) var(--ease);}
@media(hover:hover) and (pointer:fine){.flip:hover .in{transform:rotateY(180deg);}}
.flip.on .in,.flip.on:hover .in{transform:rotateY(180deg);}
.face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;padding:14px;}
.face.f{background:#141414;border:1px solid #2a2a2a;} .flip:hover .face.f{border-color:#FF6500;}
/* Vorderseite: volle weiße Soundwave (Seitenende-Asset) + EINE Zeile — Front-Wort fett/orange (Korbi 02.09.) */
.face .fwave{width:72%;max-width:220px;height:auto;display:block;}
.face .fword{text-transform:uppercase;font-size:12px;letter-spacing:.1em;color:#FF6500;}
/* Rückseite: größte Schrift ist das Front-Wort (gleiche Typo wie vorn, schwarz); Fließtext in
   Originalgröße — seite.js verkleinert ihn DYNAMISCH nur, wenn er sonst scrollen müsste;
   Scroll bleibt letzter Notfall mit dünner Leiste (Korbi 02.09.) */
.face.b{background:#FF6500;color:#000;transform:rotateY(180deg);overflow-y:auto;justify-content:safe center;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.4) transparent;}
.face.b::-webkit-scrollbar{width:4px;}
.face.b::-webkit-scrollbar-thumb{background:rgba(0,0,0,.4);}
.face .bword{text-transform:uppercase;font-size:15px;letter-spacing:.1em;color:#000;}
.face .bt{font-weight:700;font-size:13px;line-height:1.4;color:#000;}
@media(min-width:1100px){
.face{gap:10px;padding:18px;}
.face .fword{font-size:14px;}
.face .bword{font-size:18px;}
.face .bt{font-size:16px;line-height:1.45;}
}

.nur-hover{display:none;}
@media(hover:hover) and (pointer:fine){.nur-hover{display:inline;}.nur-touch{display:none;}}

/* ---------- Detail: Die dreisten Drei (Shout-Burst, 3 Farben; Schrift: Orange→schwarz, Schwarz→weiß, Weiß→orange) ---------- */
.qa{display:flex;flex-direction:column;gap:24px;align-items:stretch;}
.qi{cursor:pointer;display:block;}
.qi .bub{position:relative;background:var(--bg);color:var(--fg);}
.qi .bq{max-width:min(440px,100%);margin-right:auto;padding:22px 26px 36px;clip-path:polygon(0% 12%,5% 0%,28% 6%,36% 0%,66% 5%,76% 0%,97% 4%,100% 18%,96% 42%,100% 60%,97% 84%,88% 87%,62% 83%,34% 87%,26% 86%,14% 100%,18% 85%,6% 84%,2% 62%);}
.qi .ba{max-width:min(480px,100%);margin-left:auto;padding:34px 26px 26px;clip-path:polygon(3% 16%,12% 14%,74% 14%,82% 0%,84% 15%,96% 13%,100% 30%,97% 55%,100% 74%,95% 96%,70% 92%,40% 98%,12% 93%,0% 86%,3% 52%);}
.qi.v1 .bub{--bg:#FF6500;--fg:#000;}
.qi.v2 .bub{--bg:#141414;--fg:#fff;--bd:#2a2a2a;filter:drop-shadow(1.5px 0 0 var(--bd)) drop-shadow(-1.5px 0 0 var(--bd)) drop-shadow(0 1.5px 0 var(--bd)) drop-shadow(0 -1.5px 0 var(--bd));}
.qi.v2:hover .bub,.qi.v2.on .bub{--bd:#FF6500;}
.qi.v3 .bub{--bg:#fff;--fg:#FF6500;}
/* Dunkle Blase rechtsbündig, Zacken gespiegelt (x → 100−x) */
.qi.v2 .bq{margin-left:auto;margin-right:0;clip-path:polygon(100% 12%,95% 0%,72% 6%,64% 0%,34% 5%,24% 0%,3% 4%,0% 18%,4% 42%,0% 60%,3% 84%,12% 87%,38% 83%,66% 87%,74% 86%,86% 100%,82% 85%,94% 84%,98% 62%);}
.qi.v2 .ba{margin-right:auto;margin-left:0;clip-path:polygon(97% 16%,88% 14%,26% 14%,18% 0%,16% 15%,4% 13%,0% 30%,3% 55%,0% 74%,5% 96%,30% 92%,60% 98%,88% 93%,100% 86%,97% 52%);}
.qi .bq .n{font-size:30px;line-height:1;margin-bottom:8px;color:var(--fg);}
.qi .bq .qt{text-transform:uppercase;font-size:20px;line-height:1.04;letter-spacing:-.01em;}
.qi .hint{display:flex;align-items:center;gap:7px;margin-top:12px;font-size:10px;opacity:.7;} /* + .eyebrow */
.qi:hover .hint,.qi.on .hint{opacity:1;}
.qi .ba .alabel{font-size:10px;margin-bottom:10px;opacity:.7;} /* + .eyebrow */
.qi .ba .at{font-family:"Crystal",sans-serif;font-weight:400;font-size:14px;line-height:1.55;}
@media(min-width:1100px){.qi .bq .qt{font-size:23px;} .qi .ba .at{font-size:15px;}}
.qi .ans{display:none;padding-top:20px;}
.qi.on .ans{display:block;}
@media(hover:hover) and (pointer:fine){
.qi{position:relative;}
.qi:hover .ans,.qi.on .ans{display:block;}
.qi .ans{position:absolute;left:0;right:0;top:100%;z-index:5;padding-top:12px;}
}
.qi .ans .bub{animation:bubIn var(--d-base) var(--ease) both;}
@keyframes bubIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}

/* ---------- Detail: Abschluss ---------- */
.outro{text-transform:uppercase;color:#fff;font-size:clamp(30px,7vw,64px);line-height:.9;letter-spacing:-.01em;text-align:center;text-wrap:balance;}
.outro b{color:#FF6500;}

/* ---------- Dev-Vorschau (build.py --vorschau, liegt unter /vorschau/ hinter auth_basic): fester Balken
   unten, auf jeder Seite sichtbar — damit niemand einen Screenshot der Vorschau für die Live-Seite hält ---------- */
body.vorschau{padding-bottom:34px;}
.vorschau-balken{position:fixed;left:0;right:0;bottom:0;z-index:40;height:34px;display:flex;align-items:center;justify-content:center;gap:14px;padding:0 12px;background:#FF6500;color:#000;font-size:12px;white-space:nowrap;}
.vorschau-balken .stand{font-weight:400;letter-spacing:.06em;text-transform:none;}
@media(max-width:699px){.vorschau-balken .stand{display:none;}} /* auf dem Handy reicht die Warnung, der Zeitstempel bräche um */
body.vorschau .mark-schalter{bottom:48px;} /* sonst steht der Schalter im Balken */

/* ---------- JSON-Feld-Markierung (nur Mockup-Phase, kalender.json → mark_json) ---------- */
body.markiert .tpl{outline:1px dashed rgba(255,101,0,.6);outline-offset:2px;position:relative;}
body.markiert .tpl:hover::after{content:attr(data-f);position:absolute;left:0;top:100%;z-index:30;background:#FF6500;color:#000;font-family:"Crystal",system-ui,sans-serif;font-size:10px;font-weight:700;font-style:normal;letter-spacing:.06em;text-transform:none;padding:2px 6px;white-space:nowrap;pointer-events:none;}
.mark-schalter{position:fixed;right:14px;bottom:14px;z-index:60;background:#000;border:1px solid #FF6500;color:#FF6500;font-family:"Crystal",system-ui,sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;cursor:pointer;}
.mark-schalter:hover{background:#FF6500;color:#000;}