/* ============================================================
   SMASHED KÖFTE — Base
   Fonts, Reset, Typografie, Nav, Footer-Grund, A11y.
   ============================================================ */

/* ---- Self-hosted Fonts (DSGVO: keine Google-Requests) ---- */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/anton-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/archivo-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/archivo-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/archivo-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Permanent Marker';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/marker-400.woff2') format('woff2');
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: auto; /* Lenis übernimmt; Fallback bleibt instant */
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video { display: block; max-width: 100%; }

h1, h2, h3, p, figure, blockquote { margin: 0; }

a { color: inherit; }

::selection { background: var(--bone); color: var(--ink); }

/* Dunkle Scrollbar — die helle System-Leiste bricht die Atmosphäre */
html { scrollbar-color: #2e2c29 var(--ink); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #2e2c29; border-radius: 5px; border: 2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: #45423e; }

/* ---- A11y ---- */
:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}
/* Die Sprungziele der Hauptnavigation werden für Screenreader fokussiert.
   Ein Fokusrahmen um den kompletten, oft bildschirmhohen Abschnitt erscheint
   jedoch nur als rote Linie an den benachbarten Tickern. Interaktive Elemente
   behalten ihren gut sichtbaren Fokusrahmen. */
section[tabindex="-1"]:focus-visible { outline: none; }

.skip-link {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 100;
  background: var(--bone);
  color: var(--ink);
  font-weight: 800;
  font-size: 13px;
  padding: 10px 16px;
  text-decoration: none;
  transform: translateY(-300%);
}
.skip-link:focus { transform: none; }

/* Reveals werden erst versteckt, wenn JS da ist (kein Content-Verlust ohne JS) */
html.js [data-reveal] { opacity: 0; }

/* Der Hero blendet in CSS ein, nicht über GSAP. gsap/ScrollTrigger/Lenis laden
   mit defer — bis die durch waren, stand der Hero leer da. So sind Logo,
   Headline, Text und CTA nach rund 0,4s sichtbar, egal wann die Skripte fertig
   werden. Nur opacity/transform, also kein Layout-Sprung. */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
html.js .hero [data-reveal] {
  animation: hero-in .34s cubic-bezier(.16, 1, .3, 1) both;
}
/* Eyebrow → Wortmarke → Lead → CTA. Der letzte ist nach 460ms durch.
   Die Selektoren müssen mindestens so spezifisch sein wie die Kurzschreibweise
   oben, sonst setzt deren animation-delay: 0 sie wieder zurück. */
html.js .hero__inner > [data-reveal]:nth-child(1) { animation-delay: 0s; }
html.js .hero__inner > [data-reveal]:nth-child(2) { animation-delay: .04s; }
html.js .hero__inner > [data-reveal]:nth-child(3) { animation-delay: .08s; }
html.js .hero__inner > [data-reveal]:nth-child(4) { animation-delay: .12s; }
/* Die dekorativen Rails kommen zuletzt */
html.js .hero [data-reveal].hero__rail { animation-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; }
  html.js .hero [data-reveal] { animation: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---- Layout-Grundlagen ---- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--space-section);
}

.section + .section { border-top: 1px solid var(--line); }

/* Kapitel-Label: sitzt in jedem Akt auf derselben Grid-Linie */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--bone-60);
}
.eyebrow::before {
  content: '';
  width: 30px;
  height: 1px;
  background: var(--ember);
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  /* Sicherheitsabstand: Anton-Umlaute (Ö/Ü/Ä) ragen über die Cap-Height —
     1.1 verhindert, dass Umlaut-Punkte an die Zeile darüber stoßen.
     Bewusste Einzeiler dürfen enger (idea__names, store__addr). */
  line-height: 1.1;
  letter-spacing: -.01em;
}

.lead { font-size: var(--text-lead); line-height: 1.5; color: var(--bone-80); }
.muted { color: var(--bone-60); }

.marker-note {
  font-family: var(--font-marker);
  color: var(--bone-80);
  transform: rotate(-2.5deg);
}

/* Grill-Raster: vertikale Hairlines als durchgängiges Struktur-Motiv */
.grate {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 96px);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

/* ============================================================
   NAV — schlank, einzeilig, mobil nicht umbrechend
   ============================================================ */
/* Grid statt Flex: die mittlere Spalte reserviert echten Platz für die
   Nav-Links, damit sie nie mit dem rechten Actions-Block (breites
   Öffnungszeit-Badge) kollidieren können — anders als bei absoluter
   Zentrierung, die dem Layout die Breite der Links verschweigt. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  height: var(--nav-h);
  padding-inline: var(--gutter-hero);
  /* No-op außerhalb von Notch/Dynamic-Island-Geräten; auf iOS schiebt es den
     Inhalt unter die Statusleiste — --nav-h (tokens.css) rechnet das für
     Mobile bereits in die Gesamthöhe ein. */
  padding-top: env(safe-area-inset-top);
  /* Dunkles Rauchglas statt einer massiven schwarzen Platte. Die hohe
     Grunddeckung hält Ticker und helle Fotos ruhig. Die Unterkante wird
     nicht mehr mit einer Hairline, sondern über ::after weich aufgelöst. */
  background: rgba(18, 18, 18, .88);
  border-bottom: 0;
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
  backdrop-filter: blur(16px) saturate(1.12);
  transition:
    height .42s var(--ease-out),
    background-color .42s var(--ease-out),
    box-shadow .42s var(--ease-out);
}

/* Visuelle Verlängerung des Rauchglases: liegt außerhalb der echten
   Nav-Höhe und kostet der Hero-Section deshalb keinen Platz. Drei Stops
   verhindern den typischen, als neues Band lesbaren Zweifarb-Verlauf. */
.nav::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 26px;
  background: linear-gradient(to bottom,
    rgba(10, 10, 10, .68) 0%,
    rgba(10, 10, 10, .24) 42%,
    transparent 100%);
  opacity: .82;
  pointer-events: none;
  transition: height .42s var(--ease-out), opacity .42s var(--ease-out);
}

/* Nach dem Hero-Auftakt zieht sich der Header wie eine kompakte Ladenblende
   zusammen. Er bleibt bewusst sichtbar: Karte, Social, Laden und Route sind
   dadurch jederzeit erreichbar, ohne dass die Leiste statisch wirkt. */
.nav.is-scrolled {
  height: var(--nav-h-scroll);
  background: rgba(10, 10, 10, .8);
  box-shadow: none;
}
.nav.is-scrolled::after { height: 18px; opacity: .7; }

.nav__brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-width: 0;
  justify-self: start;
}
/* Logo-Münze im Nav (Komponente in components.css) — bringt ihren eigenen
   gezackten Siegel-Rand und den Flip mit; kein separates ::before mehr nötig. */
.coin--nav {
  width: 40px;
  flex: 0 0 auto;
  transition: width .42s var(--ease-out);
}
.nav__brand-name {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: font-size .42s var(--ease-out), letter-spacing .42s var(--ease-out);
}
.nav.is-scrolled .coin--nav { width: 34px; }
.nav.is-scrolled .nav__brand { gap: 9px; }
.nav.is-scrolled .nav__brand-name { font-size: 16px; letter-spacing: .05em; }
/* Status-Punkt als Badge auf der Münze — nur < 768px (siehe Header-Vereinfachung
   unten). Erbt is-open/Farbe von .status, per data-status genau wie die große
   Pill von hours.js automatisch befüllt (kein eigener JS-Code nötig).
   Compound-Selektor .status.nav__status-dot statt .nav__status-dot allein:
   components.css lädt NACH base.css und setzt .status{display:inline-flex}
   mit gleicher Spezifität — ohne die zweite Klasse im Selektor gewinnt die
   spätere Datei und der Punkt blieb auch auf Desktop sichtbar (per Workflow-
   Verifikation gefunden). */
.status.nav__status-dot {
  display: none;
  position: absolute;
  left: 30px;
  bottom: -2px;
  padding: 3px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--ink);
}

.nav__links {
  display: none;
  gap: clamp(18px, 2.5vw, 34px);
  justify-self: center;
}
.nav__links a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone-60);
  padding: 6px 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__links a:hover { color: var(--bone); }

.nav__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; justify-self: end; }
/* Die Utility-Gruppe folgt der kompakteren Nav-Höhe, ohne die Beschriftung
   oder den Öffnungsstatus inhaltlich zu kürzen. */
@media (min-width: 768px) {
  .nav__actions > .status {
    padding: 8px 12px;
    font-size: 10px;
    transition: padding .42s var(--ease-out), font-size .42s var(--ease-out);
  }
}
/* Durchgängig als .nav .nav__cta (Spezifität 0,2,0) notiert: components.css
   lädt NACH base.css, dort stehen .btn und .btn--primary mit gleicher
   Spezifität (0,1,0) und gewinnen sonst per Reihenfolge — ein einfaches
   .nav__cta bleibt hier wirkungslos (per Screenshot-Diff verifiziert:
   Padding, Schriftgröße und Farbe kamen nicht an). */
.nav .nav__cta {
  padding: 11px 18px;
  font-size: 13px;
  /* Gemeinsame Burnt-Orange-Oberfläche aller Hauptaktionen. */
  background: var(--cta-copper);
  color: #fff;
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    min-height .42s var(--ease-out),
    padding .42s var(--ease-out),
    font-size .42s var(--ease-out);
}
.nav.is-scrolled .nav__actions > .status {
  padding: 7px 12px;
  font-size: 10px;
  transition: padding .42s var(--ease-out), font-size .42s var(--ease-out);
}
.nav.is-scrolled .nav__cta {
  min-height: 42px;
  padding: 10px 19px;
  font-size: 13px;
}
@media (min-width: 768px) {
  .nav.is-scrolled .nav__cta {
    min-height: 38px;
    padding: 8px 16px;
    font-size: 12px;
  }
}
.nav .nav__cta:hover { box-shadow: 0 0 26px 0 var(--cta-copper-glow); }
.nav .nav__cta:active { box-shadow: 0 0 12px 0 var(--cta-copper-glow-soft); }
/* Auch auf großen Desktops bleibt Route eine kompakte Utility-Aktion und
   konkurriert weder mit Marke noch Hero-Wortmarke. */
@media (min-width: 1200px) {
  .nav .nav__cta { min-height: 42px; padding: 10px 20px; font-size: 13px; }
}

@media (min-width: 500px) {
  .nav__brand-name { font-size: 18px; }
}
@media (max-width: 499px) {
  /* Die Wortmarke bleibt auch auf dem Telefon sichtbar: Desktop und Mobile
     beginnen damit mit derselben eindeutigen Markenachse. */
  .nav__brand-name { display: inline; }
}

/* ---- Header-Vereinfachung < 768px ----
   Drei Elemente statt vier: [Logo + Status-Punkt] · [Route, kompakt] · [Burger].
   Die große Status-Pill (Text + Punkt) zieht in dieser Breite ins Mobil-Menü
   um (dort schon vorhanden, .nav-menu__actions .status) — hier bleibt nur
   der Punkt als Mini-Indikator direkt auf der Münze. */
@media (max-width: 767px) {
  .nav {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
  }
  .nav__links { display: none; }
  .coin--nav { width: 38px; }
  .nav.is-scrolled .coin--nav { width: 34px; }
  .nav__brand { gap: 8px; }
  .nav__brand-name,
  .nav.is-scrolled .nav__brand-name {
    display: inline;
    overflow: hidden;
    font-size: clamp(13px, 3.7vw, 15px);
    letter-spacing: .035em;
    text-overflow: clip;
  }
  .nav__actions { gap: 7px; }
  .nav__actions .status { display: none; }
  .status.nav__status-dot { display: inline-flex; }
  .status.nav__status-dot { left: 25px; bottom: -2px; }
  .nav .nav__cta,
  .nav.is-scrolled .nav__cta {
    min-height: 42px;
    padding: 10px 13px;
    font-size: 12px;
  }
  .nav__burger { width: 42px; height: 42px; }
  .nav::after { height: 20px; opacity: .72; }
  .nav.is-scrolled::after { height: 16px; opacity: .62; }
}
/* Ab 1120px passen Marke, drei Bereichslinks, Öffnungszeit und der kompakte
   Route-Button kollisionsfrei in das dreispaltige Grid. */
@media (min-width: 1120px) {
  .nav__links { display: flex; }
}

/* ---- Mobil-Menü: Burger-Button + Vollflächen-Overlay ----
   Nur < 1120px sichtbar (spiegelbildlich zu .nav__links oben). */
.nav__burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--bone);
  cursor: pointer;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1119px) {
  .nav__burger { display: inline-flex; }
}
.nav__burger-box { position: relative; width: 18px; height: 13px; flex: 0 0 auto; }
.nav__burger-box span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), top var(--dur-fast) var(--ease-out);
}
.nav__burger-box span:nth-child(1) { top: 0; }
.nav__burger-box span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav__burger-box span:nth-child(3) { top: 100%; transform: translateY(-100%); }
.nav__burger[aria-expanded="true"] .nav__burger-box span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.nav__burger[aria-expanded="true"] .nav__burger-box span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] .nav__burger-box span:nth-child(3) { top: 50%; transform: translateY(-50%) rotate(-45deg); }

.nav-menu {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-nav) - 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 6vh, 48px);
  padding: 32px var(--gutter) 48px;
  background: var(--ink);
  border-top: 1px solid var(--line);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), visibility 0s var(--dur-fast);
}
.nav.is-scrolled + .nav-menu { top: var(--nav-h-scroll); }
.nav-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--dur-fast) var(--ease-out), visibility 0s;
}
.nav-menu__links { display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 4vh, 32px); }
.nav-menu__links a {
  font-family: var(--font-display);
  font-size: clamp(28px, 9vw, 40px);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--bone);
  text-decoration: none;
}
.nav-menu__links a:hover,
.nav-menu__links a:focus-visible { color: var(--ember); }
.nav-menu__actions { display: flex; flex-direction: column; align-items: center; gap: 16px; }
@media (min-width: 1120px) {
  .nav-menu { display: none; } /* Desktop hat .nav__links, das Overlay wird nie gebraucht */
}

@media (prefers-reduced-motion: reduce) {
  .nav,
  .nav::after,
  .coin--nav,
  .nav__brand-name,
  .nav .nav__cta,
  .nav.is-scrolled .nav__actions > .status { transition: none; }
}

/* No-JS-Fallback (siehe <noscript> im Markup): einfache, immer sichtbare Linkliste. */
.nav-fallback {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  padding: 14px var(--gutter);
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}
.nav-fallback a { color: var(--bone-60); text-decoration: underline; }
@media (min-width: 1120px) {
  .nav-fallback { display: none; } /* Desktop-Nav-Links reichen ab hier aus */
}

/* Querformat auf Telefon/kleinem Tablet: vollständige Navigation in einer
   schlanken Zeile, ohne dass sie die kurze Bühne dominiert. */
@media (max-width: 999px) and (max-height: 500px) {
  .nav { padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right)); }
  .coin--nav,
  .nav.is-scrolled .coin--nav { width: 32px; }
  .nav__brand,
  .nav.is-scrolled .nav__brand { gap: 8px; }
  .nav__brand-name,
  .nav.is-scrolled .nav__brand-name { display: inline; font-size: 14px; }
  .nav__actions > .status,
  .nav.is-scrolled .nav__actions > .status { padding: 6px 10px; font-size: 9px; }
  .nav .nav__cta,
  .nav.is-scrolled .nav__cta { min-height: 38px; padding: 8px 15px; font-size: 12px; }
  .nav__burger { width: 40px; height: 40px; }
  .nav::after,
  .nav.is-scrolled::after { height: 12px; }
}

/* ============================================================
   FOOTER-Grund (Details in sections.css)
   ============================================================ */
.footer {
  border-top: 1px solid var(--line);
}