/* ============================================================
   SMASHED KÖFTE — Design Tokens
   Palette, Typografie-Skala, Raum, Motion. Eine Quelle.
   ============================================================ */

:root {
  /* ---- Farbe ---- */
  --ink: #0a0a0a;            /* Grund */
  --ink-raise: #111111;      /* angehobene Flächen (Karten) */
  --bone: #f2efe9;           /* Primärtext */
  --bone-80: rgba(242, 239, 233, .8);
  --bone-60: rgba(242, 239, 233, .6);
  --bone-45: rgba(242, 239, 233, .45);  /* nur große/fette Typo oder Deko */
  --line: rgba(242, 239, 233, .14);     /* Hairlines / Grill-Raster */
  --line-strong: rgba(242, 239, 233, .32);
  --ember: #ff4d14;          /* Signal: offen · CTA · heute */
  --ember-ink: #1a0800;      /* Text auf Ember */
  --ember-glow: rgba(255, 77, 20, .5);
  /* Gemeinsame CTA-Oberfläche: derselbe gedämpfte Kupferton wie der Route-
     Button. --ember bleibt als kleines Signal für Punkte/Marker bestehen. */
  --cta-copper: linear-gradient(180deg, #d3764a 0%, #b85e30 52%, #a44f26 100%);
  --cta-copper-glow: rgba(196, 100, 54, .45);
  --cta-copper-glow-soft: rgba(196, 100, 54, .28);

  /* ---- Typografie ---- */
  --font-display: 'Anton', 'Arial Narrow', 'Impact', sans-serif;
  --font-body: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-marker: 'Permanent Marker', 'Comic Sans MS', cursive;

  --text-label: clamp(.6875rem, .64rem + .2vw, .8125rem);   /* Eyebrows, Captions */
  --text-body: clamp(.9375rem, .9rem + .3vw, 1.0625rem);    /* Fließtext */
  --text-lead: clamp(1.0625rem, .95rem + .6vw, 1.375rem);   /* Intro-Absätze */

  --display-sm: clamp(1.625rem, 1.2rem + 2.2vw, 2.875rem);  /* Pivot-Zeilen */
  --display-md: clamp(2.25rem, 1.5rem + 4vw, 4.5rem);       /* Sektions-Titel */
  --display-lg: clamp(2.875rem, 1.8rem + 6.5vw, 6.75rem);   /* Kapitel-Statements */
  --display-xl: clamp(4.5rem, 2rem + 15vw, 15.5rem);        /* Hero-Wordmark, Namen — füllt die Bühne, kein Textinsel-Look */

  /* ---- Raum ---- */
  --space-section: clamp(3.5rem, 3rem + 5vh, 7rem);
  --space-block: clamp(2rem, 1.75rem + 2.5vh, 3.5rem);
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --container: 1240px;
  /* Tablet/kleiner Desktop: schlanke Ladenblende mit klarer zweiter Stufe. */
  --nav-h: 68px;
  --nav-h-scroll: 60px;
  /* Innenabstand der Header-/Hero-Kante auf großen Desktops. Getrennt vom
     globalen --gutter, damit die übrigen Sektionen ihren Rhythmus behalten. */
  --gutter-hero: var(--gutter);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: .22s;
  --dur-med: .55s;

  /* ---- Ebenen ---- */
  --z-nav: 60;
  --z-fab: 55;
  --z-hero-content: 10;
}

/* Großer Desktop: bewusst keine 96px-hohe zweite Bühne mehr. Die Nav bleibt
   präsent, gibt der eigentlichen Hero-Wortmarke aber deutlich mehr Raum.
   Beide Werte laufen über bestehende Tokens durch (Hero-Padding,
   Scroll-Margin, Menü-Offset und JS-Ankerversatz). */
@media (min-width: 1200px) {
  :root {
    --nav-h: 76px;
    --nav-h-scroll: 60px;
    --gutter-hero: clamp(3.5rem, 4.2vw, 5.25rem);
  }
}

/* Kompakter Header nur < 768px (Desktop/Tablet unverändert bei 76px).
   --nav-h wird überall per calc() konsumiert (Scroll-Margin, Hero-Padding,
   Menü-Offset, JS-Anker-Versatz in main.js liest den Wert zur Laufzeit) —
   ein Override hier zieht korrekt überall durch, ohne jede Stelle einzeln
   anzufassen. env(...) ist 0 auf Geräten ohne Notch/Dynamic Island, also
   auf jedem anderen Gerät ein No-op. */
@media (max-width: 767px) {
  :root {
    --nav-h: calc(64px + env(safe-area-inset-top));
    --nav-h-scroll: var(--nav-h);
    /* ~22 % weniger vertikaler Rhythmus auf Mobile — dieselben zwei Tokens
       treiben fast jeden Section-/Block-Abstand der Seite, ein Override hier
       wirkt konsistent überall statt Dutzende Einzelstellen anzufassen. */
    --space-section: clamp(2.75rem, 2.25rem + 4vh, 5.25rem);
    --space-block: clamp(1.5rem, 1.25rem + 2vh, 2.75rem);
    --gutter: clamp(1.125rem, 5vw, 1.375rem);
  }
}

/* Phones/tablets in landscape need vertical, not horizontal, compression. */
@media (max-width: 999px) and (max-height: 500px) {
  :root {
    --nav-h: calc(56px + env(safe-area-inset-top));
    --nav-h-scroll: var(--nav-h);
  }
}