/**
 * TCB Aktuell
 *
 * Frontend-Darstellung des Meldungsbalkens.
 *
 * Aufbau:
 *
 * | TCB AKTUELL | Prioritäts-Icon | Meldungsinhalt | Navigation |
 *
 * Der Meldungsinhalt besteht aus:
 *
 * - Titel
 * - Meldung
 * - optionalem Link
 *
 * Gestaltung:
 *
 * Wiederkehrende Farben und Designwerte werden über
 * CSS-Variablen definiert. Dadurch kann das Erscheinungsbild
 * später einfacher an das WordPress-Theme sowie an helle oder
 * dunkle Darstellungen angepasst werden.
 */


/* ==========================================================
   Designvariablen
   ========================================================== */

/**
 * Zentrale Gestaltungswerte für TCB Aktuell.
 *
 * Die Variablen gelten nur innerhalb von .tcb-aktuell und
 * beeinflussen daher keine anderen Elemente der Website.
 *
 * Die aktuellen Werte entsprechen bewusst dem bisherigen
 * Erscheinungsbild. Durch die Einführung der Variablen soll
 * sich zunächst optisch nichts verändern.
 */
.tcb-aktuell {

    /* Hintergrund des Meldungsbalkens */
    --tcb-aktuell-bg: #2f2f2f;

    /* Standard-Textfarbe */
    --tcb-aktuell-text: #ffffff;

    /* TCB-Akzentfarbe */
    --tcb-aktuell-accent: #d97800;

    /* Farbe für Priorität "Wichtig" */
    --tcb-aktuell-important: #d96b43;

    /* Farbe für Priorität "Dringend" */
    --tcb-aktuell-urgent: #c62828;

    /* Dezente Trennlinien */
    --tcb-aktuell-divider: rgba(255, 255, 255, 0.18);

    /* Fokusrahmen bei Tastaturbedienung */
    --tcb-aktuell-focus: #ffffff;

    /* Rundung des gesamten Meldungsbalkens */
    --tcb-aktuell-radius: 4px;

    /* Rundung der Navigationsschaltflächen */
    --tcb-aktuell-button-radius: 3px;
}


/* ==========================================================
   Hauptcontainer
   ========================================================== */

/**
 * Äußerer Container des gesamten TCB-Aktuell-Balkens.
 *
 * Die Hauptbereiche werden horizontal mit Flexbox
 * angeordnet.
 */
.tcb-aktuell {
    position: relative;

    display: flex;
    align-items: center;
    gap: 18px;

    padding: 16px 20px;

    background: var(--tcb-aktuell-bg);
    color: var(--tcb-aktuell-text);

    border-left: 5px solid var(--tcb-aktuell-accent);
    border-radius: var(--tcb-aktuell-radius);

    line-height: 1.5;
}


/* ==========================================================
   Festes Label "TCB AKTUELL"
   ========================================================== */

/**
 * Das Label bleibt unabhängig vom Meldungswechsel permanent
 * sichtbar.
 *
 * Die rechte Linie trennt das Label optisch vom
 * Prioritätsbereich.
 */
.tcb-aktuell-label {
    display: inline-flex;
    align-items: center;

    height: 48px;
    padding-right: 16px;

    font-weight: 700;
    color: var(--tcb-aktuell-accent);

    white-space: nowrap;

    border-right: 1px solid var(--tcb-aktuell-divider);
}


/* ==========================================================
   Bereich für wechselnde Meldungen
   ========================================================== */

/**
 * Enthält die einzelnen Meldungen.
 *
 * Rechts wird Platz für die separat positionierte Navigation
 * reserviert.
 */
.tcb-aktuell-meldungen {
    position: relative;

    flex: 1;
    min-height: 24px;

    margin-right: 80px;
}


/**
 * Einzelne Meldung.
 *
 * Alle Meldungen bleiben grundsätzlich als Flex-Elemente
 * vorhanden. Nicht aktive Meldungen werden absolut
 * positioniert und über opacity ausgeblendet.
 *
 * Dadurch ist eine echte Überblendung möglich.
 */
.tcb-aktuell-item {
    display: flex;
    align-items: center;
    gap: 16px;

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.4s ease;
}


/**
 * Nicht aktive Meldungen werden aus dem normalen
 * Dokumentfluss genommen.
 *
 * Dadurch beeinflussen sie die Höhe des Meldungsbalkens
 * nicht.
 */
.tcb-aktuell-item:not(.is-active) {
    position: absolute;
    inset: 0;
}


/**
 * Die aktive Meldung bleibt im normalen Dokumentfluss.
 *
 * Dadurch bestimmt sie automatisch die benötigte Höhe
 * des Meldungsbalkens.
 */
.tcb-aktuell-item.is-active {
    position: relative;

    opacity: 1;
    pointer-events: auto;
}


/* ==========================================================
   Priorität
   ========================================================== */

/**
 * Äußerer Prioritätsbereich.
 *
 * Sorgt für zusätzlichen Abstand zwischen Prioritätsblock
 * und Meldungsinhalt.
 */
.tcb-aktuell-prioritaet {
    margin-right: 6px;
}


/**
 * Eigener Bereich für das Prioritäts-Icon.
 *
 * Die rechte Trennlinie grenzt das Symbol vom eigentlichen
 * Meldungsinhalt ab.
 */
.tcb-aktuell-prioritaet-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 48px;

    margin-right: 0.35em;
    padding-right: 16px;

    border-right: 1px solid var(--tcb-aktuell-divider);
}


/**
 * Größe der plugin-eigenen SVG-Prioritätsicons.
 *
 * Die SVG-Dateien verwenden currentColor. Dadurch übernimmt
 * das jeweilige Icon automatisch die Farbe der zugehörigen
 * Prioritätsklasse.
 */
.tcb-aktuell-prioritaet-symbol svg {
    display: block;

    width: 3em;
    height: 3em;
}


/**
 * Priorität "Normal".
 *
 * Übernimmt die normale Textfarbe des Meldungsbalkens.
 */
.tcb-aktuell-prioritaet--normal {
    color: inherit;
}


/**
 * Priorität "Wichtig".
 */
.tcb-aktuell-prioritaet--wichtig {
    color: var(--tcb-aktuell-important);
}


/**
 * Priorität "Dringend".
 */
.tcb-aktuell-prioritaet--dringend {
    color: var(--tcb-aktuell-urgent);
}


/* ==========================================================
   Meldungsinhalt
   ========================================================== */

/**
 * Gemeinsamer Inhaltsblock für:
 *
 * 1. Titel
 * 2. Meldung
 * 3. optionalen Link
 *
 * Der Block erhält den verbleibenden Platz zwischen
 * Prioritätsbereich und Navigation.
 */
.tcb-aktuell-inhalt {
    flex: 1;
    min-width: 0;
}


/**
 * Titel der Meldung.
 *
 * Der Titel steht in einer eigenen Zeile.
 */
.tcb-aktuell-title {
    display: block;

    color: var(--tcb-aktuell-text);
    font-weight: 700;

    white-space: nowrap;

    margin-right: 6px;
    margin-bottom: 4px;
}


/**
 * Eigentliche Meldung.
 *
 * Die Meldung steht ebenfalls in einer eigenen Zeile.
 * Längere Texte dürfen automatisch umbrechen.
 */
.tcb-aktuell-message {
    display: block;

    color: var(--tcb-aktuell-text);

    margin-bottom: 4px;
}


/**
 * Optionaler Link der Meldung.
 *
 * Der Link steht unterhalb des Meldungstextes.
 */
.tcb-aktuell-link {
    display: block;

    color: var(--tcb-aktuell-accent);
    font-weight: 600;

    text-decoration: none;
    white-space: nowrap;
}


/**
 * Hover-Zustand des Meldungslinks.
 */
.tcb-aktuell-link:hover {
    color: var(--tcb-aktuell-text);
    text-decoration: none;
}


/* ==========================================================
   Navigation
   ========================================================== */

/**
 * Navigation für mehrere aktive Meldungen.
 *
 * Sie wird rechts im Meldungsbalken positioniert und durch
 * eine senkrechte Linie vom Meldungsinhalt getrennt.
 */
.tcb-aktuell-navigation {
    position: absolute;

    top: 50%;
    right: 1rem;

    transform: translateY(-50%);

    z-index: 2;

    display: flex;
    align-items: center;
    gap: 8px;

    height: 48px;
    padding-left: 16px;

    border-left: 1px solid var(--tcb-aktuell-divider);
}


/**
 * Vorwärts- und Zurück-Schaltflächen.
 *
 * Normalzustand:
 * transparenter Hintergrund mit Akzentfarbe.
 */
.tcb-aktuell-prev,
.tcb-aktuell-next {
    background: transparent;

    color: var(--tcb-aktuell-accent);

    border: 1px solid var(--tcb-aktuell-accent);
    border-radius: var(--tcb-aktuell-button-radius);
}


/**
 * Hover-Zustand der Navigationsschaltflächen.
 */
.tcb-aktuell-prev:hover,
.tcb-aktuell-next:hover {
    background: var(--tcb-aktuell-accent);
    color: var(--tcb-aktuell-text);
}


/**
 * Sichtbarer Tastaturfokus.
 *
 * :focus-visible sorgt dafür, dass der Fokusrahmen vor allem
 * bei Tastaturbedienung erscheint und nicht unnötig bei
 * normalen Mausklicks.
 */
.tcb-aktuell-prev:focus-visible,
.tcb-aktuell-next:focus-visible {
    outline: 2px solid var(--tcb-aktuell-focus);
    outline-offset: 2px;
}


/**
 * Anzeige der aktuellen Meldungsposition.
 *
 * Beispiel:
 *
 * 1 / 3
 */
.tcb-aktuell-counter {
    color: var(--tcb-aktuell-text);
    font-weight: 600;
}


/* ==========================================================
   Barrierefreiheit: reduzierte Bewegung
   ========================================================== */

/**
 * Hat ein Besucher im Betriebssystem reduzierte Bewegung
 * aktiviert, wird die CSS-Überblendung abgeschaltet.
 *
 * Die JavaScript-Logik berücksichtigt diese Einstellung
 * ebenfalls und verzichtet dann auf die Wechselverzögerung.
 */
@media (prefers-reduced-motion: reduce) {

    .tcb-aktuell-item {
        transition: none;
    }
}


/* ==========================================================
   Responsive Darstellung
   ========================================================== */

/**
 * Grundlegende Darstellung für kleinere Bildschirme.
 *
 * Der Hauptcontainer wird untereinander angeordnet.
 *
 * Hinweis:
 * Dieser Bereich bildet noch nicht die abschließende
 * Responsive-Optimierung des Plugins. Die endgültige
 * Smartphone-/Tablet-Abstimmung erfolgt separat.
 */
@media (max-width: 900px) {

    .tcb-aktuell {
        flex-direction: column;
        align-items: flex-start;

        gap: 8px;
    }

    .tcb-aktuell-item {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .tcb-aktuell-inhalt {
        width: 100%;
    }

    .tcb-aktuell-prioritaet {
        width: 100%;
        margin-right: 0;
    }

    .tcb-aktuell-prioritaet-symbol {
        border: 0;
        padding-right: 0;
        margin-right: 0;
    }

    .tcb-aktuell-prioritaet-symbol svg {
        width: 2.5em;
        height: 2.5em;
    }

    .tcb-aktuell-meldungen {
        width: 100%;
        margin-right: 0;
    }

    /**
     * Das feste Label erhält auf kleineren Bildschirmen
     * statt der rechten eine untere Trennlinie.
     */
    .tcb-aktuell-label {
        border: 0;
        padding-right: 0;
        padding-bottom: 6px;
        height: auto;
    }


    /**
     * Der Titel darf auf kleineren Bildschirmen umbrechen.
     */
    .tcb-aktuell-title {
        white-space: normal;
    }


    /**
     * Auch längere Linktexte dürfen auf kleineren
     * Bildschirmen umbrechen.
     */
    .tcb-aktuell-link {
        white-space: normal;
    }

    .tcb-aktuell-navigation {
        position: relative;
        top: auto;
        right: auto;
        border: 0;
        transform: none;

        flex-basis: 100%;

        margin: 8px auto 0;
        justify-content: center;

        height: auto;
    }
}