/* ================================================================
   SmokeFactory — Design System
   Extracted from React prototype, adapted for static multi-page site.
   ================================================================ */

/* ================================================================
   0. Self-hosted Fonts (DSGVO-konform, kein Google-CDN-Call)
   ---------------------------------------------------------------- */
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('../fonts/big-shoulders-display-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('../fonts/big-shoulders-display-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ================================================================
   1. Design Tokens — Editorial Brutalismus v3
   ----------------------------------------------------------------
   Architecture: 3-Layer (Stops/Semantic/Component) + on-X pattern.
   Spec: evidence/dark-inversion/00-MASTER-PLAN-v3.md
   Rule: Templates use ONLY Semantic + Component tokens (Layer 1+2).
         Raw stops (--gray-XX) NEVER appear in templates.
   ================================================================ */
:root,
:root[data-theme="editorial"] {
  /* ============== Layer 0 — RAW STOPS (private) ============== */
  /* Boring numeric names. NEVER use directly in templates/components. */
  --gray-00: #f4f3ee;  /* lightest paper */
  --gray-05: #ecebe5;  /* paper-2 */
  --gray-20: #dcdbd4;  /* bone */
  --gray-35: #bdbcb5;  /* ash */
  --gray-55: #6a6963;  /* AA on paper (4.96:1) - was 76756f (4.16:1 sub-AA) */
  --gray-70: #545350;  /* graphite */
  --gray-85: #2c2c2a;  /* soot */
  --gray-92: #1f1f22;  /* ink-2 */
  --gray-96: #16161a;  /* darkest ink */

  /* Legacy stop names — backwards-compat aliases for 884 inline refs */
  --paper:    var(--gray-00);
  --paper-2:  var(--gray-05);
  --bone:     var(--gray-20);
  --ash:      var(--gray-35);
  --smoke:    var(--gray-55);
  --graphite: var(--gray-70);
  --soot:     var(--gray-85);
  --ink-2:    var(--gray-92);
  --ink:      var(--gray-96);
  --bone-hi:  #fafaf5;

  /* ============== Layer 1 — SEMANTIC (theme-aware) ============== */
  --bg:            var(--gray-00);  /* page background */
  --surface:       var(--gray-05);  /* raised card */
  --surface-raised: var(--gray-00); /* highest elevation */
  --on-surface:    var(--gray-96);  /* text on --surface */
  --fg:            var(--gray-96);
  --fg-muted:      var(--gray-55);  /* AA-safe muted */
  --fg-faint:      var(--gray-55);  /* same as muted in v3, was sub-AA */
  --line:          var(--gray-20);
  --line-strong:   var(--gray-96);
  --panel:         var(--gray-05);  /* legacy alias for --surface */
  --muted:         var(--gray-55);  /* legacy alias */

  /* Emphasis pair (used by .btn, .cta, etc.) */
  --emphasis:      var(--fg);
  --on-emphasis:   var(--bg);
  --focus-ring:    var(--fg);

  /* Compliance (red — both themes — overridden in dark theme for contrast) */
  --danger:        #d8482a;
  --on-danger:     var(--gray-00);

  /* Always-tokens (theme-stable rhythmic accents) */
  --always-ink:    var(--gray-96);
  --always-paper:  var(--gray-00);

  /* Inverse pair — what the OTHER theme's bg/fg would be.
     Used by .contrast-flip to break circular var() references. */
  --inverse-bg:    var(--gray-96);  /* opposite of --bg in this theme */
  --inverse-fg:    var(--gray-00);  /* opposite of --fg in this theme */
  --inverse-muted: var(--gray-35);

  /* ============== Layer 2 — COMPONENT (derive from L1, paired) ============== */
  --btn-bg:        var(--emphasis);
  --btn-fg:        var(--on-emphasis);
  --cta-bg:        var(--fg);          /* theme-aware: flips with page */
  --cta-fg:        var(--bg);
  --ticker-bg:     var(--always-ink);  /* stable rhythmic accent */
  --ticker-fg:     var(--always-paper);
  --app-bar-bg:    color-mix(in srgb, var(--always-ink) 92%, transparent);
  --app-bar-fg:    var(--always-paper);
  --selection-bg:  var(--fg);
  --selection-fg:  var(--bg);

  /* ============== Legacy aliases — scanner forbids NEW use ============== */
  --ember:         var(--fg);
  --ember-dim:     var(--fg-muted);
  --lime:          var(--fg);
  --accent:        var(--fg);

  /* ============== Typography (unchanged) ============== */
  --font-display: 'Big Shoulders Display', system-ui, sans-serif;
  --font-body:    'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --line-height: 1.55;
  --line-height-display: 0.86;

  /* Type Scale */
  --type-display-xl: clamp(96px, 14vw, 240px);
  --type-display-l:  clamp(64px, 10vw, 160px);
  --type-display-m:  clamp(48px, 7vw, 96px);
  --type-display-s:  clamp(32px, 5vw, 56px);
  --type-h2:         clamp(28px, 4vw, 44px);
  --type-h3:         20px;
  --type-body-l:     18px;
  --type-body:       16px;
  --type-mono-l:     14px;
  --type-mono:       12px;

  /* ============== Layout / Spacing / Cuts (unchanged) ============== */
  --max-width: 1440px;
  --max-width-prose: 720px;
  --wrap-pad: 32px;

  --space-xs: 6px;
  --space-sm: 10px;
  --space-md: 14px;
  --space-lg: 28px;
  --space-xl: 60px;
  --space-2xl: 80px;

  --cut-sm:    8px;
  --cut-md:    14px;
  --cut-lg:    28px;
  --cut-stamp: 56px;

  --ease: 150ms ease-in-out;
}

/* ================================================================
   Editorial Dark — swaps Layer 1, Layer 2 follows automatically
   ================================================================ */
[data-theme="editorial-dark"] {
  --bg:            var(--gray-96);
  --surface:       var(--gray-85);
  --surface-raised: var(--gray-92);
  --on-surface:    var(--gray-00);
  --fg:            var(--gray-00);
  --fg-muted:      var(--gray-20);
  --fg-faint:      var(--gray-20);
  --line:          var(--gray-85);
  --line-strong:   var(--gray-00);
  --panel:         var(--gray-85);
  --muted:         var(--gray-20);

  --emphasis:      var(--fg);
  --on-emphasis:   var(--bg);
  --focus-ring:    var(--fg);

  /* Inverse layer flips relative to this theme */
  --inverse-bg:    var(--gray-00);
  --inverse-fg:    var(--gray-96);
  --inverse-muted: var(--gray-70);

  /* Layer 2 auto-derives via the L1 swap above */
  --btn-bg:        var(--emphasis);
  --btn-fg:        var(--on-emphasis);
  --cta-bg:        var(--fg);
  --cta-fg:        var(--bg);
  --selection-bg:  var(--fg);
  --selection-fg:  var(--bg);

  --ember:         var(--fg);
  --ember-dim:     var(--fg-muted);
  --lime:          var(--fg);
  --accent:        var(--fg);

  /* Compliance — slightly brighter in dark for visibility */
  --danger:        #ff5a3a;
  --on-danger:     var(--gray-96);
}

/* ----------------------------------------------------------------
   2. Reset & Base
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  transition: background .35s ease, color .35s ease;
  overflow-x: clip;
}
body { overflow-x: clip; max-width: 100vw; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--line-height);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* ----------------------------------------------------------------
   3. Typography Classes
   ---------------------------------------------------------------- */
.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.display {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.h-display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--line-height-display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------------
   4. Layout
   ---------------------------------------------------------------- */
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}
.prose {
  max-width: var(--max-width-prose);
  line-height: 1.7;
}
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.5em; }
.prose p { margin-bottom: 1em; }
.prose ul, .prose ol { padding-left: 1.5em; margin-bottom: 1em; }
.prose blockquote {
  border-left: 3px solid var(--fg);
  margin: 1.5em 0;
  padding: 0.75em 1.25em;
  background: var(--panel);
  font-style: italic;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.9em;
}
.prose th, .prose td {
  padding: 0.5em 0.75em;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.prose th {
  font-weight: 700;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 2px solid var(--fg);
}
.prose hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 2em 0;
}
.prose a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  font-weight: 600;
  transition: text-decoration-thickness var(--ease);
}
.prose a:hover { text-decoration-thickness: 2px; }
.no-x { overflow-x: clip; }

/* ----------------------------------------------------------------
   5. Cut-Corner Motif
   ---------------------------------------------------------------- */
.cut {
  clip-path: polygon(
    var(--cut-md) 0, 100% 0,
    100% calc(100% - var(--cut-md)),
    calc(100% - var(--cut-md)) 100%,
    0 100%, 0 var(--cut-md)
  );
}
.cut-sm {
  clip-path: polygon(
    var(--cut-sm) 0, 100% 0,
    100% calc(100% - var(--cut-sm)),
    calc(100% - var(--cut-sm)) 100%,
    0 100%, 0 var(--cut-sm)
  );
}
.cut-lg {
  clip-path: polygon(
    var(--cut-lg) 0, 100% 0,
    100% calc(100% - var(--cut-lg)),
    calc(100% - var(--cut-lg)) 100%,
    0 100%, 0 var(--cut-lg)
  );
}

/* ----------------------------------------------------------------
   5b. Brand chips (logo tiles)
   ---------------------------------------------------------------- */
.brand-chip-logo {
  max-width: 84%;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* Dark-only logos: invert to render light on the always-dark chip BG. */
.brand-chip-logo.brand-logo--invert-on-dark {
  filter: invert(1) brightness(1.05) contrast(1.1);
}
/* Light-only logos sit fine on the always-dark chip BG — no extra filter needed.
   The invert-on-light class exists for contexts where the chip is on paper instead. */
.brand-chip-text {
  display: block;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 720px) {
  .brand-chip-logo { max-height: 36px; }
  .brand-logo-wall { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 480px) {
  .brand-logo-wall { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ----------------------------------------------------------------
   6. Buttons
   ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: none;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 18px;
  min-height: 48px;
  /* Asymmetric cut: bottom-right only (editorial stamp) */
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - 14px),
    calc(100% - 14px) 100%,
    0 100%
  );
  transition: transform var(--ease), background var(--ease), color var(--ease);
}
.btn:hover {
  transform: translate(-2px, -2px);
  background: var(--btn-fg);
  color: var(--btn-bg);
}
.btn:active {
  transform: translate(0, 0);
}
.btn-ghost {
  background: transparent;
  color: var(--fg);
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.btn-ghost:hover {
  background: var(--fg);
  color: var(--bg);
}
.btn-arrow::after {
  content: "\2192";
  font-size: 18px;
  transform: translateY(-1px);
}

/* ----------------------------------------------------------------
   7. Chips & Badges
   ---------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.chip-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--ember);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--ember);
}

/* ----------------------------------------------------------------
   8. Navigation
   ---------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklch, var(--bg) 84%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 48px;
  align-items: center;
  padding: 14px var(--wrap-pad);
  max-width: var(--max-width);
  margin: 0 auto;
}
.nav-half {
  display: flex;
  align-items: center;
}
.nav-half-left {
  justify-content: flex-end;
}
.nav-half-right {
  gap: 24px;
}
.nav-links {
  display: flex;
  gap: 38px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-cta {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-left: auto;
}
.nav-mobile { display: none; }
.logo-mark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.logo-mark .factory {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--smoke);
  letter-spacing: 0.16em;
}
.logo-img {
  /* SVG uses currentColor — flip to match current --fg via filter */
  filter: brightness(0);  /* default = paper mode → ink-black logo */
  transition: filter .35s ease;
}
[data-theme="ember"] .logo-img,
[data-theme="editorial-dark"] .logo-img,
.contrast-flip .logo-img {
  filter: brightness(0) invert(1);  /* on dark BG → paper-white logo */
}

/* Mobile hamburger */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--fg);
  padding: 8px;
  font-size: 24px;
}

/* Dropdown */
.nav-item { position: relative; }
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: -12px;
  min-width: 240px;
  padding: 12px 0;
  background: var(--panel);
  border: 1px solid var(--line);
  z-index: 60;
  list-style: none;
  margin: 0;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  display: block;
}
.nav-dropdown a {
  display: block;
  padding: 8px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
}
.nav-dropdown a:hover {
  background: var(--fg);
  color: var(--bg);
}

/* ----------------------------------------------------------------
   9. Ticker
   ---------------------------------------------------------------- */
.ticker {
  background: var(--ticker-bg);
  color: var(--ticker-fg);
  overflow: hidden;
  border-top: 1px solid var(--ticker-bg);
  border-bottom: 1px solid var(--ticker-bg);
  transform: rotate(-1.4deg);
  transform-origin: center;
  margin: -10px -40px 0;
}
.ticker-track {
  display: inline-flex;
  white-space: nowrap;
  padding: 14px 0;
  animation: ticker 28s linear infinite;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 28px;
  letter-spacing: 0.04em;
}
.ticker-track span {
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
.ticker-track span::after {
  content: "\2571"; /* ╱ — editorial slash separator */
  font-size: 22px;
  color: currentColor;
  opacity: 0.5;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* ----------------------------------------------------------------
   10. Section Header
   ---------------------------------------------------------------- */
.sec-num {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--smoke);
  padding: 24px 0 10px;
  border-top: 1px solid var(--line);
}
.sec-num b {
  color: var(--ember);
  font-weight: 700;
}

/* ----------------------------------------------------------------
   11. Hero
   ---------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
}
.hero-mega {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(80px, 14vw, 220px);
  line-height: 0.82;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0;
}
.hero-mega .stroke {
  -webkit-text-stroke-width: 1.5px; -webkit-text-stroke-color: var(--fg);
  color: transparent;
}
.hero-mega .lime { color: var(--fg); }

/* ----------------------------------------------------------------
   12. Smoke Background
   ---------------------------------------------------------------- */
.smoke-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: multiply;  /* default for paper mode */
}
[data-theme="ember"] .smoke-canvas,
[data-theme="ember-light"] .smoke-canvas,
[data-theme="editorial-dark"] .smoke-canvas,
.contrast-flip .smoke-canvas {
  opacity: 0.5;
  mix-blend-mode: screen;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
  opacity: 0.5;
  animation: drift 14s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(40px, -30px) scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
}

/* ----------------------------------------------------------------
   13. Cards
   ---------------------------------------------------------------- */
.pcard {
  position: relative;
  background: var(--panel);
  padding: 24px;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .3s ease;
  overflow: hidden;
}
.pcard:hover { transform: translate(-3px, -3px); }
.pcard:hover .pcard-glow { opacity: 1; }
.pcard-glow {
  position: absolute;
  inset: -1px;
  border: 1.5px solid var(--fg);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
  clip-path: polygon(
    var(--cut-md) 0, 100% 0,
    100% calc(100% - var(--cut-md)),
    calc(100% - var(--cut-md)) 100%,
    0 100%, 0 var(--cut-md)
  );
}

/* Category card (for hub grids) */
.category-card {
  background: var(--panel);
  padding: 16px;
  color: var(--fg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 130px;
  transition: background .2s, color .2s, transform .2s;
}
.category-card:hover {
  background: var(--fg);
  color: var(--bg);
  transform: translate(-2px, -2px);
}

/* ----------------------------------------------------------------
   14. Stats Grid
   ---------------------------------------------------------------- */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.spec-grid > div {
  background: var(--bg);
  padding: 18px;
}
.spec-grid .num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 48px;
  line-height: 1;
  color: var(--ember);
}
.spec-grid .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-top: 6px;
}

/* ----------------------------------------------------------------
   15. Hover Underline
   ---------------------------------------------------------------- */
.hover-line {
  position: relative;
  display: inline-block;
}
.hover-line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.hover-line:hover::after { transform: scaleX(1); }

/* ----------------------------------------------------------------
   16. Glitch Hover
   ---------------------------------------------------------------- */
.glitch-h:hover { animation: glitch .35s steps(2) 1; }
@keyframes glitch {
  0%   { transform: translate(0); }
  20%  { transform: translate(-2px, 1px); }
  40%  { transform: translate(2px, -1px); }
  60%  { transform: translate(-1px, -1px); }
  80%  { transform: translate(1px, 1px); }
  100% { transform: translate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .glitch-h:hover { animation: none; }
}

/* ----------------------------------------------------------------
   17. Breadcrumb
   ---------------------------------------------------------------- */
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--smoke);
  padding: 16px 0 24px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
}
.breadcrumb li::after {
  content: " / ";
  color: var(--muted);
  margin-left: 4px;
}
.breadcrumb li:last-child::after { content: none; }
.breadcrumb a { color: var(--smoke); }
.breadcrumb a:hover { color: var(--ember); }
.breadcrumb [aria-current] { color: var(--fg); }

/* ----------------------------------------------------------------
   18. Opening Hours Table
   ---------------------------------------------------------------- */
.opening-hours {
  width: 100%;
  border-collapse: collapse;
}
.opening-hours tr {
  border-top: 1px solid var(--line);
}
.opening-hours td {
  padding: 8px 0;
  font-size: 13px;
}
.opening-hours .day {
  font-family: var(--font-body);
  font-weight: 500;
}
.opening-hours .time {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--smoke);
}
.opening-hours .today .day {
  font-weight: 800;
  color: var(--fg);
  position: relative;
}
.opening-hours .today .day::before {
  content: "●";
  margin-right: 8px;
  font-size: 8px;
  vertical-align: middle;
}
.opening-hours .today .time {
  color: var(--fg);
  font-weight: 700;
}
.opening-hours .oh-today {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ember);
  border: 1px solid var(--ember);
  border-radius: 2px;
  padding: 1px 5px;
  vertical-align: middle;
}

/* ----------------------------------------------------------------
   19. Store CTA Block
   ---------------------------------------------------------------- */
.store-cta {
  background: var(--panel);
  padding: var(--space-lg);
}

/* ----------------------------------------------------------------
   20. FAQ
   ---------------------------------------------------------------- */
.faq details {
  border-top: 1.5px solid var(--line);
}
.faq details:last-of-type {
  border-bottom: 1.5px solid var(--line);
}
.faq summary {
  padding: 22px 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: padding-left var(--ease);
}
.faq summary:hover {
  padding-left: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 400;
  color: var(--fg-muted);
  transition: transform var(--ease), color var(--ease);
}
.faq details[open] summary::after {
  content: "−";
  color: var(--fg);
}
.faq details[open] summary {
  padding-bottom: 8px;
}
.faq .faq-answer {
  padding: 0 0 24px;
  max-width: var(--max-width-prose);
  color: var(--fg-muted);
  line-height: 1.6;
}

/* ----------------------------------------------------------------
   21. Skip Link
   ---------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 100;
  background: var(--fg);
  color: var(--bg);
  padding: 12px 24px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 16px;
  text-transform: uppercase;
}
.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  z-index: 100;
}

/* ----------------------------------------------------------------
   22. Screenreader Only
   ---------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------------
   23. Footer
   ---------------------------------------------------------------- */
.site-footer {
  background: var(--bg);
  padding: var(--space-xl) 0 30px;
  border-top: 1px solid var(--line);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 32px;
}
.footer-col-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
  font-weight: 700;
  margin-bottom: var(--space-md);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.footer-links a { font-size: 14px; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* ----------------------------------------------------------------
   24. Forms
   ---------------------------------------------------------------- */
.form-input {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color var(--ease);
}
.form-input:focus {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
  border-color: var(--fg);
}
.form-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 6px;
  display: block;
}

/* ----------------------------------------------------------------
   25. Placeholder Image (dev only, remove in production)
   ---------------------------------------------------------------- */
.ph-img {
  width: 100%;
  min-height: 180px;
  background:
    repeating-linear-gradient(45deg, rgba(10,10,10,0.06) 0 10px, transparent 10px 20px),
    var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-faint);
  position: relative;
}
[data-theme="ember"] .ph-img,
[data-theme="editorial-dark"] .ph-img,
.contrast-flip .ph-img {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 10px, transparent 10px 20px),
    var(--panel);
}
.ph-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
}

/* ----------------------------------------------------------------
   26. Mobile App Bar
   ---------------------------------------------------------------- */
.app-bar { display: none; }

@keyframes appBarSlideIn {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes fabPulse {
  0%, 100% { transform: scale(1);   opacity: 0.5; }
  50%      { transform: scale(1.35); opacity: 0; }
}
@keyframes dotGlow {
  0%, 100% { box-shadow: 0 0 4px var(--fg); }
  50%      { box-shadow: 0 0 10px var(--fg), 0 0 18px color-mix(in oklch, var(--fg) 25%, transparent); }
}

/* ----------------------------------------------------------------
   27. Responsive
   ---------------------------------------------------------------- */
@media (max-width: 720px) {
  :root,
  :root[data-theme="editorial"],
  :root[data-theme="editorial-dark"],
  :root[data-theme="ember"],
  :root[data-theme="ember-light"] { --wrap-pad: 22px; }
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }

  .nav-desktop { display: none; }
  .nav-half-left { display: none; }
  .nav-toggle { display: block; }
  .nav-inner { grid-template-columns: 1fr auto; }
  .nav-cta { display: none; }

  /* Mobile menu open */
  .nav.open .nav-mobile {
    display: block;
    padding: 16px var(--wrap-pad);
    border-top: 1px solid var(--line);
  }
  .nav.open .nav-mobile .nav-links {
    flex-direction: column;
    gap: 16px;
  }
  .nav-mobile .nav-dropdown {
    display: block;
    position: static;
    background: transparent;
    border: none;
    padding: 8px 0 0 16px;
    min-width: auto;
  }

  .spec-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }

  .hero-mega { font-size: clamp(48px, 12vw, 96px); }

  /* Responsive grid collapse utilities */
  .grid-r { grid-template-columns: 1fr !important; }
  .grid-r-2 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Sec-num overflow-text hide */
  .sec-num .sec-num-extra { display: none; }

  /* ================================================================
     APP BAR — Premium native-feel bottom navigation
     ================================================================ */
  .app-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    /* App-bar is ALWAYS ink-strip (editorial rhythm rule) */
    background: rgba(22, 22, 26, 0.92);
    color: var(--paper);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-top: 1px solid rgba(44, 44, 42, 0.6);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around;
    align-items: flex-end;
    animation: appBarSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .app-bar--hide { transform: translateY(110%); }

  /* Top hairline — single paper line, not gold glow */
  .app-bar::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 18%;
    right: 18%;
    height: 1px;
    background: linear-gradient(90deg,
      transparent,
      rgba(244, 243, 238, 0.32) 30%,
      rgba(244, 243, 238, 0.45),
      rgba(244, 243, 238, 0.32) 70%,
      transparent
    );
    pointer-events: none;
  }

  [data-theme="ember"] .app-bar,
  [data-theme="ember-light"] .app-bar {
    background: rgba(10, 10, 10, 0.88);
    border-top-color: rgba(255, 255, 255, 0.04);
  }
  [data-theme="ember"] .app-bar::before,
  [data-theme="ember-light"] .app-bar::before {
    background: linear-gradient(90deg, transparent, rgba(201,168,76,0.35) 30%, rgba(201,168,76,0.5), rgba(201,168,76,0.35) 70%, transparent);
  }

  /* ---- Items ---- */
  .app-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: rgba(244, 243, 238, 0.6);  /* dimmed paper on ink */
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 8px;
    min-width: 54px;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease, transform 0.12s ease;
    position: relative;
  }
  .app-bar-item:active {
    color: var(--paper);
    transform: scale(0.88);
  }
  .app-bar-item svg { flex-shrink: 0; }

  /* Active page indicator: full paper + top bar */
  .app-bar-item--active {
    color: var(--paper);
    font-weight: 700;
  }
  .app-bar-item--active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 2px;
    background: var(--paper);
  }

  /* ---- Route FAB — Conversion Magnet (monochrome variant) ---- */
  .app-bar-route {
    margin-top: -24px;
    color: var(--paper);
    padding-bottom: 4px;
  }
  .app-bar-route:active { transform: none; }

  .app-bar-fab {
    position: relative;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .app-bar-fab-core {
    width: 56px;
    height: 56px;
    background: var(--always-paper);
    color: var(--always-ink);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    box-shadow:
      0 6px 24px rgba(244, 243, 238, 0.35),
      0 0 0 3px rgba(244, 243, 238, 0.10),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease;
  }
  .app-bar-fab-core svg {
    transform: rotate(45deg) translateY(-1px);
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
  }

  .app-bar-route:active .app-bar-fab-core {
    transform: scale(0.88);
    box-shadow:
      0 2px 12px rgba(244, 243, 238, 0.25),
      0 0 0 2px rgba(244, 243, 238, 0.06);
  }

  /* Attention pulse ring — paper outline */
  .app-bar-fab-ping {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid rgba(244, 243, 238, 0.32);
    animation: fabPulse 3.5s ease-out infinite;
    z-index: 1;
    pointer-events: none;
  }

  /* ---- Status indicator ---- */
  .app-bar-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .app-bar-dot {
    position: absolute;
    top: -1px;
    right: -3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(244, 243, 238, 0.35);
    border: 1.5px solid rgba(22, 22, 26, 0.92);
    transition: background 0.3s ease, box-shadow 0.3s ease;
  }

  .app-bar-hours[data-bar-open="true"] {
    color: var(--always-paper);
    font-weight: 700;
  }
  .app-bar-hours[data-bar-open="true"] .app-bar-dot {
    background: var(--always-paper);
    box-shadow: 0 0 6px var(--always-paper);
    animation: dotGlow 2s ease-in-out infinite;
  }

  /* ---- Footer clearance ---- */
  .site-footer { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .app-bar { animation: none; }
  .app-bar-fab-ping { animation: none; display: none; }
  .app-bar-hours[data-bar-open="true"] .app-bar-dot { animation: none; }
}

@media (min-width: 721px) and (max-width: 1079px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ================================================================
   28. Editorial Brutalismus — Utilities
   ================================================================ */

/* ---- 28.1 Inverse Section Modifier ----
   Flippt eine ganze Sektion auf Ink-BG (oder in editorial-dark auf Paper).
   ALL nested components (.cut, .btn, .chip, .faq) folgen automatisch
   via Token-Vererbung. */
/* .contrast-flip — flips to the inverse theme locally.
   Uses --inverse-* tokens (computed at theme level) to avoid
   self-referencing circular vars. Components derive from L1
   so they auto-adapt to the new --bg/--fg. */
.contrast-flip {
  --bg:            var(--inverse-bg);
  --fg:            var(--inverse-fg);
  --surface:       color-mix(in srgb, var(--inverse-bg) 92%, var(--inverse-fg));
  --surface-raised: var(--inverse-bg);
  --on-surface:    var(--inverse-fg);
  --fg-muted:      var(--inverse-muted);
  --fg-faint:      var(--inverse-muted);
  --line:          color-mix(in srgb, var(--inverse-bg) 80%, var(--inverse-fg));
  --line-strong:   var(--inverse-fg);
  --panel:         var(--surface);
  --muted:         var(--inverse-muted);
  --emphasis:      var(--inverse-fg);
  --on-emphasis:   var(--inverse-bg);
  --focus-ring:    var(--inverse-fg);
  --ember:         var(--inverse-fg);
  --ember-dim:     var(--inverse-muted);
  --lime:          var(--inverse-fg);
  --accent:        var(--inverse-fg);
  background: var(--inverse-bg);
  color: var(--inverse-fg);
}
.contrast-flip a { color: inherit; }
.contrast-flip svg { fill: currentColor; }
.contrast-flip .chip { border-color: var(--inverse-muted); }
.contrast-flip .chip-dot::before { background: var(--inverse-fg); }

/* ---- 28.2 Display Lockups (Stroke + Solid) ---- */

.lockup {
  font-family: var(--font-display);
  line-height: var(--line-height-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}
.lockup .stroke {
  color: transparent;
  -webkit-text-stroke-width: 1.5px; -webkit-text-stroke-color: var(--fg);
}
.lockup .solid { color: var(--fg); }

/* Variant A — Side-by-side flip (Default Hero) */
.lockup-side {
  display: flex;
  flex-wrap: wrap;
  gap: 0.18em 0.32em;
  align-items: baseline;
  font-family: var(--font-display);
  /* Subpage-Heros bewusst kleiner als der Home-Hero (war clamp …14vw…240px → ~201px @1440, zu wuchtig) */
  font-size: clamp(52px, 8.5vw, 124px);
  font-weight: 900;
  line-height: var(--line-height-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}
.lockup-side > .stroke {
  color: transparent;
  -webkit-text-stroke-width: 1.5px; -webkit-text-stroke-color: var(--fg);
}
.lockup-side > .solid { color: var(--fg); }

/* Variant B — Stacked echo (Identity-Pages) */
.lockup-stack {
  font-family: var(--font-display);
  font-size: var(--type-display-l);
  font-weight: 900;
  line-height: var(--line-height-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}
.lockup-stack > .echo {
  display: block;
  color: transparent;
  -webkit-text-stroke-width: 1.8px; -webkit-text-stroke-color: var(--fg);
  margin-bottom: -0.45em;
  opacity: 0.85;
}
.lockup-stack > .solid { display: block; }

/* Variant C — Outline frame stamp (Signature-Hero) */
.lockup-frame {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--type-display-xl);
  font-weight: 900;
  line-height: var(--line-height-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}
.lockup-frame > .stroke {
  color: transparent;
  -webkit-text-stroke-width: 1.5px; -webkit-text-stroke-color: var(--fg);
  display: block;
}
.lockup-frame > .solid {
  position: absolute;
  right: 4%;
  bottom: 8%;
  font-size: 0.28em;
  line-height: 1;
  color: var(--fg);
}
@media (max-width: 720px) {
  .lockup-frame > .solid {
    position: static;
    display: block;
    margin-top: 0.2em;
    font-size: 0.4em;
  }
}

/* ---- 28.3 Smoke-Photo Stamp ---- */
.stamp {
  position: relative;
  overflow: hidden;
  background-color: var(--surface); /* fallback if img fails */
  clip-path: polygon(
    var(--cut-stamp) 0, 100% 0,
    100% calc(100% - var(--cut-stamp)),
    calc(100% - var(--cut-stamp)) 100%,
    0 100%, 0 var(--cut-stamp)
  );
}
.stamp img,
.stamp .stamp-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(0.92);
  display: block;
}
.stamp::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, color-mix(in oklch, var(--bg) 40%, transparent));
  pointer-events: none;
}

/* Cut-Stamp Helper — single asymmetric 56px corner */
.cut-stamp {
  clip-path: polygon(
    var(--cut-stamp) 0, 100% 0,
    100% calc(100% - var(--cut-stamp)),
    calc(100% - var(--cut-stamp)) 100%,
    0 100%, 0 var(--cut-stamp)
  );
}

/* ---- 28.4 Halftone CTA Pattern (theme-aware, flips with page) ---- */
.cta-halftone {
  background-color: var(--inverse-bg);
  color: var(--inverse-fg);
  background-image:
    radial-gradient(circle at 1px 1px,
      color-mix(in srgb, var(--inverse-bg) 70%, var(--inverse-fg)) 1.4px,
      transparent 1.6px);
  background-size: 14px 14px;
  --bg: var(--inverse-bg);
  --fg: var(--inverse-fg);
  --fg-muted: var(--inverse-muted);
  --line: color-mix(in srgb, var(--inverse-bg) 80%, var(--inverse-fg));
  --panel: color-mix(in srgb, var(--inverse-bg) 85%, var(--inverse-fg));
  --muted: var(--inverse-muted);
  --emphasis: var(--inverse-fg);
  --on-emphasis: var(--inverse-bg);
  --ember: var(--inverse-fg);
  --lime: var(--inverse-fg);
  --accent: var(--inverse-fg);
}
.cta-halftone a:not(.btn):not(.btn-ghost) { color: inherit; }
.cta-halftone--paper {
  background-color: var(--surface);
  color: var(--fg);
  background-image:
    radial-gradient(circle at 1px 1px,
      color-mix(in srgb, var(--surface) 70%, var(--fg)) 1.4px,
      transparent 1.6px);
  background-size: 14px 14px;
}

/* ---- 28.5 Strong Section Divider ---- */
.section-divider-strong {
  border: 0;
  border-top: 2px solid var(--fg);
  margin: 0;
}

/* ---- 28.6 Editorial caption row ---- */
.caption-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.caption-row > span::before {
  content: "──";
  margin-right: 10px;
  opacity: 0.5;
}
.caption-row > span:first-child::before { content: none; }

/* ---- 28.7 Big Numeral (Inverse-Feature accent) ---- */
.big-numeral {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(80px, 12vw, 200px);
  line-height: 0.86;
  letter-spacing: -0.02em;
  display: block;
}
.big-numeral .unit {
  font-size: 0.3em;
  vertical-align: super;
  letter-spacing: 0.04em;
  margin-left: 0.1em;
}

/* ---- 28.8 Stamp mobile behavior ---- */
@media (max-width: 480px) {
  .stamp.cut-stamp { display: none; }
}

/* ---- 28.9 Theme Toggle ---- */
.theme-toggle {
  inline-size: 38px;
  block-size: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  padding: 0;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition: background var(--ease), color var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover {
  background: var(--fg);
  color: var(--bg);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
.theme-toggle__icon {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  transition: opacity var(--ease);
}
/* When pressed=true → dark active → show moon */
.theme-toggle[aria-pressed="true"] .theme-toggle__icon--light { opacity: 0; }
.theme-toggle[aria-pressed="true"] .theme-toggle__icon--dark  { opacity: 1; }
/* When pressed=false → light active → show sun */
.theme-toggle[aria-pressed="false"] .theme-toggle__icon--light { opacity: 1; }
.theme-toggle[aria-pressed="false"] .theme-toggle__icon--dark  { opacity: 0; }

/* Mobile: 44x44 tap target */
@media (max-width: 720px) {
  .theme-toggle {
    inline-size: 44px;
    block-size: 44px;
  }
}

/* ---- 28.10 Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .hover-line::after { transition: none; }
  .btn { transition: none; }
  .theme-toggle__icon { transition: none; }
}

/* ============================================================
 * 28.20 Print-Stylesheet
 * Optimiert für Drucken: Adresse + Hours + Telefon lesbar,
 * keine Navigation, kein Cookie-Banner, kein Maps-Embed.
 * ============================================================ */
@media print {
  /* Reset auf Light-Theme + Schwarz auf Weiß */
  html, body { background: #fff !important; color: #000 !important; }
  html[data-theme], body[data-theme] { background: #fff !important; color: #000 !important; }

  /* Alle interaktiven + dekorativen Elemente verstecken */
  .header, .footer, .mobile-bar, .skip-link,
  #sf-consent-banner, .theme-toggle,
  [data-maps-src], [data-maps-trigger],
  .hero, .ticker, .cut-large-deco,
  nav, video, iframe { display: none !important; }

  /* Links: URL nach Linktext drucken */
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.9em; color: #555; }
  a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; }
  a[href^="tel:"]::after { content: ""; }
  a[href^="mailto:"]::after { content: ""; }

  /* Typografie: serif für besseres Drucken */
  body, p, li, td, th {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 11pt !important;
    line-height: 1.5 !important;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Helvetica Neue', Arial, sans-serif !important;
    page-break-after: avoid;
    color: #000 !important;
  }
  h1 { font-size: 22pt !important; }
  h2 { font-size: 16pt !important; margin-top: 1em !important; }
  h3 { font-size: 13pt !important; }

  /* Bilder: maximal 50% Seitenbreite, kein color-burn */
  img { max-width: 50% !important; height: auto !important; page-break-inside: avoid; }

  /* Cards/Boxen: einfache Rahmen statt cut-corner */
  .cut, .cut-sm, .cut-lg {
    clip-path: none !important;
    border: 1px solid #999 !important;
    background: #fff !important;
    padding: 12px !important;
    page-break-inside: avoid;
  }

  /* Sections: vermeide page-break mitten in section heading */
  section { page-break-inside: avoid; }
  section h2 { page-break-after: avoid; }

  /* Print-Footer mit URL + Druckdatum */
  main::after {
    content: "Gedruckt von smokefactory.com · Neumarkt 31, 50667 Köln · Mo-Sa 10-20 Uhr";
    display: block;
    margin-top: 30px;
    padding-top: 12px;
    border-top: 1px solid #999;
    font-size: 9pt;
    color: #555;
    text-align: center;
  }

  /* Background-Patterns/Halftones verstecken */
  .halftone, .grain, .corner-mark, .sec-num-extra { display: none !important; }
}

/* ----------------------------------------------------------------
   21. Mobile-Politur (Lesbarkeit + Tap-Targets)
   ---------------------------------------------------------------- */
@media (max-width: 720px) {
  /* Mono-Labels nicht unter 12px (11px war grenzwertig) */
  .chip { font-size: 12px; }
  .breadcrumb { font-size: 12px; }
  /* Text-Link-CTAs (.hover-line.mono) bekommen eine größere Tap-Fläche (~36px) */
  a.hover-line.mono { padding-block: 9px; }
}

/* ----------------------------------------------------------------
   20. Reviews / Trust-Block (sichtbar, kein Schema)
   ---------------------------------------------------------------- */
.reviews-section {
  --quote-mark-size-hero: clamp(220px, 26vw, 420px);
  --quote-mark-size-agg:  clamp(260px, 30vw, 460px);
  --quote-mark-size-card: 160px;
  --quote-mark-opacity: 0.07;
  --aggregate-number-size: clamp(110px, 16vw, 220px);
  --review-card-min-h: 280px;
  padding: clamp(56px, 7vw, 96px) 0;
}
.reviews-heading {
  font-size: clamp(40px, 5.5vw, 80px);
  margin: 8px 0 28px;
}

/* ---- DESKTOP magazine grid (≥1024px via base, mobile overrides below) ---- */
.reviews-grid { display: grid; gap: 14px; }
.reviews-track { display: contents; }   /* children flow directly into .reviews-grid */

.reviews-section--full .reviews-grid {
  grid-template-columns: 320px repeat(3, 1fr);
  grid-template-rows: auto auto;
}
.reviews-section--full .aggregate-card        { grid-column: 1; grid-row: 1 / span 2; }
.reviews-section--full .review-card--hero     { grid-column: 2 / span 3; grid-row: 1; }
.reviews-section--full .reviews-track > article:nth-child(2) { grid-column: 2; grid-row: 2; }
.reviews-section--full .reviews-track > article:nth-child(3) { grid-column: 3; grid-row: 2; }
.reviews-section--full .reviews-track > article:nth-child(4) { grid-column: 4; grid-row: 2; }
.reviews-section--full .review-card--empty    { grid-column: 2 / span 3; grid-row: 1 / span 2; }

.reviews-section--compact .reviews-grid { grid-template-columns: 320px 1fr 1fr; }
.reviews-section--compact .aggregate-card { grid-column: 1; }
.reviews-section--compact .reviews-track > article:nth-child(1) { grid-column: 2; }
.reviews-section--compact .reviews-track > article:nth-child(2) { grid-column: 3; }
.reviews-section--compact .review-card--empty { grid-column: 2 / span 2; }

/* ---- Shared card chrome ---- */
.aggregate-card,
.review-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(22,22,26,0.10), transparent 55%), var(--panel);
  border-left: 3px solid var(--ember);
  padding: 32px;
  min-height: var(--review-card-min-h);
  display: flex;
  flex-direction: column;
}
/* Hover: ember underline slides in left→right */
.review-card::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  height: 2px; width: 100%; background: var(--ember);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.24s ease; z-index: 2;
}
.review-card:hover::after { transform: scaleX(1); }

.review-quote {
  position: absolute;
  top: -0.30em; right: 0.02em;
  font-family: var(--font-display);
  font-weight: 800; line-height: 1;
  color: var(--ember);
  opacity: var(--quote-mark-opacity);
  pointer-events: none; z-index: 0;
  font-size: var(--quote-mark-size-card);
}
.review-card--hero .review-quote { font-size: var(--quote-mark-size-hero); }
.review-quote--agg { font-size: var(--quote-mark-size-agg); }

/* ---- Aggregate card ---- */
.aggregate-card { justify-content: center; }
.aggregate-number {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-weight: 800; line-height: 0.9;
  letter-spacing: -0.03em;
  font-size: var(--aggregate-number-size);
  color: var(--fg);
}
.aggregate-meta {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 3px;
}
.aggregate-count {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(40px, 5vw, 56px); line-height: 1; color: var(--ember);
}
.aggregate-label {
  font-family: var(--font-body); font-weight: 700;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg);
}
.aggregate-source {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--smoke);
}

/* ---- Review text ---- */
.review-text {
  position: relative; z-index: 1;
  margin: 0; padding: 0; border: 0;
  font-size: 17px; line-height: 1.55; color: var(--fg);
  flex: 1 1 auto;
}
.review-card--hero .review-text { font-size: clamp(18px, 2vw, 24px); line-height: 1.45; }
.review-card--secondary .review-text {
  font-size: 15px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
  overflow: hidden;
}
.review-card--empty .review-text { font-size: 15px; color: var(--smoke); }

.review-divider {
  height: 1px; background: var(--line);
  margin: 18px 0 14px; width: 60%;
  position: relative; z-index: 1;
}
.aggregate-card .review-divider { margin: 16px 0 12px; }

/* ---- Footer / author ---- */
.review-footer {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px;
}
.review-avatar {
  position: relative;
  flex: 0 0 48px; width: 48px; height: 48px;
  background: var(--ember);
  display: grid; place-items: center;
  overflow: hidden;
}
.review-avatar::after {
  content: attr(data-initials);
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  color: var(--on-emphasis);
}
.review-avatar img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
}
.review-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.review-author {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; letter-spacing: 0.01em; text-transform: uppercase; color: var(--fg);
}
.review-sub { display: inline-flex; align-items: center; gap: 8px; }
.review-source {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--smoke);
}

/* ---- Stars ---- */
.rv-stars { display: inline-flex; gap: 2px; }
.rv-star { width: 18px; height: 18px; fill: var(--line); }
.rv-star--on { fill: var(--ember); }
.rv-stars--sm .rv-star { width: 14px; height: 14px; }
.rv-stars--lg { margin-top: 10px; }
.rv-stars--lg .rv-star { width: 36px; height: 36px; }

/* ---- Footer rule + CTA + swipe hint ---- */
.reviews-rule { border: 0; height: 1px; background: var(--line); margin: 28px 0 20px; }
.reviews-cta { margin-top: 4px; }
.reviews-swipe-hint { display: none; }

/* ---- Mobile (<1024px): aggregate full-width, cards become scroll-snap carousel ---- */
@media (max-width: 1023px) {
  .reviews-grid { display: flex; flex-direction: column; gap: 14px; }
  .reviews-track {
    display: flex; overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    margin-inline: calc(-1 * var(--page-padding, 20px));
    padding-inline: var(--page-padding, 20px);
    scroll-padding-inline: var(--page-padding, 20px);
  }
  .reviews-track::-webkit-scrollbar { display: none; }
  .reviews-track > article {
    flex: 0 0 85vw; min-height: auto;
    scroll-snap-align: start; scroll-snap-stop: always;
  }
  .review-card--secondary .review-text { -webkit-line-clamp: 5; }
  .reviews-swipe-hint {
    display: block; text-align: center; margin-top: 14px;
    font-size: 11px; letter-spacing: 0.25em; color: var(--smoke);
  }
}
@media (max-width: 720px) {
  .aggregate-card, .review-card { padding: 24px; }
}

/* ---- Entrance + hover animations (opacity/transform only) ---- */
@media (prefers-reduced-motion: no-preference) {
  .aggregate-card, .review-card {
    animation: rv-fade-up 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
  .reviews-track > *:nth-child(1) { animation-delay: 0.08s; }
  .reviews-track > *:nth-child(2) { animation-delay: 0.16s; }
  .reviews-track > *:nth-child(3) { animation-delay: 0.24s; }
  .reviews-track > *:nth-child(4) { animation-delay: 0.32s; }
  @keyframes rv-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
  /* Aggregate stars pop in with stagger */
  .rv-stars--lg .rv-star { animation: rv-star-pop 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
  .rv-stars--lg .rv-star:nth-child(1) { animation-delay: 0.20s; }
  .rv-stars--lg .rv-star:nth-child(2) { animation-delay: 0.28s; }
  .rv-stars--lg .rv-star:nth-child(3) { animation-delay: 0.36s; }
  .rv-stars--lg .rv-star:nth-child(4) { animation-delay: 0.44s; }
  .rv-stars--lg .rv-star:nth-child(5) { animation-delay: 0.52s; }
  @keyframes rv-star-pop {
    from { opacity: 0; transform: scale(0.4) rotate(-12deg); }
    to   { opacity: 1; transform: none; }
  }
}