/* =============================================
   Manufaktur X - V4 Oryzo
   Dark warm narrative scroll
   ============================================= */

:root {
  /* core palette */
  --bg:           #100904;       /* near-black, warm brown undertone */
  --bg-soft:      #170d06;       /* one tier lighter for layered surfaces */
  --bg-elev:      #1f130a;       /* card / panel surface */
  --fg:           #f4ecd8;       /* cream */
  --fg-mute:      rgba(244, 236, 216, 0.62);
  --fg-dim:       rgba(244, 236, 216, 0.42);
  --accent:       #FF8539;       /* pumpkin orange */
  --accent-2:     #ffb074;       /* lighter orange highlight */
  --hairline:     rgba(244, 236, 216, 0.12);
  --hairline-strong: rgba(244, 236, 216, 0.22);
  --pill-bg:      rgba(244, 236, 216, 0.06);
  --pill-bg-hover: rgba(244, 236, 216, 0.10);
  --glow:         rgba(255, 133, 57, 0.10);
  --glow-strong:  rgba(255, 133, 57, 0.22);

  /* type */
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

html, body {
  background: var(--bg);
  color: var(--fg);
  /* `clip` (not `hidden`) so position:sticky inside the page still works.
     `overflow-x: hidden` creates a scroll-context and silently disables
     sticky descendants in Safari and some Chrome versions. */
  overflow-x: clip;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, var(--glow) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(255, 133, 57, 0.06) 0%, transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
input, select { font-family: inherit; color: inherit; }

::selection { background: var(--accent); color: var(--bg); }

/* ============== layout ============== */
.wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 768px) { .wrap { padding: 0 22px; } }

/* ============== type primitives ============== */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.eyebrow .star {
  color: var(--accent);
  font-style: italic;
  font-weight: 700;
  margin-left: 2px;
}

.h-hero {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(48px, 9vw, 144px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--fg);
}
.h-hero .accent { color: var(--accent); }
.h-hero .light { font-weight: 300; color: var(--fg-mute); }
.h-hero .ital { font-style: italic; font-weight: 800; }
.h-hero .star { color: var(--accent); font-style: italic; font-weight: 700; }

.h-section {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(40px, 6.5vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.h-section .accent { color: var(--accent); }
.h-section .light { font-weight: 300; color: var(--fg-mute); }
.h-section .ital { font-style: italic; }
.h-section .star { color: var(--accent); font-style: italic; font-weight: 700; }

.lede {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--fg-mute);
  max-width: 60ch;
  font-weight: 400;
}

.foot-asterisk {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.foot-asterisk em { color: var(--accent); font-style: italic; font-weight: 600; }

/* ============== top bar / nav ============== */
.topbar {
  position: relative;
  z-index: 30;
  background: transparent;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  gap: 16px;
}
.topbar a { color: var(--fg-mute); transition: color 0.2s; }
.topbar a:hover { color: var(--accent); }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 14px; }
.topbar-pipe { width: 1px; height: 10px; background: var(--hairline-strong); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(16, 9, 4, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--hairline);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 32px;
}
.brand {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.brand .star {
  color: var(--accent);
  font-style: italic;
  font-weight: 700;
}
.nav {
  display: flex;
  gap: 28px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}
.nav a {
  color: var(--fg-mute);
  padding: 6px 0;
  position: relative;
  transition: color 0.2s;
}
.nav a:hover { color: var(--fg); }
.nav a.active { color: var(--accent); }
.nav a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--accent);
}
.header-tools { display: flex; align-items: center; gap: 12px; }
.menu-toggle {
  display: none;
  width: 36px; height: 36px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  color: var(--fg);
}
@media (max-width: 980px) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
}
.mobile-menu {
  display: none;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--hairline);
  padding: 12px 22px 22px;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.mobile-menu a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--fg);
}
.mobile-menu a:last-child { border-bottom: 0; }
.mobile-menu.is-open { display: block; }

/* ============== buttons / pills ============== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.2s ease, background 0.2s, box-shadow 0.2s, color 0.2s;
  cursor: pointer;
}
.btn:hover {
  background: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(255, 133, 57, 0.18);
  transform: translateY(-1px);
}
.btn .arrow { transition: transform 0.2s; }
.btn:hover .arrow { transform: translateX(3px); }

.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--hairline-strong);
}
.btn-ghost:hover {
  background: var(--pill-bg-hover);
  border-color: var(--accent);
  color: var(--fg);
  box-shadow: none;
}

.btn-sm { padding: 10px 18px; font-size: 12px; }

/* ============== sections ============== */
section { position: relative; }

.section-pad { padding: 140px 0; }
@media (max-width: 768px) { .section-pad { padding: 88px 0; } }

/* scroll continue indicator */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.scroll-cue .chev {
  display: inline-block;
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, transparent, var(--accent));
  position: relative;
}
.scroll-cue .chev::after {
  content: '';
  position: absolute;
  left: -3px; bottom: 0;
  width: 7px; height: 7px;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  transform: rotate(45deg);
}

/* ============== reveal animations ============== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform, opacity;
}
.reveal.is-in { opacity: 1; transform: translateY(0); }

.reveal-words .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(60%);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal-words.is-in .word { opacity: 1; transform: translateY(0); }

.reveal-img {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 1s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal-img.is-in { opacity: 1; transform: scale(1); }

/* ============== HERO ============== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 0 100px;
  overflow: hidden;
}
/* Photographic hero variant: workshop image full-bleed with a dark left-to-right gradient
   so the bold text on the left stays legible while the workshop reads on the right. */
.hero-photo .hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('hero-workshop.png');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  z-index: 0;
}
.hero-photo .hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(16,9,4,0.96) 0%,
      rgba(16,9,4,0.86) 32%,
      rgba(16,9,4,0.55) 58%,
      rgba(16,9,4,0.18) 100%),
    linear-gradient(180deg,
      rgba(16,9,4,0.55) 0%,
      rgba(16,9,4,0) 28%,
      rgba(16,9,4,0.55) 100%);
}
/* ============== Hero row: 3D door on left, headline + supporting text on right ==============
   The model-viewer's height stretches to match the headline's height (which
   spans Stahl... → ...Maß) via align-items: stretch on the row. The text column
   gets the natural width on the right. */
.hero-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-top: 40px;
  position: relative;
  z-index: 2;
}

.hero-photo .hero-text {
  max-width: 580px;
  position: relative;
  z-index: 2;
}
.hero-photo .h-hero {
  font-size: clamp(44px, 6.6vw, 96px);
  max-width: 12ch;
}
.hero-photo .lede {
  max-width: 56ch;
}

/* model-viewer element styles. Locked to horizontal-only rotation via the
   min-camera-orbit / max-camera-orbit attributes (both phi=90°), and pan is
   disabled - so dragging spins the door around its own vertical axis and
   never moves it sideways. */
.hero-3d {
  width: 100%;
  height: clamp(420px, 70vh, 720px);
  background: transparent;
  --poster-color: transparent;
  --progress-bar-color: var(--accent);
  --progress-bar-height: 2px;
  outline: none;
  cursor: grab;
}
.hero-3d:active { cursor: grabbing; }

@media (max-width: 980px) {
  .hero-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero-3d {
    height: clamp(320px, 50vh, 480px);
  }
  .hero-photo .hero-text { max-width: 100%; }
}
.hero .wrap { position: relative; z-index: 2; }

.hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 64px;
}
.hero-meta .dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 12px var(--accent);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
}

.hero h1 {
  margin-bottom: 28px;
}
.hero .lede { margin-bottom: 36px; }

.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-stats {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.hero-stats .cell {
  padding: 24px 16px;
  border-right: 1px solid var(--hairline);
}
.hero-stats .cell:last-child { border-right: 0; }
.hero-stats .num {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.03em;
  color: var(--fg);
  line-height: 1;
  font-style: italic;
}
.hero-stats .num em {
  color: var(--accent);
  font-style: italic;
}
.hero-stats .lbl {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-top: 10px;
}
@media (max-width: 768px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-stats .cell:nth-child(2) { border-right: 0; }
  .hero-stats .cell:nth-child(1), .hero-stats .cell:nth-child(2) {
    border-bottom: 1px solid var(--hairline);
  }
}

/* hero subject - table illustration via CSS */
.hero-subject {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 176, 116, 0.4) 0%, rgba(255, 133, 57, 0.18) 30%, transparent 55%),
    radial-gradient(circle at 30% 80%, rgba(255, 133, 57, 0.22) 0%, transparent 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.hero-subject .ring {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
}
.hero-subject .ring-2 {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 1px dashed var(--hairline);
}
.hero-subject .table-illo {
  position: relative;
  width: 70%;
  height: auto;
  filter: drop-shadow(0 30px 80px rgba(255, 133, 57, 0.35));
}
.hero-subject .corner-tag {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero-subject .ct-tl { top: 4%; left: 6%; }
.hero-subject .ct-br { bottom: 6%; right: 4%; color: var(--fg-mute); }

/* ============== marquee ============== */
.marquee {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 22px 0;
  overflow: hidden;
  background: rgba(255, 133, 57, 0.04);
}
.marquee-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: marquee 36s linear infinite;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 38px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.marquee-track span {
  padding: 0 28px;
  color: var(--fg);
}
.marquee-track span.accent { color: var(--accent); font-style: italic; }
.marquee-track .sep {
  color: var(--accent);
  font-weight: 800;
  padding: 0 10px;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============== feat-photo (full-bleed photo background, white text on left) ==============
   Used for the section directly under the hero. The bench image fills the right/back of
   the frame; a dark left-to-right gradient holds the white text overlay. */
.feat-photo {
  position: relative;
  padding: 140px 0;
  border-top: 1px solid var(--hairline);
  overflow: hidden;
  min-height: 90vh;
}
.feat-photo-bg {
  position: absolute;
  inset: 0;
  background-image: url('workshop-bench.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
.feat-photo .wrap {
  position: relative;
  z-index: 2;
}
/* Text sits directly on the green cutting mat - no black panel behind it.
   Sized to fit the green open area on the left, never crossing onto the wooden
   cabinet on the right. A subtle ink-imprint text-shadow makes the white look
   like it's actually written/etched on the board. */
.feat-photo-text {
  max-width: 440px;
  color: #ffffff;
  /* Layered shadow: tight dark drop = ink soak, softer wider blur = depth. */
  text-shadow:
    0 1px 0 rgba(0,0,0,0.55),
    0 2px 4px rgba(0,0,0,0.55),
    0 0 18px rgba(0,0,0,0.35);
}
.feat-photo-text .eyebrow {
  margin-bottom: 22px;
  display: block;
  color: rgba(255,255,255,0.85);
}
.feat-photo-text .h-section {
  color: #ffffff;
  /* Trim down so it fits the narrower green area on the left. */
  font-size: clamp(36px, 4.8vw, 72px);
  margin-bottom: 24px;
}
.feat-photo-text .h-section .ital.accent { color: var(--accent); }
.feat-photo-text .lede {
  color: rgba(255,255,255,0.95);
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1.55;
  max-width: 100%;
}
.feat-photo-text .foot-asterisk {
  margin-top: 4px;
  display: block;
  color: rgba(255,255,255,0.85);
  font-size: 10px;
}
.feat-photo-text .foot-asterisk em { color: var(--accent); }

.feat-photo-spec {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
  margin-bottom: 24px;
}
.feat-photo-spec span {
  display: inline-flex;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.45);
  background: rgba(16,9,4,0.40);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: none;
}

@media (max-width: 980px) {
  .feat-photo { min-height: 0; padding: 96px 0; }
  .feat-photo-text { max-width: 100%; }
}

/* ============== feature sections (narrative) ============== */
.feat {
  position: relative;
  padding: 140px 0;
  border-top: 1px solid var(--hairline);
  overflow: hidden;
}
.feat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.feat.reverse .feat-grid { direction: rtl; }
.feat.reverse .feat-grid > * { direction: ltr; }
@media (max-width: 980px) {
  .feat-grid, .feat.reverse .feat-grid { grid-template-columns: 1fr; gap: 48px; direction: ltr; }
}

.feat-text { position: relative; }
.feat-text .eyebrow { margin-bottom: 24px; display: block; }
.feat-text .h-section { margin-bottom: 28px; }
.feat-text .lede { margin-bottom: 28px; }
.feat-text .foot-asterisk { margin-top: 8px; display: block; }

.feat-spec {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.feat-spec span {
  display: inline-flex;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: var(--pill-bg);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* feat visuals - radial-gradient placeholders */
.feat-visual {
  aspect-ratio: 1 / 1;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--bg-soft);
}
.feat-visual.steel {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 133, 57, 0.38) 0%, transparent 50%),
    radial-gradient(circle at 75% 70%, rgba(140, 90, 50, 0.3) 0%, transparent 60%),
    linear-gradient(135deg, #1a0e07 0%, #0c0703 100%);
}
.feat-visual.wood {
  background:
    radial-gradient(circle at 65% 40%, rgba(255, 176, 116, 0.45) 0%, transparent 55%),
    radial-gradient(circle at 25% 80%, rgba(180, 110, 60, 0.3) 0%, transparent 50%),
    linear-gradient(135deg, #1c1108 0%, #0e0805 100%);
}
.feat-visual.workshop {
  background:
    radial-gradient(circle at 50% 100%, rgba(255, 133, 57, 0.42) 0%, transparent 55%),
    radial-gradient(circle at 0% 0%, rgba(120, 80, 50, 0.25) 0%, transparent 50%),
    linear-gradient(160deg, #160d06 0%, #0a0502 100%);
}
.feat-visual::before {
  /* bright spotlight */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 220, 180, 0.16) 0%, transparent 40%);
  mix-blend-mode: screen;
}
.feat-visual .badge {
  position: absolute;
  top: 22px; left: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(16, 9, 4, 0.68);
  border: 1px solid var(--hairline-strong);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  backdrop-filter: blur(8px);
}
.feat-visual .badge .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.feat-visual .figure-num {
  position: absolute;
  bottom: 22px;
  right: 26px;
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(48px, 7vw, 96px);
  letter-spacing: -0.04em;
  color: var(--accent);
  line-height: 1;
  opacity: 0.92;
  text-shadow: 0 4px 30px rgba(255, 133, 57, 0.4);
}
.feat-visual .visual-label {
  position: absolute;
  bottom: 26px;
  left: 26px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
  max-width: 60%;
}

/* big "POWERED BY" style hero panel */
.story-panel {
  border-top: 1px solid var(--hairline);
  padding: 160px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.story-panel::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 700px; height: 700px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--glow-strong) 0%, transparent 60%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}
.story-panel > .wrap { position: relative; z-index: 2; }
.story-panel .h-section {
  font-size: clamp(56px, 11vw, 168px);
  margin-bottom: 24px;
}
.story-panel .foot-asterisk { font-size: 12px; }

/* ============== process / steps ============== */
.process {
  border-top: 1px solid var(--hairline);
  padding: 140px 0;
}
.process-head { margin-bottom: 80px; max-width: 720px; }
.process-head .h-section { margin-top: 16px; }

.steps { display: flex; flex-direction: column; gap: 0; }
.step-row {
  display: grid;
  grid-template-columns: 130px 1fr 1.1fr;
  gap: 32px;
  align-items: center;
  padding: 36px 0;
  border-top: 1px solid var(--hairline);
}
.step-row:last-child { border-bottom: 1px solid var(--hairline); }
.step-row .step-num {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(72px, 8vw, 120px);
  color: var(--accent);
  letter-spacing: -0.04em;
  line-height: 1;
}
.step-row h3 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -0.02em;
  color: var(--fg);
  margin-bottom: 8px;
}
.step-row p {
  color: var(--fg-mute);
  font-size: 15px;
  max-width: 50ch;
}
.step-row .step-aside {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.step-row .step-aside .pill {
  display: inline-flex;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: var(--pill-bg);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
@media (max-width: 768px) {
  .step-row { grid-template-columns: 80px 1fr; }
  .step-row .step-num { font-size: 56px; }
  .step-row .step-aside { display: none; }
}

/* ============== product comparison grid ============== */
.product-tier {
  border-top: 1px solid var(--hairline);
  padding: 140px 0;
}
.product-tier-head {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  margin-bottom: 70px;
  align-items: end;
}
@media (max-width: 980px) {
  .product-tier-head { grid-template-columns: 1fr; gap: 32px; }
}
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 980px) {
  .tier-grid { grid-template-columns: 1fr; }
}
.tier-card {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 133, 57, 0.04) 0%, transparent 60%), var(--bg-elev);
  padding: 28px 26px 26px;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s;
  display: flex;
  flex-direction: column;
}
.tier-card:hover {
  transform: translateY(-6px);
  border-color: var(--hairline-strong);
}
.tier-card .new-pill {
  position: absolute;
  top: 22px; right: 22px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}
.tier-card .tier-figure {
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.tier-card .tier-figure.t1 {
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 176, 116, 0.42) 0%, transparent 55%),
    linear-gradient(160deg, #1c1108 0%, #0c0602 100%);
}
.tier-card .tier-figure.t2 {
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 133, 57, 0.45) 0%, transparent 55%),
    linear-gradient(160deg, #1f1308 0%, #0a0502 100%);
}
.tier-card .tier-figure.t3 {
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 220, 180, 0.4) 0%, transparent 55%),
    radial-gradient(circle at 30% 80%, rgba(255, 133, 57, 0.32) 0%, transparent 50%),
    linear-gradient(160deg, #221509 0%, #0c0602 100%);
}
.tier-card .tier-figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 220, 180, 0.12) 0%, transparent 45%);
  mix-blend-mode: screen;
}
.tier-card .tier-name {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.025em;
  color: var(--fg);
  line-height: 1;
}
.tier-card .tier-price {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 15px;
  color: var(--accent);
  margin-top: 8px;
  margin-bottom: 22px;
  font-weight: 600;
}
.tier-card .tier-specs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 22px;
}
.tier-card .tier-specs .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--pill-bg);
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.06em;
}
.tier-card .tier-specs .row:nth-child(odd) { background: rgba(244, 236, 216, 0.03); }
.tier-card .tier-specs .row .k {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.tier-card .tier-specs .row .v { color: var(--fg); font-weight: 500; }
.tier-card .tier-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.tier-card .tier-cta:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.tier-card .tier-cta .arrow { transition: transform 0.2s; }
.tier-card .tier-cta:hover .arrow { transform: translateX(3px); }

/* ============== quote / testimonial ============== */
.quote-section {
  border-top: 1px solid var(--hairline);
  padding: 160px 0;
  text-align: center;
  position: relative;
}
.quote-section::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 800px; height: 600px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, var(--glow) 0%, transparent 60%);
  filter: blur(40px);
  z-index: 0;
}
.quote-section > .wrap { position: relative; z-index: 2; }
.quote-section .eyebrow { margin-bottom: 36px; display: block; }
.quote-section blockquote {
  font-family: var(--font-sans);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(28px, 4.4vw, 64px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--fg);
  max-width: 22ch;
  margin: 0 auto;
}
.quote-section blockquote .accent { color: var(--accent); font-style: italic; }
.quote-section .attr {
  margin-top: 40px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.quote-section .attr .who { color: var(--fg); }
.quote-section .stars { color: var(--accent); margin-left: 12px; letter-spacing: 0.2em; }

/* ============== FAQ ============== */
.faq {
  border-top: 1px solid var(--hairline);
  padding: 140px 0;
}
.faq-head { margin-bottom: 64px; max-width: 720px; }
.faq-head .h-section { margin-top: 16px; }
.faq-list { border-top: 1px solid var(--hairline); }
.faq-item {
  border-bottom: 1px solid var(--hairline);
  position: relative;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 32px 0;
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--fg);
  transition: color 0.2s;
}
.faq-item summary:hover { color: var(--accent); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .plus {
  flex-shrink: 0;
  font-family: var(--font-sans);
  color: var(--accent);
  font-size: 28px;
  font-style: normal;
  font-weight: 300;
  transition: transform 0.25s;
}
.faq-item[open] .plus { transform: rotate(45deg); }
.faq-item .answer {
  padding: 0 0 32px;
  color: var(--fg-mute);
  font-size: 16px;
  line-height: 1.6;
  max-width: 70ch;
}

/* ============== CTA strip ============== */
.cta-strip {
  border-top: 1px solid var(--hairline);
  padding: 160px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 1200px; height: 800px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, var(--glow-strong) 0%, transparent 60%);
  filter: blur(60px);
  z-index: 0;
}
.cta-strip > .wrap { position: relative; z-index: 2; }
.cta-strip .h-section { margin: 24px auto 36px; max-width: 18ch; }
.cta-strip .cluster {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============== footer ============== */
.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 100px 0 36px;
  background: var(--bg);
  position: relative;
}
.footer-mark {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 48px;
}
.footer-mark .star { font-style: italic; color: var(--fg); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--hairline);
}
@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-brand p {
  color: var(--fg-mute);
  font-size: 14px;
  max-width: 36ch;
  margin-bottom: 22px;
}
.footer-brand .badges { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-brand .badges span {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: var(--pill-bg);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.footer-col h4 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.footer-col a {
  display: block;
  font-size: 14.5px;
  color: var(--fg-mute);
  padding: 7px 0;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--fg); }
.footer-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 28px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.footer-bot a { color: var(--fg-dim); transition: color 0.2s; }
.footer-bot a:hover { color: var(--accent); }
.footer-bot .cluster { display: flex; gap: 22px; flex-wrap: wrap; }

/* Language indicator tag next to phone numbers. Says "EN · DE · SE" so the
   visitor knows which languages support speaks before calling. */
.mfx-phone-langs {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--fg-mute);
  vertical-align: middle;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .mfx-phone-langs { font-size: 9px; padding: 2px 6px; margin-left: 6px; }
}

/* Country / language switcher in the footer. Matches the layout of the old
   shop's CountrySwitcher: single-column dropdown with a search input at the
   top, opening UPWARD (bottom: 100%) so it doesn't get clipped at the page
   edge. Trigger is a pill button; dropdown ~256px wide, max ~14 rows tall. */
.footer-country {
  position: relative;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  display: inline-block;
}
.footer-country .fc-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.footer-country .fc-trigger:hover { border-color: var(--accent); }
.footer-country .fc-flag { font-size: 18px; line-height: 1; }
.footer-country .fc-currency { display: none; }
.footer-country .fc-caret {
  color: var(--fg-mute);
  margin-left: 2px;
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}
.footer-country.is-open .fc-caret { transform: rotate(180deg); }

.footer-country .fc-list {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 50;
  width: 256px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fefcf6;
  color: #1a120a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.footer-country .fc-search {
  padding: 8px;
  border-bottom: 1px solid #e5dfd0;
  background: #fefcf6;
}
.footer-country .fc-search input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 8px 12px;
  background: #f5f0e3;
  border: 1px solid #e5dfd0;
  border-radius: 8px;
  color: #1a120a;
  outline: none;
  transition: border-color 0.16s ease;
}
.footer-country .fc-search input:focus { border-color: var(--accent); }
.footer-country .fc-search input::placeholder { color: #8a7e6a; }
.footer-country .fc-options {
  max-height: 224px;
  overflow-y: auto;
  padding: 4px 0;
}
.footer-country .fc-item { margin: 0; }
.footer-country .fc-item a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: #1a120a;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.16s ease, color 0.16s ease;
}
.footer-country .fc-item a:hover { background: #f5f0e3; }
.footer-country .fc-item.is-active a { color: var(--accent); font-weight: 600; background: rgba(255, 133, 57, 0.08); }
.footer-country .fc-item .fc-flag { font-size: 16px; line-height: 1; flex-shrink: 0; width: 20px; text-align: center; }
.footer-country .fc-item .fc-name { flex: 1; }
.footer-country .fc-item .fc-check {
  width: 16px;
  height: 16px;
  color: var(--accent);
  display: none;
}
.footer-country .fc-item.is-active .fc-check { display: block; }
.footer-country .fc-empty {
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: #8a7e6a;
}

/* ============== SHOP PAGE ============== */
.page-hero {
  padding: 120px 0 80px;
  border-bottom: 1px solid var(--hairline);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  left: 100%; top: 0;
  width: 600px; height: 600px;
  transform: translate(-50%, -30%);
  background: radial-gradient(circle, var(--glow-strong) 0%, transparent 60%);
  filter: blur(40px);
  z-index: 0;
}
.page-hero > .wrap { position: relative; z-index: 2; }
.page-hero .crumb {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 28px;
}
.page-hero .crumb a { color: var(--fg-dim); transition: color 0.2s; }
.page-hero .crumb a:hover { color: var(--accent); }
.page-hero h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(48px, 9vw, 144px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--fg);
  margin-bottom: 28px;
}
.page-hero h1 .light { font-weight: 300; color: var(--fg-mute); }
.page-hero h1 .accent { color: var(--accent); }
.page-hero h1 .ital { font-style: italic; }

.shop-toolbar {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.shop-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: var(--pill-bg);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--fg-mute);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.chip:hover { background: var(--pill-bg-hover); color: var(--fg); border-color: var(--accent); }
.chip.is-active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  font-weight: 600;
}
.chip .x {
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.7;
}
.chip.is-active .x { opacity: 0.85; }
.shop-sort select {
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: var(--pill-bg);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--fg);
  appearance: none;
  cursor: pointer;
}

.shop-grid {
  padding: 80px 0 140px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 768px) {
  .shop-grid { grid-template-columns: 1fr; gap: 18px; }
}

.product-card {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: 28px;
  background: var(--bg-soft);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s;
  display: block;
}
.product-card:hover {
  transform: translateY(-6px);
  border-color: var(--hairline-strong);
}
.product-card .product-img {
  aspect-ratio: 16 / 11;
  position: relative;
  overflow: hidden;
}
.product-card .product-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(16, 9, 4, 0.85) 100%);
}
.product-card .product-img.bg1 {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 176, 116, 0.45) 0%, transparent 55%),
    linear-gradient(160deg, #1f1308 0%, #0a0502 100%);
}
.product-card .product-img.bg2 {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 133, 57, 0.42) 0%, transparent 55%),
    linear-gradient(160deg, #211408 0%, #0a0502 100%);
}
.product-card .product-img.bg3 {
  background:
    radial-gradient(circle at 50% 45%, rgba(220, 180, 130, 0.4) 0%, transparent 55%),
    linear-gradient(160deg, #1d1108 0%, #0a0502 100%);
}
.product-card .product-img.bg4 {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 200, 150, 0.4) 0%, transparent 55%),
    linear-gradient(160deg, #1f1308 0%, #0a0502 100%);
}
.product-card .product-img.bg5 {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 150, 90, 0.42) 0%, transparent 55%),
    linear-gradient(160deg, #20140a 0%, #0a0502 100%);
}
.product-card .product-img.bg6 {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 180, 120, 0.4) 0%, transparent 55%),
    linear-gradient(160deg, #1c1107 0%, #0a0502 100%);
}
.product-card .product-img.bg7 {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 160, 100, 0.42) 0%, transparent 55%),
    linear-gradient(160deg, #1e1308 0%, #0a0502 100%);
}
.product-card .product-img.bg8 {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 195, 140, 0.4) 0%, transparent 55%),
    linear-gradient(160deg, #1d1208 0%, #0a0502 100%);
}
.product-card .product-img.bg9 {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 170, 110, 0.42) 0%, transparent 55%),
    linear-gradient(160deg, #211408 0%, #0a0502 100%);
}
.product-card .product-tag {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(16, 9, 4, 0.7);
  border: 1px solid var(--hairline-strong);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  backdrop-filter: blur(8px);
}
.product-card .product-tag.new {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-weight: 700;
}
.product-card .product-meta {
  padding: 24px 28px 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.product-card .product-cat {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dim);
  display: block;
  margin-bottom: 8px;
}
.product-card .product-name {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--fg);
}
.product-card .product-name .star { color: var(--accent); font-style: italic; }
.product-card .product-side { text-align: right; }
.product-card .product-price {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 1;
}
.product-card .product-price small {
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  display: block;
  margin-top: 4px;
}
.product-card .product-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--fg);
  transition: color 0.2s;
}
.product-card:hover .product-link { color: var(--accent); }
.product-card .product-link .arrow { transition: transform 0.2s; }
.product-card:hover .product-link .arrow { transform: translateX(3px); }

/* ============== CONFIGURATOR ============== */
.config-wrap {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  min-height: calc(100vh - 102px);
  border-bottom: 1px solid var(--hairline);
}
@media (max-width: 980px) { .config-wrap { grid-template-columns: 1fr; } }

.viewer-pane {
  position: sticky;
  top: 102px;
  align-self: start;
  height: calc(100vh - 102px);
  min-height: 560px;
  border-right: 0;
  /* Workshop photo backdrop — model-viewer canvas is transparent
     (no skybox-image set), so this image shows through behind the door.
     A dark overlay layer is composited ON TOP of the workshop image but
     UNDER the canvas, darkening the bg without dimming the door. */
  background-image:
    linear-gradient(rgba(16, 9, 4, 0.40), rgba(16, 9, 4, 0.40)),
    url('workshop-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #1a120a;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
/* Edge-fade overlay — softens the seam between the workshop photo and
   the surrounding dark options-pane / page. Right edge fades into the
   options-pane on the right, top/bottom darken slightly so meta/checkout
   blend in. Sits above the canvas (z-index 2) so it dims the model's
   silhouette at the corners but stays under HTML labels (z-index 6) and
   loader (z-index 5). */
.viewer-pane .viewer-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    /* Right-edge fade — blends into the OPTIONS-PANE (#1a120b = rgb(26,18,11)),
       not pure black, so the seam to the options column is invisible. */
    linear-gradient(90deg, transparent 55%, rgba(26, 18, 11, 0.55) 88%, rgba(26, 18, 11, 0.96) 100%),
    /* Top fade — blends into the page bg (#100904 = rgb(16,9,4)) above. */
    linear-gradient(180deg, rgba(16, 9, 4, 0.55) 0%, rgba(16, 9, 4, 0.0) 12%),
    /* SHORT bottom fade — only the very last sliver of the canvas dims
       slightly, so the door's bottom (anchored at ~80% from top) stays
       clean and visible. viewer-meta starts the real darkening below. */
    linear-gradient(180deg,
      rgba(16, 9, 4, 0.0)  88%,
      rgba(16, 9, 4, 0.18) 100%),
    /* Subtle radial vignette around the model (kept gentle so the door
       silhouette doesn't get crushed at the corners). */
    radial-gradient(ellipse 95% 85% at 50% 45%, transparent 55%, rgba(16, 9, 4, 0.25) 100%);
}
/* Children that previously relied on viewer-pane's 28px padding need
   their own padding now that the parent goes edge-to-edge. */
.viewer-pane .viewer-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 4;
}
.viewer-pane .viewer-meta { padding: 12px 18px 4px; }
.viewer-pane .viewer-checkout { padding: 8px 18px 18px; margin-top: 0; }
@media (max-width: 980px) {
  /* Mobile: viewer pins to top:0 and sits ABOVE the header (z-index > 40) so
     once the user scrolls past it, the viewer fills the screen edge-to-edge.
     The header scrolls away naturally; cfg-mobile-bar handles the bottom CTA. */
  .viewer-pane {
    position: sticky;
    top: 0;
    z-index: 50;              /* above .site-header (z-index 40) */
    height: 56vh;
    min-height: 360px;
    max-height: 520px;
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
    padding: 0;
  }
  .viewer-pane .viewer-tag { top: 12px; left: 12px; }
  .viewer-pane .viewer-meta { padding: 8px 14px 4px; }
  .viewer-checkout { display: none; }
  .viewer-pane .viewer-meta { padding-top: 10px; font-size: 10px; letter-spacing: 0.16em; }
}

/* Animated chevron at the bottom of the mobile viewer that hints there's
   more to scroll. Bounces gently. Auto-hides as soon as the user starts
   to scroll past the viewer. */
.viewer-scroll-cue {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  font-size: 18px;
  color: var(--accent);
  pointer-events: none;
  opacity: 0.85;
  animation: cueBounce 1.4s ease-in-out infinite;
}
@media (max-width: 980px) {
  .viewer-scroll-cue { display: block; }
}
@keyframes cueBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.85; }
  50%      { transform: translateX(-50%) translateY(6px); opacity: 1; }
}

.viewer-pane .viewer-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(16, 9, 4, 0.7);
  border: 1px solid var(--hairline-strong);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg);
  backdrop-filter: blur(8px);
}
.viewer-pane .viewer-tag .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.viewer-pane .viewer-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.viewer-pane .viewer-stage::before {
  /* spotlight floor */
  content: '';
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 30px;
  background: radial-gradient(ellipse, rgba(255, 133, 57, 0.4) 0%, transparent 70%);
  filter: blur(20px);
}
.viewer-pane .viewer-3d-illo {
  width: 80%;
  max-width: 460px;
  filter: drop-shadow(0 20px 80px rgba(255, 133, 57, 0.3));
  position: relative;
  z-index: 2;
}
/* Real Three.js viewer canvas - fills the viewer-stage so the existing
   spotlight glow + glow border read through behind the door. */
.cfg-viewer-canvas {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: block;
  cursor: grab;
}
.cfg-viewer-canvas:active { cursor: grabbing; }
.cfg-viewer-canvas canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent;
  border-radius: 18px;
  touch-action: none;
}

/* Dimension labels overlaid on the canvas - projected from 3D each frame */
.dim-label {
  position: absolute;
  color: rgba(255, 255, 255, 0.85);
  font: 500 10px/1 var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  letter-spacing: 0.04em;
  pointer-events: none;
  transform: translate(-50%, -50%);
  text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 0 8px rgba(0,0,0,0.45);
  z-index: 4;
  white-space: nowrap;
}
.dim-label-total {
  color: white;
  font-weight: 700;
  font-size: 13px;
}

/* ============== Setting-Render modal ==============
   v0: one setting (watercolor craftsman house). On render-button click we
   snapshot the live canvas, set it as the .setting-door img, layer with
   blend-mode + filters so the 3D render fuses with the painted scene. */
.setting-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 5, 2, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.setting-modal[hidden] { display: none !important; }
.setting-modal-card {
  background: var(--bg-soft, #100904);
  border: 1px solid var(--hairline-strong, rgba(244,236,216,0.18));
  border-radius: 18px;
  max-width: 980px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,133,57,0.08);
}
.setting-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(16, 9, 4, 0.8);
  color: var(--fg, #f4ecd8);
  border: 1px solid rgba(244,236,216,0.25);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.setting-modal-close:hover {
  background: var(--accent, #FF8539);
  color: #100904;
  border-color: var(--accent, #FF8539);
}
.setting-canvas {
  position: relative;
  width: 100%;
  background: #f5efe0; /* paper hint while bg loads */
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.setting-bg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
}
/* Door snapshot positioned over the painted door area. Coords below are tuned
   for the Apr 29 craftsman scene - adjust if the source image changes. */
.setting-door {
  position: absolute;
  top: 47%;
  left: 41%;
  transform: translate(-50%, -50%);
  width: 9%;
  max-width: 90px;
  /* Make the 3D snapshot blend with the watercolor - slight desaturation,
     a whisper of sepia, multiply blend so dark frame mixes with the paint. */
  filter: contrast(1.05) saturate(0.65) sepia(0.18) brightness(0.95);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.setting-modal-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-top: 1px solid var(--hairline, rgba(244,236,216,0.14));
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute, #6e6759);
}
.setting-modal-foot em {
  color: var(--fg, #f4ecd8);
  font-style: normal;
}
.setting-result {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
  background: #f5efe0;
}
.setting-status {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(16, 9, 4, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 3;
  color: var(--fg, #f4ecd8);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  padding: 24px;
}
.setting-status[hidden] { display: none !important; }
.spinner {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(244,236,216,0.18);
  border-top-color: var(--accent, #FF8539);
  border-radius: 50%;
  animation: setting-spin 0.7s linear infinite;
}
@keyframes setting-spin {
  to { transform: rotate(360deg); }
}
.setting-apikey {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  background: rgba(16, 9, 4, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 4;
  color: var(--fg, #f4ecd8);
  text-align: center;
}
.setting-apikey[hidden] { display: none !important; }
.setting-apikey h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.setting-apikey p {
  margin: 0;
  max-width: 420px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-soft, rgba(244,236,216,0.75));
}
.setting-apikey input {
  width: 100%;
  max-width: 380px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--hairline-strong, rgba(244,236,216,0.18));
  background: rgba(244,236,216,0.04);
  color: var(--fg, #f4ecd8);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.setting-apikey input:focus {
  outline: none;
  border-color: var(--accent, #FF8539);
}
.setting-apikey .apikey-hint {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute, #6e6759);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

/* V4-style range slider for the configurator option groups */
.cfg-slider {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cfg-slider input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--hairline-strong, rgba(244,236,216,0.18));
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.cfg-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent), 0 0 12px rgba(255,133,57,0.45);
  cursor: grab;
  transition: transform 0.12s ease;
}
.cfg-slider input[type=range]::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.15);
}
.cfg-slider input[type=range]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent), 0 0 12px rgba(255,133,57,0.45);
  cursor: grab;
}
.cfg-slider input[type=range]::-moz-range-track {
  height: 4px;
  background: var(--hairline-strong, rgba(244,236,216,0.18));
  border-radius: 999px;
}
.cfg-slider-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.viewer-pane .viewer-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  padding-bottom: 6px;
  /* Picks up just below the canvas — top of the meta row is mostly
     transparent so the door's bottom can extend right up to it without
     being dimmed, then darkens to 0.65 by the bottom of this row. */
  background: linear-gradient(180deg,
    rgba(16, 9, 4, 0.20) 0%,
    rgba(16, 9, 4, 0.65) 100%);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.viewer-pane .viewer-meta strong { color: var(--accent); font-weight: 600; }
.viewer-pane .viewer-meta .cfg-reset-btn { color: var(--fg-mute); font-weight: 500; }
.viewer-pane .viewer-meta .cfg-reset-btn:hover { color: var(--accent); }

/* Price + Add-to-cart row docked at the bottom of the sticky viewer.
   Replaces the old free-floating §5 Kalkulation card. */
.viewer-checkout {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 0;
  padding: 8px 18px 18px;
  /* Continues the gradient from viewer-meta (0.65) and lands at
     near-opaque so the CTA button sits on a clean dark plate. */
  background: linear-gradient(180deg,
    rgba(16, 9, 4, 0.65) 0%,
    rgba(16, 9, 4, 0.92) 100%);
}
.viewer-checkout .vc-price {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  flex-shrink: 0;
}
.viewer-checkout .vc-price .vc-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 4px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.7);
}
.viewer-checkout .vc-price strong {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 800;
  font-style: italic;
  color: var(--accent);
  letter-spacing: 0.005em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85), 0 0 10px rgba(0, 0, 0, 0.55);
}
.viewer-checkout .vc-cta {
  flex: 1;
  justify-content: center;
  text-align: center;
  padding: 16px 18px;
}

.viewer-controls {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.viewer-controls button {
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: var(--pill-bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.viewer-controls button:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* options pane */
.options-pane {
  padding: 48px 48px 80px;
  background:
    radial-gradient(ellipse 60% 40% at 100% -10%, rgba(255, 165, 90, 0.05) 0%, transparent 60%),
    #1a120b;
}
@media (max-width: 768px) { .options-pane { padding: 56px 6px 100px; } }

.product-title-row {
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 28px;
  margin-bottom: 36px;
}
.product-title-row .crumb {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 16px;
}
.product-title-row .crumb a { color: var(--fg-dim); transition: color 0.2s; }
.product-title-row .crumb a:hover { color: var(--accent); }
.product-title-row h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.product-title-row h1 .ital { font-style: italic; color: var(--accent); }
.product-title-row .stock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--pill-bg);
  border: 1px solid var(--hairline-strong);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.product-title-row .stock .dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent);
}

.option-group {
  border-bottom: 1px solid var(--hairline);
  padding: 18px 0;
}
.option-group:last-child { border-bottom: 0; padding-bottom: 6px; }
.option-group:first-child { padding-top: 6px; }
.option-group .label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
/* §1.3 Türanschlag now sits in an option-group-pair with §1.4 Öffnungswinkel,
   so its column is already half-width — no extra cap needed. */
.option-group .label .name {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
}
.option-group .label .name .num { color: var(--accent); margin-right: 8px; font-style: italic; font-weight: 700; font-size: 13px; }
.option-group .label .value { display: none; }

.opt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.opt-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: var(--pill-bg);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--fg-mute);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.opt-pill:hover { background: var(--pill-bg-hover); color: var(--fg); border-color: var(--accent); }
.opt-pill.is-active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  font-weight: 600;
}
.opt-pill .swatch-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
}

.size-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 600px) { .size-row { grid-template-columns: 1fr; } }
.size-input label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 10px;
}
.size-input .field {
  display: flex;
  align-items: center;
  border: 1px solid var(--hairline-strong);
  background: var(--pill-bg);
  border-radius: 999px;
  padding: 0 18px;
  transition: border-color 0.2s;
}
.size-input .field:focus-within { border-color: var(--accent); }
.size-input input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 14px 0;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--fg);
  outline: none;
  width: 100%;
  min-width: 0;
}
.size-input .unit {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.toggle-list { display: flex; flex-direction: column; gap: 8px; }
.toggle {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 18px;
  border: 1px solid var(--hairline);
  background: var(--pill-bg);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.toggle:hover { background: var(--pill-bg-hover); border-color: var(--hairline-strong); }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle .t-mark {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.toggle:has(input:checked) {
  background: rgba(255, 133, 57, 0.08);
  border-color: var(--accent);
}
.toggle:has(input:checked) .t-mark {
  background: var(--accent);
  border-color: var(--accent);
}
.toggle:has(input:checked) .t-mark::after {
  content: '';
  width: 8px; height: 4px;
  border-left: 1.5px solid var(--bg);
  border-bottom: 1.5px solid var(--bg);
  transform: rotate(-45deg) translate(1px, -1px);
}
.toggle .t-name {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--fg);
}
.toggle .t-desc {
  display: block;
  font-size: 12px;
  color: var(--fg-dim);
  margin-top: 2px;
}
.toggle .t-price {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 14px;
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

.price-card {
  margin-top: 36px;
  border: 1px solid var(--hairline-strong);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 133, 57, 0.06) 0%, transparent 60%), var(--bg-elev);
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.price-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, var(--glow-strong) 0%, transparent 60%);
  filter: blur(20px);
}
.price-card > * { position: relative; z-index: 2; }
.price-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 14px;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.price-head .num { color: var(--accent); margin-right: 6px; font-style: italic; }
.breakdown { margin-bottom: 24px; }
.breakdown .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--hairline);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-mute);
}
.breakdown .row .v { color: var(--fg); font-weight: 500; }
.breakdown .row:last-child { border-bottom: 0; }
.breakdown .row.total {
  margin-top: 6px;
  border-top: 1px solid var(--hairline-strong);
  padding-top: 18px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
  border-bottom: 0;
}
.breakdown .row.total .v {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(36px, 4.5vw, 56px);
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--accent);
  line-height: 1;
}
.price-card .btn { width: 100%; justify-content: center; }
.ship-line {
  display: block;
  text-align: center;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.ship-line strong { color: var(--accent); font-weight: 500; }

/* spec strip */
.spec-strip {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.spec-strip .item {
  padding: 32px 24px;
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spec-strip .item:last-child { border-right: 0; }
.spec-strip .k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.spec-strip .v {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -0.02em;
  color: var(--fg);
  line-height: 1;
}
.spec-strip .v em { color: var(--accent); font-style: italic; }
@media (max-width: 768px) {
  .spec-strip { grid-template-columns: repeat(2, 1fr); }
  .spec-strip .item:nth-child(2) { border-right: 0; }
  .spec-strip .item:nth-child(1), .spec-strip .item:nth-child(2) {
    border-bottom: 1px solid var(--hairline);
  }
}

/* configurator material story (uses existing .feat) - already styled */

/* ============== utility ============== */
.cluster { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.head-r { align-self: end; }
@media (max-width: 768px) { .head-r { align-self: start; } }

section[id] { scroll-margin-top: 102px; }

/* ensure focus ring is visible on dark */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* =========================================================
   PARTIALS: header dropdown · cart badge · footer extensions
   Appended for the partial-driven nav matching the live shop.
   Uses existing tokens - no new color variables.
   ========================================================= */

/* Nav: shared trigger button styling matches .nav a */
.nav .nav-item { position: relative; display: flex; align-items: center; }
.nav .nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-mute);
  transition: color 0.2s;
  position: relative;
}
.nav .nav-trigger:hover { color: var(--fg); }
.nav .nav-trigger.is-active,
.nav .nav-item.is-open .nav-trigger { color: var(--accent); }
.nav .nav-trigger.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 14px; bottom: -2px;
  height: 1px;
  background: var(--accent);
}
.nav .nav-caret { transition: transform 0.2s ease; opacity: 0.7; }
.nav .nav-item.is-open .nav-caret { transform: rotate(180deg); }

/* Dropdown panel */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 480px;
  background: var(--bg-elev);
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  padding: 22px 24px 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 50;
}
.nav-item.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}
.nav-dropdown-col { display: flex; flex-direction: column; gap: 2px; }
.nav-dropdown-h {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.nav-dropdown-col a {
  display: block;
  padding: 6px 0;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 500;
  color: var(--fg);
  transition: color 0.15s;
}
.nav-dropdown-col a:hover { color: var(--accent); }
.nav-dropdown-col a.active { color: var(--accent); }
.nav-dropdown-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  transition: gap 0.18s;
}
.nav-dropdown-all:hover { gap: 12px; }

/* Header tool icons (phone, cart) */
.header-tool {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--fg-mute);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.header-tool:hover {
  color: var(--fg);
  background: var(--pill-bg);
  border-color: var(--hairline-strong);
}
.header-cart { color: var(--fg); }

/* Cart badge bubble */
.cart-badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--bg);
  transition: opacity 0.15s, transform 0.15s;
}
.cart-badge[data-empty] { opacity: 0; transform: scale(0.6); pointer-events: none; }

/* Mobile menu: dropdown sub-heading + separator + contact block */
.mobile-menu .mobile-menu-h {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 14px 0 6px;
}
.mobile-menu .mobile-menu-sep {
  height: 1px;
  background: var(--hairline);
  margin: 8px 0;
}
.mobile-menu .mobile-menu-contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px;
  margin-top: 8px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.mobile-menu .mobile-menu-contact a {
  border-bottom: 0;
  padding: 4px 0;
  color: var(--fg-mute);
}
.mobile-menu .mobile-menu-contact a:hover { color: var(--accent); }

/* Hide certain header elements on small screens */
@media (max-width: 980px) {
  .site-header .header-tools .btn { display: none; }
}
@media (max-width: 560px) {
  .header-tool { width: 34px; height: 34px; }
}

/* Footer extensions: contact list, social row, payment pills */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 18px 0 18px;
  font-size: 13px;
  color: var(--fg-mute);
  line-height: 1.55;
}
.footer-contact a { color: var(--fg-mute); transition: color 0.2s; }
.footer-contact a:hover { color: var(--accent); }

.footer-social {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}
.footer-social a {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: var(--pill-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-mute);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.footer-social a:hover {
  color: var(--accent);
  background: var(--pill-bg-hover);
  border-color: var(--accent);
}

.footer-pay { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.footer-pay .pay-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 4px;
  border: 1px solid var(--hairline);
  background: var(--pill-bg);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--fg-mute);
}
@media (max-width: 600px) {
  .footer-bot { flex-direction: column; align-items: flex-start; }
}

/* Mobile: stack the orange italic accent fragment of section headlines
   onto its own line (e.g. "In ca. 6 Wochen.", "Dein Design.", etc.) */
@media (max-width: 760px) {
  .h-section .ital.accent,
  .h-hero .ital.accent {
    display: block;
  }
}