/* ============================================================
   TMANUFAKTUR · Game of Sissi
   Dark luxury — sharp edges. Editorial serif + humanist sans.
   Tokens loosely follow Claude design system (typography) but
   the canvas inverts to deep ink. All radii are 0 — eckig.
   ============================================================ */

:root {
  /* Surface */
  --bg: #0a0908;
  --bg-elevated: #141312;
  --bg-soft: #1a1816;
  --bg-card: #1f1d1b;

  /* Ink (warm cream over deep ink — echoes Claude's --on-dark) */
  --ink: #faf9f5;
  --ink-strong: #ffffff;
  --ink-body: #c9c1b7;
  --ink-muted: #908a82;
  /* 2026-08-19: von #5e5a55 aufgehellt — lag mit 2,9:1 unter der
     WCAG-Kontrastgrenze auf dem dunklen Grund (u. a. Fusszeile,
     Restbestand-Zaehler). 4,6:1 jetzt, bleibt sichtbar "leise". */
  --ink-faint: #8b857c;

  /* Hairlines */
  --line: rgba(250, 249, 245, 0.1);
  --line-strong: rgba(250, 249, 245, 0.22);
  --line-faint: rgba(250, 249, 245, 0.05);

  /* Accent — used SPARINGLY: only on scarcity / urgent CTAs */
  --urgent: #d97757; /* Claude coral — anti-luxury but loud for "only 8 left" */
  --urgent-strong: #e88d6f;
  --gold: #b8985e;
  --gold-soft: #8a7344;

  /* Spacing */
  --s-xxs: 4px;
  --s-xs: 8px;
  --s-sm: 12px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;
  --s-3xl: 72px;
  --s-section: 120px;

  /* Type — display: editorial serif. Body: humanist sans. */
  --font-display:
    "Cormorant Garamond", "Tiempos Headline", "EB Garamond", Garamond,
    "Times New Roman", serif;
  --font-body:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --topbar: 64px;
  --announcement: 36px;
  --max-w: 1640px;
}

/* ============================== Reset =============================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}
img,
video {
  display: block;
  max-width: 100%;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
input {
  font: inherit;
}
ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

/* ============================== Type =============================== */
.h-display-xl {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 8.5vw, 132px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--ink-strong);
}
.h-display-lg {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.h-display-md {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.h-display-sm {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.t-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-body);
}
.t-body-lg {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-body);
}
.t-meta {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.t-meta-strong {
  color: var(--ink);
}
.t-caption {
  font-size: 12px;
  color: var(--ink-muted);
}

.serif {
  font-family: var(--font-display);
  font-weight: 400;
}
.sans {
  font-family: var(--font-body);
}

/* ============================== Announcement bar ================== */
.announce {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--announcement);
  background: #050403;
  border-bottom: 1px solid var(--line);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--ink);
  letter-spacing: 0.04em;
  padding: 0 var(--s-lg);
  overflow: hidden;
}
.announce-track {
  display: flex;
  align-items: center;
  gap: 80px;
  animation: announce-scroll 38s linear infinite;
  white-space: nowrap;
}
.announce-track .dot {
  width: 4px;
  height: 4px;
  background: var(--ink-muted);
  border-radius: 0;
  transform: rotate(45deg);
  flex: none;
}
.announce strong {
  color: var(--urgent-strong);
  font-weight: 500;
}
@keyframes announce-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ============================== Top bar =========================== */
.topbar {
  position: fixed;
  top: var(--announcement);
  left: 0;
  right: 0;
  height: var(--topbar);
  z-index: 80;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--s-xl);
  background: rgba(10, 9, 8, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
  transition: background 0.3s ease;
}
.topbar.transparent {
  background: transparent;
  border-bottom-color: transparent;
}
.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--s-lg);
}
.topbar-right {
  justify-content: flex-end;
}
.tb-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0.02em;
  padding: 8px 4px;
  transition: opacity 0.2s ease;
}
.tb-link:hover {
  opacity: 0.7;
}
.tb-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.tb-cart-count {
  position: absolute;
  top: 2px;
  right: -7px;
  /* Gold statt Weiss (2026-08-15): hebt sich vom weissen Warenkorb-Symbol
     ab, statt mit ihm zu verschmelzen. Dunkle Schrift auf Gold — helle
     Flaeche braucht dunklen Text, sonst ist die Zahl nicht lesbar. */
  background: var(--gold);
  color: var(--bg);
  font-size: 9px;
  font-weight: 600;
  min-width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  letter-spacing: 0;
}
.tb-cart-wrap {
  position: relative;
}
.tb-logo {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.28em;
  color: var(--ink-strong);
  text-align: center;
  padding-right: 0;
  text-indent: 0.28em;
  white-space: nowrap;
  line-height: 1;
}
.tb-logo-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.tb-logo-mark {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(184, 152, 94, 0.4));
  flex: none;
}
.tb-logo-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.tb-logo-sub {
  display: block;
  font-family: var(--font-body);
  font-size: 8px;
  letter-spacing: 0.36em;
  color: var(--ink-muted);
  text-indent: 0.36em;
  white-space: nowrap;
  line-height: 1;
}

/* ============================== Buttons (SHARP — keine Rundung) === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 28px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 0; /* eckig */
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.4s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.btn-primary:hover {
  background: var(--ink-strong);
  border-color: var(--ink-strong);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.btn-urgent {
  background: var(--urgent);
  color: #1a0a04;
  border-color: var(--urgent);
}
.btn-urgent:hover {
  background: var(--urgent-strong);
  border-color: var(--urgent-strong);
}
.btn-block {
  width: 100%;
}
.btn-tall {
  height: 60px;
}
.btn-small {
  height: 40px;
  padding: 0 20px;
  font-size: 10px;
}

.link-underline {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink-muted);
  padding-bottom: 3px;
  transition:
    border-color 0.2s,
    color 0.2s;
}
.link-underline:hover {
  border-color: var(--ink);
}

/* ============================== Layout helpers ==================== */
.page {
  padding-top: calc(var(--announcement) + var(--topbar));
  min-height: 100vh;
}
.page.no-pad {
  padding-top: 0;
}
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--s-xl);
}
.section {
  padding: var(--s-section) 0;
}
.divider {
  height: 1px;
  background: var(--line);
  width: 100%;
}

/* ============================== HERO Slider ======================= */
.hero {
  position: relative;
  height: 100vh;
  min-height: 720px;
  width: 100%;
  overflow: hidden;
  background: #000;
}
.hero-stage {
  position: absolute;
  inset: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}
.hero-slide.active {
  opacity: 1;
}
.hero-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0) 22%,
      rgba(0, 0, 0, 0) 55%,
      rgba(0, 0, 0, 0.85) 100%
    ),
    radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0) 30%,
      rgba(0, 0, 0, 0.45) 100%
    );
  pointer-events: none;
  z-index: 2;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--announcement) + var(--topbar) + 48px);
}
.hero-overline {
  text-align: center;
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.hero-mark {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(184, 152, 94, 0.5));
  margin-bottom: 4px;
}
.hero-overline .kap {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.6em;
  text-indent: 0.6em;
  color: var(--ink);
  text-transform: uppercase;
  opacity: 0.85;
}
.hero-overline .est {
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--ink-muted);
  text-transform: uppercase;
}

.hero-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--s-xl);
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(72px, 11vw, 188px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  text-shadow: 0 2px 32px rgba(0, 0, 0, 0.6);
}
.hero-title em {
  font-style: italic;
  font-weight: 400;
}
.hero-saga {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  text-indent: 0.42em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}
.hero-sub {
  margin-top: 24px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 32px);
  color: var(--ink);
  letter-spacing: 0.005em;
  max-width: 720px;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.7);
}
.hero-chapter-meta {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.hero-chapter-meta .pipe {
  width: 1px;
  height: 14px;
  background: var(--ink-muted);
}
.hero-chapter-meta .urgent {
  color: var(--urgent-strong);
}

.hero-bottom {
  padding: 0 var(--s-xxl) 56px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: var(--s-xl);
}
.hero-cta-row {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: 36px;
}
.hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-progress {
  display: flex;
  gap: 14px;
  align-items: center;
}
.hp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.hp-item .num {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--ink-muted);
  transition: color 0.3s;
}
.hp-item .bar {
  width: 56px;
  height: 1px;
  background: var(--line);
  overflow: hidden;
  position: relative;
}
.hp-item .bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
}
.hp-item.active .num {
  color: var(--ink);
}
.hp-item.active .bar::after {
  animation: hp-fill linear forwards;
}
.hp-item.passed .bar::after {
  transform: scaleX(1);
}
@keyframes hp-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.hero-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  z-index: 4;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(6px);
  transition:
    background 0.25s,
    border-color 0.25s;
}
.hero-nav-arrow:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.hero-nav-arrow.left {
  left: 24px;
}
.hero-nav-arrow.right {
  right: 24px;
}

/* 2026-08-18 (Athena): Am Handy sassen die Pfeile auf halber Hoehe genau
   ueber dem Untertitel — der Text lief hinter den Kaesten durch. Auf
   schmalen Geraeten sind sie deshalb aus; gewechselt wird durch Wischen
   und ueber die Kapitelziffern I-IV am unteren Rand. */
@media (max-width: 900px) {
  .hero-nav-arrow {
    display: none;
  }
}

/* ============================== Scarcity ribbon =================== */
.scarcity-ribbon {
  background: #050403;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  overflow: hidden;
}
.scarcity-track {
  display: flex;
  align-items: center;
  gap: 64px;
  white-space: nowrap;
  animation: scarcity-scroll 60s linear infinite;
}
.scarcity-track .item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-body);
}
.scarcity-track .item .star {
  color: var(--urgent);
  font-size: 10px;
}
.scarcity-track .item strong {
  color: var(--ink);
  font-weight: 500;
}
@keyframes scarcity-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ============================== LV-style Tile Grid ================ */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
}
.tile-grid.two {
  grid-template-columns: repeat(2, 1fr);
}
.tile-grid.three {
  grid-template-columns: repeat(3, 1fr);
}

.tile {
  position: relative;
  background: var(--bg);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  display: block;
}
.tile.tall {
  aspect-ratio: 3 / 4;
}
.tile.wide {
  aspect-ratio: 1 / 1;
}
.tile-media {
  position: absolute;
  inset: 0;
  transition:
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.6s ease;
  background: linear-gradient(140deg, #1c1a17 0%, #0e0d0c 100%);
}
.tile-media video,
.tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.tile:hover .tile-media {
  transform: scale(1.04);
  filter: brightness(1.05);
}
.tile-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.15) 45%,
    transparent 80%
  );
  pointer-events: none;
}
.tile-info {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 26px;
  color: var(--ink-strong);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
}
.tile-info .overline {
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink-body);
}
.tile-info .title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.005em;
}
.tile-info .meta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-body);
}
.tile-info .meta-row .price {
  color: var(--ink-strong);
}
.tile-info .meta-row .urgent {
  color: var(--urgent-strong);
}
.tile-corner-badge {
  position: absolute;
  top: 22px;
  left: 22px;
  background: rgba(10, 9, 8, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  padding: 7px 14px;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
  z-index: 2;
}
.tile-corner-badge.urgent {
  color: var(--urgent-strong);
  border-color: rgba(217, 119, 87, 0.45);
}
.tile-cta {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 9, 8, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  color: var(--ink);
  z-index: 2;
}

/* ============================== Story / Editorial blocks ========== */
.story {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  min-height: 720px;
}
.story.reverse {
  grid-template-columns: 1fr 1.05fr;
}
.story-media {
  background: #111;
  position: relative;
  overflow: hidden;
}
.story-media video,
.story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-body {
  background: var(--bg);
  padding: var(--s-3xl) var(--s-3xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.story-body .eyebrow {
  font-size: 11px;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 28px;
}
.story-body h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  max-width: 540px;
}
.story-body h2 em {
  font-style: italic;
}
.story-body p {
  margin-top: 28px;
  max-width: 480px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-body);
}
.story-body .actions {
  margin-top: 40px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* 2026-08-18 (Athena): Akt II war am Rechner 1020-1100 px hoch, unter der
   festen Kopfzeile bleiben aber nur 720-980 px. Die Akt-Zeile verschwand
   deshalb beim Scrollen hinter der Kopfzeile, waehrend unten schon die
   Knoepfe kamen — der Block war nie am Stueck zu sehen. Auf flachen
   Fenstern ruecken die Teile jetzt zusammen, bis alles auf einen Blick
   passt. Hohe Fenster behalten die luftige Fassung. */
@media (min-width: 1024px) and (max-height: 1100px) {
  .story-body {
    padding-top: 36px;
    padding-bottom: 36px;
  }
  .story-body .eyebrow {
    margin-bottom: 16px;
  }
  .story-body h2 {
    font-size: clamp(32px, 3vw, 46px);
  }
  .story-body p {
    margin-top: 16px;
    font-size: 14.5px;
    line-height: 1.62;
  }
  .story-body .actions {
    margin-top: 20px;
  }
  /* Die Regeln fuer die orange Karte stehen am DATEIENDE — ihre
     Grunddefinition kommt weiter unten und wuerde diese hier sonst
     ueberschreiben. */
}

/* ============================== Section heads ===================== */
.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--s-xl);
  padding: 0 0 var(--s-xxl);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-xxl);
}
.section-head .eyebrow {
  font-size: 11px;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 18px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}
.section-head h2 em {
  font-style: italic;
}
.section-head .actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* 2026-08-18 (Athena): Am Handy standen Titel und Knopf nebeneinander in
   einem zweispaltigen Raster. Der Knopf („Saga vollständig ansehen") nahm
   sich so viel Platz, dass fuer die Zeile „Akt III — Das Ensemble" nur noch
   110 px blieben — sie brach auf drei Zeilen um. Untereinander bekommt die
   Zeile die volle Breite und steht wie Akt I und II in einer Zeile. */
@media (max-width: 700px) {
  .section-head {
    grid-template-columns: 1fr;
    gap: 18px;
    /* 2026-08-18 (Athena): Akt I-III standen linksbuendig, Akt IV und V
       mittig. Am Handy jetzt alle mittig. Der Einzug von 0,5 em gehoert
       zur Sperrung (er gleicht den Zwischenraum HINTER dem letzten
       Buchstaben aus) — beim Zentrieren wuerde er die Zeile nach rechts
       schieben, deshalb faellt er hier weg. */
    justify-items: center;
    text-align: center;
  }
  .section-head .actions {
    justify-content: center;
  }
  /* Zusaetzlich absichern: die Akt-Zeile darf NIE umbrechen. Damit sie auch
     auf 320-px-Geraeten in eine Zeile passt, wird die Sperrung mit der
     Bildschirmbreite kleiner. */
  .section-head .eyebrow,
  .story-body .eyebrow {
    white-space: nowrap;
    font-size: clamp(9px, 2.7vw, 11px);
    letter-spacing: clamp(0.16em, 1.1vw, 0.5em);
    /* Sperrung haengt hinter dem letzten Buchstaben — ohne diesen Ausgleich
       saesse die zentrierte Zeile minimal zu weit links. */
    text-indent: 0;
    padding-left: calc(clamp(0.16em, 1.1vw, 0.5em) / 2);
  }
  /* Akt II steht in einem Textblock, der bewusst linksbuendig bleibt —
     die Akt-Zeile selbst wird trotzdem zentriert, damit alle Akte gleich
     stehen. */
  .story-body .eyebrow {
    text-align: center;
  }
}

/* ============================== Product Card (Shop grid) ========== */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
}
.shop-grid.three {
  grid-template-columns: repeat(3, 1fr);
}
.product-card {
  background: var(--bg);
  position: relative;
  display: block;
  text-align: left;
  cursor: pointer;
}
.product-card .pc-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(140deg, #1c1a17 0%, #0e0d0c 100%);
}
.product-card .pc-media video,
.product-card .pc-media img,
.product-card .pc-media .pc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.7s ease;
}
.product-card .pc-media .pc-img-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.product-card:hover .pc-media .pc-img {
  transform: scale(1.04);
  opacity: 0;
}
.product-card:hover .pc-media .pc-img-hover {
  opacity: 1;
  transform: scale(1.04);
}
.product-card .pc-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  background: rgba(10, 9, 8, 0.75);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  padding: 6px 12px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  z-index: 3;
}
.product-card .pc-badge.urgent {
  color: var(--urgent-strong);
  border-color: rgba(217, 119, 87, 0.45);
}
.product-card .pc-info {
  padding: 22px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.product-card .pc-info .role {
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.product-card .pc-info .name {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.1;
  color: var(--ink-strong);
  letter-spacing: -0.005em;
}
.product-card .pc-info .price {
  font-size: 13px;
  color: var(--ink-body);
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.product-card .pc-info .scarcity {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.product-card .pc-info .scarcity .bar {
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.product-card .pc-info .scarcity .bar > span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--gold-soft); /* ruhig by default — Coral nur bei echter Knappheit */
}
.product-card.is-urgent .pc-info .scarcity .bar > span {
  background: var(--urgent);
}
.product-card .pc-info .scarcity .count {
  color: var(--urgent-strong);
}
.product-card .pc-info .scarcity .count.normal {
  color: var(--ink-body);
}

/* ============================== Product Detail page =============== */
.pdp {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0;
}
.pdp-gallery {
  background: var(--bg);
  border-right: 1px solid var(--line);
}
.pdp-gallery .shot {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(140deg, #1c1a17 0%, #0a0908 100%);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.pdp-gallery .shot:last-child {
  border-bottom: none;
}
.pdp-gallery .shot video,
.pdp-gallery .shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pdp-gallery .shot.tall {
  aspect-ratio: 3 / 4;
}
.pdp-gallery .shot-caption {
  position: absolute;
  bottom: 24px;
  left: 28px;
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--ink-muted);
  text-transform: uppercase;
}

.pdp-info {
  background: var(--bg);
  padding: 56px 48px 80px;
  position: sticky;
  top: calc(var(--announcement) + var(--topbar));
  align-self: start;
  height: max-content;
}
.pdp-info .ref {
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.pdp-info .role {
  margin-top: 18px;
  font-size: 10px;
  letter-spacing: 0.5em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.pdp-info h1 {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
}
.pdp-info .price {
  margin-top: 18px;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.pdp-scarcity-card {
  margin-top: 28px;
  border: 1px solid rgba(217, 119, 87, 0.4);
  background: rgba(217, 119, 87, 0.05);
  padding: 18px 20px;
}
.pdp-scarcity-card .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pdp-scarcity-card .label {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--urgent-strong);
}
.pdp-scarcity-card .count {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--ink-strong);
}
.pdp-scarcity-card .count em {
  font-style: italic;
  color: var(--urgent);
}
.pdp-scarcity-card .bar {
  margin-top: 14px;
  height: 2px;
  background: rgba(217, 119, 87, 0.18);
  position: relative;
  overflow: hidden;
}
.pdp-scarcity-card .bar > span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--urgent);
}
.pdp-scarcity-card .live {
  margin-top: 12px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-body);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pdp-scarcity-card .live .pulse {
  width: 6px;
  height: 6px;
  background: var(--urgent);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(217, 119, 87, 0.6);
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(217, 119, 87, 0.6);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(217, 119, 87, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(217, 119, 87, 0);
  }
}

/* Kopfzeile der Kaufspalte (Athena 2026-08-18): Titel/Preis links,
   Limitierte-Edition-Kasten rechts daneben statt als eigene volle Zeile —
   gleiche Optik, kompakter, spart ~120 px Hoehe. Bei Platznot (sehr
   schmale Handys) bricht der Kasten sauber unter den Titel. */
.pdp-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
}
/* Explizite Flex-Basen: der Eyebrow („DIE JUNGE BARONESSE", 0.5em
   Spacing) ist ~280 px breit — mit basis:auto wuerde die linke Seite
   nie schrumpfen und der Kasten IMMER umbrechen. So darf der Eyebrow
   zweizeilig werden und der Kasten bleibt rechts daneben. */
.pdp-head-left {
  flex: 1 1 130px;
  min-width: 0;
}
.pdp-head-row .pdp-scarcity-card {
  margin-top: 14px;
  flex: 1 1 200px;
  max-width: 262px;
  padding: 12px 14px;
}
/* Desktop: Kaufspalte ist innen nur ~384 px breit — einzeiliges
   „Baby Rosi" (h1 40px) + Kasten geht sich NIE nebeneinander aus.
   Kurze Namen (Sissi, Mizzi …) bleiben einzeilig, lange brechen
   bewusst zweizeilig (LV-Stil). Kasten waechst am Desktop nicht mit
   (flex-grow 0), damit die linke Seite den Platz bekommt.
   Basis-Summe (130+200+18=348) bleibt unter 384 — flex-wrap
   entscheidet nach Basis, nicht nach min-width. */
@media (min-width: 821px) {
  .pdp-head-row .pdp-scarcity-card {
    flex: 0 1 200px;
    min-width: 185px;
  }
}
.pdp-head-row .pdp-scarcity-card .row {
  gap: 10px;
}
.pdp-head-row .pdp-scarcity-card .label {
  font-size: 9px;
  letter-spacing: 0.2em;
}
.pdp-head-row .pdp-scarcity-card .count {
  font-size: 20px;
  /* „8 / 99" bleibt eine Zeile — der Eyebrow links darf brechen. */
  white-space: nowrap;
}
.pdp-head-row .pdp-scarcity-card .bar {
  margin-top: 10px;
}
.pdp-head-row .pdp-scarcity-card .live {
  margin-top: 8px;
  font-size: 9px;
  letter-spacing: 0.14em;
}

/* Abstaende der Kaufspalte: frueher inline im JSX (marginTop 26/14) —
   hierher verlagert, damit die Kompakt-Media-Query unten greifen kann. */
.pdp-info .buyopts {
  margin-top: 26px;
}
.pdp-info .add-btn {
  margin-top: 14px;
}
/* 2026-08-18 (Athena, „Punkt 4"): Auf flachen Laptop-Fenstern (MacBook,
   ~800 px Hoehe) lag „Zur Tasche hinzufügen" 26–46 px unter der Falte —
   und die Sticky-Kaufleiste gibt es nur am Handy (≤820 px Breite).
   Auf kurzen Desktop-Viewports ruecken die Bloecke der Kaufspalte
   zusammen (~80 px), bis der Knopf ohne Scrollen sichtbar ist.
   Hohe Fenster behalten das luftige Original. */
@media (min-width: 821px) and (max-height: 860px) {
  .pdp-info {
    padding-top: 40px;
  }
  .pdp-info .role {
    margin-top: 10px;
  }
  .pdp-info h1 {
    margin-top: 8px;
  }
  .pdp-info .price {
    margin-top: 12px;
  }
  .pdp-info .buyopts {
    margin-top: 16px;
  }
  .buyopt {
    padding: 11px 16px;
  }
  .pdp-info .add-btn {
    margin-top: 12px;
  }
}

.pdp-info .contact-link {
  display: block;
  text-align: center;
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-body);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.pdp-info .complimentary {
  margin-top: 22px;
  font-size: 12px;
  color: var(--ink-body);
  letter-spacing: 0.04em;
}
/* GPSR Art. 19 — Pflichtangabe im Produktangebot. Bewusst leise gesetzt:
   muss "eindeutig und gut sichtbar" sein, darf aber die Buy-Box nicht stoeren. */
.pdp-gpsr {
  margin-top: 24px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 11px;
  line-height: 1.65;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}
.pdp-gpsr strong {
  color: var(--ink-body);
  font-weight: 500;
}
.pdp-gpsr a {
  color: var(--ink-body);
  text-decoration: underline;
}

.pdp-description {
  margin-top: 28px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-body);
}
.pdp-description .see-more {
  display: inline-block;
  margin-top: 14px;
  border-bottom: 1px solid var(--ink-muted);
  padding-bottom: 2px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  /* seit 2026-08-19 ein <button> (war href-loser Anker) — Browser-
     Knopfoptik neutralisieren, Aussehen bleibt identisch */
  background: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  font-family: inherit;
  cursor: pointer;
}
.pdp-accordion {
  margin-top: 28px;
  border-top: 1px solid var(--line);
}
.pdp-accordion .row {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.pdp-accordion .row-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-align: left;
}
.pdp-accordion .row-head .plus {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--ink-muted);
  width: 14px;
  text-align: center;
}
.pdp-accordion .row-body {
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-body);
  line-height: 1.7;
  display: none;
}
.pdp-accordion .row.open .row-body {
  display: block;
}
.pdp-accordion .row.open .row-head .plus {
  transform: rotate(45deg);
}

/* ============================== Sticky CTA mobile-ish ============== */

/* ============================== Cart drawer ======================= */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 460px;
  max-width: 100vw;
  background: var(--bg);
  z-index: 101;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
}
.drawer.open {
  transform: translateX(0);
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  border-bottom: 1px solid var(--line);
}
.drawer-head .ttl {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink-strong);
}
.drawer-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
}
.drawer-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--ink-muted);
}
.drawer-empty .icon-large {
  font-size: 36px;
  margin-bottom: 12px;
  opacity: 0.5;
}
.cart-line {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.cart-line .thumb {
  aspect-ratio: 1;
  background: var(--bg-elevated);
  overflow: hidden;
}
.cart-line .thumb video,
.cart-line .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-line .ref {
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.cart-line .name {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink-strong);
  margin-top: 4px;
}
.cart-line .price {
  font-size: 13px;
  color: var(--ink-body);
  margin-top: 4px;
}
.cart-line .qty {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cart-line .qty button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cart-line .qty .n {
  font-size: 13px;
  min-width: 18px;
  text-align: center;
}
.cart-line .remove {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.drawer-foot {
  border-top: 1px solid var(--line);
  padding: 24px 28px 32px;
  background: var(--bg);
}
.drawer-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.drawer-total .lbl {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.drawer-total .val {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--ink-strong);
}
.drawer-foot .hint {
  margin-top: 12px;
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  text-align: center;
}

/* ============================== "Added to cart" panel ============= */
/* fixed statt absolute: absolute (offsetParent = body) legte das Panel an den
   SEITENANFANG — wer beim ATC-Klick gescrollt war (mobil immer), sah nichts.
   fixed verankert es am Viewport-Top, über Topbar/Announce (90), unter tmenu (200). */
.added-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-height: 100dvh;
  overflow-y: auto;
  background: var(--bg-elevated);
  padding: 28px 32px;
  border-bottom: 1px solid var(--line);
  transform: translateY(-100%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 150;
}
.added-panel.show {
  transform: translateY(0);
}
.added-panel .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.added-panel .head .ttl {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink-strong);
}
.added-panel .row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 18px;
  margin-bottom: 22px;
}
.added-panel .row .thumb {
  aspect-ratio: 1;
  background: var(--bg);
  overflow: hidden;
}
.added-panel .row .thumb video,
.added-panel .row .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.added-panel .row .ref {
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.added-panel .row .name {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink-strong);
  margin-top: 4px;
}
.added-panel .row .price {
  font-size: 13px;
  color: var(--ink-body);
  margin-top: 4px;
}
.added-panel .row .clr {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 2px;
  letter-spacing: 0.04em;
}

/* ============================== Live purchase notification ======== */
.live-notify {
  position: fixed;
  left: 28px;
  bottom: 28px;
  z-index: 70;
  background: rgba(20, 19, 18, 0.92);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  padding: 16px 22px 16px 16px;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 14px;
  min-width: 340px;
  max-width: 420px;
  transform: translateX(-460px);
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s;
  opacity: 0;
}
.live-notify.show {
  transform: translateX(0);
  opacity: 1;
}
.live-notify .ico {
  width: 44px;
  height: 44px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink);
  border: 1px solid var(--line);
  overflow: hidden;
}
.live-notify .ico img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.live-notify .body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.live-notify .body .who {
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.live-notify .body .who strong {
  color: var(--ink-strong);
  font-weight: 500;
}
.live-notify .body .when {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.live-notify .body .when .pulse {
  width: 6px;
  height: 6px;
  background: var(--urgent);
  border-radius: 50%;
  animation: pulse 1.6s infinite;
}
.live-notify .close {
  color: var(--ink-muted);
  font-size: 11px;
}

/* ============================================================
   MENÜ „Die Galerie" (2026-08-10) — Neubau, ersetzt .side-menu
   Vollbild in zwei Zonen. Gold trägt hier die Hierarchie: römische
   Ziffern, Haarlinien und Hover — die Fläche bleibt schwarz, sonst
   kippt es ins Billige.
   Kein Scrollen per Bauweise: .tmenu-grid hat `1fr`-Zeilen in einem
   `min-height: 0`-Container, die Kacheln werden so hoch wie Platz ist.
   ============================================================ */
.tmenu {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  visibility: hidden;
}
.tmenu.open {
  pointer-events: auto;
  visibility: visible;
}
.tmenu-veil {
  position: absolute;
  inset: 0;
  background: rgba(4, 3, 3, 0.72);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.5s var(--ease-lux);
}
.tmenu.open .tmenu-veil {
  opacity: 1;
}
.tmenu-sheet {
  position: absolute;
  inset: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 3vh, 34px) clamp(18px, 3.4vw, 56px);
  background:
    radial-gradient(80% 90% at 8% 0%, rgba(184, 152, 94, 0.13), transparent 58%),
    radial-gradient(60% 70% at 100% 100%, rgba(184, 152, 94, 0.07), transparent 62%),
    #080706;
  transform: translateY(-2%);
  opacity: 0;
  transition:
    transform 0.55s var(--ease-lux),
    opacity 0.4s ease;
}
.tmenu.open .tmenu-sheet {
  transform: none;
  opacity: 1;
}
/* Goldene Haarlinie als oberer Abschluss — der einzige harte Akzent */
.tmenu-sheet::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(184, 152, 94, 0.55) 22%,
    rgba(184, 152, 94, 0.55) 78%,
    transparent
  );
}
.tmenu-close {
  position: absolute;
  top: clamp(16px, 2.6vh, 28px);
  right: clamp(16px, 3vw, 46px);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(184, 152, 94, 0.3);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-body);
  cursor: pointer;
  transition:
    color var(--dur-1) ease,
    border-color var(--dur-1) ease,
    transform var(--dur-1) ease;
}
.tmenu-close:hover {
  color: var(--gold);
  border-color: var(--gold);
  transform: rotate(90deg);
}
.tmenu-close:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

.tmenu-inner {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(280px, 24%) 1fr;
  gap: clamp(28px, 4vw, 76px);
  align-items: stretch;
}

/* Eyebrow — Goldkapitälchen mit auslaufender Linie */
.tmenu-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.tmenu-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(184, 152, 94, 0.45), transparent);
}
.tmenu-eyebrow--split i {
  font-style: normal;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  font-size: 9px;
  order: 3;
  /* Platz für den Schließen-Knopf, der rechts oben darüber sitzt */
  padding-right: clamp(0px, 4vw, 62px);
}
.tmenu-eyebrow--split::after {
  order: 2;
}

/* ---------- Zone 1: Rail ---------- */
.tmenu-rail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-top: clamp(30px, 5vh, 54px);
}
.tmenu-primary {
  list-style: none;
  margin: clamp(20px, 3vh, 34px) 0 0;
  padding: 0;
}
.tmenu-primary li + li {
  margin-top: clamp(10px, 1.6vh, 20px);
}
.tmenu-primary button {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: baseline;
  gap: 0 4px;
  width: 100%;
  padding: 4px 0 10px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(250, 249, 245, 0.07);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-1) ease;
}
.tmenu-primary button:hover {
  border-color: rgba(184, 152, 94, 0.55);
}
.tmenu-num {
  grid-row: 1 / 3;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--gold-soft);
  transition: color var(--dur-1) ease;
}
.tmenu-primary button:hover .tmenu-num {
  color: var(--gold);
}
.tmenu-label {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.05;
  color: var(--ink);
  transition: color var(--dur-1) ease;
}
.tmenu-primary button:hover .tmenu-label {
  color: var(--ink-strong);
}
.tmenu-sub {
  grid-column: 2;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 4px;
}
.tmenu-primary button:focus-visible,
.tmenu-secondary button:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

.tmenu-secondary {
  list-style: none;
  margin: clamp(22px, 3.5vh, 40px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.tmenu-secondary button {
  background: none;
  border: 0;
  padding: 2px 0;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color var(--dur-1) ease;
}
.tmenu-secondary button:hover {
  color: var(--gold);
}
.tmenu-foot {
  padding-top: clamp(14px, 2.2vh, 22px);
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.tmenu-foot a {
  color: var(--ink-muted);
  transition: color var(--dur-1) ease;
}
.tmenu-foot a:hover {
  color: var(--gold);
}

/* ---------- Zone 2: Galerie ---------- */
.tmenu-gallery {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* PFLICHT: ohne `min-width: 0` nimmt diese Grid-Spalte die min-content-
     Breite ihres Inhalts an — und das sind alle zehn Kacheln nebeneinander.
     Die Spalte wurde dadurch ~1900 px breit, die Rubrikzeile daneben lief
     rechts aus dem Bild. Gilt für jedes scrollende Kind in Grid/Flex. */
  min-width: 0;
  padding-top: clamp(30px, 5vh, 54px);
}
.tmenu-note {
  margin-top: auto;
  padding-top: clamp(24px, 4vh, 44px);
  display: flex;
  align-items: center;
  gap: 14px;
}
.tmenu-note img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  opacity: 0.55;
  filter: drop-shadow(0 0 14px rgba(184, 152, 94, 0.35));
}
.tmenu-note p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink-muted);
}
/* 4×3 statt 5×2 (2026-08-11): Die Produktfotos sind QUER (Seitenverhältnis
   1,0 bis 1,6), die alten Kacheln waren hochkant (0,54) — `cover` hat davon
   je 27-30 % links und rechts weggeschnitten, bei Mizzi lief der Henkel oben
   in die Kante. Vier Spalten und drei Zeilen ergeben Kacheln, die etwa so
   liegen wie die Fotos; zusammen mit `contain` wird nie wieder etwas
   abgeschnitten, bei keiner Fenstergröße. */
.tmenu-grid {
  flex: 1;
  min-height: 0;
  min-width: 0;
  margin-top: clamp(16px, 2.4vh, 26px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* `auto` statt `1fr`: die Zeilen sollen sich an die Bilder anlegen, nicht
     die Bilder an die Zeilen. Bei gestreckten Zeilen stand das Foto in einem
     zu hohen Feld und die Ränder wurden als Balken sichtbar. */
  grid-template-rows: repeat(3, auto);
  align-content: center;
  gap: clamp(12px, 1.4vw, 22px);
}
.tmcard {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.tmcard-img {
  position: relative;
  flex: none;
  /* Nah am Format der Produktfotos (1,0 bis 1,6) — so bleibt der Rand,
     den `contain` stehen lässt, ein schmaler Saum statt eines Balkens. */
  aspect-ratio: 4 / 3;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 1px;
  /* Exakt der Studiogrund der Fotos (gemessen RGB 0-20) — dadurch geht der
     Saum im Bild auf, statt als Kasten sichtbar zu werden. */
  background: #070605;
  /* KEINE Haarlinie im Ruhezustand: sie hat das leere Feld umrandet und den
     Rand damit erst sichtbar gemacht. Gold kommt erst beim Überfahren. */
  box-shadow: none;
  transition: box-shadow var(--dur-2) ease;
}
.tmcard-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* `contain` statt `cover`: schneidet grundsätzlich nichts weg. Die
     Fotos stehen auf nahezu schwarzem Studiogrund (gemessen RGB 0-20),
     die Kachel hat denselben Ton — die Ränder sieht man deshalb nicht. */
  object-fit: contain;
  filter: saturate(0.82) brightness(0.86);
  transition:
    transform 0.7s var(--ease-lux),
    filter var(--dur-2) ease,
    opacity 0.55s var(--ease-lux);
}
/* Zweitansicht liegt darüber und blendet beim Überfahren auf —
   gleiches Verhalten wie die Produktkacheln im Shop. */
.tmcard-b {
  opacity: 0;
}
.tmcard:hover .tmcard-b,
.tmcard:focus-visible .tmcard-b {
  opacity: 1;
}
.tmcard:hover .tmcard-a,
.tmcard:focus-visible .tmcard-a {
  opacity: 0;
}
/* Ohne Zweitansicht darf das erste Bild nicht verschwinden */
.tmcard-img:not(:has(.tmcard-b)) .tmcard-a {
  opacity: 1 !important;
}
.tmcard:hover .tmcard-img,
.tmcard:focus-visible .tmcard-img {
  box-shadow:
    inset 0 0 0 1px rgba(184, 152, 94, 0.75),
    0 14px 34px rgba(0, 0, 0, 0.5);
}
.tmcard:hover .tmcard-img img,
.tmcard:focus-visible .tmcard-img img {
  /* KEIN scale() mehr: bei `contain` würde ein Zoom das Motiv über die
     Kante schieben — also genau der Fehler, den wir gerade beheben. */
  filter: saturate(1) brightness(1);
}
.tmcard:focus-visible {
  outline: none;
}
.tmcard-flag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 8px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0a0908;
  background: var(--gold);
  border-radius: 1px;
}
.tmcard-name {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.1;
  color: var(--ink);
  transition: color var(--dur-1) ease;
}
.tmcard:hover .tmcard-name,
.tmcard:focus-visible .tmcard-name {
  color: var(--gold);
}
.tmcard-role {
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* „Alle neun ansehen" füllt die drei freien Plätze der letzten Zeile */
.tmcard--all {
  grid-column: span 3;
}
.tmcard--all {
  align-self: center;
}
.tmcard--all .tmcard-allinner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 20px;
  /* Nur oben und unten eine Haarlinie — ein Kasten in dieser Breite las
     sich als vergessene Fläche. */
  border-top: 1px solid rgba(184, 152, 94, 0.28);
  border-bottom: 1px solid rgba(184, 152, 94, 0.28);
  transition:
    border-color var(--dur-1) ease,
    background var(--dur-1) ease;
}
.tmcard--all b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(15px, 1.2vw, 19px);
  color: var(--ink);
}
.tmcard--all i {
  font-style: normal;
  font-size: 17px;
  color: var(--gold);
  transition: transform var(--dur-1) var(--ease-lux);
}
.tmcard--all:hover .tmcard-allinner {
  border-top-color: var(--gold);
  border-bottom-color: var(--gold);
  background: rgba(184, 152, 94, 0.06);
}
.tmcard--all:hover i {
  transform: translateX(6px);
}

/* Gestaffeltes Einlaufen — jede Zeile/Kachel eine Spur später */
.tmenu-primary li,
.tmenu-secondary li,
.tmcard {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s ease,
    transform 0.6s var(--ease-lux);
}
.tmenu.open .tmenu-primary li,
.tmenu.open .tmenu-secondary li,
.tmenu.open .tmcard {
  opacity: 1;
  transform: none;
  transition-delay: calc(120ms + var(--i, 0) * 38ms);
}
@media (prefers-reduced-motion: reduce) {
  .tmenu-sheet,
  .tmenu-veil,
  .tmenu-primary li,
  .tmenu-secondary li,
  .tmcard {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}

/* ---------- Schmalere Fenster ---------- */
@media (max-width: 1400px) {
  .tmenu-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
}
@media (max-width: 1040px) {
  .tmenu-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: clamp(18px, 2.6vh, 30px);
  }
  .tmenu-note {
    display: none;
  }
  .tmenu-rail {
    padding-top: clamp(24px, 4vh, 40px);
  }
  .tmenu-gallery {
    padding-top: 0;
    flex: 1;
    /* Rubrik + Kacheln als Block in der Restfläche mittig — sonst kleben
       sie oben und darunter steht ein Drittel Bildschirm leer. */
    justify-content: center;
  }
  .tmenu-foot {
    display: none;
  }
  /* Querlaufende Reihe statt Raster: auf dem Handy wischt man seitwärts,
     statt eine Seite lang nach unten zu scrollen. */
  .tmenu-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(150px, 46vw, 220px);
    grid-template-columns: none;
    grid-template-rows: 1fr;
    /* Kacheln in der Mitte statt gestreckt — sonst steht das Foto wieder
       in einem viel zu hohen Feld und schwimmt darin. */
    align-items: center;
    align-content: center;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .tmcard {
    scroll-snap-align: start;
  }
  .tmcard--all {
    grid-column: auto;
    align-self: center;
  }
  /* 2026-08-18 (Athena): Der Pfeil stand untereinander unter „Alle neun
     ansehen". Er gehoert daneben, in dieselbe Zeile. */
  .tmcard--all .tmcard-allinner {
    flex-direction: row;
    justify-content: center;
    text-align: center;
  }
  .tmenu-primary button {
    grid-template-columns: 26px 1fr;
  }
  .tmenu-primary li + li {
    margin-top: 8px;
  }
  /* Auf 390 px stand die Zusatzangabe bündig an der Kante — bei so wenig
     Breite ist sie Zierrat, also weg. */
  .tmenu-eyebrow--split i {
    display: none;
  }
  .tmenu-secondary {
    gap: 8px 16px;
  }
}


/* ============================== Footer ============================ */
.footer {
  background: #050403;
  padding: var(--s-3xl) 0 32px;
  border-top: 1px solid var(--line);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: var(--s-xxl);
}
.footer p {
  font-size: 13px;
  color: var(--ink-body);
  line-height: 1.7;
  max-width: 360px;
}
/* 2026-08-19: h5 → h3 (Ueberschriften-Reihenfolge, Audit). Selektor
   deckt beide Stufen ab, falls irgendwo noch ein h5 auftaucht. */
.footer h5,
.footer h3.fside-kopf,
.footer h3.facc-kopf {
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.footer ul li {
  margin-bottom: 12px;
}
.footer ul li a {
  font-size: 13px;
  color: var(--ink-body);
  transition: color 0.2s;
}
.footer ul li a:hover {
  color: var(--ink);
}
.footer-bottom {
  margin-top: clamp(28px, 4vh, 44px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.footer-bottom .ship {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.ship-label {
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
}
.ship-rule {
  width: 1px;
  height: 14px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(184, 152, 94, 0.55) 50%,
    transparent 100%
  );
  flex-shrink: 0;
}
.ship-regions {
  color: var(--ink-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}
.ship-diamond {
  color: var(--gold);
  font-style: normal;
  font-size: 7px;
  line-height: 1;
  opacity: 0.85;
  padding: 0 9px;
  transform: translateY(-1px);
}
.footer-copy {
  color: var(--ink-faint);
  letter-spacing: 0.1em;
}
@media (max-width: 600px) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .footer-bottom .ship {
    flex-wrap: wrap;
    gap: 8px 10px;
  }
}

/* ============================== Shop hero ========================= */
.shop-hero {
  height: 70vh;
  min-height: 540px;
  position: relative;
  overflow: hidden;
  background: #000;
}
.shop-hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shop-hero .veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.8) 100%
  );
}
.shop-hero .head {
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 56px;
  z-index: 2;
}
.shop-hero .head .eyebrow {
  font-size: 11px;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-transform: uppercase;
  color: var(--ink-body);
  margin-bottom: 18px;
}
.shop-hero .head h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  max-width: 1000px;
}
.shop-hero .head h1 em {
  font-style: italic;
}
.shop-hero .head p {
  margin-top: 22px;
  max-width: 620px;
  font-size: 15px;
  color: var(--ink-body);
  line-height: 1.6;
}

.shop-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px var(--s-xl);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: calc(var(--announcement) + var(--topbar));
  z-index: 50;
}
.shop-bar .crumbs {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
}
.shop-bar .crumbs .sep {
  color: var(--ink-muted);
  margin: 0 10px;
}
.shop-bar .filters {
  display: flex;
  align-items: center;
  gap: 18px;
}
.shop-bar .filters .chip {
  border: 1px solid var(--line-strong);
  padding: 10px 18px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.shop-bar .filters .chip.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* Mobile: Breadcrumb einzeilig, Filter als swipebare Chip-Reihe */
@media (max-width: 768px) {
  .shop-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px 0 0;
  }
  .shop-bar .crumbs {
    padding: 0 var(--s-md);
    font-size: 10px;
    letter-spacing: 0.22em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .shop-bar .crumbs .sep {
    margin: 0 7px;
  }
  .shop-bar .filters {
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 var(--s-md) 14px;
  }
  .shop-bar .filters .chip {
    flex: 0 0 auto;
    padding: 9px 14px;
    font-size: 10px;
    letter-spacing: 0.14em;
  }
}

/* ============================== Misc ============================== */
.icon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
}
.icon-sm {
  width: 18px;
  height: 18px;
}
.icon-lg {
  width: 26px;
  height: 26px;
}

.center-text {
  text-align: center;
}
.uppercase {
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* ============================================================ HOME extras */
.editorial-intro {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 64px;
  align-items: start;
}
.intro-lead {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.4;
  color: var(--ink);
  font-style: italic;
}
.intro-h {
  font-size: clamp(40px, 5vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
}
.stock-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.stock-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-faint);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.stock-row .urgent {
  color: var(--urgent-strong);
  font-weight: 500;
}
.closing-plaque {
  display: block;
  width: 120px;
  height: auto;
  margin: 0 auto 32px;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 32px rgba(184, 152, 94, 0.45)) brightness(1.06)
    saturate(1.08);
}

/* ============================================================ Shop hero – LV editorial 2-bag */
.shop-hero-edit {
  position: relative;
  overflow: hidden;
  background: #000;
}
.shop-hero-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 72vh;
  min-height: 560px;
}
.she-video {
  display: block;
  width: 100%;
  height: 72vh;
  min-height: 560px;
  object-fit: cover;
  object-position: center;
  background: #000;
}
.she-tile {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.she-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 8s ease-out;
}
.shop-hero-edit:hover .she-tile img {
  transform: scale(1.04);
}
.she-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0) 35%,
    rgba(0, 0, 0, 0.78) 100%
  );
  pointer-events: none;
}
.she-text {
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 56px;
  z-index: 2;
  color: var(--ink-strong);
}
.she-text .eyebrow {
  font-size: 11px;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-transform: uppercase;
  color: var(--ink-body);
  margin-bottom: 18px;
}
.she-text h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  max-width: 1100px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}
.she-text h1 em {
  font-style: italic;
}
.she-text p {
  margin-top: 22px;
  max-width: 620px;
  font-size: 15px;
  color: var(--ink-body);
  line-height: 1.6;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}

/* ============================================================ PDP plaque shot */
.pdp-gallery .shot.plaque-shot {
  background: radial-gradient(circle at center, #1a1816 0%, #050403 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
}
.pdp-gallery .shot.plaque-shot img {
  width: 220px;
  height: auto;
  filter: drop-shadow(0 0 40px rgba(184, 152, 94, 0.4));
  object-fit: contain;
}
.bullet-list {
  padding-left: 16px;
  list-style: disc;
}
.bullet-list li {
  margin-bottom: 6px;
}

/* ============================================================ Related (PDP bottom) */
.related-section {
  background: #050403;
  padding: 96px 0 0;
  border-top: 1px solid var(--line);
}
.related-tabs {
  display: flex;
  gap: 32px;
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.related-tabs .tab {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: 6px;
  border-bottom: 1px solid transparent;
  cursor: pointer;
}
.related-tabs .tab.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.pdp-breadcrumb {
  margin: 64px 0 32px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pdp-breadcrumb .sep {
  color: var(--ink-faint);
}
.pdp-breadcrumb .under {
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  color: var(--ink);
}
.pdp-breadcrumb .under:hover {
  color: var(--ink-strong);
}

@media (max-width: 1024px) {
  .editorial-intro {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .stock-grid {
    grid-template-columns: 1fr;
  }
  .shop-hero-edit-grid {
    grid-template-columns: 1fr;
    height: 64vh;
  }
  .shop-hero-edit-grid .she-tile:nth-child(2) {
    display: none;
  }
  .she-video {
    height: 64vh;
    min-height: 440px;
  }
  .pdp-gallery .shot.plaque-shot img {
    width: 160px;
  }
}

/* ============================================================ Heldinnen Hall of Fame — Lando 1:1 ============================================================ */

.heldinnen-hof {
  position: relative;
  background: linear-gradient(
    180deg,
    var(--bg, #0a0908) 0%,
    #100e0c 50%,
    var(--bg, #0a0908) 100%
  );
  padding: clamp(64px, 9vh, 140px) clamp(16px, 1.2vw, 24px)
    clamp(80px, 12vh, 180px);
  overflow: hidden;
  --hof-lime: var(--gold, #b8985e); /* Brand-Akzent — cdtm Gold */
  --hof-lime-dim: #8a7344;
  --hof-ink: var(--ink-strong, #ffffff);
  --hof-mute: var(--ink-muted, #908a82);
  --hof-line: rgba(250, 249, 245, 0.16);
  --hof-stagger: 73px;
  --hof-ease: cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--hof-ink);
}

/* Background-Video — subtle motion behind everything */
.heldinnen-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
  filter: saturate(0.85) brightness(0.8);
}
.heldinnen-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0.2) 0%,
      rgba(0, 0, 0, 0.55) 60%,
      rgba(0, 0, 0, 0.85) 100%
    ),
    linear-gradient(
      180deg,
      var(--bg, #0a0908) 0%,
      rgba(0, 0, 0, 0) 12%,
      rgba(0, 0, 0, 0) 88%,
      var(--bg, #0a0908) 100%
    );
}

.hof-container {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
}

/* HEADER — Lando: HELMETS sans-caps over HALL OF FAME italic-lime, body-copy right */
.hof-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: end;
  margin-bottom: clamp(60px, 8vh, 110px);
  padding: 0 4px;
}

.hof-headline {
  display: flex;
  flex-direction: column;
  margin: 0;
  line-height: 1;
  font-family: var(
    --font-display
  ); /* Cormorant Garamond — cdtm brand display */
}

.hof-h-line-1 {
  font-size: clamp(2.6rem, 5.5vw, 4.5rem);
  font-style: normal;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--hof-ink);
  line-height: 1;
}

.hof-h-line-2 {
  font-size: clamp(2.6rem, 5.5vw, 4.5rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--hof-lime); /* Tiroler Gold via cdtm brand var */
  line-height: 1.02;
  margin-top: 0.04em;
}

.hof-body {
  font-family: var(--font-body); /* Inter — cdtm brand body */
  font-weight: 400;
  font-size: clamp(0.95rem, 1.05vw, 1.0625rem);
  line-height: 1.55;
  color: var(--hof-mute);
  max-width: 24em;
  margin: 0;
}

/* GRID — 4-col with Lando-style stagger via per-column flex */
.hof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16.67px;
  align-items: start;
}

.hof-col {
  display: flex;
  flex-direction: column;
  gap: 16.67px;
}

.hof-col.is-staggered {
  margin-top: var(--hof-stagger);
}

/* CARD — SVG-frame with notch, no CSS border, image floats inside */
.hof-card {
  position: relative;
  aspect-ratio: 407 / 411;
  background: transparent;
  cursor: pointer;
  outline: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  opacity: 0;
  animation: hof-rise 0.9s var(--hof-ease) forwards;
  animation-delay: var(--hof-delay, 0ms);
}

.hof-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 13, 11, 0.92) 0%,
    rgba(8, 7, 6, 0.96) 100%
  );
  clip-path: url(#hof-notch-clip);
  z-index: 0;
  pointer-events: none;
}

@keyframes hof-rise {
  to {
    opacity: 1;
  }
}

.hof-card-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* SVG outline — sits on TOP of image, stroke shifts to lime on hover */
.hof-card-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}
.hof-card-svg path {
  fill: none;
  stroke: rgba(244, 244, 237, 0.16);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: stroke 600ms var(--hof-ease);
}
.hof-card:hover .hof-card-svg path,
.hof-card:focus-visible .hof-card-svg path,
.hof-card:hover .hof-card-svg path,
.hof-card.is-aktiv .hof-card-svg path {
  stroke: var(--hof-lime);
}

/* Foto-Stapel — Spiegelung oben, echtes Foto in der Mitte, Spiegelung unten.
   2026-08-18 (Athena): Fuellt die Kachel randlos, schneidet aber nichts ab.
   Das echte Foto laeuft auf volle Breite (width:100%), die beiden Kopien
   setzen es nach oben und unten fort. An der Naht zeigt die Spiegelung exakt
   dieselbe Bildzeile wie das Foto — deshalb keine sichtbare Kante. */
.hof-card-stapel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  clip-path: url(#hof-notch-clip);
  border-radius: 7px;
  filter: saturate(0.96) brightness(0.96);
  transition:
    transform 700ms var(--hof-ease),
    opacity 400ms var(--hof-ease),
    filter 500ms var(--hof-ease);
  z-index: 2;
}

.hof-card-img {
  display: block;
  flex: none;
  width: 100%;
  height: auto;
}

/* Die Spiegelungen verblassen zum Kachelrand hin, damit die Wiederholung nicht
   auffaellt. Der Verlauf haengt an der Spiegelung selbst (nicht an der Kachel),
   deshalb ist er an der Naht IMMER voll deckend — dort entsteht keine Kante,
   egal wie hoch das Band ausfaellt. Achtung: die Elemente sind gespiegelt,
   die Naht liegt also in ihrem eigenen Koordinatensystem oben bzw. unten. */
.hof-card-img--spiegel {
  transform: scaleY(-1);
}

/* 2026-08-18 (Athena): Oben darf KEINE Spiegelung stehen — dort schwebte
   sonst der Henkel verkehrt herum in der Luft. Die Kopie wird deshalb vom
   Nahtpunkt aus achtfach gedehnt: sichtbar sind nur noch die obersten rund
   20 Bildzeilen, und die sind bei allen Aufnahmen reiner dunkler Hintergrund.
   Der Rand wird so verlaengert statt gespiegelt — Naht bleibt trotzdem
   stufenlos, weil an der Nahtstelle exakt dieselbe Bildzeile liegt. */
.hof-card-img--oben {
  /* Reihenfolge beachten: erst achtfach spiegeln (Ursprung oben), dann um die
     eigene Hoehe nach unten schieben. Damit liegt Bildzeile 0 exakt auf der
     Naht und alles darueber ist die nach oben gedehnte Randzeile. */
  transform: translateY(100%) scaleY(-8);
  transform-origin: top;
}

.hof-card-img--unten {
  -webkit-mask-image: linear-gradient(
    to top,
    #000 0%,
    rgba(0, 0, 0, 0.32) 100%
  );
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.32) 100%);
}

/* Video — fills ENTIRE card-bounding (main rect + notch tab) on hover */
.hof-card-video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: url(#hof-notch-clip);
  border-radius: 0;
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 600ms var(--hof-ease),
    transform 800ms var(--hof-ease);
  z-index: 3;
  pointer-events: none;
}

.hof-card:hover .hof-card-video,
.hof-card:focus-visible .hof-card-video,
.hof-card:hover .hof-card-video,
.hof-card.is-aktiv .hof-card-video {
  opacity: 1;
  transform: scale(1);
}

.hof-card:hover .hof-card-stapel,
.hof-card:focus-visible .hof-card-stapel,
.hof-card.is-aktiv .hof-card-stapel {
  transform: scale(1.05);
  opacity: 0;
  filter: saturate(1) brightness(1);
}

/* Label — idle: bottom-left of card, gold, slightly bold.
   On hover: name floats to center + grows + glows. */
.hof-card-label {
  position: absolute;
  left: clamp(18px, 5%, 32px);
  bottom: clamp(14px, 3%, 22px);
  z-index: 5;
  display: inline-block;
  pointer-events: none;
  white-space: nowrap;
  font-family: var(--font-display); /* Cormorant Garamond */
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.5rem, 2.1vw, 1.95rem);
  letter-spacing: -0.005em;
  line-height: 1;
  text-transform: none;
  color: var(--hof-lime); /* Tiroler Gold */
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.65),
    0 4px 16px rgba(0, 0, 0, 0.55);
  transform: translate(0, 0);
  transform-origin: left bottom;
  transition:
    left 800ms var(--hof-ease),
    bottom 800ms var(--hof-ease),
    transform 800ms var(--hof-ease),
    font-size 700ms var(--hof-ease),
    letter-spacing 700ms ease,
    text-shadow 600ms ease,
    color 400ms ease;
}

.hof-card-name {
  color: inherit;
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
}

/* HOVER — label drifts to card-center, scales up, gold glow ignites */
.hof-card:hover .hof-card-label,
.hof-card:focus-visible .hof-card-label,
.hof-card:hover .hof-card-label,
.hof-card.is-aktiv .hof-card-label {
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, 50%);
  transform-origin: center;
  font-size: clamp(2.4rem, 3.6vw, 3.4rem);
  letter-spacing: 0.005em;
  text-shadow:
    0 2px 14px rgba(0, 0, 0, 0.85),
    0 10px 40px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(184, 152, 94, 0.55),
    0 0 24px rgba(184, 152, 94, 0.35);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .hof-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  /* Spalten auflösen → Karten werden direkte Grid-Items und füllen das
     2-spaltige Raster reihenweise gleichmäßig auf. Verhindert das Loch,
     das entsteht, weil die Spalten unterschiedlich viele/staggerte Karten
     haben (col1 = 3 Karten, col2 = 2 + Stagger). */
  .hof-col {
    display: contents;
  }
  .hof-col.is-staggered {
    margin-top: 0;
  }
  .hof-header {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 96px;
  }
  .hof-body {
    max-width: 32em;
  }
}

@media (max-width: 640px) {
  .hof-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  /* Name innen unten-links halten (NICHT unter die Karte schieben) + lesbar */
  .hof-card-label {
    left: clamp(10px, 5%, 16px);
    bottom: clamp(10px, 4%, 16px);
    font-size: clamp(0.95rem, 4.2vw, 1.25rem);
  }
  .heldinnen-hof {
    padding-bottom: 96px;
  }
}

/* Touch — no hover reveal */
@media (hover: none) {
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hof-card {
    animation: none;
    opacity: 1;
  }
  .hof-card-stapel,
  .hof-card-video,
  .hof-card-svg path {
    transition: none;
  }
}

/* ============================== Responsive ======================== */
@media (max-width: 1024px) {
  .topbar {
    padding: 0 var(--s-md);
  }
  .topbar-left,
  .topbar-right {
    gap: var(--s-sm);
  }
  .tile-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .story {
    grid-template-columns: 1fr;
  }
  .story.reverse {
    grid-template-columns: 1fr;
  }
  .pdp {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  }
  .pdp-info {
    padding: 28px 16px 48px;
  }
  .pdp-info .add-btn {
    white-space: normal;
    letter-spacing: 0.1em;
    padding-left: 12px;
    padding-right: 12px;
    height: auto;
    min-height: 52px;
    line-height: 1.3;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-xl);
  }
  .hero-bottom {
    padding: 0 var(--s-md) 40px;
  }
}
@media (max-width: 640px) {
  .tile-grid,
  .shop-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .live-notify {
    left: 12px;
    right: 12px;
    min-width: 0;
    max-width: none;
  }
  .container {
    padding: 0 var(--s-md);
  }
  .story-body {
    padding: var(--s-xxl) var(--s-md);
  }
}

@media (max-width: 1024px) {
  .topbar {
    padding: 0 var(--s-md);
  }
  .topbar-left,
  .topbar-right {
    gap: var(--s-sm);
  }
  .tile-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .story {
    grid-template-columns: 1fr;
  }
  .story.reverse {
    grid-template-columns: 1fr;
  }
  .pdp {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  }
  .pdp-info {
    padding: 28px 16px 48px;
  }
  .pdp-info .add-btn {
    white-space: normal;
    letter-spacing: 0.1em;
    padding-left: 12px;
    padding-right: 12px;
    height: auto;
    min-height: 52px;
    line-height: 1.3;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-xl);
  }
  .hero-bottom {
    padding: 0 var(--s-md) 40px;
  }
}
@media (max-width: 640px) {
  .tile-grid,
  .shop-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .live-notify {
    left: 12px;
    right: 12px;
    min-width: 0;
    max-width: none;
  }
  .container {
    padding: 0 var(--s-md);
  }
  .story-body {
    padding: var(--s-xxl) var(--s-md);
  }
}

/* ============================================================
   Akt I — BestSellersSlider (Video-Slider, 7 Heldinnen)
   Layout-Vorlage: Kylie-Cosmetics "Best Sellers" — Portrait Cards,
   Play-Icon overlay, Cart-Bag oben rechts, Caption unten links,
   horizontaler Scroll mit Snap und rechtem Pfeil-Button.
   Farben an cdtm-Premium dark/gold angepasst.
   ============================================================ */
.bs-section {
  padding: var(--s-xxl) 0;
  background: var(--bg);
}
.bs-wrap {
  position: relative;
  margin-top: var(--s-lg);
  height: 240vh; /* Fallback; JS setzt exakte Höhe = innerHeight + travel */
}
/* Pin-Bühne — auf ALLEN Breiten (Desktop-Kino seit Motion-Upgrade) */
.bs-stage {
  display: flex;
  position: sticky;
  top: 0;
  height: 100vh;
  align-items: stretch;
  overflow: hidden;
}
.bs-track {
  display: flex;
  align-items: flex-start;
  height: 100%;
  gap: 20px;
  overflow: visible;
  padding: 0 clamp(20px, 4vw, 64px);
  will-change: transform;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bs-track::-webkit-scrollbar {
  display: none;
}

/* Desktop-Scatter: Karten nutzen die Bühnenhöhe */
.bs-card:nth-child(3n + 1) {
  margin-top: 10vh;
}
.bs-card:nth-child(3n + 2) {
  margin-top: 28vh;
}
.bs-card:nth-child(3n + 3) {
  margin-top: 19vh;
}

.bs-card {
  position: relative;
  flex: 0 0 clamp(220px, 18vw, 320px);
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  scroll-snap-align: start;
  cursor: pointer;
  background: var(--bg-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}
.bs-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(184, 152, 94, 0.4);
}

.bs-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--bg-card);
}

.bs-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0.85;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}
.bs-card:hover .bs-play {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
}

.bs-cart {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}
.bs-cart:hover {
  background: var(--gold);
  transform: scale(1.08);
}

.bs-caption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}
.bs-role {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.bs-name {
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  font-size: 22px;
  color: var(--ink-strong);
  font-weight: 500;
  font-style: italic;
  line-height: 1.1;
}

.bs-arrow {
  position: absolute;
  top: calc(50% - 22px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  z-index: 3;
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}
.bs-arrow:hover {
  background: var(--gold);
  transform: scale(1.06);
}
.bs-arrow-right {
  right: clamp(8px, 2vw, 28px);
}

@media (max-width: 900px) {
  /* Tablet + Handy: gepinntes Horizontal-Gallery (Landon-Stil) statt Grid.
     Die Reihe zieht beim Runterscrollen von rechts nach links, gepinnt.
     Karten "scattered" -> nutzen die Bildschirmhöhe. Höhe + translateX
     kommen aus JS (matchMedia max-width:900). Nur Desktop (>900) = Slider. */
  .bs-wrap {
    height: 240vh; /* Fallback; JS setzt exakte Höhe = innerHeight + travel */
  }
  .bs-stage {
    display: flex;
    position: sticky;
    top: 0;
    height: 100vh;
    align-items: stretch;
    overflow: hidden;
  }
  .bs-track {
    display: flex;
    grid-template-columns: none;
    align-items: flex-start;
    height: 100%;
    gap: 14px;
    padding: 0 16px;
    overflow: visible;
    scroll-snap-type: none;
    will-change: transform;
  }
  .bs-card {
    flex: 0 0 clamp(160px, 44vw, 340px);
    aspect-ratio: 9 / 16;
  }
  /* "Scattered" vertikaler Versatz -> nutzt die Bildschirmhöhe */
  .bs-card:nth-child(3n + 1) {
    margin-top: 15vh;
  }
  .bs-card:nth-child(3n + 2) {
    margin-top: 40vh; /* tablet-sicher (hohe Karten); Handy bekommt 45vh unten */
  }
  .bs-card:nth-child(3n + 3) {
    margin-top: 29vh;
  }
  .bs-name {
    font-size: 18px;
  }
  .bs-arrow {
    display: none;
  }
}
@media (max-width: 640px) {
  /* Handy: tieferer Versatz (Karten kürzer -> kein Clipping) + kleinere Elemente */
  .bs-card:nth-child(3n + 2) {
    margin-top: 45vh;
  }
  .bs-name {
    font-size: 17px;
  }
  .bs-role {
    font-size: 9px;
  }
  .bs-play {
    width: 44px;
    height: 44px;
  }
  .bs-cart {
    width: 30px;
    height: 30px;
    top: 10px;
    right: 10px;
  }
}

/* ============================================================
   Akt II — Story-Media Video-Overlay (Automaten-Traum)
   Tagline-Overlay über dem story-media video, gold serif italic.
   ============================================================ */
.story-media-video {
  position: relative;
}
.story-media-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.05) 35%,
    rgba(0, 0, 0, 0) 60%,
    rgba(0, 0, 0, 0.45) 100%
  );
  pointer-events: none;
}
.story-overlay {
  position: absolute;
  left: clamp(24px, 4vw, 56px);
  top: clamp(28px, 5vw, 64px);
  z-index: 2;
  pointer-events: none;
  max-width: 78%;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.story-overlay-eyebrow {
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.05;
  font-style: italic;
  color: var(--ink-strong); /* weiß */
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
  margin-bottom: 6px;
}
.story-overlay-tag {
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.05;
  font-style: italic;
  color: var(--ink-strong);
  font-weight: 400;
  letter-spacing: -0.01em;
}
@media (max-width: 900px) {
  .story-overlay {
    top: 24px;
    left: 24px;
  }
  .story-overlay-eyebrow,
  .story-overlay-tag {
    font-size: 32px;
  }
}

/* ============================================================
   Akt II — DropTracker (Live-Knappheits-Counter)
   Coral-Box mit Live-Counter, animierter Progress-Bar,
   pulsing Dot, Shimmer-Sweep. "3d aktiv" via Layered Shadows,
   inset highlights, parallax-ish sheen.
   ============================================================ */
.drop-tracker {
  position: relative;
  margin: 28px 0 32px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--urgent) 0%, #c45f3d 100%);
  color: var(--ink-strong);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    0 4px 14px rgba(217, 119, 87, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  overflow: hidden;
  isolation: isolate;
}
.drop-tracker::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 20% -10%,
      rgba(255, 220, 200, 0.18) 0%,
      transparent 50%
    ),
    radial-gradient(circle at 90% 110%, rgba(0, 0, 0, 0.25) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.drop-tracker > * {
  position: relative;
  z-index: 1;
}

.dt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 18px;
}
.dt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-strong);
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
  animation: dt-pulse 1.8s ease-out infinite;
}
@keyframes dt-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.dt-bag-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 10px;
  animation: dt-slide-in 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.dt-bag-name {
  color: var(--ink-strong);
  font-weight: 600;
  letter-spacing: 0.18em;
}
.dt-bag-sep {
  opacity: 0.55;
}
.dt-bag-role {
  font-style: normal;
  font-weight: 400;
}
@keyframes dt-slide-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dt-headline {
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
  margin: 0 0 22px;
  animation: dt-slide-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}
.dt-headline em {
  font-style: italic;
  font-weight: 400;
}
.dt-count {
  display: inline-block;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-variant-numeric: tabular-nums;
}
.dt-count-pulse {
  animation: dt-count-bounce 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes dt-count-bounce {
  0% {
    transform: scale(1);
    color: var(--ink-strong);
  }
  30% {
    transform: scale(1.18);
    color: #fff;
    text-shadow: 0 0 22px rgba(255, 255, 255, 0.65);
  }
  100% {
    transform: scale(1);
    color: var(--ink-strong);
  }
}

.dt-progress {
  margin: 8px 0 24px;
}
.dt-progress-track {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.dt-progress-fill {
  position: relative;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2a1a10 0%, #1a1208 50%, #2a1a10 100%);
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow:
    0 0 12px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.dt-progress-sheen {
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 220, 200, 0.55) 50%,
    transparent 100%
  );
  animation: dt-sheen 3.2s ease-in-out infinite;
}
@keyframes dt-sheen {
  0% {
    left: -40%;
  }
  60% {
    left: 110%;
  }
  100% {
    left: 110%;
  }
}
.dt-progress-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  font-variant-numeric: tabular-nums;
}
.dt-progress-mid {
  color: var(--ink-strong);
  font-weight: 600;
}

.dt-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.28) 20%,
    rgba(0, 0, 0, 0.28) 80%,
    transparent
  );
  margin: 24px 0 20px;
}

.dt-bullets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 28px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.84);
  letter-spacing: 0.01em;
}

.dt-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 22px;
}
.dt-dots-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  transition:
    background 0.4s ease,
    transform 0.4s ease;
}
.dt-dots-dot.active {
  background: var(--ink-strong);
  transform: scale(1.4);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
}

@media (max-width: 720px) {
  .dt-bullets {
    grid-template-columns: 1fr;
  }
  .dt-headline {
    font-size: 32px;
  }
  .dt-bag-meta {
    font-size: 11px;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dt-dot {
    animation: none;
  }
  .dt-progress-sheen {
    animation: none;
    display: none;
  }
  .dt-count-pulse {
    animation: none;
  }
}

/* ============================================================
   TopBar — Plate (transparent PNG) + Tiroler Manufaktur-Schriftzug
   Plate ist freigestellt (RGBA mit Alpha) — kein mix-blend nötig.
   ============================================================ */
.tb-logo-plate {
  width: 72px;
  height: auto;
  margin: 0 14px 0 0;
  display: block;
  filter: drop-shadow(0 0 18px rgba(184, 152, 94, 0.55));
  animation: tb-plate-glow 4s ease-in-out infinite;
  transition: transform 0.3s ease;
}
.tb-logo-btn:hover .tb-logo-plate {
  transform: scale(1.08);
}
@keyframes tb-plate-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 14px rgba(184, 152, 94, 0.42));
  }
  50% {
    filter: drop-shadow(0 0 26px rgba(184, 152, 94, 0.75));
  }
}
.tb-logo-cap {
  font-size: 1.18em;
  font-weight: 500;
}
/* ===== Mobile-Header (≤768px) — Monogramm zentriert, kollisionsfrei ===== */
@media (max-width: 768px) {
  .topbar {
    padding: 0 14px;
  }
  .topbar-left,
  .topbar-right {
    gap: 4px;
  }

  /* Menü/Suchen → nur Icons (Text raus) */
  .topbar-left .tb-link span {
    display: none;
  }

  /* Kontakt-Text + Favoriten(Herz) aus dem Header nehmen */
  .topbar-right .tb-link[aria-label="Kontakt"],
  .topbar-right .tb-link[aria-label="Favoriten"] {
    display: none;
  }

  /* Zentrum: nur das TM-Monogramm (Schriftzug + TIROL·MMXIX weg) */
  .tb-logo-stack {
    display: none;
  }
  .tb-logo-btn {
    gap: 0;
  }
  /* Monogramm auf dem Handy vergroessert (2026-08-15): 40 -> 64px.
     Damit es nicht anstoesst, waechst die Leiste selbst von 64 auf 78px.
     --topbar wird ueberall per calc() verwendet (Seitenabstand, klebende
     Elemente) — die Variable hier zu setzen zieht alles automatisch mit.
     Bild ist quadratisch (200x200), bleiben oben/unten je 7px Luft. */
  .tb-logo-plate {
    width: 64px;
    margin: 0;
  }
}
@media (max-width: 768px) {
  :root {
    --topbar: 78px;
  }
}

/* ============================================================
   Akt V — Bundles (3 Geschenk-Sets)
   Premium-Karten mit Hover-Lift, Bestseller in Coral.
   ============================================================ */
.bundles {
  /* 2026-08-18 (Athena): Sektion soll am Desktop als GANZES in den
     Viewport passen (war 1060 px hoch, ~760 px sichtbar). Grundmasse
     gestrafft + Kurz-Viewport-Stufe weiter unten. */
  padding: clamp(40px, 6vh, 72px) 0;
  background: var(--bg);
  position: relative;
}
.bundles .container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px);
}
.bundles-eyebrow {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 14px;
}
.bundles-headline {
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  /* max 46px + volle Breite: bleibt am Desktop EINzeilig (~880 px) */
  font-size: clamp(32px, 3.2vw, 46px);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  text-align: center;
  margin: 0 auto 14px;
  max-width: 1000px;
}
.bundles-headline em {
  font-style: italic;
  color: var(--gold);
}
.bundles-intro {
  text-align: center;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-body);
  max-width: 680px;
  margin: 0 auto 18px;
}

/* 3-Spalten Grid → 1 Spalte auf mobile */
.bundles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 980px) {
  .bundles-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.bundle-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2vw, 26px);
  border-radius: 18px;
  background: linear-gradient(180deg, #14110e 0%, #0c0a08 100%);
  border: 1px solid rgba(184, 152, 94, 0.14);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.4s ease;
}
.bundle-card:hover {
  transform: translateY(-6px);
  border-color: rgba(184, 152, 94, 0.4);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(184, 152, 94, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Bestseller variant — Coral gradient + scale boost */
.bundle-card.bestseller {
  background: linear-gradient(180deg, var(--urgent) 0%, #c45f3d 100%);
  border-color: rgba(255, 255, 255, 0.18);
  transform: scale(1.04);
  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(217, 119, 87, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.bundle-card.bestseller:hover {
  transform: scale(1.04) translateY(-6px);
  box-shadow:
    0 36px 80px rgba(0, 0, 0, 0.7),
    0 0 80px rgba(217, 119, 87, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
@media (max-width: 980px) {
  .bundle-card.bestseller {
    transform: none;
  }
  .bundle-card.bestseller:hover {
    transform: translateY(-6px);
  }
}

.bundle-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink-strong);
  color: var(--bg);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.bundle-eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.bundle-card.bestseller .bundle-eyebrow {
  color: rgba(255, 255, 255, 0.92);
}
.bundle-title {
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  font-size: clamp(26px, 2.4vw, 33px);
  line-height: 1.1;
  font-weight: 400;
  color: var(--ink-strong);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.bundle-tagline {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-body);
  margin: 0 0 12px;
  min-height: 0;
}
.bundle-card.bestseller .bundle-tagline {
  color: rgba(255, 255, 255, 0.85);
}

.bundle-items {
  list-style: none;
  padding: 0;
  margin: 0 0 4px;
  flex-grow: 1;
}
.bundle-items li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  font-size: 14px;
  color: var(--ink-body);
  border-bottom: 1px dashed rgba(184, 152, 94, 0.12);
}
.bundle-items li:last-child {
  border-bottom: 0;
}
.bundle-card.bestseller .bundle-items li {
  color: rgba(255, 255, 255, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.16);
}
.bundle-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
.bundle-card.bestseller .bundle-dot {
  background: var(--ink-strong);
}
.bundle-item-name {
  flex-grow: 1;
}
.bundle-item-price {
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  font-size: 13px;
}
.bundle-card.bestseller .bundle-item-price {
  color: rgba(255, 255, 255, 0.6);
}

.bundle-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(184, 152, 94, 0.22),
    transparent
  );
  margin: 12px 0;
}
.bundle-card.bestseller .bundle-divider {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.25),
    transparent
  );
}

.bundle-price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}
.bundle-price-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bundle-price-original {
  font-size: 12px;
  color: var(--ink-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(184, 152, 94, 0.4);
}
.bundle-card.bestseller .bundle-price-original {
  color: rgba(255, 255, 255, 0.55);
  text-decoration-color: rgba(255, 255, 255, 0.35);
}
.bundle-price-bundle {
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  font-size: clamp(26px, 2.4vw, 31px);
  font-weight: 400;
  color: var(--ink-strong);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.bundle-saving {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--urgent-strong);
  font-weight: 600;
  background: rgba(217, 119, 87, 0.12);
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.bundle-card.bestseller .bundle-saving {
  color: var(--ink-strong);
  background: rgba(0, 0, 0, 0.32);
}

.bundle-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 1px solid var(--ink-faint);
  color: var(--ink);
  padding: 13px 24px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 8px;
  transition:
    border-color 0.3s ease,
    color 0.3s ease,
    background 0.3s ease;
}
.bundle-cta:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(184, 152, 94, 0.08);
}
.bundle-cta-urgent {
  background: var(--ink-strong);
  border-color: var(--ink-strong);
  color: var(--bg);
}
.bundle-cta-urgent:hover {
  background: var(--bg);
  color: var(--ink-strong);
  border-color: var(--ink-strong);
}
.bundle-arrow {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.bundle-cta:hover .bundle-arrow {
  transform: translateX(6px);
}

/* Kurze Desktop-Fenster (MacBook & Co.): noch eine Stufe dichter, damit
   Kopf + alle drei Karten inkl. Fussnote in EINEN Viewport passen. */
@media (min-width: 981px) and (max-height: 1000px) {
  .bundles {
    /* padding-bottom deckt den Scale-Ueberhang (1.04) der Coral-Karte */
    padding: 22px 0 26px;
  }
  .bundles-eyebrow {
    margin-bottom: 8px;
  }
  .bundles-headline {
    font-size: clamp(30px, 2.8vw, 40px);
    margin-bottom: 10px;
  }
  .bundles-intro {
    font-size: 14px;
    margin-bottom: 12px;
  }
  .bundles-rule {
    font-size: 12.5px;
    margin-bottom: 22px;
  }
  .bundle-card {
    padding: 16px 20px;
  }
  .bundle-items li {
    padding: 5px 0;
    font-size: 13.5px;
  }
  .bundle-cta {
    padding: 11px 20px;
  }
}

/* ============================================================
   Akt IV — Das Atelier (v3: Auto-Cycle, Wort-im-Kranz, große Tasche, Hotspots)
   Auto-cycle alle 4 s durch alle 5 Tiroler Tugenden (kein Scroll-Coupling).
   LINKS: kleiner Kranz mit zentriertem Wort + Premium-Box mit Tagline/Body.
   RECHTS: groß-schwebende Rosi mit 3 Hotspot-Labels (Gold/Rattan/Leder)
   die per Gold-Connector-Line auf Material-Details verweisen.
   ============================================================ */
.akt-iv-v3 {
  position: relative;
  background: var(--bg);
  padding: clamp(80px, 12vh, 160px) 0 clamp(80px, 10vh, 120px);
  overflow: hidden;
}
.aiv3-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 80px);
  position: relative;
}
.aiv3-eyebrow {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: clamp(40px, 6vh, 80px);
}

.aiv3-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}

/* ========== LINKS: Kranz mit Wort + Box ========== */
.aiv3-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 4vh, 48px);
}

.aiv3-stack {
  position: relative;
  width: clamp(180px, 18vw, 240px);
  height: clamp(234px, 23vw, 312px);
  perspective: 1200px;
}
.aiv3-kranz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 24px rgba(184, 152, 94, 0.32));
  transition:
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.7s ease,
    filter 0.7s ease;
  opacity: 0;
  transform: translateY(60px) scale(0.92) rotate(-3deg);
  pointer-events: none;
}
/* Gestapelte (vorherige) Kränze: subtil dahinter */
.aiv3-kranz.stacked {
  opacity: calc(0.4 - var(--depth) * 0.08);
  transform: translateY(calc(var(--depth) * -6px))
    translateX(calc(var(--depth) * 5px)) scale(calc(0.95 - var(--depth) * 0.03))
    rotate(calc(var(--depth) * -1.5deg));
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35)) brightness(0.65)
    blur(calc(var(--depth) * 0.5px));
  z-index: calc(10 - var(--depth));
}
.aiv3-kranz.active {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0deg);
  z-index: 20;
  animation: aiv3-kranz-float 6s ease-in-out infinite;
}
@keyframes aiv3-kranz-float {
  0%,
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) scale(1.01) rotate(0.4deg);
  }
}
.aiv3-kranz.pending {
  opacity: 0;
  transform: translateY(60px) scale(0.92) rotate(3deg);
}

/* Wort mittig IM Kranz */
.aiv3-word-in-kranz {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
  margin: 0;
  z-index: 30;
  text-shadow:
    0 0 24px rgba(184, 152, 94, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  white-space: nowrap;
  animation: aiv3-word-in 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes aiv3-word-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(14px) scale(0.92);
    text-shadow: 0 0 0 rgba(184, 152, 94, 0);
  }

  50% {
    text-shadow:
      0 0 40px rgba(184, 152, 94, 0.9),
      0 2px 8px rgba(0, 0, 0, 0.5);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0) scale(1);
  }
}

/* Word-Box */
.aiv3-card {
  background: linear-gradient(180deg, #14110e 0%, #0c0a08 100%);
  border: 1px solid rgba(184, 152, 94, 0.18);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 36px);
  width: 100%;
  max-width: 460px;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  animation: aiv3-card-in 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes aiv3-card-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.aiv3-step-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.aiv3-step-num {
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.aiv3-step-eyebrow {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.aiv3-tagline {
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.3;
  color: var(--gold);
  margin: 0 0 18px;
  font-weight: 400;
}
.aiv3-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-body);
  margin: 0 0 24px;
}
.aiv3-dots {
  display: flex;
  gap: 7px;
}
.aiv3-dot {
  position: relative;
  width: 26px;
  height: 3px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: rgba(184, 152, 94, 0.2);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition:
    background 0.5s ease,
    width 0.5s ease,
    box-shadow 0.5s ease;
}
/* unsichtbarer, größerer Klick-/Touch-Bereich (Balken bleibt 3px) */
.aiv3-dot::after {
  content: "";
  position: absolute;
  inset: -12px -4px;
}
.aiv3-dot:hover {
  background: rgba(184, 152, 94, 0.5);
}
.aiv3-dot:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
}
.aiv3-dot.active {
  background: var(--gold);
  width: 42px;
  box-shadow: 0 0 12px rgba(184, 152, 94, 0.5);
}
.aiv3-dot.active:hover {
  background: var(--gold);
}

/* ========== RECHTS: GROSSE Rosi + 3 Hotspot-Labels ========== */
.aiv3-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  position: relative;
}
.aiv3-bag-wrap {
  position: relative;
  width: clamp(340px, 38vw, 600px);
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Float auf dem Wrap (nicht nur dem Bild) -> Hotspots schweben mit,
     bleiben exakt auf den Features. */
  animation: aiv3-bag-float 8s ease-in-out infinite;
}
.aiv3-bag {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.65))
    drop-shadow(0 0 80px rgba(184, 152, 94, 0.22));
  position: relative;
  z-index: 1;
}
@keyframes aiv3-bag-float {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-14px) rotate(1deg);
  }
}

/* Hotspot-Annotation: Dot + Connector-Line + Label-Box */
.aiv3-hotspot {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  --hs-stagger: 0ms;
  transform-origin: center;
}

/* Label — text first, fades in + slides in from outside.
   Kein left/right in der Basis-Regel: die Seite bestimmt ausschließlich
   .aiv3-hotspot-right/-left (sonst über-constrained -> Label klebt falsch). */
.aiv3-hotspot .aiv3-hotspot-label {
  position: absolute;
  top: -22px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(20px);
  animation: hot-label-in 450ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--hs-stagger, 0ms);
}
.aiv3-hotspot-right .aiv3-hotspot-label {
  left: 76px; /* line endpoint (8px + 56px) + ~12px gap */
}
.aiv3-hotspot-left .aiv3-hotspot-label {
  right: 76px;
  text-align: right;
  transform: translateX(-20px);
}

/* Line — strokes in from the dot outward, AFTER label */
.aiv3-hotspot .aiv3-hotspot-line {
  position: absolute;
  top: 0;
  height: 1px;
  width: 56px;
  transform: scaleX(0);
  opacity: 0;
  animation: hot-line-grow 550ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: calc(var(--hs-stagger, 0ms) + 280ms);
}
.aiv3-hotspot-right .aiv3-hotspot-line {
  left: 8px;
  transform-origin: left center;
  background: linear-gradient(
    90deg,
    rgba(184, 152, 94, 0.95) 0%,
    rgba(184, 152, 94, 0.35) 100%
  );
}
.aiv3-hotspot-left .aiv3-hotspot-line {
  right: 8px;
  transform-origin: right center;
  background: linear-gradient(
    270deg,
    rgba(184, 152, 94, 0.95) 0%,
    rgba(184, 152, 94, 0.35) 100%
  );
}

/* Dot — pops at the bag detail, AFTER line, then continuous pulse */
.aiv3-hotspot .aiv3-hotspot-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 235, 180, 1) 0%,
    rgba(255, 200, 120, 0.75) 40%,
    rgba(255, 200, 120, 0) 75%
  );
  box-shadow: 0 0 18px 4px rgba(255, 200, 120, 0.55);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  animation:
    hot-dot-pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    hot-dot-pulse 2.4s ease-in-out infinite;
  animation-delay:
    calc(var(--hs-stagger, 0ms) + 720ms), calc(var(--hs-stagger, 0ms) + 1120ms);
}

/* OUT — entire group fades out together, fast */
.aiv3-hotspot.is-out {
  animation: hot-group-out 380ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
.aiv3-hotspot.is-out .aiv3-hotspot-label,
.aiv3-hotspot.is-out .aiv3-hotspot-line,
.aiv3-hotspot.is-out .aiv3-hotspot-dot {
  animation-play-state: paused;
}

@keyframes hot-label-in {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes hot-line-grow {
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}
@keyframes hot-dot-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.55);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes hot-dot-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.35);
    opacity: 1;
  }
}
@keyframes hot-group-out {
  to {
    opacity: 0;
    transform: translateX(8px);
  }
}

/* Label-Typo. Text-Shadow: Labels können über dem hellen Rattan liegen,
   der Schatten hält sie auf jedem Untergrund lesbar. */
.aiv3-hotspot-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-strong);
  letter-spacing: 0.04em;
  margin-bottom: 3px;
  text-shadow:
    0 0 10px rgba(10, 8, 5, 0.9),
    0 1px 2px rgba(10, 8, 5, 0.85);
}
.aiv3-hotspot-sub {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
  text-shadow:
    0 0 10px rgba(10, 8, 5, 0.9),
    0 1px 2px rgba(10, 8, 5, 0.85);
}

/* Bag-Meta unten */
.aiv3-bag-meta {
  text-align: center;
  max-width: 360px;
}
.aiv3-bag-name {
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 24px;
  color: var(--ink-strong);
  margin-bottom: 8px;
}
.aiv3-bag-spec {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 22px;
}
.aiv3-bag-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid rgba(184, 152, 94, 0.4);
  color: var(--gold);
  padding: 13px 24px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 999px;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}
.aiv3-bag-cta:hover {
  background: rgba(184, 152, 94, 0.08);
  border-color: var(--gold);
  color: var(--ink-strong);
}
.aiv3-bag-arrow {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.aiv3-bag-cta:hover .aiv3-bag-arrow {
  transform: translateX(6px);
}

/* ========== Mobile ========== */
@media (max-width: 980px) {
  .aiv3-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .aiv3-right {
    order: -1;
  }
  .aiv3-bag-wrap {
    width: 88vw;
  }
  .aiv3-hotspot-line {
    width: 50px;
  }
  .aiv3-hotspot-right .aiv3-hotspot-label {
    left: 62px;
  }
  .aiv3-hotspot-left .aiv3-hotspot-label {
    right: 62px;
  }
  .aiv3-hotspot-title {
    font-size: 11px;
  }
  .aiv3-hotspot-sub {
    font-size: 9px;
  }
  .aiv3-card {
    max-width: 100%;
  }
}
@media (max-width: 640px) {
  /* Handy: Tasche etwas kleiner + kürzere Linie, damit die rechts
     stehenden Hotspot-Labels nicht über den Bildschirmrand ragen. */
  .aiv3-bag-wrap {
    width: 68vw;
  }
  .aiv3-hotspot-sub {
    display: none;
  }
  .aiv3-hotspot-line {
    width: 22px;
  }
  .aiv3-hotspot-right .aiv3-hotspot-label {
    left: 30px;
  }
  .aiv3-hotspot-left .aiv3-hotspot-label {
    right: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aiv3-bag-wrap {
    animation: none;
  }
  .aiv3-hotspot-dot {
    animation: none;
  }
  .aiv3-kranz.active {
    animation: none;
  }
}

/* ============================================================
   GamesTrio — 3 Mini-Hero-Karten unter der Epilog-Headline
   Cinematic dark cards mit autoplay video, römischer Zahl
   im Hintergrund, Headline "Games of [Name]", Beitreten-CTA.
   Layout: 3-Spalten Desktop, 1-Spalte Mobile.
   ============================================================ */
.games-trio {
  position: relative;
  padding: clamp(60px, 8vh, 100px) 0 clamp(80px, 12vh, 160px);
  background: var(--bg);
}
.gt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 40px);
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px);
}
@media (max-width: 980px) {
  .gt-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.gt-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #0c0a08;
  border: 1px solid rgba(184, 152, 94, 0.12);
  display: flex;
  flex-direction: column;
  cursor: default;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease,
    box-shadow 0.5s ease;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.gt-card:hover {
  transform: translateY(-6px);
  border-color: rgba(184, 152, 94, 0.4);
  box-shadow:
    0 32px 70px rgba(0, 0, 0, 0.65),
    0 0 40px rgba(184, 152, 94, 0.18);
}

/* Media-Bereich: Video-Stack + römische Zahl */
.gt-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #0c0a08;
}

.gt-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease;
  z-index: 1;
}
.gt-video.active {
  opacity: 1;
  z-index: 2;
}

.gt-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0) 25%,
    rgba(0, 0, 0, 0) 55%,
    rgba(0, 0, 0, 0.85) 100%
  );
}

.gt-roman {
  position: absolute;
  top: clamp(14px, 2vw, 24px);
  left: clamp(16px, 2vw, 28px);
  z-index: 4;
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 5vw, 80px);
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -0.02em;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Content-Bereich */
.gt-content {
  position: relative;
  padding: clamp(22px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #0c0a08;
  z-index: 5;
}
.gt-eyebrow {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.gt-headline {
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  font-weight: 400;
  font-size: clamp(34px, 3.4vw, 52px);
  line-height: 0.95;
  color: var(--ink-strong);
  margin: 0;
  letter-spacing: -0.015em;
}
.gt-headline em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}
.gt-tagline {
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(201, 193, 183, 0.85);
  margin: 0;
  min-height: 44px;
}

.gt-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  background: transparent;
  border: 1px solid rgba(184, 152, 94, 0.45);
  color: var(--gold);
  padding: 12px 22px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 999px;
  margin-top: 4px;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}
.gt-cta:hover {
  background: rgba(184, 152, 94, 0.1);
  border-color: var(--gold);
  color: var(--ink-strong);
}
.gt-arrow {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.gt-cta:hover .gt-arrow {
  transform: translateX(6px);
}

.gt-scenes {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: 14px;
  padding-top: 10px;
}
.gt-scene {
  position: relative;
  background: transparent;
  border: 0;
  padding: 6px 4px 10px;
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.08em;
  /* vorher 0.5-Alpha-Gold — fiel unter die WCAG-Kontrastgrenze auf
     dunklem Grund (Audit 2026-08-19). Aktiv-Zustand bleibt heller. */
  color: rgba(205, 176, 124, 0.82);
  cursor: pointer;
  transition: color 0.4s ease;
}
.gt-scene::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: rgba(184, 152, 94, 0.25);
  transition:
    background 0.5s ease,
    height 0.5s ease;
}
.gt-scene:hover {
  color: rgba(255, 255, 255, 0.85);
}
.gt-scene:hover::after {
  background: rgba(184, 152, 94, 0.6);
}
.gt-scene.active {
  color: var(--ink-strong);
}
.gt-scene.active::after {
  background: var(--gold);
  height: 1.5px;
  box-shadow: 0 0 8px rgba(184, 152, 94, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .gt-video {
    transition: none;
  }
  .gt-card {
    transition: none;
  }
}

/* ============================================================
   InstagramReel — "Folge der Saga"
   Grid mit 8 Portrait 9:16 Videos vor dem Footer.
   SCHARFE KANTEN (border-radius: 0), KEIN GAP, kein Text-Overlay.
   Hover: subtle scale + brightness. Mobile 2 Spalten.
   ============================================================ */
.ig-reel {
  background: var(--bg);
  padding-bottom: 0;
}
.ig-reel-head {
  text-align: center;
  padding: clamp(60px, 9vh, 110px) clamp(20px, 5vw, 60px) clamp(36px, 5vh, 60px);
}
.ig-eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 22px;
}
.ig-headline {
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 76px);
  line-height: 1.02;
  color: var(--ink-strong);
  letter-spacing: -0.02em;
  margin: 0;
}
.ig-headline em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}

.ig-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  grid-auto-flow: dense;
  gap: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* ===== Masonry-Verschachtelung (current) ===== */
.ig-grid-masonry {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr;
  gap: 0;
  width: 100%;
  align-items: start;
}
.ig-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.ig-big {
  align-self: start;
}

.ig-tile {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #0c0a08;
  border-radius: 0;
  cursor: pointer;
  outline: none;
  min-width: 0;
}
/* Bento — 2 große Tiles (jeweils 2x2), Rest fließt mit dense-flow rein */
.ig-tile.big {
  grid-column: span 2;
  grid-row: span 2;
}
.ig-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.4s ease;
}
.ig-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0.25) 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.ig-tile:hover video {
  transform: scale(1.04);
  filter: brightness(1.04);
}
.ig-tile:hover::after {
  opacity: 1;
}

@media (max-width: 900px) {
  /* "Folge der Saga" auf Handy/Tablet: die 2 großen Hero-Kacheln aus,
     stattdessen die 3 versetzten Stacks als 3 verschachtelte Spalten
     = genau 6 Videos, KEIN leeres Loch (jede Spalte hat 2 Kacheln).
     Y-Versatz wie auf dem Desktop -> verschachtelter Look. */
  .ig-grid-masonry {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    padding-bottom: 12vw; /* Platz für den Versatz-Überhang unten */
  }
  .ig-grid-masonry .ig-big-left,
  .ig-grid-masonry .ig-big-right {
    display: none;
  }
  .ig-grid-masonry .ig-stack-1 {
    grid-column: 1;
    padding-top: 0 !important;
  }
  .ig-grid-masonry .ig-stack-2 {
    grid-column: 2;
    padding-top: 10vw !important;
  }
  .ig-grid-masonry .ig-stack-3 {
    grid-column: 3;
    padding-top: 5vw !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ig-tile video {
    transition: none;
  }
}

/* ============================================================
   ManufakturPage / Über uns
   ============================================================ */
.manufaktur-page {
  background: var(--bg);
  color: var(--ink);
}

/* ===== Hero: Text links + Video rechts ===== */
.mf-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
  /* 2026-08-18 (Athena): Der Abstand nach oben war eine feste Zahl (min. 80 px)
     und damit KLEINER als die feststehende Kopfzeile (Laufband + Leiste =
     100 px). Am Handy verschwand die Oberkante des Videos dahinter. Jetzt
     rechnet der Abstand mit der Kopfzeile — plus etwas Luft. */
  padding: calc(var(--announcement) + var(--topbar) + clamp(24px, 4vh, 44px))
    clamp(24px, 5vw, 80px) clamp(60px, 9vh, 120px);
}
.mf-hero-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mf-hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.mf-hero-title {
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  font-weight: 400;
  font-size: clamp(48px, 5.8vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  margin: 0;
}
.mf-hero-title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}
.mf-hero-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-body);
  max-width: 520px;
}
.mf-hero-subline {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-muted);
  max-width: 520px;
  font-style: italic;
}
.mf-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
}
.mf-hero-media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: #0c0a08;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.mf-hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mf-hero-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0) 70%,
    rgba(0, 0, 0, 0.5) 100%
  );
}

/* ===== Roster: Figuren-Reihe mit Scroll-Reveal ===== */
.mf-roster {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(60px, 9vh, 120px) clamp(24px, 5vw, 80px);
}
.mf-roster-head {
  text-align: center;
  margin-bottom: clamp(50px, 7vh, 80px);
}
.mf-eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.mf-h2 {
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  margin: 0 0 18px;
}
.mf-h2 em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}
.mf-intro {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-body);
  max-width: 620px;
  margin: 0 auto;
}

.mf-roster-row {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: clamp(8px, 1vw, 14px);
  align-items: start;
}

/* Figur: startet unten + transparent, fliegt rauf in die Reihe */
.mf-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: translateY(120px) scale(0.88);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--delay, 0s);
}
.mf-figure.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.mf-figure-frame {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 999px 999px 8px 8px;
  overflow: hidden;
  background: linear-gradient(180deg, #1a1612 0%, #0a0807 100%);
  border: 1px solid rgba(184, 152, 94, 0.22);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  position: relative;
}
.mf-figure-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.04) saturate(0.95);
}
.mf-figure figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.mf-figure-name {
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-strong);
  font-weight: 400;
}
.mf-figure-role {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ===== Pillars: Philosophie · Design · Kollektionen ===== */
.mf-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(60px, 9vh, 120px) clamp(24px, 5vw, 80px);
  border-top: 1px solid rgba(184, 152, 94, 0.16);
}
.mf-pillar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mf-pillar-num {
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 42px;
  color: var(--gold);
  font-weight: 400;
  line-height: 1;
}
.mf-pillar h3 {
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  color: var(--ink-strong);
  margin: 0;
}
.mf-pillar p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-body);
  margin: 0;
}

/* ===== Atelier-Section (Baumstumpf-Foto links + Story rechts) ===== */
.mf-atelier {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(60px, 9vh, 120px) clamp(24px, 5vw, 80px);
}
.mf-atelier-media {
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: #0c0a08;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}
.mf-atelier-media img,
.mf-atelier-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mf-atelier-body p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-body);
  margin: 0 0 18px;
  max-width: 540px;
}
.mf-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(184, 152, 94, 0.18);
}
.mf-stat-n {
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: clamp(36px, 4vw, 56px);
  color: var(--ink-strong);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mf-stat-l {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 8px;
}

/* ===== Closing CTA ===== */
.mf-closing {
  text-align: center;
  padding: clamp(60px, 10vh, 140px) clamp(24px, 5vw, 80px)
    clamp(80px, 12vh, 160px);
}
.mf-closing .mf-h2 {
  margin-bottom: 32px;
}

/* ===== Mobile ===== */
@media (max-width: 980px) {
  .mf-hero {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .mf-hero-media {
    order: -1;
    /* 2026-08-18 (Athena): 16/10 schnitt vom 16:9-Film links und rechts je
       rund 20 px ab. Gleiches Format wie die Quelle = gar kein Beschnitt. */
    aspect-ratio: 16 / 9;
  }
  .mf-roster-row {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 28px;
  }
  .mf-pillars {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .mf-atelier {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
@media (max-width: 540px) {
  .mf-roster-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .mf-stats {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mf-figure {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===== Tradition: Historische Tiroler Figuren (Scroll-Reveal) ===== */
.mf-tradition {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(60px, 9vh, 120px) clamp(24px, 5vw, 80px);
  border-top: 1px solid rgba(184, 152, 94, 0.16);
}
.mf-tradition-head {
  text-align: center;
  margin-bottom: clamp(50px, 7vh, 90px);
}
.mf-tradition-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(12px, 1.5vw, 24px);
  align-items: end;
}
.mf-figur {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transform: translateY(140px) scale(0.85);
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--delay, 0s);
}
.mf-figur.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.mf-figur img {
  width: 100%;
  height: auto;
  max-height: clamp(220px, 28vw, 360px);
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.55));
}
.mf-figur figcaption {
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 13px;
  color: var(--gold);
  text-align: center;
  letter-spacing: 0.04em;
}

@media (max-width: 980px) {
  .mf-tradition-row {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 36px;
  }
}
@media (max-width: 540px) {
  .mf-tradition-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mf-figur {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Footer — Goldene Plate-Reihe (Social · Pay · Shipping)
   ============================================================ */
/* Trust-Leiste — echte Markenlogos, einheitlich monochrom (Landonorris-Look).
   Volle Breite, gestapelte Reihen (Bezahlung · Versand · Social); jedes Logo
   sitzt in einer dünn umrandeten Keyline-Zelle ("die Kanten"). */
.footer-trust {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 3vh, 34px);
  padding: clamp(36px, 5vh, 60px) 0;
  border-top: 1px solid rgba(184, 152, 94, 0.16);
  border-bottom: 1px solid rgba(184, 152, 94, 0.16);
  margin-top: clamp(40px, 5vh, 60px);
}
.footer-trust-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-plate-title {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.footer-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-logo {
  flex: 1 1 104px;
  max-width: 220px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 14px;
  border-radius: 10px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.025) 0%,
    rgba(0, 0, 0, 0.18) 100%
  );
  border: 1px solid var(--line-strong);
  color: var(--ink-body);
  text-decoration: none;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.footer-logo:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  color: var(--ink);
  background: linear-gradient(
    180deg,
    rgba(184, 152, 94, 0.1) 0%,
    rgba(0, 0, 0, 0.18) 100%
  );
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.45),
    0 0 14px rgba(184, 152, 94, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* echte Marken-SVGs — via CSS-mask einfarbig in currentColor */
.footer-logo i {
  display: block;
  width: 64px;
  height: 30px;
  background: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
/* Wortmark-Fallback (Post · UnionPay · GLS) */
.footer-logo-wm {
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  font-family: var(--ff-sans, sans-serif);
}
/* Social-Zellen — echtes Marken-Icon + Plattform-Name */
.footer-logo--link {
  gap: 11px;
}
.footer-logo-ico {
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
.footer-logo-name {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
}

@media (max-width: 900px) {
  .footer-logo {
    flex-basis: 88px;
    height: 44px;
  }
}

@media (max-width: 540px) {
  .footer-trust-row {
    gap: 8px;
  }
  .footer-logo {
    flex-basis: 72px;
    padding: 0 8px;
  }
  .footer-logo i {
    width: 50px;
    height: 26px;
  }
}

/* ============================================================
   Footer v2 — Wix-Look: zentriertes Brand-Monument + EIN Band
   aus Link-Spalten und Gold-Icon-Spalten mit Hairline-Trennern.
   ============================================================ */
/* ------------------------------------------------------------------
   Marken-Glyphen (mask-Pattern) — ersetzt die Gold-PNG-Plates.
   Eine Farbe für alles: gedämpftes Gold, das erst im Hover aufmacht.
   Größe kommt pro Marke via --mw/--mh aus dem JSX (optisch austariert).
   ------------------------------------------------------------------ */
.fmark,
.fsocial i {
  display: block;
  width: var(--mw);
  height: var(--mh);
  background: var(--gold);
  opacity: 0.42;
  -webkit-mask: var(--logo) no-repeat center / contain;
  mask: var(--logo) no-repeat center / contain;
  transition: opacity 0.3s ease;
}
.fmark:hover {
  opacity: 0.72;
}
/* Vollflächen-Signets optisch einpassen (siehe Kommentar im Footer-JSX).
   „dim": gleiche Form, weniger Deckkraft — eine gefüllte Fläche trägt
   rund 3× so viel Tinte wie eine Wortmarke gleicher Größe. */
.fmark--dim {
  opacity: 0.22;
}
.fmark--dim:hover {
  opacity: 0.42;
}

/* ------------------------------------------------------------------
   Zahlung + Versand SICHTBAR machen (Athena, 2026-08-19: „viel heller,
   die sieht man kaum"). Gemessen auf #0a0908:
     0.42 -> 2.14 : 1   (durchgefallen)
     0.22 -> 1.38 : 1   (praktisch unsichtbar)
   WCAG 1.4.11 verlangt 3:1 fuer nicht-textliche Grafik.
   Neu: 0.85 -> 5.49 : 1, dim 0.62 -> 3.38 : 1.
   Die „dim"-Abstufung bleibt (Amex/DPD sind gefuellte Flaechen und
   wuerden bei gleicher Deckkraft als Goldklotz erschlagen), nur eben
   oberhalb der Sichtbarkeitsschwelle.
   Die Social-Icons behalten bewusst 0.42 — anderer Ort im Footer,
   von Athena nicht beauftragt.
   ⚠️ Muss NACH der Basisregel stehen (gleiche Spezifitaet).
   ------------------------------------------------------------------ */
.fmark {
  opacity: 0.85;
}
.fmark:hover {
  opacity: 1;
}
.fmark--dim {
  opacity: 0.62;
}
.fmark--dim:hover {
  opacity: 0.8;
}


/* Social-Zeile unter der Atelier-Adresse */
.footer-social {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(20px, 2.4vw, 30px);
  margin-top: clamp(22px, 3vh, 32px);
}
.fsocial {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  transition: transform 0.3s ease;
}
.fsocial:hover i {
  opacity: 0.95;
}
.fsocial:hover {
  transform: translateY(-2px);
}
.fsocial:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

/* Zahlung + Versand — eine ruhige Zeile, zentriert, unter dem Link-Band */
.footer-marks {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px clamp(28px, 4vw, 56px);
  margin-top: clamp(34px, 4.5vh, 54px);
  padding-top: clamp(26px, 3.5vh, 38px);
  border-top: 1px solid rgba(184, 152, 94, 0.14);
}
.fmark-group {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 22px);
}
.fmark-label {
  font-size: 9px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.fmark-row {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 20px);
  flex-wrap: wrap;
}
.fmark-sep {
  width: 1px;
  height: 22px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(184, 152, 94, 0.35),
    transparent
  );
}

/* Link-Band: vier Spalten, Saga doppelt gesetzt */
.footer-cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(26px, 3vw, 52px);
  padding-top: clamp(34px, 4.5vh, 52px);
  border-top: 1px solid rgba(184, 152, 94, 0.14);
}
/* Saga zweispaltig — spaltenweise fließend (grid-auto-flow: column),
   damit die Namen von oben nach unten gelesen werden statt im Zickzack. */
.fcol-split {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
  grid-auto-columns: max-content;
  gap: 0 clamp(24px, 3vw, 48px);
  align-content: start;
}
@media (max-width: 900px) {
  .footer-cols {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-xl) var(--s-lg);
  }
  .fcol--saga {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .footer-cols {
    grid-template-columns: 1fr;
  }
  .fcol-split {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: auto;
  }
  .footer-marks {
    flex-direction: column;
    gap: 20px;
  }
  .fmark-sep {
    display: none;
  }
  .fmark-group {
    flex-direction: column;
    gap: 12px;
  }
}

/* ============================================================
   Kontakt Page
   ============================================================ */
.kontakt-page {
  background: var(--bg);
  color: var(--ink);
  min-height: 90vh;
  position: relative;
  padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 40px)
    clamp(80px, 10vh, 120px);
}
/* Der Abstand oben MUSS die zwei Klassen von `.page.no-pad` schlagen —
   sonst gewinnt dort `padding-top: 0` (hoehere Spezifitaet, unabhaengig
   von der Reihenfolge) und Uebertitel plus Ueberschrift „Schreiben Sie
   uns." verschwinden hinter der fixierten Kopfleiste (2026-08-16).
   Kopfleiste = Ankuendigungsband + Navigation, beide als Variable. */
.page.no-pad.kontakt-page {
  padding-top: calc(
    var(--announcement) + var(--topbar) + clamp(28px, 5vh, 72px)
  );
  /* Die Modelle ragen an den Raendern bewusst aus dem Bild. Ohne dieses
     Abschneiden verbreitern sie das Dokument (gemessen +46px Handy,
     +107px Tablett) und erzeugen seitliches Scrollen.
     `clip` statt `hidden`: erzeugt keinen Scroll-Container. */
  overflow-x: hidden;
  overflow-x: clip;
}
.kt-wrap {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  place-items: center;
}
.kt-mann {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(180px, 20vw, 320px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
  opacity: 0.95;
  z-index: 1;
}
.kt-mann-left {
  left: 0;
}
.kt-mann-right {
  right: 0;
  transform: translateY(-50%) scaleX(-1);
}
.kt-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  width: 100%;
  text-align: center;
  padding: 0 24px;
}
.kt-eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.kt-title {
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 1.02;
  color: var(--ink-strong);
  margin: 0 0 24px;
  letter-spacing: -0.02em;
}
.kt-title em {
  font-style: italic;
  color: var(--gold);
}
.kt-lede {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-body);
  margin: 0 auto 36px;
  max-width: 520px;
}
.kt-form {
  background: linear-gradient(180deg, #14110d 0%, #0a0807 100%);
  border: 1px solid rgba(184, 152, 94, 0.4);
  border-radius: 14px;
  padding: clamp(24px, 3vw, 36px);
  margin: 0 auto 24px;
  max-width: 540px;
  text-align: left;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.kt-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.kt-req {
  color: var(--urgent);
}
.kt-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(184, 152, 94, 0.25);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--ink-strong);
  font-family: inherit;
  outline: none;
  transition:
    border-color 0.25s ease,
    background 0.25s ease;
}
.kt-input::placeholder {
  color: var(--ink-faint);
}
.kt-input:focus {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.06);
}
.kt-textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.55;
}
.kt-check {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 24px;
  font-size: 13px;
  color: var(--ink-body);
  cursor: pointer;
}
.kt-check input {
  accent-color: var(--gold);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.kt-submit {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px solid rgba(184, 152, 94, 0.55);
  color: var(--ink-strong);
  padding: 16px 24px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 8px;
  transition:
    background 0.25s ease,
    border-color 0.25s ease;
}
.kt-submit:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg);
}
.kt-disclaimer {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0 auto 44px;
  max-width: 520px;
}
.kt-disclaimer a {
  color: var(--gold);
  text-decoration: underline;
}
.kt-direct {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 540px;
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid rgba(184, 152, 94, 0.18);
}
.kt-direct > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kt-direct-label {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.kt-direct a,
.kt-direct span {
  font-size: 13px;
  color: var(--ink-strong);
  text-decoration: none;
}
.kt-direct a:hover {
  color: var(--gold);
}

@media (max-width: 980px) {
  .kt-mann {
    display: none;
  }
  .kt-direct {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ============================================================
   Legal Pages — Impressum · AGB · Datenschutz · Versand ·
   Widerruf · FAQ. Premium long-form layout mit Sticky-TOC.
   ============================================================ */
.legal-page {
  background: var(--bg);
  color: var(--ink);
  min-height: 90vh;
}

/* Hero */
.lg-hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(80px, 12vh, 140px) clamp(24px, 5vw, 60px)
    clamp(40px, 6vh, 70px);
  text-align: center;
  border-bottom: 1px solid rgba(184, 152, 94, 0.16);
}
.lg-eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}
.lg-title {
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  margin: 0 0 22px;
}
.lg-title em {
  font-style: italic;
  color: var(--gold);
}
.lg-lede {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-body);
  max-width: 640px;
  margin: 0 auto 24px;
}
.lg-meta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.lg-advisor {
  color: var(--gold);
  position: relative;
  padding-left: 18px;
}
.lg-advisor::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--ink-muted);
}

/* Body grid: TOC + Content */
.lg-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(40px, 5vw, 80px);
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(50px, 7vh, 90px) clamp(24px, 5vw, 60px) clamp(60px, 9vh, 120px);
  align-items: start;
}
.lg-body-single {
  display: block;
  max-width: 880px;
}
.lg-body-single .lg-article,
.lg-body-single .lg-article-faq {
  max-width: 100%;
  margin: 0 auto;
}

/* TOC (Sticky) */
.lg-toc {
  position: sticky;
  top: 100px;
  font-size: 13px;
}
.lg-toc-title {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.lg-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
}
.lg-toc li {
  counter-increment: toc;
  padding: 8px 0;
  border-left: 1px solid rgba(184, 152, 94, 0.18);
  padding-left: 16px;
  margin-left: -1px;
  transition: border-color 0.3s ease;
}
.lg-toc li:hover {
  border-left-color: var(--gold);
}
.lg-toc a {
  color: var(--ink-body);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.4;
  display: block;
}
.lg-toc li::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 0.1em;
  margin-right: 8px;
}
.lg-toc a:hover {
  color: var(--ink-strong);
}

/* Article */
.lg-article {
  max-width: 720px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-body);
}
.lg-section {
  margin-bottom: clamp(40px, 5vh, 64px);
  scroll-margin-top: 100px;
}
.lg-section:last-child {
  margin-bottom: 24px;
}
.lg-h2 {
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.15;
  color: var(--ink-strong);
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}
.lg-article p {
  margin: 0 0 18px;
}
.lg-article p:last-child {
  margin-bottom: 0;
}
.lg-article strong {
  color: var(--ink-strong);
  font-weight: 500;
}

/* Key-value rows (Impressum, Datenschutz) */
.lg-kv {
  display: grid;
  grid-template-columns: minmax(140px, 28%) 1fr;
  gap: 14px 24px;
  margin: 0 0 18px;
  padding: 22px 0;
  border-top: 1px solid rgba(184, 152, 94, 0.14);
  border-bottom: 1px solid rgba(184, 152, 94, 0.14);
}
.lg-kv dt {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin: 0;
}
.lg-kv dd {
  font-size: 15px;
  color: var(--ink-strong);
  margin: 0;
}

/* List */
.lg-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}
.lg-list li {
  position: relative;
  padding: 8px 0 8px 24px;
  border-bottom: 1px dashed rgba(184, 152, 94, 0.14);
}
.lg-list li:last-child {
  border-bottom: 0;
}
.lg-list li::before {
  content: "·";
  position: absolute;
  left: 8px;
  top: 8px;
  color: var(--gold);
  font-size: 18px;
  line-height: 1;
}

.lg-note {
  font-size: 13px;
  font-style: italic;
  color: var(--ink-muted);
  padding: 16px 20px;
  border-left: 2px solid var(--gold);
  background: rgba(184, 152, 94, 0.04);
  margin: 24px 0 0;
}

/* FAQ Accordion */
.lg-article-faq {
  max-width: 820px;
}
.lg-faq-list {
  border-top: 1px solid rgba(184, 152, 94, 0.18);
}
.lg-faq-item {
  border-bottom: 1px solid rgba(184, 152, 94, 0.18);
}
.lg-faq-q {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--ink-strong);
  padding: 24px 0;
  font-size: 17px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 0.25s ease;
}
.lg-faq-q:hover {
  color: var(--gold);
}
.lg-faq-num {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  width: 36px;
}
.lg-faq-text {
  flex-grow: 1;
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.2;
}
.lg-faq-toggle {
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  font-size: 28px;
  color: var(--gold);
  line-height: 1;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  transition: transform 0.3s ease;
}
.lg-faq-item.open .lg-faq-toggle {
  transform: rotate(180deg);
}
.lg-faq-a {
  padding: 0 0 28px 56px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-body);
  animation: lg-faq-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.lg-faq-a p {
  margin: 0 0 14px;
}
.lg-faq-a p:last-child {
  margin-bottom: 0;
}
@keyframes lg-faq-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Footer CTA */
.lg-footer-cta {
  margin-top: clamp(40px, 6vh, 80px);
  padding-top: clamp(40px, 5vh, 60px);
  border-top: 1px solid rgba(184, 152, 94, 0.18);
  text-align: center;
}
.lg-footer-cta p {
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink-strong);
  margin: 0 0 20px;
}

/* Responsive */
@media (max-width: 900px) {
  .lg-body {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .lg-toc {
    position: static;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(184, 152, 94, 0.16);
  }
  .lg-kv {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .lg-kv dt {
    margin-top: 12px;
  }
  .lg-faq-q {
    gap: 14px;
  }
  .lg-faq-text {
    font-size: 18px;
  }
  .lg-faq-a {
    padding-left: 50px;
  }
}

/* ============================================================
   Legal Pages — Floral Ornamente (nur FAQ)
   Eigene SVG-Designs: Edelweiß, Distel, Lorbeer, Rosenranke
   Gold line-art, subtil als Hintergrund-Dekoration
   ============================================================ */
.lg-hero {
  position: relative;
  overflow: visible;
}
.lg-floral {
  position: absolute;
  color: var(--gold);
  opacity: 0.95;
  pointer-events: none;
  filter: drop-shadow(0 0 18px rgba(184, 152, 94, 0.7));
  animation: lg-floral-float 7s ease-in-out infinite;
}
.lg-floral svg,
.lg-floral img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
@keyframes lg-floral-float {
  0%,
  100% {
    transform: translateY(0) rotate(var(--rot, 0deg));
  }
  50% {
    transform: translateY(-6px) rotate(calc(var(--rot, 0deg) + 2deg));
  }
}

/* Hero-Ornaments: oben-links + oben-rechts */
.lg-floral-tl {
  top: 30%;
  left: clamp(8px, 6vw, 90px);
  width: clamp(80px, 10vw, 140px);
  height: clamp(110px, 13vw, 180px);
  --rot: -8deg;
  animation-delay: 0s;
  opacity: 0.75;
}
.lg-floral-tr {
  top: 30%;
  right: clamp(8px, 6vw, 90px);
  width: clamp(80px, 10vw, 140px);
  height: clamp(110px, 13vw, 180px);
  --rot: 12deg;
  animation-delay: 1.5s;
  opacity: 0.75;
}
@media (max-width: 768px) {
  .lg-floral-tl,
  .lg-floral-tr {
    display: none;
  }
}

/* Lorbeer unterhalb Hero — als Schmuck-Divider */
.lg-floral-lorbeer {
  margin: clamp(40px, 6vh, 60px) auto 0;
  width: clamp(240px, 38vw, 380px);
  height: auto;
  color: var(--gold);
  opacity: 1;
  filter: drop-shadow(0 0 20px rgba(184, 152, 94, 0.75));
}
.lg-floral-lorbeer svg {
  width: 100%;
  height: auto;
  display: block;
}

/* FAQ-Wrapper mit seitlichen Ranken */
.lg-faq-wrap {
  position: relative;
}
.lg-floral-side {
  width: clamp(110px, 12vw, 170px);
  height: clamp(110px, 12vw, 170px);
  opacity: 0.85;
  top: 8%;
  animation-duration: 9s;
}
.lg-floral-side-l {
  left: clamp(-60px, -4vw, -20px);
  --rot: -15deg;
}
.lg-floral-side-r {
  right: clamp(-60px, -4vw, -20px);
  --rot: 165deg;
  animation-delay: 2s;
}

/* Floral-Divider zwischen FAQ-Items 4/8 */
.lg-faq-divider {
  display: flex;
  justify-content: center;
  padding: clamp(28px, 4vh, 44px) 0;
  color: var(--gold);
  opacity: 1;
}
.lg-faq-divider svg {
  width: clamp(180px, 28vw, 300px);
  height: auto;
  display: block;
  filter: drop-shadow(0 0 14px rgba(184, 152, 94, 0.6));
}

/* Lebendige Background-Glows nur auf FAQ */
.legal-page:has(.lg-faq-wrap) {
  background:
    radial-gradient(
      ellipse at 15% 20%,
      rgba(184, 152, 94, 0.06) 0%,
      transparent 40%
    ),
    radial-gradient(
      ellipse at 85% 60%,
      rgba(184, 152, 94, 0.05) 0%,
      transparent 45%
    ),
    var(--bg);
}

/* Mobile: Hero-Ornamente kleiner, side-ranken weg */
@media (max-width: 900px) {
  .lg-floral-tl,
  .lg-floral-tr {
    width: 60px;
    height: 60px;
    opacity: 0.3;
  }
  .lg-floral-side {
    display: none;
  }
  .lg-floral-lorbeer {
    width: 60vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lg-floral {
    animation: none;
  }
}

/* ============================================================
   ProductPage — Packaging-Section (Dustbags-Pyramide)
   2-Spalten: Text links + Bild rechts. Dark Premium.
   ============================================================ */
.pdp-packaging {
  background: linear-gradient(
    180deg,
    var(--bg) 0%,
    #100e0c 50%,
    var(--bg) 100%
  );
  padding: clamp(80px, 12vh, 140px) 0;
  border-top: 1px solid rgba(184, 152, 94, 0.12);
  border-bottom: 1px solid rgba(184, 152, 94, 0.12);
}
.pdp-packaging-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 60px);
}
.pdp-packaging-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pdp-packaging-eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.pdp-packaging-title {
  font-family: var(--ff-serif, "Cormorant Garamond", serif);
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  margin: 0;
}
.pdp-packaging-title em {
  font-style: italic;
  color: var(--gold);
}
.pdp-packaging-text p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-body);
  margin: 0;
  max-width: 520px;
}
.pdp-packaging-bullets {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pdp-packaging-bullets li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  color: var(--ink-body);
  letter-spacing: 0.01em;
}
.pdp-packaging-bullets li::before {
  content: "·";
  position: absolute;
  left: 6px;
  top: -4px;
  color: var(--gold);
  font-size: 24px;
  line-height: 1;
}
.pdp-packaging-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdp-packaging-media img {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
  filter: drop-shadow(0 40px 70px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 80px rgba(184, 152, 94, 0.18));
}

@media (max-width: 980px) {
  .pdp-packaging-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .pdp-packaging-media {
    order: -1;
  }
  .pdp-packaging-media img {
    max-width: 380px;
  }
}

/* ============================================================
   CHECKOUT (#/kasse) + DANKE (#/danke) — Conversion-Zone
   ============================================================ */

/* --- Schlanker Checkout-Header ------------------------------------ */
.topbar-checkout {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.topbar-checkout .tb-back {
  justify-self: start;
}
.tb-secure {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.tb-secure svg {
  color: var(--gold);
}

/* --- Seite --------------------------------------------------------- */
.ck-page {
  min-height: 70vh;
  background: var(--bg);
}
.ck-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* Schritt-Anzeige */
.ck-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 8px 0 42px;
}
.ck-step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ck-step .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 11px;
}
.ck-step.active {
  color: var(--ink);
}
.ck-step.active .n {
  border-color: var(--gold);
  color: var(--gold);
}
.ck-step.done {
  color: var(--ink-muted);
}
.ck-step.done .n {
  border-color: var(--gold-soft);
  color: var(--gold);
}
.ck-step-line {
  width: 72px;
  height: 1px;
  background: var(--line);
}

/* Layout */
.ck-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 56px;
  align-items: start;
}
.ck-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 30px;
  color: var(--ink);
}
.ck-title em {
  font-style: italic;
  color: var(--gold);
}
.ck-subtitle {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  margin: 38px 0 16px;
  color: var(--ink);
}

/* Felder */
.ck-field {
  margin-bottom: 18px;
  min-width: 0;
}
.ck-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.ck-opt {
  color: var(--ink-faint);
  text-transform: none;
  letter-spacing: 0.04em;
}
.ck-input {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  border-radius: 0;
  transition: border-color 0.25s ease;
}
.ck-input::placeholder {
  color: var(--ink-faint);
}
.ck-input:focus {
  outline: none;
  border-color: var(--gold);
}
.ck-input-error {
  border-color: var(--urgent);
}
.ck-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23908a82' stroke-width='1.6'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.ck-err {
  margin-top: 7px;
  font-size: 12px;
  color: var(--urgent-strong);
}
.ck-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ck-row-3 {
  display: grid;
  grid-template-columns: 110px 1fr 1fr;
  gap: 14px;
}
/* Straße + Hausnummer als getrennte Felder in einer Reihe — Hausnummer
   ist Pflicht (Kliesch: häufigste Zustell-Fehlerquelle). Bleibt auch auf
   Mobile nebeneinander, da Hausnummern kurz sind. */
.ck-row-street {
  display: grid;
  grid-template-columns: 1fr 118px;
  gap: 14px;
}

/* Zahlungswahl */
.ck-pay-options {
  display: grid;
  gap: 12px;
}
.ck-pay-card {
  display: block;
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  cursor: pointer;
  transition:
    border-color 0.25s ease,
    background 0.25s ease;
}
.ck-pay-card:hover {
  border-color: var(--line-strong);
}
.ck-pay-card.active {
  border-color: var(--gold);
  background: var(--bg-soft);
}
.ck-pay-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ck-pay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.ck-pay-sub {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-muted);
}

.ck-next,
.ck-submit {
  margin-top: 28px;
}
.ck-submit {
  height: 58px;
  font-size: 12px;
}
.ck-secure-line {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-faint);
  text-align: center;
}
.ck-secure-line svg {
  flex: none;
  margin-top: 2px;
  color: var(--gold-soft);
}

/* Review (Schritt 2) */
.ck-review-block {
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  padding: 18px 20px;
  margin-bottom: 14px;
}
.ck-review-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 10px;
}
.ck-edit {
  background: none;
  border: none;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
}
.ck-edit:hover {
  color: var(--ink);
}
.ck-review-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-body);
}
.ck-review-body .muted {
  color: var(--ink-faint);
}

.ck-agb {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 22px;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  cursor: pointer;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-body);
}
.ck-agb.error {
  border-color: var(--urgent);
}
.ck-agb input {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--gold);
}
.ck-agb a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Bestellübersicht (Aside) */
.ck-aside {
  position: sticky;
  top: 110px;
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  padding: 24px;
}
.ck-aside-head {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.ck-line {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
}
.ck-line + .ck-line {
  border-top: 1px solid var(--line-faint);
}
.ck-line-thumb {
  position: relative;
  flex: none;
  width: 64px;
  height: 64px;
  background: var(--bg-soft);
  overflow: hidden;
}
.ck-line-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ck-line-qty {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--gold);
  color: var(--bg);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}
.ck-line-info {
  flex: 1;
  min-width: 0;
}
.ck-line-name {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--ink);
}
.ck-line-role {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 2px;
}
.ck-line-scarcity {
  margin-top: 5px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--urgent-strong);
}
.ck-line-price {
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
}
.ck-totals {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.ck-totals .row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-muted);
  padding: 5px 0;
}
.ck-totals .row .free {
  color: var(--gold);
}
.ck-totals .row.total {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  color: var(--ink);
}
.ck-totals .row.total span:last-child {
  font-family: var(--font-display);
  font-size: 22px;
}
.ck-aside-trust {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
}
.ck-aside-trust div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-muted);
}
.ck-aside-trust svg {
  flex: none;
  color: var(--gold-soft);
}

/* Zahlarten-Row (mask-Pattern wie Footer-Logos) */
.pay-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}
.pay-chip i {
  display: block;
  width: 34px;
  height: 14px;
  background: var(--ink-muted);
  -webkit-mask: var(--logo) no-repeat center / contain;
  mask: var(--logo) no-repeat center / contain;
  opacity: 0.75;
}
.pay-row-xs {
  margin-top: 0;
  gap: 9px;
}
.pay-row-xs .pay-chip i {
  width: 26px;
  height: 11px;
}

/* Leerer Checkout */
.ck-empty {
  max-width: 420px;
  margin: 0 auto;
  padding: 110px 24px 130px;
  text-align: center;
  display: grid;
  gap: 18px;
  justify-items: center;
}
.ck-empty-icon {
  color: var(--ink-faint);
}
.ck-empty-title {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

/* Mini-Footer */
.ck-footer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 64px;
  padding-top: 22px;
  border-top: 1px solid var(--line-faint);
}
.ck-footer a {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
}
.ck-footer a:hover {
  color: var(--ink);
}

/* --- Danke-Seite ---------------------------------------------------- */
.dk-wrap {
  max-width: 620px;
  margin: 0 auto;
  padding: 70px 24px 110px;
  text-align: center;
}
.dk-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
  margin-bottom: 26px;
}
.dk-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.dk-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 18px;
}
.dk-title em {
  font-style: italic;
  color: var(--gold);
}
.dk-lede {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-body);
  margin: 0 auto 36px;
  max-width: 480px;
}
.dk-order {
  text-align: left;
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  padding: 20px 24px;
  margin-bottom: 28px;
}
.dk-resend {
  border: 1px solid var(--gold-soft);
  background: var(--bg-soft);
  padding: 22px;
  margin-bottom: 40px;
}
.dk-resend-label {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-body);
  margin-bottom: 16px;
}
.dk-resend-btns {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dk-steps {
  display: grid;
  gap: 18px;
  text-align: left;
  margin-bottom: 44px;
}
.dk-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-body);
}
.dk-step strong {
  color: var(--ink);
}
.dk-step .n {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-size: 12px;
  color: var(--gold);
}
.dk-back {
  margin: 0 auto;
}

/* --- Drawer-Ergänzungen --------------------------------------------- */
.drawer-free-ship {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--gold);
  margin-bottom: 12px;
}
.drawer-free-ship svg {
  flex: none;
}
/* Noch-nicht-erreicht-Variante: gedaempft, damit das erreichte Gold
   die staerkere Belohnung bleibt. */
.drawer-free-ship-open {
  color: var(--ink-muted);
}
.added-continue {
  display: block;
  width: 100%;
  margin-top: 12px;
  background: none;
  border: none;
  color: var(--ink-faint);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.added-continue:hover {
  color: var(--ink);
}

/* --- Responsive Checkout -------------------------------------------- */
@media (max-width: 900px) {
  .ck-grid {
    /* minmax(0,…): nacktes 1fr = minmax(auto,1fr) — der nowrap-Submit
       („Zahlungspflichtig reservieren · € 650", ~413px) blähte den Track
       auf und schob die ganze Kasse aus dem 390er-Viewport. */
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .ck-submit {
    white-space: normal;
    height: auto;
    min-height: 56px;
    line-height: 1.35;
    padding-left: 16px;
    padding-right: 16px;
  }
  .ck-aside {
    position: static;
    order: -1;
    padding: 18px;
  }
  .ck-wrap {
    padding: 24px 18px 60px;
  }
  .ck-steps {
    margin-bottom: 26px;
  }
  .ck-row-2 {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ck-row-3 {
    grid-template-columns: 90px 1fr;
  }
  .ck-row-3 .ck-field:last-child {
    grid-column: 1 / -1;
  }
  .ck-row-street {
    grid-template-columns: 1fr 84px;
  }
  .tb-secure span {
    display: none;
  }
}

/* ============================================================
   PDP Conversion-Elemente: Delivery, Trust, Sticky-Bar, Reviews
   ============================================================ */
.pdp-delivery {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  font-size: 12.5px;
  color: var(--ink-body);
}
.pdp-delivery svg {
  flex: none;
  color: var(--gold);
}
.pdp-delivery strong {
  color: var(--ink);
  font-weight: 600;
}

.pdp-trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-top: 14px;
}
.pdp-trust div {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}
.pdp-trust svg {
  flex: none;
  color: var(--gold-soft);
}
.pdp-info .pay-row {
  justify-content: flex-start;
  margin-top: 16px;
}

/* Sticky Buy-Bar (mobil) */
.pdp-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  align-items: center;
  gap: 14px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(10, 9, 8, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.pdp-sticky-bar.show {
  transform: translateY(0);
}
.psb-info {
  flex: 1;
  min-width: 0;
}
.psb-name {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--ink);
  line-height: 1.1;
}
.psb-meta {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 2px;
  /* 2026-08-19 (Athena): „€ 189 · Nur noch 14" brach auf breiteren
     Handys in zwei Zeilen — jetzt immer einzeilig, notfalls gekuerzt. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40vw;
}
.psb-scarcity {
  color: var(--urgent-strong);
}
.psb-cta {
  flex: none;
  height: 46px;
  padding: 0 20px;
}
@media (max-width: 820px) {
  .pdp-sticky-bar {
    display: flex;
  }
}

/* 2026-08-18 (Athena): Auf 320-px-Geraeten brach „· Nur noch 14" in vier
   Zeilen um, die Leiste wuchs dadurch von 67 auf 115 px und verdeckte den
   halben Bildschirm. Jetzt bleibt die Zeile zusammen; ist der Platz zu eng,
   wird sie sauber mit Auslassung gekuerzt statt zu stapeln. */
@media (max-width: 360px) {
  .pdp-sticky-bar {
    gap: 10px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .psb-name {
    font-size: 17px;
  }
  .psb-meta {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .psb-cta {
    padding: 0 12px;
    font-size: 10.5px;
    letter-spacing: 0.08em;
  }
}

/* Kundenstimmen (PDP) */
.pdp-reviews {
  padding: 90px 0 30px;
  border-top: 1px solid var(--line-faint);
}
.pr-head {
  max-width: 640px;
  margin: 0 auto 44px;
  text-align: center;
  padding: 0 24px;
}
.pr-eyebrow {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.pr-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 14px;
}
.pr-title em {
  font-style: italic;
  color: var(--gold);
}
.pr-stars-line {
  font-size: 15px;
  letter-spacing: 0.28em;
  color: var(--gold);
}
.pr-stars-line span {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.pr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.pr-card {
  margin: 0;
  padding: 26px 26px 22px;
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pr-card .pr-stars {
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--gold);
}
.pr-card blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18.5px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--ink-body);
}
.pr-card figcaption {
  margin-top: auto;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* 2026-08-18 (Athena): Kennzeichen unter jeder Stimme. Eigene Zeile,
   damit es bei langen Namen nicht mit der Ortsangabe zusammenlaeuft. */
.pr-verified {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
@media (max-width: 900px) {
  .pr-grid {
    grid-template-columns: 1fr;
  }
  .pdp-reviews {
    padding: 60px 0 10px;
  }
}

/* ============================================================
   Home: Social-Proof-Strip + Exit-Intent-Layer
   ============================================================ */
.home-reviews {
  padding: 110px 0 100px;
  border-top: 1px solid var(--line-faint);
  border-bottom: 1px solid var(--line-faint);
  background: var(--bg);
}
@media (max-width: 900px) {
  .home-reviews {
    padding: 70px 0 60px;
  }
}

.exit-layer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.exit-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 4, 3, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.exit-card {
  position: relative;
  max-width: 440px;
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--gold-soft);
  padding: 44px 38px 30px;
  text-align: center;
  animation: exitIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes exitIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.exit-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
}
.exit-close:hover {
  color: var(--ink);
}
.exit-eyebrow {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.exit-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 14px;
}
.exit-title em {
  font-style: italic;
  color: var(--gold);
}
.exit-sub {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0 0 22px;
}
.exit-form {
  display: grid;
  gap: 10px;
}
.exit-decline {
  margin-top: 16px;
  background: none;
  border: none;
  color: var(--ink-faint);
  font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.exit-decline:hover {
  color: var(--ink-muted);
}

/* ============================================================
   MOTION-SYSTEM — Tokens, Veil, Reveals, Utilities
   Alle Pre-Hide-Regeln hängen an html.tm-motion (kein FOUC,
   kein Totalausfall bei reduced-motion / fehlendem JS).
   ============================================================ */
:root {
  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 200ms; /* Interaktion: Links, Buttons, Farben   */
  --dur-2: 450ms; /* Panels: Drawer, Overlays, Karten      */
  --dur-3: 900ms; /* Reveals: Sections, Bilder             */
}

/* Pre-Hide nur bei aktivem Motion-System */
html.tm-motion [data-reveal],
html.tm-motion [data-reveal-group] > *:not([data-reveal]) {
  opacity: 0;
}
html.tm-motion [data-counter] {
  font-variant-numeric: tabular-nums;
}

/* Zeilen-Masken (Markup: [data-lines] .line > .line-inner) */
.line {
  display: block;
  overflow: hidden;
  /* Raum für Ober-/Unterlängen + kursive Überhänge der Display-Serife —
     sonst schneidet overflow:hidden bei enger line-height die Glyphen ab.
     Negative Margins halten das Layout exakt gleich. */
  padding: 0.16em 0.06em 0.12em;
  margin: -0.16em -0.06em -0.12em;
}
.line-inner {
  display: block;
  will-change: transform;
}
html.tm-motion [data-lines] .line-inner {
  /* weiter als die Maske hoch ist (inkl. Padding), damit der Text vor dem
     Reveal sicher unter der Maske startet und nicht durchscheint */
  transform: translateY(150%);
}

/* Route-Veil — Seitenübergang mit Monogramm */
.route-veil {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease-lux);
}
.route-veil.show {
  opacity: 1;
  pointer-events: auto;
}
.route-veil img {
  width: 64px;
  height: auto;
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 380ms var(--ease-lux) 60ms,
    transform 380ms var(--ease-lux) 60ms;
  filter: drop-shadow(0 0 22px rgba(184, 152, 94, 0.35));
}
.route-veil.show img {
  opacity: 1;
  transform: scale(1);
}

/* Animierte Underline (SKIMS-Pattern) — wächst von links */
.u-line {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1px;
  transition: background-size var(--dur-1) ease, color var(--dur-1) ease;
  padding-bottom: 2px;
}
.u-line:hover,
.u-line.active {
  background-size: 100% 1px;
}

/* Marquee-Veredelung: Edge-Fades + Hover-Pause */
.announce,
.scarcity-ribbon {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}
.announce:hover .announce-track,
.scarcity-ribbon:hover .scarcity-track {
  animation-play-state: paused;
}

/* CTA-Press-Feedback (dezent, nur :active) */
.btn:active {
  transform: scale(0.985);
}

/* Cart-Badge-Pop */
@keyframes tm-badge-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.35);
  }
  100% {
    transform: scale(1);
  }
}
.tb-cart-count.pop {
  animation: tm-badge-pop 420ms var(--ease-lux);
}

/* Reduced Motion: Marquees stilllegen */
@media (prefers-reduced-motion: reduce) {
  .announce-track,
  .scarcity-track {
    animation: none !important;
  }
}

/* Desktop-Kino: der alte Pfeil-Slider existiert nicht mehr */
.bs-arrow {
  display: none !important;
}

/* ============================================================
   Phase B — Hero-Kino, Footer-Reveal, Parallax-Wrapper
   ============================================================ */

/* Ken-Burns auf dem aktiven Hero-Video (langsam, kaum merklich) */
@keyframes hero-kenburns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.06);
  }
}
html.tm-motion .hero-slide.active video {
  animation: hero-kenburns 11s linear forwards;
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide.active video {
    animation: none !important;
  }
}

/* Pause/Play (WCAG 2.2.2) neben der Kapitel-Progress */
.hero-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(10, 9, 8, 0.4);
  color: var(--ink);
  cursor: pointer;
  transition:
    border-color var(--dur-1) ease,
    background var(--dur-1) ease;
  align-self: center;
}
.hero-pause:hover {
  border-color: var(--gold);
  background: rgba(10, 9, 8, 0.7);
}

/* Footer-Reveal: Footer liegt hinter dem Content und wird am Ende
   "freigelegt". main bekommt z-index + Grund, Footer klebt dahinter. */
html.tm-motion main {
  position: relative;
  z-index: 2;
  background: var(--bg);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55);
}
html.tm-motion .footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
}

/* Parallax-Wrapper brauchen beschnittene Kanten — AUSSER dieser hier.
   2026-08-18: Der Verpackungs-Beutel ist ein FREIGESTELLTES Objekt auf
   dunklem Grund, kein formatfuellendes Bild. Das Bild wurde vom Parallax
   um 20 % ueberskaliert (scale = 1 + 0.09*2.2) und ±9 % verschoben —
   `overflow: hidden` schnitt damit die unterste Reihe Saeckchen ab.
   Jetzt: kein Beschnitt, und der Parallax laeuft ohne Ueberskalierung
   (`data-parallax-noscale`), damit nichts herausragen MUSS. */
.pdp-packaging-media {
  overflow: visible;
}
[data-parallax] {
  will-change: transform;
}

/* ProductCard: nicht-knappe Karten zeigen den Zähler dezent */
.product-card:not(.is-urgent) .pc-info .scarcity .count {
  color: var(--ink-faint);
}
.product-card:not(.is-urgent) .pc-badge {
  color: var(--ink-muted);
}

/* Hover-Micro-CTA "Ansehen —" (SKIMS-Disziplin: klein, uppercase, Farbe) */
.pc-cta {
  display: block;
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--dur-1) ease,
    transform var(--dur-2) var(--ease-lux);
}
.product-card:hover .pc-cta {
  opacity: 1;
  transform: none;
}
@media (hover: none) {
  .pc-cta {
    display: none;
  }
}

/* ============================================================
   Phase C — Duett (Complete-the-Look) + Lightbox
   ============================================================ */
.pdp-duett {
  padding: 90px 0;
  border-top: 1px solid var(--line-faint);
}
.duett-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 44px;
}
.duett-sub {
  margin: 12px auto 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-muted);
}
.duett-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  max-width: 920px;
  margin: 0 auto;
}
.duett-tile {
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--dur-1) ease;
}
.duett-tile:hover {
  border-color: var(--gold-soft);
}
.duett-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform var(--dur-3) var(--ease-lux);
}
.duett-tile:hover img {
  transform: scale(1.04);
}
.duett-name {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}
.duett-amp {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(40px, 5vw, 72px);
  color: var(--gold);
}
.duett-cta {
  text-align: center;
  margin-top: 36px;
}
.duett-scarcity {
  margin-top: 12px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--urgent-strong);
}
/* 2026-08-18 (Athena): Am Handy standen die beiden Kacheln riesig
   UNTEREINANDER — man scrollte an zwei bildschirmfuellenden Fotos vorbei und
   sah das Paar gar nicht als Paar. Jetzt bleiben sie auch am Handy
   nebeneinander, nur kleiner: das Und-Zeichen und die Beschriftungen
   schrumpfen mit, damit in den schmalen Kacheln nichts umbricht. */
@media (max-width: 700px) {
  .duett-grid {
    gap: 10px;
    max-width: 100%;
  }
  .duett-amp {
    font-size: clamp(22px, 6vw, 34px);
    text-align: center;
  }
  .duett-name {
    left: 8px;
    bottom: 8px;
    right: 8px;
    font-size: clamp(8px, 2.3vw, 10px);
    letter-spacing: 0.06em;
    line-height: 1.25;
  }
  /* Achtung: die Handy-Regeln fuer .duett-this stehen weiter unten, direkt
     hinter ihrer Grundregel — hier waeren sie wirkungslos, weil die
     Grundregel spaeter in der Datei kommt und bei gleicher Gewichtung
     gewinnt. */
  /* Der Knopftext ist laenger als der Knopf auf 320-px-Geraeten und lief
     ueber den Rand hinaus. Hier darf er umbrechen und kleiner werden. */
  .duett-cta .btn {
    width: 100%;
    white-space: normal;
    font-size: clamp(9.5px, 2.7vw, 12px);
    letter-spacing: 0.06em;
    padding-left: 14px;
    padding-right: 14px;
    line-height: 1.4;
  }
}

/* Lightbox */
.pdp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 4, 3, 0.94);
  cursor: zoom-out;
  animation: exitIn 0.35s var(--ease-lux);
}
.pdp-lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
}
.lb-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
}
.pdp-gallery .shot {
  cursor: zoom-in;
}

/* ============================================================
   Phase D — Conversion-Mikro
   ============================================================ */

/* Drawer-Upsell "Passt zur Saga" */
.drawer-upsell {
  border: 1px solid var(--line);
  background: var(--bg-soft);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.du-label {
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.du-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.du-thumb {
  flex: none;
  width: 48px;
  height: 48px;
  overflow: hidden;
  background: var(--bg-elevated);
}
.du-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.du-info {
  flex: 1;
  min-width: 0;
}
.du-name {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--ink);
  line-height: 1.1;
}
.du-price {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 2px;
}
.du-add {
  flex: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition:
    border-color var(--dur-1) ease,
    background var(--dur-1) ease,
    color var(--dur-1) ease;
}
.du-add:hover {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--bg);
}

/* Cart-Lines sliden beim Öffnen gestaffelt ein */
@keyframes tm-line-in {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
html.tm-motion .drawer.open .cart-line {
  animation: tm-line-in 0.55s var(--ease-lux) backwards;
}
html.tm-motion .drawer.open .cart-line:nth-child(2) {
  animation-delay: 70ms;
}
html.tm-motion .drawer.open .cart-line:nth-child(3) {
  animation-delay: 140ms;
}
html.tm-motion .drawer.open .cart-line:nth-child(n + 4) {
  animation-delay: 210ms;
}

/* Zwischensummen-Tick (key-Remount bei Betrag-Änderung) */
@keyframes tm-tick {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
html.tm-motion .drawer-total .val.tick {
  animation: tm-tick 0.35s var(--ease-lux);
  display: inline-block;
}

/* Add-to-Cart 2-Stage-Feedback */
.add-btn.is-added {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg);
}

/* Checkout: Step-Wechsel gleitet ein statt hart zu springen */
@keyframes ck-step-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
html.tm-motion [data-ck-anim] {
  animation: ck-step-in 0.45s var(--ease-lux);
}

/* Nav- + Footer-Links: animierte Underline (SKIMS) */
.topbar .tb-link span,
.footer a:not(.footer-logo):not(.fsocial),
.tmenu-secondary button {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left calc(100% - 0px);
  background-size: 0% 1px;
  transition:
    background-size var(--dur-1) ease,
    color var(--dur-1) ease;
}
.topbar .tb-link:hover span,
.footer a:not(.footer-logo):not(.fsocial):hover,
.tmenu-secondary button:hover {
  background-size: 100% 1px;
}

/* ============================================================
   Influencer-Promo: Banner, PDP-Preiszeile, Checkout-Code
   ============================================================ */
.promo-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 44px 10px 18px;
  background: linear-gradient(90deg, rgba(184, 152, 94, 0.16), rgba(184, 152, 94, 0.06));
  border-bottom: 1px solid var(--gold-soft);
  position: relative;
  z-index: 5;
}
.pb-star {
  color: var(--gold);
  font-size: 12px;
}
.pb-text {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-body);
}
.pb-text strong {
  color: var(--gold);
  font-weight: 600;
}
.pb-text em {
  font-style: normal;
  color: var(--ink);
  letter-spacing: 0.12em;
}
.pb-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 6px;
}
.pb-close:hover {
  color: var(--ink);
}

.price-promo {
  margin-top: 8px;
  font-size: 13px;
  color: var(--gold);
}
.price-promo strong {
  color: var(--gold);
  font-weight: 600;
}
.price-promo .pp-note {
  color: var(--ink-faint);
  font-size: 11.5px;
}

.ck-promo {
  margin-top: 20px;
}
.ck-promo-toggle {
  background: none;
  border: none;
  padding: 0;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.ck-promo-toggle:hover {
  color: var(--gold);
}
.ck-promo-form {
  display: flex;
  gap: 10px;
}
.ck-promo-form .ck-input {
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.ck-promo-btn {
  height: 50px;
  flex: none;
}
.ck-promo-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--gold-soft);
  background: rgba(184, 152, 94, 0.08);
  font-size: 13px;
  color: var(--ink-body);
}
.ck-promo-applied strong {
  color: var(--gold);
  letter-spacing: 0.1em;
}
.ck-totals .row.discount {
  color: var(--gold);
}

/* Archiv-Block (PDP) — Nummer + Name = Zugehörigkeit */
.pdp-archiv {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--gold-soft);
  background: linear-gradient(135deg, rgba(184, 152, 94, 0.09), rgba(184, 152, 94, 0.02));
}
.pdp-archiv svg {
  flex: none;
  color: var(--gold);
  margin-top: 2px;
}
.pdp-archiv-nr {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--ink);
  line-height: 1.15;
}
.pdp-archiv-txt {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* Checkout: "Wir halten Nummer N für Sie" */
.ck-hold {
  margin-top: 24px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 17px;
  font-style: italic;
  color: var(--gold);
  line-height: 1.5;
}

/* Promo-Banner: fixiert unter der TopBar, Seiten weichen aus */
.promo-banner {
  position: fixed;
  top: calc(var(--announcement) + var(--topbar));
  left: 0;
  right: 0;
  z-index: 60;
}
html.tm-has-promo .page:not(.no-pad) {
  padding-top: calc(var(--announcement) + var(--topbar) + 42px);
}
@media (max-width: 640px) {
  .promo-banner .pb-text {
    font-size: 11px;
  }
}

/* PDP — Handy: Bild links / Info rechts NEBENEINANDER (nie gestapelt),
   Bild ~55% · Info ~45%, damit Preis/Button/Text lesbar bleiben. */
@media (max-width: 640px) {
  .pdp {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
  .pdp-info {
    padding: 22px 14px 36px;
  }
  .pdp-info h1 {
    font-size: 30px;
  }
  .pdp-trust {
    grid-template-columns: 1fr;
  }
  .pdp-info .pay-row {
    flex-wrap: wrap;
  }
}

/* ============================================================
   Botschafterinnen-Programm (#/botschafter) + Danke-Recruiting
   ============================================================ */
.bp-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 70px 24px 110px;
  text-align: center;
}
.bp-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 18px;
}
.bp-title em {
  font-style: italic;
  color: var(--gold);
}
.bp-lede {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-body);
  margin: 0 auto 44px;
  max-width: 560px;
}
.bp-lede strong {
  color: var(--ink);
}
.bp-steps {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.bp-ranks-head {
  color: var(--gold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 11px;
  margin-bottom: 18px;
}
.bp-ranks {
  border-top: 1px solid var(--line);
  margin-bottom: 48px;
  text-align: left;
}
.bp-rank {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 8px 28px;
  align-items: baseline;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
}
.bp-rank-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
  color: var(--ink);
}
.bp-rank-req {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.bp-rank-perk {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-body);
  margin-top: 5px;
}
.bp-rank-rate {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .bp-rank {
    grid-template-columns: 1fr auto;
  }
  .bp-rank-mid {
    grid-column: 1 / -1;
  }
}
.bp-apply {
  border: 1px solid var(--gold-soft);
  background: var(--bg-soft);
  padding: 26px 22px 24px;
  margin-bottom: 40px;
}
.bp-apply-title {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 8px;
}
.bp-apply-text {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-body);
  margin: 0 auto 18px;
  max-width: 440px;
}
.bp-legal {
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--ink-faint);
  margin: 18px auto 0;
  max-width: 520px;
}
/* Bewerbungsformular (2026-08-19) — gleiche Feld-Optik wie die Kasse */
.bp-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 440px;
  margin: 0 auto;
  text-align: left;
}
.bp-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) {
  .bp-form-row {
    grid-template-columns: 1fr;
  }
}
.bp-code-vorschau {
  font-size: 12.5px;
  color: var(--ink-body);
}
.bp-code-vorschau strong {
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: 0.1em;
  color: var(--gold);
}
.bp-code-vorschau span {
  color: var(--ink-faint);
}
.bp-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-body);
  cursor: pointer;
}
.bp-check input {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  flex: 0 0 auto;
  accent-color: var(--gold);
}
.bp-check a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bp-form-fehler {
  font-size: 12.5px;
  color: var(--error, #c96a5f);
}
.bp-form-btn {
  margin-top: 6px;
}
.bp-form-danke {
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  padding: 18px 20px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-body);
  max-width: 440px;
  margin: 0 auto;
  text-align: left;
}
.bp-form-danke strong {
  color: var(--ink);
}
.dk-amb {
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  padding: 24px 22px;
  margin-bottom: 32px;
}
.dk-amb-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.dk-amb-text {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-body);
  margin: 0 auto 16px;
  max-width: 460px;
}
.dk-amb-code {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 38px);
  letter-spacing: 0.18em;
  color: var(--gold);
  border: 1px dashed var(--gold-soft);
  padding: 10px 26px 8px;
  margin: 4px 0 14px;
}

/* ==================================================================
   FOOTER — Award-Level Gap-Fixes (2026-07-15)
   Zone 1 Vorkaufsrecht-Newsletter · Zone 2 Trust-Strip · Atelier-Adresse
   · XL-Wortmarke-Wasserzeichen · Icon-Hover-Refinement
   Design-DNA: bg #050403, --gold #b8985e, siehe Obsidian „Footer Design Patterns"
   ================================================================== */

/* ZONE 1 — Innerer Kreis (Newsletter-Band) */
/* ZONE 2 — Trust-Strip */
.footer-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(20px, 4vw, 48px);
  margin-top: clamp(20px, 3vw, 30px);
  padding-top: clamp(18px, 2.5vw, 26px);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.footer-trust li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-body);
}
.footer-trust li i { color: var(--gold); font-style: normal; font-size: 11px; }

/* Atelier-Adresse (Provenienz-Trust, AT-Muster) */

/* ZONE 5 — XL-Wortmarke als Wasserzeichen.
   SVG statt Text: skaliert per viewBox exakt auf die Container-Breite,
   `textLength` zwingt das Wort auf volle Breite → kann NIE abgeschnitten
   werden (weder das „R" rechts noch auf sehr schmalen Handys). */
.footer-watermark {
  display: block;
  width: 100%;
  height: auto;
  margin: clamp(24px, 5vh, 56px) 0 -0.06em;
  user-select: none;
  pointer-events: none;
  overflow: visible;
}
.footer-watermark text {
  font-family: var(--font-display);
  font-weight: 700;
}

/* Icon-Refinement 2026-08-10 — die Gold-Plates sind raus (siehe
   .fmark / .fsocial oben). Was hier bleibt, ist nur noch der Rhythmus:
   Crest enger, VIP-Band gefasst, Wasserzeichen leiser. */
/* Wasserzeichen: leiser und flacher — es ist die Signatur, nicht die
   Schlagzeile. Vorher lag es als massiver Block unter einer Leerfläche. */
.footer-watermark {
  margin-top: clamp(30px, 4vh, 48px);
  opacity: 0.75;
}
.footer-bottom {
  margin-top: clamp(20px, 2.5vh, 30px);
}

@media (max-width: 720px) {
  .footer-trust { gap: 10px 22px; }
  .footer-trust li { font-size: 11.5px; }
}

/* ==================================================================
   FOOTER-REVEAL DEAKTIVIERT (2026-07-15) — Bugfix „Footer abgeschnitten"
   Der Reveal (main z2 über sticky Footer z1, bottom:0) zeigt nur die
   unteren 100vh des Footers. Der Footer ist mit Newsletter+Trust+Crest
   IMMER höher als der Viewport (1816–2510px vs 800–1080px) → oberer Teil
   (Newsletter, Marken-Monument) war auf ALLEN Geräten unerreichbar,
   auf Mobile am auffälligsten. Statischer Footer = alles scrollbar.
   Award-Footer-Regel: Vollständigkeit vor Effekt.
   ================================================================== */
html.tm-motion .footer {
  position: static;
  bottom: auto;
}
html.tm-motion main {
  box-shadow: none;
}
.bp-legal-link {
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.bp-legal-link:hover {
  color: var(--gold);
}

/* ============================================================
   FounderSection — Die Sattlerin (Realness/Founder-Face)
   ============================================================ */
.founder {
  border-top: 1px solid var(--line);
  background: var(--bg-elevated);
}
.founder-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.founder-portrait {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line-strong);
  overflow: hidden;
  background: var(--bg-card);
}
.founder-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.15) contrast(1.02);
}
.founder-monogram {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(184, 152, 94, 0.08), transparent 60%),
    var(--bg-card);
}
.founder-monogram .serif {
  font-size: clamp(64px, 10vw, 128px);
  letter-spacing: 0.04em;
  color: var(--gold);
  line-height: 1;
}
.founder-monogram-year {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--ink-muted);
}
.founder-eyebrow {
  font-size: 11px;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--ink-muted);
  margin-bottom: 24px;
}
.founder-quote {
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
  font-style: italic;
  margin: 0;
  max-width: 22ch;
}
.founder-sign {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.founder-sign-name {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--gold);
}
.founder-sign-role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
@media (max-width: 860px) {
  .founder-grid { grid-template-columns: 1fr; gap: 32px; }
  .founder-portrait { max-width: 320px; }
}

/* ============================================================
   AttributionSurvey (Danke-Seite) — "Woher kennen Sie uns?"
   ============================================================ */
.dk-attr {
  margin: 28px 0 8px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  background: var(--bg-elevated);
}
.dk-attr-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 12px;
}
.dk-attr-q {
  font-size: 16px;
  color: var(--ink-strong);
  margin-bottom: 16px;
}
.dk-attr-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.dk-attr-btn {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 9px 14px;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.dk-attr-btn:hover {
  color: var(--bg);
  background: var(--gold);
  border-color: var(--gold);
}

/* ============================================================
   Bundle-Note · SagaPost · PDP-Value (Kliesch-Welle B/C)
   ============================================================ */
.bundle-note {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
  line-height: 1.5;
}

/* SagaPost — Newsletter + WhatsApp-Drop */
.sagapost {
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.sagapost-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
.sagapost-h {
  font-size: clamp(28px, 3.2vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-strong);
  margin: 0 0 18px;
}
.sagapost-lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 46ch;
}
.sagapost-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sagapost-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.sagapost-input {
  flex: 1 1 220px;
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  color: var(--ink-strong);
  padding: 14px 16px;
  font-size: 15px;
  font-family: var(--font-body);
}
.sagapost-input:focus {
  outline: none;
  border-color: var(--gold);
}
.sagapost-submit { white-space: nowrap; }
.sagapost-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 12px 16px;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
  width: fit-content;
}
.sagapost-wa:hover { color: var(--gold); border-color: var(--gold); }
.sagapost-done {
  font-size: 15px;
  color: var(--gold);
  line-height: 1.6;
}
@media (max-width: 860px) {
  .sagapost-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* PDP — Was in €X steckt */
.pdp-value {
  margin-top: 28px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  background: var(--bg-elevated);
}
.pdp-value-head {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.pdp-value-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pdp-value-list li {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-muted);
  padding-left: 16px;
  position: relative;
}
.pdp-value-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--gold);
}
.pdp-value-list li span {
  color: var(--ink-strong);
}

/* ============================================================
   Wishlist · PressStrip · IG-Social (Welle C)
   ============================================================ */

/* PressStrip — "Gesehen bei" (nur mit echten Einträgen) */
.press-strip { border-top: 1px solid var(--line); background: var(--bg); }
.press-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  margin-bottom: 28px;
}
.press-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 5vw, 64px);
}
.press-item { text-align: center; }
.press-item img { height: 26px; width: auto; opacity: 0.75; filter: grayscale(1); }
.press-name {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.press-quote {
  margin-top: 8px;
  font-size: 12px;
  font-style: italic;
  color: var(--ink-muted);
  max-width: 24ch;
}

/* IG/TikTok Social-CTA in "Folge der Saga" */
.ig-social-cta { display: flex; gap: 14px; margin-top: 16px; }
.ig-social-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  text-decoration: none;
  border: 1px solid var(--line-strong);
  padding: 8px 14px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.ig-social-link:hover { color: var(--gold); border-color: var(--gold); }

/* ============================================================
   SABRI-LAYER (2026-07-25) — Preiserhöhungs-Timer, Decoy-Buy-Box,
   Der erste Auftritt, Codex (HVCO), Danke-OTO, Innerer Kreis
   ============================================================ */

/* --- PDP: Preiserhöhungs-Countdown ---------------------------- */
.pdp-raise {
  margin-top: 22px;
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--gold);
  background: linear-gradient(135deg, rgba(184, 152, 94, 0.08), rgba(184, 152, 94, 0.02));
  padding: 18px 20px;
}
.pdp-raise .raise-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.pdp-raise .raise-prices {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.pdp-raise .raise-col { display: flex; flex-direction: column; gap: 4px; }
.pdp-raise .raise-col .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.pdp-raise .raise-col .val {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink-body);
}
.pdp-raise .raise-col.future .val {
  font-size: 30px;
  color: var(--ink-strong);
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
}
.pdp-raise .raise-chip {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--urgent-strong);
  border: 1px solid rgba(217, 119, 87, 0.45);
  padding: 2px 7px;
  transform: translateY(-3px);
}
.pdp-raise .raise-arrow { color: var(--ink-faint); padding-bottom: 6px; }
.pdp-raise .raise-note {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-body);
}
.pdp-raise .raise-note strong { color: var(--gold); }
.pdp-raise .raise-count {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.pdp-raise .rc-cell { display: flex; flex-direction: column; align-items: center; min-width: 44px; }
.pdp-raise .rc-cell b {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 21px;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.pdp-raise .rc-cell i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 3px;
}
.pdp-raise .rc-sep { color: var(--ink-faint); font-size: 18px; transform: translateY(-7px); }

/* --- PDP: Decoy-Buy-Box --------------------------------------- */
.buyopts { display: flex; flex-direction: column; gap: 10px; }
.buyopt {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid var(--line-strong);
  padding: 14px 16px;
  cursor: pointer;
  color: var(--ink-body);
  transition: border-color var(--dur-1) ease, background var(--dur-1) ease;
}
.buyopt:hover { border-color: var(--ink-muted); }
.buyopt.active {
  border-color: var(--gold);
  background: rgba(184, 152, 94, 0.06);
  box-shadow: inset 0 0 0 1px var(--gold);
}
.buyopt .bo-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  /* Falls Etikett + „einzeln €…" auf schmalen Handys nicht in eine
     Zeile passen: Preis bricht sauber in die zweite Zeile, statt dass
     die Box überläuft. */
  flex-wrap: wrap;
}
.buyopt .bo-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.buyopt.active .bo-label { color: var(--ink-strong); }
.buyopt .bo-price {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--ink-strong);
  white-space: nowrap;
}
.buyopt .bo-sub {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.buyopt .bo-note {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--gold);
  border: 1px solid rgba(184, 152, 94, 0.4);
  padding: 3px 8px;
}

/* --- PDP: Der erste Auftritt ---------------------------------- */
.pdp-auftritt {
  padding: var(--s-section) 0;
  border-top: 1px solid var(--line);
}
.auftritt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.auftritt-media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg-elevated);
}
.auftritt-media video,
.auftritt-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.auftritt-copy .pr-title { margin-top: 14px; }
.auftritt-moments { margin-top: 34px; display: flex; flex-direction: column; }
.am-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.am-row:last-child { border-bottom: 1px solid var(--line); }
.am-k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 3px;
}
.am-t { font-size: 14.5px; line-height: 1.65; color: var(--ink-body); margin: 0; }
@media (max-width: 900px) {
  .auftritt-grid { grid-template-columns: 1fr; }
  .auftritt-media { aspect-ratio: 4 / 5; }
  .am-row { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
}

/* --- Duett: "Diese Heldin"-Marker ----------------------------- */
.duett-tile { position: relative; }
.duett-this {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(10, 9, 8, 0.72);
  border: 1px solid rgba(184, 152, 94, 0.5);
  padding: 5px 9px;
  backdrop-filter: blur(4px);
}

/* 2026-08-18 (Athena): Seit die beiden Kacheln am Handy nebeneinander stehen,
   sind sie nur noch rund 130 px breit. Mit der urspruenglichen Sperrung nahm
   das Schildchen fast die ganze Kachel ein und brach um. */
@media (max-width: 700px) {
  .duett-this {
    top: 6px;
    left: 6px;
    font-size: 7px;
    letter-spacing: 0.02em;
    padding: 2px 4px;
    white-space: nowrap;
  }
}

/* --- PDP: Codex-Nudge ----------------------------------------- */
.pdp-codex { padding: 0 0 var(--s-section); }
.pdp-codex-inner {
  max-width: 780px;
  text-align: center;
  border: 1px solid var(--line-strong);
  padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px);
}
.pc-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 16px;
}
.pc-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 42px);
  color: var(--ink-strong);
  line-height: 1.1;
}
.pc-title em { font-style: italic; color: var(--gold); }
.pc-lede {
  max-width: 54ch;
  margin: 16px auto 26px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-body);
}

/* --- Codex-Seite ---------------------------------------------- */
.codex-hero {
  padding: clamp(70px, 10vw, 130px) 0 clamp(40px, 6vw, 70px);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.codex-title {
  font-size: clamp(44px, 7vw, 92px);
  line-height: 1.02;
  color: var(--ink-strong);
  margin-top: 18px;
}
.codex-title em { font-style: italic; color: var(--gold); }
.codex-lede {
  max-width: 62ch;
  margin: 22px auto 0;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-body);
}
.codex-body { max-width: 900px; padding-bottom: var(--s-section); }
.codex-chapter {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(40px, 6vw, 64px) 0;
  border-bottom: 1px solid var(--line);
}
.cx-roman {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 58px);
  color: var(--gold);
  line-height: 1;
}
.cx-h {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  color: var(--ink-strong);
  line-height: 1.15;
  margin-bottom: 18px;
}
.cx-p { font-size: 15px; line-height: 1.75; color: var(--ink-body); margin: 0 0 14px; }
.cx-tip {
  margin-top: 20px;
  border-left: 2px solid var(--gold);
  background: rgba(184, 152, 94, 0.06);
  padding: 14px 18px;
}
.cx-tip-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 7px;
}
.cx-tip p { font-size: 14px; line-height: 1.65; color: var(--ink); margin: 0; }
@media (max-width: 640px) {
  .codex-chapter { grid-template-columns: 1fr; gap: 10px; }
}
.codex-pdf {
  margin-top: clamp(48px, 7vw, 80px);
  border: 1px solid var(--line-strong);
  padding: clamp(32px, 5vw, 52px);
  text-align: center;
}
.cxp-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  color: var(--ink-strong);
}
.cxp-lede {
  max-width: 48ch;
  margin: 12px auto 22px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-body);
}
.cxp-form {
  display: flex;
  gap: 10px;
  max-width: 460px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.cxp-input {
  flex: 1 1 240px;
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  padding: 13px 16px;
  font-size: 14px;
  font-family: var(--font-body);
}
.cxp-input:focus { outline: none; border-color: var(--gold); }
.cxp-done { color: var(--gold); font-size: 14.5px; }
.cxp-privacy {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.codex-cta { text-align: center; margin-top: clamp(56px, 8vw, 96px); }
.cxc-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 16px;
}
.cxc-title {
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.08;
  color: var(--ink-strong);
}
.cxc-title em { font-style: italic; color: var(--gold); }
.cxc-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 30px;
  flex-wrap: wrap;
}

/* --- Danke-Seite: One-Click-Nachtrag (OTO) -------------------- */
.dk-oto {
  margin-top: 26px;
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--gold);
  background: var(--bg-elevated);
  padding: 24px;
  text-align: left;
}
.dk-oto-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.dk-oto-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 28px);
  color: var(--ink-strong);
  margin-top: 10px;
}
.dk-oto-row { display: flex; gap: 16px; margin: 18px 0; align-items: center; }
.dk-oto-thumb {
  width: 84px;
  height: 84px;
  flex: 0 0 84px;
  overflow: hidden;
  background: var(--bg-soft);
}
.dk-oto-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dk-oto-name { font-size: 14px; color: var(--ink); }
.dk-oto-price {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink-strong);
  margin-top: 3px;
}
.dk-oto-note { font-size: 12.5px; line-height: 1.55; color: var(--ink-muted); margin-top: 6px; }
.dk-oto-done {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--gold);
  font-size: 14px;
  border: 1px solid rgba(184, 152, 94, 0.4);
  padding: 13px 16px;
  justify-content: center;
}
.dk-oto-legal {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--ink-faint);
}

/* --- Warenkorb / Kasse: Preis-Einfrieren-Hinweis -------------- */
.drawer-raise,
.ck-raise {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--gold);
  border: 1px solid rgba(184, 152, 94, 0.35);
  background: rgba(184, 152, 94, 0.05);
  padding: 10px 13px;
}

/* --- Home: Der innere Kreis ----------------------------------- */
.circle-section { border-top: 1px solid var(--line); }
.circle-head { text-align: center; max-width: 760px; margin: 0 auto; }
.circle-h {
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.05;
  color: var(--ink-strong);
  margin-top: 16px;
}
.circle-h em { font-style: italic; color: var(--gold); }
.circle-lede {
  margin: 18px auto 0;
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-body);
}
.circle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(36px, 5vw, 56px);
}
.circle-card {
  border: 1px solid var(--line-strong);
  padding: clamp(24px, 3vw, 38px);
  background: var(--bg-elevated);
}
.circle-card .cc-roman {
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--gold);
  line-height: 1;
}
.circle-card .cc-title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-strong);
  margin: 16px 0 10px;
}
.circle-card p { font-size: 13.5px; line-height: 1.65; color: var(--ink-body); margin: 0; }
.circle-cta { text-align: center; margin-top: clamp(32px, 4vw, 48px); }
.circle-note {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
@media (max-width: 900px) {
  .circle-grid { grid-template-columns: 1fr; }
}

/* --- Mobile: schmale PDP-Info-Spalte (Side-by-side-Layout ≤640) —
   Timer und Buy-Box kompakt, sonst H-Overflow ---------------------- */
@media (max-width: 640px) {
  .pdp-raise { padding: 12px 12px 14px; }
  .pdp-raise .raise-prices { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pdp-raise .raise-arrow { display: none; }
  .pdp-raise .raise-col .val { font-size: 17px; }
  .pdp-raise .raise-col.future .val { font-size: 21px; gap: 6px; flex-wrap: wrap; }
  .pdp-raise .raise-chip { font-size: 10px; padding: 1px 5px; }
  .pdp-raise .raise-count {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }
  .pdp-raise .rc-sep { display: none; }
  .pdp-raise .rc-cell { min-width: 0; }
  .pdp-raise .rc-cell b { font-size: 15px; }
  .pdp-raise .rc-cell i { font-size: 8px; letter-spacing: 0.1em; }
  .buyopt { padding: 11px 12px; }
  .buyopt .bo-head { flex-wrap: wrap; gap: 6px; }
  .buyopt .bo-label { font-size: 10.5px; }
  .buyopt .bo-price { font-size: 16px; }
  .buyopt .bo-sub { font-size: 11.5px; }
}

/* ==================================================================
   COOKIE-CONSENT (2026-08-10) — Oberfläche zu tm-consent.js
   Leiste unten statt Vollbild-Modal: ein Layer, den man nur durch
   Zustimmen loswird, ist nach Art. 7 Abs 4 DSGVO angreifbar.
   „Nur notwendige" und „Alle akzeptieren" teilen sich .cc-btn — die
   optische Gleichwertigkeit ist Vorgabe, nicht Geschmack.
   ================================================================== */
.cc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0; /* Rückfall für alte Browser */
  z-index: 9000;
  padding: clamp(12px, 2vw, 22px);
  /* Home-Indicator / Gestenleiste nicht überdecken */
  padding-bottom: max(clamp(12px, 2vw, 22px), env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  animation: cc-rise 0.5s var(--ease-lux) both;
}
/* `bottom: 0` hängt am LAYOUT-Viewport. Auf dem Handy ist der höher als
   das, was man sieht (ausgefahrene Browser-Leiste) — gemessen 879 zu 844,
   die Leiste lag also 35 px unter dem sichtbaren Rand. Deshalb vom oberen
   Rand aus über die volle KLEINE Viewporthöhe aufspannen und den Inhalt
   unten ausrichten: dann sitzt er immer im sichtbaren Bereich. */
@supports (height: 100svh) {
  .cc {
    top: 0;
    bottom: auto;
    height: 100svh;
  }
}
@keyframes cc-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cc {
    animation: none;
  }
}
.cc-panel {
  pointer-events: auto;
  width: min(760px, 100%);
  max-height: min(80vh, 720px);
  max-height: min(80svh, 720px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.6vw, 32px)
    clamp(16px, 2vw, 24px);
  border: 1px solid rgba(184, 152, 94, 0.34);
  border-radius: 2px;
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(184, 152, 94, 0.09), transparent 62%),
    #0d0b09;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.72);
}
.cc-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.cc-title {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.2;
  color: var(--ink-strong);
  margin: 0 0 10px;
}
.cc-title:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 6px;
}
.cc-text {
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-body);
  margin: 0;
  max-width: 62ch;
}
.cc-text em {
  font-style: normal;
  color: var(--ink);
}

/* Kategorien */
.cc-cats {
  list-style: none;
  margin: clamp(16px, 2vw, 22px) 0 0;
  padding: clamp(14px, 1.8vw, 18px) 0 0;
  border-top: 1px solid rgba(184, 152, 94, 0.16);
}
.cc-cat + .cc-cat {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.cc-cat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.cc-cat-head input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.cc-switch {
  flex: none;
  width: 38px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(184, 152, 94, 0.4);
  background: rgba(255, 255, 255, 0.04);
  position: relative;
  transition:
    background var(--dur-1) ease,
    border-color var(--dur-1) ease;
}
.cc-switch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink-muted);
  transform: translateY(-50%);
  transition:
    left var(--dur-1) var(--ease-lux),
    background var(--dur-1) ease;
}
.cc-cat-head input:checked + .cc-switch {
  background: rgba(184, 152, 94, 0.3);
  border-color: var(--gold);
}
.cc-cat-head input:checked + .cc-switch::after {
  left: 21px;
  background: var(--gold);
}
.cc-cat-head input:disabled + .cc-switch {
  opacity: 0.55;
  cursor: default;
}
.cc-cat-head input:focus-visible + .cc-switch {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}
.cc-cat-label {
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.cc-cat-badge {
  margin-left: 10px;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cc-cat-text {
  margin: 8px 0 0 50px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 60ch;
}

/* Aktionen — Ablehnen und Akzeptieren sind absichtlich identisch */
.cc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: clamp(18px, 2.2vw, 24px);
}
.cc-btn {
  flex: 1 1 190px;
  min-height: 46px;
  padding: 12px 20px;
  border: 1px solid var(--gold);
  border-radius: 1px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background var(--dur-1) ease,
    color var(--dur-1) ease;
}
.cc-btn:hover {
  background: rgba(184, 152, 94, 0.16);
}
.cc-btn:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}
.cc-btn--save {
  flex-basis: 100%;
  border-color: rgba(184, 152, 94, 0.45);
  color: var(--ink-body);
}
.cc-link {
  flex: 0 0 auto;
  background: none;
  border: 0;
  padding: 6px 2px;
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cc-link:hover {
  color: var(--ink);
}
.cc-link:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}
.cc-legal {
  margin: 14px 0 0;
  font-size: 11px;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 10px;
}
.cc-legal a {
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cc-legal a:hover {
  color: var(--gold);
}
.cc-legal i {
  font-style: normal;
  opacity: 0.6;
}

@media (max-width: 560px) {
  .cc-panel {
    max-height: 84vh;
    max-height: 84svh;
  }
  .cc-btn {
    flex-basis: 100%;
  }
  .cc-cat-text {
    margin-left: 0;
  }
}

/* ============================================================
   SHOP-RASTER 3×3 (2026-08-15, Wunsch Athena)
   Vorher: Desktop 4 Spalten, Handy 1 Spalte = 12 Bildschirme
   Scrollen für neun Taschen. Jetzt 3 nebeneinander, Handy 2.
   Steht bewusst am Dateiende: die .shop-grid-Regeln weiter oben
   existieren doppelt in mehreren Media-Queries — nur hier unten
   gewinnt die Kaskade zuverlässig.
   ============================================================ */
.shop-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* Bildformat quadratisch statt 4/5: drei Spalten machen die Karten
   breiter, mit Hochformat würde jede Reihe ~120px höher. Quadratisch
   bleibt die Seite trotz 3×3 kürzer als vorher mit vier Spalten.
   (object-fit: cover — die Taschen sitzen weiterhin mittig im Bild.) */
.shop-grid .product-card .pc-media {
  aspect-ratio: 1 / 1;
}

/* Karten-Textblock gestrafft. */
.shop-grid .product-card .pc-info {
  padding: 16px 18px 20px;
  gap: 4px;
}
.shop-grid .product-card .pc-info .name {
  font-size: 21px;
}
.shop-grid .product-card .pc-info .scarcity {
  margin-top: 7px;
}

/* Tablet: bleibt bei 3 — die Taschen sind hochformatig,
   drei passen bis hinunter zu ~640px gut nebeneinander. */
@media (max-width: 1024px) {
  .shop-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Handy: 2 Spalten. Drei wären bei 390px nur ~125px breit —
   dann erkennt man die Tasche nicht mehr, und genau die soll
   ja verkaufen. */
@media (max-width: 640px) {
  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .shop-grid .product-card .pc-media {
    aspect-ratio: 4 / 5;
  }
  .shop-grid .product-card .pc-info {
    padding: 12px 12px 16px;
  }
  /* Akt III auf dem Handy: nur die ersten vier — bei 2 Spalten sind das
     zwei volle Reihen. Die Karten 5 und 6 gibt es nur auf Desktop und
     Tablet, wo das dreispaltige Raster sonst halb leer bliebe. */
  .shop-grid--akt3 .product-card:nth-child(n + 5) {
    display: none;
  }
  .shop-grid .product-card .pc-info .name {
    font-size: 17px;
  }
  .shop-grid .product-card .pc-info .role {
    font-size: 9px;
    letter-spacing: 0.28em;
  }
}

/* ============================================================
   HANDY: MENÜ-RASTER + FUSSZEILE (2026-08-15, Wunsch Athena)

   1) Menü — die Heldinnen lagen als quer wischbare Reihe (1902px
      Scrollbreite bei 370px Fenster): man sah zwei Taschen, die
      übrigen sieben blieben unsichtbar. Jetzt 3×3-Raster.
   2) Fußzeile — war 2641px hoch, davon rund 1200px allein für die
      einspaltig gestapelten Linklisten. Jetzt zweispaltig.
   Steht am Dateiende, weil die Ursprungsregeln in mehreren
   Media-Queries verteilt sind.
   ============================================================ */
@media (max-width: 1040px) {
  /* --- 1) Heldinnen als Raster statt Wisch-Reihe --- */
  .tmenu-grid {
    grid-auto-flow: row;
    /* minmax(0,1fr) statt 1fr: sonst zieht der Karteninhalt die Spalten
       auf unterschiedliche Breiten (gemessen 141/136/110px) und die
       breite „Alle ansehen"-Kachel sprengt das Raster um 38px. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    grid-template-rows: none;
    overflow-x: visible;
    scroll-snap-type: none;
    align-items: start;
    gap: 12px 10px;
    /* Die Basisregel setzt flex:1 — das staucht das Raster auf die
       Resthöhe (339px), wodurch die 146px hohen Karten ineinander
       liefen. Natürliche Höhe nehmen, scrollen macht .tmenu-inner. */
    flex: none;
    min-height: auto;
  }
  .tmcard {
    min-width: 0;
  }
  .tmcard {
    scroll-snap-align: none;
  }
  /* „Alle ansehen" über die volle Breite unter das Raster */
  .tmcard--all {
    grid-column: 1 / -1;
    align-self: auto;
  }
  /* Das Raster wird höher als der Bildschirm — der Menü-Inhalt muss
     also senkrecht scrollen dürfen, sonst sind die unteren Taschen
     nicht erreichbar. Lenis ist bei offenem Menü gestoppt, daher
     greift natives Scrollen hier sauber. */
  .tmenu-inner {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Balken ausblenden — gescrollt wird per Wischen. Im Desktop-Browser
       zeichnet `overflow:auto` sonst eine breite helle Leiste quer durch
       das Menue; auf echten Geraeten liegt sie ohnehin nur kurz ueber
       dem Inhalt. Scrollen bleibt vollstaendig erhalten. */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .tmenu-inner::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
  .tmenu-gallery {
    justify-content: flex-start;
  }
  /* Beschriftung kompakter — sonst frisst der Text mehr Platz als
     die Taschenfotos, die eigentlich verkaufen sollen. */
  .tmcard-name {
    font-size: 13px;
  }
  .tmcard-role {
    font-size: 8px;
    letter-spacing: 0.18em;
  }
}

@media (max-width: 560px) {
  /* --- 2a) Linklisten zweispaltig statt untereinander --- */
  .footer-cols {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-xl) var(--s-lg);
  }
  .fcol--saga {
    grid-column: 1 / -1;
  }
  /* „Recht" stand als vierte Spalte allein in der letzten Reihe, mit
     leerer Nachbarspalte daneben und sieben Punkten untereinander.
     Über die volle Breite und selbst zweispaltig sitzt es bündig. */
  .footer-cols .fcol:last-child {
    grid-column: 1 / -1;
  }
  .footer-cols .fcol:last-child ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--s-lg);
    align-content: start;
  }

  /* --- 2b) Zahlungs- und Versandzeichen waren briefmarkengroß.
       Größe kommt je Marke als --mw/--mh aus dem JSX; über calc()
       skaliert alles mit, ohne die Seitenverhältnisse zu zerstören. */
  .fmark {
    width: calc(var(--mw) * 1.35);
    height: calc(var(--mh) * 1.35);
  }
  .fmark-row {
    justify-content: flex-start;
    gap: 16px 18px;
  }
  .footer-marks {
    align-items: flex-start;
  }
  /* Die Beschriftungen standen mittig über linksbündigen Zeichen —
     .fmark-group erbt align-items:center aus der Grundregel. */
  .fmark-group {
    align-items: flex-start;
  }

  /* --- 2c) Unterste Zeile: „Weltweiter Versand |" brach um und ließ
       den Trennstrich allein am Zeilenende hängen. Jetzt gestapelt
       und linksbündig, Trennstrich weg. */
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
  }
  .footer-bottom .ship {
    flex-wrap: wrap;
    gap: 6px;
  }
  .ship-rule {
    display: none;
  }
}

/* ============================================================
   FUSSZEILE TABLET (561–1024px) — 2026-08-15
   Vorher galt hier die alte 2-Spalten-Regel mit inhaltsbreiten
   Listen: „Saga" spannte über die volle Breite, ihre Namen klebten
   aber in der linken Hälfte; „Recht" stand allein in einer Reihe.
   Rechts blieb jeweils die halbe Fläche leer.
   Jetzt: Saga über die volle Breite mit DREI gestreckten Spalten,
   darunter Atelier | Service | Recht nebeneinander — randvoll.
   ============================================================ */
@media (min-width: 561px) and (max-width: 1024px) {
  .footer-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-xl) var(--s-lg);
  }
  .fcol--saga {
    grid-column: 1 / -1;
  }
  /* Gestreckt statt max-content — sonst sammelt sich alles links. */
  .fcol-split {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: 0 var(--s-lg);
  }
  /* „Recht" sitzt als dritte Spalte in der unteren Reihe, nicht mehr
     allein in einer eigenen. */
  .footer-cols .fcol:last-child {
    grid-column: auto;
  }

  /* Zahlungs- und Versandzeichen etwas größer als am Desktop-Raster,
     damit sie auf dem Tablett nicht verloren wirken. */
  .fmark {
    width: calc(var(--mw) * 1.2);
    height: calc(var(--mh) * 1.2);
  }
}

/* ============================================================
   KONTAKT — die zwei Trachten-Modelle auch auf Handy/Tablett
   (2026-08-15). Vorher: `@media (max-width:980px){.kt-mann{display:none}}`
   — auf dem Desktop flankieren sie das Formular, auf dem Handy waren
   sie schlicht weg.
   Nebeneinander STATT flankierend, weil bei 390px kein Platz ist:
   das Formular allein braucht 350px. Sie sitzen jetzt als Paar unter
   den Kontaktdaten, wo bisher nur schwarze Flaeche stand.
   ============================================================ */
@media (max-width: 980px) {
  /* Modelle links und rechts wie am Desktop — sie stehen HINTER dem
     Inhalt (z-index 1 gegen 2) und ragen an den Raendern teils aus dem
     Bild, genau wie in der grossen Ansicht. Etwas gedimmt, damit der
     Text darueber lesbar bleibt. */
  .kt-mann {
    display: block;
    position: absolute;
    top: 11%;
    transform: none;
    width: 44vw;
    max-width: 300px;
    height: auto;
    /* Weiter nach aussen und gedimmt: der Fliesstext laeuft sonst ueber
       die Koerper und wird schwer lesbar. So rahmen sie den Inhalt,
       ohne ihn zu stoeren. */
    opacity: 0.5;
    z-index: 1;
  }
  .kt-mann-left {
    left: -17vw;
  }
  .kt-mann-right {
    right: -17vw;
    transform: scaleX(-1);
  }
  /* Der Text bekommt einen weichen dunklen Grund, damit er auf jedem
     Untergrund sicher lesbar bleibt (Barrierefreiheit/BaFG). */
  .kt-lede,
  .kt-title,
  .kt-eyebrow {
    position: relative;
    text-shadow: 0 2px 14px rgba(10, 9, 8, 0.95),
      0 0 30px rgba(10, 9, 8, 0.85);
  }
}

/* ============================================================
   PDP-GALERIE — Miu-Miu-Prinzip (Athena, 2026-08-16)
   ------------------------------------------------------------
   Ersetzt den Bilderstapel. `.pdp-gallery` ist nur noch die
   Scroll-Spur; darin klebt `.pg-stage` mit EINEM grossen Bild,
   der Bildunterschrift und den Punkten. Die Aufnahmen liegen
   uebereinander und werden ueberblendet — das Bild wechselt an
   derselben Stelle, waehrend die Kaufspalte rechts stehen bleibt.
   `object-fit: contain`, weil unsere Fotos gemischt 1:1 und
   quer sind: mit `cover` schnitt der hochformatige Rahmen die
   Taschen ab (man sah nur den Henkel).
   ============================================================ */
.pdp-gallery {
  --pg-top: calc(var(--announcement) + var(--topbar));
  --pg-step: 64vh; /* Scrollweg pro Aufnahme */
  position: relative;
  height: calc(var(--shots, 6) * var(--pg-step));
  background: var(--bg);
  border-right: 1px solid var(--line);
}
.pg-stage {
  position: sticky;
  top: var(--pg-top);
  height: calc(100vh - var(--pg-top));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pg-rail {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
.pg-shot {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 620ms;
}
.pg-shot.is-on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}
.pg-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: zoom-in;
}
/* Das M-Signet ist ein Freisteller, kein Produktfoto. */
.pg-shot.is-plaque {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at center, #1a1816 0%, #050403 100%);
}
.pg-shot.is-plaque img {
  width: min(220px, 42%);
  height: auto;
  object-fit: contain;
  cursor: default;
  filter: drop-shadow(0 0 40px rgba(184, 152, 94, 0.4));
}
/* Bildunterschrift + Punkte — UNTER dem Bild, nicht mehr darauf. */
.pg-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 28px 18px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.pg-caption {
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pg-dots {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}
/* 2026-08-19: Der sichtbare Punkt (7px) lebt jetzt im ::before, der
   Knopf selbst ist 24×24 — Mindest-Tapflaeche (target-size, Audit),
   ohne dass sich die Optik aendert. */
.pg-dot {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.pg-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 7px;
  height: 7px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: none;
  transition:
    background 300ms ease,
    border-color 300ms ease,
    transform 300ms ease;
}
.pg-dot:hover::before {
  border-color: var(--gold);
}
.pg-dot.is-on::before {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.25);
}

/* ------------------------------------------------------------------
   Handy / kleines Tablet — 1:1 wie miumiu.com auf dem Handy.
   Dort nachgemessen (390×844, 390×1000, 430×932):
     · Das Bildfeld ist ein EIGENES Scrollfenster, nicht die Seite.
       Hoehe = 100vh − 269px, davon 56px Kopfleiste → **213px vom
       Produkttext bleiben unten sichtbar**. Genau diese 213 uebernehmen
       wir, nur mit unserer Kopfleistenhoehe gerechnet.
     · Darin liegen die Aufnahmen UNTEREINANDER: die erste fuellt das
       Fenster (h-full), alle weiteren im Format 4/5, 4px Abstand.
     · Die Punkte stehen SENKRECHT unten links IM Bild (4px, rund),
       keine Bildunterschrift.
   Gescrollt wird also erst durch die Bilder, dann laeuft die Seite
   weiter (natives Scroll-Chaining) — genau wie bei ihnen.
   Grenze 1023px = exakt ihre Grenze (Tailwind `lg:` greift ab 1024).
   ------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .pdp {
    grid-template-columns: minmax(0, 1fr);
  }
  .pdp-gallery {
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .pg-stage {
    position: relative;
    /* top MUSS zurueckgesetzt werden: die Grundregel klebt die Buehne mit
       `top: var(--pg-top)` fest. Bleibt der Wert stehen, schiebt
       `position: relative` die ganze Buehne um die Kopfleistenhoehe nach
       unten — sie ragt dann aus der Galerie heraus und die Punkte liegen
       im Text. */
    top: auto;
    height: auto;
    overflow: visible;
  }
  .pg-rail {
    display: block;
    flex: none;
    /* 2026-08-18 (Athena): Das Fenster ist genau so hoch wie die ERSTE
       Aufnahme — sonst lugte darunter schon die zweite hervor. Den genauen
       Wert setzt die Seite selbst (--pg-rail-h), sobald das erste Foto
       geladen ist; bis dahin greift der alte Bildschirm-Wert. */
    height: var(
      --pg-rail-h,
      calc(100vh - var(--announcement) - var(--topbar) - 213px)
    );
    height: var(
      --pg-rail-h,
      calc(100svh - var(--announcement) - var(--topbar) - 213px)
    );
    /* Kleines Fenster (Landscape-Handy) darf nicht zum Schlitz werden —
       gilt aber nur, solange die genaue Bildhoehe noch nicht feststeht. */
    min-height: var(--pg-rail-h, 320px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pg-rail::-webkit-scrollbar {
    display: none;
  }
  /* 2026-08-18 (Athena): Vorher hatte jede Aufnahme einen festen Rahmen
     im Verhaeltnis 4:5. Unsere Fotos sind aber gemischt — quer (4:3) und
     hoch (3:4). In den festen Hochkant-Rahmen liess `contain` bei den
     Querformaten rund 100 px schwarz oben UND unten stehen; dazu kamen 4 px
     Abstand. Das sah nach Luecken zwischen den Bildern aus.
     Jetzt bestimmt jedes Foto seine eigene Hoehe — kein Leerraum, keine
     Abstaende, die Aufnahmen liegen direkt aneinander. */
  .pg-shot {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: auto;
    margin: 0;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .pg-shot img {
    height: auto;
  }
  .pg-shot.is-plaque {
    /* Freisteller-Signet: eigener Rahmen, aber flacher als 4:5 */
    aspect-ratio: 1 / 1;
  }
  .pg-shot.is-plaque img {
    height: auto;
  }
  .pg-foot {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    display: block;
    padding: 0 0 16px 10px;
    border-top: none;
    background: none;
    pointer-events: none;
  }
  .pg-caption {
    display: none;
  }
  .pg-dots {
    flex-direction: column;
    gap: 2px;
    pointer-events: auto;
  }
  .pg-dot::before {
    width: 5px;
    height: 5px;
    /* Auf dem Foto braucht der Punkt einen Rand, sonst verschwindet er. */
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
  }
  .pdp-info {
    position: static;
    padding: 26px 18px 44px;
  }
}

/* Bestätigungstafel mit mehreren Taschen („Beide reservieren") */
.added-panel .added-sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: -6px 0 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.added-panel .added-sum strong {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-strong);
}

/* Set-Vorteil im Warenkorb-Schieber (Athena, 2026-08-16) */
.drawer-total.drawer-sub {
  margin-bottom: 8px;
}
.drawer-total.drawer-sub .val {
  font-size: 17px;
  color: var(--ink-muted);
}
.drawer-setsave {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.drawer-setsave strong {
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* ============================================================
   MENGENVORTEIL — Anzeige (Athena, 2026-08-16)
   Ueberall dieselbe Sprache: Listenpreis durchgestrichen und klein,
   der echte Betrag daneben in Gold.
   ============================================================ */
.bo-price-deal,
.du-price,
.dk-oto-price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.bo-was,
.du-was,
.dk-oto-was {
  font-size: 0.82em;
  color: var(--ink-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
/* „einzeln" vor dem Streichpreis (Preistransparenz): inline-block,
   damit das line-through des Elternteils NICHT durchs Wort geht —
   auf inline-block-Kinder vererbt sich die Durchstreichung nicht. */
.bo-was-wort {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-right: 2px;
  vertical-align: 1px;
}
.bo-now,
.du-now,
.dk-oto-now {
  color: var(--gold);
}
.duett-save {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
}
.drawer-hint-tier {
  margin: -6px 0 14px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.added-panel .added-save {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: -6px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.added-panel .added-save strong {
  font-weight: 500;
}
.added-panel .added-sum {
  border-top: none;
  padding-top: 0;
}
.bundles-rule {
  max-width: 760px;
  margin: 10px auto 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-muted);
}
.bundles-rule em {
  color: var(--gold);
  font-style: normal;
}
.buyopts-note {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--ink-muted);
}

/* Platz unter der Regel-Zeile: sonst laeuft der „Bestseller"-Reiter,
   der ueber der mittleren Karte haengt, in den Text hinein (Badge
   haengt -14 px ueber der Karte -> mind. ~22 px Luft lassen). */
.bundles-rule {
  margin-bottom: 26px;
}
/* Auf der Coral-Karte war die Fussnote (var(--ink-muted) auf Coral)
   praktisch unlesbar — sie traegt aber die Aussage zum Set-Vorteil. */
.bundle-card.bestseller .bundle-note {
  color: rgba(28, 16, 12, 0.78);
}
.bundle-card.bestseller .bundle-price-original {
  color: rgba(28, 16, 12, 0.62);
  text-decoration-color: rgba(28, 16, 12, 0.5);
}

/* Platz fuer die fixe Kauf-Leiste auf der Produktseite (<=820px).
   Ohne das lagen „Weltweiter Versand" und das Copyright darunter. */
html.tm-has-buybar .footer {
  padding-bottom: calc(32px + 72px + env(safe-area-inset-bottom));
}

/* Kasse: Hinweis auf die gesicherte Bezahlseite (Stripe) */
.ck-pay-hint {
  border: 1px solid var(--line);
  padding: 16px 18px;
  margin-bottom: 22px;
}
.ck-pay-hint p {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* ============================================================
   FUSSZEILE — Aufklapp-Aufbau nach miumiu.com  (2026-08-16)
   ------------------------------------------------------------
   Bei ihnen gemessen (Fenster 1000 px, dort greift die
   Aufklapp-Fassung; ab 1280 px zeigen sie stattdessen offene
   Spalten — wir bleiben ueberall bei der Aufklapp-Fassung, so
   wie Athena sie gesehen und bestellt hat):

     Seitenrand      56 px
     linke Spalte   548 px   ] Verhaeltnis 1,83 : 1
     Abstand         40 px   ]
     rechte Spalte  300 px
     Zeilenhoehe     20 px Beschriftung, 16 px Luft oben+unten,
                     erste Zeile ohne obere Luft
     Beschriftung    14 px, Grossbuchstaben
     Pfeil           14 px breit, rechtsbuendig

   Am Handy steht bei ihnen der Newsletter ganz oben, darunter
   die sozialen Netze, erst dann die Gruppen. Das macht `order`.
   ============================================================ */
.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1.83fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  /* Kein eigener Strich mehr: seit das Marken-Monument raus ist, faengt
     die Fusszeile direkt hier an — ihr eigener oberer Rand genuegt. */
}
/* Das Link-Band ist jetzt eine Spalte gestapelter Gruppen, kein
   Vier-Spalten-Raster mehr. Die alten Raster-Regeln (auch die in
   den Medienabfragen weiter oben) werden hiermit ueberschrieben. */
.footer-main .footer-cols {
  display: block;
  grid-template-columns: none;
  gap: 0;
  padding-top: 0;
  border-top: 0;
}

/* --- eine aufklappbare Gruppe ------------------------------- */
.facc {
  border-bottom: 1px solid rgba(184, 152, 94, 0.14);
}
/* `.footer h5` (Spaltenkopf alter Bauart) ist spezifischer als eine
   einzelne Klasse und hat sonst Aussenabstand und Schriftgroesse
   durchgereicht — die Zeilen wurden dadurch 20 px zu hoch. */
.footer .facc-kopf {
  margin: 0;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  line-height: 1;
}
.facc-knopf {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  /* 20 px Zeilenhoehe + 16 px Luft oben und unten = 52 px Zeile,
     erste Zeile 36 px — dasselbe Mass wie bei miumiu.com. */
  line-height: 20px;
  transition: color 0.25s ease;
}
.facc:first-child .facc-knopf {
  padding-top: 0;
}
.facc-knopf:hover {
  color: var(--gold-soft);
}
.facc-knopf:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}
.facc-pfeil {
  flex: 0 0 auto;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.facc.open .facc-pfeil {
  transform: rotate(180deg);
}

/* Fach: Hoehe ueber 0fr -> 1fr animiert, ohne gemessene Pixel.
   `visibility` nimmt geschlossene Links aus der Tab-Reihenfolge —
   sonst wandert die Tastatur durch unsichtbare Eintraege. */
.facc-fach {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
.facc.open .facc-fach {
  grid-template-rows: 1fr;
}
.facc-inhalt {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 0.38s;
}
.facc.open .facc-inhalt {
  visibility: visible;
  transition: visibility 0s linear 0s;
}
.facc-inhalt ul {
  padding: 2px 0 20px;
}
.facc-inhalt .fcol-split {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
  grid-auto-columns: minmax(0, 1fr);
  gap: 0 clamp(20px, 3vw, 44px);
  align-content: start;
}

/* --- rechte Spalte ------------------------------------------ */
.fside-kopf {
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}
.fside-kopf--social {
  margin-top: clamp(28px, 4vh, 40px);
}
.fside-sub {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--ink-body);
  margin: 0 0 22px;
  max-width: 42ch;
}
/* Unterstrichenes Feld statt Kasten — wie bei ihnen. Der Pfeil
   sitzt im Feld rechts, deshalb rechts Platz lassen. */
.fside-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  border-bottom: 1px solid rgba(184, 152, 94, 0.42);
  transition: border-color 0.25s ease;
}
.fside-form:focus-within {
  border-bottom-color: var(--gold);
}
.fside-form input {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0 0 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-strong);
}
.fside-form input::placeholder {
  color: var(--ink-muted);
}
.fside-form input:focus {
  outline: none;
}
.fside-form button {
  flex: 0 0 auto;
  background: none;
  border: 0;
  padding: 0 0 10px 6px;
  color: var(--gold);
  cursor: pointer;
  transition: transform 0.25s ease, color 0.25s ease;
}
.fside-form button:hover {
  transform: translateX(3px);
  color: var(--ink-strong);
}
.fside-form button:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}
.fside-fertig {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gold);
  margin: 0;
}
.fside-legal {
  margin: 14px 0 0;
  font-size: 11px;
  line-height: 1.65;
  color: var(--ink-muted);
}
.fside-legal a {
  color: var(--ink-body);
  text-decoration: underline;
}
.fside-legal a:hover {
  color: var(--gold);
}
/* Die Grundregel zentriert die Symbole (sie standen frueher unter
   der Adresse in der Mitte) — hier gehoeren sie nach links. */
.footer-side .footer-social {
  justify-content: flex-start;
  gap: clamp(18px, 2vw, 26px);
  margin-top: 0;
}

/* Vertrauens-Zeile sass frueher im Newsletter-Kasten */
.footer-main + .footer-trust {
  margin-top: clamp(30px, 4vh, 46px);
}

/* --- Handy: Newsletter ueber die Gruppen -------------------- */
@media (max-width: 860px) {
  .footer-main {
    grid-template-columns: 1fr;
    gap: clamp(30px, 5vh, 44px);
  }
  .footer-side {
    order: -1;
  }
  .facc-inhalt .fcol-split {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .facc-knopf {
    letter-spacing: 0.26em;
    padding: 18px 0;
  }
}

/* ============================================================
   2026-08-17 — HANDY & FLACHE FENSTER
   ============================================================ */

/* --- 1. Kein Wackeln nach rechts -----------------------------
   Die Einblend-Animationen parken ihr Element vor dem Ausloesen
   32px NEBEN der Seite (data-reveal="right" -> translate(32px,0)
   bei opacity:0). Unsichtbar, aber die Seite wird dadurch breiter
   und laesst sich seitlich schieben. `clip` statt `hidden`:
   erzeugt KEINEN Scroll-Container, position:sticky bleibt heil
   und Lenis wird nicht gestoert. */
html,
body {
  overflow-x: clip;
}

/* --- 2. Hero: echte Bildschirmhoehe --------------------------
   100vh ist auf dem Handy die Hoehe OHNE Browserleiste — der Fuss
   des Hero lag dadurch unter dem sichtbaren Rand. 100svh ist das
   kleinste Sichtfeld und damit immer vollstaendig zu sehen. */
@media (max-width: 900px) {
  .hero {
    height: 100vh; /* Rueckfall fuer alte Browser */
    height: 100svh;
  }
}

/* --- 3. Der Hero wird nach der HOEHE gestaffelt ---------------
   Nicht die Breite war das Problem, sondern der Platz nach unten.
   Deshalb greifen die naechsten Bloecke ueber `max-height` und
   wirken damit auf Handys im Hochformat, im Querformat UND auf
   flachen Laptop-Fenstern gleichermassen.

   Gemessen vorher (Inhalt / verfuegbar):
     iPhone SE 922/720 · iPhone 13 853/720 · 14 Pro Max 822/740
     1280x720 761/720 · Querformat 664x390 463/390            */

/* Stufe 1 — unter 860px: Abstaende zusammenziehen */
@media (max-height: 860px) {
  .hero {
    min-height: 0; /* war 720px und damit groesser als der Schirm */
  }
  .hero-overlay {
    padding-top: calc(var(--announcement) + var(--topbar) + 16px);
  }
  .hero-title {
    font-size: clamp(56px, 9vh, 140px);
  }
  .hero-sub {
    margin-top: 14px;
  }
  .hero-chapter-meta {
    margin-top: 16px;
  }
  .hero-cta-row {
    gap: 14px;
    margin-bottom: 16px;
  }
  .hero-buttons {
    gap: 12px;
  }
  .hero-bottom {
    padding-bottom: 26px;
    gap: 20px;
  }
}

/* Stufe 2 — unter 780px: Vorspann zusammenruecken.
   Trifft schmale Geraete wie Galaxy S8 (740) und Pixel 5 (727),
   bei denen der Text in mehr Zeilen umbricht. Es geht nichts
   verloren, der Vorspann wird nur kompakter. */
@media (max-height: 780px) {
  .hero-overline {
    margin-top: 8px;
    gap: 8px;
  }
  .hero-mark {
    height: 40px;
  }
}

/* Stufe 3 — unter 700px: Kapitelzeile weg.
   Sie bricht auf schmalen Schirmen auf drei Zeilen um und sagt
   nichts, was nicht im Kauf-Knopf und im Laufband steht. */
@media (max-height: 700px) {
  .hero-chapter-meta {
    display: none;
  }
  .btn-tall {
    height: 52px;
  }
  .hero-bottom {
    padding-bottom: 18px;
    gap: 16px;
  }
}

/* Stufe 4 — unter 620px: kleine Handys (altes iPhone SE) */
@media (max-height: 620px) {
  .hero-title {
    font-size: clamp(44px, 9vh, 96px);
  }
  .hero-mark {
    height: 28px;
  }
  .hero-overline {
    margin-top: 4px;
    gap: 6px;
  }
  .btn-tall {
    height: 46px;
  }
  .hero-bottom {
    padding-bottom: 10px;
    gap: 12px;
  }
}

/* Stufe 5 — unter 520px (Querformat): Vorspann ganz weg.
   Das TM-Zeichen steht ohnehin in der Kopfleiste darueber. */
@media (max-height: 520px) {
  .hero-overlay {
    padding-top: calc(var(--announcement) + var(--topbar) + 4px);
  }
  .hero-overline {
    display: none;
  }
  .hero-title {
    font-size: clamp(38px, 11vh, 64px);
  }
  .hero-sub {
    font-size: 15px;
    margin-top: 6px;
  }
  .hero-cta-row {
    margin-bottom: 8px;
  }
  .btn-tall {
    height: 44px;
  }
  .hero-bottom {
    padding-bottom: 10px;
    gap: 10px;
  }
}

/* ============================================================
   2026-08-18 — Shop: keine grauen Loecher, Filter in EINER Zeile
   ============================================================ */

/* --- Lueckenfueller in der letzten Rasterzeile ----------------
   .shop-grid hat `gap:1px; background:var(--line)` — daraus entstehen
   die Haarlinien zwischen den Karten. Eine LEERE Zelle zeigt genau
   diese Farbe grossflaechig: der graue Kasten.
   Der Fueller ist deshalb keine Deko, sondern eine echte Karte im
   gleichen Aufbau wie eine Tasche: Bildflaeche 4:5, darunter Rolle,
   Name und eine Zeile. So schwingt er im Raster mit. */
.shop-lueckenfueller {
  background: var(--bg);
  min-height: 100%;
}

.slf-karte {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  position: relative;
}

/* Bildflaeche — exakt die Masse der Produktkarte */
.slf-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(140deg, #1c1a17 0%, #0e0d0c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Goldschimmer hinter dem Signet — gibt der leeren Flaeche Tiefe,
   damit sie nicht wie ein Loch wirkt. */
.slf-glanz {
  position: absolute;
  width: 88%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(184, 152, 94, 0.16) 0%,
    rgba(184, 152, 94, 0.05) 42%,
    transparent 70%
  );
  transition: opacity 0.9s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.slf-mark {
  position: relative;
  width: clamp(58px, 34%, 104px);
  height: auto;
  opacity: 0.7;
  transition: opacity 0.7s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Textteil — dieselben Abstaende wie .pc-info */
.slf-info {
  padding: 22px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.slf-name {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.1;
  color: var(--ink-strong);
  letter-spacing: -0.005em;
}
.slf-cta {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.slf-cta svg {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.slf-fuss {
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* Reaktion auf Zeigen und Tastatur */
.slf-karte:hover .slf-mark,
.slf-karte:focus-visible .slf-mark {
  opacity: 1;
  transform: scale(1.05);
}
.slf-karte:hover .slf-glanz,
.slf-karte:focus-visible .slf-glanz {
  transform: scale(1.12);
}
.slf-karte:hover .slf-cta svg,
.slf-karte:focus-visible .slf-cta svg {
  transform: translateX(4px);
}
.slf-karte:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: -1px;
}

/* Auf dem Handy ist die Zelle nur ~195px breit — Text zusammenziehen,
   sonst laeuft die Fusszeile ueber sechs Zeilen. */
@media (max-width: 640px) {
  .slf-info {
    /* Gemessen gegen .pc-info: der Textblock des Fuellers darf nicht
       hoeher sein, sonst streckt er die ganze Rasterzeile. Die 18px
       Unterschied steckten in den Abstaenden, nicht in der Schrift. */
    padding: 18px 16px 14px;
    gap: 5px;
  }
  .slf-cta {
    margin-top: 2px;
  }
  .slf-fuss {
    margin-top: 4px;
  }
  .slf-name {
    font-size: 19px;
  }
    .slf-fuss {
    font-size: 9px;
    letter-spacing: 0.12em;
  }
}

/* --- Filterleiste: alle vier nebeneinander --------------------
   Vorher `flex-wrap: wrap` — auf dem Handy rutschte „Ab €189" in
   eine zweite Zeile. Jetzt teilen sich die vier den Platz zu
   gleichen Teilen; Schrift, Abstand und Innenabstand wachsen mit
   der Fensterbreite mit, damit es auch auf 320px in eine Zeile
   passt, ohne unlesbar zu werden. */
@media (max-width: 900px) {
  .shop-bar .filters {
    flex-wrap: nowrap;
    gap: clamp(4px, 1.4vw, 8px);
    padding: 0 var(--s-md) 14px;
  }
  .shop-bar .filters .chip {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
    padding: 9px clamp(3px, 1.5vw, 12px);
    font-size: clamp(8.5px, 2.4vw, 11px);
    letter-spacing: clamp(0.01em, 0.32vw, 0.14em);
  }
}

/* ============================================================
   Akt II auf flachen Rechner-Fenstern — Teil 2 (2026-08-18, Athena)
   Steht bewusst ganz am Ende: die Grundregeln fuer .drop-tracker und
   .dt-* kommen weiter oben in dieser Datei, und bei gleicher Gewichtung
   gewinnt die spaetere Regel.
   ============================================================ */
@media (min-width: 1024px) and (max-height: 1100px) {
  .drop-tracker {
    margin: 18px 0;
    padding: clamp(16px, 1.8vw, 22px);
  }
  .dt-headline {
    font-size: clamp(30px, 3.2vw, 42px);
    margin-bottom: 12px;
  }
  .dt-divider {
    margin: 14px 0 12px;
  }
  .dt-dots {
    margin-top: 12px;
  }
  .dt-bullets {
    gap: 8px 24px;
  }
}

/* Sehr flache Fenster (MacBook Air, ~820 px): noch einmal enger, damit
   Akt II auch dort komplett auf einen Blick passt. */
@media (min-width: 1024px) and (max-height: 860px) {
  .story-body {
    padding-top: 22px;
    padding-bottom: 22px;
  }
  .story-body p {
    margin-top: 12px;
  }
  .story-body .actions {
    margin-top: 14px;
  }
}

/* Ganz flache Fenster brauchen zusaetzlich eine kompaktere orange Karte
   (steht am Ende, siehe Hinweis oben zur Reihenfolge). */
@media (min-width: 1024px) and (max-height: 860px) {
  .drop-tracker {
    margin: 14px 0;
    padding: clamp(14px, 1.5vw, 18px);
  }
  .dt-headline {
    font-size: clamp(26px, 2.6vw, 34px);
    margin-bottom: 10px;
  }
  .dt-divider {
    margin: 10px 0 10px;
  }
  .dt-dots {
    margin-top: 10px;
  }
}

/* Die Grundhoehe von 720 px war auf flachen Fenstern selbst schon zu hoch
   (1366x768 laesst nur 668 px). Auf dem Rechner richtet sich die Mindest-
   hoehe deshalb nach dem Fenster statt nach einer festen Zahl. */
@media (min-width: 1024px) and (max-height: 1100px) {
  .story {
    min-height: calc(100vh - var(--announcement) - var(--topbar));
  }
}

/* Letzte Stufe fuer 1366x768 & Co. — dort bleiben nur 668 px. */
@media (min-width: 1024px) and (max-height: 800px) {
  .story-body {
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .story-body h2 {
    font-size: clamp(28px, 2.6vw, 38px);
  }
  .story-body p {
    font-size: 14px;
    line-height: 1.55;
    margin-top: 10px;
  }
  .story-body .actions {
    margin-top: 12px;
  }
  .drop-tracker {
    margin: 12px 0;
    padding: 14px;
  }
  .dt-headline {
    font-size: clamp(24px, 2.3vw, 30px);
    margin-bottom: 8px;
  }
  .dt-divider {
    margin: 8px 0;
  }
}

/* ============================================================
   SEO-/A11y-Feinschliff (Audit 2026-08-18)
   ============================================================ */
/* FAQ-Fragen sind jetzt echte h3-Ueberschriften (Crawler + Screen-
   reader-Gliederung). Die Optik traegt weiterhin der Button darin —
   das h3 selbst bleibt unsichtbar neutral. */
.lg-faq-h {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* Die Antworten stehen jetzt IMMER im DOM (vorher nur die offene) —
   zugeklappt regelt das hidden-Attribut. Es muss gegen die animierte
   Klasse gewinnen. */
.lg-faq-a[hidden] {
  display: none;
}

/* Hero-Kapitelknoepfe: Tap-Flaeche von 23px auf 43px angehoben, ohne
   dass sich optisch etwas verschiebt (Padding + Negativ-Margin). */
.hp-item {
  padding: 10px 8px;
  margin: -10px -8px;
}

/* Shop-Filterchips am Handy: 8,5-9px-Schrift lag unter der Lesbar-
   keitsgrenze, 35px Hoehe unter der 44px-Tap-Empfehlung. */
@media (max-width: 900px) {
  .shop-bar .filters .chip {
    font-size: clamp(10px, 2.8vw, 11px);
    min-height: 44px;
  }
}

/* Consent-Banner kompakter: Der erste Layer verdeckte am Handy ~47 %
   des Bildschirms und lag ueber dem Hero-CTA (Audit 2026-08-18). Die
   Inhalte bleiben identisch — nur dichter gesetzt. */
@media (max-width: 768px) {
  .cc-panel {
    padding: 14px 16px 12px;
  }
  .cc-title {
    font-size: 17px;
    margin: 2px 0 6px;
  }
  .cc-text {
    font-size: 12px;
    line-height: 1.5;
    margin: 0 0 10px;
  }
  .cc-eyebrow {
    font-size: 9px;
  }
  .cc-actions {
    gap: 8px;
  }
  .cc-btn {
    padding: 12px 10px;
    font-size: 11px;
  }
}

/* Consent mobil, Stufe 2: Auch mit dichterem Satz verdeckte der Layer
   noch den Hero-CTA. Am Handy faellt der Titel weg (der Kurztext sagt
   dasselbe), die Knoepfe stehen nebeneinander — Ziel: unter ~140px,
   damit „Sissi entdecken" frei bleibt. Der Detail-Dialog (Einstellungen)
   bleibt unveraendert gross. */
@media (max-width: 768px) {
  .cc:not(:has(.cc-cats)) .cc-eyebrow,
  .cc:not(:has(.cc-cats)) .cc-title {
    display: none;
  }
  .cc:not(:has(.cc-cats)) {
    padding: 6px;
    padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
  }
  .cc:not(:has(.cc-cats)) .cc-panel {
    padding: 10px 14px 8px;
  }
  .cc:not(:has(.cc-cats)) .cc-btn {
    padding: 10px 8px;
  }
  .cc:not(:has(.cc-cats)) .cc-text {
    font-size: 10.5px;
    line-height: 1.4;
    margin: 0 0 7px;
  }
  .cc:not(:has(.cc-cats)) .cc-actions {
    flex-wrap: nowrap;
  }
  .cc:not(:has(.cc-cats)) .cc-btn {
    padding: 11px 8px;
    font-size: 10px;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
}