/* ===== Seiteninhalt IM Höllentor (TEST) =====
   "So war es 2025" (Teaser+Link) und "Wann & Wo" (später kommt laut
   Auftrag noch ein dritter Block dazu) liegen NICHT mehr als eigener
   Bereich NACH der Höllentor-Szene, sondern ALS TEIL von ihr:
   #hades-inhalt sitzt direkt unter Ebene5.svg (.e5-top, dem Höhlen-Rahmen
   ganz oben, siehe css/level3.css) und liegt farblich/z-index-mäßig ÜBER
   dem Tor-Bild (.e2-gate, GateSoulKeeper_Close.png). Reicht nach unten
   maximal bis zur Mitte der Brücke (.bridge-layer) - #hades-slot-marke
   markiert unsichtbar genau diesen Punkt, extra-unabhängig (siehe
   css/level3.css: --bridge-y-back-basis/--bridge-y-front-basis).
   js/hades-inhalt.js misst beide Positionen und setzt bei Bedarf
   --hades-extra: wächst der Inhalt über den Standardplatz hinaus, schiebt
   sich die GESAMTE übrige Szene (Tor, Zäune, Ufer, Brücke, Lavafluss,
   vordere Ebene-5-Elemente) automatisch weiter nach unten - siehe
   css/level3.css (--hades-box-hoehe) und hier oben in css/welt.css
   (#scene-hades/.level3-hoellentor/.level2-uebergang-hoellentor/
   .level2-ebene5-front) für die Formeln, die --hades-extra dafür
   berücksichtigen.

   Die Szene selbst (Tor, Zäune, Ufer, Lavafluss) bleibt fest feurig
   (siehe css/level3.css, dort werden nirgends Theme-Variablen verwendet).
   Überschriften und Rahmen der Karten (.hades-karte) folgen jedoch wie bei
   den Boxen weiter oben (.programm-karte/.wertung-panel, siehe
   css/programm.css) --accent/--accent-bright aus css/variables.css und
   wechseln damit mit dem Theme-Umschalter. */

#hades-inhalt {
    position: absolute;
    left: 50%;
    /* Direkt unter Ebene5.svg: dieselbe Formel wie dessen eigene Höhe
       (siehe css/level3.css: .e5-top { aspect-ratio: 1920/193; width:100vw }),
       plus etwas Luft. */
    top: calc(calc(100 * var(--uw)) * 193 / 1920 + 3rem);
    transform: translateX(-50%);
    /* Referenzanker 1920x1080, dieselbe /1.5-Formel wie .programm-block
       (siehe css/programm.css) - dadurch exakt so breit wie Kacheln,
       Zeitleiste und Wertung-Panel darueber (siehe TODO-20260831-017).
       Vorher: min(calc(92 * var(--uw)), 640px) - der 640px-Deckel war ein
       roher, nicht mitskalierender px-Wert und machte diese Box auf
       anderen Aufloesungen schmaler als die uebrigen Bereiche. */
    width: calc(1000px / 1.5 * var(--stage-scale));
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    font-family: 'Nunito', system-ui, sans-serif;
    /* Der Wrapper selbst ist nur ein Positionierungsrahmen (kein eigener
       Hintergrund) - Klicks sollen zwischen den Karten hindurch auf die
       Szene dahinter treffen, nur die Karten selbst sind interaktiv. */
    pointer-events: none;
}

#hades-inhalt > * {
    pointer-events: auto;
}

/* Unsichtbarer Messpunkt: Brückenmitte (Durchschnitt aus Rück- und
   Vorderanker), UNABHÄNGIG von --hades-extra (siehe css/level3.css:
   *-basis-Variablen) - reine Mess-Referenz für js/hades-inhalt.js, nie
   sichtbar, kein Layout-Einfluss.

   War zwischenzeitlich bis vor die Tor-Oberkante hochgezogen, als Notlösung
   gegen eine komplett unsichtbare Brücke - der eigentliche Grund dafür war
   aber ein Bug in .bridge-layer (css/level3.css: height fehlte
   --hades-extra, siehe dortiger Kommentar), nicht dieser Messpunkt. Mit
   jenem Fix zeichnet die Brücke wieder korrekt, auch wenn #hades-inhalt bis
   zur Brückenmitte reicht (und damit das hintere Tor/den Brücken-Rückanker
   überdeckt) - wieder auf Brückenmitte zurückgesetzt (Auftrag: Karte soll
   auf Höhe der halben Brücke sitzen). */
#hades-slot-marke {
    position: absolute;
    left: 0;
    top: calc((var(--bridge-y-back-basis) + var(--bridge-y-front-basis)) / 2);
    width: 1px;
    height: 1px;
    visibility: hidden;
    pointer-events: none;
}

.hades-karte {
    background: rgba(10, 6, 4, 0.74);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: 20px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6), inset 0 0 50px rgba(255, 90, 0, 0.08);
    backdrop-filter: blur(5px);
    padding: 2.2rem 1.5rem;
    text-align: center;
    transition: border-color var(--theme-transition);
}

.hades-deco {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.hades-karte h2 {
    font-family: 'Creepster', cursive;
    font-weight: 400;
    font-size: clamp(1.8rem, calc(5 * var(--uw)), 2.6rem);
    color: var(--accent-bright);
    letter-spacing: 0.05em;
    text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 70%, transparent);
    margin: 0 0 1rem;
    transition: color var(--theme-transition), text-shadow var(--theme-transition);
}

/* Kompaktes "Mobile"-Layout per @media(max-width) entfernt (2026-08-24,
   Bühnen-Nachbesserung) - siehe css/dialog.css fuer die Begruendung.
   #hades-inhalt/.hades-karte skalieren bereits ueber --uw/rem proportional
   mit der Buehne mit. */