/*
=====================================================
 EF22 FRAMEWORK
 FRAMEWORK.CSS
 Version 2.7
=====================================================
*/

/* ==========================================
   HTML
========================================== */

html {

    scroll-behavior: smooth;

    box-sizing: border-box;

}

*,
*::before,
*::after {

    box-sizing: inherit;

}

/* ==========================================
   BODY
========================================== */

body {

    margin: 0;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    background: var(--color-background-dark);

    color: var(--color-text-on-dark);

    font-family: var(--font-family);

    font-size: var(--font-size-md);

    line-height: var(--line-height);

}

/* ==========================================
   MEDIEN
========================================== */

img {

    display: block;

    max-width: 100%;

    height: auto;

}

a {

    color: inherit;

    text-decoration: none;

    transition: var(--transition-fast);

}

button {

    font: inherit;

    cursor: pointer;

}

/* ==========================================
   CONTAINER
========================================== */

.container {

    width: min(
        100% - (2 * var(--space-xl)),
        var(--container-width)
    );

    margin-inline: auto;

}

/* ==========================================
   TEXTABSCHNITTE AM DESKTOP (ab 900 px)
   Abschnitte, die nur aus Text bestehen
   (Überschrift, Text, Buttons, Vorschau-Karte),
   stehen als mittige Spalte – wie am Handy,
   nur in der Mitte statt links (entschieden
   03.11., Variante A).
   Breite Bausteine bleiben breit: Karten,
   Story (Text mit Foto), Kalender, Highlight-
   Karussell, Zugkönig-Motto, Download-Karten.
   Neuer breiter Baustein? Hier in die Liste.
   Smartphone und Tablet: unverändert.
========================================== */

@media (min-width: 900px) {

    section:not(.hero-section) > .container:not(:has(
        .card-grid,
        .story,
        .story-closing,
        #calendar,
        .highlights-track,
        .king-motto,
        .download-grid
    )) {

        width: min(
            100% - (2 * var(--space-xl)),
            var(--container-width-text)
        );

    }

}

/* ==========================================
   BILDVARIANTEN
   <picture> (framework/bilder.php) soll das
   Layout nicht verändern: das <img> darin
   verhält sich wie vorher ohne Hülle.
========================================== */

picture {

    display: contents;

}

/* ==========================================
   MAIN
========================================== */

main {

    flex: 1;

    display: flex;

    flex-direction: column;

}


/* ==========================================
   KOMPONENTENBEREICH
========================================== */

.component-section {

    position: relative;

    width: 100%;

    padding:
        var(--space-xl)
        0;

    background:
        var(--color-background-medium);

    color:
        var(--color-text-on-dark);

}


/* ==========================================
   HELLER INHALTSBEREICH
========================================== */

.content-section {

    position: relative;

    width: 100%;

    padding:
        var(--space-3xl)
        0;

    background:
        var(--color-background-light);

    color:
        var(--color-text-on-light);

}


/* ==========================================
   SECTION HEADER
========================================== */

.section-header {

    display: flex;

    flex-direction: column;

    gap: var(--space-md);

}

/* h1 = Hauptüberschrift der Seite (Impressum,
   Datenschutz, Downloads) – sieht aus wie h2 */
.section-header h1,
.section-header h2 {

    margin: 0;

    color: inherit;

    font-size:
        var(--font-size-2xl);

    line-height: 1.25;

}

.section-header p {

    max-width: 760px;

    margin: 0;

    color: inherit;

}


/* ==========================================
   SECTION KICKER
========================================== */

.section-kicker {

    color:
        var(--color-primary);

    font-size:
        var(--font-size-sm);

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;

}


/* ==========================================
   HELLER INHALTSBEREICH
========================================== */

.content-section .section-header p {

    color:
        var(--color-text-muted-on-light);

}

/* Grün auf Weiß: dunkleres Grün, damit es lesbar bleibt */
.content-section .section-kicker {

    color:
        var(--color-primary-on-light);

}


/* ==========================================
   DUNKLER KOMPONENTENBEREICH
========================================== */

.component-section .section-header p {

    color:
        var(--color-text-muted-on-dark);

}


/* ==========================================
   FLIESSTEXT UNTER EINER SECTION-ÜBERSCHRIFT
========================================== */

.section-text {

    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 760px;
    margin-top:
        var(--space-lg);

}

.section-text p {

    margin: 0;

}

/* Zwischenüberschriften im Fließtext (h2 unter der
   h1 einer Seite, h3 darunter) – gleiche Optik */
.section-text h2,
.section-text h3 {

    margin:
        var(--space-lg)
        0
        0;
    color:
        var(--color-text-on-light);
    font-size:
        var(--font-size-lg);
    line-height: 1.3;

}

.component-section .section-text h2,
.component-section .section-text h3 {

    color:
        var(--color-text-on-dark);

}

.section-text ul {

    margin: 0;
    padding-left: 1.25em;

}

.section-text a {

    color:
        var(--color-primary-dark);
    text-decoration: underline;

}

.content-section .section-text {

    color:
        var(--color-text-muted-on-light);

}

.content-section .section-text a {

    color:
        var(--color-primary-on-light);

}

.component-section .section-text {

    color:
        var(--color-text-muted-on-dark);

}


/* ==========================================
   E-MAIL-ADRESSE OHNE LINK
   Das @ wird per CSS eingesetzt und steht nicht
   im HTML. So macht das Handy keinen Link daraus,
   und einfache Adress-Sammler finden sie nicht.
   Verwendung: name<span class="email-at"></span>domain.de
========================================== */

.email-at::before {

    content: "@";

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 480px) {

    .container {

        width: min(
            100% - (2 * var(--space-lg)),
            var(--container-width)
        );

    }

    .component-section {

        padding:
            var(--space-lg)
            0;

    }

    .content-section {

        padding:
            var(--space-2xl)
            0;

    }

    .section-header h1,
    .section-header h2 {

        font-size:
            var(--font-size-xl);

    }

}


/* ==========================================
   NUR FÜR VORLESEPROGRAMME
   Unsichtbar, aber Suchmaschinen und Vorlese-
   programme lesen es (z. B. die h1 im Hero der
   Startseite und der Termine-Seite).
========================================== */

.visually-hidden {

    position: absolute !important;

    width: 1px;

    height: 1px;

    margin: -1px;

    padding: 0;

    overflow: hidden;

    clip: rect(0 0 0 0);

    clip-path: inset(50%);

    white-space: nowrap;

    border: 0;

}