/* ─── assets/produkt/marke.css — Marken-Grundlagen der Produktseite ───────────────
   Tokens nach docs/DESIGN-MARKE.md §2–§6. Nichts hartkodieren, was hier einen Namen hat.
   Schrift: DM Sans (SIL OFL, OFL.txt in schrift/), lokal, statische Schnitte 400/500/600, Latin-Teilmenge. */

@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('schrift/dmsans-400.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('schrift/dmsans-500.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('schrift/dmsans-600.woff2') format('woff2'); }

:root {
  /* Farben §3 */
  --papier: #FBFBFA;
  --creme: #F4F3F1;
  --weiss: #FFFFFF;
  --linie: #E5E6E7;
  --tinte: #1A1A1A;
  --tinte-weich: #333333;
  --gedaempft: #5F5F5F;
  --gedaempft-hell: #8A8A8A;
  --tiefe: #0E2A33;
  --tiefe-hell: #163A45;
  --waerme: #B8743A;
  --waerme-dunkel: #8C5428;
  /* Systemfarbe Erfolg (Zustand, nicht Marke) */
  --erfolg: #1D7A4C;

  /* Schatten §6 — drei Stufen, keine weiteren */
  --schatten-1: 0 1px 3px rgba(0,0,0,.08);
  --schatten-2: 0 8px 24px -8px rgba(20,10,5,.18);
  --schatten-3: 0 32px 80px -20px rgba(20,10,5,.28), 0 6px 20px rgba(20,10,5,.08);

  /* Radien §4 — eine pro Ebene */
  --r1: 24px;
  --r2: 20px;
  --r3: 10px;
  --rund: 999px;

  /* Schrift §2 */
  --schrift: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Bewegung §7 */
  --kurve: cubic-bezier(.22,1,.36,1);
}

/* Box-Modell wie in der Vorlage: content-box (Browser-Standard). Buttons rechnen border-box, damit die Höhe
   48 px (§5) einschließlich Rahmen gilt und volle Breite auf Mobil nicht überläuft. */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--schrift);
  font-weight: 400;
  background: var(--papier);
  color: var(--tinte);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
a { color: var(--tinte); text-decoration: none; }
a:hover { color: var(--gedaempft); }
button { font: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -.035em; line-height: 1.15; color: var(--tinte); }

.eyebrow { font-size: 14px; font-weight: 500; letter-spacing: .02em; color: var(--gedaempft); }
.lead { font-size: 19px; line-height: 1.6; color: var(--gedaempft); margin: 0; }
.tab { font-variant-numeric: tabular-nums; }

/* Fokus §5: sichtbarer Ring 2 px Tinte mit 2 px Abstand */
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 2px; }

/* Buttons §5 */
.btn {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 24px; border-radius: var(--rund);
  font: 500 16px/1 var(--schrift); cursor: pointer;
  border: 1px solid transparent; white-space: nowrap;
  transition: background-color .2s, box-shadow .2s, border-color .2s, transform .1s ease-out;
}
.btn:active { transform: scale(.97); }
.btn-p { background: var(--tinte); color: #fff; }
.btn-p:hover { background: var(--tinte-weich); color: #fff; box-shadow: var(--schatten-2); }
.btn-s { background: transparent; color: var(--tinte); border-color: var(--linie); }
.btn-s:hover { color: var(--tinte); border-color: var(--gedaempft); }
.btn-w { background: #fff; color: var(--tinte); }
.btn-w:hover { color: var(--tinte); box-shadow: var(--schatten-2); }
.btn-wo { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-wo:hover { color: #fff; border-color: rgba(255,255,255,.75); }
/* Fokusring auf dunklen/farbigen Flächen: weiß */
.btn-w:focus-visible, .btn-wo:focus-visible, .auf-dunkel :focus-visible { outline-color: #fff; }

/* Pille §5 */
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px;
  border-radius: var(--rund); background: var(--creme); color: var(--tinte);
  font-size: 13px; font-weight: 500; white-space: nowrap;
}

/* Korn §4: gekachelte SVG-Rauschfläche über Verläufen, Mischmodus overlay */
.korn { position: relative; overflow: hidden; isolation: isolate; }
.korn::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('korn.svg') repeat; background-size: 256px 256px;
  opacity: .28; mix-blend-mode: overlay;
}
.korn > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active { transform: none; }
}