/* ==========================================================================
   tokens.css — die Grundwerte des Designs

   Hier stehen alle Farben, Schriftgroessen und Abstaende an EINER Stelle.
   Aenderst du hier einen Wert, wirkt er auf der gesamten Website.
   ========================================================================== */

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

   Die @font-face-Deklarationen stehen in einer eigenen Datei:
       src/assets/css/fonts.css   (automatisch erzeugt)

   Erzeugt und aktualisiert wird sie von  tools/get-fonts.ps1. Die Schriften
   liegen als Dateien auf dem eigenen Server und werden NICHT zur Laufzeit von
   Google geladen — das wurde in Deutschland als DSGVO-Verstoss gewertet
   (LG Muenchen I, 20.01.2022, Az. 3 O 17493/20).
   -------------------------------------------------------------------------- */

:root {

  color-scheme: light;

  /* ---- Farben — HELLER MODUS --------------------------------------------
     Warm-neutrale Palette. Kein Pink, kein Glitzer.
     Alle Text-/Hintergrundpaare erfuellen mindestens WCAG AA (4.5:1).

     Der dunkle Modus steht weiter unten und ueberschreibt nur diese Werte.
     Deshalb muss JEDE Farbe hier einmal vollstaendig definiert sein.        */

  --c-bg:        #FBFAF8;   /* Off-White — Hauptflaeche                     */
  --c-alt:       #F4F1EC;   /* Creme — abgesetzte Abschnitte                */
  --c-sand:      #E7E0D6;   /* Sand — Flaechen, Bildplatzhalter            */
  --c-line:      #DED8CE;   /* Haarlinien, Rahmen                          */
  --c-line-soft: #EAE5DC;   /* noch dezentere Linien                        */

  --c-ink:       #121212;   /* Anthrazit/Schwarz — Ueberschriften          */
  --c-ink-soft:  #45423C;   /* Fliesstext                                   */
  --c-muted:     #7A736A;   /* Metaangaben, Bildunterschriften             */
  --c-accent:    #7A6A55;   /* warmes Taupe — sparsam, fuer Akzente        */
  --c-on-accent: #FFFFFF;   /* Text auf der Akzentfarbe                     */

  /* Kontrast-Abschnitte (Evidence-Bereich, Newsletter, Fussbereich).
     Im hellen Modus sind sie dunkel. Im dunklen Modus werden sie
     stattdessen ETWAS HELLER als die Seite — sonst verschwaenden sie
     im Hintergrund und die Gliederung der Seite ginge verloren.            */
  --c-dark:      #14140F;
  --c-dark-soft: #1F1E19;
  --c-dark-line: rgba(242,239,233,.16);  /* Linien innerhalb dieser Abschnitte */
  --c-on-dark:   #F2EFE9;   /* Text darauf                                  */
  --c-on-dark-m: #A8A196;   /* gedaempfter Text darauf                      */

  --c-header-bg: rgba(251,250,248,.92);  /* Kopfzeile, leicht durchscheinend */

  /* Evidenzstufen — bewusst neutral, kein Ampelsystem.
     Die Bewertung soll sachlich wirken, nicht alarmierend.                 */
  --c-ev-strong: #3F5A44;   /* stark                                        */
  --c-ev-mod:    #6B6A3E;   /* moderat                                      */
  --c-ev-lim:    #8A6B45;   /* begrenzt                                     */
  --c-ev-none:   #7D5A55;   /* unzureichend                                 */

  /* Dekorative Grafiken — die abstrakten Bilder lesen diese Werte aus,
     damit sie sich mitdrehen statt als helle Kacheln stehen zu bleiben.    */
  --art-bg-1:    #F7F3EC;   /* hellster Punkt des Verlaufs */
  --art-bg-2:    #E9E1D5;   /* Mitte                        */
  --art-bg-3:    #DCD2C0;   /* tiefster Punkt               */
  --art-glow:    #FFFDF9;   /* Lichtschein                  */
  --art-line:    #14140F;   /* Linien und Flaechen          */
  --art-accent:  #7A6A55;   /* Akzentpunkte                 */

  /* ---- Schriften -------------------------------------------------------- */
  --ff-display: 'Cormorant Garamond', Constantia, 'Palatino Linotype', Palatino,
                Georgia, 'Times New Roman', serif;
  --ff-body:    'InterVar', 'Segoe UI Variable Text', 'Segoe UI', system-ui,
                -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* Groessen wachsen fluessig mit der Bildschirmbreite (clamp).            */
  --fs-display: clamp(2.9rem, 7.2vw, 6.4rem);
  --fs-h1:      clamp(2.3rem, 5.2vw, 4.1rem);
  --fs-h2:      clamp(1.85rem, 3.6vw, 2.9rem);
  --fs-h3:      clamp(1.25rem, 2.1vw, 1.6rem);
  --fs-h4:      clamp(1.05rem, 1.5vw, 1.2rem);
  --fs-lead:    clamp(1.06rem, 1.55vw, 1.28rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.72rem;

  --lh-tight:   1.08;
  --lh-head:    1.16;
  --lh-body:    1.72;

  --ls-display: -0.022em;
  --ls-head:    -0.014em;
  --ls-eyebrow: 0.19em;

  /* ---- Abstaende -------------------------------------------------------- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  2.75rem;
  --s-8:  3.5rem;
  --s-9:  4.5rem;
  --s-10: 6rem;

  --section-y:  clamp(4.25rem, 8.5vw, 8rem);
  --gutter:     clamp(1.25rem, 5vw, 3.25rem);

  /* ---- Breiten ---------------------------------------------------------- */
  --w-max:    1280px;
  --w-wide:   1480px;
  --w-narrow: 720px;   /* Fliesstextbreite im Artikel (~68 Zeichen)         */
  --w-mid:    960px;

  /* ---- Kanten und Bewegung ---------------------------------------------- */
  --r-xs: 1px;
  --r-sm: 2px;
  --r:    3px;

  --ease:  cubic-bezier(0.22, 0.61, 0.22, 1);
  --dur:   420ms;
  --dur-f: 220ms;

  --shadow-soft: 0 1px 2px rgba(20,20,15,.04), 0 12px 32px -18px rgba(20,20,15,.22);
  --shadow-pop:  0 18px 60px -24px rgba(20,20,15,.5);


  /* ======================================================================
     DUNKLER MODUS — die Werte

     Hier stehen nur die Farbwerte. Zugewiesen werden sie in den beiden
     Bloecken darunter. So ist jede Farbe genau einmal definiert.
     ====================================================================== */

  --d-bg:         #121210;
  --d-alt:        #191815;
  --d-sand:       #26241D;
  --d-line:       #302D25;
  --d-line-soft:  #232019;

  --d-ink:        #F2EFE9;
  --d-ink-soft:   #CFC9BF;
  --d-muted:      #968E82;
  --d-accent:     #B7A184;   /* Taupe aufgehellt, sonst zu dunkel auf Schwarz */
  --d-on-accent:  #14140F;

  /* Kontrast-Abschnitte werden im dunklen Modus HELLER als die Seite */
  --d-dark:       #23201A;
  --d-dark-soft:  #2A2620;
  --d-dark-line:  rgba(242,239,233,.14);
  --d-on-dark:    #F2EFE9;
  --d-on-dark-m:  #A8A196;

  --d-header-bg:  rgba(18,18,16,.9);

  /* Evidenzstufen aufgehellt, damit sie auf dunklem Grund lesbar bleiben */
  --d-ev-strong:  #7FA689;
  --d-ev-mod:     #ADAB74;
  --d-ev-lim:     #C79C6C;
  --d-ev-none:    #C08D86;

  /* Dekorative Grafiken: Flaeche dunkel, Linien hell — also umgekehrt */
  --d-art-bg-1:   #1B1915;
  --d-art-bg-2:   #23201A;
  --d-art-bg-3:   #2C2820;
  --d-art-glow:   #3A3329;
  --d-art-line:   #F2EFE9;
  --d-art-accent: #B7A184;

  --d-shadow-soft: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -18px rgba(0,0,0,.75);
  --d-shadow-pop:  0 18px 60px -20px rgba(0,0,0,.85);
}


/* ==========================================================================
   DUNKLER MODUS — die Zuweisung

   Drei Zustaende:
     1. Nichts gewaehlt  -> es gilt die Systemeinstellung (Block A)
     2. Dunkel gewaehlt  -> data-theme="dark"  auf dem html-Element (Block B)
     3. Hell gewaehlt    -> data-theme="light" gewinnt auch bei dunklem System

   Der :not([data-theme="light"]) in Block A sorgt fuer Fall 3.
   ========================================================================== */

/* Block A — Systemeinstellung */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg:        var(--d-bg);
    --c-alt:       var(--d-alt);
    --c-sand:      var(--d-sand);
    --c-line:      var(--d-line);
    --c-line-soft: var(--d-line-soft);
    --c-ink:       var(--d-ink);
    --c-ink-soft:  var(--d-ink-soft);
    --c-muted:     var(--d-muted);
    --c-accent:    var(--d-accent);
    --c-on-accent: var(--d-on-accent);
    --c-dark:      var(--d-dark);
    --c-dark-soft: var(--d-dark-soft);
    --c-dark-line: var(--d-dark-line);
    --c-on-dark:   var(--d-on-dark);
    --c-on-dark-m: var(--d-on-dark-m);
    --c-header-bg: var(--d-header-bg);
    --c-ev-strong: var(--d-ev-strong);
    --c-ev-mod:    var(--d-ev-mod);
    --c-ev-lim:    var(--d-ev-lim);
    --c-ev-none:   var(--d-ev-none);
    --art-bg-1:    var(--d-art-bg-1);
    --art-bg-2:    var(--d-art-bg-2);
    --art-bg-3:    var(--d-art-bg-3);
    --art-glow:    var(--d-art-glow);
    --art-line:    var(--d-art-line);
    --art-accent:  var(--d-art-accent);
    --shadow-soft: var(--d-shadow-soft);
    --shadow-pop:  var(--d-shadow-pop);
    color-scheme: dark;
  }
}

/* Block B — ausdrueckliche Wahl im Umschalter */
:root[data-theme="dark"] {
  --c-bg:        var(--d-bg);
  --c-alt:       var(--d-alt);
  --c-sand:      var(--d-sand);
  --c-line:      var(--d-line);
  --c-line-soft: var(--d-line-soft);
  --c-ink:       var(--d-ink);
  --c-ink-soft:  var(--d-ink-soft);
  --c-muted:     var(--d-muted);
  --c-accent:    var(--d-accent);
  --c-on-accent: var(--d-on-accent);
  --c-dark:      var(--d-dark);
  --c-dark-soft: var(--d-dark-soft);
  --c-dark-line: var(--d-dark-line);
  --c-on-dark:   var(--d-on-dark);
  --c-on-dark-m: var(--d-on-dark-m);
  --c-header-bg: var(--d-header-bg);
  --c-ev-strong: var(--d-ev-strong);
  --c-ev-mod:    var(--d-ev-mod);
  --c-ev-lim:    var(--d-ev-lim);
  --c-ev-none:   var(--d-ev-none);
  --art-bg-1:    var(--d-art-bg-1);
  --art-bg-2:    var(--d-art-bg-2);
  --art-bg-3:    var(--d-art-bg-3);
  --art-glow:    var(--d-art-glow);
  --art-line:    var(--d-art-line);
  --art-accent:  var(--d-art-accent);
  --shadow-soft: var(--d-shadow-soft);
  --shadow-pop:  var(--d-shadow-pop);
  color-scheme: dark;
}

/* Beim Umschalten kurz alle Uebergaenge stilllegen, damit die Seite
   nicht sekundenlang durch Zwischenfarben kriecht. */
.theme-switching, .theme-switching * {
  transition: none !important;
}

/* --------------------------------------------------------------------------
   Grundlagen / Reset
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink-soft);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--c-ink);
  font-weight: 400;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

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

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

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { background: none; border: 0; cursor: pointer; }

hr {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin: var(--s-7) 0;
}

::selection {
  background: var(--c-ink);
  color: var(--c-bg);
}

/* Tastaturbedienung sichtbar machen — wichtig fuer Barrierefreiheit */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* Nutzer, die Animationen abgeschaltet haben, bekommen keine */
@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;
  }
}