/*
 * Banderole fuer die Content Cards (Content Block vendor/gg1-content-cards):
 * petrolfarbenes Verlaufsband ueber die volle Fensterbreite hinter der Kartenreihe.
 * Vorlage ist Figma "Magazin Desktop" > "Drei Einstiegskacheln" (Rectangle 1492, 1920x288,
 * Verlauf #cae7e8 -> rgba(202, 231, 232, .15) nach rechts, 96px unterhalb der Kartenoberkante).
 *
 * Handgeschrieben (kein Build-Output): content-cards.css kommt aus dem Frontend-Repo
 * (teledata-redesign-frontend) und bleibt unveraendert. Die Datei wird nur eingebunden, wenn
 * im Element der Schalter "Banderole" gesetzt ist.
 *
 * Das Band liegt als ::before auf der Section. .content-cards hat in content-cards.css bereits
 * position:relative; die Karten werden per z-index darueber gehoben, weil ein negativer z-index
 * das Band hinter den Seitenhintergrund schieben wuerde.
 *
 * Masse in Prozent der Kartenhoehe (544px), damit das Verhaeltnis aus Figma (Band 288 von 512)
 * auch bei abweichenden Kartenhoehen erhalten bleibt.
 */
.content-cards.content-cards--banderole::before {
    content: "";
    position: absolute;
    top: 18%;
    left: 50%;
    width: 100vw;
    height: 56%;
    transform: translateX(-50%);
    background: linear-gradient(to right, #cae7e8 0%, rgba(202, 231, 232, .15) 100%);
    pointer-events: none;
}

.content-cards.content-cards--banderole .content-cards__items {
    position: relative;
    z-index: 1;
}

/*
 * Unter 1200px stapeln die Karten untereinander (content-cards.css). Ein Band waere dort nur ein
 * Farbstreifen quer ueber eine Karte, deshalb entfaellt es.
 */
@media (max-width: 1200px) {
    .content-cards.content-cards--banderole::before {
        display: none;
    }
}