/* ============================================================
   Autohaus Seelinger — Editorial-Magazin-Relaunch v3
   Dark Cinema + warme Halogen-Momente · Bricolage + Fraunces
   ============================================================ */

/* ---------- FONTS ------------------------------------------- */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-var-latin.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-var-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- TOKENS ------------------------------------------ */

:root {
  /* Dunkelstufung: von Base bis Cinema */
  --bg-0: #0e0f13;
  --bg-1: #14161d;
  --bg-2: #1a1d26;
  --bg-3: #202430;
  --cinema: #050609;
  --paper: #f4ede1;     /* warmes off-white, nur wenn ein heller Moment gebraucht wird */

  /* Text */
  --ink: #f4f4f3;
  --ink-2: rgba(244, 244, 243, 0.74);
  --ink-3: rgba(244, 244, 243, 0.52);
  --ink-4: rgba(244, 244, 243, 0.28);

  /* Linien */
  --line: rgba(244, 244, 243, 0.10);
  --line-2: rgba(244, 244, 243, 0.22);

  /* Rot */
  --red: #e11d2a;
  --red-deep: #cc1420;
  --red-schild: #a51019;

  /* Warm-Halogen (Overlay + Grading) */
  --halogen-warm: rgba(255, 178, 96, 0.10);
  --halogen-warm-2: rgba(255, 165, 70, 0.18);
  --halogen-orange: #ffb060;
  --halogen-amber: #f0902b;

  /* Radien */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* Layout */
  --wrap: min(1280px, calc(100vw - clamp(32px, 6vw, 96px)));
  --wrap-wide: min(1520px, calc(100vw - clamp(24px, 4vw, 64px)));
  --topbar-h: 72px;

  /* Z-Layer */
  --z-media: 1;
  --z-content: 3;
  --z-cursor: 90;
  --z-nav: 100;
  --z-callbar: 110;
  --z-lightbox: 200;
  --z-skip: 300;

  /* Typo-Familien */
  --font-sans: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Fraunces", "Times New Roman", Georgia, serif;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Foto-Grading als CSS-Filter, pro Sektion überschreibbar */
  --grade-cinema: saturate(0.82) contrast(1.08) brightness(0.86);
  --grade-warm: saturate(0.95) contrast(1.06) brightness(0.90) sepia(0.10);
  --grade-portrait: saturate(0.86) contrast(1.09) brightness(0.88) sepia(0.06);

  /* Feines Korn */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ---------- RESET ------------------------------------------- */

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

html {
  background: var(--bg-0);
  overflow-x: clip;
  scroll-behavior: auto; /* Lenis übernimmt */
}
body {
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.18rem);
  font-weight: 410;
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Fließender vertikaler Body-Gradient über die ganze Site.
     Foto-Sektionen (hero, timepiece, kontakt) überdecken ihn mit eigener Media-Schicht. */
  background:
    radial-gradient(1400px 900px at 100% 22%, rgba(225, 29, 42, 0.06), transparent 60%),
    radial-gradient(1200px 900px at 0% 62%, var(--halogen-warm), transparent 60%),
    radial-gradient(1100px 900px at 100% 88%, rgba(225, 29, 42, 0.045), transparent 55%),
    linear-gradient(180deg,
      var(--cinema) 0%,
      var(--bg-0) 6%,
      var(--bg-1) 22%,
      var(--bg-0) 34%,
      var(--bg-1) 46%,
      var(--bg-0) 58%,
      var(--bg-1) 70%,
      var(--bg-0) 82%,
      var(--cinema) 100%);
  background-attachment: fixed, fixed, fixed, scroll;
}

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

::selection { background: var(--red); color: #fff; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Fein sichtbares Korn über der ganzen Seite */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  background-image: var(--grain);
  opacity: 0.045;
  mix-blend-mode: overlay;
}

/* WebGL Shader-Background Canvas — fix hinter dem Content */
.shader-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: block;
}

/* Scroll-Progress-Rail — dünne vertikale rote Linie am rechten Viewport-Rand */
.scroll-rail {
  position: fixed;
  top: 0;
  right: 0;
  width: 2px;
  height: 100vh;
  z-index: 95;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(244, 244, 243, 0.06) 15%, rgba(244, 244, 243, 0.06) 85%, transparent 100%);
}
.scroll-rail-fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--red) 10%, var(--red) 90%, transparent 100%);
  transform-origin: top center;
  transform: scaleY(0);
  will-change: transform;
}
@media (max-width: 720px) {
  .scroll-rail { width: 1px; }
}

/* Chapter-Title Word-Blur-Reveal init state (fallback wenn JS off) */
.js .chapter-title .word,
.js .timepiece-title .word,
.js .kontakt-title .word,
.js .kontakt-form-title .word { /* JS sets state; CSS bleibt leer */ }

/* ---------- UTILITIES --------------------------------------- */

.wrap { width: var(--wrap); margin-inline: auto; }
.wrap-wide { width: var(--wrap-wide); margin-inline: auto; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  top: 12px; left: 12px;
  z-index: var(--z-skip);
  background: var(--red-deep);
  color: #fff;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  transform: translateY(-260%);
  transition: transform 0.25s;
}
.skip:focus-visible { transform: none; }

/* ---------- CUSTOM CURSOR (nur Desktop, nur Fine-Pointer) --- */
/* Outer div positioniert per translate3d (JS), inner span skaliert via transform. */

.cursor {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
  will-change: transform;
}
.cursor-ring {
  display: block;
  width: 28px;
  height: 28px;
  border: 1.5px solid rgba(244, 244, 243, 0.55);
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: 0 0;
  transition: transform 0.28s var(--ease-out), background 0.28s, border-color 0.28s;
  mix-blend-mode: difference;
  will-change: transform;
}
.cursor.is-hover .cursor-ring {
  transform: translate(-50%, -50%) scale(1.93);
  border-color: rgba(244, 244, 243, 0.9);
}
.cursor.is-cta .cursor-ring {
  transform: translate(-50%, -50%) scale(2.36);
  background: var(--red);
  border-color: var(--red);
  mix-blend-mode: normal;
}
@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

/* ---------- REVEAL (Initialzustände) ------------------------- */

.js .reveal { opacity: 0; }
.js .reveal[data-anim="fade"] { transform: translateY(24px); }
.js .reveal[data-anim="slide-l"] { transform: translateX(-40px); }
.js .reveal[data-anim="slide-r"] { transform: translateX(40px); }
.js .reveal[data-anim="scale"] { transform: scale(0.96); }

.js .type-clip .line { display: block; overflow: hidden; }
.js .type-clip .line > * { display: inline-block; transform: translateY(105%); }

/* ---------- NAV (Floating Glass) ---------------------------- */

.topbar {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  padding: 10px 14px 10px 22px;
  border-radius: var(--r-pill);
  background: rgba(14, 15, 19, 0.65);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55),
              0 2px 6px -2px rgba(0, 0, 0, 0.4);
  width: min(1320px, calc(100vw - 24px));
  transition: background 0.35s, box-shadow 0.35s, transform 0.4s var(--ease-out);
}
.topbar.is-hidden { transform: translate(-50%, -160%); }

.brand {
  display: inline-flex;
  align-items: center;
  padding: 4px 6px;
  /* Das Logo darf NIEMALS nachgeben. .topbar ist ein Flex-Container mit
     fester Breite; ohne flex-shrink: 0 drückt er das Bild zusammen, sobald
     Logo, Navigation und Telefon-Knopf nicht mehr nebeneinander passen.
     Gemessen am 17.08.2026: bei 800 px Fensterbreite war das Logo 67 %
     zu schmal, bei 730 px nur noch 7 Pixel breit statt 192. */
  flex: 0 0 auto;
}
.brand-logo {
  height: 44px;
  width: auto;
  display: block;
  flex: 0 0 auto;
  /* Zweite, unabhängige Sicherung: Sollte das Bild künftig doch einmal in
     der Breite begrenzt werden, bleibt wenigstens das Seitenverhältnis
     erhalten, statt das Logo zu verzerren. */
  object-fit: contain;
}
@media (max-width: 720px) {
  .brand-logo { height: 36px; }
}

.mainnav {
  display: flex;
  gap: clamp(14px, 2.2vw, 30px);
  margin-inline: auto;
  /* Wenn es im Header eng wird, soll die Navigation nachgeben und nicht das
     Logo. Ganz verschwindet sie unter 960px, siehe unten. */
  min-width: 0;
  font-family: var(--font-sans);
  font-weight: 550;
  /* Etwas größer am Rechner. Unter 720px ist die Navigation ohnehin
     ausgeblendet, am Handy ändert sich dadurch nichts. */
  font-size: 0.98rem;
  letter-spacing: 0.02em;
}
.mainnav a {
  padding: 8px 5px;
  color: var(--ink-2);
  position: relative;
  transition: color 0.25s;
}
.mainnav a:hover { color: var(--ink); }
.mainnav a::after {
  content: "";
  position: absolute;
  left: 4px; right: 4px;
  bottom: 4px;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.mainnav a:hover::after { transform: scaleX(1); }

.topsearch {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
  flex-shrink: 0;
}
.topsearch:hover {
  background: rgba(244, 244, 243, 0.08);
  color: var(--ink);
}
.topsearch svg {
  width: 18px;
  height: 18px;
  display: block;
}

.topcall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--red-deep);
  color: #fff;
  font-weight: 650;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  /* Nummer bleibt einzeilig. Ohne das bricht sie im schmalen Button um. */
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background 0.25s, transform 0.25s;
}
.topcall:hover { background: var(--red); transform: translateY(-1px); }
.topcall svg { width: 16px; height: 16px; fill: currentColor; }

/* Die Navigation verschwindet früher als der übrige Handy-Umbau.
   Grund: Zwischen 721 und 960px passen Logo, fünf Menüpunkte und der
   Telefon-Knopf nicht mehr nebeneinander. Vorher gab in diesem Bereich das
   Logo nach — gemessen bei 800px 67 % zu schmal, bei 730px nur noch 7 Pixel.
   Die Navigation trägt bis etwa 955px, deshalb die Grenze bei 960px.
   Es geht dabei nichts verloren: Die Seite ist eine Ein-Seiten-Site, in der
   Scrollen die Navigation ist, und der Telefon-Knopf bleibt immer da. */
@media (max-width: 960px) {
  .mainnav { display: none; }
  /* Logo nach links, Telefon-Knopf nach rechts */
  .brand { margin-right: auto; }
}

@media (max-width: 720px) {
  .topbar {
    top: 12px;
    gap: 12px;
    padding: 8px 10px 8px 12px;
    width: calc(100vw - 24px);
    justify-content: space-between;
  }
  .topcall { font-size: 0.85rem; padding: 10px 16px; white-space: nowrap; }
  /* Nummer im Button sichtbar lassen (nicht nur Icon) */
  .topcall span.long { display: inline; }
}
@media (max-width: 420px) {
  /* Auf sehr schmalen Geräten Nummer verkürzen */
  .topcall span.long { font-size: 0.8rem; }
  .brand-logo { height: 32px; }
}

/* Ganz schmale Geräte (iPhone SE der ersten Generation, 320px, und die
   Außenanzeige faltbarer Telefone).
   Seit Logo und Telefon-Knopf nicht mehr nachgeben, müssen sie hier von
   Hand kleiner werden — sonst läuft die Leiste über. Gemessen bei 320px:
   vorher fehlten 29 Pixel. Die Rufnummer bleibt bewusst lesbar statt zum
   reinen Symbol zu werden, sie ist der wichtigste Knopf der Seite. */
@media (max-width: 360px) {
  .brand-logo { height: 28px; }
  .topcall { padding: 9px 12px; gap: 6px; }
  .topcall span.long { font-size: 0.78rem; }
}

/* ---------- BUTTONS ----------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: var(--r-pill);
  font-weight: 620;
  font-size: 0.98rem;
  letter-spacing: 0.005em;
  transition: transform 0.25s var(--ease-out), background 0.25s, box-shadow 0.25s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 18px; height: 18px; fill: currentColor; }

.btn-primary {
  background: var(--red-deep);
  color: #fff;
  box-shadow: 0 12px 30px -12px rgba(225, 29, 42, 0.55);
}
.btn-primary:hover { background: var(--red); box-shadow: 0 18px 40px -12px rgba(225, 29, 42, 0.65); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ---------- HERO — „Erste Einstellung" ---------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--cinema);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: var(--z-media);
}
.hero-media > img,
.hero-media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--grade-cinema);
  transform: scale(1.08); /* Ken-Burns Startgröße */
  will-change: transform;
}

/* Cinematic-Vignette */
.hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 6, 9, 0.55) 0%, rgba(5, 6, 9, 0.15) 30%, rgba(5, 6, 9, 0.75) 100%),
    radial-gradient(120% 80% at 50% 40%, transparent 30%, rgba(5, 6, 9, 0.65) 100%);
  z-index: 1;
}
/* Warmer Halogen-Kick oben rechts */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 400px at 82% 12%, var(--halogen-warm-2), transparent 55%);
  z-index: 2;
  mix-blend-mode: screen;
}

.hero-inner {
  position: relative;
  z-index: var(--z-content);
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto auto 1fr;
  padding-top: calc(var(--topbar-h) + 40px);
  padding-bottom: clamp(56px, 8vh, 120px);
}

.hero-eyebrow {
  grid-row: 2;
  align-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-sans);
  font-weight: 620;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 24px;
}
.hero-eyebrow::before {
  content: "";
  width: 42px;
  height: 1px;
  background: var(--red);
}

.hero-title {
  grid-row: 3;
  margin: 0 0 clamp(28px, 4vh, 48px);
  font-family: var(--font-sans);
  font-weight: 780;
  font-size: clamp(2.6rem, 10vw, 9rem);
  line-height: 0.9;
  letter-spacing: -0.028em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
.hero-title .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 340;
  font-size: 0.52em;
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  display: block;
  margin-bottom: clamp(4px, 0.8vh, 12px);
  margin-left: clamp(4px, 0.4vw, 12px);
}
.hero-title .dot {
  color: var(--red);
  font-style: normal;
  display: inline-block;
  transform: translateY(-0.02em);
}

.hero-foot {
  grid-row: 4;
  align-self: end;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(20px, 4vw, 60px);
  align-items: end;
}
.hero-lede {
  max-width: 44ch;
  margin: 0;
  font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.22rem);
  color: var(--ink-2);
  line-height: 1.55;
}
.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.hero-scroll {
  position: absolute;
  bottom: clamp(20px, 4vh, 40px);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-content);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero-scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, var(--ink-3), transparent);
  position: relative;
  overflow: hidden;
}
.hero-scroll-line::after {
  content: "";
  position: absolute;
  top: -40px; left: 0;
  width: 1px; height: 40px;
  background: linear-gradient(180deg, transparent, var(--red));
  animation: scrollTick 2.4s var(--ease-in-out) infinite;
}
@keyframes scrollTick {
  0% { top: -40px; }
  60%, 100% { top: 100%; }
}

@media (max-width: 800px) {
  .hero-foot { grid-template-columns: 1fr; }
  .hero-cta { justify-content: flex-start; }
}

/* ---------- CHAPTER MARKER (Editorial Sektions-Intro) ------- */

.chapter {
  position: relative;
  padding: clamp(96px, 14vh, 180px) 0;
  isolation: isolate;
  background: transparent;
}

/* Sektions-Tone-Varianten: nur noch dezente lokale Overlays,
   der Body-Gradient trägt den Grundton. */
.chapter--warm::before,
.chapter--cinema::before,
.chapter--raised::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.chapter--warm::before {
  background: radial-gradient(900px 600px at 82% 8%, var(--halogen-warm-2), transparent 55%);
  mix-blend-mode: screen;
  opacity: 0.6;
}
.chapter--cinema::before {
  background: linear-gradient(180deg, rgba(5, 6, 9, 0.4), rgba(5, 6, 9, 0.65));
}
.chapter--raised::before {
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(255, 178, 96, 0.06), transparent 60%),
    linear-gradient(180deg, rgba(244, 244, 243, 0.02), transparent 50%);
}

.chapter-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  margin-bottom: clamp(40px, 6vh, 72px);
}
.chapter-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 340;
  font-size: clamp(1.6rem, 2.3vw, 2.1rem);
  color: var(--ink-3);
  line-height: 1;
  letter-spacing: -0.01em;
  padding-top: 0.4em;
}
.chapter-num small {
  display: block;
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 620;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--red);
  margin-top: 6px;
}
.chapter-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
.chapter-title .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  color: var(--ink-2);
  letter-spacing: -0.015em;
}
.chapter-lede {
  grid-column: 2;
  max-width: 58ch;
  margin: clamp(20px, 3vh, 32px) 0 0;
  color: var(--ink-2);
  font-size: clamp(1.05rem, 0.98rem + 0.25vw, 1.22rem);
}

@media (max-width: 760px) {
  .chapter-head { grid-template-columns: 1fr; gap: 20px; }
  .chapter-lede { grid-column: 1; }
}

/* ---------- AUTO-TOUR (Kap. 02) ----------------------------- */

.tour {
  margin: clamp(24px, 4vh, 48px) 0 0;
  /* Volle Breite ohne Tricks: Die Klasse wrap-wide ist im HTML entfernt,
     und .chapter hat keine seitliche Polsterung — die Tour füllt damit von
     selbst das Fenster.

     Wichtig: Weder margin-left noch transform funktionieren hier. Beim
     Anheften setzt ScrollTrigger die Ränder des Elements auf 0 und
     übernimmt bestehende Transformationen in seinen Pin. Beides wurde
     dadurch wirkungslos, und mit transform brach zusätzlich das Anheften,
     weil ein transformierter Vorfahre zum Bezugsrahmen für position:fixed
     wird — auf dem Handy verschwand das Video deshalb komplett. */
  width: 100%;
}
.tour-stage {
  position: relative;
  height: 100vh;
  min-height: 640px;
  background: var(--cinema);
  /* Randlos, weil die Bühne über die volle Fensterbreite läuft —
     abgerundete Ecken an der Fensterkante sähen abgeschnitten aus. */
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 60px 120px -40px rgba(0, 0, 0, 0.65),
    inset 0 0 0 1px var(--line);
}
/* warmes Halogen-Spot rechts oben */
.tour-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 500px at 80% 10%, var(--halogen-warm-2), transparent 60%);
  z-index: 2;
  mix-blend-mode: screen;
  pointer-events: none;
}
/* Vignette unten */
.tour-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(5, 6, 9, 0.7) 100%);
  z-index: 2;
  pointer-events: none;
}

.tour-station {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: clamp(32px, 6vh, 80px);
  gap: clamp(24px, 5vw, 80px);
  z-index: 3;
  opacity: 0;
  visibility: hidden;
}
.tour-station.is-active { opacity: 1; visibility: visible; }
.js .tour-station:first-child { opacity: 1; visibility: visible; }

.tour-shot {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--r-lg);
  filter: var(--grade-warm);
  will-change: transform;
}

/* ---- Video-Bühne (Scroll-Scrubbing) ------------------------ */
.tour-stage--video .tour-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  /* Hier stand früher filter: var(--grade-warm). Vier verkettete Filter über
     die volle Fensterfläche wurden für JEDES angezeigte Videobild neu
     gerechnet — mitten im Scroll-Scrubbing, wo die Leistung gebraucht wird.
     Die Farbkorrektur ist jetzt in tour-master.mp4 und ins Poster
     eingebacken (nachgerechnet, Abweichung 1,8 von 255 Stufen).
     Wird das Video jemals neu erzeugt, muss die Korrektur wieder mit
     eingebacken werden — der Befehl steht in HANDOFF.md. */
  will-change: opacity;
}
.tour-stage--video .tour-info-wrap {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.tour-stage--video .tour-station {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr minmax(280px, 460px);
  align-items: end;
  padding: clamp(32px, 6vh, 80px);
  gap: clamp(24px, 5vw, 80px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease-out);
}
.tour-stage--video .tour-station.is-active {
  opacity: 1;
  visibility: visible;
}
.tour-stage--video .tour-station .tour-info {
  grid-column: 2;
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 32px);
  background: linear-gradient(180deg, rgba(10, 11, 15, 0.55) 0%, rgba(5, 6, 9, 0.85) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  pointer-events: auto;
  align-self: end;
}
/* Hierarchie getauscht: Leistung (h3) groß, Preis-Zahl klein */
.tour-stage--video .tour-info h3 {
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 4px 0 14px;
  order: 1;
}
.tour-stage--video .tour-info .price {
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  margin: 0 0 4px;
  line-height: 1;
  order: 3;
}
.tour-stage--video .tour-info .price-sub {
  order: 2;
  margin: 0 0 4px;
  font-size: clamp(0.92rem, 0.88rem + 0.15vw, 1.02rem);
}
.tour-stage--video .tour-info p:not(.price-sub) {
  font-size: clamp(0.95rem, 0.9rem + 0.15vw, 1.05rem);
  order: 4;
  margin-top: 8px;
}
.tour-stage--video .tour-info {
  display: flex;
  flex-direction: column;
}

@media (max-width: 720px) {
  /* Mobile-Layout: Video oben in fester Höhe, Text-Panel darunter — kein Overlap mehr.
     Scroll-Zone kürzer, damit Overlays schneller wechseln. */
  /* Auf dem Handy gibt es keine Kamerafahrt, sondern die fünf Leistungen
     untereinander. Video-Scrubbing ist auf Touch-Geräten nicht zuverlässig
     hinzubekommen, und wechselnde Einzelbilder wirken nicht wie Bewegung.
     Eine ruhige Liste liest sich auf einem kleinen Bildschirm ohnehin
     besser als Text über einem Foto. Das JS setzt dafür .tour-stage--liste. */
  .tour {
    min-height: 0;
  }
  .tour-stage--liste {
    height: auto;
    min-height: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0 clamp(18px, 5vw, 28px);
  }
  .tour-stage--liste::before,
  .tour-stage--liste::after { display: none; }

  .tour-stage--liste .tour-info-wrap {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .tour-stage--liste .tour-station {
    position: relative;
    display: block;
    padding: 22px 22px 24px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: linear-gradient(180deg, rgba(244,244,243,0.05), rgba(244,244,243,0.015));
  }
  .tour-stage--liste .tour-station .tour-info {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    padding: 0;
    box-shadow: none;
  }
  /* Auf dem kleinen Schirm zuerst die Leistung, dann der Preis. */
  .tour-stage--liste .tour-info h3 {
    order: 1;
    font-size: clamp(1.5rem, 6vw, 2rem);
    margin: 0 0 6px;
  }
  .tour-stage--liste .tour-info .price {
    order: 2;
    font-size: clamp(1.7rem, 7vw, 2.3rem);
    color: var(--red);
    margin: 0;
  }
  .tour-stage--liste .tour-info .price .cur { color: var(--red); }
  .tour-stage--liste .tour-info .price--wort {
    font-size: clamp(1.1rem, 4.4vw, 1.4rem);
    color: var(--halogen-orange);
  }
  .tour-stage--liste .tour-info .price-sub {
    order: 3;
    margin: 2px 0 10px;
    font-size: 0.92rem;
  }
  .tour-stage--liste .tour-info p:not(.price-sub) {
    order: 4;
    margin: 0;
  }
}
.tour-info { color: var(--ink); z-index: 3; }
.tour-info .price {
  display: block;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(3rem, 7.4vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-feature-settings: "tnum";
  margin: 0 0 clamp(4px, 0.8vh, 10px);
}
.tour-info .price .cur { color: var(--ink); font-weight: 700; }
.tour-info .price--wort {
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  color: var(--halogen-orange);
  letter-spacing: -0.02em;
}
.tour-info .price-sub {
  margin: 0 0 clamp(12px, 2vh, 22px);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 340;
  font-size: clamp(0.95rem, 0.9rem + 0.15vw, 1.08rem);
  color: var(--halogen-orange);
  letter-spacing: 0;
  line-height: 1.35;
}
.tour-info h3 {
  margin: 0 0 clamp(12px, 2vh, 20px);
  font-family: var(--font-sans);
  font-weight: 780;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--red);
}
.tour-info h3 .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 320;
  text-transform: none;
  color: var(--ink-2);
  letter-spacing: -0.01em;
}
.tour-info p {
  margin: 0;
  color: var(--ink-2);
  max-width: 42ch;
  font-size: clamp(1rem, 0.95rem + 0.15vw, 1.12rem);
}
.tour-info .tour-list {
  list-style: none;
  padding: 0;
  margin: clamp(14px, 2vh, 22px) 0 0;
  color: var(--ink-2);
  font-size: 0.98rem;
  display: grid;
  gap: 8px;
}
.tour-info .tour-list li {
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.tour-info .tour-list li::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--red);
  border-radius: 999px;
  transform: translateY(-3px);
  flex-shrink: 0;
}

.tour-progress {
  position: absolute;
  bottom: clamp(20px, 3vh, 32px);
  left: clamp(28px, 5vw, 56px);
  right: clamp(28px, 5vw, 56px);
  height: 2px;
  background: rgba(244, 244, 243, 0.14);
  border-radius: 999px;
  z-index: 4;
  overflow: hidden;
}
.tour-progress::after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  background: var(--red);
  border-radius: 999px;
  transform: scaleX(var(--tour-pct, 0));
  transform-origin: left center;
  transition: transform 0.2s linear;
  will-change: transform;
}
.tour-stops {
  position: absolute;
  bottom: calc(clamp(20px, 3vh, 32px) + 14px);
  left: clamp(28px, 5vw, 56px);
  right: clamp(28px, 5vw, 56px);
  display: flex;
  justify-content: space-between;
  z-index: 4;
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 620;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tour-stops span.is-active { color: var(--ink); }

.tour-gen-tag {
  position: absolute;
  top: clamp(16px, 2vh, 22px);
  right: clamp(20px, 3vw, 32px);
  z-index: 4;
  font-family: var(--font-sans);
  font-weight: 620;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: rgba(5, 6, 9, 0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

@media (max-width: 960px) {
  .tour-info .price { font-size: clamp(2.4rem, 6vw, 4rem); }
  .tour-info h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
  .tour-station { padding: clamp(24px, 4vh, 48px); gap: clamp(20px, 3vw, 40px); }
}
@media (max-width: 720px) {
  .tour-station { grid-template-columns: 1fr; padding: 20px; gap: 20px; align-items: start; padding-bottom: 80px; }
  .tour-shot { aspect-ratio: 16 / 10; }
  .tour-stage { height: auto; min-height: 640px; border-radius: var(--r-md); }
  .tour-info .price { font-size: clamp(2.4rem, 10vw, 3.6rem); }
  .tour-info .price-sub { font-size: 0.95rem; }
}

/* ---------- PREISE — Editorial-Liste (Kap. 03) -------------- */

.preise { position: relative; }
.preise::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1000px 700px at 0% 30%, var(--halogen-warm), transparent 60%),
    radial-gradient(900px 700px at 100% 80%, rgba(225, 29, 42, 0.05), transparent 55%);
}
.preise-list {
  position: relative;
  display: grid;
  gap: 0;
  margin-top: clamp(32px, 5vh, 56px);
  padding: clamp(20px, 3vh, 32px) clamp(20px, 3vw, 40px);
  border-radius: var(--r-xl);
  background:
    linear-gradient(180deg, rgba(244, 244, 243, 0.035), rgba(244, 244, 243, 0.008));
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    0 40px 80px -40px rgba(0, 0, 0, 0.5);
}
.preise-list::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red) 0%, var(--red-deep) 30%, transparent 100%);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.preise-item {
  display: grid;
  grid-template-columns: minmax(280px, 1.4fr) minmax(200px, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding: clamp(20px, 3vh, 32px) clamp(12px, 2vw, 24px);
  border-top: 1px solid var(--line);
  transition: background 0.3s;
  position: relative;
}
.preise-item:first-of-type { border-top: 0; }
.preise-item:hover {
  background: linear-gradient(90deg, transparent 60%, rgba(225, 29, 42, 0.05));
}
.preise-num {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2.4rem, 5.5vw, 4.8rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-feature-settings: "tnum";
  text-align: right;
}
.preise-num .prefix { text-align: right; }
.preise-num .cur { color: var(--ink); font-weight: 700; }
.preise-num .prefix {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 340;
  font-size: clamp(0.85rem, 0.85rem + 0.1vw, 0.98rem);
  color: var(--ink-3);
  letter-spacing: 0;
  margin-bottom: 10px;
  text-transform: none;
  line-height: 1.3;
}
.preise-num .fzabh {
  font-family: var(--font-sans);
  font-weight: 720;
  font-size: 0.42em;
  color: var(--halogen-orange);
  letter-spacing: 0.01em;
  line-height: 1.05;
  display: inline-block;
}
.preise-label { color: var(--ink); }
.preise-label h3 {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-weight: 780;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--red);
}
.preise-label p {
  margin: 0;
  color: var(--ink-2);
  font-size: clamp(0.98rem, 0.95rem + 0.15vw, 1.1rem);
  max-width: 42ch;
}

/* HU-Plakette */
.plakette-wrap {
  position: absolute;
  right: clamp(-30px, -2vw, -10px);
  top: -30px;
  width: clamp(120px, 14vw, 180px);
  height: clamp(120px, 14vw, 180px);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}
.plakette-svg { width: 100%; height: 100%; }
.pl-ring { fill: none; stroke: var(--ink); stroke-width: 2; }
.pl-inner { fill: rgba(244, 244, 243, 0.06); stroke: var(--ink-3); stroke-width: 1; }
.pl-nums text {
  fill: var(--ink);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
}
.pl-marker { fill: var(--red); }
.pl-hu { fill: var(--ink); font-family: var(--font-sans); font-weight: 800; font-size: 15px; letter-spacing: 0.05em; }
.pl-haus { fill: var(--ink-3); font-family: var(--font-sans); font-weight: 600; font-size: 8px; letter-spacing: 0.15em; }

.preise-note {
  margin: clamp(48px, 8vh, 96px) 0 0;
  padding: clamp(24px, 4vh, 40px) clamp(24px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(244, 244, 243, 0.03), rgba(244, 244, 243, 0.008));
  color: var(--ink-2);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
}
.preise-note p { margin: 0; max-width: 54ch; }
.preise-note a {
  color: var(--ink);
  font-weight: 700;
  border-bottom: 1px solid var(--red);
  padding-bottom: 2px;
  font-feature-settings: "tnum";
}

@media (max-width: 760px) {
  .preise-item { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .preise-num { font-size: clamp(2.6rem, 12vw, 4rem); }
  .plakette-wrap { display: none; }
  .preise-note { grid-template-columns: 1fr; }
}

/* ---------- TIME-PIECE (Kap. 04 · Seit 2003) ---------------- */

.timepiece {
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  isolation: isolate;
}
.timepiece-media {
  position: absolute;
  inset: 0;
  z-index: var(--z-media);
}
.timepiece-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--grade-warm) brightness(0.7);
  transform: scale(1.12);
  will-change: transform;
}
.timepiece-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(5, 6, 9, 0.55) 0%, rgba(5, 6, 9, 0.2) 45%, rgba(5, 6, 9, 0.85) 100%),
    radial-gradient(800px 500px at 20% 20%, var(--halogen-warm-2), transparent 55%);
}
.timepiece-inner {
  position: relative;
  z-index: var(--z-content);
  height: 100%;
  display: grid;
  align-content: center;
  gap: clamp(32px, 5vh, 56px);
  padding: calc(var(--topbar-h) + 40px) 0 60px;
}
.timepiece-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2.4rem, 8.5vw, 8rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
.timepiece-title .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  color: var(--halogen-orange);
  text-transform: none;
  letter-spacing: -0.02em;
}
.timepiece-body {
  max-width: 60ch;
  font-size: clamp(1.1rem, 1rem + 0.35vw, 1.28rem);
  color: var(--ink-2);
  line-height: 1.55;
}
.timepiece-marks {
  display: flex;
  gap: clamp(24px, 5vw, 64px);
  flex-wrap: wrap;
  margin-top: clamp(8px, 2vh, 24px);
}
.timepiece-marks li {
  list-style: none;
  padding: 0;
  border-left: 2px solid var(--red);
  padding-left: 16px;
}
.timepiece-marks .y {
  display: block;
  font-family: var(--font-sans);
  font-weight: 780;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  font-feature-settings: "tnum";
}
.timepiece-marks .t {
  display: block;
  color: var(--ink-2);
  font-size: 0.96rem;
}

/* ---------- VERTRAUENS-BAND (zwischen Kap. 04 und 05) ------- */

.trust-band {
  position: relative;
  padding: clamp(56px, 8vh, 96px) 0;
  background: transparent;
  isolation: isolate;
}
.trust-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 0%, rgba(5, 6, 9, 0.35) 45%, transparent 100%);
  pointer-events: none;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
.trust-card {
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(244, 244, 243, 0.03), rgba(244, 244, 243, 0.008));
  display: grid;
  gap: 14px;
  align-content: start;
  transition: transform 0.35s var(--ease-out), border-color 0.35s;
}
.trust-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
}
.trust-icon {
  width: 44px;
  height: 44px;
  color: var(--red);
  display: grid;
  place-items: center;
  margin-bottom: 4px;
}
.trust-icon svg { width: 100%; height: 100%; }
.trust-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 780;
  font-size: clamp(1.15rem, 1.4vw, 1.35rem);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.15;
}
.trust-body {
  margin: 0;
  color: var(--ink-2);
  font-size: clamp(0.94rem, 0.92rem + 0.1vw, 1.04rem);
  line-height: 1.55;
  max-width: 42ch;
}
.trust-meta {
  margin: 6px 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 340;
  font-size: 1rem;
  color: var(--halogen-orange);
}
.trust-meta a { color: var(--halogen-orange); border-bottom: 1px solid transparent; transition: border-color 0.3s; }
.trust-meta a:hover { border-color: var(--halogen-orange); }

@media (max-width: 720px) {
  .trust-grid { grid-template-columns: 1fr; }
}

/* ---------- TEAM — Portrait-Story (Kap. 05) ----------------- */

.team-story {
  display: grid;
  gap: clamp(64px, 10vh, 128px);
  margin-top: clamp(32px, 5vh, 56px);
}

.portrait {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.portrait--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
.portrait--flip .portrait-media { order: 2; }
.portrait--duo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(24px, 4vw, 56px);
  max-width: 720px;
}
.portrait--duo .portrait-single { display: grid; gap: 20px; min-width: 0; }

.portrait-media {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-1);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
  min-width: 0;
}
.portrait-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--grade-portrait);
  transform: scale(1.06);
  will-change: transform;
}
.portrait-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(5, 6, 9, 0.4) 100%);
}
.portrait-media--sm { aspect-ratio: 3 / 4; }

.portrait-info { color: var(--ink); min-width: 0; }
.portrait-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 340;
  font-size: 1.02rem;
  color: var(--halogen-orange);
  margin-bottom: 14px;
}
.portrait-tag::before {
  content: "";
  width: 32px; height: 1px;
  background: var(--red);
}
.portrait-name {
  margin: 0 0 clamp(6px, 1.2vh, 12px);
  font-family: var(--font-serif);
  font-weight: 420;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.portrait-name em {
  font-style: italic;
  font-weight: 320;
  color: var(--ink-2);
}
.portrait--small .portrait-name,
.portrait-single .portrait-name { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.portrait-role {
  font-family: var(--font-sans);
  font-weight: 620;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: clamp(14px, 2vh, 22px);
}
.portrait-body {
  max-width: 44ch;
  color: var(--ink-2);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 720px) {
  .portrait, .portrait--flip { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 720px) {
  .portrait, .portrait--flip { grid-template-columns: 1fr; gap: 24px; max-width: 480px; }
  .portrait--flip .portrait-media { order: 0; }
  .portrait--duo { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- RUNDGANG — Kamerafahrt (Kap. 06) ---------------- */

.rundgang {
  padding: clamp(96px, 14vh, 180px) 0 0;
  background: transparent;
  position: relative;
  isolation: isolate;
}
.rundgang::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 0%, rgba(5, 6, 9, 0.5) 60%, rgba(5, 6, 9, 0.7) 100%);
  pointer-events: none;
}
.rundgang-scroller {
  height: 100vh;
  min-height: 620px;
  position: relative;
}
.rundgang-track {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  padding-inline: 8vw;
  will-change: transform;
}
.rundgang-slide {
  flex: 0 0 auto;
  width: clamp(280px, 42vw, 620px);
  aspect-ratio: 4 / 5;
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.6);
}
.rundgang-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--grade-warm);
}
.rundgang-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(5, 6, 9, 0.7) 100%);
}
.rundgang-slide figcaption {
  position: absolute;
  bottom: clamp(18px, 3vh, 30px);
  left: clamp(20px, 3vw, 32px);
  right: clamp(20px, 3vw, 32px);
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
}
.rundgang-slide .cap-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 340;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
}
.rundgang-slide .cap-num {
  font-family: var(--font-sans);
  font-weight: 620;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-feature-settings: "tnum";
}
.rundgang-slide--wide { width: clamp(360px, 56vw, 820px); aspect-ratio: 16 / 10; }

.rundgang-hint {
  position: absolute;
  bottom: clamp(20px, 4vh, 40px);
  right: 8vw;
  z-index: 5;
  font-family: var(--font-sans);
  font-weight: 620;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rundgang-hint::before {
  content: "→ ";
  color: var(--red);
}

@media (max-width: 760px) {
  .rundgang-scroller {
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .rundgang-track {
    position: static;
    padding-block: 20px;
  }
  .rundgang-slide {
    scroll-snap-align: center;
    width: 78vw;
  }
  .rundgang-slide--wide { width: 88vw; }
  .rundgang-hint { position: static; padding: 20px 8vw 0; }
}

/* ---------- STIMMEN (Kap. 07) ------------------------------- */

.stimmen-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  margin-bottom: clamp(40px, 6vh, 72px);
}

.rating {
  text-align: right;
}
.stars {
  position: relative;
  display: inline-flex;
  gap: 4px;
  margin-bottom: 8px;
}
.stars-base { display: inline-flex; gap: 4px; }
.stars-base svg { width: 24px; height: 24px; fill: var(--line-2); }
.stars-fill {
  position: absolute;
  top: 0; left: 0;
  display: inline-flex;
  gap: 4px;
  width: 100%;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.7s var(--ease-out);
  will-change: clip-path;
}
.stars-fill svg { width: 24px; height: 24px; fill: var(--red); }
.rating-wert {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.98rem;
}
.rating-wert b { color: var(--ink); font-weight: 720; font-feature-settings: "tnum"; }

.stimmen-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
}
.stimme {
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(244, 244, 243, 0.03), rgba(244, 244, 243, 0.008));
  position: relative;
  display: grid;
  gap: clamp(20px, 3vh, 28px);
}
.stimme::before {
  content: "\201C";
  position: absolute;
  top: -12px;
  left: 28px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 6rem;
  line-height: 1;
  color: var(--red);
}
.stimme q {
  quotes: none;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 340;
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  line-height: 1.4;
  color: var(--ink);
  display: block;
}
.stimme q b {
  font-weight: 500;
  font-style: normal;
  color: var(--halogen-orange);
}
.stimme footer {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--ink-3);
  font-family: var(--font-sans);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
}
.stimme footer .stars-mini { color: var(--red); font-size: 0.9rem; letter-spacing: 0.05em; }
.stimme footer .who { color: var(--ink-2); font-weight: 620; }

.stimmen-link {
  margin: clamp(32px, 5vh, 48px) 0 0;
  text-align: center;
  font-family: var(--font-sans);
}
.stimmen-link a {
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 3px;
  transition: color 0.25s, border-color 0.25s;
}
.stimmen-link a:hover { color: var(--ink); border-color: var(--red); }

@media (max-width: 760px) {
  .stimmen-head { grid-template-columns: 1fr; }
  .rating { text-align: left; }
  .stimmen-grid { grid-template-columns: 1fr; }
}

/* ---------- FAQ (Kap. 08) ----------------------------------- */

.faq-list {
  display: grid;
  gap: 12px;
  margin-top: clamp(32px, 5vh, 56px);
  max-width: 900px;
}
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(244, 244, 243, 0.035), rgba(244, 244, 243, 0.008));
  overflow: hidden;
  transition: border-color 0.3s;
}
.faq-item[open] { border-color: var(--line-2); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: clamp(20px, 3vh, 28px) clamp(24px, 3vw, 40px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  color: var(--ink);
  transition: color 0.25s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--halogen-orange); }
.faq-item summary .q {
  font-family: var(--font-sans);
  font-weight: 720;
  font-size: clamp(1.05rem, 0.95rem + 0.25vw, 1.22rem);
  letter-spacing: -0.005em;
  line-height: 1.35;
  text-wrap: balance;
}
.faq-item summary .mark {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(225, 29, 42, 0.12);
  color: var(--red);
  display: grid;
  place-items: center;
  position: relative;
  flex-shrink: 0;
  transition: transform 0.35s var(--ease-out);
}
.faq-item summary .mark::before,
.faq-item summary .mark::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
}
.faq-item summary .mark::before { width: 12px; height: 1.5px; }
.faq-item summary .mark::after { width: 1.5px; height: 12px; transition: transform 0.35s var(--ease-out); }
.faq-item[open] summary .mark { transform: rotate(180deg); }
.faq-item[open] summary .mark::after { transform: scaleY(0); }
.faq-item .a {
  padding: 0 clamp(24px, 3vw, 40px) clamp(24px, 3vh, 32px);
  color: var(--ink-2);
  font-size: clamp(0.98rem, 0.93rem + 0.2vw, 1.1rem);
  line-height: 1.65;
}
.faq-item .a p { margin: 0; max-width: 66ch; }

/* ---------- KONTAKT — Finale (Kap. 09) ---------------------- */

.kontakt {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--cinema);
  isolation: isolate;
}
.kontakt-media {
  position: absolute;
  inset: 0;
  z-index: var(--z-media);
}
.kontakt-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--grade-cinema) brightness(0.65);
  transform: scale(1.08);
  will-change: transform;
}
.kontakt-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 6, 9, 0.45) 0%, rgba(5, 6, 9, 0.2) 40%, rgba(5, 6, 9, 0.9) 100%),
    radial-gradient(700px 500px at 90% 15%, var(--halogen-warm-2), transparent 60%);
  z-index: 1;
}

.kontakt-inner {
  position: relative;
  z-index: var(--z-content);
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: calc(var(--topbar-h) + 40px) 0 60px;
}

.kontakt-eyebrow {
  align-self: start;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-sans);
  font-weight: 620;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 24px;
}
.kontakt-eyebrow::before {
  content: "";
  width: 42px; height: 1px;
  background: var(--red);
}

.kontakt-schild {
  align-self: end;
  padding: clamp(32px, 5vw, 72px);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(20, 22, 29, 0.94) 0%, rgba(10, 11, 15, 0.96) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(1.1);
  backdrop-filter: blur(24px) saturate(1.1);
  color: var(--ink);
  display: grid;
  gap: clamp(28px, 4vh, 48px);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.7);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-2);
}
.kontakt-schild::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red) 0%, var(--red-deep) 40%, transparent 100%);
}
.kontakt-schild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(500px 400px at 90% 0%, var(--halogen-warm), transparent 60%);
  pointer-events: none;
  mix-blend-mode: screen;
}
.kontakt-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ink);
}
.kontakt-title .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  text-transform: none;
  color: var(--halogen-orange);
  letter-spacing: -0.015em;
}
.kontakt-title .dot { color: var(--red); }
.kontakt-tel {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.025em;
  font-feature-settings: "tnum";
  color: var(--ink);
  border-bottom: 2px solid var(--red);
  padding-bottom: 10px;
  transition: color 0.3s, border-color 0.3s;
}
.kontakt-tel:hover { color: var(--halogen-orange); border-color: var(--halogen-orange); }

.kontakt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  padding-top: clamp(20px, 3vh, 32px);
  border-top: 1px solid var(--line);
}
.kontakt-block h3 {
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-weight: 720;
  font-size: 0.76rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.kontakt-block address {
  font-style: normal;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink);
}
.kontakt-block .zeit {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
  font-size: 0.96rem;
  line-height: 1.4;
  color: var(--ink);
}
.kontakt-block .zeit li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  font-feature-settings: "tnum";
}
.kontakt-block .zeit li b { font-weight: 700; color: var(--ink-2); }
.kontakt-block a { color: var(--ink); border-bottom: 1px solid var(--red); padding-bottom: 1px; transition: color 0.3s, border-color 0.3s; }
.kontakt-block a:hover { color: var(--halogen-orange); border-color: var(--halogen-orange); }
.kontakt-block p { margin: 0; color: var(--ink); }
.kontakt-block .alt { margin-top: 12px; color: var(--ink-3); font-size: 0.92rem; }

@media (max-width: 800px) {
  .kontakt-schild { padding: 32px 24px; }
  .kontakt-grid { grid-template-columns: 1fr; gap: 28px; }
  .kontakt-block .zeit li { grid-template-columns: 100px 1fr; }
}

/* ---------- KONTAKT-FORMULAR -------------------------------- */

.kontakt-form-wrap {
  margin-top: clamp(40px, 6vh, 72px);
  padding: clamp(32px, 5vw, 56px);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(20, 22, 29, 0.85) 0%, rgba(10, 11, 15, 0.92) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  backdrop-filter: blur(20px) saturate(1.15);
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.65);
  display: grid;
  gap: clamp(24px, 3vh, 36px);
}
.kontakt-form-head { max-width: 60ch; }
.kontakt-form-title {
  margin: 0 0 12px;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.kontakt-form-title .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  color: var(--halogen-orange);
  letter-spacing: -0.015em;
}
.kontakt-form-lede {
  margin: 0;
  color: var(--ink-2);
  font-size: clamp(0.98rem, 0.93rem + 0.15vw, 1.1rem);
  line-height: 1.55;
}
.kontakt-form { display: grid; gap: 16px; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.form-field > span {
  font-family: var(--font-sans);
  font-weight: 620;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: rgba(244, 244, 243, 0.04);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  transition: border-color 0.25s, background 0.25s;
  width: 100%;
  min-width: 0;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--ink-4); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--red);
  background: rgba(244, 244, 243, 0.07);
}
.form-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
                    linear-gradient(-45deg, transparent 50%, var(--ink-2) 50%);
  background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 13px) calc(50% - 2px);
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.form-field textarea {
  resize: vertical;
  min-height: 100px;
}
.form-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  margin-top: 8px;
}
.form-note {
  margin: 0;
  color: var(--ink-3);
  font-size: 0.85rem;
  line-height: 1.45;
  max-width: 44ch;
}
.form-note small { font-size: inherit; }
.form-note a {
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
}
.form-note a:hover { color: var(--ink); border-bottom-color: var(--red); }

/* Bot-Falle: für Menschen und Screenreader unsichtbar, für Bots ein Feld. */
.form-honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin: 18px 0 0;
  padding: 16px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--ink);
}
/* Bestätigung im Halogen-Ton, Fehler im Marken-Rot — beides aus der Palette. */
.form-status.is-ok {
  border-color: var(--halogen-amber);
  background: var(--halogen-warm);
}
.form-status.is-fehler {
  border-color: var(--red);
}

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .form-foot { grid-template-columns: 1fr; }
  .form-foot .btn { width: 100%; justify-content: center; }
}

/* ---------- FOOTER ------------------------------------------ */

.fuss {
  background: transparent;
  padding: clamp(60px, 8vh, 96px) 0 40px;
  position: relative;
  isolation: isolate;
}
.fuss::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 0%, rgba(5, 6, 9, 0.6) 100%);
  pointer-events: none;
}
.fuss-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.fuss-logo {
  height: 48px;
  width: auto;
  display: block;
  margin: 0 0 20px;
}
.fuss-fakt {
  margin: 0 0 12px;
  color: var(--ink-2);
  font-size: 0.94rem;
  line-height: 1.6;
}
.fuss-fakt a { color: var(--ink); border-bottom: 1px solid var(--line-2); padding-bottom: 1px; }
.fuss-fakt a:hover { border-color: var(--red); }
.fuss-foto {
  margin: 0;
  color: var(--ink-3);
  font-size: 0.84rem;
}
.fuss-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
}
.fuss-nav a {
  color: var(--ink-2);
  transition: color 0.25s;
}
.fuss-nav a:hover { color: var(--ink); }
.fuss-c {
  margin: 40px 0 0;
  color: var(--ink-3);
  font-size: 0.82rem;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
@media (max-width: 700px) {
  .fuss-grid { grid-template-columns: 1fr; }
}

/* ---------- CALLBAR (Mobile) -------------------------------- */

.callbar {
  display: none;
}
@media (max-width: 720px) {
  .callbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: fixed;
    left: 12px; right: 12px;
    bottom: 12px;
    z-index: var(--z-callbar);
    background: var(--red-deep);
    color: #fff;
    padding: 16px 24px;
    border-radius: var(--r-pill);
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6);
  }
  .callbar svg { width: 20px; height: 20px; fill: currentColor; }
  body { padding-bottom: 88px; }
}

/* ---------- LIGHTBOX ---------------------------------------- */

.lightbox {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  max-width: 100vw;
  max-height: 100vh;
}
.lightbox::backdrop {
  background: rgba(5, 6, 9, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.lightbox figure {
  margin: 0;
  display: grid;
  place-items: center;
  gap: 16px;
  padding: 40px;
}
.lightbox img {
  max-width: min(1400px, 96vw);
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--r-md);
}
.lightbox figcaption {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-2);
  font-size: 1.1rem;
}
.lightbox-close {
  position: fixed;
  top: 20px; right: 20px;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(244, 244, 243, 0.1);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  display: grid;
  place-items: center;
  z-index: 10;
}
.lightbox-close:hover { background: rgba(244, 244, 243, 0.2); }

/* ---------- SEARCH OVERLAY ---------------------------------- */

.search-overlay {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  margin: 0;
}
.search-overlay::backdrop {
  background: rgba(5, 6, 9, 0.85);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.search-inner {
  width: min(680px, calc(100vw - 32px));
  margin: clamp(60px, 12vh, 140px) auto 0;
  display: grid;
  gap: 20px;
}
.search-input-wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 20px;
  background: linear-gradient(180deg, rgba(20, 22, 29, 0.94), rgba(10, 11, 15, 0.96));
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  backdrop-filter: blur(20px) saturate(1.15);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}
.search-icon {
  width: 20px;
  height: 20px;
  color: var(--ink-3);
}
.search-input {
  font: inherit;
  font-size: 1.05rem;
  background: transparent;
  border: 0;
  color: var(--ink);
  padding: 14px 4px;
  width: 100%;
  outline: none;
  min-width: 0;
}
.search-input::placeholder { color: var(--ink-4); }
.search-close {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(244, 244, 243, 0.08);
  color: var(--ink);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
}
.search-close:hover { background: rgba(244, 244, 243, 0.16); }

.search-results {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 4px;
  max-height: 60vh;
  overflow-y: auto;
}
.search-results li {
  padding: 0;
}
.search-results button {
  width: 100%;
  text-align: left;
  padding: 14px 20px;
  background: transparent;
  color: var(--ink);
  border-radius: var(--r-md);
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: baseline;
  transition: background 0.2s;
  border: 1px solid transparent;
}
.search-results button:hover,
.search-results button:focus-visible {
  background: rgba(244, 244, 243, 0.05);
  border-color: var(--line);
  outline: none;
}
.search-results .r-tag {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 340;
  font-size: 0.82rem;
  color: var(--halogen-orange);
  flex-shrink: 0;
}
.search-results .r-title {
  font-family: var(--font-sans);
  font-weight: 620;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.3;
}
.search-results .r-sub {
  font-size: 0.88rem;
  color: var(--ink-3);
  margin-top: 4px;
}
.search-results mark {
  background: rgba(225, 29, 42, 0.2);
  color: var(--ink);
  padding: 0 2px;
  border-radius: 2px;
}

.search-hint {
  margin: 0;
  padding: 0 20px;
  color: var(--ink-3);
  font-size: 0.9rem;
  text-align: center;
}
.search-hint.is-empty {
  padding: 30px 20px;
  color: var(--ink-3);
}

@media (max-width: 720px) {
  .search-input-wrap { padding: 6px 6px 6px 16px; }
  .search-input { font-size: 1rem; padding: 12px 4px; }
  .search-close { width: 36px; height: 36px; }
}

/* ---------- REDUCED MOTION ---------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .js .type-clip .line > * { transform: none !important; }
  .hero-media > img, .hero-media > video,
  .timepiece-media img, .kontakt-media img,
  .portrait-media img, .rundgang-slide img { transform: none !important; }
  .hero-scroll-line::after { animation: none; }
}