@layer print {
    /**
     * Zunächst muss die Datei style.css eingebunden werden.
     * print.css modifiziert dann einige der dort gemachten Angaben
     * für das Ausdrucken der Webseiten.
     */

    *,
    *::before,
    *::after {
        background: #ffffff;
        color: #000000; /* Schwarz druckt schneller */
        box-shadow: none;
        text-shadow: none;
    }

    @page {
        /* Inhalt an die Druckgröße anpassen, unabhängig von der Druckereinstellung */
        size: auto;
        margin: 25mm;
    }

    :root {
        /* Standard-Schriftgröße etwas verkleinern: 14px */
        --font-size-body: 1.4rem;
        --font-size-homepage-link-title: 14pt;
        --font-size-h1: 28pt;
        --font-size-h2: 20pt;
        --font-size-footer: 12pt;
        --header-border-bottom-color: black;
        --main-table-border-color: rgb(150, 150, 150);
    }

    .page {
        /* Grid-Ansicht herausnehmen. */
        grid-template-columns: 1fr;
        /* Höhe der Zeilen einstellen.
           Dadurch, dass es jetzt nur noch eine Spalte gibt, sind es vier Zeilen.
           Jede soll die Höhe des jeweiligen Inhalts haben, keine soll wachsen. */
        grid-template-rows: min-content min-content min-content min-content;
        /* Es gibt nur eine Spalte, Abstand daher auf 0 setzen. */
        column-gap: 0;
        /* Abstand zwischen den Zeilen etwas verringern. */
        row-gap: 1.5em;
        /* Grid-Ansicht herausnehmen. */
        display: block;

        margin: 0px;

        /* Seitenabstände entfernen, so dass der Text bis zum Seitenrand reicht und nicht davor umbricht; ebenfalls bei main */
        margin-left: 0px;
        padding-left: 0px;
        /* Breite auf 100% setzen. Dann wird die Breite der Papierseite optimal genutzt (und zwar im Hoch- und im Querformat). */
        width: 100%;

        /* Hintergrundfarbe nicht mitdrucken */
        background-color: white;
    }

    /* Möglichst keinen Seitenumbruch direkt nach einer Überschrift */
    h1, h2, h3 {
        break-after: avoid;
    }

    /* Absatzkontrolle: Anzahl der Zeilen eines Absatzes, die mindestens oben (widows) bzw. unten (orphans) auf einer Seite stehen bleiben sollen.
       Vermeidet Hurenkinder und Schusterjungen */
    h1, h2, h3, p {
        widows: 3;
        orphans: 3;
    }


    header:has(.flex-container) {
        /* Das Element soll nur noch eine Spalte umfassen - so wie es das standardmäßig tut. */
        grid-area: auto;

        border-bottom: 1px solid var(--header-border-bottom-color);

        padding-block: 0;

        /* Keinen Schatten drucken, das sähe schmuddelig aus. Ebenso für das Header-Bild und den footer. */
        box-shadow: none;
    }

    /* Header-Bild anpassen */
    header .header-image {
        display: none;
    }

    header .branding {
        width: 100%;
    }

    /* Position des Titels anpassen */
    header .homepage-link {
        text-align: left;

        padding-top: 0px;
        padding-bottom: 10px;

        margin-block: 0px;
    }
    header .homepage-link .title {
        padding-bottom: 0;
    }
    header .homepage-link .subtitle {
        display: none;
    }

    .header-actions {
        display: none;
    }

    .main-nav-container {
        /* Hauptmenü nicht mitdrucken */
        display: none;
    }


    /* Menü side-nav nicht drucken */
    .side-nav {
        display: none;
    }


    main {
        /* Der Seiteninhalt soll in der ersten Spalte anfangen
           (und nicht in der nicht mehr vorhandenen zweiten Spalte) */
        grid-area: main;

        /* Alle Seitenabstände entfernen, so dass der Text bis zum Seitenrand reicht und nicht davor umbricht; ebenfalls bei .page */
        margin-left: 0px;
        margin-right: 0px;

        /* Die Zeilenhöhe anpassen. Sie muss passend sein für die Standardschriftgröße in der Druckansicht,
           aber auch, wenn der Autor eine abweichende Schriftgröße in em notiert hat, die vorgeht.
           In beiden Fällen sieht ein Wert von "1.6" ganz gut aus. */
        line-height: 1.6;
    }

    main h1 {
        margin-top: 66px;
    }

    main h2 {
        margin-top: 66px;
    }

    /* Links im Inhalt als solche erkennbar und einheitlich darstellen */
    main a, main a:visited {
        color: #000000;
        text-decoration: underline;
    }
    main abbr[title]::after {
        content: " (" attr(title) ")";
    }
    /* Nur externe Linkziele (http:/https: bzw. protokol-relative Links //) hinter den Link drucken */
    main a[href^="http://"]::after,
    main a[href^="https://"]::after,
    main a[href^="//"]::after {
        content: " (" attr(href) ")";
        text-decoration: none;

        /* Lange URLs sauber umbrechen */
        overflow-wrap: anywhere;
    }

    main pre {
        white-space: pre-wrap;
    }

    main pre,
    main blockquote {
        border: 1px solid #999;
        break-inside: avoid;
    }

    /* Tabellen als Zebratabellen drucken */
    main table tbody tr:nth-child(2n+1) td,
    /* Auch für Kopfzeilen, die nicht als solche markiert, sondern fett gesetzt sind (sonst ist der Hintergrund des Textes weiß) */
    main table tbody tr:nth-child(2n+1) td b {
        background-color: rgb(150, 150, 150);
    }

    /* Tabellenkopf auf jeder Seite wiederholen */
    main thead {
        display: table-header-group;
    }

    /* Kein Seitenumbruch in Tabellenzeilen und in Bildern.
       figure.image gilt für Bilder in Bildergalerien. */
    main tr,
    main img,
    main figure.image {
        break-inside: avoid;
    }

    /* Links "nach oben" nicht mitdrucken */
    main .back-to-top {
        display: none;
    }


    footer {
        /* Der Footer soll (die) eine Spalte des Grid-Systems nutzen. */
        grid-area: auto;

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

        /* Innenabstand zur grauen Linie etwas erhöhen */
        padding-top: 30px;
        /* Kein Innenabstand nach unten */
        padding-bottom: 0px;
        /* Geringere Höhe des Kastens, so dass kein größerer Abstand unter dem enthaltenen Text mehr folgt.
           Verhindert das Ausdrucken einer leeren letzten Seite, nachdem schon alles gedruckt ist. */
        min-height: 25px;

        /* Hintergrund nicht darstellen (relevant für IE); ebenso im Header */
        background: white;

        border-top: 2px solid black;

        /* Keinen Schatten drucken, das sähe schmuddelig aus. Ebenso für das Header-Bild und für header. */
        box-shadow: none;
    }

    /* Die drei Blöcke im Seitenfuß nicht drucken */
    footer .footer-container {
        display: none;
    }
}