/* ==========================================================================
   design-tokens-bestand.css — Tokens der Bestandsseite (Stufe 1)
   Rudolf Schäfer KG | perchtold.studio

   ACHTUNG: Das ist NICHT die Gestaltung des Relaunch.
   Diese Datei bildet die heutige Seite www.rudolfschaefer.de nach, damit
   Stufe 1 optisch unverändert bleibt (siehe 10_ZWISCHENLOESUNG.md).
   Die Relaunch-Tokens stehen in design-tokens.css. Es wird immer genau
   EINE der beiden Dateien geladen — der Unterbau ist derselbe.

   Alle Werte sind aus den Live-Stylesheets gemessen, nicht geschätzt.
   Herleitung und Fundstellen: docs/12_GESTALTUNG.md
   ========================================================================== */

:root {

  /* --- Farben: Hausfarbe --------------------------------------------- */
  --color-primary:        #CD1719;   /* Hausfarbe: Buttons, Links, Akzente */
  --color-primary-dark:   #9E1212;   /* Hover */
  --overlay-primary:      rgba(158, 18, 18, 0.7);   /* Bild-Overlay rot */

  /* --- Farben: Warmgrau (zweite Familie, gewachsen) ------------------- */
  --color-warm-light:     #787465;
  --color-warm-mid:       #746C52;
  --color-warm-dark:      #302E24;
  --color-cream:          #EDE7D9;   /* Blockflächen, Ränder (Timeline, Info-Circle) */
  --color-warm-line:      #72685F;   /* Trennlinie Timeline */
  --overlay-warm:         rgba(58, 54, 41, 0.7);    /* Bild-Overlay warm */

  /* --- Farben: Text und Flächen --------------------------------------- */
  --color-text:           #444444;   /* Fließtext */
  --color-heading:        #333333;
  --color-heading-strong: #222222;
  --color-text-muted:     #888888;
  --color-white:          #FFFFFF;
  --color-dark:           #302E24;   /* Alias auf warm-dark, fuer .section--dark */
  --heading-weight:       400;       /* Bestand setzt Ueberschriften normal, nicht fett */
  --color-bg:             #FFFFFF;
  --color-border:         #DDDDDD;
  --color-focus:          #CD1719;

  /* Overlays über Bildern, aus dem Bestand übernommen */
  --overlay-dark:         rgba(0, 0, 0, 0.75);
  --overlay-light:        rgba(255, 255, 255, 0.75);

  /* --- Schriften ------------------------------------------------------ */
  /* Poppins ist die Grundschrift (36 von 47 Deklarationen im Bestand).
     Raleway ergänzend, Oregano dekorativ/handschriftlich.
     Fallback wie im Bestand: Arial. */
  --font-sans:    'Poppins', Arial, sans-serif;
  --font-alt:     'Raleway', Arial, sans-serif;
  --font-script:  'Oregano', Arial, sans-serif;   /* nur italic vorhanden */
  --font-display: var(--font-sans);

  /* --- Typografie ----------------------------------------------------- */
  --text-body:      1rem;
  --text-small:     0.875rem;
  --text-label:     0.75rem;
  --text-h1:        clamp(2rem, 4vw, 2.75rem);
  --text-h2:        clamp(1.5rem, 3vw, 2rem);
  --text-h3:        clamp(1.125rem, 2vw, 1.375rem);
  --text-hero:      1.75rem;          /* 28px — Slider-Textebene, gemessen */

  --leading-tight:   1.1;
  --leading-hero:    1.0714;          /* 30/28 — Slider, gemessen */
  --leading-base:    1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-hero:   0.25rem;         /* 4px — Slider, gemessen */
  --tracking-wide:   0.12em;

  /* --- Abstände ------------------------------------------------------- */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.5rem;
  --space-6:   2rem;
  --space-8:   3rem;
  --space-10:  4rem;
  --space-12:  6rem;
  --space-16:  8rem;

  /* --- Layout --------------------------------------------------------- */
  /* Bootstrap-3-Raster des Bestands, am Original nachgemessen (09.09.2026):
     .container ist ab 1200 px genau 1170 px breit, mit 15 px Innenabstand
     links und rechts — also 1140 px Inhaltsbreite. Darunter volle Breite
     mit denselben 15 px. Vorher standen hier geschaetzte 1240 px; die
     Abschnitte lagen dadurch durchgehend zu breit. */
  --container-max:   1170px;
  --container-wide:  1170px;
  --container-text:   720px;
  --gutter:            15px;

  /* --- Breakpoints (als Referenz; @media kann keine var() nutzen) ------
     480 / 767 / 991 / 1199 sind das Bootstrap-3-Raster des Bestands.
     600, 650 und 1220 sind nachträglich entstandene Zwischenstufen und
     werden nur dort nachgebaut, wo sie sichtbar etwas bewirken.        */
  --bp-xs:   480px;
  --bp-sm:   767px;
  --bp-md:   991px;
  --bp-lg:  1199px;

  /* --- Bewegung ------------------------------------------------------- */
  --transition-base:     200ms ease;
  --transition-smooth:   350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-entrance: opacity 400ms ease, transform 400ms ease;
  --stagger-delay:        80ms;

  /* --- Ecken und Schatten --------------------------------------------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --shadow-soft: 0 0 6px rgba(0, 0, 0, 0.16);

  /* --- Z-Index -------------------------------------------------------- */
  --z-base:    1;
  --z-overlay: 10;
  --z-nav:     100;
  --z-modal:   1000;
}