/* ============================================================
   ATG-Gigerl - Startseite, Header-Video (Layout 52)
   Liegt unter: fileadmin/templates/css/headervideo.css
   Stand: 06.11.2026 - runder Pfeil-Knopf, Knoepfe am Handy so
   breit wie die Zeile, Bildlage nach Zeit (Brennschneid-Clip)

   Video ueber die volle Breite unter dem Kopfbereich, darauf
   OBEN LINKS der Kicker "Seit 1998" mit kurzem Tuerkis-Strich,
   die Ueberschrift, die Zeile "Verkauf - Reparatur - Beratung"
   und zwei Knoepfe. Ab 768 px das 16:9-Video, bis 767 px das
   4:5-Video; der Text steht auf allen Breiten oben.

   Muss NACH tokens.css und design.css geladen werden.

   ------------------------------------------------------------
   WORAN DAS DESIGN HAENGT

   An der Klasse .atg-headervideo. Die schreibt der Layout-CASE
   in autogentechnik.typoscript (Nummer 52) - zusammen mit dem
   Video, dem Standbild und dem Pause-Knopf. Die Dateipfade
   stehen in constants.typoscript unter atg.headervideo.
   Aus dem Backend kommt nur der Text, EIN Text-Element:

       div.atg-headervideo.section
         div.atg-headervideo__medien         aus dem Layout
           picture.atg-headervideo__standbild
           video.atg-headervideo__video
         div.reveal
           div#cNN.frame.frame-type-text
             ... div.frame-inner
                   div.frame-header
                     h1.element-header > span   Feld "Header", Typ H1
                     .element-subheader         Feld "Subheader" = Kicker,
                                                per order UEBER die H1
                   p                          Absatz ohne Link = Zeile
                   p > a + a                  EIN Absatz mit zwei Links
                                              = Knoepfe, der erste gefuellt
         button.atg-headervideo__pause       aus dem Layout

   Die Ueberschrift ist die H1 der Startseite: Groesse der
   ersten Ebene, weiss, OHNE den Unterstrich. Der Kicker steht
   im Quelltext NACH der H1 (so schreibt TYPO3 den Subheader)
   und wird nur fuer das Auge nach oben gezogen - Screenreader
   lesen "Ihr Partner in der Autogentechnik, Seit 1998".

   Der Pause-Knopf und das Einblenden des Videos ueber dem
   Standbild kommen aus js/headervideo.js. Ohne JavaScript
   laeuft das Video trotzdem, nur der Knopf fehlt.

   Alle Masse und Farben stehen in tokens.css (--atg-hv-*).
   Selektoren beginnen mit ".atg-", nie mit ".section" - sonst
   haelt TYPO3 die Datei fuer Assembler.
   ============================================================ */


/* ============================================================
   1 - BAND
   ============================================================

   Hoehe aus dem Seitenverhaeltnis des Videos, gedeckelt auf
   Fensterhoehe minus Kopfbereich, nie unter der Mindesthoehe.
   Als min-height, nicht als height: wird der Text einmal
   hoeher als das Band, waechst das Band mit. Abgeschnitten
   wird nur das Video in __medien.                            */

.atg-headervideo.section {
    position: relative;
    isolation: isolate;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: var(--atg-hv-align);
    box-sizing: border-box;
    min-height: max(var(--atg-hv-min-h), min(var(--atg-hv-ratio-h), var(--atg-hv-max-h)));
    margin: 0;
    padding-block: var(--atg-hv-pad-y);
    background-color: var(--atg-hv-band);
    color: var(--atg-hv-ink);
}

/* Theme-Luft des Elements weg - die Luft steht am Band */
.atg-headervideo .frame {
    padding-block: 0;
}

.atg-headervideo .reveal {
    position: relative;
    z-index: 1;
}


/* ============================================================
   2 - VIDEO, STANDBILD, VERLAUF
   ============================================================ */

.atg-headervideo__medien {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.atg-headervideo__standbild,
.atg-headervideo__standbild img,
.atg-headervideo__video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Bildlage: normal mittig. Waehrend der Zeitbereiche aus
   data-unten (js/headervideo.js setzt dann --unten) unten
   buendig - beim Brennschneid-Clip am Anfang sonst keine Funken.
   Das Standbild ist das erste Bild dieses Clips und steht
   deshalb gleich. */
.atg-headervideo__standbild img,
.atg-headervideo__video {
    object-position: var(--atg-hv-lage);
}

.atg-headervideo--unten :is(.atg-headervideo__standbild img, .atg-headervideo__video) {
    object-position: var(--atg-hv-lage-unten);
}

/* Mit JavaScript liegt das Video unsichtbar ueber dem Standbild
   und blendet erst ein, wenn es wirklich laeuft - kein schwarzes
   Aufblitzen beim Laden.
   Zurueck in die Mitte gleitet das Bild (waehrend der
   Ueberblendung), nach unten springt es ohne Uebergang - das
   passiert genau am harten Schnitt am Schleifenanfang. */
.atg-headervideo--js .atg-headervideo__video {
    opacity: 0;
    transition: opacity var(--atg-hv-fade),
                object-position var(--atg-hv-lage-zeit);
}

.atg-headervideo--js.atg-headervideo--unten .atg-headervideo__video {
    transition: opacity var(--atg-hv-fade);
}

.atg-headervideo--laeuft .atg-headervideo__video {
    opacity: 1;
}

.atg-headervideo__medien::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--atg-hv-veil);
    pointer-events: none;
}


/* ============================================================
   3 - TEXT
   ============================================================ */

.atg-headervideo .frame-inner {
    max-width: var(--atg-hv-text-max);
}

.atg-headervideo .frame-header {
    margin: 0;
}

/* Kopf als Spalte, damit der Kicker (Subheader) per order
   ueber die H1 rutschen kann. */
.atg-headervideo .frame-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Kicker "Seit 1998": Feld "Subheader". TYPO3 schreibt ihn als
   eigene Ueberschrift (h2) - alle Werte stehen deshalb hier
   ausdruecklich, sonst greift die Ebene 2 aus design.css. */
.atg-headervideo .frame-header .element-subheader {
    order: -1;
    display: flex;
    align-items: center;
    gap: var(--atg-hv-kicker-igap);
    margin: 0 0 var(--atg-hv-kicker-gap);
    padding: 0;
    font-size: var(--atg-hv-kicker-fs);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: var(--atg-hv-kicker-track);
    text-transform: uppercase;
    color: var(--atg-hv-kicker);
}

/* der kurze Tuerkis-Strich davor */
.atg-headervideo .frame-header .element-subheader::before {
    content: "";
    flex: none;
    width: var(--atg-hv-kicker-line-w);
    height: var(--atg-hv-kicker-line-h);
    background-color: var(--atg-hv-kicker-line);
}

.atg-headervideo .frame-header .element-subheader > span {
    padding: 0;
    background-image: none;
}

/* Ueberschrift: Groesse der ersten Ebene (--atg-h1-fs aus
   design.css), weiss, ohne Unterstrich. Gilt mit und ohne
   Header Class h1. */
.atg-headervideo .frame-header .element-header {
    margin: 0;
    padding-bottom: 0;
    font-size: var(--atg-h1-fs);
    font-weight: 700;
    line-height: var(--atg-hv-h1-lh);
    color: var(--atg-hv-ink);
}

.atg-headervideo .frame-header .element-header > span {
    padding-bottom: 0;
    background-image: none;
}

.atg-headervideo .frame-inner > p {
    margin: 0;
}

/* Absatz ohne Link: die Zeile "Verkauf - Reparatur - Beratung" */
.atg-headervideo .frame-inner > p:not(:has(a)) {
    margin-top: var(--atg-hv-sub-gap);
    font-size: var(--atg-hv-sub-fs);
    font-weight: 700;
    line-height: var(--atg-hv-sub-lh);
    letter-spacing: var(--atg-hv-sub-ls);
    color: var(--atg-hv-sub);
}


/* ============================================================
   4 - KNOEPFE
   ============================================================

   Beide Links stehen in EINEM Absatz: der erste wird der
   gefuellte Knopf mit Pfeil, der zweite der Umriss-Knopf.
   Beim Darueberfahren gehen beide auf Weiss, wie auf den
   anderen dunklen Baendern.

   Das !important auf der Schrift ist noetig, weil design.css
   "main a { color: ... !important }" setzt.                  */

.atg-headervideo .frame-inner > p:has(> a) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--atg-hv-btn-gap);
    margin-top: var(--atg-hv-cta-gap);
}

.atg-headervideo .frame-inner > p > a {
    display: inline-flex;
    flex: var(--atg-hv-btn-flex);
    align-items: center;
    justify-content: center;
    gap: var(--atg-hv-ico-gap);
    height: var(--atg-hv-btn-h);
    padding-inline: var(--atg-hv-btn-pad);
    box-sizing: border-box;
    border: var(--atg-hv-btn-line-w) solid transparent;
    border-radius: var(--atg-hv-btn-radius);
    font-size: var(--atg-hv-btn-fs);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background-color var(--atg-hv-hover-time),
                border-color var(--atg-hv-hover-time),
                color var(--atg-hv-hover-time);
}

.atg-headervideo .frame-inner > p > a:first-of-type {
    background-color: var(--atg-hv-btn-bg);
    color: var(--atg-hv-btn-fg) !important;
}

.atg-headervideo .frame-inner > p > a:first-of-type::after {
    content: "";
    flex: none;
    width: var(--atg-hv-ico);
    height: var(--atg-hv-ico);
    background-color: currentColor;
    -webkit-mask: var(--atg-hv-ico-next) center / contain no-repeat;
            mask: var(--atg-hv-ico-next) center / contain no-repeat;
}

.atg-headervideo .frame-inner > p > a:not(:first-of-type) {
    background-color: transparent;
    border-color: var(--atg-hv-btn-ghost);
    color: var(--atg-hv-btn-ghost) !important;
}

.atg-headervideo .frame-inner > p > a:hover,
.atg-headervideo .frame-inner > p > a:focus-visible {
    background-color: var(--atg-hv-btn-hover);
    border-color: var(--atg-hv-btn-hover);
    color: var(--atg-hv-btn-fg) !important;
}

.atg-headervideo .frame-inner > p > a:focus-visible {
    outline: var(--atg-hv-focus);
    outline-offset: var(--atg-hv-focus-off);
}

/* Runder Knopf mit Pfeil nach unten. Der Layout-CASE schreibt ihn
   ans Ende des Bandes; js/headervideo.js haengt ihn in die
   Knopfzeile. Dort bekommt er die Optik des Umriss-Knopfs (er ist
   nicht der erste Link) und hier Form und Pfeil. Ohne JavaScript
   bleibt er an seinem Platz und ist ausgeblendet. */
.atg-headervideo > .atg-headervideo__weiter {
    display: none;
}

.atg-headervideo .frame-inner > p > a.atg-headervideo__weiter {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--atg-hv-weiter);
    height: var(--atg-hv-weiter);
    padding: 0;
    border-radius: 50%;
}

.atg-headervideo .frame-inner > p > a.atg-headervideo__weiter::before {
    content: "";
    width: var(--atg-hv-weiter-ico);
    height: var(--atg-hv-weiter-ico);
    background-color: currentColor;
    -webkit-mask: var(--atg-hv-weiter-ico-img) center / contain no-repeat;
            mask: var(--atg-hv-weiter-ico-img) center / contain no-repeat;
}

/* Ziel des runden Knopfs: steht direkt unter dem Band. Der
   Abstand oben haelt es unter dem stehenden Kopfbereich. */
.atg-headervideo__ziel {
    display: block;
    scroll-margin-top: var(--atg-hv-kopf-h);
}

/* bis 767 px: beide Knoepfe NEBENEINANDER und zusammen genau so
   breit wie die Zeile "Verkauf - Reparatur - Service"
   (Festlegung 06.11.2026), der runde Knopf rechts daneben.
   Dafuer wird .frame-inner ein Raster: die erste Spalte ist so
   breit wie die Zeile (max-content), die zweite nimmt den Rest.
   Kopf und Ueberschrift laufen ueber beide Spalten - weil die
   zweite Spalte "1fr" ist, zaehlen sie bei der Breite der ersten
   nicht mit. Die Knopfzeile steht in der ersten Spalte und
   zaehlt dank "contain: inline-size" bei deren Breite ebenfalls
   nicht mit - sonst machten die Knoepfe die Spalte breiter als
   die Zeile. Die beiden Knoepfe teilen sich die Breite (flex),
   Schrift und Innenabstand sind dafuer hier kleiner (tokens.css).
   Der runde Knopf haengt rechts aussen an der Knopfzeile.        */
@media (max-width: 767.98px) {
    .atg-headervideo .frame-inner {
        display: grid;
        grid-template-columns: max-content 1fr;
        align-items: start;
    }

    .atg-headervideo .frame-inner > .frame-header {
        grid-column: 1 / -1;
    }

    .atg-headervideo .frame-inner > p {
        grid-column: 1;
    }

    .atg-headervideo .frame-inner > p:has(> a) {
        position: relative;
        flex-wrap: nowrap;
        contain: inline-size;
    }

    .atg-headervideo .frame-inner > p > a:not(.atg-headervideo__weiter) {
        min-width: 0;
    }

    .atg-headervideo .frame-inner > p > a.atg-headervideo__weiter {
        position: absolute;
        inset-block: 0;
        left: calc(100% + var(--atg-hv-weiter-gap));
        margin-block: auto;
    }
}


/* ============================================================
   5 - PAUSE-KNOPF
   ============================================================

   Video, das laenger als 5 Sekunden von selbst laeuft, muss
   sich anhalten lassen (Barrierefreiheit). Auf allen Breiten
   rechts unten auf der Inhaltskante - der Text steht oben.
   Ohne JavaScript ausgeblendet.                                */

.atg-headervideo__pause {
    position: absolute;
    z-index: 2;
    top: var(--atg-hv-pause-top);
    right: var(--atg-hv-pause-x);
    bottom: var(--atg-hv-pause-bottom);
    display: none;
    place-items: center;
    width: var(--atg-hv-pause);
    height: var(--atg-hv-pause);
    margin: 0;
    padding: 0;
    border: var(--atg-hv-btn-line-w) solid var(--atg-hv-pause-line);
    border-radius: 50%;
    background-color: var(--atg-hv-pause-bg);
    color: var(--atg-hv-ink);
    cursor: pointer;
    transition: background-color var(--atg-hv-hover-time),
                border-color var(--atg-hv-hover-time);
}

.atg-headervideo--js .atg-headervideo__pause {
    display: grid;
}

.atg-headervideo__pause::before {
    content: "";
    width: var(--atg-hv-pause-ico);
    height: var(--atg-hv-pause-ico);
    background-color: currentColor;
    -webkit-mask: var(--atg-hv-ico-pause) center / contain no-repeat;
            mask: var(--atg-hv-ico-pause) center / contain no-repeat;
}

.atg-headervideo__pause[data-angehalten]::before {
    -webkit-mask-image: var(--atg-hv-ico-play);
            mask-image: var(--atg-hv-ico-play);
}

.atg-headervideo__pause:hover,
.atg-headervideo__pause:focus-visible {
    border-color: var(--atg-hv-ink);
    background-color: var(--atg-hv-pause-hover);
}

.atg-headervideo__pause:focus-visible {
    outline: var(--atg-hv-focus);
    outline-offset: var(--atg-hv-focus-off);
}


/* ============================================================
   6 - KEIN WEISSER RAND UEBER DEM VIDEO
   ============================================================

   Auf der Startseite steht ueber dem ersten Block ein weisser
   Rand: #inhalt hat oben Aussenabstand (design.css), und das
   leere .headerimage darueber unten (0,5 % der Breite). Steht
   das Header-Video direkt unter der (ausgeblendeten)
   Brotkrumen-Zeile, faellt beides weg - das Video schliesst
   ohne Spalt an den Kopfbereich an.                           */

#inhalt:has(.breadcrumps + .atg-headervideo) {
    margin-top: 0;
}

.page:has(.breadcrumps + .atg-headervideo) .headerimage {
    margin-bottom: 0;
}