/* ==========================================================================
   base.css – Grundlagen: Variablen, Reset, Typografie
   Freiwillige Feuerwehr Aldingen
   ========================================================================== */

/* --- Schriften ----------------------------------------------------------- */

/*
   Selbst ausgeliefert aus /assets/fonts/, nicht von fonts.googleapis.com.

   Bis zur Fassung 1.0.6 band das Grundgeruest sie bei Google ein. Damit ging
   bei jedem Seitenaufruf die IP-Adresse des Besuchers an einen Dritten -
   ohne Einwilligung, und ohne dass es noetig gewesen waere. Das Landgericht
   Muenchen I hat genau das als Verstoss gegen die DSGVO gewertet (Urteil vom
   20.01.2022, Az. 3 O 17493/20). Der Auftritt haelt Kalender und Karte
   bewusst hinter einer Einwilligung zurueck; die Schriften unbedingt von
   einem Dritten zu holen, war der Widerspruch dazu.

   Nebenbei ist es schneller: Zwei Namensauflösungen und zwei
   TLS-Handschlaege zu fremden Rechnern entfallen.

   Vier Dateien, nicht zehn: Roboto und Roboto Slab sind variable Schriften.
   Eine Datei traegt alle Gewichte, deshalb steht in font-weight eine Spanne
   und nicht ein Wert. Die Anwendung braucht 300, 400 und 700.

   Die ext-Dateien holt der Browser wegen unicode-range erst, wenn ein
   Zeichen daraus vorkommt - etwa in einem fremden Namen in einem Bericht.
   Ueblich sind also nur die beiden latin-Dateien, zusammen 77 kB.

   Herkunft, Lizenz und die Anleitung zum Erneuern: assets/fonts/HERKUNFT.txt
*/

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url("/assets/fonts/roboto-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url("/assets/fonts/roboto-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Roboto Slab";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/fonts/roboto-slab-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Roboto Slab";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/assets/fonts/roboto-slab-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Farben (übernommen vom bisherigen Auftritt) */
    --farbe-primaer:        #20477e;
    --farbe-primaer-hell:   #2f69bb;
    --farbe-primaer-dunkel: #16325a;
    --farbe-akzent:         #d50000;
    --farbe-text:           #404040;

    /* Nachrangiger Text: Kartentexte, die Metazeile einer Einsatzkarte
       (Alarmzeit, Ort, Fahrzeuge), Beschriftungen der Kennzahlen,
       Feldhinweise, Bildunterschriften.

       Frueher #969696. Das ergab auf Weiss 2.96:1 und auf --farbe-flaeche
       2.74:1 - WCAG AA verlangt fuer Text unter 24 px aber 4.5:1. Betroffen
       war damit nicht Beiwerk, sondern die Angaben eines Einsatzes selbst;
       am Handy im Freien waren sie kaum zu lesen.

       #6b6b6b erreicht 5.33:1 auf Weiss, 4.93:1 auf --farbe-flaeche und
       4.59:1 sogar auf --farbe-flaeche-alt - dort steht heute kein Text,
       aber so bleibt Luft, falls einmal welcher hinkommt. Der hellste noch
       zulaessige Ton waere #717171 (4.51:1 auf --farbe-flaeche) gewesen; das
       ist zu knapp, um es einer spaeteren Flaechenaenderung auszusetzen.

       Gegen --farbe-text (10.37:1) bleibt der Abstand deutlich - "leise"
       ist es weiterhin. */
    --farbe-text-leise:     #6b6b6b;

    --farbe-hell:           #ffffff;
    --farbe-flaeche:        #f5f6f8;
    --farbe-flaeche-alt:    #eceef2;
    --farbe-linie:          #dadada;
    --farbe-dunkel:         #2a2a2a;

    /* Die drei Einsatzarten. Sie stehen nebeneinander im Kuchendiagramm auf
       der Startseite und muessen dort auseinanderzuhalten sein - auch bei
       Rot-Gruen-Schwaeche. Das fruehere Graublau der sonstigen Einsaetze war
       von --farbe-hilfe selbst mit vollem Farbsehen kaum zu trennen.

       Sie sind zugleich der Grund der Etiketten (.etikett--brand und so
       weiter), und dort steht weisse Schrift darauf. Deshalb muss jede von
       ihnen 4.5:1 gegen Weiss erreichen. --farbe-sonstiges war mit #00897b
       bei 4.32:1 knapp darunter und ist um drei Prozent abgedunkelt; im
       Diagramm ist das nicht zu sehen, auf dem Etikett macht es 4.54:1.
       Wer hier eine Farbe aendert, muss diesen Wert nachrechnen. */
    --farbe-brand:          #c62828;   /* weiss darauf: 5.62:1 */
    --farbe-hilfe:          #1565c0;   /* weiss darauf: 5.75:1 */
    --farbe-sonstiges:      #008577;   /* weiss darauf: 4.54:1 */

    /* Kein Zustand, sondern das Fehlen eines Merkmals: Entwurf, ehemalig,
       noch nie benutzt. Bewusst grau und bewusst getrennt von den drei
       Einsatzarten - hier soll nichts hervorstechen. Traegt als Etikett
       ebenfalls weisse Schrift, war mit #6d7a8c bei 4.36:1 und ist aus
       demselben Grund um drei Prozent abgedunkelt. */
    --farbe-neutral:        #6a7688;   /* weiss darauf: 4.61:1 */

    --farbe-erfolg:         #2e7d32;
    --farbe-fehler:         #c62828;

    /* Typografie */
    --schrift-text:      "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --schrift-headline:  "Roboto Slab", Georgia, "Times New Roman", serif;

    /* Masse */
    --breite-inhalt: 990px;
    --breite-weit:   1200px;
    --abstand-xs:  4px;
    --abstand-s:   8px;
    --abstand-m:  16px;
    --abstand-l:  32px;
    --abstand-xl: 64px;
    --radius:      3px;
    --schatten:      0 0 30px rgba(0, 0, 0, .12);
    --schatten-hoch: 0 6px 24px rgba(0, 0, 0, .18);
    --transition: 250ms ease-in-out;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;

    /* Der Kopfbereich klebt oben und ist 72 Pixel hoch. Ohne diese Angabe
       landet jedes Sprungziel genau darunter und ist verdeckt - der
       Sprunglink "Zum Inhalt springen" fuehrte hinter die Leiste, und die
       Verweise der Fehleruebersicht taten es ebenso. Ein paar Pixel mehr als
       die Kopfhoehe, damit das Ziel nicht am Rand klebt. */
    scroll-padding-top: 84px;
}

body {
    margin: 0;
    background-color: var(--farbe-hell);
    color: var(--farbe-text);
    font-family: var(--schrift-text);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    border: 0;
    display: block;
}

figure {
    margin: 0;
}

/* --- Überschriften ------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--abstand-m);
    font-family: var(--schrift-headline);
    color: var(--farbe-primaer);
    font-weight: 400;
    line-height: 1.2;
    word-wrap: break-word;
}

h1 {
    font-size: 42px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.05;
    margin-bottom: var(--abstand-l);
}

h2 { font-size: 28px; }
h3 { font-size: 21px; }
h4 { font-size: 18px; }

p {
    margin: 0 0 var(--abstand-m);
}

strong, b {
    font-weight: 700;
}

ul, ol {
    margin: 0 0 var(--abstand-m);
    padding-left: 22px;
}

li {
    margin-bottom: var(--abstand-xs);
}

hr {
    border: 0;
    border-top: 1px solid var(--farbe-linie);
    margin: var(--abstand-l) 0;
}

blockquote {
    margin: 0 0 var(--abstand-m);
    padding-left: var(--abstand-m);
    border-left: 4px solid var(--farbe-primaer);
    color: var(--farbe-text-leise);
    font-style: italic;
}

/* --- Links --------------------------------------------------------------- */

a {
    color: var(--farbe-primaer);
    text-decoration: none;
    transition: color var(--transition), background-color var(--transition);
}

a:hover,
a:focus {
    color: var(--farbe-primaer-hell);
    text-decoration: underline;
}

:focus-visible {
    outline: 2px solid var(--farbe-primaer-hell);
    outline-offset: 2px;
}

/* --- Hilfsklassen -------------------------------------------------------- */

.zentriert     { text-align: center; }
.leise         { color: var(--farbe-text-leise); }
.klein         { font-size: 14px; }
.nur-fuer-screenreader {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 767px) {
    h1 { font-size: 30px; text-align: left; }
    h2 { font-size: 24px; }
}

/* --- Abstandshilfen ------------------------------------------------------ */

.abstand-oben       { margin-top: var(--abstand-l); }
.abstand-oben-klein { margin-top: var(--abstand-m); }
.abstand-unten      { margin-bottom: var(--abstand-l); }
.ohne-abstand       { margin: 0; }

/* --- Wer weniger Bewegung will ------------------------------------------- */

/*
   Das Betriebssystem laesst einstellen, dass Bewegung auf dem Bildschirm
   reduziert werden soll ("Bewegung reduzieren" bzw. "Animationen
   reduzieren"). Wer das setzt, hat meist einen Grund - Bewegung kann
   Schwindel oder Uebelkeit ausloesen.

   Betroffen sind hier das weiche Scrollen (scroll-behavior, auch bei jedem
   Sprung der Fehleruebersicht) und die Uebergaenge an Karten, Knoepfen und
   am Menueschalter. Die Ziele bleiben, sie werden nur ohne Weg dorthin
   erreicht.

   0.01ms und nicht 0: Ein Uebergang von genau 0 wirft in manchen Browsern
   kein transitionend-Ereignis, und darauf koennte spaeter etwas warten.
*/

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}