/* Brew Bites — projekteigene Tokens (16.09.2026)
   Ersetzt die sechs Stylesheets der Design-System-Kopie. Verbindliche Regelquelle
   ist brand.md; hier stehen nur Werte, keine Regeln.
   Enthalten: die acht Marken-Farben, Geometrie/Timing, Archivo als Fliesstext-Schrift.
   NICHT enthalten (bewusst): die alte Archivo-only-Typo-Skala und die alten
   h1-h4-Defaults des DS-Guides. Jede Seite setzt ihre Skala selbst. */

/* --- Archivo: Fliesstext. Bricolage Grotesque + DM Mono kommen per <link>. --- */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/archivo-latin-400-normal.ttf") format("truetype")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/archivo-latin-500-normal.ttf") format("truetype")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/archivo-latin-700-normal.ttf") format("truetype")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:900;font-display:swap;src:url("fonts/archivo-latin-900-normal.ttf") format("truetype")}

:root{
  /* --- Die acht Marken-Farben --- */
  --color-orange:#FF5E37;        /* einzige Buntfarbe */
  --color-orange-deep:#E64A24;   /* nur Hover / Pressed */
  --color-malt:#F3EFE7;          /* einziger heller Grund, warm */
  --color-card:#FFFFFF;          /* Karten, Formulare */
  --color-roast:#3A2617;         /* Roest-Tinte, nie #000, nie #16110D */
  --color-roast-mute:#3A2617;    /* kein Grau als Textstufe: Hierarchie nur ueber Groesse und Gewicht */
  --color-kessel:#243036;        /* einziger Dunkelton */
  --color-on-kessel:#FFFFFF;

  /* --- Material (18.09.: Vokabular linienunabhängig; alte Namen bleiben als Alias) --- */
  --color-karton:#D8CBB6;        /* Karton-Fläche, Schnitt-Stufe Chunks */
  --color-stufe-chunks:#D8CBB6;
  --color-stufe-hack:#C6B49A;
  --color-stufe-stripes:#AE9B7F;
  --color-treber:var(--color-stufe-hack);
  --color-treber-hell:var(--color-karton);
  --color-treber-dunkel:var(--color-stufe-stripes);

  /* --- Tiefe: nur Haarlinien, kein Schatten ausser Bierdeckel --- */
  --hairline:rgba(58,38,23,.12);
  --hairline-on-kessel:rgba(255,255,255,.15);

  /* --- Schrift-Familien --- */
  --font-display:"Bricolage Grotesque","Archivo",system-ui,sans-serif;
  --font-text:"Archivo",system-ui,sans-serif;
  --font-mono:"DM Mono",ui-monospace,SFMono-Regular,monospace;

  /* --- Geometrie und Timing --- */
  --radius-none:0px;
  --radius-card:4px;             /* Maximum, nie groesser */
  --hairline-width:1px;
  --touch-min:44px;
  --touch-target:48px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-reveal:.7s;
  /* --- Abstands-Skala (8er-Raster, Werte aus dem alten Design-System uebernommen,
         damit geteilte Komponenten wie FAQ nicht ins Leere greifen) --- */
  --space-xxs:4px;
  --space-xs:8px;
  --space-sm:12px;
  --space-md:16px;
  --space-lg:clamp(20px,4vw,48px);
  --space-xl:40px;
  --space-xxl:64px;
  --space-section:120px;
  --space-section-md:80px;
  --space-section-sm:56px;
  --measure-page:1200px;
  --pad-page:clamp(20px,4vw,48px);
  --space-section-page:clamp(140px,17vw,260px);
  --h-bildflaeche:clamp(420px,76vh,880px);
  /* --- Typo-Skala der Seiten (brand.md §2) --- */
  --fs-hero:min(152px,12.6cqw);
  --fs-kapitel:min(120px,17cqw);
  --fs-monument:min(220px,20cqw);
  --fs-statement:clamp(28px,3.4vw,50px);
  --fs-lead:clamp(20px,2.2vw,30px);
  --fs-body:clamp(17px,1.4vw,21px);
  --fs-mono:14px;
  --fs-data:15px;
  /* --- Der Tropfen: statt Punkt am Ende jedes Kopfs --- */
  --tropfen-w:.267em;
  --tropfen-h:.28em;
  /* Klein (Lead, Signatur, Mono): ein Tick größer, sonst wird er zum Komma */
  --tropfen-w-klein:.31em;
  --tropfen-h-klein:.325em;
  /* Form: der bekannte Tropfen, 40 Grad zum Wort gekippt, Spitze mit Radius 4/80, flache Standfläche auf der Grundlinie */
  --tropfen-maske:url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%27-1%2014%2080%2084%27%3E%3Cpath%20transform%3D%27rotate%28-40%2040%2063%29%27%20d%3D%27M36.80%204.27A4%204%200%200%201%2043.20%204.27C52%2016%2080%2040%2080%2063C80%2084%2062%20100%2040%20100C18%20100%200%2084%200%2063C0%2040%2028%2016%2036.80%204.27Z%27%2F%3E%3C%2Fsvg%3E) center/100% 100% no-repeat;
  /* aufrecht, nur für die Landung auf Wir brewen und der Folie */
  --tropfen-maske-aufrecht:url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2080%20100%27%3E%3Cpath%20d%3D%27M36.80%204.27A4%204%200%200%201%2043.20%204.27C52%2016%2080%2040%2080%2063C80%2084%2062%20100%2040%20100C18%20100%200%2084%200%2063C0%2040%2028%2016%2036.80%204.27Z%27%2F%3E%3C%2Fsvg%3E) center/100% 100% no-repeat;
  --unterstreichung:.09em;
  --badge-bg:rgba(20,26,29,.5);

  /* --- Aliasse (Bestand) --- */
  --bg-page:var(--color-malt);
  --bg-surface:var(--color-card);
  --bg-dark:var(--color-kessel);
  --bg-accent:var(--color-orange);
  --text-body:var(--color-roast);
  --text-on-dark:var(--color-on-kessel);
  --text-on-accent:var(--color-roast);
  --accent:var(--color-orange);
  --accent-hover:var(--color-orange-deep);
  --border-hairline:var(--hairline);
  --border-width:2px;
  --dur-count:.6s;
}
.num,td.data,.stat{font-variant-numeric:tabular-nums}

/* iOS: keine automatische Schriftvergrößerung (Feedback Julia 15.10.) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}