/* draussenzeug – Design-Tokens (Stand 13.10.2026). Quelle: docs/gestaltung.md.
   Nur diese Werte verwenden; keine Farben, Schriftgrößen oder Abstände frei erfinden. */

@font-face { font-family: "Barlow Semi Condensed"; src: url("/fonts/BarlowSemiCondensed-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/fonts/SourceSans3-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/fonts/SourceSans3-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* Farben */
  --farbe-grund: #F6F4EF;        /* Seitenhintergrund */
  --farbe-flaeche: #FFFFFF;      /* Karten, Formulare, Kopf */
  --farbe-tinte: #1E2622;        /* Text */
  --farbe-tinte-leise: #4E5A53;  /* Nebentext, Metadaten (6,6:1 auf Grund) */
  --farbe-wald: #24543F;         /* Marke, Primärschaltflächen, Links */
  --farbe-wald-dunkel: #173829;  /* Hover, Fuß */
  --farbe-wald-hell: #E3ECE6;    /* Hinweisflächen, gemerkte Produkte */
  --farbe-glut: #B0491C;         /* Aktion, Rabatt, Badge; Text darauf weiß */
  --farbe-glut-hell: #F8E6DC;    /* Fläche des Aktionshinweises */
  --farbe-linie: #D8D3C8;        /* Trennlinien, Kartenrand (dekorativ) */
  --farbe-rand-feld: #7A847E;    /* Rand von Eingabefeldern (≥3:1) */
  --farbe-demo: #F2CB4F;         /* Demo-Balken, Text in Tinte */
  --farbe-fehler: #A3261B;       /* Fehlermeldungen */
  --farbe-fokus: #24543F;        /* Fokusrahmen, 2px, 2px Abstand */
  --farbe-uebung: #1E2622;       /* Feld »Übungsmodus« – bewusst kein Shop-Look */
  --farbe-uebung-text: #F6F4EF;
  --farbe-uebung-akzent: #8FD1A9;/* Statuszeile aktiv */

  /* Schrift */
  --schrift-titel: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --schrift-text: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --groesse-h1: 2.5rem;   --zeile-h1: 1.1;  /* 40px */
  --groesse-h2: 1.75rem;  --zeile-h2: 1.2;  /* 28px */
  --groesse-h3: 1.25rem;  --zeile-h3: 1.3;  /* 20px */
  --groesse-text: 1.0625rem; --zeile-text: 1.55; /* 17px */
  --groesse-klein: 0.875rem; --zeile-klein: 1.45; /* 14px */
  --groesse-preis: 1.375rem; /* 22px, Titelschrift */

  /* Abstände */
  --abstand-1: 4px; --abstand-2: 8px; --abstand-3: 12px; --abstand-4: 16px;
  --abstand-5: 24px; --abstand-6: 32px; --abstand-7: 48px; --abstand-8: 64px;

  /* Radien und Schatten */
  --radius-klein: 4px; --radius-mittel: 8px; --radius-gross: 12px;
  --schatten-karte: 0 1px 2px rgba(30, 38, 34, 0.08), 0 2px 8px rgba(30, 38, 34, 0.06);
  --schatten-ebene: 0 8px 32px rgba(30, 38, 34, 0.18);

  /* Raster */
  --breite-max: 1200px;
  --breite-text: 680px;
  --hoehe-ziel: 44px; /* Mindestgröße jeder Schaltfläche */
}
/* Umbrüche: bis 599px Smartphone, 600–959px Tablet, ab 960px Desktop. */