/* ============================================================
   design.css - Bodennebelperformer.de

     1. Farbwerte
     2. Grundlagen
     3. Sprunglink und Fokus
     4. Kopfbereich
     5. Navigation
     6. Inhalt
     7. Linklisten
     8. Fussbereich
     9. Kleine Bildschirme
    10. Druckausgabe

   Die Zahl hinter jedem Farbwert ist der Kontrast gegen den
   Hintergrund. Geprueft nach WCAG 2.2: mindestens 4,5:1 fuer
   Fliesstext, mindestens 3:1 fuer grosse Schrift und
   Bedienelemente.
   ============================================================ */


/* ------------------------------------------------------------
   1. Farbwerte
   ------------------------------------------------------------ */
:root {
    color-scheme: light dark;

    --hintergrund:        #ffffff;
    --text:               #1a1a1a;   /* 17,4:1 */
    --text-leise:         #444444;   /*  9,7:1  Beschreibungen */

    --ueberschrift-1:     #000000;   /* 21,0:1 */
    --ueberschrift-2:     #951919;   /*  8,6:1 */
    --ueberschrift-3:     #1a1a1a;

    --titel-gross:        #cc0000;   /*  5,9:1 */

    --link:               #394529;   /* 10,2:1 */
    --link-besucht:       #394529;
    --link-hover:         #8a4b00;   /*  6,8:1  war #ff9200 mit 2,2:1 */

    --nav-link:           #0000cc;   /* 11,2:1 */
    --nav-besucht:        #105b17;   /*  8,3:1 */
    --nav-hover:          #b30000;   /*  7,2:1  war #ff0000 mit 4,0:1 */

    --fuss-text:          #484646;   /*  9,4:1 */
    --fuss-link:          #8a1e1e;   /*  9,2:1 */
    --fuss-besucht:       #4f5a4f;   /*  7,2:1  war #8f9f8f mit 2,8:1 */
    --fuss-hover:         #006400;   /*  7,4:1 */

    --hinweis:            #b30000;   /*  7,2:1 */
    --linie:              #cfcfcf;
    --trenner:            #9a9a9a;   /* Punkt im Fussbereich */
    --fokus:              #b30000;
    --fokus-kontrast:     #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --hintergrund:    #121212;
        --text:           #e8e8e8;   /* 15,3:1 */
        --text-leise:     #b8b8b8;   /*  9,4:1 */

        --ueberschrift-1: #ffffff;   /* 18,7:1 */
        --ueberschrift-2: #ff9e9e;   /*  9,5:1 */
        --ueberschrift-3: #e8e8e8;

        --titel-gross:    #ff6b6b;   /*  6,8:1 */

        --link:           #9dd68a;   /* 11,1:1 */
        --link-besucht:   #9dd68a;
        --link-hover:     #ffb347;   /* 10,5:1 */

        --nav-link:       #9fc0ff;   /* 10,2:1 */
        --nav-besucht:    #8fd69a;   /* 10,9:1 */
        --nav-hover:      #ff8a8a;   /*  8,3:1 */

        --fuss-text:      #b8b8b8;
        --fuss-link:      #ffa8a8;   /* 10,2:1 */
        --fuss-besucht:   #b7c7b7;   /* 10,6:1 */
        --fuss-hover:     #9dd68a;

        --hinweis:        #ff9e9e;
        --linie:          #3a3a3a;
        --trenner:        #6a6a6a;
        --fokus:          #ffd54a;
        --fokus-kontrast: #121212;
    }
}


/* ------------------------------------------------------------
   2. Grundlagen
   ------------------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;

    background-color: var(--hintergrund);
    color: var(--text);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    line-height: 1.6;

    /* Verhindert, dass iOS beim Drehen die Schrift eigenmaechtig
       vergroessert, ohne das Zoomen zu unterbinden. */
    -webkit-text-size-adjust: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

h1 {
    margin-top: 0;

    color: var(--ueberschrift-1);
    font-family: "Times New Roman", Times, serif;
    font-size: 1.9rem;
    line-height: 1.25;
    text-align: left;
    text-wrap: balance;
}

h2 {
    margin-top: 2em;
    margin-bottom: 0.4em;

    color: var(--ueberschrift-2);
    font-family: "Times New Roman", Times, serif;
    font-size: 1.4rem;
    font-style: italic;
    line-height: 1.3;
    text-align: left;
}

h3 {
    margin-top: 1.6em;
    margin-bottom: 0.4em;

    color: var(--ueberschrift-3);
    font-size: 1.1rem;
    line-height: 1.3;
}


/* ------------------------------------------------------------
   3. Sprunglink und Fokus
   ------------------------------------------------------------ */

/* Erster Punkt in der Tabulator-Reihenfolge: ueberspringt die 13
   Navigationslinks. Sichtbar nur, solange er den Fokus hat. */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 100;

    padding: 0.75em 1.25em;

    background: var(--fokus);
    color: var(--fokus-kontrast);

    font-weight: bold;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
}

/* ':focus-visible' zeigt den Rahmen bei Tastaturbedienung, nicht bei
   jedem Mausklick. Er wird nirgends entfernt. */
a:focus-visible,
[tabindex]:focus-visible,
button:focus-visible {
    outline: 3px solid var(--fokus);
    outline-offset: 3px;
    border-radius: 2px;
}

:target {
    scroll-margin-top: 1.5rem;
}

main:focus {
    outline: none;
}

/* Nur fuer Vorlesesoftware, am Bildschirm unsichtbar. */
.nur-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* ------------------------------------------------------------
   4. Kopfbereich
   ------------------------------------------------------------ */
header {
    padding: 0.5rem 1rem 0;
}

#title1 {
    margin: 0;

    color: var(--titel-gross);

    font-family: "Times New Roman", Times, serif;
    font-size: clamp(1.5rem, 0.5rem + 5vw, 5rem);
    font-weight: bold;
    line-height: 1.1;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
    overflow-wrap: break-word;
}

@media (prefers-color-scheme: dark) {
    #title1 {
        text-shadow: none;
    }
}

#title2 {
    margin: 0.3em 0 0;

    color: var(--text);

    font-family: "Times New Roman", Times, serif;
    font-size: 1.3rem;
    text-align: center;
    overflow-wrap: break-word;
}


/* ------------------------------------------------------------
   5. Navigation
   ------------------------------------------------------------ */
nav {
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem;
}

nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35em 0.4em;

    margin: 0;
    padding: 0;
    list-style: none;
}

/* Die Hauptnavigation hat 13 Eintraege und bricht auf jeder
   Fensterbreite um. Ein Trennzeichen zwischen den Eintraegen wuerde
   dann am Anfang jeder neuen Zeile stehen und wie ein versehentliches
   Aufzaehlungszeichen aussehen. Deshalb hier ohne Trenner: Der Abstand
   aus gap und dem Innenabstand der Links reicht zur Unterscheidung.
   Den Punkt gibt es nur im Fussbereich, dort passen die drei Verweise
   in eine Zeile. */

nav li a {
    display: inline-block;
    padding: 0.35em 0.7em;

    font-family: "Times New Roman", Times, serif;
    font-size: 1.25rem;
    line-height: 1.4;
    text-decoration: none;
    overflow-wrap: break-word;
}

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

nav a:hover,
nav a:active {
    color: var(--nav-hover);
    text-decoration: underline;
}

/* Aktuelle Seite auch ohne Farbwahrnehmung erkennbar. */
nav a[aria-current="page"] {
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ------------------------------------------------------------
   6. Inhalt
   ------------------------------------------------------------ */
main {
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem 1rem 2rem;

    color: var(--text);
    font-size: 1rem;
    text-align: left;
    overflow-wrap: break-word;
}

main p {
    margin: 0 0 1em;
}

main a:link    { color: var(--link); }
main a:visited { color: var(--link-besucht); }

main a:hover,
main a:active {
    color: var(--link-hover);
}

/* Links bleiben unterstrichen: Farbe allein darf kein
   Erkennungsmerkmal sein (WCAG 1.4.1). */
main a {
    text-underline-offset: 2px;
}

.hinweis {
    color: var(--hinweis);
    margin-top: 2em;
}

/* Farbig hervorgehobene Textstellen, z. B. die [at]/[dot]-
   Umschreibungen im Impressum. */
.markiert {
    color: var(--hinweis);
}

.stand {
    margin-top: 3em;

    color: var(--text-leise);
    font-size: 0.9rem;
}

section {
    margin-bottom: 1em;
}


/* ------------------------------------------------------------
   7. Linklisten
   ------------------------------------------------------------ */

/* Das fruehere 'ul { display: flex }' hat die Aufzaehlungspunkte
   verschluckt, weil Flex-Kinder ihre Markierung verlieren. */
.linkliste {
    margin: 0;
    padding-left: 1.4em;
    list-style: disc;
}

.linkliste li {
    margin: 0 0 0.9em;
}

.linkliste a {
    font-weight: bold;
}

/* Symbol fuer externe Verweise, rein dekorativ. Im Markup mit
   aria-hidden versehen; die Information steckt zusaetzlich als Text
   fuer Vorlesesoftware im Link selbst. */
.ext {
    margin-left: 0.35em;
    font-size: 0.9em;
}

.beschreibung {
    display: block;
    margin-top: 0.15em;

    color: var(--text-leise);
    font-size: 0.95rem;
    line-height: 1.5;
}


/* ------------------------------------------------------------
   8. Fussbereich
   ------------------------------------------------------------ */
footer {
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem 1rem 2.5rem;
    border-top: 1px solid var(--linie);

    color: var(--fuss-text);

    font-family: Verdana, Geneva, Arial, sans-serif;
    font-size: 1rem;
    text-align: center;
    overflow-wrap: break-word;
}

footer p {
    margin: 0 0 0.6em;
}

footer nav {
    padding: 0.5rem 0 0;
}

footer nav ul {
    align-items: center;
    gap: 0.3em 0.15em;
}

/* Trennzeichen zwischen den drei Verweisen: ein kleiner Punkt, mittig
   auf Hoehe der Schrift. Bewusst ein leeres Pseudo-Element mit
   Hintergrundfarbe und kein Schriftzeichen - ein "|" oder "." als Text
   wuerde von Vorlesesoftware mitgesprochen.

   Soll der Fussbereich ohne Trenner auskommen: diesen Block loeschen
   und oben den zweiten Wert von gap auf etwa 0.6em erhoehen. */
footer nav li + li::before {
    content: "";

    display: inline-block;
    vertical-align: 0.15em;

    width: 3px;
    height: 3px;
    border-radius: 50%;

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

footer nav li a {
    font-family: inherit;
    font-size: 1rem;
    /* Unterstrichen, weil sich die Linkfarbe vom Fliesstext des
       Fussbereichs kaum unterscheidet (Kontrast 1,02:1). */
    text-decoration: underline;
    text-underline-offset: 2px;
}

footer a:link    { color: var(--fuss-link); }
footer a:visited { color: var(--fuss-besucht); }

footer a:hover,
footer a:active {
    color: var(--fuss-hover);
}

.herz {
    font-size: 1.2rem;
}


/* ------------------------------------------------------------
   9. Kleine Bildschirme
   ------------------------------------------------------------ */
@media only screen and (max-width: 500px) {

    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.2rem; }

    #title2 { font-size: 1rem; }

    nav li a { font-size: 1rem; }

    footer { font-size: 0.9rem; }

    .beschreibung { font-size: 0.9rem; }
}

/* Bei Umbruch der Verweisliste saehe ein Trennpunkt am Zeilenanfang
   wie ein versehentliches Aufzaehlungszeichen aus. */
@media only screen and (max-width: 480px) {

    footer nav li + li::before {
        display: none;
    }

    footer nav ul {
        gap: 0.2em 0.5em;
    }
}


/* ------------------------------------------------------------
   10. Druckausgabe
   ------------------------------------------------------------ */
@media print {

    body {
        background: #ffffff;
        color: #000000;
        font-size: 11pt;
    }

    .skip-link,
    nav {
        display: none;
    }

    main a {
        color: #000000;
        text-decoration: underline;
    }

    /* Zieladresse mitdrucken, sonst sind die Links auf Papier
       wertlos. */
    .linkliste a::after {
        content: " (" attr(href) ")";
        font-weight: normal;
        font-size: 0.85em;
    }

    .ext {
        display: none;
    }

    section {
        break-inside: avoid;
    }
}