/* =========================================================================
   Pamela Beckmann – Design Tokens („Roadbook“)
   Einzige Quelle für Farben, Schrift, Abstände. Keine Werte außerhalb dieser
   Datei hart codieren. Fluide Werte skalieren zwischen 390 px und 1280 px
   Viewport-Breite (Smartphone-Entwurf → Desktop-Entwurf).

   Teil 1 ist unverändert aus dem Design-Handoff übernommen.
   Teil 2 ergänzt Maße, die im STYLEGUIDE.md stehen, aber noch nicht als
   Variable vorlagen (Bildhöhen, Kachelmaße, Container).
   ========================================================================= */

:root {
  /* ---------- Farben ---------- */
  --color-sand:          #F3EEE5; /* Grundfläche */
  --color-dust:          #E8E1D5; /* Wechselflächen (Abschnitte, Kacheln-Hintergrund) */
  --color-asphalt:       #1E1D1A; /* Text auf Hell, dunkle Flächen, Header, Footer */
  --color-orange:        #A8380B; /* Rallye-Orange: Primär-Button, Labels auf Hell */
  --color-orange-hover:  #8A2E09; /* Hover Primär-Button */
  --color-orange-light:  #F08A4B; /* Labels/Links auf Dunkel, Fokusring */
  --color-grey:          #6A6255; /* Metatext auf Hell */
  --color-text-on-dark:  #E2DACD; /* Fließtext auf Asphalt */
  --color-meta-on-dark:  #B5AC9E; /* Metatext auf Asphalt */
  --color-line:          #BFB3A0; /* Trennlinien auf Hell */
  --color-line-dark:     #4A463F; /* Trennlinien / Kartenrahmen auf Dunkel */
  --color-white:         #FFFFFF; /* Text auf Orange, Kachel-Hintergrund NICHT verwenden */

  /* ---------- Schriftfamilien (lokal gehostet, siehe fonts.css) ---------- */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif; /* 600, 700 */
  --font-body:    'Barlow', Arial, sans-serif;                    /* 400, 500, 600 */
  --font-mono:    'PB Mono', ui-monospace, monospace;             /* 500 – IBM Plex Mono, umbenannte Teilmenge (OFL) */

  /* ---------- Schriftgrößen: genau 6 Stufen ---------- */
  /*            Smartphone → Desktop                                        */
  --text-h1:   clamp(3.25rem,  1.826rem + 5.843vw, 6.5rem);    /* 52 → 104 */
  --text-h2:   clamp(2.25rem,  1.702rem + 2.247vw, 3.5rem);    /* 36 → 56  */
  --text-h3:   clamp(1.5rem,   1.336rem + 0.674vw, 1.875rem);  /* 24 → 30  */
  --text-lead: clamp(1.1875rem,1.106rem + 0.337vw, 1.375rem);  /* 19 → 22  */
  --text-body: clamp(1.0625rem,1.035rem + 0.112vw, 1.125rem);  /* 17 → 18  */
  --text-meta: clamp(0.75rem,  0.7225rem + 0.112vw, 0.8125rem);/* 12 → 13  */

  /* Zeilenhöhen je Stufe */
  --leading-h1:   0.92;
  --leading-h2:   1;
  --leading-h3:   1.1;
  --leading-lead: 1.5;   /* Lead-Absätze */
  --leading-item: 1.4;   /* fette Listeneinträge in Lead-Größe */
  --leading-body: 1.65;  /* Desktop; mobil 1.6 akzeptabel */

  /* Laufweite */
  --tracking-label: 0.1em;  /* alle Mono-Labels */
  --tracking-brand: 0.08em; /* Name „Pamela Beckmann“ in Header/Footer */

  /* ---------- Abstände: 4er-Raster ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Fluide Layout-Abstände */
  --section-padding-y: clamp(56px, 38.47px + 4.494vw, 96px); /* 56 → 96 */
  --page-gutter:       clamp(20px, -6.3px + 6.74vw, 80px); /* 20 → 80 */
  --grid-gap:          24px;
  --container-max:     1280px; /* inkl. Gutter; Inhalt max. 1120 px */
  --hero-ratio:        4 / 5;  /* Porträt ab Tablet, Spalten 7–12 im Container */
  --hero-h1-max:       20cqi;  /* H1 im geteilten Hero max. 20 % der Textspalte (Tablet) */
  --hero-max-height:   75vh;   /* nur Smartphone quer: Bild nicht höher als 75 % des Fensters */

  /* ---------- Bedienelemente ---------- */
  --button-height:        56px; /* Primär + Sekundär */
  --button-height-header: 44px; /* kompakter CTA im Header */
  --touch-min:            44px;
  --border-strong:        2px;
  --radius:               0;    /* bewusst eckig (Roadbook) */

  /* Fokus: zweifarbig, auf Hell und Dunkel sichtbar */
  --focus-ring: 0 0 0 7px var(--color-asphalt);

  /* =======================================================================
     Teil 2 – Ergänzungen aus STYLEGUIDE.md (Abschnitte 4–6)
     ======================================================================= */

  /* Linien */
  --border-thin:   1px;  /* Trennlinien, Kartenrahmen */
  --border-dashed: 3px;  /* Dauer-Strecke */
  --border-accent: 4px;  /* Orange-Linie Ablauf-Kacheln */

  /* Zeilenhöhen der Sonderfälle (Styleguide 3) */
  --leading-quote:      1.1;  /* Zitat Abschnitt 07 */
  --leading-quote-mark: 0.6;  /* großes Anführungszeichen */
  --leading-fazit:      1.25; /* Fazit-Kasten Abschnitt 06 */
  --leading-body-mobile: 1.6;

  /* Bildhöhen: Smartphone / Desktop (Styleguide 6) */
  --img-hero-mobile:      440px;   /* Smartphone: feste Höhe */
  --img-team-mobile:      240px;
  --img-team:             440px;
  --img-about-mobile:     400px;
  --img-about:            640px;
  --img-moto-mobile:      440px;
  --img-moto:             600px;
  --img-rally-mobile:     240px;
  --img-rally:            480px;

  /* Komponentenmaße */
  --menu-button-size:  48px;   /* Hamburger 48 × 48 */
  --tile-min-height:   160px;  /* Aufgaben-Kacheln Desktop */
  --bullet-size:       12px;   /* orangefarbenes Quadrat Desktop */
  --bullet-size-mobile: 10px;  /* orangefarbenes Quadrat mobil */
  --quote-max:         960px;  /* Zitat max. Breite */
  --text-max:          720px;  /* Lesespalte Rechtstexte (ca. 75 Zeichen) */
  --contact-text-max:  560px;  /* Kontakt-Einleitung */
}

/* Fokuszustand global */
:where(a, button, summary, input, textarea, select):focus-visible {
  outline: 3px solid var(--color-orange-light);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}