/*
 * Farb- und Formsprache 1:1 aus dem Wochenplan-PDF übernommen
 * (templates/pdf-template.php):
 *   Anthrazit  #485454  - Titel/Überschriften
 *   Bordeaux   #84303C  - Zeitraum-Angabe
 *   die fünf Kreuzfarben im Markenstreifen bleiben unverändert
 * Die farbigen Balken vor jedem Termin sind bewusst NICHT Teil dieses
 * Farbschemas - sie übernehmen die ChurchTools-Kalenderfarbe je Termin,
 * genau wie im PDF.
 *
 * Skalierung: html bekommt eine Basis-Schriftgröße in vmin (= Prozent der
 * KLEINEREN Bildschirmseite, egal ob das die Breite oder die Höhe ist).
 * Alle Größen und Abstände unten sind bewusst in rem angegeben, also
 * relativ zu dieser einen Basisgröße - nicht gemischt aus vh (für
 * Schriftgrößen) und vw (für Abstände) wie in der ersten Fassung. Dieses
 * Mischen war der eigentliche Grund für "zu groß und zu dicht" auf einem
 * Bildschirm, der nicht im klassischen 16:9-Format läuft: vh-Schriften
 * blieben gleich groß, während vw-Abstände mit der Breite schrumpften.
 * Mit einer gemeinsamen Basis skalieren Schrift UND Abstand immer im
 * gleichen Verhältnis zueinander, unabhängig vom Seitenverhältnis.
 */

html {
    font-size: 1vmin;
}

:root {
    --anthrazit: #485454;
    --bordeaux: #84303C;
    --kreuz-grau: #9CA89C;
    --kreuz-blau: #243C90;
    --kreuz-gold: #F0B400;
    --kreuz-gruen: #008448;
    --kreuz-rot: #D81830;

    --text: #222222;
    --zeit-text: #1a1a1a;
    --ort-text: #666666;
    --keine-termine: #aaaaaa;
    --fuss-text: #999999;
    --termin-fallback-farbe: #9aa5b1;

    /* Bewusst in vmin (nicht vh!) - dieselbe Basis wie überall sonst (siehe
       html { font-size: 1vmin } oben). Auf Querformat ist das identisch zu
       vh, aber im Hochformat bleibt so das Verhältnis von Kopfbereich zu
       Logo/Text konstant statt dass der Kopfbereich (mit vh) gleich groß
       bliebe, während Logo/Text (mit vmin/rem) auf einmal kleiner würden -
       genau das hatte vorher den Abstand ums Logo im Hochformat wachsen
       lassen. */
    --kopf-hoehe: 10.4vmin;
    --streifen-hoehe: 0.7vmin;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* die Anzeige läuft dauerhaft im Kiosk-Modus, es soll
                          nirgends eine Scrollbar oder ein Rand sichtbar sein */
    background: #ffffff;
    color: var(--text);
    font-family: 'DejaVu Sans', Verdana, 'Segoe UI', sans-serif;
}

/* ---------- Kopfbereich (wie table.kopf im PDF) ---------- */

#kopf {
    height: var(--kopf-hoehe);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3rem;
}

#logo {
    height: 6.4rem;
    width: auto;
}

#kopf-text {
    text-align: right;
    /* Korrektur für den sichtbaren Höhenversatz zwischen Bild (Logo) und
       Text: Browser zentrieren Text anhand des Zeilenkastens inkl.
       Font-Leading, nicht anhand der sichtbaren Tinte. Bei dieser Schrift
       ist das Leading oben/unten nicht symmetrisch, wodurch der Text ohne
       diese Korrektur sichtbar tiefer sitzt als das Logo (~5px bei einer
       2368px hohen Aufnahme, empirisch nachgemessen). */
    position: relative;
    top: -0.32rem;
}

#titel {
    margin: 0;
    color: var(--anthrazit);
    font-size: 2.88rem;
    font-weight: 700;
}

#zeitraum {
    color: var(--bordeaux);
    font-size: 1.73rem;
    margin-top: 0.05rem;
}

/* ---------- Markenstreifen ---------- */

#markenstreifen {
    height: var(--streifen-hoehe);
    display: flex;
    position: relative; /* Bezugsrahmen für den Fortschritts-Punkt */
}

/* Läuft über den fünffarbigen Markenstreifen von links nach rechts durch -
   startet neu, sobald eine Folie aktiv wird, und die Laufzeit wird von JS
   exakt auf die tatsächliche Anzeigedauer dieser Folie gesetzt (egal ob
   statisch oder mit Scrollen). Genau so dick wie der Streifen, dafür
   breiter als hoch und mit Farbverlauf statt harter Kante - wirkt dadurch
   eher wie ein weiches Licht, das durchläuft, als ein hartes Quadrat. */
.fortschritt-punkt {
    position: absolute;
    top: 0;
    left: 0;
    height: var(--streifen-hoehe);
    width: calc(var(--streifen-hoehe) * 5);
    background: linear-gradient(to right, transparent, #fff, #fff, transparent);
    pointer-events: none;
}

#markenstreifen span {
    flex: 1;
}

/* ---------- Bühne: sichtbarer Ausschnitt, in dem die Tage durchlaufen ---------- */

#buehne {
    height: calc(100vh - var(--kopf-hoehe) - var(--streifen-hoehe));
    overflow: hidden;
    position: relative;
}

#slides {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: transform 0.9s ease-in-out;
}

#slides.ohne-uebergang {
    transition: none;
}

/* ---------- Ein einzelner Tag ---------- */

.slide {
    height: calc(100vh - var(--kopf-hoehe) - var(--streifen-hoehe));
    padding: 2.5rem 3.5rem 2rem 3.5rem;
    overflow: hidden; /* Inhalt wird bei Bedarf per JS sanft verschoben,
                          nie per Browser-Scrollbalken */
    display: flex;
    justify-content: center; /* zentriert .tag-inhalt als Ganzes */
}

/* Bekommt per JS die tatsächlich benötigte Breite (über alle Termine der
   ganzen Woche ermittelt, nicht nur des einen Tages) als CSS-Variable
   gesetzt - dieselbe Breite gilt für alle Tage, damit die Spalte beim
   Wechsel nicht in der Breite springt. Innerhalb bleibt alles linksbündig,
   nur die Spalte als Ganzes wird zentriert. */
.tag-inhalt {
    width: var(--inhalt-breite, 100%);
    max-width: 100%; /* falls die Messung mal daneben liegt, nie über den
                         Bildschirmrand hinaus */
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Der Tageskopf ("Mittwoch 16.09.2026") bleibt beim Scrollen fest stehen -
   er ist bewusst NICHT Teil von .termine-liste, damit man beim Blick auf
   die Leinwand mitten im Scrollen trotzdem noch sieht, zu welchem Tag die
   gerade sichtbaren Termine gehören. */
.tag-kopf {
    display: flex;
    align-items: baseline;
    padding-bottom: 1rem;
    margin-bottom: 2.2rem;
    margin-left: -0.35rem; /* gleicht den optischen Vorabstand der fetten
                              Blockschrift-Glyphen (z. B. "M") aus, damit
                              die Überschrift wirklich bündig mit den
                              Terminbalken beginnt, nicht nur laut CSS-Box */
    flex-shrink: 0;
}

/* Sichtfenster für die Terminliste: bekommt automatisch genau den Platz,
   der nach Abzug des Tageskopfs noch übrig ist (flex: 1). JS liest davon
   client Height, um die Scroll-Strecke zu berechnen - dort ist die
   Innen-Auspolsterung des Slides schon korrekt mit eingerechnet. */
.termine-fenster {
    flex: 1 1 auto;
    min-height: 0; /* nötig, damit Flexbox das Fenster wirklich auf die
                       verfügbare Höhe begrenzt statt an den Inhalt
                       anzupassen */
    overflow: hidden;
    position: relative;
}

.termine-liste {
    transition: transform 0.9s linear;
}

.termine-liste.ohne-uebergang {
    transition: none;
}

.wochentag {
    font-size: 4.6rem;
    font-weight: 700;
    color: var(--anthrazit);
}

.tag-datum {
    font-size: 2.3rem;
    color: #767b7b;
    margin-left: 1.6rem;
}

.keine-termine {
    color: var(--keine-termine);
    font-size: 2.2rem;
    font-style: italic;
}

/* ---------- Einzelner Termin (wie .termin im PDF) ---------- */

.termin {
    display: flex;
    align-items: center;
    padding: 1.26rem 0 1.26rem 1.96rem;
    margin-bottom: 2.24rem;
    border-left: var(--streifen-hoehe) solid var(--termin-fallback-farbe);
}

/* Bild-Container: exakt gleich groß, egal ob echtes Termin-Bild oder das
   generische Platzhalter-Symbol - wie in der Termine-Seitenleiste, damit
   nichts in der Zeile springt. Höhe bewusst an die Gesamthöhe von Zeit-,
   Titel- und Ort-Zeile zusammen angelehnt, damit ein dreizeiliger Termin
   optisch auf Bildhöhe kommt (skaliert 1:1 mit den Textgrößen unten). */
.termin-icon {
    width: 10.64rem;
    height: 10.64rem;
    border-radius: 0.84rem;
    background: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.termin-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.termin-icon svg {
    width: 55%;
    height: 55%;
    color: #999999;
}

.termin-text {
    min-width: 0; /* erlaubt Zeilenumbruch bei langen Titeln statt Überlauf */
    margin-left: 2.24rem;
}

.termin .zeit {
    display: block;
    font-weight: 700;
    font-size: 2.94rem;
    color: var(--zeit-text);
}

.termin .titel {
    display: block;
    font-size: 3.36rem;
    line-height: 1.25;
}

.termin .ort {
    display: block;
    font-size: 2.52rem;
    color: var(--ort-text);
    font-style: italic;
}

/* ---------- Fuß ---------- */

/* Liegt als Overlay über der Terminliste statt in einer eigenen Zeile -
   die Termine reichen ohnehin nie so weit nach unten rechts, dass sich das
   überschneidet, und so bleibt der ganze restliche Bildschirm für Termine
   nutzbar. Leicht durchscheinender Hintergrund, damit der Text trotzdem
   lesbar bleibt, falls doch mal ein Termin-Bild darunterliegt. */
#fuss {
    position: fixed;
    right: 0;
    bottom: 0;
    padding: 0.5rem 3rem 0.5rem 1.6rem; /* rechts bewusst identisch zu
                                            #kopf, damit "Stand: ..." mit
                                            "UNSERE WOCHE" darüber in einer
                                            Flucht steht */
    font-size: 1.3rem;
    color: var(--fuss-text);
    background: rgba(255, 255, 255, 0.85);
    border-top-left-radius: 0.6rem;
    z-index: 10;
}