/*
 * 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;
    --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;
}

/* ---------- Hausschrift: Bailey Sans ITC ----------
   Vier Schnitte, alle unter demselben CSS-Familiennamen mit passendem
   font-weight/font-style - der Browser wählt dann automatisch die
   richtige Datei, wenn irgendwo font-weight:700 oder font-style:italic
   verwendet wird. 'DejaVu Sans'/Verdana bleiben als Rückfall bestehen,
   falls die Schriftdateien aus irgendeinem Grund nicht laden. */
@font-face {
    font-family: 'Bailey Sans ITC';
    src: url('fonts/Bailey_Sans_ITC_Book.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Bailey Sans ITC';
    src: url('fonts/Bailey_Sans_ITC_Book_Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Bailey Sans ITC';
    src: url('fonts/Bailey_Sans_ITC_Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Bailey Sans ITC';
    src: url('fonts/Bailey_Sans_ITC_Bold_Italic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

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: 'Bailey Sans ITC', '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.17rem;
}

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

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

/* ---------- 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 3rem 2rem 3rem; /* links/rechts bewusst identisch zu
                                        #kopf (3rem), damit Termine UND
                                        Info-Folien mit dem Kopfbereich
                                        fluchten */
    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: 6rem;
    font-weight: 700;
    color: var(--anthrazit);
}

.tag-datum {
    font-size: 6rem;
    color: var(--kreuz-grau);
    margin-left: 1.6rem;
}

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

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

.termin {
    display: flex;
    align-items: center;
    padding: 1.26rem 0;
    margin-bottom: 1.6rem; /* etwas enger als vorher (2.24rem), damit mehr
                              Termine ohne Scrollen aufs Mal passen */
}

/* Ersetzt den früheren border-left: ein eigenes Element statt einer reinen
   Rahmenlinie, weil nur so komplett runde Enden möglich sind (ein
   border-left kann nicht "pillenförmig" werden). Höhe exakt auf die der
   beiden Icons daneben abgestimmt, damit alles gemeinsam bündig wirkt. */
.termin-balken {
    width: 0.5rem; /* bewusst fest statt var(--streifen-hoehe) - diese
                       Variable steuert auch den Markenstreifen und den
                       Fortschritts-Punkt, die davon unberührt bleiben
                       sollen */
    height: 10.64rem;
    border-radius: 0.25rem;
    background: var(--termin-fallback-farbe);
    margin-right: 1.96rem;
    flex-shrink: 0;
}

/* 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 Titel-
   und Ort-Zeile zusammen angelehnt (siehe .termin .titel/.ort unten),
   damit ein zweizeiliger Termin optisch auf Bildhöhe kommt. */
.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: 39.4%;
    height: 39.4%;
    color: #999999;
}

/* ---------- Uhrzeit-Icon (ersetzt die frühere reine Textzeile) ----------

   Sieben-Segment-Ziffern statt Fließtext, damit die Uhrzeit auf den
   ersten Blick lesbar ist und dieselbe visuelle Bedeutung bekommt wie das
   Termin-Bild daneben. Bei bekannter Zeit leuchten die Segmente in
   Bordeaux, nicht benötigte Segmente bleiben minimal sichtbar (wie ein
   reales LCD-Display im Ruhezustand). Ohne bekannte Zeit ("ganztägig")
   zeigen alle Ziffern durchgehend "8" in derselben schwachen Graustufe -
   kein Ablesewert, aber eindeutig als "Uhr ohne eingestellte Zeit"
   erkennbar, ähnlich wie das Kalender-Symbol bei fehlendem Bild. */
.zeit-icon {
    height: 10.64rem;
    padding: 0 0.9rem;
    background: #f2f2f2;
    border-radius: 0.84rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex-shrink: 0;
    margin-left: 2.24rem;
}

.zeit-icon .ziffer {
    position: relative;
    width: 2.45rem;
    height: 4.19rem;
    flex-shrink: 0;
}

.zeit-icon .segment {
    position: absolute;
    border-radius: 0.25rem;
}

.zeit-icon .segment-a { top: 0;      left: 0.3rem;  width: 1.85rem; height: 0.5rem; }
.zeit-icon .segment-g { top: 1.85rem; left: 0.3rem;  width: 1.85rem; height: 0.5rem; }
.zeit-icon .segment-d { top: 3.69rem; left: 0.3rem;  width: 1.85rem; height: 0.5rem; }
.zeit-icon .segment-f { top: 0.43rem; left: 0;       width: 0.5rem; height: 1.52rem; }
.zeit-icon .segment-b { top: 0.43rem; left: 1.95rem; width: 0.5rem; height: 1.52rem; }
.zeit-icon .segment-e { top: 2.25rem; left: 0;       width: 0.5rem; height: 1.52rem; }
.zeit-icon .segment-c { top: 2.25rem; left: 1.95rem; width: 0.5rem; height: 1.52rem; }

.zeit-icon .doppelpunkt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.76rem;
    height: 4.19rem;
    flex-shrink: 0;
}

.zeit-icon .punkt {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

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

/* Größer als früher (Uhrzeit stand vorher als eigene Zeile hier mit
   davor) - jetzt zweizeilig (Titel + Ort), so bemessen, dass beide Zeilen
   zusammen wieder auf die Höhe von .termin-icon/.zeit-icon kommen
   (4.95rem * 1.25 Zeilenhöhe + 3.7rem * 1.2 Zeilenhöhe ≈ 10.64rem). */
.termin .titel {
    display: block;
    font-size: 6rem;
    line-height: 1.008;
    font-weight: 700;
    color: var(--anthrazit);
}

.termin .ort {
    display: block;
    font-size: 5rem;
    line-height: 0.967;
    color: var(--kreuz-grau);
    font-style: italic;
}

/* Dienstbesetzungen (z. B. "Predigt: Hanno Sommerkamp") - zusätzliche
   Zeilen unterhalb von Titel/Ort, nur vorhanden wenn ChurchTools welche
   liefert. Bewusst nicht in die "Titel+Ort = Icon-Höhe"-Rechnung mit
   eingerechnet (siehe .termin .titel) - ein Termin mit Dienstbesetzungen
   wird dadurch einfach etwas höher als einer ohne, die Icons bleiben
   dabei über die ganze (dann höhere) Zeile hinweg vertikal zentriert. */
.termin .dienste {
    margin-top: 0.4rem;
}

.termin .dienst {
    display: block;
    font-size: 5rem;
    line-height: 1.15;
    color: var(--anthrazit);
}

/* ---------- Info-Folie (eigenes Bild statt Tag/Termine) ---------- */

/* Füllt denselben Bereich wie sonst .tag-inhalt - Kopfbereich, Streifen
   und Fortschritts-Punkt bleiben unverändert bestehen, nur dieser Teil
   wird ersetzt. Bild behält sein Seitenverhältnis (object-fit: contain),
   wird also eingepasst statt zugeschnitten - Rand bleibt einfach weiß. */
.folie-bild-rahmen {
    width: 100%;
    height: 100%;
    padding: 0 0 2rem 0; /* nur unten Platz für "Stand: ..." lassen - links
                            und rechts übernimmt jetzt schon der (mit dem
                            Kopfbereich fluchtende) Innenabstand von .slide */
    display: flex;
    justify-content: center;
}

.folie-bild-rahmen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top; /* oben ausgerichtet, wie die Termine auch -
                                     fällt vor allem im Hochformat auf, wo ein
                                     querformatiges Bild sonst mit viel
                                     Leerraum oben und unten mittig "schwebt".
                                     Wichtig: Da img selbst schon volle
                                     Breite/Höhe hat, greift hierfür
                                     object-position, nicht align-items am
                                     Rahmen (das liefe bei einem 100%-Bild
                                     ins Leere). */
}

/* ---------- 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.61rem;
    color: var(--fuss-text);
    background: rgba(255, 255, 255, 0.85);
    border-top-left-radius: 0.6rem;
    z-index: 10;
}