/* ==========================================================================
   sandgrün — Design-Tokens
   Einzige Stelle mit Farbwerten, Schriftgrößen, Abständen, Radien und Masken.
   styles.css verwendet ausschließlich diese Variablen.
   ========================================================================== */

:root {
  /* --- Farben (CI, Briefing Abschnitt 2 — im Zweifel gilt das Briefing) --- */
  --color-oliv: #5D612E;          /* Überschriften, Rahmen, Labels, dunkler Block S4 */
  --color-tinte: #2B3116;         /* Fließtext. Nie Schwarz verwenden */
  --color-sandweiss: #F6F1E8;     /* Seitenfläche; Textfarbe auf Oliv (Labels in S4) */
  --color-weiss: #FFFFFF;         /* Zweite Fläche (S3, S5, S7), Karten, Felder; Text auf Oliv/Orange */
  --color-sand: #BC996F;          /* NUR Fläche, Linie, Textur. Niemals Textfarbe (Kontrast < 3:1) */
  --color-orange: #AA561D;        /* Ausschließlich Klickbares: Buttons, Links, Fokus-Ring */
  --color-orange-hover: #994D1A;  /* Hover/gedrückt von Textlinks. Buttons und Aktionslinks werden beim Hover Oliv */
  --color-gruen: #547514;         /* Sparsam: Häkchen in der Formular-Bestätigung */
  --color-linie: #E2DACB;         /* Feine Trennlinien, Kartenrahmen, Textmarkierung */

  /* Abgeleitete Flächen (Sand mit reduzierter Deckkraft) */
  --color-platzhalter-hero: rgba(188, 153, 111, 0.32);   /* Hintergrund hinter dem Hero-Foto, solange es lädt */
  --color-platzhalter-passt: rgba(188, 153, 111, 0.55);  /* Hintergrund hinter dem S4-Foto */
  --color-platzhalter-ueber: rgba(188, 153, 111, 0.35);  /* Hintergrund hinter dem S7-Foto */
  --color-platzhalter-mark: rgba(188, 153, 111, 0.35);   /* Farbe für Markierungen im Rechtstext */

  --overlay-passt-deckkraft: 0.45; /* Oliv-Fläche über dem S4-Foto. Abdunklung gehört ins CSS, nie ins Bild */

  /* Fokus */
  --color-focus: var(--color-orange);        /* Fokus-Ring überall */
  --color-focus-auf-oliv: var(--color-sandweiss); /* Fokus-Ring nur auf dem Oliv-Block (S4), siehe ENTSCHEIDUNGEN.md */
  --focus-width: 3px;                        /* Stärke des Fokus-Rings. Nie entfernen */
  --focus-offset: 3px;                       /* Abstand des Rings zum Element */

  /* Masken fürs Hero-Foto (weiches Auslaufen) */
  --mask-deckend: #000;                      /* Nur als Maskenfarbe, nie sichtbar */
  --hero-maske-desktop: linear-gradient(to left, var(--mask-deckend) 55%, transparent 100%); /* Foto läuft nach links aus */

  /* --- Schrift --- */
  --font-serif: 'Source Serif 4', Georgia, serif;  /* Überschriften, Ziffern */
  --font-sans: 'Source Sans 3', system-ui, sans-serif; /* Alles Lesbare und Klickbare */
  --font-mono: ui-monospace, monospace;            /* Nur für „localStorage" in der Datenschutzerklärung */

  --weight-regular: 400;   /* Fließtext, große Ziffern */
  --weight-semibold: 600;  /* Überschriften, Labels, Buttons. Es gibt keinen 700er-Schnitt */

  /* Schriftgrößen */
  --text-h1: clamp(34px, 1.6rem + 2.2vw, 46px);   /* H1 Hero und Rechtsseiten */
  --text-h2: clamp(28px, 1.6rem + 0.5vw, 32px);   /* Sektionsüberschriften */
  --text-h3-serif: clamp(22px, 1.3rem + 0.2vw, 24px); /* Kartentitel S2, Faktenband-Titel, H2 der Rechtsseiten */
  --text-h3-sans: clamp(20px, 1.15rem + 0.3vw, 22px); /* H3 in S3 und S5 */
  --text-lead: clamp(21px, 1.2rem + 0.3vw, 23px);  /* Lead im Hero */
  --text-gross: 20px;        /* Schlusssatz S4, Bestätigung, FAQ-Fragen */
  --text-body: 18px;         /* Fließtext */
  --text-button: 17px;       /* Buttons, Nav, Formular-Labels, Felder */
  --text-klein: 16px;        /* Footer, Checkbox-Label, Fehlermeldungen, Banner-Text */
  --text-hinweis: 15px;      /* Feld-Hinweis, „(optional)", Cookie-Leiste ab 900 px */
  --text-mini: 14px;         /* Cookie-Leiste unter 900 px, Vorschau-Etikett. Nie kleiner */
  --text-label: 13px;        /* Labels in Versalien */
  --text-banner-titel: 22px; /* „Kurz zu den Cookies" */
  --text-ziffer-s3: 40px;    /* 01–03 in S3 */
  --text-ziffer-s5: 48px;    /* 01–04 in S5 unter 1024 px */
  --text-ziffer-s5-weit: 64px; /* 01–04 in S5 ab 1024 px */

  /* Zeilenhöhen */
  --lh-h1: 1.08;
  --lh-h2: 1.15;
  --lh-h3: 1.25;
  --lh-h3-sans: 1.3;
  --lh-lead: 1.5;
  --lh-body: 1.65;
  --lh-gross: 1.55;
  --lh-knapp: 1.45;    /* Cookie-Leiste, Vorschau-Etikett */
  --lh-button: 1.3;
  --lh-faq: 1.35;
  --lh-label: 1.4;

  --tracking-label: 0.16em; /* Sperrung der Versal-Labels */

  /* --- Layout --- */
  --content-max: 1120px;          /* Maximale Inhaltsbreite aller Abschnitte */
  --measure: 68ch;                /* Maximale Zeilenlänge für Fließtext */
  --faq-max: 720px;               /* Breite der FAQ-Spalte */
  --banner-max: 480px;            /* Breite des Einwilligungs-Banners */
  --gutter: clamp(20px, 5vw, 48px); /* Seitlicher Außenabstand */
  --bleed: calc(max(0px, (100vw - var(--content-max)) / 2) + var(--gutter)); /* Abstand Inhaltskante → Viewport-Rand, für das angeschnittene S4-Foto */

  /* --- Abstände --- */
  --section-pad: clamp(56px, 6.5vw, 88px);  /* Oben/unten je Sektion, auch Faktenband. Abstand zwischen zwei Sektionen = 2 × */
  --hero-pad-top: clamp(72px, 9vw, 120px);  /* Hero oben ab 900 px */
  --hero-pad-bottom: clamp(72px, 9vw, 120px); /* Hero unten */
  --legal-pad-top: clamp(56px, 7vw, 96px);  /* Rechtsseiten oben */
  --legal-pad-bottom: clamp(72px, 9vw, 120px); /* Rechtsseiten unten */
  --block-pad: clamp(40px, 5vw, 56px);      /* Zwischen den Blöcken in S3 */
  --card-pad: clamp(24px, 3vw, 32px);       /* Innenabstand der Karten S2 */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;

  /* --- Form --- */
  --radius: 2px;        /* Einziger Radius der Seite. Nie mehr als 2 px */
  --shadow: none;       /* Bewusst keine Schatten, nirgends */
  --border-fein: 1px;   /* Linien, Rahmen */
  --border-stark: 2px;  /* Fehlerzustand, Banner-Buttons */
  --touch-min: 44px;    /* Mindesthöhe jeder Klickfläche */
  --button-min: 48px;   /* Mindesthöhe von Buttons und Feldern */
  --logo-w: 128px;      /* Logo im Header unter 900 px */
  --logo-w-weit: 152px; /* Logo im Header ab 900 px */
  --wortmarke-w: 160px; /* Wortmarke im Footer */

  /* --- Breakpoints (nur zur Dokumentation: CSS-Variablen funktionieren nicht in @media.
         In styles.css stehen die Werte deshalb als Zahl — immer genau diese zwei.) --- */
  --bp-zweispaltig: 900px;  /* Ab hier: Navigation, mehrspaltige Layouts, Karten nebeneinander */
  --bp-weit: 1024px;        /* Ab hier: Zeitachse S5 horizontal, Faktenband vierspaltig */
}