/* ===== Programm & Ablauf ("Was dich erwartet" bis "Der Ablauf der Nacht") =====
   Inhalt 1:1 aus Halloween/index.php uebernommen (siehe dort: .crypt-section
   "Was dich erwartet" / "Der Ablauf der Nacht", assets/css/einladung/
   programm.css + ablauf.css + wertung-teaser.css). Dort waren Rahmen/Schrift
   fest orange (var(--orange)/var(--orange-bright)) - hier stattdessen auf
   die Theme-Variablen dieser Seite umgestellt (--accent/--accent-bright aus
   css/variables.css), reagiert also auf den Theme-Umschalter oben rechts.
   Schriften wie beim bereits uebernommenen Hero-Bereich (.oberwelt-inhalt in
   css/welt.css): Nunito fuer Fliesstext, Creepster fuer Ueberschriften/
   Zeit-Marken - im Original galt das global (h1,h2,h3), hier bewusst auf
   diesen Abschnitt begrenzt, um den Rest der Seite nicht zu beeinflussen.

   Sitzt als Inhalt IN der Unterwelt-Höhlenkulisse (#scene-unterwelt, siehe
   css/level2.css: dortige .level2-decor-Ebenen liegen absolut dahinter,
   #programm bestimmt per normalem Dokumentfluss die tatsächliche Höhe der
   Sektion - siehe dort für z-index/position). Bewusst OHNE deckenden
   Hintergrund (früher fest #170b26) - die Höhlenkulisse muss dahinter
   sichtbar bleiben (siehe Integrations-Vorgabe: "Content darf die Kulisse
   nicht zerstören"); die einzelnen Karten/Panels bringen mit --panel-bg +
   backdrop-filter bereits genug eigenen Kontrast mit. Vertikales Padding
   in clamp() statt fester rem-Werte, damit oben Platz für den
   Höhleneingang (Ebene 2, an der 1/3-Marke) und unten Platz für die
   hereinragenden Felsformationen (Ebene 4/5) bleibt. */

/* Unteres Padding angehoben (vorher clamp(5rem, 16vh, 9rem)) - Ebene5_4.svg
   (der Bergkamm-Übergang zum Höllentor, siehe css/welt.css:
   .level2-uebergang-hoellentor) hat jetzt eine garantierte Mindesthöhe von
   225px; per Pixel-Analyse der SVG-Silhouette lag die vorherige Reserve an
   mehreren Stellen der Kammlinie deutlich näher an echtem Text der letzten
   Box (.wertung-panel) als an bloßem Leerraum. Neuer Wert schafft dafür
   ausreichend Sicherheitsabstand, ohne dass oben (Höhleneingang) etwas
   geändert wird. */
.programm-ablauf {
    padding: clamp(5rem, calc(24 * var(--uh)), 12rem) 1rem clamp(7rem, calc(24 * var(--uh)), 12rem);
    font-family: 'Nunito', system-ui, sans-serif;
}

.programm-ablauf h2,
.programm-ablauf h3 {
    font-family: 'Creepster', cursive;
    font-weight: 400;
    color: var(--accent-bright);
    letter-spacing: 0.05em;
    text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
    margin: 0;
    transition: color var(--theme-transition), text-shadow var(--theme-transition);
}

.programm-block {
    /* Absoluter px-Wert, proportional zur Buehne skaliert statt fest -
       Referenzanker 1920x1080 (--stage-scale:1.5 dort), siehe
       css/base.css fuer die allgemeine Buehnen-Logik. Ohne die /1.5-
       Korrektur wuerde die Box bei 1920x1080 ploetzlich 1.5x breiter als
       bisher werden (Referenzoptik-Bruch); mit ihr bleibt 1920x1080
       unveraendert UND die Box schrumpft bei kleineren Buehnen
       proportional mit, statt bei kleiner Buehne ploetzlich auf 100%
       Breite zu springen und ihren Seitenabstand zu verlieren.

       Hinweis CSS-px vs. Screenshot-/Geraete-px (TODO-20260901-001, Nebenbefund
       aus TODO-20260831-017): Diese Formel liefert auf dem damaligen
       Referenzgeraet (1920x1080-Notebook, 125% Windows-Skalierung) ca. 672
       CSS-px. Ein an einem Screenshot dieses Geraets mit einem Lineal/Tool
       gemessener Wert liegt dagegen bei ca. 840-847 physischen Bildschirm-px,
       weil ein Screenshot in physischen Geraete-Pixeln entsteht und die
       125%-Skalierung des Betriebssystems bereits enthaelt (672 * 1.25 ≈ 840).
       Beide Werte beschreiben dieselbe tatsaechlich gerenderte Groesse - nur
       in unterschiedlichen Einheiten. Wird diese Formel kuenftig erneut gegen
       einen an einem skalierten Screenshot gemessenen px-Wert geprueft, ist
       zuerst die Windows-Skalierung des Referenzgeraets herauszurechnen,
       bevor eine Abweichung als Fehler gilt. */
    max-width: calc(1000px / 1.5 * var(--stage-scale));
    margin: 0 auto 5rem;
    text-align: center;
}

/* position:relative NUR für den Ablauf-Block ("Der Ablauf der Nacht") -
   Voraussetzung für das Netz, das als echtes Kind direkt in diesem Block
   sitzt (siehe css/level2.css: ".ablauf-netz-voll"). */
#ablauf-block {
    position: relative;
}

.programm-block:last-child {
    margin-bottom: 0;
}

.programm-block h2 {
    font-size: clamp(2rem, calc(6 * var(--uw)), 3.2rem);
    margin-bottom: 2rem;
}

.programm-deco {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* ----- "Was dich erwartet": Kartenraster ----- */

.programm-karten {
    display: grid;
    /* Fest verdrahtet auf 2 Spalten statt minmax(280px, 1fr) - 280px skaliert
       nicht mit der Buehne, ein mitskalierter Mindestwert ergaebe rechnerisch
       3 Spalten statt der geforderten 2 (siehe TODO-20260831-017, Technische
       Hinweise Punkt 2). */
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    text-align: left;
}

.programm-karte {
    /* position:relative - Voraussetzung für die angehängten Nebelbilder bei
       Kostüm-Pflicht (siehe css/level2.css: ".level2-pflicht-nebel-*"). */
    position: relative;
    background: var(--panel-bg);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    transition: transform 0.2s ease, border-color var(--theme-transition), box-shadow 0.2s ease;
}

.programm-karte:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    box-shadow: 0 8px 35px rgba(0, 0, 0, 0.6), 0 0 25px color-mix(in srgb, var(--accent) 15%, transparent);
}

.programm-karte-icon {
    font-size: 2.4rem;
    display: block;
    margin-bottom: 0.6rem;
}

.programm-karte h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.programm-karte p {
    color: var(--text-dim);
    line-height: 1.55;
    margin: 0;
}

.programm-karte-link {
    display: inline-block;
    margin-top: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
    color: var(--accent);
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.programm-karte-link:hover {
    background-color: var(--accent);
    color: var(--sky-black);
}

/* ----- "Der Ablauf der Nacht": Zeitleiste ----- */

.ablauf-zeitleiste {
    list-style: none;
    margin: 0 auto;
    padding: 0.5rem 0 0;
    /* Referenzanker 1920x1080, siehe .programm-block oben - 1000er statt
       640er-Formel, damit die Zeitleiste dieselbe Breite wie die Kacheln
       darueber hat (siehe TODO-20260831-017). */
    max-width: calc(1000px / 1.5 * var(--stage-scale));
    text-align: left;
    position: relative;
}

.ablauf-zeitleiste::before {
    content: '';
    position: absolute;
    /* Referenzanker 1920x1080, siehe .programm-block oben - die rohen
       px-Werte dieser Zeitleiste treffen Layout-Entscheidungen (Position
       der Achse/Zeit-Marken) und muessen deshalb wie die Breiten oben
       mitskalieren (siehe TODO-20260831-017). */
    left: calc(104px / 1.5 * var(--stage-scale));
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--accent) 55%, transparent) 0%,
        color-mix(in srgb, var(--accent) 12%, transparent) 100%);
    transition: background var(--theme-transition);
}

.ablauf-zeitleiste li {
    position: relative;
    padding: 0 0 1.8rem calc(140px / 1.5 * var(--stage-scale));
}

.ablauf-zeitleiste li:last-child {
    padding-bottom: 0;
}

.ablauf-zeitleiste li::before {
    content: '';
    position: absolute;
    left: calc(98px / 1.5 * var(--stage-scale));
    top: 8px;
    /* Referenzanker 1920x1080 (--stage-scale:1.5) wie bei "left" oben - vorher
       feste 14px/12px, dadurch auf Mobilgeraeten (kleines --stage-scale) im
       Verhaeltnis zur (mit --stage-scale mitskalierenden) Schrift ueberdimensioniert
       (siehe TODO-20260901-028). */
    width: calc(14px / 1.5 * var(--stage-scale));
    height: calc(14px / 1.5 * var(--stage-scale));
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 calc(12px / 1.5 * var(--stage-scale)) var(--accent);
    transition: background var(--theme-transition), box-shadow var(--theme-transition);
}

.ablauf-zeit {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(84px / 1.5 * var(--stage-scale));
    text-align: right;
    font-family: 'Creepster', cursive;
    font-size: 1.3rem;
    color: var(--accent-bright);
    text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
    transition: color var(--theme-transition), text-shadow var(--theme-transition);
}

.ablauf-zeitleiste h3 {
    font-size: 1.35rem;
    margin-bottom: 0.35rem;
}

.ablauf-zeitleiste p {
    color: var(--text-dim);
    line-height: 1.55;
    margin: 0;
}

/* ----- Kostuem-Wertung (innerhalb "Der Ablauf der Nacht") ----- */

.wertung-panel {
    background: var(--panel-bg);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: 16px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    padding: 1.5rem;
    /* Referenzanker 1920x1080, siehe .programm-block oben - 1000er statt
       640er-Formel (siehe TODO-20260831-017). */
    max-width: calc(1000px / 1.5 * var(--stage-scale));
    margin: 3rem auto 0;
    transition: border-color var(--theme-transition);
}

.wertung-panel h3 {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}

.wertung-panel > p,
.wertung-inhalt > p {
    color: var(--text-dim);
    margin: 0 0 1rem;
}

/* ----- Verschleierung vor gebrochenem Fluch -----
   Trifft auf die beiden <section class="programm-block"> ("Was dich
   erwartet" und #ablauf-block, das "Der Ablauf der Nacht" UND das
   verschachtelte .wertung-panel "Die Jagd nach dem Sieger" umfasst) als
   Ganzes zu - dadurch werden auch Ueberschriften und Emojis mit
   unleserlich, nicht nur Tabelle/Text. Gleiche Technik wie das bestehende
   backdrop-filter: blur() auf .programm-karte/.wertung-panel oben, hier
   aber filter (nicht backdrop-filter): der Inhalt selbst - nicht nur sein
   Hintergrund - soll unleserlich werden.

   Die Klasse steht seit TODO-Fix "Erlösung in einem Zug" IMMER im Markup
   (vorher haengte sie in index.php am worldFree-Cookie): ob der Blur
   tatsaechlich greift, entscheidet allein .fluch-gebrochen auf <html>
   (siehe js/fluch-status.js) - dieselbe Quelle wie fuer Nebel, Spinnen und
   Hoellentor-Glut. Nur so faellt der Blur waehrend der Erloesungssequenz
   im selben Moment wie alles andere weg; vorher blieb er als einziger
   Effekt bis zum naechsten Seitenaufruf stehen, weil er serverseitig am
   Cookie hing, das erst am ENDE der Sequenz gesetzt wird. */
.programm-verschleiert {
    filter: blur(8px);
    pointer-events: none;
    user-select: none;
    /* Weiches Scharfziehen im Erloesungsmoment - gleiche Dauer wie das
       Ausblenden von Nebel/Glut/Spinnen (siehe css/verfluchung.css). */
    transition: filter 2.5s ease;
}

html.fluch-gebrochen .programm-verschleiert {
    filter: none;
    pointer-events: auto;
    user-select: auto;
}

@media (prefers-reduced-motion: reduce) {
    .programm-verschleiert {
        transition: filter 0.4s ease;
    }
}

.wertung-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

.wertung-chips li {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: 999px;
    padding: 0.4rem 1rem;
    font-weight: 600;
    /* Keine eigene Groesse mehr (vorher 0.95rem) - einheitlich mit den
       uebrigen normalen Textinhalten (siehe TODO-20260901-030). */
    color: var(--text);
    transition: background var(--theme-transition), border-color var(--theme-transition);
}

.wertung-junior {
    color: var(--text-dim);
    margin: 1.25rem 0 0;
    /* Keine eigene Groesse mehr (vorher 0.95rem) - siehe .wertung-chips li oben. */
}