/* === Root Variables === */
/* Definieren von CSS-Variablen für konsistente Styles im gesamten Guide */
:root {
    /* Farbvariablen */
    --okkl-guide__color-primary: #e3030a; /* Hauptfarbe */
    --okkl-guide__color-primary-highlight: #F80000; /* Hervorhebungsfarbe bei Hover und aktiven Zuständen */
    --okkl-guide__color-primary-dim: #CA0101; /* Abgeschwächte Primärfarbe für Standardzustände oder weniger hervorgehobene Elemente */
    --okkl-guide__color-background: #FAF7F7; /* Hintergrundfarbe für Programmpunkte */
    --okkl-guide__color-background-focus: linear-gradient(to bottom, #f9d2d2 0%, var(--okkl-guide__color-background) 100%); /* Hintergrundfarbe für Programmpunkte im Fokus */
    --okkl-guide__color-background-focus-light: linear-gradient(to bottom, #ea8485 0%, var(--okkl-guide__color-primary) 100%); /* Hintergrundfarbe für aktive Programmpunkte im Fokus */
    --okkl-guide__color-light: #ffffff; /* Helle Farbe, z.B. für Text auf dunklem Hintergrund */

    /* Schriftarten und Größen */
    --okkl-guide__font-family: inherit; /* Schriftart vom Elternelement erben */

    /* Schriftgrößen mit Clamp für responsives Design */
    --okkl-guide__font-size-big: clamp(18px, 3vw, 22px); /* Große Schriftgröße */
    --okkl-guide__font-size-medium: clamp(14.5px, 2vw, 18px); /* Mittlere Schriftgröße */
    --okkl-guide__font-size-small: clamp(14.5px, 2vw, 16px); /* Kleine Schriftgröße */

    /* Schriftgewichte */
    --okkl-guide__font-weight-normal: 500;
    --okkl-guide__font-weight-medium: 600;
    --okkl-guide__font-weight-bold: 800;

    /* Layoutmaße */
    --okkl-guide__time-width: clamp(65px, 12vw, 90px); /* Breite der Zeitspalte */
    --okkl-guide__padding: clamp(12px, 2.5vw, 18px); /* Allgemeine Innenabstände */

    /* Chevron (Pfeil) Dimensionen */
    --okkl-guide__chevron-size: clamp(11px, 2vw, 13px); /* Größe des Chevrons */
    --okkl-guide__chevron-thickness: clamp(3.5px, 1vw, 4px); /* Dicke der Chevron-Linien */

    /* Maximale Breite des Inhalts */
    --okkl-guide__content-max-width: 1000px;

    /* Transition-Einstellungen */
    --okkl-guide__transition: 0.3s ease; /* Allgemeine Transition-Dauer */

    /* Sticky-Position Offsets */
    --okkl-guide__sticky-at: 86px; /* Offset für Sticky-Elemente auf Desktop */
    --okkl-guide__sticky-at--mobile: 48px; /* Offset für Sticky-Elemente auf Mobile */
}

/* === Globale Styles === */
/* Nur bei der Wochenansicht: Überlauf abschneiden statt verstecken, damit die Tagesauswahl kleben bleibt */
body:has(.okkl-guide__day-selector) {
    overflow: clip !important; /* Verhindert Überlauf-Scrollen */
}

/* :is() mit ID behält die bisherige Spezifität, greift aber für jede Instanz */
:is(.okkl-guide, #okkl-guide) {
    all: unset; /* Entfernt alle Standardbrowser-Stile */
    box-sizing: border-box;
    font-family: var(--okkl-guide__font-family);
    font-size: var(--okkl-guide__font-size-medium);
    font-weight: var(--okkl-guide__font-weight-normal);
    line-height: 1.3;
}

/* === Tagesauswahl === */
.okkl-guide__day-selector {
    position: sticky;
    top: var(--okkl-guide__sticky-at);
    z-index: 1;
}

.okkl-guide__days {
    display: flex;
    justify-content: space-between;
    gap: 1px; /* Kleiner Abstand zwischen den Tagesbuttons */
    background-color: var(--okkl-guide__color-light);
}

.okkl-guide__day-button {
    background-color: var(--okkl-guide__color-primary-dim);
    color: var(--okkl-guide__color-light);
    cursor: pointer;
    transition: all var(--okkl-guide__transition);
    text-align: center;
    padding: 0.6em 0.2em;
    flex-grow: 1;
    flex-basis: 14%;
    font-weight: var(--okkl-guide__font-weight-bold);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.okkl-guide__day-button > span {
    font-weight: var(--okkl-guide__font-weight-normal);
}

.okkl-guide__day-button--active,
.okkl-guide__day-button:hover,
.okkl-guide__day-button:focus {
    background-color: var(--okkl-guide__color-primary-highlight);
    outline: none;
}

.okkl-guide__day-button:hover,
.okkl-guide__day-button:focus-visible {
    padding-bottom: .75em;
    padding-top: .45em;
}

/* Anzeige des aktuellen Tages für mobile Geräte */
.okkl-guide__current-day {
    background-color: var(--okkl-guide__color-primary);
    color: var(--okkl-guide__color-light);
    cursor: pointer;
    transition: background-color var(--okkl-guide__transition);
    padding: var(--okkl-guide__padding);
    font-weight: var(--okkl-guide__font-weight-bold);
    display: none; /* Standardmäßig verborgen, wird auf Mobile angezeigt */
    width: 100%;
    font-size: var(--okkl-guide__font-size-big);
    position: relative;
}

.okkl-guide__current-day > span {
    font-weight: var(--okkl-guide__font-weight-normal);
}

.okkl-guide__current-day:focus {
    background-color: var(--okkl-guide__color-primary-highlight);
    outline: none;
}

/* Chevron-Symbol zum Aufklappen der Tagesauswahl */
.okkl-guide__current-day:after {
    content: "";
    display: block;
    width: var(--okkl-guide__chevron-size);
    height: var(--okkl-guide__chevron-size);
    border-style: solid;
    border-color: var(--okkl-guide__color-light);
    border-top-width: 0;
    border-right-width: var(--okkl-guide__chevron-thickness);
    border-bottom-width: var(--okkl-guide__chevron-thickness);
    border-left-width: 0;
    transform: rotate(45deg) translate(-3%, 25%);
    transition: transform var(--okkl-guide__transition);
    position: absolute;
    right: var(--okkl-guide__padding);
    top: var(--okkl-guide__padding);
}

/* Styles, wenn die Tagesauswahl geöffnet ist */
.okkl-guide__day-selector--open .okkl-guide__current-day {
    background-color: var(--okkl-guide__color-primary-highlight);
}

.okkl-guide__day-selector--open .okkl-guide__current-day:after {
    transform: rotate(225deg) translate(-35%, -55%);
}

/* === Programm-Liste === */
/* Grundlegende Styles für den Programm-Container */
.okkl-guide__programs {
    display: block;
    opacity: 1;
    transition: opacity var(--okkl-guide__transition);
}

/* Ladezustand */
.okkl-guide__programs--loading {
    opacity: 0;
    transition: none;
}

/* Einzelner Programmpunkt */
.okkl-guide__program-item {
    display: block;
    margin-top: 8px;
    background: var(--okkl-guide__color-background);
    cursor: pointer;
}

/* Für die Anzeige von "now" den Abstand des ersten Programmpunkts zurücksetzen */
:is(.okkl-guide, #okkl-guide)[data-type="now"] .okkl-guide__program-item:first-of-type {
    margin-top: 0;
}

/* === Hauptbereich des Programms === */
/* Hauptbereich, der Zeit und Info enthält */
.okkl-guide__program-main {
    display: flex;
    align-items: flex-start;
    position: relative;
    padding: var(--okkl-guide__padding) calc(var(--okkl-guide__padding) * 3) var(--okkl-guide__padding) var(--okkl-guide__padding);
    /*min-height: calc(
                (var(--okkl-guide__font-size-big)* 1.3) + 
                (var(--okkl-guide__font-size-medium)* 1.3) + 
                (var(--okkl-guide__padding)* 2) +
                0.1em
            );*/
}

.okkl-guide__program-main:focus {
    outline: none;
}
.okkl-guide__program-main:focus-visible {
    background: var(--okkl-guide__color-background-focus);
}

/* Chevron-Symbol zum Aufklappen der Programmdetails */
.okkl-guide__program-main:after {
    content: "";
    display: block;
    width: var(--okkl-guide__chevron-size);
    height: var(--okkl-guide__chevron-size);
    border-style: solid;
    border-color: var(--okkl-guide__color-primary);
    border-top-width: 0;
    border-right-width: var(--okkl-guide__chevron-thickness);
    border-bottom-width: var(--okkl-guide__chevron-thickness);
    border-left-width: 0;
    transform: rotate(45deg) translate(-3%, 25%);
    transition: transform var(--okkl-guide__transition);
    position: absolute;
    right: var(--okkl-guide__padding);
    top: var(--okkl-guide__padding);
}

/* Chevron drehen, wenn Programmpunkt geöffnet ist */
.okkl-guide__program-item--open .okkl-guide__program-main:after {
    transform: rotate(225deg) translate(-35%, -55%);
}

/* Zeitspalte */
.okkl-guide__time {
    flex-basis: var(--okkl-guide__time-width);
    flex-shrink: 0;
    text-align: left;
    color: var(--okkl-guide__color-primary);
    font-size: var(--okkl-guide__font-size-big);
    font-weight: var(--okkl-guide__font-weight-bold);
    font-variant-numeric: tabular-nums; /* Sorgt für vertikale Ausrichtung der Zahlen */
}

/* Infospalte */
.okkl-guide__info {
    flex-grow: 1;
}

.okkl-guide__title {
    display: block;
    font-size: var(--okkl-guide__font-size-big);
    font-weight: var(--okkl-guide__font-weight-bold);
}

.okkl-guide__subtitle {
    display: block;
    margin-top: 0.1em;
}

/* === Programmdetails === */
/* Standardmäßig verborgen, wird beim Öffnen des Programms angezeigt */
.okkl-guide__program-details {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--okkl-guide__transition);
}

.okkl-guide__content {
    display: block;
    padding: 0 var(--okkl-guide__padding) var(--okkl-guide__padding) calc(var(--okkl-guide__time-width) + var(--okkl-guide__padding));
    max-width: var(--okkl-guide__content-max-width);
}

.okkl-guide__content p {
    font-size: var(--okkl-guide__font-size-small);
    line-height: 1.4;
    margin-top: 0.5em;
}

.okkl-guide__content p + * {
    margin-top: 0.3em !important;
}

.okkl-guide__content p.okkl-guide__producer {
    font-weight: var(--okkl-guide__font-weight-medium);
    margin-top: 0;
}

/* === Aktuell laufendes Programm === */
/* Styles für das aktuell laufende Programm */
.okkl-guide__program-item--now {
    background-color: var(--okkl-guide__color-primary);
}

.okkl-guide__program-item--now .okkl-guide__program-main:after {
    border-color: var(--okkl-guide__color-light);
}

.okkl-guide__program-item--now * {
    color: var(--okkl-guide__color-light);
}
.okkl-guide__program-item--now .okkl-guide__program-main:focus-visible {
    background: var(--okkl-guide__color-background-focus-light);
}

.okkl-guide__program-item--now .okkl-guide__time:after {
    content: "Live";
    float: left;
    color: var(--okkl-guide__color-primary);
    font-size: calc(var(--okkl-guide__font-size-small)* .8);
    line-height: 1;
    background: var(--okkl-guide__color-light);
    text-transform: uppercase;
    border-radius: .2em;
    padding: .2em .3em;
    margin-top: .25em;
}

/* === Media Queries === */
/* Sicherstellen, dass die Tagesauswahl auf größeren Bildschirmen immer sichtbar ist */
@media (min-width: 700px) {
    .okkl-guide__days {
        max-height: none !important;
    }
}

/* Spezifische Styles für mobile Geräte */
@media (max-width: 699px) {
    /* Anzeige des aktuellen Tages auf Mobile */
    .okkl-guide__current-day {
        display: block;
        position: relative;
    }

    /* Styling der Tagesliste für Mobile */
    .okkl-guide__days {
        flex-direction: column;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--okkl-guide__transition);
        position: absolute;
        top: 100%; /* Position unterhalb des aktuellen Tages */
        left: 0;
        z-index: 1;
    }

    .okkl-guide__day-button {
        display: block;
        text-align: left;
        padding: var(--okkl-guide__padding);
        font-size: var(--okkl-guide__font-size-big);
    }

    /* Kleiner Abstand zum ersten Tagesbutton */
    .okkl-guide__day-button:first-of-type {
        margin-top: 1px;
    }

    .okkl-guide__day-button:hover,
    .okkl-guide__day-button:focus {
        padding: var(--okkl-guide__padding) var(--okkl-guide__padding) var(--okkl-guide__padding) calc(var(--okkl-guide__padding) * 2);
    }

    /* Anpassung der Inhaltsabstände auf Mobile */
    .okkl-guide__content {
        padding-right: calc(var(--okkl-guide__padding) * 1.5);
    }
}