/* ===== Klassischer Footer (TEST) =====
   Inhalt aus Halloween/index.php (<footer class="site-footer">) übernommen
   - bewusst SCHLICHT/FLACH gehalten (kein Glow, kein backdrop-filter, kein
   Bezug zu Lava-/Höllentor-Farben), damit er wie im Original als eigen-
   ständiger, klassischer Seitenfuß wirkt statt wie ein Teil des
   Höllentors darüber (siehe Auftrag Punkt 4). Farben trotzdem an die
   --accent-Variablen dieser Seite gekoppelt (statt fest Orange), damit er
   auf den Theme-Umschalter reagiert wie der Rest der Seite. */

.site-footer {
    background: #0a0810;
    border-top: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    padding: 3rem 1.5rem 0;
    font-family: 'Nunito', system-ui, sans-serif;
    transition: border-color var(--theme-transition);
}

.footer-grid {
    /* Verlaesst bewusst die 1000er/850er-Referenzbreite der uebrigen Boxen
       (siehe css/programm.css: .programm-block) - der Footer soll laut
       Auftrag die VOLLE Seitenbreite nutzen, aufgeteilt in gleich breite
       Inhaltsspalten mit halbspaltigen Puffern links/rechts (siehe
       TODO-20260831-017). --footer-cols wird serverseitig auf .site-footer
       gesetzt (siehe index.php) - 1 bis 4, je nachdem ob die Party-Infos
       ("Auf einen Blick"/"Eure Gastgeber", nur mit worldFree-Cookie) und
       "Die Seiten der Nacht" mitlaufen - und vererbt sich als CSS-Variable
       hierher wie zu .footer-bottom weiter unten.

       Die beiden 0.5fr-Randspalten bleiben LEERE Rasterzellen (reiner
       Puffer, kein Inhalt) - .footer-col:first-child startet deshalb
       explizit in Spalte 2, alle weiteren .footer-col folgen automatisch
       im normalen Grid-Fluss dahinter; die letzte 0.5fr-Spalte bleibt so
       automatisch frei, ohne dass die Spaltenanzahl im Selektor fest
       verdrahtet werden muss. */
    display: grid;
    grid-template-columns: 0.5fr repeat(var(--footer-cols), 1fr) 0.5fr;
    gap: 2rem;
}

.footer-col:first-child {
    grid-column-start: 2;
}

/* Die beiden Party-Info-Spalten ("Auf einen Blick", "Eure Gastgeber", siehe
   index.php) gehoeren zum erloesten Zustand: solange die Welt verflucht ist
   (kein .fluch-gebrochen auf <html>, siehe js/fluch-status.js), gibt der
   Footer nichts davon preis. Bewusst hier per CSS statt serverseitig per
   worldFree-Cookie: waehrend der Erloesungssequenz sollen sie im selben
   Moment wie Nebel/Glut/Programm-Blur erscheinen, und das Cookie steht zu
   diesem Zeitpunkt noch nicht. display:none statt visibility - die Spalten
   duerfen im Raster keinen Platz belegen; die Spaltenzahl (--footer-cols)
   pflegt js/footer-spalten.js passend dazu. */
html:not(.fluch-gebrochen) .footer-col--erst-mit-erloesung {
    display: none;
}

/* Ohne worldFree-Cookie bleibt allein die Marken-Spalte stehen (siehe
   index.php: $footerNurMarke). Sie sitzt dank des 0.5fr/1fr/0.5fr-Rasters
   zwar schon mittig auf der Seite, ihr INHALT waere aber weiter
   linksbuendig - der Absatz stuende dann als breiter Block unter der
   Marke. Deshalb hier zentriert und in der Zeilenlaenge begrenzt; das
   Raster selbst bleibt unangetastet, damit Trennlinie und .footer-bottom
   weiterhin exakt ueber der Inhaltsspalte liegen. Die Klasse haengt an der
   TATSAECHLICHEN Spaltenzahl, nicht am Cookie allein - kommt waehrend der
   Erloesungssequenz "Die Seiten der Nacht" dazu, nimmt
   js/footer-spalten.js sie zusammen mit --footer-cols wieder weg. */
.site-footer--solo .footer-col {
    text-align: center;
}

.site-footer--solo .footer-col p {
    max-width: 46ch;
    margin-inline: auto;
}

/* Selektor bewusst ".footer-col .footer-brand" statt nur ".footer-brand"
   (Spezifitaet 0,2,0 statt 0,1,0): <p class="footer-brand"> ist zugleich
   ein <p> innerhalb von .footer-col und matcht daher auch ".footer-col p"
   weiter unten (Spezifitaet 0,1,1) - das schlug bisher color/margin/
   line-height dieser Regel, obwohl sie spaeter im File steht (siehe
   TODO-20260901-032). Dadurch griff der Margin-Fix aus TODO-20260901-029
   nie tatsaechlich (margin blieb 0 statt 0.8rem), der gemeldete Abstands-
   Bug bestand unveraendert weiter. */
.footer-col .footer-brand {
    font-family: 'Creepster', cursive;
    font-weight: 400;
    /* Gleiche Schriftgroesse wie der uebrige Footer-Inhalt (.footer-col p/li,
       Standardgroesse ohne eigene font-size) - vorher 1.5rem, dadurch
       uneinheitlich zu "Auf einen Blick"/"Eure Gastgeber" (siehe Auftrag). */
    font-size: 1rem;
    color: var(--accent-bright);
    /* Bottom-Abstand identisch zu .footer-col h4 (0.8rem), damit der Abstand
       zum folgenden Absatz genauso gross ist wie zwischen Ueberschrift und
       Inhalt der anderen Footer-Spalten (siehe TODO-20260901-029) - vorher
       0.6rem, dadurch kleiner als bei "Auf einen Blick"/"Eure Gastgeber". */
    margin: 0 0 0.8rem;
    line-height: 1.2;
    transition: color var(--theme-transition);
}

.footer-col p {
    color: var(--text-dim);
    line-height: 1.6;
    margin: 0;
}

.footer-col h4 {
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.85rem;
    margin: 0.25rem 0 0.8rem;
    font-weight: 700;
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-col li {
    color: var(--text-dim);
    margin-bottom: 0.5rem;
}

.footer-col a {
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-col a:hover {
    color: var(--accent-bright);
}

.footer-bottom {
    /* Gleiches Raster wie .footer-grid oben (--footer-cols vererbt sich von
       .site-footer), damit Trennlinie/Copyright/"Zurueck nach oben" exakt
       ueber die Inhaltsspalten reichen und nicht in die Puffer hinein -
       jedes Kind spannt per grid-column: 2 / -2 (= von der ersten bis zur
       letzten Inhaltsspalte, unabhaengig von --footer-cols) ueber genau
       diesen Bereich, siehe unten. */
    display: grid;
    grid-template-columns: 0.5fr repeat(var(--footer-cols), 1fr) 0.5fr;
    margin-top: 2.5rem;
    padding: 0 0 1.2rem;
    text-align: center;
}

.footer-bottom > * {
    grid-column: 2 / -2;
}

/* Trennlinie als Flaeche mit Farbverlauf statt border-top (siehe
   TODO-20260831-017): ein border-top waere entweder 100% breit (in die
   Puffer hinein) oder braeuchte einen zusaetzlichen Wrapper nur fuer die
   Breite - eine eigene Grid-Zelle mit Verlaufs-Hintergrund spart das und
   erlaubt gleichzeitig das seitliche Auslaufen.

   --footer-divider-fade ist die EINZIGE Stelle, die den Auslaufanteil
   steuert (Vorgabe: 20% je Seite, 60% deckender Kern) - an der
   LINIENBREITE gemessen, nicht an einer Spaltenbreite: eine Spalte waere
   je nach --footer-cols (3 oder 4) unterschiedlich breit und die Linie
   saehe im 3- und 4-Spalten-Zustand unterschiedlich aus (siehe Technische
   Hinweise Punkt 3 der TODO). Margin oben/unten bewusst gleich (1.5rem),
   Vorgabe: "etwas Abstand nach oben und auch einen nach unten". */
.footer-divider {
    --footer-divider-fade: 20%;
    height: 1px;
    margin: 1.5rem 0;
    /* 5 Stuetzstellen je Seite nach der Smootherstep-Kurve
       (6t^5 - 15t^4 + 10t^3, t = Anteil der Auslaufzone) statt eines
       linearen Verlaufs - dieselbe Ueberlegung wie bei der Kamerafahrt in
       js/verlorene-seele.js: linear bleibt an der Ansatzstelle als Kante
       sichtbar, die S-Kurve laesst sie verschwinden. Smootherstep(0/
       0.25/0.5/0.75/1) = 0 / 0.10 / 0.5 / 0.90 / 1, hier auf den vollen
       Kern-Alphawert 0.4 bezogen (0 / 0.04 / 0.2 / 0.36 / 0.4).

       Jeder Stopp nutzt dieselben r/g/b-Kanaele der Akzentfarbe (per
       rgb(from ...)) und aendert NUR die Alpha - bewusst NICHT das
       Schluesselwort "transparent" (das ist Schwarz mit Alpha 0) und
       bewusst NICHT ueber die Hintergrundfarbe #0a0810 ausgeblendet:
       beides wuerde die Linie an ein dunkles Zwischenband bzw. eine feste
       Hintergrundfarbe binden und im Purple- wie im Orange-Theme
       unterschiedlich/schmutzig wirken (siehe Technische Hinweise Punkt 4
       der TODO). */
    background: linear-gradient(90deg,
        rgb(from var(--accent) r g b / 0) 0%,
        rgb(from var(--accent) r g b / 0.04) calc(var(--footer-divider-fade) * 0.25),
        rgb(from var(--accent) r g b / 0.2) calc(var(--footer-divider-fade) * 0.5),
        rgb(from var(--accent) r g b / 0.36) calc(var(--footer-divider-fade) * 0.75),
        rgb(from var(--accent) r g b / 0.4) var(--footer-divider-fade),
        rgb(from var(--accent) r g b / 0.4) calc(100% - var(--footer-divider-fade)),
        rgb(from var(--accent) r g b / 0.36) calc(100% - var(--footer-divider-fade) * 0.75),
        rgb(from var(--accent) r g b / 0.2) calc(100% - var(--footer-divider-fade) * 0.5),
        rgb(from var(--accent) r g b / 0.04) calc(100% - var(--footer-divider-fade) * 0.25),
        rgb(from var(--accent) r g b / 0) 100%);
    transition: background var(--theme-transition);
}

.footer-copyright,
.footer-back-to-top {
    /* Gleiche Schriftgroesse wie der uebrige Footer-Inhalt - vorher 0.85rem,
       dadurch kleiner als .footer-col p/li (siehe Auftrag). */
    color: var(--text-dim);
    margin: 0;
}

.footer-back-to-top {
    margin-top: 0.8rem;
}

.footer-back-to-top a {
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-back-to-top a:hover {
    color: var(--accent-bright);
}