/* ===========================================================================
   id4web - Kopfbereich der Unterseiten (Vorschlag, optional)
   ---------------------------------------------------------------------------
   Eigenstaendige Datei mit EIGENER Schaltzeile, unabhaengig von aufwertung.css.

   VOLLSTAENDIG RUECKGAENGIG MACHEN:
   In Configuration/Sets/Id4web/setup.typoscript die Zeile
       id4webPremiumHeader = EXT:id4web/Resources/Public/Css/premium-header.css
   entfernen oder auskommentieren und den Cache leeren.

   Hinweis: Die Seiten haben KEINE hinterlegten Seitenbilder (pages.media ist
   ueberall leer). Der Kopfbereich wird daher rein ueber Farbe, Typografie und
   Raum aufgewertet - ohne neue Bilder und ohne redaktionelle Arbeit.

   Betroffen ist ausschliesslich das Kopf-Element im Border-Bereich
   (".body-bg > .frame.frame-type-header"). Ueberschriften im Seiteninhalt
   bleiben unberuehrt.
   =========================================================================== */

/* --- BAND --- */
.body-bg > .frame.frame-type-header {
    position: relative;
    overflow: hidden;
    padding-top: 62px;
    padding-bottom: 62px;
}

/* Diagonaler Verlauf statt Vollton - gibt dem Band Tiefe */
.body-bg > .frame.frame-type-header.frame-background-secondary {
    background: linear-gradient(118deg, #1a7099 0%, #146088 46%, #0e4562 100%) !important;
}

.body-bg > .frame.frame-type-header.frame-background-primary {
    background: linear-gradient(118deg, #f4602c 0%, #f14b11 46%, #c83d0c 100%) !important;
}

/* Sehr dezente Lichtkante oben, damit das Band nicht flach auf der
   Navigationsleiste aufsitzt */
.body-bg > .frame.frame-type-header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.16);
    pointer-events: none;
}

/* --- TYPOGRAFIE --- */
.body-bg > .frame.frame-type-header .frame-header {
    position: relative;
    z-index: 1;
}

/* Linksbuendig - liegt damit auf einer Achse mit dem Seiteninhalt darunter.
   "!important" ist noetig, weil Bootstraps Hilfsklasse .text-center selbst
   !important setzt und die Redaktion sie auf den Kopfelementen gesetzt hat. */
.body-bg > .frame.frame-type-header .element-header,
.body-bg > .frame.frame-type-header .element-subheader {
    text-align: left !important;
}

.body-bg > .frame.frame-type-header .element-header {
    max-width: 24ch;
}

/* Kein Akzentstrich zwischen Titel und Unterzeile - auf Wunsch entfernt,
   das Band baut dadurch rund 30px Hoehe ab. Der Abstand zur Unterzeile steht
   jetzt ausdruecklich hier, weil er vorher vom Rand des Strichs kam. */
.body-bg > .frame.frame-type-header .element-header {
    margin-bottom: 14px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.12;
}

.body-bg > .frame.frame-type-header .element-subheader {
    max-width: 46ch;
    font-weight: 400;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.88);
}

/* --- GROESSEN --- */
@media (min-width: 768px) {
    .body-bg > .frame.frame-type-header .element-header {
        font-size: 40px;
    }
}

@media (min-width: 1200px) {
    .body-bg > .frame.frame-type-header {
        padding-top: 78px;
        padding-bottom: 78px;
    }

    .body-bg > .frame.frame-type-header .element-header {
        font-size: 54px;
    }
}

@media (max-width: 767.98px) {
    .body-bg > .frame.frame-type-header {
        padding-top: 42px;
        padding-bottom: 42px;
    }

    .body-bg > .frame.frame-type-header .element-header,
    .body-bg > .frame.frame-type-header .element-subheader {
        max-width: none;
    }

    .body-bg > .frame.frame-type-header .element-header {
        margin-bottom: 10px;
    }
}