/*
 * Hero der Startseite — mitgelieferte Grundstile.
 *
 * Reines CSS, kein Build noetig. Alle Werte ueber var() mit Rueckfallwert,
 * damit Projektangaben immer gewinnen — unabhaengig von der Ladereihenfolge.
 *
 * DIE GESTALTUNG FOLGT docs/entwuerfe/startseite.html
 * Tiefgruener Schleier ueber dem ganzen Bild, weisser Text direkt darauf,
 * vier Einstiegskacheln als durchscheinende Felder. Vorgabe Axel, 20.08.2026.
 *
 * ⚠ EIN ERSTER ANLAUF setzte hier die Milchglaskarte der Unterseiten ein —
 *   dieselbe Loesung, die dort am 20.08.2026 gewaehlt worden war. Sie ist
 *   verworfen: die Karte wuchs mit vier Kacheln auf 832 x 571 px und liess
 *   vom Foto nur einen Streifen uebrig. 🛠 Genau so gemessen. Nicht
 *   wiederholen; die Startseite folgt ihrem Entwurf.
 *
 * NUR EINE FASSUNG FUER BEIDE FARBMODI
 * Der Schleier ist in beiden Modi dunkelgruen — wie beim Zitatband
 * (.ot-layout-band). Eine helle Fassung gaebe es hier gar nicht, auf die sich
 * ein zweiter Satz Farben beziehen koennte. Alle Werte unten sind gegen den
 * HELLSTEN Punkt des Schleiers gerechnet (Deckkraft 0,90 ueber einem weissen
 * Motiv, also #214E42) — der unguenstigste Fall, unabhaengig vom Bild:
 *
 *   #FFFFFF   9,28:1   Ueberschrift, Kacheltitel
 *   #DCE8DA   7,34:1   Einstiegssatz
 *   #D2E8AE   7,02:1   Dachzeile, Akzent
 *   #D3E2D4   5,36:1   Untertitel der Kacheln (auf deren eigenem Grund)
 *   Kachelrand rgba(255,255,255,.5)  4,00:1 nach aussen, 3,11:1 nach innen
 *                                    — WCAG 1.4.11 verlangt 3:1 zu BEIDEN
 *                                    Nachbarflaechen, nicht nur zu einer.
 */

.cb-herostart {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    /* Der Grund, nicht das Bild. Steht auch, solange das Bild noch laedt. */
    background: #083A2D;

    display: grid;
    align-content: center;

    /* Bis zur Unterkante des Fensters, nicht weiter. Darueber steht genau
       der einzeilige, als Ganzes klebende Kopfbereich. */
    min-block-size: clamp(32rem, 82vw, calc(100svh - var(--sk-header-height, 4.9rem)));
}

/* ---------------------------------------------------------
   Buehne
   --------------------------------------------------------- */

/* ⚠ KEIN z-index an dieser Huelle. Er erzeugte einen Stapelkontext, und der
     Bildnachweis kaeme nicht mehr darueber. Bildrechte sind kein Detail. */
.cb-herostart-buehne {
    position: absolute;
    inset: 0;
}

.cb-herostart-bild {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;

    /* cover statt contain: seitlich beschneiden ist richtig,
       verzerren waere falsch. */
    object-fit: cover;
    object-position: center;

    opacity: 0;

    /* Sanfte Ueberblendung.
     *
     * ⚠ Der Wert steht ZWEIMAL: hier und als UEBERBLENDUNG in
     *   Build/Default/src/js/Components/HeroStart.js. Das Skript braucht ihn,
     *   um das ausgeblendete Bild erst DANACH abzuraeumen. Wer hier aendert,
     *   aendert dort mit — sonst blitzt beim Wechsel der Grund durch.
     */
    transition: opacity 2.2s cubic-bezier(.4, 0, .2, 1);
}

.cb-herostart-bild.is-sichtbar {
    opacity: 1;
}

/* Echte Ueberblendung, kein gemeinsames Verblassen.
 *
 * ⚠ Waeren beide Bilder auf derselben Ebene, liefe das alte von 1 auf 0,
 *   waehrend das neue von 0 auf 1 laeuft — in der Mitte waeren beide
 *   halbdurchsichtig und der dunkelgruene Grund schiene durch. Der Wechsel
 *   bekaeme genau in der Mitte einen dunklen Schlag.
 *
 *   Deshalb blendet das neue Bild UEBER dem alten ein, und das alte bleibt
 *   deckend liegen, bis die Blende durch ist.
 */
.cb-herostart-bild.is-oben {
    z-index: 1;
}

/* Langsame Fahrt ins Bild. Sie laeuft nur auf dem sichtbaren Bild und nur,
   solange der Wechsel laeuft — deshalb haengt sie an einer Klasse, die das
   Skript setzt, und nicht an .is-sichtbar.

   12 s bei 8 s Standzeit: die Fahrt ist beim Wechsel noch unterwegs. Liefe sie
   vorher aus, staende das Bild jedes Mal kurz still, bevor es geht. */
.cb-herostart-bild.is-fahrt {
    animation: cb-herostart-fahrt 12s linear forwards;
}

/* Angehalten heisst angehalten — auch die Fahrt. Sonst bliebe der Balken
   stehen und das Bild zoege weiter; die Taste haette dann nur die Haelfte
   dessen getan, was ihre Beschriftung verspricht. */
.cb-herostart[data-pausiert="1"] .cb-herostart-bild.is-fahrt {
    animation-play-state: paused;
}

@keyframes cb-herostart-fahrt {
    from { transform: scale(1.1); }
    to   { transform: scale(1); }
}

/* Schleier.
 *
 * Er IST die Lesbarkeitsgrundlage des gesamten Textes — deshalb eine eigene
 * Ebene und deshalb so deckend. Nach oben hin minimal durchlaessiger, damit
 * das Motiv oben noch als Motiv erkennbar bleibt und die Flaeche nicht wie
 * eine eingefaerbte Platte wirkt.
 *
 * ⚠ Die 0,90 am oberen Ende sind die Rechengrundlage aller Farbwerte im Kopf
 *   dieser Datei. Wer sie senkt, senkt jeden Kontrast mit — dann sind die
 *   Zahlen dort neu zu rechnen, nicht bloss anzupassen.
 */
.cb-herostart-schleier {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(8, 58, 45, .98) 0%,
        rgba(8, 58, 45, .94) 45%,
        rgba(8, 58, 45, .90) 100%
    );
}

/* ---------------------------------------------------------
   Fortschrittsbalken und Bildnachweis
   --------------------------------------------------------- */

.cb-herostart-balken {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 3;
    block-size: 3px;
    background: rgba(255, 255, 255, .22);
}

.cb-herostart-balken-fuellung {
    display: block;
    block-size: 100%;
    inline-size: 0;
    background: #D2E8AE;
}

/* ⚠ HIER KEIN inset-block-end. Das Atom dreht seine Schreibrichtung
 *   (writing-mode: vertical-rl), und Chrome loest logische Abstaende an der
 *   Schreibrichtung DES ELEMENTS auf: block-end zeigt dann nach LINKS.
 *   🛠 Gemessen 20.08.2026: der Nachweis stand mit left = 48,8 px am linken
 *   Bildrand quer ueber dem Text — genau der Wert, der als "unten" gemeint
 *   war. Physische Eigenschaft, wie im Atom selbst.
 */
.cb-herostart .prs-image-credit {
    z-index: 4;
    bottom: 6px;
}

/* ---------------------------------------------------------
   Textbereich
   --------------------------------------------------------- */

.cb-herostart-innen {
    position: relative;
    z-index: 2;
    padding-block: clamp(3rem, 11vw, 7.5rem) clamp(2.5rem, 6vw, 4.5rem);
}

/* Nur ein Traeger fuer das Textmass — keine eigene Flaeche. Der Entwurf
   setzt den Text unmittelbar auf das Bild. */
.cb-herostart-karte {
    max-inline-size: min(56rem, 100%);
}

/* Auf schmalen Geraeten laeuft der Bildnachweis senkrecht am rechten Rand.
   Ohne diesen Abstand liefen die Kacheln darunter durch und die Angabe waere
   auf hellem Motiv nicht mehr lesbar. Dieselbe Vorsorge wie beim Hero der
   Unterseiten (Customer/4-Zones/_Hero.scss). */
@media (max-width: 767.98px) {
    .cb-herostart-karte {
        margin-inline-end: 1.75rem;
    }
}

.cb-herostart-dachzeile {
    margin: 0;
    font-family: var(--bs-font-monospace);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #D2E8AE;
}

.cb-herostart-titel {
    margin-block: .9rem 0;
    max-inline-size: 17ch;
    font-size: clamp(2.1rem, 6.6vw, 4.6rem);
    line-height: 1.04;
    letter-spacing: -.02em;
    color: #FFF;
    text-wrap: balance;
}

/* Der hervorgehobene Teil — kursiv wie im Entwurf. KEINE zweite Farbe: auf
   dem Schleier traegt schon die Dachzeile das Gruen, und ein zweiter farbiger
   Block in der Ueberschrift naehme ihr die Ruhe. */
.cb-herostart-titel em {
    font-style: italic;
}

.cb-herostart-lead {
    margin-block: 1.2rem 0;
    max-inline-size: 52ch;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #DCE8DA;
}

/* ---------------------------------------------------------
   Einstiegskacheln
   --------------------------------------------------------- */

.cb-herostart-einstieg-titel {
    margin-block: 2rem 0;
    font-family: var(--bs-font-monospace);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #D2E8AE;
}

.cb-herostart-einstiege {
    list-style: none;
    margin: .85rem 0 0;
    padding: 0;
    display: grid;
    gap: .7rem;
    align-items: stretch;
}

@media (min-width: 576px) {
    .cb-herostart-einstiege {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .cb-herostart-einstiege {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Die Kachel ist das <li>, nicht der Verweis darin.

   Grund steht im Template: f:link.typolink laesst bei einem Ziel, das es
   nicht aufloesen kann, das <a> weg. Haengt das Aussehen daran, verliert die
   Kachel Flaeche und Schriftfarbe und wird unlesbar (gemessen 13.09.2026,
   1,25:1).

   ⚠ Hier stand bis zum selben Tag noch eine Rueckfallregel fuer den Fall
     „Kachel ohne <a>". Die ist entfallen: das Template gibt eine Kachel seit
     der Vorgabe von Axel nur noch aus, WENN ihr Ziel erreichbar ist — ein <li>
     ohne Verweis entsteht nicht mehr. Die Trennung bleibt trotzdem, sie haelt
     Aussehen und Verweis auseinander. */
.cb-herostart-kachel {
    display: flex;
    block-size: 100%;

    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 3px;

    color: #FFF;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

/* Der Verweis fuellt die Kachel, damit die ganze Flaeche anklickbar bleibt
   und der Innenabstand zum Ziel gehoert. */
.cb-herostart-kachel-flaeche {
    display: flex;
    align-items: center;
    gap: .85rem;
    inline-size: 100%;

    /* 44 px ist die kleinste Zielflaeche, die WCAG 2.5.8 als ausreichend
       ansieht. Hier mehr, weil zwei Zeilen Text hineingehoeren. */
    min-block-size: 60px;
    padding: .85rem 1rem;

    color: inherit;
    text-decoration: none;
}

.cb-herostart-kachel:hover,
.cb-herostart-kachel:has(.cb-herostart-kachel-flaeche:focus-visible) {
    background: rgba(255, 255, 255, .2);
    border-color: #FFF;
    color: #FFF;
    transform: translateY(-2px);
}

.cb-herostart-kachel-icon {
    flex: none;
    font-size: 1.3rem;
    line-height: 1;
    color: #D2E8AE;
}

.cb-herostart-kachel-text {
    font-family: var(--bs-font-sans-serif);
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.2;
}

.cb-herostart-kachel-text small {
    display: block;
    margin-block-start: .15rem;
    font-weight: 400;
    font-size: .8rem;
    letter-spacing: 0;
    color: #D3E2D4;
}

/* ---------------------------------------------------------
   Nebenweg und Steuerung
   --------------------------------------------------------- */

.cb-herostart-nebenweg {
    margin-block: 1.25rem 0;
}

.cb-herostart-nebenweg-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;

    /* WCAG 2.5.8 — ein Verweis in einer eigenen Zeile ist ein Ziel wie jedes
       andere. Ohne diese Zeile waere er 22 px hoch. */
    min-block-size: 24px;

    font-family: var(--bs-font-sans-serif);
    font-weight: 600;
    font-size: .95rem;
    color: #FFF;
    text-decoration-color: #FFF;
    text-decoration-thickness: 1px;
    text-underline-offset: .25em;
}

.cb-herostart-nebenweg-link:hover {
    color: #D2E8AE;
    text-decoration-color: #D2E8AE;
}

.cb-herostart-nebenweg-pfeil {
    font-size: .8rem;
    line-height: 1;
}

.cb-herostart-steuerung {
    margin-block: 2.25rem 0;
}

.cb-herostart-pause {
    display: inline-flex;
    align-items: center;
    gap: .5rem;

    /* WCAG 2.5.8: mindestens 44 px in beide Richtungen. */
    min-block-size: 44px;
    padding: .5rem .95rem;

    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 3px;

    font-family: var(--bs-font-sans-serif);
    font-size: .8rem;
    color: #FFF;
    cursor: pointer;
}

.cb-herostart-pause:hover {
    background: rgba(255, 255, 255, .2);
    border-color: #FFF;
}

.cb-herostart-pause-icon {
    font-size: .8rem;
    line-height: 1;
    color: #D2E8AE;
}

/* Immer genau ein Symbol sichtbar. Das Umschalten macht CSS ueber
   data-pausiert, nicht das Skript ueber innerHTML — so bleibt die Ikone
   das, was der ViewHelper geliefert hat. */
.cb-herostart-pause-icon-fortsetzen,
.cb-herostart-pause[data-pausiert="1"] .cb-herostart-pause-icon-anhalten {
    display: none;
}

.cb-herostart-pause[data-pausiert="1"] .cb-herostart-pause-icon-fortsetzen {
    display: inline;
}

/* ---------------------------------------------------------
   Auftritt der Textzeilen
   ---------------------------------------------------------
   Gestaffelt von oben nach unten, einmalig beim Aufbau der Seite. Kein
   Scroll-Ausloeser: der Hero steht ohnehin im Bild.
*/

.prs-auftritt {
    animation: prs-auftritt .7s cubic-bezier(.22, .61, .36, 1) both;
}

.prs-auftritt-1 { animation-delay: .05s; }
.prs-auftritt-2 { animation-delay: .16s; }
.prs-auftritt-3 { animation-delay: .27s; }
.prs-auftritt-4 { animation-delay: .38s; }

@keyframes prs-auftritt {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------
   Reduzierte Bewegung
   ---------------------------------------------------------
   Fahrt und Auftritt entfallen ganz. Der BILDWECHSEL wird zusaetzlich im
   Skript unterbunden — CSS allein koennte ihn nicht anhalten, es wuerde nur
   die Ueberblendung entfernen und die Bilder haerter springen lassen.
*/

@media (prefers-reduced-motion: reduce) {
    .cb-herostart-bild {
        transition: none;
    }

    .cb-herostart-bild.is-fahrt {
        animation: none;
    }

    .prs-auftritt {
        animation: none;
    }
}