:root {
  /* Farbwelt: ans Logo-Gold angeglichen, Elfenbein statt kaltem Weiß */
  --gold: #bf9c5a;
  --gold-bright: #e3c88f;
  --ink: #f3eee2;
  --muted: rgba(240, 232, 216, 0.62);
  --bg: #050505;
}

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

html {
  scroll-behavior: auto;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans), sans-serif;
  overflow-x: hidden;
}
body.locked {
  overflow: hidden;
}

/* ---------- Video-Bühne ---------- */
.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #000;
}
.stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* dezente Abdunklung für Textlesbarkeit an den Rändern */
.stage-grade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 30%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent 22%),
    linear-gradient(to right, rgba(0, 0, 0, 0.45), transparent 42%);
  pointer-events: none;
}

/* ---------- fixed chrome ---------- */
.chrome {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}
.chrome header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 44px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand-mark {
  height: 52px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));
}
.brand-text {
  font-size: 13px;
  letter-spacing: 7px;
  text-transform: uppercase;
  color: var(--ink);
}
.brand-text em {
  font-style: normal;
  color: var(--gold);
}
.brand-text span {
  display: block;
  font-size: 8px;
  letter-spacing: 4px;
  color: var(--muted);
  margin-top: 4px;
}
.chrome .cta-small {
  pointer-events: auto;
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid rgba(201, 163, 94, 0.45);
  padding: 10px 22px;
  transition: all 0.4s ease;
  background: rgba(0, 0, 0, 0.25);
}
.chrome .cta-small:hover {
  background: var(--gold);
  color: #0a0a0a;
}

.scroll-hint {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--muted);
  z-index: 15;
  animation: hintPulse 2.6s ease-in-out infinite;
}
@keyframes hintPulse {
  0%, 100% { opacity: 0.35; transform: translate(-50%, 0); }
  50% { opacity: 0.9; transform: translate(-50%, 6px); }
}

/* ---------- loader ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #050505;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  /* Kürzer als früher (1,1 s): Ohne Klick ist die Ausblende Teil der
     Wartezeit, nicht mehr die Belohnung für einen Klick. */
  transition: opacity 0.8s ease, visibility 0.8s;
}
.loader.hidden {
  opacity: 0;
  visibility: hidden;
}
/* ---------- Logo-Intro „Luxury Gold Reveal" ---------- */

/* 1 — leiser Gold-Schimmer in der Mitte, blendet auf und atmet dezent */
.lx-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(560px, 88vw);
  height: min(560px, 88vw);
  transform: translate(-50%, -54%);
  background: radial-gradient(
    circle,
    rgba(211, 174, 106, 0.20),
    rgba(191, 156, 90, 0.06) 38%,
    transparent 68%
  );
  filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  animation:
    lxAura 0.9s ease both,
    lxBreath 4s ease-in-out 0.9s infinite;
}
@keyframes lxAura {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes lxBreath {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}

/* Bühne für Ring, Siegel und Emblem. Alle Ebenen liegen deckungsgleich
   übereinander und teilen sich die Bildkoordinaten des Emblems (929 x 858) —
   deshalb sind die Zahlen unten und in Loader.tsx direkt gemessene Bildpunkte
   und keine Umrechnungen.
   overflow:hidden + isolation:isolate halten Licht-Reflex und Screen-Blend
   strikt in der Bühne — sonst „geistern" sie über den restlichen Screen. */
.lx-stage {
  position: relative;
  width: min(420px, 78vw);
  aspect-ratio: 929 / 858;
  display: block;
  overflow: hidden;
  isolation: isolate;
}

/* 4 — das Emblem blendet hinter dem wachsenden Ring auf */
.lx-emblem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
  animation: lxEmblemIn 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) 1.55s both;
}
@keyframes lxEmblemIn {
  0%   { opacity: 0; filter: brightness(0.3) blur(8px); transform: scale(0.965); }
  60%  { opacity: 1; }
  100% { opacity: 1; filter: brightness(1) blur(0); transform: scale(1); }
}

/* 6 — Lichtatem: dieselbe Bildquelle ein zweites Mal, aber nur dort sichtbar,
   wo hinter der Figur das Licht steht (Schwerpunkt bei 43 % / 69 % gemessen,
   Abfall über rund 13 % der Breite). `screen` hellt die Goldpixel auf und
   lässt Schwarz unangetastet — es entsteht kein Grauschleier. */
.lx-breath {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  -webkit-mask-image: radial-gradient(
    circle at 43% 69%,
    #000 0%,
    rgba(0, 0, 0, 0.55) 10%,
    transparent 24%
  );
  mask-image: radial-gradient(
    circle at 43% 69%,
    #000 0%,
    rgba(0, 0, 0, 0.55) 10%,
    transparent 24%
  );
  animation:
    lxGlowIn 0.9s ease 2.25s both,
    lxGlow 6s ease-in-out 3.15s infinite;
}
@keyframes lxGlowIn {
  to { opacity: 0.3; }
}
@keyframes lxGlow {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.55; }
}

/* 3 — Siegel OHNE seinen Ring, konzentrisch zum Ring daneben. Die 45,8 % sind
   die vermessene Mitte der hinteren Zifferblatt-Scheibe: Siegel und Ring
   wachsen später um exakt denselben Punkt. */
.lx-seal {
  position: absolute;
  left: 50%;
  top: 45.8%;
  width: 36%;
  display: block;
  opacity: 0;
  animation:
    lxSealIn 0.6s ease 0.6s both,
    lxSealOut 0.35s ease 1.45s forwards;
}
@keyframes lxSealIn {
  0% {
    opacity: 0;
    filter: brightness(0.32) blur(5px);
    transform: translate(-50%, -50%) scale(0.985);
  }
  60% { opacity: 1; }
  100% {
    opacity: 1;
    filter: brightness(1) blur(0);
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes lxSealOut {
  to { opacity: 0; }
}

/* 2 + 5 — Bühne des Rings, in den Bildkoordinaten des Emblems */
.lx-vec {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* Der eine Ring: zeichnet sich mit Licht, wächst auf die Lünette des Emblems
   und geht dort in ihr auf. Ab da ist der einzige Ring im Bild der gemalte
   Rand des Zifferblatts — es liegen nie zwei übereinander.
   Radius und Strichstärke stehen in Bildkoordinaten: 1 Einheit = 1 Pixel der
   Emblemvorlage. Dadurch stimmt die Landung bei jeder Anzeigegröße, ohne dass
   irgendwo ein Faktor nachgeführt werden müsste. */
.lx-ring {
  fill: none;
  stroke: url(#lx-gold);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  /* Zeichenbeginn von 3 Uhr auf 12 Uhr drehen */
  transform: rotate(-90deg);
  transform-origin: 464px 393px;
  transform-box: view-box;
  filter: drop-shadow(0 0 5px rgba(227, 200, 143, 0.55));
  animation:
    lxRingDraw 0.95s cubic-bezier(0.35, 0, 0.2, 1) 0.1s both,
    lxRingGrow 0.8s cubic-bezier(0.4, 0, 0.2, 1) 1.45s both,
    lxRingLand 0.3s ease 2.15s forwards;
}
@keyframes lxRingDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes lxRingGrow {
  /* 126,6 = Radius des Siegelrings bei 36 % Bühnenbreite; 382 = Lünette.
     Die Strichstärke geht von der des Siegelrings auf die der Lünette. */
  from { r: 126.6px; stroke-width: 16.3; }
  to   { r: 382px;   stroke-width: 12; }
}
@keyframes lxRingLand {
  to { opacity: 0; }
}

/* 8 — dezenter metallischer Kanten-Reflex, fährt einmal über das Emblem */
.lx-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(255, 240, 202, 0.7) 50%,
    transparent 60%
  );
  /* overlay: hellt nur die Gold-Pixel auf, Schwarz bleibt schwarz */
  mix-blend-mode: overlay;
  transform: translateX(-135%);
  pointer-events: none;
  /* fährt erst, wenn der Ring gelandet und das Emblem stehengeblieben ist */
  animation: lxShine 1s ease-in-out 2.4s both;

  /* Weiche radiale Maske: der Lichtbalken blendet zum Rand hin sanft aus,
     statt an der harten Box-Kante abgeschnitten zu werden. Dadurch ist der
     rechteckige „Rahmen" während des Schimmerns nicht mehr sichtbar.
     Mittelpunkt auf der Zifferblatt-Mitte (50 % / 45,8 %), Ausdehnung so
     gewählt, dass der Bodenteller am unteren Rand mit ausläuft. */
  -webkit-mask-image: radial-gradient(
    ellipse 54% 52% at 50% 46%,
    #000 44%,
    rgba(0, 0, 0, 0.35) 70%,
    transparent 88%
  );
  mask-image: radial-gradient(
    ellipse 54% 52% at 50% 46%,
    #000 44%,
    rgba(0, 0, 0, 0.35) 70%,
    transparent 88%
  );
}
@keyframes lxShine {
  to { transform: translateX(135%); }
}

/* 9 — Wortmarke steigt ruhig von unten auf (ein Block, kein Springen) */
.lx-word {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: lxRise 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) 2.5s both;
}
@keyframes lxRise {
  from { opacity: 0; transform: translateY(20px); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
/* Hier steht die Wortmarke als Bild statt als gesetzter Text: der Loader ist
   der Logo-Moment, dort zählt die Original-Typografie. Kopfzeilen und
   Verwaltung behalten den gesetzten Text — der bleibt in kleinen Größen
   scharf und ist auswählbar. */
.lx-word-mark {
  width: min(340px, 70vw);
  height: auto;
  display: block;
}
.lx-word-sub {
  font-family: var(--font-sans), sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 7px;
  text-transform: uppercase;
  color: var(--muted);
}

/* Schmuckdetail: Haarlinien + kleiner goldener Stern */
.lx-jewel {
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  animation: lxFade 0.6s ease 2.7s both;
}
.lx-hair {
  width: 70px;
  height: 1px;
}
.lx-hair-l { background: linear-gradient(90deg, transparent, var(--gold)); }
.lx-hair-r { background: linear-gradient(90deg, var(--gold), transparent); }
/* 4-zackiger Gold-Stern aus zwei schmalen Rhomben */
.lx-star {
  position: relative;
  width: 12px;
  height: 12px;
  flex: none;
}
.lx-star::before,
.lx-star::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, var(--gold-bright), var(--gold) 70%);
}
.lx-star::before { clip-path: polygon(50% 0, 58% 50%, 50% 100%, 42% 50%); }
.lx-star::after  { clip-path: polygon(0 50%, 50% 42%, 100% 50%, 50% 58%); }
@keyframes lxFade {
  to { opacity: 1; }
}

/* Ladebalken: läuft golden durch, dann öffnet sich die Seite von selbst.
   min-height hält die vertikale Rhythmik des Loaders stabil. */
.lx-cta {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lx-bar {
  position: relative;
  width: min(220px, 56vw);
  height: 1.5px;
  border-radius: 2px;
  background: rgba(240, 232, 216, 0.1);
  overflow: hidden;
  opacity: 0;
  /* erscheint zuletzt — wenn Wortmarke und Schmuckdetail stehen */
  animation: lxFade 0.5s ease 2.85s both;
}
/* Füllung wird skaliert statt in der Breite animiert: keine Layout-Arbeit
   pro Frame. Die kurze Transition glättet die rAF-Schritte aus page.tsx. */
.lx-bar-fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.18s linear;
  background: linear-gradient(90deg, rgba(201, 163, 94, 0.35), var(--gold-bright));
  box-shadow: 0 0 12px -2px rgba(227, 200, 143, 0.8);
}
/* helle Spitze am vorderen Ende — dieselbe Bildsprache wie der mit Licht
   nachgezogene Ring darüber */
.lx-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 14px;
  background: linear-gradient(90deg, transparent, rgba(255, 244, 214, 0.95));
}

/* Bewegung reduziert? Direkt den Ruhezustand zeigen: das Emblem, wie es nach
   der Landung des Rings dasteht. */
@media (prefers-reduced-motion: reduce) {
  .lx-emblem, .lx-word, .lx-jewel, .lx-bar {
    animation: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }
  /* Die Aura ist über transform zentriert (top/left 50 % + translate). Ein
     pauschales transform:none würde sie in die untere rechte Ecke werfen —
     hier entfällt nur die Animation. */
  .lx-aura {
    animation: none !important;
    opacity: 1;
  }
  /* Ring und Siegel sind Teil des Weges dorthin, nicht des Ziels — nach der
     Choreografie sind beide ohnehin verschwunden. Der gemalte Rand der Uhr
     trägt das Bild allein. */
  .lx-ring, .lx-seal, .lx-shine { display: none; }
  /* Das Licht hinter der Figur bleibt — als fester Wert ist es Farbe, keine
     Bewegung. Volle Deckkraft würde die Mitte ausbrennen. */
  .lx-breath {
    animation: none !important;
    opacity: 0.34;
  }
  /* Der Balken bleibt — er ist Information, keine Zierde. Nur die
     Glättung entfällt, damit nichts nachläuft. Die scaleX-Füllung darf
     hier NICHT auf transform:none gesetzt werden. */
  .lx-bar-fill { transition: none; }
}

/* ---------- Video-Kapitel ---------- */
.vch {
  position: fixed;
  z-index: 10;
  opacity: 0;
  max-width: 480px;
  will-change: opacity, transform;
  pointer-events: none;
}

/* ---------- Text-Einlauf (gestaffelt) ---------- */
.gl {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  will-change: opacity, transform, filter;
}
.vch.is-in .gl {
  animation: glIn 0.92s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 95ms + 60ms);
}
@keyframes glIn {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .gl {
    opacity: 1;
    transform: none;
    filter: none;
  }
  .vch.is-in .gl {
    animation: none;
  }
}
.vch .num {
  font-family: var(--font-sans), sans-serif;
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--gold);
  letter-spacing: 5px;
  margin-bottom: 16px;
}
/* feine Gold-Haarlinie als Handwerks-Signal */
.vch .num::before {
  content: '';
  display: block;
  width: 36px;
  height: 1px;
  margin-bottom: 14px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.vch h2 {
  font-family: var(--font-serif), serif;
  font-weight: 300;
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.12;
  color: var(--ink);
  margin-bottom: 20px;
}
.vch h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold-bright);
}
.vch p {
  max-width: 380px;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.5px;
  line-height: 2.05;
  color: rgba(240, 232, 216, 0.78);
}
/* Editorial-Hero: Vollbild, zentriert */
.vch-hero {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 24px;
}
/* Scrim: dunkelt nur den Textbereich sanft ab, Uhr bleibt sichtbar */
.hero-scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 72% 58% at 50% 46%,
    rgba(0, 0, 0, 0.58),
    rgba(0, 0, 0, 0.28) 46%,
    transparent 72%
  );
}
/* Der große Titel — Archivo Black, warmes Elfenbein */
.hero-title {
  font-family: var(--font-display), sans-serif;
  font-weight: 400;
  color: var(--ink);
  line-height: 0.9;
  /* --out (0 = voll sichtbar, 1 = ausgeblendet, aus VideoHero) öffnet die
     Laufweite beim Wegscrollen minimal — der Titel „atmet aus". */
  letter-spacing: calc(-0.01em + var(--out, 0) * 0.045em);
  text-transform: uppercase;
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.55);
}
.hero-title .hl-line {
  display: block;
  font-size: clamp(64px, 12vw, 172px);
}
/* Zweite Zeile („WATCHES") tritt hinter die erste zurück: gleiche Größe, aber
   ein wirklich dünnerer Schnitt statt Archivo Black. Der Wechsel auf Jost 200
   ist nötig, weil Archivo Black nur einen einzigen Schnitt hat — an derselben
   Schrift lässt sich keine Stärke herunterdrehen.
   Jost ist dieselbe Schrift wie im Claim direkt darunter, das warme --gold
   dieselbe Farbe: die beiden Zeilen gehören sichtbar zusammen.
   Die Laufweite bleibt geerbt, damit sich auch diese Zeile beim Wegscrollen
   über --out mit öffnet. */
.hero-title .hl-line:last-child {
  font-family: var(--font-sans), sans-serif;
  font-weight: 200;
  color: var(--gold);
}

/* Buchstaben-Kaskade: jeder Letter blendet einzeln gestaffelt ein —
   ruhiges Tempo, Versatz in em, damit die Bewegung mit der Letter-Größe
   mitskaliert. Startet über .is-in (Hysterese in VideoHero) → spielt bei
   jedem Vorbeiscrollen erneut. */
.hero-title .hl {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.22em);
  filter: blur(6px);
  will-change: opacity, transform, filter;
}
.vch.is-in .hero-title .hl {
  animation: hlIn 1.15s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 75ms + 60ms);
}
@keyframes hlIn {
  from {
    opacity: 0;
    transform: translateY(0.22em);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
/* Claim folgt erst, wenn die Kaskade weitgehend steht */
.vch-hero.is-in .hero-claim.gl {
  animation-delay: 1.35s;
}
@media (prefers-reduced-motion: reduce) {
  .hero-title .hl {
    opacity: 1;
    transform: none;
    filter: none;
  }
  .vch.is-in .hero-title .hl {
    animation: none;
  }
}
/* Gleiche Schrift wie die Unterzeilen im Split-Kapitel (.it-cap): gesperrte
   Groteske in Versalien, gold. Etwas größer als dort, weil die Zeile hier
   allein unter dem Hero-Titel steht — die Sperrung ist dafür minimal
   reduziert, sonst wird die lange Zeile auf schmalen Fenstern zu breit. */
.hero-claim {
  font-family: var(--font-sans), sans-serif;
  font-weight: 400;
  font-size: clamp(10px, 1.05vw, 13px);
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85), 0 2px 20px rgba(0, 0, 0, 0.7);
}
.hero-claim em {
  font-style: normal;
  color: var(--gold-bright);
}

/* Display-Statements in der Hero-Schrift — genutzt vom Split-Kapitel und
   den Flanken-Kapiteln, damit die Typografie über die ganze Strecke
   durchgängig bleibt. */
.it-text {
  position: absolute;
  font-family: var(--font-display), sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-size: clamp(36px, 4.8vw, 80px);
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.6);
}
/* Vertikal in der Bildmitte, damit die Aussage auf einer Linie mit der Uhr
   liegt. Der zweite translateY ist die Parallaxe-Drift nach oben — beide
   Verschiebungen addieren sich, die Zentrierung bleibt dabei erhalten.
   Der Text bleibt seitlich stehen und wandert nie in die Uhr hinein. */
.it-left {
  left: clamp(28px, 7vw, 120px);
  top: 50%;
  transform: translateY(-50%) translateY(calc((0.5 - var(--seg, 0)) * 4vh));
}
/* Dezente Vertrauens-Unterzeile unter einem Statement. .it-cap steht im
   Split-Kapitel unter der Aussage und übernimmt deren Ausrichtung,
   .ed-cap ist das Gegenstück in den Editorial-Kapiteln (dort absolut
   gesetzt, siehe unten) — gleiche Typografie, damit die Seite eine
   einzige Schrift-Logik hat. */
.it-cap,
.ed-cap,
.ed-lt,
.it-bt {
  font-family: var(--font-sans), sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
.it-cap {
  display: block;
  margin-top: 18px;
}

/* Markenspalte als Gegengewicht zur Aussage links. Die Drift läuft mit 6vh
   gegen die 4vh links — das ist die „Parallaxe in zwei Geschwindigkeiten",
   die der Kommentar oben beschreibt und die seit dem Entfernen des alten
   rechten Blocks gefehlt hat.
   Bewusst nur Namen, keine Herstellerlogos: Die Nennung einer Marke beim
   Weiterverkauf echter Ware ist zulässig, das Zeigen fremder Bildmarken auf
   der Startseite erweckt dagegen den Eindruck einer Handelsbeziehung. */
.it-brands {
  position: absolute;
  right: clamp(28px, 7vw, 120px);
  top: 50%;
  text-align: right;
  transform: translateY(-50%) translateY(calc((0.5 - var(--seg, 0)) * 6vh));
}
.it-bt {
  display: block;
}
.it-b-rule {
  height: 1px;
  margin: 13px 0 17px;
  background: rgba(240, 232, 216, 0.16);
}
.it-blist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
}
.it-blist li {
  font-family: var(--font-sans), sans-serif;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: uppercase;
  /* Schwächer als die Headline links: die Marken belegen die Aussage,
     sie sind nicht selbst die Aussage. */
  color: rgba(240, 232, 216, 0.75);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}
/* Einlauf-Versatz im CSS statt fünfmal inline im Markup. */
.it-blist li:nth-child(1) { --i: 1; }
.it-blist li:nth-child(2) { --i: 2; }
.it-blist li:nth-child(3) { --i: 3; }
.it-blist li:nth-child(4) { --i: 4; }
.it-blist li:nth-child(5) { --i: 5; }

@media (max-width: 760px) {
  .it-text { font-size: clamp(30px, 9vw, 46px); }
  /* top bleibt bei 50 % — nur der Einzug wird schmaler. */
  .it-left { left: 20px; }
  /* Kein Platz neben der Aussage; die Marken stehen ohnehin an jeder Uhr
     im Shop. */
  .it-brands { display: none; }
}

/* Finale (Endframe, Uhr rechts): professioneller Shop-Abschluss als linke
   Spalte, vertikal zentriert (Zentrierung via translateY(-50%) in JS). */
.vch-final {
  left: clamp(28px, 7vw, 120px);
  top: 50%;
  max-width: min(460px, 42vw);
}
/* Schluss-Statement in derselben Display-Schrift wie Hero und Kapitel.
   Selektor bewusst (0,2,1): .vch-final h2 wäre (0,1,1) und stünde mit
   .vch h2 gleichauf — es gewänne nur über die Reihenfolge im Quelltext. */
.vch-final .final h2 {
  font-family: var(--font-display), sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7);
}
/* Archivo Black hat keinen Kursivschnitt — das em trägt nur noch Gold. */
.vch-final .final h2 em {
  font-style: normal;
  font-weight: 400;
  color: var(--gold-bright);
}
/* Dezenter Boutique-Button (Rahmen, Gold, Hover füllt) */
/* Abwärts-Hinweis statt Verkaufsknopf: Die Kollektion liegt unmittelbar
   darunter — das wird angekündigt, nicht beworben. */
.final-cue {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
  padding-bottom: 7px;
  font-family: var(--font-sans), sans-serif;
  font-size: 10px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(191, 156, 90, 0.45);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
  transition:
    color 0.35s ease,
    border-color 0.35s ease,
    gap 0.35s ease;
}
.final-cue:hover,
.final-cue:focus-visible {
  color: var(--ink);
  border-color: var(--gold-bright);
  gap: 18px;
}
/* Vertrauenszeile: klein, gesperrt, mit Gold-Haarlinie darüber */
.final-trust {
  margin-top: 40px;
  font-family: var(--font-sans), sans-serif;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}
.final-trust::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  margin-bottom: 20px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
/* Signatur-Wortmarke wie im Header. .brand-text setzt keine Schrift und
   erbt damit Jost bei 7px Sperrung — hier war vorher Cormorant bei 6px,
   also weder dieselbe Schrift noch derselbe Rhythmus. */
.final-sign {
  margin-top: 40px;
  font-family: var(--font-sans), sans-serif;
  font-size: 13px;
  letter-spacing: 7px;
  text-transform: uppercase;
  color: rgba(240, 232, 216, 0.6);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}
.final-sign em {
  font-style: normal;
  color: var(--gold);
}

/* Split-Kapitel: full-bleed, ein Display-Statement links neben der Uhr
   (Positionierung über .it-left, identisch zum Interlude). */
.vch-split {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: none;
}
/* Etwas kleiner als der Interlude-Default: „Ausgewählte" ist elf Zeichen
   breit und darf auch auf schmalen Fenstern nicht in die zentrale Uhr ragen. */
.vch-split .it-text {
  font-size: clamp(24px, 3.3vw, 52px);
}

/* Editorial-Kapitel (Magazin-Raster): große Display-Headline oben links ·
   Haarlinie · Gold-Kapitälchen · Überschrift + Fließtext + Link rechts
   unten. Die Uhr steht mittig frei, die Diagonale oben-links →
   unten-rechts ist dieselbe wie im Split-Kapitel.

   Alle Maße hängen an --ed-hs: Die Schriftgröße skaliert mit vw, feste
   Prozentwerte skalieren mit der HÖHE — bei breiten, flachen Fenstern
   (1920x900) schnitte eine Haarlinie bei festen 23% mitten durch die
   zweite Headline-Zeile. 1.84 ist die Höhe des zweizeiligen
   Satzblocks in em (2 x 0.92 Zeilenhöhe). */
.vch-ed {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: none;
  --ed-x: clamp(28px, 7vw, 120px); /* Einzug wie .it-left */
  --ed-top: 9%;
  /* Knapp unter .it-text (clamp(36px,4.8vw,80px)): bei 4.8vw stieß die
     zweite Zeile von „02 Vertrauen" auf 1280px-Fenstern 11px in den
     Zifferblattrand. Nachgemessen bleiben so überall ≥20px Luft. */
  --ed-hs: clamp(34px, 4.4vw, 76px);
  --ed-gap: 24px;
  --ed-band: calc(var(--ed-top) + var(--ed-hs) * 1.84 + var(--ed-gap));
}
/* Abdunkler: Headline und Datenzeile liegen über Band und Gehäuse, die
   Spalten über den dunklen Rändern — oben/unten etwas kräftiger. */
.ed-scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.78), transparent 34%),
    linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 26%),
    linear-gradient(to right, rgba(0, 0, 0, 0.62), transparent 30%),
    linear-gradient(to left, rgba(0, 0, 0, 0.62), transparent 30%);
}
/* Headline in der Hero-Schrift — zweizeilig per <br>. Einzeilig geht
   nicht: Archivo Black ist 1.83x breiter als eine Serife, „01 ANKAUF &
   VERKAUF" wären bei 1440px Fensterbreite 1604px gegen 1339px Platz. */
.ed-head {
  position: absolute;
  left: var(--ed-x);
  /* Startet unterhalb der Kopfzeile — bei 5% lag die Ziffer hinter dem Logo. */
  top: var(--ed-top);
  right: var(--ed-x);
  font-family: var(--font-display), sans-serif;
  font-weight: 400;
  font-size: var(--ed-hs);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.6);
}
/* Gedämpft: in Archivo Black ist „01" bei 80px ein 105px breiter
   Goldblock — auf voller Sättigung zieht die Ziffer alles an sich. */
.ed-n {
  color: rgba(191, 156, 90, 0.8);
  margin-right: 0.12em;
}
.ed-rule {
  position: absolute;
  left: var(--ed-x);
  right: var(--ed-x);
  top: var(--ed-band);
  height: 1px;
  background: rgba(240, 232, 216, 0.16);
}
/* Rechte Spalte: Breite an die Bühne gekoppelt (Video 2206x946, cover,
   Uhr bis ~+31vh neben der Bildmitte) — sie wächst nie ins Zifferblatt,
   max() hält sie lesbar. Bei top:52% ist das Zifferblatt an seiner
   breitesten Stelle, daher 32px Puffer statt 24px. */
.ed-r {
  position: absolute;
  top: 52%;
  right: var(--ed-x);
  max-width: max(240px, min(360px, calc(50vw - 31vh - var(--ed-x) - 32px)));
}
/* Linke Spalte: Spiegel von .ed-r auf gleicher Höhe. Dieselbe Breitenformel —
   sie misst den Abstand zwischen Fensterrand und Zifferblatt und ist damit
   seitenunabhängig. Beide Spalten flankieren die Uhr unter dem Headline-Band. */
.ed-l {
  position: absolute;
  top: 52%;
  left: var(--ed-x);
  max-width: max(240px, min(360px, calc(50vw - 31vh - var(--ed-x) - 32px)));
}
/* Label in Gold-Kapitälchen (Typografie kommt aus der .it-cap-Gruppe oben),
   darunter eine kurze Haarlinie als Absatz zur Schrittliste. */
.ed-lt {
  display: block;
}
.ed-l-rule {
  height: 1px;
  margin: 13px 0 17px;
  background: rgba(240, 232, 216, 0.16);
}
/* Die Ziffern kommen aus einem CSS-Counter statt aus dem Markup: bei drei
   Kapiteln à vier Schritten wären das zwölf handgeschriebene Nummern, die
   beim Umsortieren stillschweigend falsch würden. */
.ed-steps {
  counter-reset: step;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin: 0;
  padding: 0;
}
.ed-steps li {
  display: flex;
  gap: 14px;
  font-family: var(--font-sans), sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.2px;
  /* Eine Spur schwächer als .ed-p (0.88): die rechte Spalte bleibt die
     Hauptaussage, die Schritte sind der Beleg dazu. */
  color: rgba(240, 232, 216, 0.82);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}
.ed-steps li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  flex: none;
  width: 22px;
  padding-top: 3px;
  font-size: 10px;
  letter-spacing: 2px;
  /* Gedämpft wie die Ziffer in der Headline — sonst zieht die Nummer mehr
     Aufmerksamkeit als der Schritt, den sie zählt. */
  color: rgba(191, 156, 90, 0.75);
}
/* Der Einlauf-Versatz steht hier statt inline im Markup: zwölf gleichartige
   Listenpunkte mit je einem --i im JSX wären reine Wiederholung. */
.ed-steps li:nth-child(1) { --i: 4; }
.ed-steps li:nth-child(2) { --i: 5; }
.ed-steps li:nth-child(3) { --i: 6; }
.ed-steps li:nth-child(4) { --i: 7; }

/* .vch h2 setzt Serifen — hier bewusst überschrieben (höhere Spezifität),
   die rechte Überschrift ist wie in der Vorlage eine Grotesk. */
.vch .ed-t {
  font-family: var(--font-sans), sans-serif;
  font-weight: 400;
  font-size: clamp(19px, 1.7vw, 27px);
  line-height: 1.25;
  letter-spacing: 0.2px;
  color: var(--ink);
  margin: 0 0 14px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.85);
}
/* .vch p ist (0,1,1) — als bloßes .ed-p (0,1,0) hätte hier nichts
   gegriffen und der Fließtext liefe weiter mit 13px/2.05. */
.vch .ed-p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.78;
  letter-spacing: 0.2px;
  color: rgba(240, 232, 216, 0.88);
  max-width: none;
  margin: 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}
/* Gold-Kapitälchen-Zeile unter der Haarlinie — bewusst ein eigenes
   Element und kein Kind von .ed-head: dort erbte sie line-height 0.92
   eines 80px-Elternteils (9px Zeilenkasten um 14px Schrift) und
   verlöre ihren eigenen Einblend-Schritt. */
.ed-cap {
  position: absolute;
  left: var(--ed-x);
  right: var(--ed-x);
  top: calc(var(--ed-band) + 16px);
}
/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .chrome header { padding: 18px 20px; }
  .brand { font-size: 11px; letter-spacing: 5px; }
  .vch { max-width: calc(100vw - 40px); }
  /* Die Vollbild-Kapitel setzen max-width:none — gleiche Spezifität wie
     die .vch-Zeile darüber, die aber später steht und deshalb gewann.
     Folge: die Sektion wurde ein 360px-Kasten am linken Rand, alle
     Kindpositionen rechneten gegen 360px statt gegen das Fenster (auf
     einem 430px-Telefon 70px tote Fläche rechts). */
  .vch-hero, .vch-split, .vch-ed { max-width: none; }
  .vch h2 { font-size: 32px; }
  .vch-final { left: 20px; right: 20px; top: 50%; }
  /* Editorial-Kapitel: Headline oben, Textspalte unten, Uhr dazwischen. */
  .vch-ed {
    --ed-x: 20px;
    --ed-top: 8%;
    --ed-hs: clamp(28px, 9.2vw, 44px);
    --ed-gap: 16px;
  }
  .ed-cap { font-size: 8.5px; letter-spacing: 2px; }
  .ed-r { left: 20px; right: 20px; top: auto; bottom: 10%; max-width: none; }
  /* Kein Platz für eine zweite Spalte: hier wird .ed-r bereits zum
     vollbreiten Block unten, Headline und Uhr füllen den Rest. Der Ablauf
     erscheint auf Telefonen also nicht — er gehört dort auf eine eigene
     Seite, nicht über ein laufendes Video. */
  .ed-l { display: none; }
  /* .vch .ed-t bzw. .vch p schlagen die bloßen Klassen — ohne den
     .vch-Präfix hätte hier nichts von beidem gegriffen. */
  .vch .ed-t { font-size: 20px; }
  .vch .ed-p { font-size: 12.5px; line-height: 1.65; }
  .ed-scrim {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, 0.84), transparent 46%),
      linear-gradient(to top, rgba(0, 0, 0, 0.86), transparent 42%);
  }
  .vch-hero { padding: 0 18px; gap: 18px; }
  /* 11,5vw statt 14vw: „TIMEWALKER" ist zehn Buchstaben breit (~7,5em) und
     würde sonst auf schmalen Geräten über den 18px-Rand hinauslaufen. */
  .hero-title .hl-line { font-size: clamp(34px, 11.5vw, 56px); }
  .hero-claim { font-size: 9px; letter-spacing: 2px; }
  .hero-logo { width: 68vw; }
  .stage-grade {
    background:
      linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent 36%),
      linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 26%);
  }
}

/* ---------- Shop / Kollektion ---------- */
.shop {
  min-height: 100vh;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(191, 156, 90, 0.10), transparent 60%),
    var(--bg);
  padding: 0 clamp(20px, 6vw, 96px) 96px;
}
.shop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 0;
  border-bottom: 1px solid rgba(228, 205, 158, 0.10);
}
.shop-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 7px;
  text-transform: uppercase;
}
.shop-brand-mark {
  height: 44px;
  width: auto;
  display: block;
}
.shop-brand em {
  font-style: normal;
  color: var(--gold);
}
.shop-back {
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  background: none;
  border: 1px solid rgba(201, 163, 94, 0.45);
  padding: 10px 22px;
  cursor: pointer;
  transition: all 0.4s ease;
}
.shop-back:hover {
  background: var(--gold);
  color: #0a0a0a;
  border-color: var(--gold);
}

.shop-kicker {
  font-size: 11px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.shop-title {
  font-family: var(--font-serif), serif;
  font-weight: 400;
  font-size: clamp(40px, 8vw, 76px);
  line-height: 1.02;
  color: var(--ink);
}
.shop-title em {
  font-style: italic;
  color: var(--gold-bright);
}
/* ---------- Die Kollektions-Seite ---------- */
/* Der Kopf behält den Seitenrand; die Sektion bringt ihren eigenen mit. */
.shop--collection {
  padding-left: 0;
  padding-right: 0;
}
.shop--collection .shop-head {
  padding-left: clamp(20px, 6vw, 96px);
  padding-right: clamp(20px, 6vw, 96px);
}

/* ---------- Kollektion: ruhiges Raster ---------- */
/* Eigener Grund, weil die Sektion auf der Startseite über der fixierten
   Video-Bühne liegt und diese abdecken muss. */
.collection-section {
  background: var(--bg);
  padding: clamp(56px, 8vw, 104px) clamp(20px, 6vw, 96px)
    clamp(56px, 8vw, 96px);
}
.collection-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 10px 24px;
  max-width: 1180px;
  margin: 0 auto clamp(32px, 5vw, 56px);
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(191, 156, 90, 0.28);
}
/* Der Kicker steht über beiden Spalten, Titel und Zähler teilen sich die Zeile. */
.collection-head .shop-kicker {
  grid-column: 1 / -1;
  margin-bottom: 0;
}
.collection-count {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  padding-bottom: 8px;
}
/* auto-fill + minmax ergibt von selbst 3 Spalten am Desktop, 2 am Tablet,
   1 am Handy — ohne feste Haltepunkte. */
.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
  max-width: 1180px;
  margin: 0 auto;
}

/* Einlauf der Kollektion. Eigene Klasse statt .gl, weil .gl im Video an die
   scroll-getriebene Kapitel-Steuerung gekoppelt ist. Keyframes werden
   geteilt. */
.collection-section .cr {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  will-change: opacity, transform, filter;
}
.collection-section.is-in .cr {
  animation: glIn 0.92s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms + 60ms);
}
/* .is-in muss hier ausdrücklich mitgenannt werden: Ohne das hätte die Regel
   darüber die höhere Spezifität und würde trotz reduzierter Bewegung
   animieren. */
@media (prefers-reduced-motion: reduce) {
  .collection-section .cr,
  .collection-section.is-in .cr {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
}

.collection-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  position: relative;
  /* Kein Kartenkörper: Die Uhren stehen frei auf dem Seitengrund. Den
     Schatten trägt das Foto selbst (.collection-photo), er folgt damit der
     Silhouette der Uhr statt einem Rechteck. */
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.collection-card:hover {
  transform: translateY(-6px);
  z-index: 2;
}
.collection-card:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

/* Reserviert und verkauft: im Foto zurückgenommen, damit die verfügbaren
   Uhren vorn stehen. Bleiben vollwertige Links; bei Hover und Tastatur-Fokus
   kommt das Foto zurück. Das Platzhalter-Monogramm (.collection-mark) ist
   davon ausgenommen — es ist ohnehin schon fast durchsichtig. */
.collection-card.is-unavailable .collection-photo {
  opacity: 0.55;
  transition:
    opacity 0.4s ease,
    transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.collection-card.is-unavailable:hover .collection-photo,
.collection-card.is-unavailable:focus-visible .collection-photo {
  opacity: 1;
}

.collection-media {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.collection-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 18px;
  display: block;
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.55));
  transition:
    transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform, filter;
  -webkit-user-drag: none;
  user-select: none;
}
/* Hover: Die Uhr hebt leicht ab. Kein Beschnitt mehr, deshalb fällt der Zoom
   kleiner aus als zu Zeiten der Karte — sonst ragte sie in die Nachbarn. */
.collection-card:hover .collection-photo {
  transform: scale(1.06);
  filter: drop-shadow(0 34px 40px rgba(0, 0, 0, 0.62));
}
.collection-mark {
  width: 44%;
  opacity: 0.14;
  -webkit-user-drag: none;
}

.cc-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
}
.cc-kind {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
}

.collection-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 8px 4px;
  text-align: center;
}
.collection-name {
  font-family: var(--font-serif), serif;
  font-size: 18px;
  letter-spacing: 0.5px;
  color: var(--ink);
}
.collection-meta {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
}
.collection-price {
  margin-top: 4px;
  font-family: var(--font-serif), serif;
  font-size: 16px;
  color: var(--gold-bright);
}

@media (prefers-reduced-motion: reduce) {
  .collection-card,
  .collection-photo {
    transition: none;
  }
  .collection-card:hover {
    transform: none;
  }
  .collection-card:hover .collection-photo {
    transform: none;
  }
}

/* Leerer Zustand */
.shop-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 60px 0 40px;
  text-align: center;
}
.shop-empty-mark {
  width: 92px;
  opacity: 0.2;
}
.shop-empty-text {
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--muted);
}
.shop-cta,
.detail-edit {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-decoration: none;
  border: 1px solid rgba(191, 156, 90, 0.55);
  padding: 15px 40px;
  transition: all 0.4s ease;
}
.shop-cta:hover,
.detail-edit:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #0a0a0a;
  letter-spacing: 7px;
}

/* ---------- Detailseite ---------- */
.detail {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  max-width: 1120px;
  margin: 0 auto;
  align-items: center;
}
.detail-media {
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(228, 205, 158, 0.12);
  border-radius: 20px;
  background: radial-gradient(80% 70% at 50% 40%, rgba(191, 156, 90, 0.08), transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.detail-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 22px;
}
.detail-mark {
  width: 42%;
  opacity: 0.16;
}
.detail-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.detail-brand {
  font-size: 12px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--gold);
}
.detail-eyebrow .detail-brand {
  margin-bottom: 0;
}

/* Neu / Pre-owned — Herkunfts-Label (aus dem Zustand abgeleitet) */
.kind-chip {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
}
.kind-new {
  color: #0a0a0a;
  background: var(--gold-bright);
  border-color: var(--gold-bright);
}
.kind-used {
  color: var(--muted);
  border-color: rgba(228, 205, 158, 0.3);
  background: rgba(228, 205, 158, 0.06);
}
.detail-model {
  font-family: var(--font-serif), serif;
  font-weight: 400;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.04;
  color: var(--ink);
}
.detail-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  margin: 30px 0;
  padding: 24px 0;
  border-top: 1px solid rgba(228, 205, 158, 0.10);
  border-bottom: 1px solid rgba(228, 205, 158, 0.10);
}
.detail-specs dt {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.detail-specs dd {
  font-family: var(--font-serif), serif;
  font-size: 18px;
  color: var(--ink);
}
.detail-price {
  font-family: var(--font-serif), serif;
  font-size: 26px;
  color: var(--gold-bright);
  margin-bottom: 18px;
}
.detail-desc {
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
  margin-bottom: 30px;
  max-width: 460px;
}

/* ---------- Verwaltung ---------- */

/* Im Dashboard trägt eine einzige Schrift alles: Plus Jakarta Sans.
   Überschriften, Kennzahlen, Uhrennamen, Beschriftungen, Eingaben.
   Das Panel ist Werkzeug, nicht Schaufenster — es soll sich von der
   Verkaufsseite unterscheiden.

   Umgesetzt über die beiden Schrift-Variablen statt über die rund vierzig
   font-family-Regeln darunter: Die lösen dadurch von selbst auf Jakarta
   auf, und weil die Umdefinition nur an .ap und .login hängt, kann sie
   bauartbedingt nicht auf Startseite, Shop oder Rechtstexte durchschlagen.

   Die font-family-Zeile ist NICHT überflüssig neben den beiden Variablen:
   Elemente ohne eigene font-family-Regel erben den Wert von body — und dort
   wurde var(--font-sans) bereits zu Jost aufgelöst. Eine Variable wird an
   der Stelle ersetzt, an der die Deklaration steht, nicht beim Erben. Ohne
   diese Zeile bliebe z. B. .login-kicker auf Jost stehen.

   .ap    ist die Wurzel des Panels (app/views/admin/layout.php)
   .login trägt Anmeldung, Passwort-vergessen und Passwort-zurücksetzen */
.ap,
.login {
  --font-serif: var(--font-ui);
  --font-sans: var(--font-ui);
  font-family: var(--font-ui), sans-serif;
}

.admin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  max-width: 1180px;
  margin: 0 auto;
  align-items: start;
}
.admin-form,
.admin-list {
  border: 1px solid rgba(228, 205, 158, 0.12);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(46, 39, 28, 0.24), rgba(12, 11, 9, 0.20));
  padding: clamp(22px, 3vw, 34px);
}
.admin-form-title {
  font-family: var(--font-serif), serif;
  font-weight: 400;
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-count {
  font-family: var(--font-sans), sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--gold);
  border: 1px solid rgba(191, 156, 90, 0.4);
  border-radius: 20px;
  padding: 2px 12px;
}

/* Bild-Upload */
.admin-image {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  border: 1px dashed rgba(228, 205, 158, 0.30);
  border-radius: 14px;
  cursor: pointer;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.25);
  transition: border-color 0.3s ease;
}
.admin-image:hover {
  border-color: rgba(228, 205, 158, 0.55);
}
.admin-image-preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}
.admin-image-hint {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
}
.admin-image-remove {
  align-self: flex-start;
  margin: 10px 0 4px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: underline;
}
.admin-image-remove:hover {
  color: var(--gold-bright);
}

/* Felder */
.admin-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.admin-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 16px;
}
.admin-row .admin-field {
  margin-top: 0;
}
.admin-field span {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
}
.admin-field input,
.admin-field textarea {
  font-family: var(--font-sans), sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(228, 205, 158, 0.16);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.3s ease;
  resize: vertical;
}
.admin-field input:focus,
.admin-field textarea:focus {
  outline: none;
  border-color: rgba(227, 200, 143, 0.6);
}
.admin-field input::placeholder,
.admin-field textarea::placeholder {
  color: rgba(240, 232, 216, 0.32);
}

.admin-error {
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #e0a0a0;
}
.admin-actions {
  display: flex;
  gap: 14px;
  margin-top: 24px;
}
.admin-save {
  font-family: var(--font-sans), sans-serif;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #0a0a0a;
  background: var(--gold);
  border: 1px solid var(--gold);
  padding: 15px 34px;
  cursor: pointer;
  transition: all 0.4s ease;
}
.admin-save:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
}
.admin-save:disabled {
  opacity: 0.5;
  cursor: default;
}
.admin-cancel {
  font-family: var(--font-sans), sans-serif;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 1px solid rgba(228, 205, 158, 0.22);
  padding: 15px 28px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.admin-cancel:hover {
  color: var(--ink);
  border-color: rgba(228, 205, 158, 0.4);
}

/* Liste */
.admin-empty {
  font-size: 13px;
  color: var(--muted);
  padding: 10px 0;
}
.admin-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid rgba(228, 205, 158, 0.08);
}
.admin-item:first-of-type {
  border-top: none;
}
.admin-item.is-editing {
  outline: 1px solid rgba(191, 156, 90, 0.4);
  outline-offset: 8px;
  border-radius: 6px;
}
.admin-item-thumb {
  flex: none;
  width: 62px;
  height: 62px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(228, 205, 158, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.admin-item-thumb .admin-item-mark {
  opacity: 0.25;
}
.admin-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-item-name {
  font-family: var(--font-serif), serif;
  font-size: 16px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-item-meta {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
}
.admin-item-actions {
  display: flex;
  gap: 8px;
  flex: none;
}
.admin-item-actions button {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 1px solid rgba(228, 205, 158, 0.18);
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.admin-item-actions button:hover {
  color: var(--ink);
  border-color: rgba(228, 205, 158, 0.4);
}
.admin-item-actions .is-danger:hover {
  color: #e0a0a0;
  border-color: rgba(224, 160, 160, 0.5);
}

@media (max-width: 860px) {
  .detail { grid-template-columns: minmax(0, 1fr); }
  .admin { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .shop-brand span { font-size: 11px; letter-spacing: 5px; }
  .admin-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .admin-item { flex-wrap: wrap; }
}

/* ---------- Login (Verwaltung) ---------- */
.login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(191, 156, 90, 0.10), transparent 60%),
    var(--bg);
}
.login-card {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  border: 1px solid rgba(228, 205, 158, 0.12);
  border-radius: 22px;
  padding: 48px 40px;
  background: linear-gradient(160deg, rgba(46, 39, 28, 0.24), rgba(12, 11, 9, 0.20));
}
.login-mark { width: 68px; opacity: 0.9; }
.login-kicker {
  font-size: 11px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--gold);
}
.login-title {
  font-family: var(--font-serif), serif;
  font-weight: 400;
  font-size: 30px;
  color: var(--ink);
  margin-bottom: 6px;
}
.login-input {
  width: 100%;
  text-align: center;
  font-family: var(--font-sans), sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(228, 205, 158, 0.18);
  border-radius: 10px;
  padding: 14px 16px;
}
.login-input:focus {
  outline: none;
  border-color: rgba(227, 200, 143, 0.6);
}
.login-error {
  font-size: 12px;
  letter-spacing: 1px;
  color: #e0a0a0;
}
.login-btn {
  width: 100%;
  font-family: var(--font-sans), sans-serif;
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #0a0a0a;
  background: var(--gold);
  border: 1px solid var(--gold);
  padding: 15px;
  cursor: pointer;
  transition: all 0.4s ease;
  margin-top: 4px;
}
.login-btn:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
}
.login-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.login-forgot {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--muted);
  text-decoration: none;
  margin-top: -4px;
}
.login-forgot:hover {
  color: var(--gold-bright);
}
.login-hint {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
}

/* Bild-Upload: Hinweiszeile (Auto-Freistellen) + Entfernen-Button */
.admin-image-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 2px 4px;
}
.admin-image-note {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--muted);
}
.admin-image-foot .admin-image-remove {
  margin: 0;
  align-self: auto;
  flex: none;
}

/* ================= Admin-Panel ================= */
.ap { display: flex; min-height: 100vh; background: var(--bg); }

/* Sidebar */
.ap-side {
  width: 250px; flex: none; position: sticky; top: 0; align-self: flex-start;
  height: 100vh; display: flex; flex-direction: column;
  padding: 30px 20px; border-right: 1px solid rgba(228,205,158,0.10);
  background: linear-gradient(180deg, rgba(20,17,12,0.6), rgba(8,8,8,0.6));
}
.ap-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 26px; }
.ap-brand img { height: 40px; width: auto; }
.ap-brand span { font-size: 12px; letter-spacing: 5px; text-transform: uppercase; color: var(--ink); }
.ap-brand em { font-style: normal; color: var(--gold); }
.ap-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ap-nav-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-radius: 10px; text-decoration: none;
  font-size: 13px; letter-spacing: 1px; color: var(--muted); transition: all .25s ease;
}
.ap-nav-item:hover { color: var(--ink); background: rgba(255,255,255,0.03); }
.ap-nav-item.is-active { color: var(--ink); background: rgba(227,200,143,0.10); box-shadow: inset 2px 0 0 var(--gold); }
.ap-badge {
  font-size: 10px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--gold); color: #0a0a0a; display: inline-flex; align-items: center; justify-content: center;
}
.ap-side-foot { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid rgba(228,205,158,0.08); }
.ap-side-link { font-size: 11px; letter-spacing: 1px; color: var(--muted); text-decoration: none; padding: 6px 8px; }
.ap-side-link:hover { color: var(--gold-bright); }
.ap-logout {
  font-family: inherit; font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--muted); background: none; border: 1px solid rgba(228,205,158,0.20);
  border-radius: 8px; padding: 10px; cursor: pointer; transition: all .3s ease;
}
.ap-logout:hover { color: var(--ink); border-color: rgba(228,205,158,0.4); }

/* Main */
.ap-main { flex: 1; min-width: 0; }
.ap-page { padding: clamp(24px, 4vw, 48px); max-width: 1200px; }
/* Die Kollektionsverwaltung stellt Formular und Liste nebeneinander und
   braucht dafür die ganze Breite — bei 1200px teilten sich beide Karten
   rund 1100px, weshalb die Liste lange Uhrennamen abschnitt.
   Dashboard, Anfragen und Einstellungen behalten ihre 1200px: Ein
   Einstellungsformular über 1700px zu ziehen macht es nicht lesbarer. */
.ap-page-wide { max-width: none; }
.ap-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.ap-kicker { font-size: 11px; letter-spacing: 5px; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.ap-title { font-family: var(--font-serif), serif; font-weight: 400; font-size: clamp(30px, 4vw, 44px); color: var(--ink); line-height: 1; }
.ap-count { font-size: 12px; letter-spacing: 2px; color: var(--muted); }

.ap-btn {
  font-family: var(--font-sans), sans-serif; font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: #0a0a0a; background: var(--gold); border: 1px solid var(--gold); border-radius: 8px;
  padding: 13px 26px; cursor: pointer; text-decoration: none; display: inline-block; transition: all .35s ease;
}
.ap-btn:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
.ap-btn:disabled { opacity: .55; cursor: default; }
.ap-btn-ghost {
  font-family: inherit; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted);
  background: none; border: 1px solid rgba(228,205,158,0.22); border-radius: 8px; padding: 13px 22px; cursor: pointer;
}
.ap-btn-ghost:hover { color: var(--ink); border-color: rgba(228,205,158,0.4); }

.ap-card {
  border: 1px solid rgba(228,205,158,0.12); border-radius: 18px; padding: clamp(20px, 3vw, 30px);
  background: linear-gradient(160deg, rgba(46,39,28,0.22), rgba(12,11,9,0.18));
}
.ap-card-title { font-family: var(--font-serif), serif; font-weight: 400; font-size: 20px; color: var(--ink); margin-bottom: 20px; }
.ap-empty { font-size: 13px; color: var(--muted); }
.ap-note { font-size: 11px; letter-spacing: .5px; color: var(--muted); margin: 8px 2px 18px; }
.ap-error { font-size: 12px; color: #e0a0a0; margin-top: 14px; }
.ap-success { font-size: 12px; color: #a7d3a0; margin-top: 14px; }
.ap-actions { display: flex; gap: 12px; margin-top: 24px; }

/* Felder */
.ap-field { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; }
.ap-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.ap-row .ap-field { margin-top: 0; }
.ap-field span { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); }
.ap-hint { font-size: 11px; letter-spacing: 0.3px; text-transform: none; color: var(--muted); line-height: 1.5; }
.ap-hint em { font-style: normal; color: var(--gold-bright); }
.ap-field input, .ap-field select, .ap-field textarea {
  font-family: var(--font-sans), sans-serif; font-size: 14px; color: var(--ink);
  background: rgba(0,0,0,0.30); border: 1px solid rgba(228,205,158,0.16); border-radius: 10px;
  padding: 12px 14px; transition: border-color .3s ease; resize: vertical;
}
.ap-field input:focus, .ap-field select:focus, .ap-field textarea:focus { outline: none; border-color: rgba(227,200,143,0.6); }
.ap-field input::placeholder, .ap-field textarea::placeholder { color: rgba(240,232,216,0.32); }
.ap-field select option { background: #14110c; }

/* KPIs */
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 22px; }
.kpi { border: 1px solid rgba(228,205,158,0.12); border-radius: 16px; padding: 22px; background: linear-gradient(160deg, rgba(46,39,28,0.20), rgba(12,11,9,0.16)); }
.kpi.is-accent { border-color: rgba(227,200,143,0.35); background: linear-gradient(160deg, rgba(191,156,90,0.14), rgba(12,11,9,0.16)); }
.kpi-value { display: block; font-family: var(--font-serif), serif; font-size: 40px; line-height: 1; color: var(--ink); }
.kpi-label { display: block; margin-top: 8px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }

/* Dashboard-Grid */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dash-card-title { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.dash-chart { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.donut { width: 160px; height: 160px; flex: none; }
.donut-num { fill: var(--ink); font-family: var(--font-serif), serif; font-size: 24px; text-anchor: middle; }
.donut-cap { fill: var(--muted); font-size: 8px; letter-spacing: 2px; text-anchor: middle; text-transform: uppercase; }
.dash-legend { list-style: none; display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 150px; }
.dash-legend li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink); }
.dash-legend .dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.dash-legend-label { flex: 1; color: var(--muted); }
.dash-legend-val { color: var(--ink); }
.dash-recent { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.dash-recent li { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid rgba(228,205,158,0.07); }
.dash-recent li:first-child { border-top: none; }
.dash-recent-thumb { width: 46px; height: 46px; flex: none; border-radius: 8px; overflow: hidden; background: rgba(0,0,0,0.3); border: 1px solid rgba(228,205,158,0.10); display: flex; align-items: center; justify-content: center; }
.dash-recent-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.dash-recent-thumb img.is-mark { opacity: .25; }
.dash-recent-name { flex: 1; font-family: var(--font-serif), serif; font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Badges */
.badge { display: inline-flex; align-items: center; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; border: 1px solid; white-space: nowrap; }
.badge-published { color: var(--gold-bright); border-color: rgba(227,200,143,0.4); background: rgba(227,200,143,0.08); }
.badge-reserved { color: #d9b978; border-color: rgba(191,156,90,0.5); background: rgba(191,156,90,0.12); }
.badge-sold { color: var(--muted); border-color: rgba(240,232,216,0.25); background: rgba(240,232,216,0.05); }
.badge-draft { color: var(--muted); border-color: rgba(240,232,216,0.22); background: transparent; border-style: dashed; }

/* Kollektion */
.col-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.col-internal { margin-top: 18px; padding-top: 14px; border-top: 1px dashed rgba(228,205,158,0.14); }
.col-internal-title { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }

/* Galerie im Editor */
/* Zwei getrennte Bildbereiche: Titelbild (freigestellt, allein im Shop-Raster)
   und echte Aufnahmen (unverändert). Getrennt, weil sie unterschiedlich
   verarbeitet werden — im Raster wäre der Unterschied sonst unsichtbar. */
.img-zone { margin-bottom: 4px; }
.img-zone-head { display: flex; align-items: center; gap: 10px; margin: 0 2px 9px; }
.img-zone-title { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.img-zone-count { font-size: 10px; letter-spacing: 1px; color: var(--muted); }
.img-zone-toggle { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.img-zone-toggle input { accent-color: var(--gold); cursor: pointer; }
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.gal-item { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid rgba(228,205,158,0.14); background: rgba(0,0,0,0.3); }
.gal-item img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.gal-cover { position: absolute; top: 6px; left: 6px; font-size: 8px; letter-spacing: 1px; text-transform: uppercase; background: var(--gold); color: #0a0a0a; padding: 2px 7px; border-radius: 10px; }
.gal-item-actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.gal-item-actions button { width: 22px; height: 22px; border-radius: 6px; border: none; background: rgba(0,0,0,0.6); color: var(--ink); cursor: pointer; font-size: 11px; line-height: 1; }
.gal-item-actions button:hover { background: rgba(0,0,0,0.85); }
.gal-add { aspect-ratio: 1; border: 1px dashed rgba(228,205,158,0.3); border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: rgba(0,0,0,0.2); transition: border-color .3s ease; }
.gal-add:hover { border-color: rgba(228,205,158,0.55); }
.gal-add.is-busy { cursor: default; }
.gal-add-hint { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); text-align: center; padding: 6px; }

/* Kollektions-Liste */
/* Die ganze Zeile ist anklickbar und oeffnet die Uhr im Formular. Der
   negative Aussenabstand zieht die Hover-Flaeche ueber die Kartenpolsterung
   hinaus, damit sie bis an den Rand reicht statt als schmaler Streifen in der
   Mitte zu stehen. */
.col-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 10px; margin: 0 -10px; border-top: 1px solid rgba(228,205,158,0.08); border-radius: 8px; cursor: pointer; transition: background .18s ease; }
.col-item:hover { background: rgba(228,205,158,0.055); }
.col-item:focus-visible { outline: 1px solid rgba(191,156,90,0.55); outline-offset: -1px; }
/* Beim Ueberfahren wird der Titel golden — das Signal, dass hier etwas passiert,
   ohne dass ein zusaetzlicher Knopf noetig waere. */
.col-item:hover .col-item-name { color: var(--gold-bright); }
.col-item:first-of-type { border-top: none; }
.col-item-name { transition: color .18s ease; }
.col-item.is-editing { outline: 1px solid rgba(191,156,90,0.4); outline-offset: 6px; border-radius: 6px; }
.col-item-thumb { width: 54px; height: 54px; flex: none; border-radius: 8px; overflow: hidden; background: rgba(0,0,0,0.3); border: 1px solid rgba(228,205,158,0.10); display: flex; align-items: center; justify-content: center; }
.col-item-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.col-item-thumb img.is-mark { opacity: .25; }
/* Zweizeilig: Titelzeile mit Statuspunkt, darunter Metadaten, darunter die
   Aktionen. Vorher standen alle fuenf Bloecke in EINER Flex-Zeile — fest belegt
   waren rund 383px, auf einem 1440er-Laptop blieben dem Namen ~140px, weshalb
   er per ellipsis abgeschnitten wurde. */
.col-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.col-item-top { display: flex; align-items: baseline; gap: 12px; }
/* Kein nowrap/ellipsis mehr: lieber zweizeilig als abgeschnitten. */
.col-item-name { flex: 1; min-width: 0; font-family: var(--font-serif), serif; font-size: 15px; line-height: 1.3; color: var(--ink); }
.col-item-meta { font-size: 11px; color: var(--muted); }
.col-item-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 3px; }
/* Nur in der Verwaltungsliste: Punkt statt Pille. Als gerahmtes Abzeichen las
   sich der Status wie ein Knopf und drueckte den Titel zusammen. `.badge`
   selbst bleibt unveraendert — es traegt auch den oeffentlichen Shop. */
.col-item-badge { flex: none; gap: 6px; border: none; background: none; padding: 0; letter-spacing: 1.5px; }
.col-item-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.col-item-actions button, .inq-actions button {
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
  background: none; border: 1px solid rgba(228,205,158,0.18); padding: 7px 12px; cursor: pointer; border-radius: 6px; transition: all .3s ease;
}
.col-item-actions button:hover, .inq-actions button:hover { color: var(--ink); border-color: rgba(228,205,158,0.4); }
.col-item-actions .is-danger:hover, .inq-actions .is-danger:hover { color: #e0a0a0; border-color: rgba(224,160,160,0.5); }

/* Posteingang */
.inbox { display: flex; flex-direction: column; gap: 14px; }
.inq { border: 1px solid rgba(228,205,158,0.12); border-radius: 16px; padding: 20px 24px; background: linear-gradient(160deg, rgba(46,39,28,0.20), rgba(12,11,9,0.16)); }
.inq.is-read { opacity: .7; }
.inq-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.inq-who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inq-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; }
.inq-name { font-family: var(--font-serif), serif; font-size: 17px; color: var(--ink); }
.inq-email { font-size: 12px; color: var(--gold); text-decoration: none; }
.inq-email:hover { text-decoration: underline; }
.inq-date { font-size: 11px; color: var(--muted); flex: none; }
.inq-watch { font-size: 12px; color: var(--muted); margin-top: 8px; }
.inq-watch strong { color: var(--ink); font-weight: 500; }
.inq-msg { font-size: 14px; line-height: 1.7; color: var(--ink); margin-top: 10px; white-space: pre-wrap; }
.inq-actions { display: flex; gap: 8px; margin-top: 16px; }

.set-form { max-width: 460px; }

/* Öffentliche Galerie + Anfrage */
.gallery { display: flex; flex-direction: column; gap: 14px; }
.gallery-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.gallery-thumb { width: 68px; height: 68px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(228,205,158,0.16); background: rgba(0,0,0,0.3); cursor: pointer; padding: 0; transition: border-color .3s ease; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.gallery-thumb.is-active { border-color: var(--gold); }
.card-badge { position: absolute; top: 14px; left: 14px; z-index: 2; }
.detail-badge { margin-bottom: 18px; }

.iq { margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(228,205,158,0.12); display: flex; flex-direction: column; gap: 12px; }
.iq-title { font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); }
.iq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.iq input, .iq textarea {
  font-family: var(--font-sans), sans-serif; font-size: 14px; color: var(--ink);
  background: rgba(0,0,0,0.30); border: 1px solid rgba(228,205,158,0.16); border-radius: 10px; padding: 12px 14px; resize: vertical;
}
.iq input:focus, .iq textarea:focus { outline: none; border-color: rgba(227,200,143,0.6); }
.iq input::placeholder, .iq textarea::placeholder { color: rgba(240,232,216,0.32); }
.iq-btn {
  align-self: flex-start; font-family: var(--font-sans), sans-serif; font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--gold-bright); background: transparent; border: 1px solid rgba(191,156,90,0.55); padding: 14px 38px; cursor: pointer; transition: all .4s ease;
}
.iq-btn:hover { background: var(--gold); border-color: var(--gold); color: #0a0a0a; }
.iq-btn:disabled { opacity: .6; cursor: default; }
.iq-err { font-size: 12px; color: #e0a0a0; }
.iq-done { margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(228,205,158,0.12); font-size: 14px; color: var(--gold-bright); }

@media (max-width: 900px) {
  .ap { flex-direction: column; }
  /* Sidebar wird zur Kopfzeile: Logo + Aktionen oben, Nav als eigene,
     geordnete Reihe darunter — statt frei umbrechendem Flex-Wirrwarr. */
  .ap-side {
    position: static; width: 100%; height: auto;
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 10px 16px; padding: 16px 18px 14px;
  }
  .ap-brand { order: 1; flex: 1; padding: 0; }
  .ap-brand img { height: 32px; }
  .ap-side-foot {
    order: 2; flex-direction: row; align-items: center; gap: 16px;
    padding-top: 0; border-top: none;
  }
  .ap-nav {
    order: 3; flex-basis: 100%;
    display: flex; flex-direction: row; flex-wrap: nowrap; gap: 6px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: 0 -18px; padding: 0 18px 4px;
    scrollbar-width: none;
  }
  .ap-nav::-webkit-scrollbar { display: none; }
  .ap-nav-item {
    flex: none; padding: 9px 15px; font-size: 12px;
    border: 1px solid rgba(228,205,158,0.14); border-radius: 20px; gap: 6px;
  }
  .ap-nav-item.is-active { box-shadow: none; border-color: rgba(227,200,143,0.5); }
  .ap-page { padding: 20px 18px 40px; }
  .dash-grid, .col-layout { grid-template-columns: minmax(0, 1fr); }
  .ap-row, .iq-row { grid-template-columns: minmax(0, 1fr); }

  /* Die Umsortierung von früher entfällt: .col-item-body stapelt Titel,
     Metadaten und Aktionen ohnehin untereinander. Auf schmalen Geräten darf
     nur noch die Titelzeile umbrechen, damit der Statuspunkt nicht den Namen
     zusammendrückt. */
  .col-item-top { flex-wrap: wrap; row-gap: 4px; }

  /* Anfragen-Kopf: bei langem Namen/E-Mail rutscht das Datum in eine eigene
     Zeile, statt am rechten Rand abgeschnitten zu werden. */
  .inq-head { flex-wrap: wrap; }
  .inq-date { flex-basis: 100%; }
}

@media (max-width: 420px) {
  .ap-side-foot { gap: 12px; }
  .ap-side-link { padding: 6px 0; }
}

/* ---------- Footer (Shop-Seiten) ---------- */
.site-footer {
  max-width: 1180px;
  margin: clamp(48px, 8vw, 96px) auto 0;
  padding: 22px 0 4px;
  border-top: 1px solid rgba(228, 205, 158, 0.10);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.site-footer-brand {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--muted);
}
.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
/* flex-basis:100% zwingt den Hinweis in eine eigene Zeile unter Marke und
   Links — der Fuß ist ein Flex-Container mit space-between. */
.site-footer-note {
  flex-basis: 100%;
  margin: 12px 0 0;
  max-width: 760px;
  font-size: 9.5px;
  line-height: 1.75;
  letter-spacing: 0.5px;
  color: rgba(240, 232, 216, 0.42);
}
.site-footer-links a {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.3s ease;
}
.site-footer-links a:hover {
  color: var(--gold-bright);
}

/* Footer auf der Startseite: liegt im normalen Fluss UNTER dem Scroll-Raum
   der Video-Bühne. Eigener Grund + z-index, weil .stage fixiert ist und sonst
   durchscheinen würde. */
/* Alles unterhalb der Video-Bühne. z-index 20 liegt über den fixierten
   Kapiteln (.vch, z-index 10) — vorher schwebte deren Text über dem Footer,
   weil dieser nur auf z-index 3 lag. Bewusst OHNE eigenen Hintergrund: Der
   Schleier in .home-veil braucht die Durchsicht auf die Bühne. */
.home-below {
  position: relative;
  z-index: 20;
}

/* Die weiche Übergabe vom Video in die Kollektion.
   Der Verlauf schiebt sich beim Scrollen über die fixierte Bühne UND über
   das Finale-Kapitel und dunkelt beide gleichzeitig zur Kollektion hin ab.
   Reines Layout — deshalb bildgenau, ohne Scroll-Rechnerei und ohne Ruckeln.

   Nicht über den Scroll-Fortschritt in VideoHero gelöst: p erreicht dort 1
   exakt dann, wenn die Kollektion erst zu erscheinen beginnt. Für die
   Überblendung stünde kein Fortschritt mehr zur Verfügung, ohne den
   Scroll-Raum zu verlängern und die Kapitel-Choreografie neu zu kalibrieren.

   pointer-events: none, damit der Abwärts-Hinweis im Finale darunter
   anklickbar bleibt. */
.home-veil {
  height: 55vh;
  background: linear-gradient(
    to bottom,
    rgba(5, 5, 5, 0) 0%,
    rgba(5, 5, 5, 0.55) 42%,
    rgba(5, 5, 5, 0.88) 72%,
    var(--bg) 100%
  );
  pointer-events: none;
}
.home-footer {
  background: var(--bg);
  padding: 0 clamp(20px, 5vw, 56px) clamp(28px, 5vw, 48px);
}
.home-footer .site-footer {
  margin-top: 0;
}

/* ---------- Rechtstexte (Impressum / Datenschutz / AGB) ---------- */
.legal {
  min-height: 100vh;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(191, 156, 90, 0.10), transparent 60%),
    var(--bg);
  padding: 0 clamp(20px, 6vw, 96px) 96px;
}
.legal-body {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 80px) 0 0;
}
.legal-kicker {
  font-size: 11px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.legal-title {
  font-family: var(--font-serif), serif;
  font-weight: 400;
  font-size: clamp(32px, 5vw, 48px);
  color: var(--ink);
  margin-bottom: clamp(32px, 5vw, 48px);
}
.legal-body h2 {
  font-family: var(--font-serif), serif;
  font-weight: 400;
  font-size: 21px;
  color: var(--ink);
  margin: 40px 0 14px;
}
.legal-body h2:first-of-type {
  margin-top: 0;
}
.legal-body p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
  margin-bottom: 10px;
}
.legal-body a {
  color: var(--gold-bright);
}
.legal-placeholder {
  color: var(--gold-bright);
  font-style: italic;
}
.legal-note {
  margin-top: 48px;
  padding: 16px 20px;
  border: 1px dashed rgba(228, 205, 158, 0.3);
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--muted);
}

/* ==========================================================================
   Ergänzungen der PHP-Fassung
   ==========================================================================
   Zwei Regeln, die es vorher nicht brauchte, weil React sie als Inline-Style
   gesetzt hat, plus das versteckte Honeypot-Feld des Anfrageformulars.
   -------------------------------------------------------------------------- */

/* Das hidden-Attribut muss gewinnen.
   In der React-Fassung wurden ein- und ausblendbare Teile gar nicht erst
   gerendert. Hier stehen sie im Markup und werden über `hidden` geschaltet —
   und dessen display:none aus dem Browser-Standard verliert gegen jede
   eigene display-Regel (.iq { display: flex } etc.). Ohne diese Zeile bliebe
   z. B. das abgeschickte Anfrageformular neben der Dankesmeldung stehen. */
[hidden] {
  display: none !important;
}

/* Scroll-Raum des Video-Heros: 14 Bildschirmhöhen. Steuert die gesamte
   Kapitel-Choreografie — wer hier etwas ändert, verschiebt jede data-from/
   data-to-Marke im Markup mit. */
.hero-scrollspace {
  height: 1400vh;
}

/* Honeypot: für Menschen unsichtbar, für Bots ein normales Textfeld.
   Bewusst nicht display:none — manche Bots überspringen versteckte Felder. */
.iq-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   Kopfzeile der Verwaltung: Burger links, Glocke und Profil rechts.
   ═══════════════════════════════════════════════════════════════════════ */

.ap-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(18px, 4vw, 48px);
  border-bottom: 1px solid rgba(228,205,158,0.08);
  background: rgba(10,10,10,0.55);
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(10px);
}
.ap-top-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* ── Burger ─────────────────────────────────────────────────────────────
   Auf breiten Bildschirmen steht die Seitenleiste ohnehin da — der Knopf
   erscheint erst unter 900px (siehe Mobil-Block weiter unten). */
.ap-burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 4px;
  width: 38px; height: 38px; padding: 0 9px;
  border: 1px solid rgba(228,205,158,0.18); border-radius: 9px;
  background: none; cursor: pointer;
}
.ap-burger span {
  display: block; height: 1.5px; background: var(--ink); border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
/* Aufgeklappt wird aus den drei Strichen ein Kreuz. */
.ap-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.ap-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ap-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ── Glocke ─────────────────────────────────────────────────────────── */
.ap-bell {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9px;
  color: var(--muted); text-decoration: none;
  transition: color .2s ease, background .2s ease;
}
.ap-bell:hover { color: var(--ink); background: rgba(255,255,255,0.04); }
.ap-bell svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ap-bell-dot {
  position: absolute; top: 5px; right: 4px;
  min-width: 15px; height: 15px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 500; line-height: 1;
  color: #0a0a0a; background: var(--gold); border-radius: 8px;
}

/* ── Profil mit Aufklappmenü ────────────────────────────────────────── */
.ap-profile { position: relative; }
.ap-profile-btn {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 10px 5px 5px; border-radius: 9px;
  border: 1px solid transparent; background: none; cursor: pointer;
  color: var(--muted); font-family: inherit; font-size: 12px;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.ap-profile-btn:hover { color: var(--ink); background: rgba(255,255,255,0.04); }
.ap-profile-btn[aria-expanded="true"] { color: var(--ink); border-color: rgba(228,205,158,0.22); }
.ap-avatar {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; letter-spacing: .5px; color: var(--gold-bright);
  background: rgba(227,200,143,0.12); border: 1px solid rgba(228,205,158,0.28);
}
.ap-profile-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-caret { font-size: 9px; opacity: .7; }

.ap-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 210px; padding: 6px;
  border: 1px solid rgba(228,205,158,0.16); border-radius: 12px;
  background: #14110c; box-shadow: 0 18px 44px rgba(0,0,0,0.6);
}
.ap-menu[hidden] { display: none; }
.ap-menu-head { padding: 9px 11px 11px; border-bottom: 1px solid rgba(228,205,158,0.10); margin-bottom: 5px; }
.ap-menu-name { display: block; font-size: 12.5px; color: var(--ink); }
.ap-menu-mail { display: block; font-size: 10.5px; color: var(--muted); margin-top: 3px; word-break: break-all; }
.ap-menu-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 11px; border: none; border-radius: 8px; background: none;
  font-family: inherit; font-size: 12px; color: var(--muted);
  text-decoration: none; cursor: pointer;
  transition: color .18s ease, background .18s ease;
}
.ap-menu-item:hover { color: var(--ink); background: rgba(255,255,255,0.05); }
.ap-menu-item.is-danger:hover { color: #e0a0a0; }

/* ── Verdunklung hinter der mobilen Seitenleiste ────────────────────── */
.ap-scrim { display: none; }

@media (max-width: 900px) {
  .ap-burger { display: flex; }

  /* Seitenleiste wird zum einschiebbaren Panel statt zur umbrechenden
     Kopfzeile: Sie liegt links außerhalb des Bildes und fährt auf Knopfdruck
     herein. Der Inhalt darunter bleibt dabei ruhig stehen. */
  .ap-side {
    position: fixed; top: 0; left: 0; z-index: 50;
    width: min(280px, 82vw); height: 100vh;
    flex-direction: column; flex-wrap: nowrap;
    padding: 26px 18px;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.2,.7,.2,1);
    border-right: 1px solid rgba(228,205,158,0.12);
    background: #100e0a;
  }
  .ap-side.is-open { transform: translateX(0); }

  .ap-brand { order: 0; flex: none; padding: 0 8px 22px; }
  .ap-nav { order: 1; flex-direction: column; flex-wrap: nowrap; overflow: visible; margin: 0; padding: 0; }
  .ap-side-foot { order: 2; flex-direction: column; align-items: stretch; padding-top: 18px; border-top: 1px solid rgba(228,205,158,0.08); }

  .ap-scrim {
    display: block; position: fixed; inset: 0; z-index: 45;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(2px);
  }
  .ap-scrim[hidden] { display: none; }

  /* Auf schmalen Geräten trägt der Avatar allein — der Name kostet nur Platz. */
  .ap-profile-name { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ap-side { transition: none; }
  .ap-burger span { transition: none; }
}