/* Beratungs-Info · Design-Tokens (28.10.2026)
   Vorbild: harryjatkins.com (nur der Stil: Katalog-Raster, große Initialen, Nummern, viel Weißraum)
   Layout-Typ: Verzeichnis-Raster (Katalog). Schriften lokal in assets/fonts, keine CDNs.
   Einzige Quelle für das Design; deploy.py kopiert sie nach website/assets/css/tokens.css. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-italic.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* Farben: Papier hell, Tinte, ein Akzent (Ultramarin), feine Linien */
  --papier:   #f3f2ee;   /* Grundfläche, warm getönt */
  --karte:    #e9e8e3;   /* Rahmen der Vorschaubilder, Flächen */
  --karte-2:  #dfdedb;   /* Hover-Fläche */
  --tinte:    #161614;   /* Text */
  --tinte-2:  #5f5e5a;   /* Nebentext, Etiketten (Kontrast 5,9:1 auf Papier) */
  --linie:    #d9d7d0;   /* Trennlinien */
  --akzent:   #2a3ee6;   /* Ultramarin: Links, Knöpfe, Nummern bei Hover */
  --akzent-dunkel: #1f31c4;
  --akzent-hell:   #e4e7fb;
  --auf-akzent: #f6f7ff;
  --fehler:   #b3261e;

  /* Schriften */
  --grotesk: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Plex Mono", "Consolas", monospace;
  /* Aliase für den Blog-Baustein (SM-Baukasten, Layout v2 erwartet diese Namen) */
  --serif: var(--grotesk);
  --pflaume: var(--akzent);
  --sand: var(--karte);

  /* Schriftgrößen (Verhältnis 1,25; Initialen stark gespreizt) */
  --gr-mini: 0.78rem;
  --gr-klein: 0.875rem;
  --gr-text: 1.0625rem;
  --gr-gross: 1.3rem;
  --gr-zwischen: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem);
  --gr-titel: clamp(2.1rem, 1.2rem + 3.6vw, 4rem);
  --gr-initial: clamp(5.5rem, 2rem + 18vw, 15rem);

  /* Abstände */
  --ab-1: 0.5rem;
  --ab-2: 1rem;
  --ab-3: 1.5rem;
  --ab-4: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  --ab-5: clamp(3.5rem, 2rem + 7vw, 8rem);
  --rand: clamp(1rem, 0.5rem + 2vw, 2rem);   /* Seitenrand */
  --breite: 90rem;

  /* Formen: fast eckig, nur Knöpfe und Etiketten weich */
  --radius: 4px;
  --radius-knopf: 999px;

  /* Bewegung: ruhig, exponentiell auslaufend */
  --ease-aus: cubic-bezier(0.22, 1, 0.36, 1);
  --dauer-kurz: 200ms;
  --dauer-mittel: 420ms;
}