/* =====================================================================================
   Vorlage 14 Modegeschäft · Farben, Schrift, Ecken, Abstände
   Brücke zur Web-App: die Namen --bg --surface --text --muted --accent --on-accent
   --border --radius --schrift sind dieselben wie in 00_Projektstart/starter-webapp/styles.css.
   Umfärben: nur --accent, --accent-tief, --accent-hell ändern, danach pruefen.mjs (Kontrast).
   Schrift: Archivo mit Breitenachse. Überschriften breit (--breit), Fließtext normal.
   ===================================================================================== */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --schrift: "Archivo", "Segoe UI", system-ui, sans-serif;
  --breit: 125%;            /* Breite der Überschriften, Marken, Preise (Archivo-Achse wdth) */
  --halbbreit: 112%;        /* Knöpfe, Menü */

  --bg: #ffffff;            /* Grund */
  --surface: #f2f3f5;       /* sehr helles kühles Grau für abgesetzte Flächen */
  --text: #111214;          /* Schrift, 18,7 : 1 auf Weiß */
  --muted: #5c6068;         /* leiser Text, 6,3 : 1 auf Weiß, 5,7 : 1 auf --surface */
  --accent: #c8361a;        /* die eine Farbe, Zinnober: Knöpfe, Links, Marken. Weiß darauf 5,3 : 1, auf --surface 4,7 : 1 */
  --on-accent: #ffffff;
  --accent-tief: #a82b17;   /* Knopf beim Überfahren, Weiß darauf 7,0 : 1 */
  --accent-hell: #fbe9e4;   /* Hauch Zinnober: Kacheln, Bildrahmen (Fläche, nie Schrift) */
  --dunkel: #141517;        /* eine dunkle Kachel und der Fuß */
  --dunkel-text: #eceef1;   /* Schrift auf dunkel, 16,2 : 1 */
  --dunkel-leise: #a7abb3;  /* leise auf dunkel, 8,1 : 1 */
  --border: #e0e2e6;        /* Zierlinien */
  --error: #b42318;         /* Fehlermeldungen in einer Web-App, 6,5 : 1 auf Weiß */

  /* Studio im klebenden Abschnitt und Stoffe: Inhaltsfarben der beiden Effekte */
  --studio: #eceef1;        /* Hohlkehle hinter dem Sockel (etwas dunkler als --surface) */
  --stoff: #c8361a;         /* Satintuch über der Kollektion = Akzent */
  --sockel: #e3e5e8;        /* heller Stein */
  --relief: #1b1c1f;        /* Schriftzug HW 26 auf dem Sockel, schwarzer Lack */
  --loden: #4d5b45;         /* Stoffmuster in der Schneiderei: Loden, Moosgrün */
  --kreide: #f4f1ea;        /* Aufdruck, Steppnaht und Kreidestrich auf dem Loden (nur auf --loden) */

  --radius: 20px;           /* Karten, Kacheln */
  --radius-gross: 32px;     /* große Bilder, Bühne */
  --radius-klein: 12px;     /* Felder, Schilder */

  --breite: 1280px;         /* Inhalt höchstens so breit, immer mittig */
  --spalte: 620px;          /* Textspalte */
  --abstand: clamp(80px, 11vw, 152px);   /* zwischen den Abschnitten */
  --kopf: 64px;
}