/* ==================================================
   BASE CSS
   ==================================================

   Zweck:
   Diese Datei enthält nur globale Grundlagen.

   Hier stehen:
   - globale Farben
   - globale Schriftfamilien
   - Reset
   - Body-Hintergrund
   - allgemeine Regeln für Bilder, Links, Listen

   Hier stehen NICHT:
   - Headerhöhe
   - Menübreite
   - Content-Abstände
   - Grid-Abstände
   - Kachelgrößen
   - Footer-Layout

   Diese Werte gehören in die jeweilige Bereichsdatei:
   nav.css, header.css, content.css, footer.css
================================================== */

/* ==================================================
   GLOBALE FARBEN
   --------------------------------------------------
   Diese Farben werden in mehreren CSS-Dateien genutzt.

   Auswirkungen:
   - Änderung hier wirkt überall dort, wo die Variable verwendet wird.
   - Layoutwerte wie Breiten, Höhen und Abstände stehen bewusst NICHT hier.
================================================== */

:root {
    /* Hintergrund außerhalb der 1200px-Seitenfläche */
    --color-page-bg: #414040D9;

    /* Hauptfarbe für Menü und Contentfläche */
    --color-main-bg: #00A9D4;

    /* Dunkelblau für Ränder, Kacheln und Overlays */
    --color-dark-blue: #203665;

    /* Standard-Textfarbe */
    --color-text: #203665;

    /* Abgeschwächte Textfarbe für Absätze */
    --color-text-muted: rgba(255, 255, 255, 0.86);

    /* ==================================================
       GLOBALE SCHRIFT
       --------------------------------------------------
       Barrierearme Systemschrift ohne externe Abhängigkeit.

       Auswirkungen:
       - keine Google-Fonts- oder Drittanbieter-Abhängigkeit
       - keine zusätzliche Ladezeit
       - gute Lesbarkeit auf Windows, macOS, iOS, Android und Linux
       - Schriftgrößen werden NICHT hier eingestellt, sondern in:
         nav.css, header.css, content.css und footer.css
    ================================================== */
    --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
}

/* ==================================================
   RESET
   --------------------------------------------------
   Vereinheitlicht das Browser-Standardverhalten.

   Auswirkungen:
   - Elemente berechnen Breiten inklusive Padding/Border.
   - Standardabstände werden neutralisiert.
================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-main);
    color: var(--color-text);
    background: var(--color-page-bg);
    line-height: 1.6;
}

/* ==================================================
   MEDIEN UND LINKS
   --------------------------------------------------
   Grundverhalten für Bilder, Links und Listen.

   Auswirkungen:
   - Bilder laufen nicht aus Containern heraus.
   - Links erben ihre Farbe vom Elternbereich.
   - Listen haben keine Standardpunkte.
================================================== */

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

a {
    color: inherit;
    text-decoration: none;
}

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

/* ==================================================
   TYPOGRAFIE BASIS
   --------------------------------------------------
   Grundformatierung für Überschriften und Absätze.

   Auswirkungen:
   - Überschriften und Absätze starten ohne oberen Abstand.
   - Schriftgrößen, Zeilenhöhen, Abstände und Farben werden
     gezielt in nav.css, header.css, content.css oder footer.css gesetzt.
================================================== */

h1,
h2,
h3,
p {
    margin-top: 0;
}

p {
    color: var(--color-text-muted);
}