/* ==========================================================================
   Strukturharmonie – Stylesheet
   --------------------------------------------------------------------------
   Aufbau:
     1. Stellschrauben (Custom Properties)   – hier wird geändert
     2. Grundlagen / Reset
     3. Grundtypografie
     4. Layout
     5. Bausteine
   Neue Bausteine unten anhängen, Werte oben ändern.
   ========================================================================== */

/* 1. Stellschrauben ======================================================= */

:root {
    /* --- Farben ---------------------------------------------------------- */
    --farbe-grund:        #fcfcfb;   /* Seitenhintergrund                    */
    --farbe-text:         #21231f;   /* Fließtext, Überschriften             */
    --farbe-text-leise:   #6a6d66;   /* Untertitel, Hinweise, Nebensächliches*/
    --farbe-linie:        #dedcd6;   /* Trennlinien                          */
    --farbe-akzent:       #3d5a4c;   /* sparsam: Links, Fokus                */

    /* --- Schrift --------------------------------------------------------- */
    --schrift: system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

    /* Größen: klein → groß. clamp() sorgt für ruhige Skalierung am Handy.   */
    --groesse-klein:  0.875rem;
    --groesse-basis:  clamp(1.0rem, 0.96rem + 0.20vw, 1.125rem);
    --groesse-gross:  clamp(1.15rem, 1.08rem + 0.35vw, 1.375rem);
    --groesse-titel:  clamp(1.75rem, 1.45rem + 1.50vw, 2.625rem);

    --gewicht-normal: 400;
    --gewicht-kraeftig: 600;

    --zeilenhoehe-text:  1.7;   /* großzügig, für langes Lesen              */
    --zeilenhoehe-titel: 1.2;

    --laufweite-titel: -0.011em;

    /* --- Abstände (eine Skala, überall verwendet) ------------------------- */
    --abstand-1: 0.25rem;
    --abstand-2: 0.5rem;
    --abstand-3: 1rem;
    --abstand-4: 1.75rem;
    --abstand-5: 2.75rem;
    --abstand-6: 4.5rem;
    --abstand-7: 7rem;

    /* --- Maße ------------------------------------------------------------ */
    --breite-text: 65ch;    /* Lesebreite, ca. 65 Zeichen                    */
    --rand-seite:  clamp(1.5rem, 5vw, 3rem);
    --rand-oben:   clamp(var(--abstand-6), 12vh, var(--abstand-7));
}

/* Dunkle Systemeinstellung: nur die Farbwerte werden getauscht.
   Nicht gewünscht? Diesen Block ersatzlos löschen.                          */
@media (prefers-color-scheme: dark) {
    :root {
        --farbe-grund:      #191a18;
        --farbe-text:       #e6e5e0;
        --farbe-text-leise: #9a9c94;
        --farbe-linie:      #33352f;
        --farbe-akzent:     #9dbcab;
    }
}

/* 2. Grundlagen =========================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    color-scheme: light dark;
}

body {
    margin: 0;
    background: var(--farbe-grund);
    color: var(--farbe-text);
    font-family: var(--schrift);
    font-size: var(--groesse-basis);
    line-height: var(--zeilenhoehe-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* 3. Grundtypografie ====================================================== */

h1, h2, h3 {
    margin: 0;
    font-weight: var(--gewicht-kraeftig);
    line-height: var(--zeilenhoehe-titel);
    letter-spacing: var(--laufweite-titel);
}

p { margin: 0; }

/* Abstand entsteht zwischen Geschwistern, nicht durch Ränder an Einzelteilen.
   So bleibt der Rhythmus beim Anhängen neuer Bausteine erhalten.            */
.inhalt > * + * { margin-top: var(--abstand-4); }

a {
    color: var(--farbe-akzent);
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}

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

/* 4. Layout =============================================================== */

.seite {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    padding: var(--rand-oben) var(--rand-seite) var(--abstand-5);
}

.inhalt {
    width: 100%;
    max-width: var(--breite-text);
    flex: 1;
}

.fuss {
    max-width: var(--breite-text);
    margin-top: var(--abstand-6);
}

/* 5. Bausteine ============================================================ */

.titel {
    font-size: var(--groesse-titel);
}

.untertitel {
    max-width: 55ch;
    color: var(--farbe-text-leise);
    font-size: var(--groesse-gross);
    line-height: 1.45;
}

/* Etwas mehr Luft zwischen Untertitel und Fließtext als sonst im Rhythmus. */
.untertitel + p { margin-top: var(--abstand-5); }

.hinweis {
    margin-top: var(--abstand-5);
    padding-top: var(--abstand-3);
    border-top: 1px solid var(--farbe-linie);
    color: var(--farbe-text-leise);
    font-size: var(--groesse-klein);
}