/**
 * Dieses Stylesheet ist Grundlage des Aussehens der Seite in allen Browsern.
 * Für schmale und breite Bildschirme werden einige Angaben in style-schmal.css und
 * style-breit.css überschrieben.
 * Für Browser, die den Dark-Mode nutzen, werden einige wenige
 * Angaben durch Werte aus style-dunkel.css überschrieben.
 */

@layer vendor, reset, tokens, app, responsive, dark-mode, print;

@layer reset {
    /*! A (more) Modern CSS Reset | Andy Bell | https://piccalil.li/blog/a-more-modern-css-reset/ */

    /* Box sizing rules */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    /* Prevent font size inflation */
    html {
        -moz-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
    }

    /* Remove default margin in favour of better control in authored CSS */
    body, h1, h2, h3, h4, p,
    figure, blockquote, dl, dd {
        margin-block-end: 0;
    }

    /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
    ul[role='list'],
    ol[role='list'] {
        list-style: none;
    }

    /* Set core body defaults */
    body {
        min-height: 100vh;
        line-height: 1.5;
    }

    /* Set shorter line heights on headings and interactive elements */
    h1, h2, h3, h4,
    button, input, label {
        line-height: 1.1;
    }

    /* Balance text wrapping on headings */
    h1, h2,
    h3, h4 {
        text-wrap: balance;
    }

    /* A elements that don't have a class get default styles */
    a:not([class]) {
        text-decoration-skip-ink: auto;
    }

    /* Make images easier to work with */
    img,
    picture {
        max-width: 100%;
        display: block;
    }

    /* Inherit fonts for inputs and buttons */
    input, button,
    textarea, select {
        font-family: inherit;
        font-size: inherit;
    }

    /* Make sure textareas without a rows attribute are not tiny */
    textarea:not([rows]) {
        min-height: 10em;
    }

    /* Anything that has been anchored to should have extra scroll margin */
    :target {
        scroll-margin-block: 5ex;
    }

    /* A (more) Modern CSS Reset Ende */
}





@layer tokens {
    /* Schriftarten einbinden:
       Als Download gibt es die WOFF2-Varianten über den Google Webfonts Helper: https://gwfh.mranftl.com.
       - Als Charset reicht latin (das umfasst die Zeichen für westeuropäische Sprachen); latin-ext ist daher nicht nötig.
       - Font-Weights: 400 ist regular und 700 bold, beides zusätzlich noch in der kursiven Version.
       Wichtig:
       Wenn neue Versionen eingebunden werden daran denken, die Dateinamen für das Preloading
       in Classes/EventListener/BeforeStylesheetsRenderingListener.php und
       in Resources/Private/DesignTemplates/Design.html ebenfalls entsprechend anzupassen.

    Playfair Display (regular) */
    @font-face {
        font-display: swap;
        font-family: 'Playfair Display';
        font-style: normal;
        font-weight: 400;
        src: url('../Fonts/playfair-display-v40-latin-regular.woff2') format('woff2');
    }

    /* Playfair Display (italic) */
    @font-face {
        font-display: swap;
        font-family: 'Playfair Display';
        font-style: italic;
        font-weight: 400;
        src: url('../Fonts/playfair-display-v40-latin-italic.woff2') format('woff2');
    }

    /* Playfair Display (700) */
    @font-face {
        font-display: swap;
        font-family: 'Playfair Display';
        font-style: normal;
        font-weight: 700;
        src: url('../Fonts/playfair-display-v40-latin-700.woff2') format('woff2');
    }

    /* Playfair Display (700 italic) */
    @font-face {
        font-display: swap;
        font-family: 'Playfair Display';
        font-style: italic;
        font-weight: 700;
        src: url('../Fonts/playfair-display-v40-latin-700italic.woff2') format('woff2');
    }



    /* Poppins (regular) */
    @font-face {
        font-display: swap;
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 400;
        src: url('../Fonts/poppins-v24-latin-regular.woff2') format('woff2');
    }

    /* Poppins (italic) */
    @font-face {
        font-display: swap;
        font-family: 'Poppins';
        font-style: italic;
        font-weight: 400;
        src: url('../Fonts/poppins-v24-latin-italic.woff2') format('woff2');
    }

    /* Poppins (700) */
    @font-face {
        font-display: swap;
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 700;
        src: url('../Fonts/poppins-v24-latin-700.woff2') format('woff2');
    }

    /* Poppins (700 italic) */
    @font-face {
        font-display: swap;
        font-family: 'Poppins';
        font-style: italic;
        font-weight: 700;
        src: url('../Fonts/poppins-v24-latin-700italic.woff2') format('woff2');
    }



    /* Einige Variablen definieren, die später genutzt werden */
    /* Hintergrundfarbe für den Menü-Button in der schmalen Ansicht im Header.

       Muss mit @property definiert werden, weil eine gewöhnliche Definition mit --menu-button-bg-color usw. keine Transition ermöglicht.
       Stattdessen würde die Umstellung trotz Transition abrupt erfolgen. */
    @property --menu-button-bg-color {
        syntax: "<color>";
        initial-value: black;
        inherits: true;
    }

    @property --menu-button-hover-bg-color {
        syntax: "<color>";
        initial-value: black;
        inherits: true;
    }

    @property --menu-button-active-bg-color {
        syntax: "<color>";
        initial-value: black;
        inherits: true;
    }


    /* Hintergrundfarben für die Buttons "nach oben" sowie für sonstige Buttons in main.
       Muss mit @property definiert werden, weil eine gewöhnliche Definition mit --button-bg-color usw. allein nicht gleichzeitig mit der Änderung des Box-Shadow ausgeführt würde.
       Hier wird nur der Typ definiert. Die tatsächliche Farbe wird in :root gesetzt. */
    @property --button-bg-color {
        syntax: "<color>";
        initial-value: black;
        inherits: true;
    }

    @property --button-hover-bg-color {
        syntax: "<color>";
        initial-value: black;
        inherits: true;
    }

    @property --button-active-bg-color {
        syntax: "<color>";
        initial-value: black;
        inherits: true;
    }


    :root {
        /* Spacing-System: Variablen für alle Abstände, die benutzt werden können.
           1rem = 10px. */
        --space-0: 0;
        --space-xs: 0.4rem;
        --space-sm: 0.8rem;
        --space-md: 1.2rem;
        --space-lg: 1.6rem;
        --space-xl: 2.0rem;
        --space-2xl: 2.8rem;
        --space-3xl: 3.6rem;
        --space-4xl: 4.4rem;
        --space-5xl: 6.6rem;
        --space-6xl: 8.8rem;

        /* column-gap und row-gap für das Grid. */
        --column-gap: var(--space-3xl);
        --row-gap: var(--space-2xl);

        /* Fallback, falls die Variable per JS nicht gesetzt wird */
        --mobile-nav-margin-top: 0rem;

        /* 100% der Schriftgröße sind bei Standardgröße 16px, 62,5% sind genau 10px.
           Ausgehend von diesem Grundwert lassen sich die Schriftgrößen der Elemente leichter berechnen. */
        --font-size-html: 62.5%;
        --font-size-body: 1.6rem;
        --font-size-homepage-link-title: 3.4rem;
        --font-size-homepage-link-subtitle: 1.9rem;
        --font-size-header-actions: 1.8rem;
        --font-size-menu-button: 1.0rem;
        --font-size-menu-overlay: 2.4rem;
        /* Im Header haben die Menüpunkte eine Schriftgröße von 1.6rem, damit die Texte nicht zu breit für den verfügbaren Platz werden.
           Im Menü side-nav 1.6rem und im Footer 1.7rem (--font-size-menu-item). */
        --font-size-main-nav: 1.6rem;
        --font-size-menu-item: 1.7rem;
        --font-size-side-nav: 1.6rem;
        /* Die Größen der Überschriften sind darauf ausgelegt von einer Viewportbreite von 73.45rem (da hört gerade die schmale Ansicht auf)
           bis zu 119.5rem (da beginnt die breite Ansicht) zu wachsen */
        --font-size-h1: clamp(8rem, 6.405rem + 2.172vw, 9rem);
        --font-size-h2: clamp(3.6rem, 2.962rem + 0.869vw, 4rem);
        --font-size-h3: clamp(1.8rem, 1.481rem + 0.434vw, 2rem);
        --font-size-image-caption: 1.3rem;
        /* Schriftgrößen von Text im RTE
           Überschriften über Inhaltselementen haben eine Größe von 2.8rem,
           Unterüberschriften von 1.8rem, so dass i.d.R. keine größere
           Größe gewählt werden sollte.
           Nur Größen bis 1.6rem anzubieten, wirkt dann aber doch zu beschränkt. */
        --font-size-text-tiny: 1.1rem;
        --font-size-text-small: 1.3rem;
        --font-size-text-big: 1.8rem;
        --font-size-text-huge: 2.0rem;
        --font-size-indexed-search-sword: var(--font-size-h1);
        --font-size-simple-lightbox-counter: 1.6rem;
        --font-size-simple-lightbox-button: 4rem;
        --font-size-simple-lightbox-caption: 1.4rem;
        --font-size-footer-header: 2.4rem;
        --font-size-search-input: 1.6rem;
        --font-size-search-hint: 1.3rem;

        /* Größen für responsive Breiten */
        --search-overlay-max-inline-size: 90rem;
        --search-overlay-inline-gutter: clamp(1.6rem, 5vw, 4rem);
        --search-overlay-offset-top: clamp(2rem, 12dvh, 10rem);

        /* Schriftarten ohne Serifen werden benutzt für den Body, den Seitentext, Menüs und Buttons. */
        --font-family-sans-serif:
            Poppins,
            /* Der Font-Stack ist eine Abwandlung von https://getbootstrap.com/docs/5.3/content/reboot/#native-font-stack
               Herausgenommen wurden die Systemschriftarten,
               ergänzt wurden Verdana und Helvetica, die bevorzugt genutzt werden sollen. */
            /* Windows - unter Windows ist Verdana die erste Schriftart in dieser Liste, die verfügbar ist.
               Verdana ist daher die Schriftart, die unter Windows verwendet wird. */
            Verdana, Helvetica,
            /* Android */
            Roboto,
            /* ältere macOS and iOS */
            "Helvetica Neue",
            /* Linux */
            "Noto Sans",
            "Liberation Sans",
            /* Fallback */
            Arial,
            /* Sans-serif-Fallback */
            sans-serif;
        /* Schriftarten mit Serifen werden benutzt für den Header und Überschriften. */
        --font-family-serif:
            "Playfair Display", Georgia, Times, "Times New Roman", serif;


        /* --color-primary (Pfirsich für den Header) */
        --color-primary: #FFCCA0;
        /* --color-secondary (Petrolblau für den Footer) */
        --color-secondary: #14303C;
        /* --color-accent (Orange) */
        --color-accent: #E87B00;

        --body-background-color: #FFFBF7;
        --page-text-color: #1C1C1C;

        /* Akzentfarbe, die automatisch für User-Interface-Elemente benutzt wird, z.B. Checkboxes, Radiobuttons und Fortschrittsbalken. */
        accent-color: var(--color-accent);
        /* Farbe des Caret-Symbols, also des senkrechten Strichs, bei dem der Benutzer gerade schreibt, z.B. im Suchfeld. */
        caret-color: var(--color-accent);
        /* Farbe für Aufzählungszeichen und Nummern von Listen */
        --marker-color: #FFB266;

        /* Blauton als Kontrastfarbe zu den Orangetönen */
        --link-color: #005F9E;
        /* etwas dunklerer Grauton */
        --visited-link-color: #4A4A4A;
        /* etwas heller als die normale Linkfarbe */
        --hovered-link-color: #0077CC;
        /* etwas dunklerer Blauton */
        --active-link-color: #003F70;

        /* Textfarbe der aktuellen Seite in der Rootline */
        --menu-rootline-current-link-color: #E06C00;
        /* Textfarbe im Moment des Angeklickt-Werdens (:active) */
        --menu-active-link-color: var(--color-accent);

        --skip-nav-link-bg-color: #1A1A1A;
        --skip-nav-link-text-color: #FFFFFF;

        --menu-button-text-color: #FFFFFF;
        --menu-button-box-shadow: rgba(0, 0, 0, 0.06);
        --mobile-nav-icon-color: #FFFFFF;
        --mobile-nav-overlay-color: rgba(0, 0, 0, 0.65);
        /* Passend zur Hintergrundfarbe im Header */
        --mobile-nav-bg-color: var(--header-bg-color);
        --mobile-nav-li-border-color-1: rgb(from var(--color-accent) r g b / 0.1);
        --mobile-nav-li-border-color-2: rgb(from var(--color-accent) r g b / 0.4);
        --mobile-nav-li-border-color-3: rgb(from var(--color-accent) r g b / 1);
        --mobile-nav-li-border-color-light: rgb(from var(--color-accent) r g b / 0.35);
        --mobile-nav-link-hover-bg-color: #FFE2C6;
        --mobile-nav-link-hover-text-color: var(--menu-rootline-current-link-color);
        --mobile-nav-text-color: var(--page-text-color);
        --mobile-nav-text-color-active: var(--menu-active-link-color);
        --mobile-nav-back-button-bg-color: #555555;
        --mobile-nav-back-button-hover-bg-color: #333333;
        --mobile-nav-back-focus-visible-color: #222222;
        --mobile-nav-sub-heading-text-color: #FFFFFF;
        --mobile-nav-sub-heading-bg-color: #2C2C2C;

        /* Dieser Box-Shadow kann für Kästen benutzt werden, die einen relativ deutlich sichtbaren Box-Shadow haben sollen,
           z.B. der Header oder der Footer */
        --header-box-shadow: rgba(0, 0, 0, 0.1);
        --header-bg-color: var(--color-primary);
        /* Diese Hintergrundfarbe wird für den Header benutzt, wenn .main-nav-container, das Element direkt unter dem Header, sticky geworden ist.
           Dieselbe Farbe wie --header-bg-color, aber mit leichter Transparenz. */
        --header-sticky-bg-color: hsl(from var(--header-bg-color) h s l / 0.88);
        --header-header-image-box-shadow: rgba(0, 0, 0, 0.06);
        --header-header-image-hover-box-shadow: rgba(0, 0, 0, 0.12);
        --header-header-image-active-box-shadow: rgba(0, 0, 0, 0.18);
        --header-homepage-link-text-color: var(--page-text-color);
        --header-homepage-link-subtitle-text-color: var(--header-homepage-link-text-color);

        --search-toggle-bg-color: var(--main-nav-bg-color);
        --search-toggle-box-shadow: rgba(0, 0, 0, 0.06);
        --search-toggle-text-color: var(--main-nav-text-color);
        --search-toggle-hover-bg-color: var(--main-nav-hover-bg-color);
        --search-toggle-hover-color: var(--main-nav-link-color-hover);

        --cta-box-shadow: var(--search-toggle-box-shadow);

        --main-nav-outer-bg-color: var(--header-bg-color);
        --main-nav-outer-box-shadow: var(--header-box-shadow);
        /* Hintergrundfarbe, wenn .main-nav-container sticky geworden ist */
        --main-nav-sticky-outer-bg-color: var(--header-sticky-bg-color);
        --main-nav-sticky-outer-hover-bg-color: var(--header-bg-color);
        /* Färbt den Hintergrund des Hauptmenüs. */
        --main-nav-bg-color: white;
        --main-nav-box-shadow: rgba(0, 0, 0, 0.06);
        --main-nav-text-color: var(--page-text-color);
        /* Hintergrundfarbe des gehoverten Hauptmenüpunkts. */
        --main-nav-hover-bg-color: hsl(27, 100%, 92%);
        /* Hintergrundfarbe des Untermenüs - passend zum gehoverten Hauptmenüpunkt als visuelle Verbindung */
        --main-nav-sub-bg-color: var(--main-nav-hover-bg-color);
        --main-nav-sub-box-shadow-1: rgba(0, 0, 0, 0.1);
        --main-nav-sub-box-shadow-2: rgba(0, 0, 0, 0.08);
        /* Zwei Farben für alle Seiten in der Rootline und für die aktuelle Seite in der Rootline */
        --main-nav-rootline-color: #555555;
        --main-nav-rootline-current-page-color: var(--menu-rootline-current-link-color);
        /* Zwei Farben für :hover und :active */
        --main-nav-link-color-hover: var(--menu-rootline-current-link-color);
        --main-nav-link-color-active: var(--menu-active-link-color);

        --side-nav-bg-color: #F9F9F9;
        --side-nav-box-shadow: var(--header-box-shadow);
        --side-nav-a-bg-color: transparent;
        --side-nav-link-color: var(--page-text-color);
        /* Für besuchte Links keine gesonderte Farbe nutzen */
        --side-nav-visited-link-color: var(--side-nav-link-color);
        --side-nav-hovered-link-color: var(--menu-rootline-current-link-color);
        --side-nav-a-hover-bg-color: #FCE5CD;
        --side-nav-active-link-color: var(--menu-active-link-color);
        --side-nav-rootline-link-color: #555555;
        --side-nav-rootline-current-link-color: white;
        --side-nav-rootline-current-page-bg-color: var(--color-accent);
        --side-nav-rootline-current-page-hover-bg-color: #FF9D33;

        --main-text-color: var(--page-text-color);
        --main-headline-color: var(--main-text-color);
        --main-headline-accent-color: #E67200;
        --main-link-text-shadow: rgba(120, 120, 120, 0.3);
        --main-table-text-color: var(--page-text-color);
        /* Die Akzentfarbe zu einem niedrigen Prozentsatz nehmen und sie mit weiß mischen */
        --main-table-head-background-color: color-mix(in srgb, var(--color-accent) 25%, white);
        --main-table-border-color: #E2E2E2;
        --main-table-bg-zebra-color: #FAFAFA;
        --main-table-box-shadow: rgba(0, 0, 0, 0.06);
        --main-searchword-text-color: var(--menu-active-link-color);

        --button-box-shadow: rgba(0, 0, 0, 0.3);
        --button-hover-box-shadow: rgba(0, 0, 0, 0.2);
        --button-text-color: white;
        /* --color-accent entspricht hsl(32, 100%, 45%); */
        --button-bg-color: var(--color-accent);
        /* Bei hover etwas heller */
        --button-hover-bg-color: hsl(31, 100%, 60%);
        /* Im Moment des Anklickens etwas intensiver */
        --button-active-bg-color: hsl(29, 100%, 35%);

        --footer-accent-color: #FFFFFF;
        --footer-box-shadow: var(--header-box-shadow);
        --footer-bg-color: var(--color-secondary);
        --footer-text-color: #DDDDDD;
        --footer-visited-link-color: var(--footer-text-color);
        --footer-hovered-link-color: #FFFFFF;
        --footer-active-link-color: #BBBBBB;

        --search-overlay-bg-color: rgba(0, 0, 0, 0.45);
        --search-overlay-form-bg-color: var(--main-nav-bg-color);
        --search-overlay-form-inner-box-shadow: rgba(0, 0, 0, 0.12);
        --search-overlay-form-inner-border-color: rgba(0, 0, 0, 0.06);
        --search-overlay-icon-color: var(--main-nav-text-color);
        --search-overlay-form-text-color: var(--main-nav-text-color);
        --search-overlay-form-submit-text-color: var(--button-text-color);
        --search-overlay-close-icon-color: var(--main-nav-text-color);
        --search-overlay-hint-color: rgba(255, 255, 255, 0.85);
        --search-overlay-form-inner-icon-input-border-color: rgb(104, 104, 104);

        --border-radius: 8px;
        --border-radius-buttons: 999px;

        --transition-duration: 0.3s;
        --transition-duration-short: 0.15s;
        --transition-duration-long: 0.5s;
    }
}


@layer app {
    /* Box-Sizing
       Das bewirkt, dass der Rahmen einer Box die rechnerische Außenlinie darstellt.
       Damit zählen der Inhalt, padding sowie border mit zur Größe des Elements.
       Nur margin zählt nicht mit. */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }


    html {
        /* Scrollbar nur bei Bedarf, aber Platz dafür stabil reservieren.
           => Keine erzwungene Scrollbar, aber stabiler Seitenlayout-Platz. */
        scrollbar-gutter: stable;
        overflow-y: auto;

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

        /* Das Scroll-Verhalten beim Klick auf seiteninterne Links anpassen (z.B. beim Link "nach oben").
           Es soll nicht abrupt zum Linkziel gesprungen werden. Stattdessen soll sanft hingescrollt werden. */
        scroll-behavior: smooth;

        /* scroll-padding-top wird benutzt, damit das Sticky-Menü beim Klicken auf Links innerhalb derselben Seite keine Inhalte verdeckt.
           Wert ist grds. 0. Im JavaScript wird der Wert wenn nötig passend zur Höhe des Sticky-Menüs überschrieben.
           Das Sticky-Menü wird ja nur angezeigt, wenn JavaScript aktiviert ist. */
        scroll-padding-top: var(--scroll-padding, 0rem);
    }


    body {
        /* min-height: 100svh für Sticky Footer am Viewport-Rand, auch bei kurzem Inhalt (Mobile-optimiert). */
        min-height: 100svh;

        /* Standard-Schriftart ist ohne Serifen */
        font-family: var(--font-family-sans-serif);
        /* Standard-Schriftgröße */
        font-size: var(--font-size-body);
        margin: var(--space-0);
        line-height: 1.6;

        background: var(--body-background-color);
    }

    /* Styling für veraltetes i-Element, das an sich nicht benutzt werden sollte. Sicherheitshalber hier aufgenommen. */
    i {
        font-style: italic;
    }


    /* Allgemeine Angaben für alle Links
       Wird für die einzelnen Bereiche der Seite (header, side-nav, main und footer)
       u.U. jeweils noch angepasst. */
    a {
        color: var(--link-color);
    }
    a:visited {
        color: var(--visited-link-color);
    }
    a:hover {
        color: var(--hovered-link-color);
    }
    a:active {
        color: var(--active-link-color);
    }


    /* Farbe für Aufzählungszeichen und Nummern von Listen */
    ::marker {
        color: var(--marker-color);
    }


    /* Visually-hidden für Screenreader-Labels */
    .visually-hidden {
        position: absolute;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
        white-space: nowrap;
        border: 0;
        padding: 0;
        margin: -1px;
    }


    /* Kasten mit dem Inhalt der Seite */
    .page {
        /* Den Container als Grid verwenden. */
        display: grid;
        /* Die Werte beschreiben die Breite der jeweiligen Spalte.
           1fr (1 Fraction) nutzt den noch freien Platz, zentriert also die mittleren Spalten.
           Bis zu einer Breite von einschließlich 1175px greift style-schmal.css.
           Dieses Styling hier greift also ab mindestens 1176px Gesamtbreite.
           Es sind vier Spalten. row-gap ist jeweils 3,6rem = 36px.
           1176px Gesamtbreite - 3 x 36px Gap = 1176px - 108px = 1068px für die beiden Spalten.
           1068 - 18px für die Scrollbar an der Seite = 1050px verfügbarer Platz.

           Mindestbreite der Spalte side-nav ist 22rem. Mindestbreite von main ist 83rem.
           220px + 830px = 1050px => passt also.

           Die Breite von Bildblöcken in TYPO3 ist 830px, siehe
           Configuration/TypoScript/constants.typoscript.
           Schmaler als 830px darf main also nie werden.

           Wenn mehr Breite verfügbar ist, wachsen die beiden Spalten bis zu ihren Maxima.
           Danach wachsen die beiden äußeren Spalten, was die beiden mittleren Spalten zentriert. */
        grid-template-columns:
            1fr
            minmax(22rem, 25rem)
            minmax(83rem, 90rem)
            1fr;
        /* Höhe der Zeilen einstellen:
           - In der ersten Zeile header: Höhe entsprechend seinem Inhalt, also auto.
           - In der zweiten Zeile .main-nav-container: Die Höhe dieser Zeile ist fix.
                11.92rem entspricht genau der Höhe, die dieses Element benötigt,
                wenn es noch nicht "stuck" ist. Bei genau dieser Höhe bleibt das Grid -
                und zwar auch dann, wenn das Element weniger Platz brauchen sollte
                (was der Fall ist, _wenn_ es stuck ist). Die fixe Angabe beim Grid sorgt
                dann dafür, dass der nachfolgende Teil der Seite nicht "nach oben springt",
                wenn sich bei .main-nav-container eine Padding ändert.
           - In der dritten Zeile nav und main: Höhe alles was übrig bleibt, also 1fr.
           - In der letzten Zeile footer: Höhe entsprechend seinem Inhalt, also auto. */
        grid-template-rows: auto 11.92rem 1fr auto;
        /* Vergabe der Namen für die einzelnen Grid-Bereiche */
        grid-template-areas:
            "header    header    header    header"
            "main-nav  main-nav  main-nav  main-nav"
            ".         side-nav  main      ."
            "footer    footer    footer    footer";
        /* Größe der Abstände zwischen den Spalten und zwischen den Zeilen
           Exakt dieser Abstand aber mit negativem Vorzeichen muss als margin-bottom für header:has(.flex-container) gesetzt sein,
           damit der Abstand unter header verschwindet. */
        column-gap: var(--column-gap);
        row-gap: var(--row-gap);
        width: 100%;

        /* Sicherstellen, dass die Mindest(!)-Höhe des Elements 100% des Viewports ist.
           Wird benötigt, um den Footer (auch bei kurzem Seiteninhalt) ganz an den unteren Bildschirmrand zu bringen.
           Es muss die Mindesthöhe sein, nicht die Höhe. */
        min-height: 100dvh;

        color: var(--page-text-color);
        text-align: left;
    }






    /* Den Link "Zum Inhalt springen" stylen */
    /* Damit color kein !important braucht, ist es nötig, den a-Tag voranzustellen, um eine höhere Spezifität als a:hover und a:active zu erreichen. */
    a.skip-nav-link {
        position: absolute;
        left: 2em;
        background-color: var(--skip-nav-link-bg-color);
        color: var(--skip-nav-link-text-color);
        border-bottom-left-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
        /* top right bottom left */
        padding-inline: var(--space-2xl);
        padding-top: var(--space-sm);
        padding-bottom: var(--space-md);
        transform: translateY(-120%);
        transition: transform var(--transition-duration) ease-in;
        text-underline-offset: 0.25em;
    }
    a.skip-nav-link:focus-visible {
        transform: translateY(0);
        /* Den Link vor den Header legen */
        z-index: 20;
    }


    /* Formatierung des Seitenkopfes
     * Enthält das Header-Bild, den Titel, die Zeile darunter und die Hauptnavigation */
    header:has(.flex-container) {
        /* Der Seitenkopf geht über alle Spalten des Grid-Designs. */
        grid-area: header;
        width: 100%;
        height: auto;
        padding-bottom: var(--space-0);

        /* row-gap unter dem header entfernen, damit die Navigation sich ohne Lücke anschließt */
        margin-bottom: calc(-1 * var(--row-gap));

        text-align: center;

        background-color: var(--header-bg-color);
        /* Den Hintergrund mit den gleichen Farben und der gleichen Geschwindigkeit anpassen wie bei .main-nav-container.stuck,
           so dass die Farbe und die Veränderung der beiden Elemente gleich verläuft (synchron) */
        transition:
            background-color var(--transition-duration-long) ease;
    }

    /* Wenn die Navigation sticky geworden ist, die Hintergrundfarbe des Headers genau so anpassen wie bei .main-nav-container.
       Sichtbar ist das, wenn der Benutzer wieder hochscrollt, nachdem die Main-Nav sticky war.
       Und sichtbar ist es ebenfalls, wenn ein Wechsel vom Light-Mode zum Dark-Mode und andersrum vorgenommen wird. */
    header:has(+ .main-nav-container.stuck) {
        /* Gleiche Hintergrundfarbe und gleich schneller Wechsel wie bei .main-nav-container, wenn .main-nav-container die Klasse .stuck bekommt. */
        background-color: var(--header-sticky-bg-color);
    }

    /* Positionierung des Headerbildes */
    header .header-image {
        padding-top: var(--space-3xl);
    }

    header .header-image a {
        /* Runde Ecken auch für die Umrandung beim Anspringen mit der Tastatur. */
        border-radius: var(--border-radius);
        display: block;
        /* Das Bild selbst wird im HTML geladen. */
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;

        /* Text bleibt für Screenreader/SEO */
        text-indent: -9999px;
        margin-inline: auto;

        box-shadow: 0rem 0.4rem 1.2rem var(--header-header-image-box-shadow);

        /* Kommt das Bild in diesen Zustand (d.h. nachdem es gehovert wurde)
           den Box-Shadow nicht abrupt, sondern ihn über eine kurze Zeit wieder reduzieren.
           So gesetzt für die Elemente, die einen Box-Shadow haben, der sich beim Hovern verändert:
           Buttons im Hauptmenü, Bild im Hauptmenü, Buttons "nach oben" Input-Elemente,
           die den type "button" oder "submit" haben.
           <Eigenschaft> <Dauer> <Art> <Verzögerung> */
        transition: box-shadow var(--transition-duration) ease-out 0s;
    }
    header .header-image a:hover,
    header .header-image a:focus-within {
        /* Hover-Zustand: Leicht stärkerer Schatten. Größerer, weicherer Schatten, wirkt "näher". */
        box-shadow: 0rem 0.6rem 2rem var(--header-header-image-hover-box-shadow);
    }
    header .header-image a:active {
        /* Active-Zustand: Etwas kleinerer, schärferer Schatten. Kleinerer, dichterer Schatten, wirkt "gedrückt". */
        box-shadow: 0rem 0.2rem 0.6rem var(--header-header-image-active-box-shadow);
    }

    header .header-image .header-image-error {
        border: 3px solid #c00;
        background: #fff0f0;
        color: #900;
        padding: 1rem;
        margin-inline: auto;
        font-weight: 600;
        max-width: max-content;
    }


    header .branding {
        display: flex;
        /* Kombination von Titel und Untertitel sowie den Buttons vertikal zentrieren */
        align-items: center;
        /* Abstand zwischen der Kombination von Titel und Untertitel sowie den Buttons ergänzen */
        justify-content: space-between;
        /* Abstand zwischen Kombination von Titel und Untertitel sowie den Buttons */
        column-gap: var(--space-2xl);

        /* Die Zeile ist genau so breit wie das Hauptmenü. */
        width: var(--main-nav-width);
        margin-inline: auto;

        /* Dieses padding-top muss dem padding-top von .main-nav-container entsprechen, damit die Abstände zwischen den Elementen gleich sind */
        padding-top: var(--space-sm);
    }

    /* Wenn das Header-Bild deaktiviert ist, soll das Padding oberhalb von .homepage-link genau so hoch sein wie sonst das Padding über .header-image wäre,
       damit die Abstände im Header weiter harmonisch bleiben (über .homepage-link genau so hoch wie unter .main-nav-container). */
    .flex-container:not(:has(> .header-image)) .branding {
        padding-top: var(--space-0);
    }

    /* Enthält den Titel und die Zeile darunter */
    header .homepage-link {
        display: flex;
        /* Titel und Untertitel vertikal nach unten ausrichten */
        align-items: baseline;
        /* Die Kombination von Titel und Untertitel horizontal links */
        justify-content: left;
        /* Abstand zwischen Titel und Untertitel */
        column-gap: var(--space-2xl);

        /* Besondere Schriftart für Überschriften: Im Header, im Inhalt und im Footer eine Serifen-Schriftart einsetzen. */
        font-family: var(--font-family-serif);

        /* Titel soweit vom Bild entfernen, dass es so _aussieht_, als sei der Abstand von ganz oben zum Bild,
           vom Bild zu diesem Titel, von dem Titel zum Menü und vom Menü im Header nach unten gleich groß. */
        padding-top: var(--space-2xl);
        /* Dieses padding-bottom ergibt zusammen mit padding-top von .main-nav-container den gewünschten Abstand zwischen
           den beiden Elementen.
           Wenn .main-nav-container sticky wird (Klasse .stuck), scrollt die hier gesetzte padding-bottom nach oben weg.
           Im Sichtbereich bleibt dann nur die padding-top von .main-nav-container - und die ist identisch zu der
           padding-bottom, die .main-nav-container über die Klasse .stuck bekommt. Damit ist der Inhalt von
           .main-nav-container, wenn es sticky ist, in .main-nav-container vertikal zentriert. */
        padding-bottom: var(--space-2xl);

        /* Titel und Untertitel etwas nach oben schieben, damit sie visuell so wirken, als seien sie mit den Buttons vertikal zentriert.
           (De facto sind sie das ohne diese Verschiebung. Da das Wort Zollvereinschule aber keine Unterlängen hat, wirkt es nicht so.) */
        margin-top: -0.4rem;
    }
    .flex-container:not(:has(> .header-image)) .homepage-link {
        padding-top: var(--space-3xl);
    }
    header .homepage-link a {
        text-decoration: none;
        /* Die Ecken genauso abrunden wie beim Header-Bild und dem Hauptmenü. Diese Rundung ist sichtbar beim Anspringen des Links mit der Tastatur */
        border-radius: var(--border-radius);
        /* Minimales padding-block vermeidet, dass die Outline in Microsoft Edge bei :focus links und rechts oben so komische Ecken hat... */
        padding-block: var(--space-xs);

        outline-offset: 3px;
    }
    /* Der Titel "Zollvereinschule" oben auf jeder Seite */
    header .homepage-link .title {
        color: var(--header-homepage-link-text-color);
        font-size: var(--font-size-homepage-link-title);
        margin: var(--space-0);
        line-height: 1;

        /* Buchstabenabstand etwas vergrößern */
        letter-spacing: 0.8px;

        font-weight: 700;
    }
    header .homepage-link .subtitle {
        color: var(--header-homepage-link-subtitle-text-color);
        font-size: var(--font-size-homepage-link-subtitle);
        margin: var(--space-0);
    }

    /* Wenn .header-actions keine Kinder hat, weil alle Actions ausgeblendet sind:
       .homepage-link mit Titel und Untertitel zentrieren. */
    header .branding:not(:has(.header-actions > *)) {
        justify-content: center;
    }
    header .branding:not(:has(.header-actions > *)) .homepage-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: var(--space-sm);
    }


    .header-actions {
        display: flex;
        /* Such-Icon und den CTA-Button vertikal zentrieren */
        align-items: center;
        /* Die Kombination von Such-Icon und CTA-Button horizontal zentrieren */
        justify-content: center;
        /* Abstand zwischen Such-Icon und CTA-Button */
        column-gap: var(--space-2xl);

        font-family: var(--font-family-sans-serif);
        font-size: var(--font-size-header-actions);

        /* Höhe der Buttons */
        --header-action-height: 5.2rem;
    }

    /* Wenn .header-actions keine Kinder hat, es ausblenden, so dass es nicht mehr als Element mitzählt
       (z.B. bei der Anordnung der Elemente in der Flexbox .branding). */
    .header-actions:not(:has(> *)) {
        display: none;
    }


    /* Such-Icon-Button rechts vom Menü */
    .search-toggle {
        background-color: var(--search-toggle-bg-color);
        /* border: Die unschöne Browser-Standard-Darstellung von Buttons überschreiben */
        border: none;
        border-radius: var(--border-radius-buttons);
        corner-shape: squircle;
        height: var(--header-action-height);
        min-width: var(--header-action-height);
        padding: var(--space-sm);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0rem 0.2rem 0.6rem var(--search-toggle-box-shadow);
    }

    /* Fokus/hover für Zugänglichkeit */
    .search-toggle:focus-visible {
        /* Farbe der Outline in Edge. In Edge ist sie auch an Links schwarz, drum machen wir das für den Button genau so.
           Firefox verwendet trotz dieser Angabe weiter orange, genau wie Firefox das auch bei Links macht. So ist es in beiden Browsern einheitlich. */
        outline: 3px solid black;
        outline-style: auto;
        outline-offset: 0px;
    }
    .search-toggle:hover,
    .search-toggle:focus-within {
        /* Hintergrundfarbe und Farbe des Icons wie im Hauptmenü */
        background-color: var(--search-toggle-hover-bg-color);
    }

    /* Header-Icon svg Farbe an Textfarbe gebunden */
    .search-toggle svg {
        display: block;
        width: 20px;
        height: 20px;
        fill: var(--search-toggle-text-color);
    }

    .search-toggle:hover svg,
    .search-toggle:focus-within svg {
        fill: var(--search-toggle-hover-color);
    }


    /* Styles für CTA-Button im Header */
    .cta {
        display: inline-flex;
        align-items: center;
        gap: 1rem;
        height: var(--header-action-height);
        padding-inline: var(--space-2xl);
        font-weight: 700;
        color: var(--button-text-color);
        background-color: var(--button-bg-color);
        border-radius: var(--border-radius-buttons);
        corner-shape: squircle;
        text-decoration: none;
        box-shadow: 0rem 0.2rem 0.6rem var(--cta-box-shadow);
        cursor: pointer;
    }

    /* Fokus: wie bei .search-toggle */
    .cta:focus-visible {
        outline: 3px solid black;
        outline-style: auto;
        outline-offset: 0px;
    }


    .cta:hover,
    .cta:focus-visible {
        --button-bg-color: var(--button-hover-bg-color);
    }

    .cta:active {
        --button-bg-color: var(--button-active-bg-color);
        /* Active: wie bei .search-toggle (auch hier keine Veränderung beim Schatten) */
        color: var(--button-text-color);

        /* Skalierungseffekt hinzufügen (wie bei den Buttons nach oben) */
        animation: buttonPress var(--transition-duration-short) ease;
    }

    /* Farbe von a:visited, a:hover usw. überschreiben (nur ".cta:visited" usw. hätte eine zu niedrige Spezifität) */
    a.cta:visited,
    a.cta:hover,
    a.cta:focus-visible,
    a.cta:active {
        color: var(--button-text-color);
    }



    /* Mobiles Menü: Die Elemente des mobilen Menüs nicht anzeigen */
    header .mobile-nav .menu-button,
    header .mobile-nav .menu-overlay {
        display: none;
    }



    /* Kasten mit der Hauptnavigation */
    .main-nav-container {
        /* Die Main-Nav geht über alle Spalten des Grid-Designs. */
        grid-area: main-nav;

        /* Höhe von .main-nav-container ist nicht die gesamte Höhe der Zeile, sondern die Höhe seines Inhalts.
           Das sorgt dafür, dass .main-nav-container kleiner werden kann (passiert durch die Änderung seiner
           padding-bottom mit der Klasse .stuck) ohne dass sich die Höhe der Gridzeile ändert. Durch die fixe
           Höhe der Gridzeile wird sichergestellt, dass der darunter folgenden Teil der Seite nicht verspringt,
           wenn sich eine padding von .main-nav-container ändert. */
        height: fit-content;

        position: sticky;
        top: 0;
        z-index: 1030;

        /* Höhe der einzelnen Menüpunkte */
        line-height: 2.7;

        font-size: var(--font-size-main-nav);
        font-family: var(--font-family-sans-serif);
        text-align: center;

        background-color: var(--main-nav-outer-bg-color);

        /* Dieses padding-top ergibt zusammen mit padding-bottom von header .homepage-link den gewünschten Abstand zwischen
           den beiden Elementen.
           Wenn .main-nav-container sticky wird (Klasse .stuck), bleibt die hier gesetzte padding-top im Sichtbereich -
           und die ist identisch zu der padding-bottom, die .main-nav-container über die Klasse .stuck bekommt. Damit
           ist der Inhalt von .main-nav-container, wenn es sticky ist, in .main-nav-container vertikal zentriert. */
        padding-top: var(--space-sm);
        padding-bottom: var(--space-3xl);

        user-select: none;

        /* Menü und Suchbutton nebeneinander ausrichten */
        display: flex;
        /* Menü und Such-Icon vertikal zentrieren */
        align-items: center;
        /* Die Kombination von Menü und Such-Icon horizontal zentrieren */
        justify-content: center;
        /* Abstand zwischen Menü und Such-Icon */
        column-gap: var(--space-2xl);

        /* 0px horizontal, 4px (also nach unten) vertikal verschoben und 10px blur. Zusätzlich -0.4rem nah unten verschoben, damit der Box-Shadow nur unten sichtbar ist
           und nicht auch nach oben in Richtung header. 
           Ähnlich aussehend (nur ohne die Verschiebung) für footer. */
        box-shadow: 0 0.8rem 0.8rem -0.2rem var(--main-nav-outer-box-shadow);

        transition:
            background-color var(--transition-duration-long) ease,
            padding-block var(--transition-duration-short) ease;
    }
    /* Die Navigation ist sticky - die Klasse .stuck wird per JavaScript gesetzt. */
    .main-nav-container.stuck {
        /* wird wegen der Transparenz heller - wirkt damit luftiger. */
        background-color: var(--main-nav-sticky-outer-bg-color);

        /* padding-bottom verringern, so dass es mit padding-top identisch ist. */
        padding-bottom: var(--space-sm);

        position: sticky;
        top: 0;
        z-index: 1100;      /* muss > mask (1000) sein, aber < panel (1200) */
    }

    /* Wenn Such-Overlay offen ist (JS setzt .search-open auf body), dann fixed benutzen.
       Sonst würde .main-nav-container.stuck beim Öffnen des Overlays auf einmal nicht mehr gezeigt (es wirkt, als sei es unsichtbar geworden).
       Entsprechend für body.search-open header:has(.flex-container) in schmaler Ansicht. */
    body.search-open .main-nav-container.stuck {
        position: fixed; /* ersetzt sticky nur während Overlay offen ist */
        top: 0;
        left: 0;
        right: 0;
        z-index: 1150;      /* zwischen mask (1000) und panel (1200) belassen */
    }

    .main-nav-container.stuck:hover,
    .main-nav-container.stuck:focus-within {
        --main-nav-sticky-outer-bg-color: var(--main-nav-sticky-outer-hover-bg-color);
        /* Wenn gehovert wird, soll die Hintergrundfarbe sich schneller ändern.
           Für die andere Transition-Dauer hier noch einmal gesetzt - hier nur die transition-duration anzupassen geht in CSS nicht. */
        transition: background-color var(--transition-duration-short) ease;
    }

    /* Breite des Hauptmenüs bei bis zu 5 Elementen; Breite bei mehr Elementen siehe unten.
       Die Werte nicht nur für .main-nav definieren, sondern schon für body, damit sie auch für header .branding nutzbar sind (das genau so breit sein soll wie das Hauptmenü). */
    body {
        --main-nav-width: 85rem;
    }
    /* Das Hauptmenü je nach Anzahl der Menüpunkte auf Ebene 1 dynamisch breiter machen.
       Bei 6 bis 8 Elementen */
    body:has(.main-nav .navbar-nav > ul > li:nth-child(6)) {
        --main-nav-width: 100rem;
    }
    /* Bei 9 oder mehr Elementen */
    body:has(.main-nav .navbar-nav > ul > li:nth-child(9)) {
        --main-nav-width: 105rem;
    }

    .main-nav {
        /* Schatten. Bedeutung der 4 Werte: Verschiebung nach rechts Verschiebung nach unten Radius Farbe */
        box-shadow: 0rem 0.2rem 0.6rem var(--main-nav-box-shadow);

        display: flex;
        flex-direction: row;
        align-items: baseline;

        width: var(--main-nav-width);

        /* Für die absolute Positionierung der Untermenüs */
        position: relative;
    }

    /* Das Element unmittelbar in .main-nav soll die gesamte Breite einnehmen, damit die Buttons sich dann über die gesamte Breite verteilen.
       (Funktioniert unabhängig davon, ob es sich um das Platzhalterelement von TYPO3 oder um das "richtige" HTML-Element in der echten Website handelt.) */
    .main-nav > * {
        width: 100%;
    }

    /* Beim Hovern und Fokussieren auf einem Hauptmenüpunkt, der ein Untermenü hat, die unteren Ecken des Hauptmenüs nicht mehr abrunden */
    /* Ist jetzt doppelt (für zwei Elemente), weil die runden Ecken auch doppelt sind. Ist das nötig? */
    /* .main-nav:has(.navbar-nav > ul > li:hover > .sub),
    .main-nav:has(.navbar-nav > ul > li:focus-within > .sub), */
    .main-nav:has(.navbar-nav > ul > li:hover > .sub) .navbar-nav > ul,
    .main-nav:has(.navbar-nav > ul > li:focus-within > .sub) .navbar-nav > ul {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    /* Hauptnavigation */
    /* Ebene 1: Menüpunkte horizontal anordnen */
    .main-nav .navbar-nav > ul {
        display: flex;
        width: 100%;
        align-items: stretch;
        margin-block: var(--space-0);
        padding: var(--space-0);
        /* Gleichmäßiger Abstand um jedes Element */
        justify-content: space-around;

        list-style: none;
        white-space: nowrap;

        /* Diese Hintergrundfarbe ist in der ersten Menüzeile sichtbar. */
        background-color: var(--main-nav-bg-color);

        /* Runde Ecken */
        border-radius: var(--border-radius);
        /* Die Ecken animiert abrunden, genau wie für .main-nav */
        transition:
            border-bottom-left-radius var(--transition-duration-short) ease,
            border-bottom-right-radius var(--transition-duration-short) ease;
    }

    /* Angaben zu den einzelnen Menüpunkten */
    .main-nav .navbar-nav > ul > li {
        /* Breite der einzelnen Buttons.
           Die Breite von .main-nav .sub (usw) muss dazu passen (ungefähr 800px) */
        /* Die Buttons so breit machen, dass sie den gesamten verfügbaren Platz ausfüllen.
           Wichtig, damit das Untermenü sich nicht schließt, wenn der Besucher die Maus schräg vom Hauptmenüpunkt nach unten zieht
           (und er dadurch unbeabsichtigt den Button verlässt) */
        flex: 1 1 auto;
    }
    .main-nav .navbar-nav a {
        display: block;
        text-decoration: none;

        color: var(--main-nav-text-color);

        padding-block: var(--space-md);
        /* Der Text soll einen gewissen Mindestabstand zum nächsten Link einhalten,
           aber dieser Abstand soll anklickbar sein, so dass es keinen "Nicht-Link"-Bereich zwischen den Links gibt. */
        padding-inline: var(--space-md);
    }

    /* Zeige einen Pfeil bei jedem <li>, das ein .sub enthält */
    .main-nav li:has(> .sub) > a::after {
        content: "";
        display: inline-block;
        margin-left: 6px;
        /* Pfeil etwas nach oben schieben */
        vertical-align: 1px;
        width: 8px;
        height: 8px;
        /* Nimmt die Textfarbe von <a>; die Farbe des Icons passt sich also bei :hover, :active usw. automatisch mit an */
        background-color: currentColor;
        /* Pfeil als SVG einfügen */
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M2.1,3.2l5.4,5.4l5.4-5.4L15,4.3l-7.5,7.5L0,4.3L2.1,3.2z'/%3E%3C/svg%3E");
        mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
    }

    .main-nav a span {
        position: relative;
        /* Span nur so breit wie der enthaltene Text */
        display: inline-block;

        vertical-align: middle;

        /* Auslassungszeichen, wenn Text zu lang */
        /* Gedacht für eine Breite von .main-nav bei bis zu 5 Elementen.
           Die Punkte brauchen eine max-width in Abhängigkeit von ihrer Anzahl.
           Sie sollen jedenfalls, wenn sie _zusammen insgesamt_ zu breit sind, nicht über .main-nav hinausragen.
           Da jedes einzelne Element nicht die maximale, verfügbare Breite nutzen muss, kann die maximale Breite
           pro Element höher sein, als an Platz verfügbar ist, wenn alle Elemente den maximalen Platz ausnutzen.
           Riskante Idee... */
        max-width: 18rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    /* Die Hauptmenüpunkte je nach Anzahl der Menüpunkte auf Ebene 1 dynamisch nicht ganz so breit machen.
       Bei 6 bis 8 Elementen auf Ebene 1 */
    .main-nav:has(.navbar-nav > ul > li:nth-child(6)) .navbar-nav > ul > li > a > span {
        max-width: 15rem;
    }
    /* Bei 9 oder mehr Elementen auf Ebene 1 */
    .main-nav:has(.navbar-nav > ul > li:nth-child(9)) .navbar-nav > ul > li > a > span {
        max-width: 13rem;
    }

    /* Linie unter dem Text */
    .main-nav a span::after {
        content: "";
        position: absolute;
        /* Abstand von unten im span.
           Dieser Abstand sorgt dafür, dass die Linie optisch vom Text getrennt ist. */
        bottom: 6px;
        left: 50%;
        height: 2px;
        width: 100%;
        background-color: currentColor;
        transform: translateX(-50%) scaleX(0);
        transform-origin: center;
        opacity: 0;
        transition:
            transform var(--transition-duration) ease-in-out,
            opacity var(--transition-duration) ease-in-out;
    }

    /* Runde Ecke für den ersten Button der ersten Ebene
       (Child-Selektoren sind nötig, damit vom ersten Button auf Ebene 1
       die Unterpunkte auf Ebene 2 nicht mit erfasst werden.) */
    .main-nav .navbar-nav > ul > li:first-child,
    .main-nav .navbar-nav > ul > li:first-child > a {
        /* Oben links eine runde Ecke */
        border-top-left-radius: var(--border-radius);
    }
    /* Runde Ecke auch für den letzten Button der ersten Ebene */
    .main-nav .navbar-nav > ul > li:last-child,
    .main-nav .navbar-nav > ul > li:last-child > a {
        /* Oben rechts eine runde Ecke */
        border-top-right-radius: var(--border-radius);
    }

    /* Ebene 2: Untermenüs ausrichten */
    .main-nav .sub {
        /* Höhe in den Untermenüs */
        line-height: 2;

        /* Breite aller Menübuttons inklusive Margins und Borders (falls gesetzt)
           genauso breit wie die Breite von Ebene 1.
           Passt sich der Breite der ersten Ebene an (ein Menüpunkt mehr oder weniger
           dort und das hier ist automatisch weiter genau so breit wie Ebene 1). */
        width: 100%;
        display: flex;
        /* Die einzelnen li-Tags sollen, wenn der Platz seitlich nicht reicht, in die nächste Zeile umbrechen. */
        flex-wrap: wrap;
        column-gap: var(--space-2xl);
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-3xl);

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

        /* Vorbereitung für display: flex. */
        justify-content: flex-start;
        list-style: none;

        border-bottom-left-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);

        position: absolute;
        /* erscheint unterhalb des Eltern-li */
        top: 100%;
        left: 0;
        background-color: var(--main-nav-sub-bg-color);
        /* Mehr box-shadow, damit das offene Menü besser erkennbar ist */
        box-shadow: 0rem 0.4rem 0.4rem var(--main-nav-sub-box-shadow-1), 
                0rem 0.6rem 0.8rem var(--main-nav-sub-box-shadow-2);

        opacity: 0;
        pointer-events: none;
        max-height: 100rem;
        overflow: hidden;
    }

    .main-nav .sub li {
        /* Macht die Untermenüpunkte so breit wie nötig */
        width: auto;

        /* Lasse die Menüpunkte schmaler werden, falls nicht genügend Platz in dem sie umgebenden ul da ist.
           Das ist der Fall, dass es nur relativ wenige Seiten auf Ebene 1 gibt
           oder dass es auf Ebene 2 viele Seiten und/oder Seiten mit langen Seitentiteln gibt. */
        /* Schrumpfen erlauben, wachsen nicht */
        flex: 0 1 auto;
        /* Verhindert, dass Text überläuft */
        overflow: hidden;
        /* Verhindert Umbrüche im Text */
        white-space: nowrap;

        padding-top: var(--space-0);
        padding-bottom: var(--space-0);
        transition:
            padding-top var(--transition-duration-short) ease,
            padding-bottom var(--transition-duration-short) ease;
        /* Diese Mindesthöhe muss (mindestens) genau so hoch sein wie ein li-Tag inklusive der padding-top und padding-bottom, die benutzt werden,
           wenn der li-Tag eingeblendet wird (li:hover, siehe unten).
           Mit dieser Mindesthöhe stelle ich sicher, dass der li-Tag immer mindestens diese Höhe einnimmt.
           Das ist relevant, wenn ich beim Sichtbarmachen der li-Tags deren padding-top und padding-bottom ändere.
           Mit der hier gesetzten min-height passt der li-Tag dann immer noch da rein.
           Wäre die Mindesthöhe nicht groß genug, würde sich beim Sichtbarwerden der li-Tags die Höhe des gesamten Kastens .sub ändern,
           so dass der Kasten .sub von der Höhe her wackelt. */
        min-height: 7.4rem;
    }

    /* Werte für das animierte Einblenden der li-Tags bei Hover und Fokussierung über dem Oberpunkt */
    .main-nav ul li:hover ul li,
    .main-nav ul li:focus-within ul li {
        padding-top: var(--space-md);
        padding-bottom: var(--space-0);
    }

    .main-nav .sub li a {
        /* Verhindert den Zeilenumbruch, falls der Text lang ist */
        white-space: nowrap;
        text-decoration: none;

        /* Mit max-width würde "..." angezeigt, wenn der Text abgeschnitten wird - siehe die flex-Eigenschaft für die li-Tags.
           Ggf. statt der max-width oder in Kombination mit ihr ein display: grid für .main-nav .sub nutzen? */
        /* max-width: 35rem; */
        overflow: hidden;
        text-overflow: ellipsis;

        margin: var(--space-0);
        /* Abstände */
        padding-block: var(--space-sm);
        padding-inline: var(--space-lg);
    }


    /* Hover-Effekt oder Fokussierung: Zeigt das Untermenü an */
    .main-nav li:hover .sub,
    .main-nav li:focus-within .sub {
        opacity: 1;
        pointer-events: auto;
    }

    /* Die Farbe eines Buttons auf Ebene 1 in zwei Fällen ändern:
       - Es wird über den Menüpunkt auf Ebene 1 oder in seinem Untermenü gehovert.
       - Der Menüpunkt auf Ebene 1 oder sein Untermenü ist fokussiert.
       Siehe .main-nav .navbar-nav > ul > li > a! */
    .main-nav .navbar-nav > ul > li:hover,
    .main-nav .navbar-nav > ul > li:focus-within {
        /* gleiche Farbe wie der aktive Menüpunkt */
        background-color: var(--main-nav-hover-bg-color);
    }

    /* Die Linie unter dem Menüpunkt bei aktiv/Hover/Focus animieren */
    .main-nav:not(:hover, :focus-within) li.active a span::after,
    .main-nav li:hover a span::after,
    .main-nav li:focus-within a span::after {
        transform: translateX(-50%) scaleX(1);
        opacity: 1;
    }

    /* Textfarbe der aktiven Links in der Rootline.
       :where() wird benutzt, um die Spezifität der Regel so abzusenken, dass sie zwar die Farbe aus .main-nav .navbar-nav a überschreibt,
       gleichzeitig aber die Regeln zu a:hover, a:focus-within und a:active spezieller sind. */
    .main-nav .navbar-nav :where(.active) > a {
        color: var(--main-nav-rootline-color);
    }
    /* Textfarbe der aktuellen Seite (current page).
       :where() wird benutzt, um die Spezifität der Regel so abzusenken, dass sie zwar die Farbe aus .main-nav .navbar-nav a überschreibt,
       gleichzeitig aber die Regeln zu a:hover, a:focus-within und a:active spezieller sind. */
    .main-nav .navbar-nav a:where([aria-current="page"]) {
        color: var(--main-nav-rootline-current-page-color);
    }


    /* Textfarbe auf den Buttons beim Hovern und Fokussieren anpassen.
       Die Regel muss spezieller sein als die Regeln für .active > a und a[aria-current="page"], damit sie die überschreibt. */
    .main-nav .navbar-nav a:hover,
    .main-nav .navbar-nav a:focus-within {
        color: var(--main-nav-link-color-hover);
    }

    /* Darstellung eines Menüpunkts in dem Moment, in dem er selbst angeklickt wird.
       Die Regel muss spezieller sein als die Regeln für .active > a und a[aria-current="page"], damit sie die überschreibt. */
    .main-nav .navbar-nav a:active {
        color: var(--main-nav-link-color-active);
    }

    /* Accessibility:
       Wenn ein Element mit der Tastatur angesprungen wird, wird ein Umriss gezeigt.
       Diese Hervorhebung im Hauptmenü etwas nach innen verschieben,
       so dass sie nicht von anderen Elementen (z.B. denen in der 2. Ebene) verdeckt wird,
       sondern komplett sichtbar ist.
       In Edge ist -1px ok, in Firefox müssen es -3px sein. */
    .main-nav a:focus-visible {
        outline-offset: -3px;
    }






    /* Kasten links mit der Side-Nav */
    .side-nav {
        /* Der Kasten soll in der zweiten Spalte anfangen */
        grid-area: side-nav;

        /* Höhe von .side-nav ist nicht die gesamte Höhe der Zeile mit .side-nav und main drin,
           sondern die Höhe seines Inhalts */
        height: fit-content;

        font-family: var(--font-family-sans-serif);
        font-size: var(--font-size-side-nav);

        /* Zeilenabstand für mehrzeilige Links */
        line-height: 1.5;

        background: var(--side-nav-bg-color);
        border-radius: var(--border-radius);
        box-shadow: 0 0.1rem 0.3rem var(--side-nav-box-shadow);
        padding: var(--space-md);
        margin-top: calc(1.5 * var(--space-6xl));
    }


    /* Vorab zun Aufbau des Stylings des Menüs:
       Es werden jeweils nur die Abweichungen zu den vorher gemachten Angaben gesetzt (Cascade eben).
       Das hält die gesetzten Styles übersichtlich. Solange sich die Gruppen an Styles nicht gegenseitig beeinträchtigen, funktioniert das ganz gut.
       (Z.B. "sub-menu" ist eingerückt. "active" enthält Angaben zur Farbe, aber gerade keine Angaben zu irgendeiner Einrückung).

       Zur Struktur des Stylings:
       Zuerst werden die ul-Tags gestylt, die die einzelnen Ebenen des Menüs enthalten.
       Danach die untergeordneten ul-Tags.
       Danach die a-Tags in den li-Tags (= alle a-Tags im Menü, egal auf welcher Ebene und an welcher Stelle).
       Schließlich Menüpunkte in der Rootline und den gerade aktiven Menüpunkt noch gesondert hervorheben. */
    .side-nav ul {
        /* Keine Listensymbole anzeigen */
        list-style-type: none;

        /* Abstand des Menüs vom oberen Rand des Kastens .side-nav (Browser-Style) entfernen. */
        margin-block: var(--space-0);
        padding-left: var(--space-0);
    }

    /* Untergeordnete ul-Tags (= ul-Tags um Untermenüs) */
    .side-nav ul.sub-menu {
        /* ul-Tags nach rechts einrücken */
        margin-left: var(--space-xl);
    }

    /* Würde man die folgenden Regeln direkt auf die die a-Tags umgebenden li-Tags anwenden,
       hätte das das Problem, dass wenn Unterseiten vorhanden sind, der Hintergrund der oberen Seite und ihr Hintergrund
       auch in die Zeilen der Unterseiten ragen, was nicht gewollt ist und schlecht aussieht.
       Das lässt sich dadurch lösen, dass die grafischen Effekte (also z.B. background)
       nicht dem li, sondern nur dem a-Tag zugeordnet werden. */
    .side-nav a {
        display: block;

        text-decoration: none;

        padding-block: var(--space-sm);
        padding-inline: var(--space-md);

        /* Farben der Links im Menü je nach Status noch gezielt setzen */
        color: var(--side-nav-link-color);
        border-radius: var(--border-radius);

        /* Hintergrundfarbe */
        background-color: var(--side-nav-a-bg-color);
        /* Transition. color wird weiter unten gesetzt */
        transition: background-color var(--transition-duration-short) ease-in-out, color var(--transition-duration-short) ease-in-out;
    }

    .side-nav a:visited {
        color: var(--side-nav-visited-link-color);
    }

    /* Das ist eine Seite in der aktuellen Rootline (aber nicht current).
       Spezifität absichtlich niedrig halten; :where() senkt die Spezifität des enthaltenen Elements auf 0. */
    .side-nav :where(.active):not(.current) > a {
        color: var(--side-nav-rootline-link-color);
    }

    /* Hover/Fokus danach => gewinnt gegen .active durch Reihenfolge */
    .side-nav a:hover,
    .side-nav a:focus-visible {
        color: var(--side-nav-hovered-link-color);
        /* Anderen Hintergrund verwenden. */
        --side-nav-a-bg-color: var(--side-nav-a-hover-bg-color);
    }

    .side-nav a:active {
        /* Gleiche Anklick-Farbe wie beim Menü header. */
        color: var(--side-nav-active-link-color);
    }

    /* Current ganz am Ende => gewinnt gegen Hover.
       Das ist die aktuelle Seite (current page) */
    .side-nav .active.current > a {
        color: var(--side-nav-rootline-current-link-color);
        --side-nav-a-bg-color: var(--side-nav-rootline-current-page-bg-color);
    }

    /* Current Hover als letzte Regel */
    .side-nav .active.current > a:hover,
    .side-nav .active.current > a:focus-visible {
        --side-nav-a-bg-color: var(--side-nav-rootline-current-page-hover-bg-color);
    }










    /* Kasten mit dem Seiteninhalt */
    main {
        /* Der Kasten soll in der dritten Spalte anfangen */
        grid-area: main;

        /* Erhöhter Zeilenabstand; soll für den gesamten Inhalt wirken
           Beachte, dass dieser Zeilenabstand nicht nur für "normalen" Text passen muss, sondern auch für Text,
           den der Autor größer oder kleiner gesetzt hat. CKEditor.yaml ermöglicht Werte zwischen 0.8em und 2em.
           Auch für diese Werte muss der hier gesetzte Wert passen.
           Das ist bei einer Angabe in Prozent nicht der Fall, bei einer ohne Einheit dagegen schon. */
        line-height: 1.85;

        color: var(--main-text-color);
    }



    /* Überschriften im Inhaltsbereich stylen (verwendet werden hier h1 bis h3) */
    main h1, main h2, main h3 {
        font-family: var(--font-family-serif);
        text-wrap: balance;
        hyphens: auto;
    }
    main h1 {
        color: var(--main-headline-color);
        font-size: var(--font-size-h1);
        font-weight: 700;
        text-align: center;
        /* Angepasster Zeilenabstand */
        line-height: 1.2;

        margin-top: var(--space-xl);
        margin-bottom: var(--space-5xl);
    }
    main h2 {
        color: var(--main-headline-accent-color);
        font-size: var(--font-size-h2);
        font-weight: 400;
        text-align: left;
        margin-top: calc(1.4 * var(--space-5xl));
        margin-bottom: var(--space-lg);
        line-height: 1.35;
    }
    main h1 + div > header > h2 {
        /* Den Abstand über der h2-Überschrift im ersten Geschwister direkt unter der h1 hier auf 0 setzen.
           Den tatsächlichen Abstand unter der h1 regeln wir stattdessen mit margin-bottom für main h1. */
        margin-top: var(--space-0);
    }
    main h3 {
        color: var(--main-headline-color);
        font-size: var(--font-size-h3);
        font-weight: 700;
        margin-top: var(--space-lg);
        /* Kein zusätzlicher Abstand zum folgenden Text. Zum folgenden Absatz bleibt damit
           derselbe Abstand, der auch zwischen Absätzen steht. */
        margin-bottom: var(--space-0);
        line-height: 1.45;
    }



    /* Abstand für jeden Textabsatz festlegen */
    main p {
        margin-top: var(--space-md);
        margin-bottom: var(--space-md);
        text-wrap: pretty;
    }



    /* Abstand der Unterstreichung von Links etwas vergrößern (ebenso für footer a) */
    main a {
        text-underline-offset: 0.25em;
    }

    /* Für Links im Text ein leichtes Glühen hinzufügen */
    main a:hover:not(.back-to-top a) {
        text-shadow: 1px 1px 2px var(--main-link-text-shadow);
    }

    /* Die Linkfarbe und den Textschatten nicht abrupt, sondern über eine kurze Zeit umstellen, aber nicht bei den Links nach oben.
       Und auch nicht, wenn der Link im Zustand :active ist, er also gerade angeklickt ist.
       Das :where() um den Selektor hilft, die Spezifität gering zu halten. So lässt sich die Regel trotz ihrer Komplexität noch
       relativ leicht überschreiben, z.B. mit .subpage-cards .card__cta a in der Erweiterung subpage_cards,
       selbst wenn das in einem vorhergehenden Layer stehen sollte. */
    main a:where(:not(.back-to-top a):not(:active)) {
        transition: color var(--transition-duration) ease, text-shadow var(--transition-duration) ease;
    }



    /* padding-left für Listen noch anpassen; beträgt als Standard 40px (Browserstandard).
       Um nicht das Menü Links zu beeinträchtigen main vorschalten! */
    main ul, main ol {
        padding-left: var(--space-4xl);
        /* Gleicher Abstand vor und nach einer Liste wie vor und nach einem Absatz oder einer Tabelle */
        margin-top: var(--space-md);
        margin-bottom: var(--space-md);
    }



    main table {
        /* Tabelle auf Seite zentrieren und Maximalbreite etwas verringern, damit die Tabelle nicht an den Rand stößt */
        max-width: calc(100% - 3rem);
        margin-inline: auto;

        /* Abstand nach oben und unten (sieht damit genau so aus wie nach einem Absatz oder einer Liste) */
        margin-block: var(--space-md);

        /* Unterer Rahmen des Tabellenkopfes soll angezeigt werden, wenn in die Tabelle gescrollt wird.
           Nötig für sticky Header */
        border-collapse: separate;
        border-spacing: 0;
        /* Nötig, damit der runde Box-Shadow nicht von den Ecken der Tabelle überdeckt wird */
        border-radius: var(--border-radius);
        border-width: 0px;

        box-shadow: 0rem 0.2rem 0.4rem var(--main-table-box-shadow);
        color: var(--main-table-text-color);

        /* Schriftgröße und Zeilenhöhe nochmal setzen: inherit setzt die Werte des ersten Elternelements,
           für das sie gesetzt sind: Die Schriftgröße von body und die Zeilenhöhe von main
           (die werden in Firefox wegen quirk.css nicht automatisch angewandt). */
        font-size: inherit;
        line-height: inherit;
    }

    /* Responsive Tabellen: horizontal scrollt NUR die Tabelle, nicht die gesamte Seite */
    main figure.table {
        /* Tabelle auf Seite zentrieren und Maximalbreite etwas verringern, damit die Tabelle nicht an den Rand stößt */
        max-width: calc(100% - 3rem);
        margin-inline: auto;
        /* Abstand nach oben und unten (sieht damit genau so aus wie nach einem Absatz oder einer Liste) */
        margin-block: var(--space-md);
    }

    /* Tabelle innerhalb des Wrappers nicht nochmal künstlich begrenzen/zentrieren */
    main figure.table > table {
        /* überschreibt main figure.table { max-width: ... } */
        max-width: none;
        /* überschreibt main figure.table { margin-inline: auto } */
        margin-inline: 0;
        /* Wrapper hat bereits margin-block */
        margin-block: 0;

        /* Browser berechnet Spaltenmaß nach Inhalt; führt zu optimalen Spaltenbreiten */
        table-layout: auto;
        /* sorgt dafür, dass breite Tabellen wirklich "überlaufen" dürfen */
        /* intrinsische Breite nach Inhalt */
        width: min(max-content, calc(100% + 20rem));
        /* wenn Inhalt kleiner ist als Container, schrumpft die Tabelle */
        min-width: min(100%, max-content);
    }

    main th, main td {
        padding-inline: var(--space-md);
        padding-block: var(--space-sm);
        vertical-align: top;

        /* Spalten nicht zu schmal werden lassen (ist vor allem auf schmalen Bildschirmen wichtig,
           wo wegen des fehlenden Platzes die Spalten sonst sehr schmal werden können. */
        min-width: 10rem;
        max-width: 50rem;
        /* Silbentrennung an mehr Stellen erlauben (basiert auf der Sprache aus dem lang-Attribut am HTML-Element).
           Damit werden Tabellen nicht so schnell zu breit (was sonst bei schmalen Viewports zu horizontalem Scrollen führen kann). */
        hyphens: auto;

        /* Zeilenumbruch möglich */
        white-space: normal;
        /* lange Worte umbrechen */
        word-break: break-word;
    }
    /* Die Rahmen für Tabellen setzen.
       Bei sticky Headers besteht das Problem, dass beim Herunterscrollen in die Tabelle
       der untere Rahmen unter der Kopfzeile nicht mehr angezeigt wird.
       Um das zu vermeiden, pro Zelle jeweils den rechten und den unteren Rahmen zeigen
       und in der obersten Zeile auch den oberen sowie in der ersten Spalte den linken. */
    main th {
        background-color: var(--main-table-head-background-color);

        border-top: 1px solid var(--main-table-border-color);
        border-bottom: 1px solid var(--main-table-border-color);
    }
    main td {
        border-bottom: 1px solid var(--main-table-border-color);
    }
    main table th:first-child,
    main table td:first-child {
        /* Linken Rahmen für das erste <td> und <th> in einer Zeile anzeigen */
        border-left: 1px solid var(--main-table-border-color);
    }
    main table th:last-child,
    main table td:last-child {
        /* Rechten Rahmen für das letzte <td> und <th> in einer Zeile anzeigen */
        border-right: 1px solid var(--main-table-border-color);
    }
    /* Tabelle ohne Kopfzeilen: Oberen Rahmen ergänzen */
    main table tbody:first-child tr:first-child td {
        border-top: 1px solid var(--main-table-border-color);
    }

    /* Alterierende Hintergrundfarben
       Die oberste Zeile der Tabelle bekommt die Hintergrundfarbe und zwar
       sowohl, wenn es einen thead-Bereich gibt, als auch wenn es keinen gibt. */
    main table:has(thead) tbody tr:nth-child(2n) td,
    main table:not(:has(thead)) tbody tr:nth-child(2n+1) td {
        background-color: var(--main-table-bg-zebra-color);
    }

    /* Runde Ecken für die Tabelle und zwar sowohl wenn sie ein thead-Element hat als auch ohne. */
    main table th:first-child,
    main table:not(:has(thead)) tbody tr:first-child td:first-child  {
        border-top-left-radius: var(--border-radius);
    }
    main table th:last-child,
    main table:not(:has(thead)) tbody tr:first-child td:last-child {
        border-top-right-radius: var(--border-radius);
    }
    main table tr:last-child td:first-child {
        border-bottom-left-radius: var(--border-radius);
    }
    main table tr:last-child td:last-child {
        border-bottom-right-radius: var(--border-radius);
    }

    main .ce-gallery {
        /* Abstand über einer Bildergalerie hinzufügen.
           Der würde fehlen, wenn direkt über der Galerie ein header h3-Element steht.
           Steht direkt über der Galerie ein p-Absatz, wäre der Abstand (ebenfalls) zu gering.
           !important gesetzt, um die (zahlreichen) spezielleren Eigenschaften aus TYPO3 zu überschreiben. */
        margin-top: var(--space-xl) !important;

        /* Unter Bildblöcken einen ähnlichen Abstand einfügen, wie er auch unter Textabsätzen oder einer Tabelle steht.
           Ohne hängt der nächste Absatz oder z.B. der direkt folgende Link "nach oben"
           ohne Abstand direkt unter dem Bildblock. */
        margin-bottom: var(--space-xl) !important;
    }

    main img {
        display: block;
        /* Bilder nicht zu groß anzeigen (z.B. auf der Startseite), so dass sie nicht über die Seite herausragen
           und damit auch Inhaltstext zu breit werden lassen.
           Ist auch für die Druckansicht relevant: Würden die Bilder da zu breit,
           würde der Text ebenfalls genau so breit und der würde dann im Seitenrand abgeschnitten */
        max-width: 100%;
        height: auto;
        border-radius: var(--border-radius);
    }

    /* Ein Bild im Seiteninhalt, das per Lightbox vergrößerbar ist, animiert vergrößern, wenn es gehovert wird */
    main .ce-gallery figure {
        /* Diese Angaben für das umgebende .ce-gallery figure sind nötig, damit beim Vergrößern die Ecken des Bildes weiter rund aussehen */
        border-radius: var(--border-radius);
        overflow: hidden;
    }
    main .ce-gallery a.lightbox img {
        transition: transform var(--transition-duration) ease;
    }
    main .ce-gallery a.lightbox img:hover {
        transform: scale(1.05);
    }

    /* Bildbeschriftung etwas kleiner darstellen */
    main .image-caption {
        font-size: var(--font-size-image-caption);
        line-height: 1.25;
        margin-top: var(--space-sm);
        margin-bottom: var(--space-md);
    }


    main div.text-center {
        text-align: center;
    }


    /* Ausrichtung von Text im RTE
       Muss nach allen anderen text-align-Formatierungen für main stehen!
       Sind die Angaben mit p.xxx nötig? Sind die ohne p. nötig? Nicht, wenn wirklich _jede_ Zeile in p-Tags gewrappt wird.
       Eleganterer Weg als diese lange Liste? */

    /* linksbündig */
    main .text-start, main p.text-start, main .text-start p {
        text-align: left;
    }

    /* zentriert */
    /* Der letzte Teil mit dem hinterhergezogenen p (main .text-center p) ist nötig,
       damit in Tabellen mit p-Tags in den Zellen die Formatierung übernommen wird. */
    main .text-center, main p.text-center, main .text-center p {
        text-align: center;
    }

    /* rechtsbündig */
    main .text-end, main p.text-end, main .text-end p {
        text-align: right;
    }

    /* Blocksatz */
    main .text-justify, main p.text-justify, main .text-justify p {
        text-align: justify;
    }


    /* Schriftgrößen von Text im RTE
       Die Schriftgrößen für die vier Schlüsselworte tiny, small, big und huge definieren. */
    main .text-tiny {
        font-size: var(--font-size-text-tiny);
    }
    main .text-small {
        font-size: var(--font-size-text-small);
    }
    /* Der RTE ist so konfiguriert, dass er zwischen small und big noch "Standard" anzeigt.
       Diese Option entfernt eine evtl. zuvor gesetzte Größe, so dass die Standardgröße von Text greift: --font-size-body. */
    main .text-big {
        font-size: var(--font-size-text-big);
    }
    main .text-huge {
        font-size: var(--font-size-text-huge);
    }


    /* Die Indexed-Search-Suche stylen */
    /* Größerer Zeilenabstand auf der Suchseite
       margin-top ist gut, um die Suchbox etwas nach unten zu bringen. */
    main .tx-indexedsearch-searchbox {
        line-height: 1.85;
        margin-top: var(--space-3xl);
        margin-bottom: var(--space-lg);
    }
    /* Die Legende des Suchfelds (wird wie eine zusätzliche Überschrift eingesetzt) nicht anzeigen */
    main .tx-indexedsearch-searchbox legend {
        display: none;
    }
    /* Den Text "Suchen nach..." so ähnlich wie eine Überschrift h1 stylen */
    main .tx-indexedsearch-info-sword {
        font-family: var(--font-family-serif);
        font-size: var(--font-size-indexed-search-sword);
        margin-top: var(--space-3xl);
    }
    /* Styling der Übersichtsbox "Anzeige der Ergebnisse 1 bis xx von insgesamt yy" */
    main .tx-indexedsearch-browsebox {
        margin-top: var(--space-sm);
        margin-bottom: var(--space-0);
    }
    /* Die Übersichtsbox, die unter den Suchergebnissen erscheint und die Links zu den nächsten Seiten enthält, anpassen */
    main div.tx-indexedsearch-browsebox:last-child {
        margin-bottom: var(--space-xl);
    }
    /* Zeile mit den Links zu den unterschiedlichen Trefferseiten (wenn es viele Treffer gibt) nicht einrücken */
    main .tx-indexedsearch-browsebox ul {
        padding-left: var(--space-0);
    }
    /* Links zu den unterschiedlichen Trefferseiten (wenn es viele Treffer gibt) in einer Zeile darstellen */
    main .tx-indexedsearch-browsebox li {
        display: inline;
        margin-inline: var(--space-sm);
    }
    /* In den einzelnen Ergebnissen die Treffernummer, die Prozentangabe und die Detail-Zeile (mit Größe, Erstellt, Geändert, Pfad) nicht anzeigen */
    main .tx-indexedsearch-result-number,
    main .tx-indexedsearch-percent,
    main .tx-indexedsearch-info {
        display: none;
    }
    /* Etwas Abstand zum nächsten Suchergebnis hinzufügen */
    main .tx-indexedsearch-res {
        margin-bottom: var(--space-lg);
    }
    /* Bei den einzelnen Ergebnissen die Überschrift (= den Link zur Seite) in passender Größe zeigen */
    main .tx-indexedsearch-title {
        font-size: var(--font-size-menu-item);
    }
    /* Keinen zu großen Abstand in einem Suchergebnis über und unter der Überschrift des Treffers */
    main .tx-indexedsearch-res h3 {
        /* Da das nicht die Seitenüberschrift ist (das ist auf der Suchseite das Wort "Suche"), sondern da es nur ein Link zu einer Seite ist,
           verwenden wir nicht das Styling einer Seitenüberschrift, sondern das von Fließtext. */
        font-family: var(--font-family-sans-serif);
        margin-top: var(--space-sm);
        margin-bottom: var(--space-xs);
    }
    /* Beschreibungstext der Suchtreffer kursiv setzen */
    main .tx-indexedsearch-description {
        font-style: italic;
        margin-top: var(--space-sm);
    }
    /* In den Treffern das Suchwort rot färben */
    main .tx-indexedsearch-redMarkup {
        color: var(--main-searchword-text-color);
    }



    /* Die Sitemap etwas einrücken */
    main .frame-type-menu_sitemap {
        margin-left: var(--space-lg);
    }
    /* Jede Ebene etwas mehr einrücken */
    main .frame-type-menu_sitemap ul {
        padding-left: var(--space-5xl);
    }



    /* Styling der Elemente der Lightbox SimpleLightbox anpassen - die Schrift etwas größer machen und Abstände und Farben anpassen */
    .sl-wrapper[aria-hidden="false"] {
        /* Hintergrund unscharf machen, wenn Lightbox geöffnet - Firefox unterstützt diesen Code nicht, der Code ist aber dennoch richtig */
        backdrop-filter: blur(2px);
        /* Geöffnetes Bild vor das Hauptmenü legen */
        z-index: 1250;
    }
    .sl-wrapper .sl-counter {
        color: var(--footer-text-color);
        background-color: var(--footer-bg-color);
        border-radius: var(--border-radius);
        font-size: var(--font-size-simple-lightbox-counter);
        top: 23px;
        padding-block: var(--space-md);
        padding-inline: var(--space-2xl);
    }
    .sl-wrapper .sl-close {
        font-size: var(--font-size-simple-lightbox-button);
        top: 23px;
    }
    .sl-wrapper .sl-close, .sl-wrapper .sl-navigation button {
        color: var(--button-text-color);
        background-color: var(--button-bg-color);
        border-radius: var(--border-radius);
    }
    .sl-wrapper .sl-close:hover, .sl-wrapper .sl-navigation button:hover {
        background-color: var(--button-hover-bg-color);
    }
    .sl-wrapper .sl-close:active, .sl-wrapper .sl-navigation button:active {
        background-color: var(--button-active-bg-color);
        /* Skalierungseffekt hinzufügen - derselbe Effekt wie bei Buttons nach oben */
        animation: buttonPress var(--transition-duration-short) ease;
    }
    .sl-wrapper .sl-image .sl-caption {
        font-size: var(--font-size-simple-lightbox-caption);
    }



    /* back-to-top-Links und Buttons im Inhalt formatieren */
    /* In den folgenden Definitionen werden die Links "nach oben" immer mit "main .back-to-top" angesprochen.
       Der Teil "main input[type="button"]" und "main input[type="submit"]" spricht Input-Elemente an,
       die das Attribut type und diesem zugeordnet den Wert "button" bzw. "submit" haben.
       (Das sind anklickbare Buttons, wie z.B. beim Abschicken des Such-Formulars.)
       Beachte auch die gesonderten Anpassungen nur für diese Elemente einige Blöcke weiter unten!

       Das letzte Element hat einen gesonderten Abstand (s. Regel etwas tiefer). */
    main .back-to-top, main input[type="button"], main input[type="submit"] {
        font-family: var(--font-family-sans-serif);
        font-size: var(--font-size-menu-item);

        text-align: center; /* Textausrichtung _im_ Element */

        /* Das Element selbst nach rechts ausrichten */
        display: block;
        margin-left: auto;
        margin-right: var(--space-0);

        /* Verhindern, dass das Element über die gesamte Breite seines Elternelements geht */
        width: fit-content;

        /* Border-Radius */
        border-radius: var(--border-radius-buttons);
        corner-shape: squircle;

        box-shadow: 0rem 0.1rem 0.3rem var(--button-box-shadow);

        /* Kommt ein Button in diesen Zustand (d.h. nachdem er gehovert wurde)
           den Box-Shadow nicht abrupt, sondern ihn über eine kurze Zeit wieder reduzieren.
           So gesetzt für die Elemente, die einen Box-Shadow haben, der sich beim Hovern verändert:
           Buttons im Hauptmenü, Bild im Hauptmenü, Buttons "nach oben" Input-Elemente,
           die den type "button" oder "submit" haben.
           <Eigenschaft> <Dauer> <Art> <Verzögerung> */
        transition: box-shadow var(--transition-duration) ease-in-out;
    }
    main .back-to-top {
        min-width: 7.1em;

        margin-top: var(--space-xl);
        margin-bottom: var(--space-5xl);

        user-select: none;
    }
    /* Hover-Effekt */
    main .back-to-top:hover, main input[type="button"]:hover, main input[type="submit"]:hover {
        box-shadow: 0rem 0.4rem 1rem var(--button-hover-box-shadow);
    }
    /* Anklick-Effekt */
    main .back-to-top:active, main input[type="button"]:active, main input[type="submit"]:active {
        /* Skalierungseffekt hinzufügen
           Sofortiger Farbwechsel (siehe unten), aber mit sanfter Skalierungsanimation */
        animation: buttonPress var(--transition-duration-short) ease;
    }
    /* Den Farbverlauf für den Hintergrund und den Box-Shadow für den Button können wir nicht für dasselbe Element setzen.
       Grund ist, dass der Browser nicht beide Änderungen gleichzeitig animieren kann; der Box-Shadow würde dann nicht animiert,
       sondern - auch wenn er keine Verzögerung angegeben hat) nach Ende der Animation der Hintergrundfarbe abrupt geändert.
       Das umgehen wir, indem wir beides für unterschiedliche Elemente setzen. */
    main .back-to-top a {
        display: block; /* a-Tag so breit darstellen, dass das div-Element bis an den Rand klickbar ist */

        color: var(--button-text-color);
        text-decoration: none;

        /* Wenn ein Element mit der Tastatur angesprungen wird, wird ein Umriss gezeigt.
           Border-Radius so anpassen, dass auch der Umriss die runden Ecken des Elements hat,
           so dass der Umriss zum Rahmen des Elements passt. */
        border-radius: var(--border-radius-buttons);
        corner-shape: squircle;

        padding-block: var(--space-sm);
        padding-inline: var(--space-xl);

        background-color: var(--button-bg-color);

        transition: --button-bg-color var(--transition-duration) ease;
    }

    /* Formulare (die dann wiederum Input-Elemente wie main input[type="button"], main input[type="submit"] enthalten) mittig ausrichten */
    main fieldset {
        margin-inline: auto;
        max-width: 40rem;
        border: none;
    }

    /* Buttons in Formularen etwas anders stylen als Buttons "nach oben" */
    main input[type="button"], main input[type="submit"] {
        margin-top: var(--space-2xl);
        margin-bottom: var(--space-2xl);

        color: var(--button-text-color);

        /* Höhe des Buttons angepasst, so dass er genau so hoch ist, wie ein Button "nach oben" */
        line-height: inherit;
        padding-block: var(--space-sm);
        padding-inline: var(--space-xl);

        cursor: pointer;

        /* Den standardmäßig von einigen Browsern gesetzten Rahmen entfernen */
        border: none;

        /* Hiermit sind der Wechsel der Hintergrundfarbe und des Box-Shadow auf demselben Element
           und es werden nicht beide Animationen gleichzeitig angezeigt, obwohl sie das sollten. */
        background-color: var(--button-bg-color);
        transition: --button-bg-color var(--transition-duration) ease;
    }

    /* Texteingabefeld */
    main input[type="text"] {
        margin-top: var(--space-xl);
        width: 100%;
        padding: var(--space-xs);
    }

    main .back-to-top a:hover, main input[type="button"]:hover, main input[type="submit"]:hover,
    main .back-to-top a:focus-visible, main input[type="button"]:focus-visible, main input[type="submit"]:focus-visible {
        --button-bg-color: var(--button-hover-bg-color);
    }

    /* Anklick-Effekt */
    main .back-to-top a:active, main input[type="button"]:active, main input[type="submit"]:active {
        --button-bg-color: var(--button-active-bg-color);

        transition-duration: 0s;
    }

    @keyframes buttonPress {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(0.95);
        }
        100% {
            transform: scale(1);
        }
    }

    /* Wenn der Button mit der Tastatur angesprungen wird, den blauen Rahmen ergänzen
       (bei den Buttons "nach oben" ist der schon automatisch da) */
    main input[type="button"]:focus-visible, main input[type="submit"]:focus-visible {
        outline-style: auto;
    }


    /* In dem letzten Element des Typs div, das direkt in "main" steht,
       darin das letzte .back-to-top-Element soll keinen gesonderten unteren Abstand haben.
       Der gewünschte Abstand unter dem letzten Inhaltselement wird bereits durch das Grid-System erzeugt (siehe row-gap).

       Der relativ große untere Abstand (siehe .back-to-top) soll nicht noch zusätzlich folgen.
       Der Selektor :last-of-type war früher nötig, weil bei aktiviertem FE-Editing nach dem letzten Inhaltselement in main
       noch ein Link des Edit-Panels folgte. Die folgende Regel greift auch in diesem Fall. */
    main > div:last-of-type > .back-to-top:last-child {
        margin-bottom: var(--space-0);
    }








    /* Layout des Seitenfußes festlegen */
    footer {
        /* Der Seitenfuß soll (wie der Kopf) über alle Spalten des Grid-Designs gehen. */
        grid-area: footer;
        /* Breite muss dann explizit auf 100% gesetzt werden */
        width: 100%;

        font-family: var(--font-family-sans-serif);
        font-size: var(--font-size-menu-item);

        color: var(--footer-text-color);
        text-align: center;

        padding-block: var(--space-3xl);
        padding-inline: var(--space-5xl);
        min-height: 12.4rem;

        /* 4px horizontal, -4px (also nach oben) vertikal verschoben und 10px blur; entsprechend für header */
        box-shadow: 0.4rem -0.4rem 1rem var(--footer-box-shadow);

        background: var(--footer-bg-color);
        accent-color: var(--footer-accent-color);
    }

    footer .footer-container {
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        /* Ermöglicht es den Elementen auf kleineren Bildschirmen flexibel eines nach dem anderen umzubrechen,
           so dass sie teilweise noch nebeneinander und teilweise schon untereinander stehen */
        flex-wrap: wrap;
        margin-left: var(--space-5xl);
        /* Abstand zur folgenden Zeile mit dem Copyright-Vermerk erzeugen */
        margin-bottom: var(--space-lg);
    }

    /* Durch entsprechende Konfiguration in den Site-Settings ist es möglich, dass z.B. die Spalte "Kontakt"
       nur noch die Überschrift, aber kein einziges Element mehr enthält.
       In diesem Fall die Spalte ausblenden. */
    footer .footer-column:has(> h2:only-child) {
        display: none;
    }

    footer .footer-column {
        display: grid;
        text-align: left;
        padding-inline: var(--space-lg);
    }

    footer h2 {
        font-size: var(--font-size-footer-header);
        font-family: var(--font-family-serif);
        margin-top: var(--space-2xl);
        margin-bottom: var(--space-3xl);
    }

    footer ul {
        padding-left: var(--space-0);
        margin-top: -0.75em;
    }

    footer li {
        list-style-type: none;
        margin-block: var(--space-md);
        line-height: 1.5;
    }

    footer .footer-container .icon-grid p {
        margin-top: var(--space-0);
        margin-bottom: var(--space-xs);
    }

    footer a {
        color: var(--footer-text-color);
        text-decoration: underline;
        /* Abstand der Unterstreichung von Links etwas vergrößern (ebenso für main a) */
        text-underline-offset: 0.25em;
        padding: var(--space-0);
        margin-inline: var(--space-0);
        /* Hinzugefügt für smooth Hover-Effekt */
        transition: color var(--transition-duration) ease;
    }
    footer a:visited {
        color: var(--footer-visited-link-color);
    }
    footer a:hover,
    footer a:focus-within {
        color: var(--footer-hovered-link-color);
    }
    footer a:active {
        color: var(--footer-active-link-color);
    }

    /* Icon und den Text daneben ausrichten */
    footer .icon-grid {
        display: grid;
        grid-template-columns: auto 1fr;
        /* Das Symbol neben der ersten Zeile ausrichten
           (relevant bei Zeilenumbruch, z.B. bei schmalem Viewport) */
        align-items: flex-start;
        gap: 0.6rem;
        margin-bottom: var(--space-lg);
    }

    footer .icon-grid:last-child {
        margin-bottom: var(--space-0);
    }

    footer .icon {
        /* Die Icons haben nicht von Haus aus die passenden Abmessungen, daher hier beides fix setzen */
        min-width: 28px;
        height: 28px;
        /* Füllfarbe entsprechend der Textfarbe setzen */
        fill: var(--footer-text-color);

        transition: transform var(--transition-duration) ease, fill var(--transition-duration) ease;
    }

    /* Hover-Effekt: Icon leicht nach links drehen, wenn die Maus über ein a-Tag im nachfolgenden Geschwister fährt
       oder das Icon fokussiert ist. * erfasst alle folgenden Geschwister (z.B. p und div). */
    footer .icon:has(~ * a:hover),
    footer .icon:has(~ * a:focus-within) {
        transform: rotate(-15deg);
        fill: var(--footer-hovered-link-color);
    }

    footer .icon:has(~ * a:active) {
        fill: var(--footer-active-link-color);
    }

    /* Die E-Mail-Adresse umbrechen und das Icon links direkt neben ihr halten (und nicht zu weit nach links entfernt) */
    footer .icon-grid .email-container a {
        display: inline-flex;
        max-width: min-content;
        /* Erlaubt den Umbruch der E-Mail-Adresse */
        flex-wrap: wrap;
        /* Verhindert, dass die E-Mail-Adresse über den verfügbaren Platz hinausgeht. Stattdessen bricht sie um */
        word-wrap: break-word;
    }

    footer .footer-bottom p {
        margin-top: var(--space-0);
        /* Unterer Abstand passend zum oberen Abstand über den h2-Überschriften, so dass der gesamte Inhalt des Footers
           in dem Footer-Element vertikal zentriert wird */
        margin-bottom: var(--space-2xl);
    }

    /* Falls alle drei Spalten im Footer ausgeblendet sind, so dass .footer-container keine Kindelemente mehr hat,
       den margin-top über .footer-bottom p so erhöhen, dass er genau so hoch ist wie der margin-bottom.
       Das zentriert .footer-bottom p vertikal. */
    .footer-container:not(:has(*)) + .footer-bottom p {
        margin-top: var(--space-2xl);
    }


    /* Such-Overlay-Wrapper */
    .search-overlay-wrap {
        position: fixed;
        inset: 0;
        display: grid;
        justify-items: center;
        align-items: start;
        text-align: left;
        /* Wrapper selbst soll keine Klicks und kein Hover "fangen" */
        pointer-events: none;
    }

    /* Such-Overlay als Popover */
    .search-overlay[popover] {
        /* Panel ist interaktiv */
        pointer-events: auto;
        margin: var(--space-0);
        padding: var(--space-0);
        border: none;
        background: transparent;

        width: min(
            var(--search-overlay-max-inline-size),
            calc(100vw - 2 * var(--search-overlay-inline-gutter))
        );
        top: var(--search-overlay-offset-top);

        /* div zentrieren */
        left: 50%;
        transform: translateX(-50%);
        /* Inhalt zentrieren */
        justify-content: center;
    }

    .search-overlay:popover-open {
        /* offen */
        display: flex;
    }

    /* Halbtransparenter Hintergrund - erzeugt den "Mask"-Effekt */
    .search-overlay::backdrop {
        background: var(--search-overlay-bg-color);
        backdrop-filter: blur(2px);
    }

    /* Panel mit dem Suchformular */
    .search-overlay .search-overlay__panel {
        position: relative;
        width: min(
            var(--search-overlay-max-inline-size),
            calc(100vw - 2 * var(--search-overlay-inline-gutter))
        );
    }

    /* Sicherstellen, dass man nicht durch das Popover hindurch in die Seite hovern kann */
    html:has(.search-overlay:popover-open) .page {
        pointer-events: none;
    }
    html:has(.search-overlay:popover-open) .search-overlay {
        pointer-events: auto;
    }

    /* Sicherstellen, dass der Hintergrund hinter dem offenen Popover nicht scrollbar ist */
    body.scroll-lock {
        position: fixed;
        width: 100%;
        left: 0;
        right: 0;
        overflow: hidden;
    }
    /* Wiederherstellen der Scrollposition nach Schließen des Popovers nicht mit smooth-scroll animieren */
    html.no-smooth-scroll {
        scroll-behavior: auto;
    }

    /* Weiße abgerundete Suchbox (wie beim Hauptmenü) */
    .search-overlay .search-form__inner {
        background: var(--search-overlay-form-bg-color);
        border-radius: var(--border-radius);
        padding-block: var(--space-md);
        padding-inline: var(--space-lg);
        display: flex;
        align-items: center;
        gap: var(--space-md);
        box-shadow: 0 1rem 3rem var(--search-overlay-form-inner-box-shadow);
        border: 1px solid var(--search-overlay-form-inner-border-color);
    }

    .search-overlay .search-form__icon {
        /* Ausrichtung explizit setzen, damit das Icon vertikal richtig zentriert werden kann */
        height: 18px;
    }

    /* Icon im Inputfeld */
    .search-overlay .search-form__icon svg {
        width: 18px;
        height: 18px;
        fill: var(--search-overlay-icon-color);
    }

    /* Input-Styling */
    .search-overlay .search-form input[type="search"] {
        flex: 1 1 auto;
        border: none;
        background: transparent;
        color: var(--search-overlay-form-text-color);
        font-size: var(--font-size-search-input);
        min-width: 120px;
        outline: none;
    }
    .search-overlay .search-form__submit {
        border: none;
        background: var(--button-bg-color);
        color: var(--search-overlay-form-submit-text-color);
        /* Browser-Standards bei padding überschreiben/vereinheitlichen */
        padding-block: 0rem;
        padding-inline: calc(1.2 * var(--space-xl));
        height: 4.8rem;
        border-radius: var(--border-radius-buttons);
        corner-shape: squircle;
        cursor: pointer;
    }

    /* Effekte :hover und :active wie bei den Buttons nach oben */
    .search-overlay .search-form__submit:hover,
    .search-overlay .search-form__submit:focus-visible {
        --button-bg-color: var(--button-hover-bg-color);
    }

    .search-overlay .search-form__submit:active {
        --button-bg-color: var(--button-active-bg-color);
        animation: buttonPress var(--transition-duration-short) ease;
    }

    /* Schließen-Button oben rechts im Panel */
    .search-overlay .search-overlay__close {
        position: absolute;
        right: 2px;
        top: 2px;
        z-index: 2;
        background: transparent;
        border: none;
        font-size: 14px;
        color: var(--search-overlay-close-icon-color);
        cursor: pointer;
    }

    /* Hint-Text */
    .search-overlay .search-overlay__hint {
        text-align: center;
        color: var(--search-overlay-hint-color);
        margin-top: var(--space-md);
        font-size: var(--font-size-search-hint);
    }



    /* Darstellung für Besucher, die weniger Animationen wünschen. Code von
       https://github.com/Andy-set-studio/modern-css-reset/blob/master/dist/reset.css */
    @media (prefers-reduced-motion: reduce) {
        html:focus-within {
            scroll-behavior: auto;
        }
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}