/* ==========================================================================
   c-r.de – CR Group GmbH · Relaunch 2026
   Dunkel, luxuriös, viel Bewegung. Statisches HTML/CSS/JS + GSAP (lokal).
   ========================================================================== */

/* ---------- Fonts (selbst gehostet, WOFF2) -------------------------------- */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fr-light.woff2') format('woff2');
  font-weight: 340; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fr-semi.woff2') format('woff2');
  font-weight: 560; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fr-italic.woff2') format('woff2');
  font-weight: 380; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/hk-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/hk-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/hk-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Tokens --------------------------------------------------------- */
:root {
  --bg: #0B0B0C;
  --bg-2: #121213;
  --ink: #F2EFE8;
  --muted: #A29A8D;
  --faint: #6E675C;
  --line: rgba(242, 239, 232, 0.14);
  --gold: #C2A25A;
  --gold-deep: #8F7A46;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Hanken Grotesk', -apple-system, 'Segoe UI', sans-serif;
  --pad-x: clamp(1.25rem, 5vw, 4.5rem);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Basis ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scrollbar-color: var(--faint) var(--bg); }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

::selection { background: var(--gold); color: #14110A; }

a { color: inherit; text-decoration: none; }

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

/* ---------- Fixed Layer: Aurora & Grain ------------------------------------ */
.aurora {
  position: fixed; inset: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
  overflow: hidden;
}
.aurora .blob {
  position: absolute;
  width: 72vmax; height: 72vmax;
  border-radius: 50%;
  will-change: transform;
}
.aurora .b1 {
  --c: #C2A25A;
  top: -28vmax; left: -18vmax;
  background: radial-gradient(closest-side, var(--c), transparent 68%);
  opacity: 0.30;
}
.aurora .b2 {
  --c: #6E5A31;
  bottom: -32vmax; right: -20vmax;
  background: radial-gradient(closest-side, var(--c), transparent 68%);
  opacity: 0.22;
}

.grain {
  position: fixed; inset: -2%;
  z-index: 4;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

.vignette {
  position: fixed; inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.42) 100%);
}

/* ---------- Scroll-Fortschritt ---------------------------------------------- */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 30;
  pointer-events: none;
}
.progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), #EAD9A8);
  transform: scaleX(0);
  transform-origin: left;
}

/* ---------- Custom Cursor (JS aktiviert via body.has-cursor) ----------------- */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  z-index: 40;
  pointer-events: none;
  border-radius: 50%;
  display: none;
}
body.has-cursor .cursor-dot,
body.has-cursor .cursor-ring { display: block; }
.cursor-dot {
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--gold);
}
.cursor-ring {
  width: 36px; height: 36px;
  margin: -18px 0 0 -18px;
  border: 1px solid rgba(194, 162, 90, 0.5);
  transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out),
              margin 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.cursor-ring.is-link {
  width: 56px; height: 56px;
  margin: -28px 0 0 -28px;
  border-color: rgba(234, 217, 168, 0.85);
}

/* ---------- Header ---------------------------------------------------------- */
.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* .brand ist absolut verankert; Kontakt gehoert nach rechts */
  padding: clamp(1rem, 2.6vh, 1.6rem) var(--pad-x);
}
.site-head .brand { display: inline-flex; color: var(--ink); }
.site-head .brand svg { height: 38px; width: auto; display: block; }

.head-link {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.4rem 0;
  position: relative;
  transition: color 0.35s var(--ease-out);
  background: none; border: 0; cursor: pointer; font-family: inherit;
}
.head-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}
.head-link:hover { color: var(--ink); }
.head-link:hover::after { transform: scaleX(1); }

/* ---------- Navigations-Rail ------------------------------------------------ */
.rail {
  position: fixed;
  right: clamp(0.9rem, 2.4vw, 2.2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
}
.rail a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.7rem;
  background: none; border: 0; cursor: pointer;
  padding: 0.15rem 0;
  font-family: inherit;
  color: var(--faint);
  transition: color 0.35s var(--ease-out);
}
.rail .label {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  white-space: nowrap;
}
.rail .tick {
  width: 18px; height: 1px;
  background: currentColor;
  transition: width 0.35s var(--ease-out), background-color 0.35s var(--ease-out);
}
.rail a:hover { color: var(--muted); }
.rail a:hover .label { opacity: 1; transform: none; }
.rail a.is-active { color: var(--gold); }
.rail a.is-active .tick { width: 30px; }
.rail a.is-active .label { opacity: 1; transform: none; color: var(--muted); }

/* ---------- Slides ----------------------------------------------------------- */
main { position: relative; z-index: 1; }

.slide {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(120% 90% at 50% 110%, var(--bg-2) 0%, transparent 55%),
    var(--bg);
  overflow: clip;
}

/* Goldene Schnittkante: sichtbar, wenn sich die Slide über die vorige schiebt */
.slide:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  z-index: 3;
  background: linear-gradient(90deg, transparent 4%, rgba(194, 162, 90, 0.4) 50%, transparent 96%);
}
.s-quiet::before { background: linear-gradient(90deg, transparent 4%, rgba(242, 239, 232, 0.12) 50%, transparent 96%) !important; }

/* Bühnenbild pro Slide */
.slide .bg {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.bg-art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* Foto-Ebene (unterste Schicht im Bühnenbild) + Lesbarkeits-Scrim.
   Die Dateien in assets/img/ sind austauschbar: gleiche Namen, gleiche Wirkung. */
.bg-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.5;
  transform-origin: 50% 50%;
  will-change: transform;
}
.bg-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 10, 12, 0.62) 0%, rgba(10, 10, 12, 0.28) 42%, rgba(10, 10, 12, 0.78) 100%);
}
/* Links ausgerichtete Slides: Textseite zusätzlich abdunkeln */
.s-eyedee .bg-scrim,
.s-photo .bg-scrim,
.s-sgs .bg-scrim {
  background:
    linear-gradient(90deg, rgba(10, 10, 12, 0.85) 0%, rgba(10, 10, 12, 0.55) 46%, rgba(10, 10, 12, 0.18) 100%),
    linear-gradient(180deg, rgba(10, 10, 12, 0.45) 0%, rgba(10, 10, 12, 0.15) 45%, rgba(10, 10, 12, 0.7) 100%);
}
/* Zentrierte Slides: Mitte beruhigen */
.s-crgroup .bg-scrim,
.s-contact .bg-scrim {
  background:
    radial-gradient(72% 64% at 50% 52%, rgba(10, 10, 12, 0.68) 0%, rgba(10, 10, 12, 0.3) 62%, rgba(10, 10, 12, 0.12) 100%),
    linear-gradient(180deg, rgba(10, 10, 12, 0.55) 0%, rgba(10, 10, 12, 0) 40%, rgba(10, 10, 12, 0.72) 100%);
}

.ghost-num {
  position: absolute;
  right: clamp(0.5rem, 4vw, 4rem);
  bottom: -0.14em;
  font-family: var(--serif);
  font-weight: 340;
  font-size: clamp(11rem, 30vw, 26rem);
  line-height: 1;
  color: var(--gold);
  opacity: 0.045;
  letter-spacing: -0.04em;
  user-select: none;
}

.slide .inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding: clamp(5.5rem, 14vh, 8rem) var(--pad-x);
  will-change: transform, opacity;
}

/* Typo-Bausteine */
.logo-slot { margin-bottom: clamp(1.6rem, 4vh, 2.6rem); color: var(--ink); }
.logo-slot svg,
.logo-slot img { width: auto; display: block; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(1.1rem, 3vh, 1.8rem);
}
.eyebrow::before {
  content: '';
  width: 34px; height: 1px;
  background: var(--gold);
  flex: 0 0 auto;
}

.headline {
  font-family: var(--serif);
  font-weight: 340;
  font-size: clamp(2.5rem, 7.4vw, 6.2rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  max-width: 16ch;
  text-wrap: balance;
}
.headline em {
  font-style: italic;
  font-weight: 380;
  color: var(--gold);
}

/* Wort-/Zeichen-Split für die Reveals (JS füllt .w/.c) */
.headline .w { display: inline-block; overflow: clip; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.headline .c { display: inline-block; will-change: transform; }

.sub {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.65;
  color: var(--muted);
  max-width: 52ch;
  margin-top: clamp(1.2rem, 3.2vh, 2rem);
}

.cta-row { margin-top: clamp(1.8rem, 4.5vh, 2.8rem); display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center; }

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  padding: 0.95rem 1.9rem;
  border: 1px solid rgba(194, 162, 90, 0.42);
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  background: none; cursor: pointer; font-family: inherit;
  transition: color 0.45s var(--ease-out), border-color 0.45s var(--ease-out);
}
.cta::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, var(--gold-deep), var(--gold) 55%, #E4CE96);
  transform: translateY(102%);
  transition: transform 0.55s var(--ease-out);
}
.cta .arrow { color: var(--gold); transition: transform 0.4s var(--ease-out), color 0.45s var(--ease-out); }
.cta:hover { color: #171208; border-color: var(--gold); }
.cta:hover::before { transform: translateY(0); }
.cta:hover .arrow { color: #171208; transform: translate(3px, -3px); }

/* ---------- Slide-Spezifika ---------------------------------------------------- */

/* S1 – CR Group */
.s-crgroup .logo-slot svg { height: clamp(96px, 15vh, 132px); }
.s-crgroup .inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.s-crgroup .eyebrow::before { display: none; }
.s-crgroup .eyebrow::after { content: none; }
.s-crgroup .headline { margin-inline: auto; }
.s-crgroup .sub { margin-inline: auto; }

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(1.4rem, 4vh, 2.4rem);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--faint);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.scroll-hint .line {
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, transparent, var(--gold));
}

/* S2 – eyedee */
.s-eyedee .logo-slot svg { height: clamp(40px, 6.5vh, 56px); }

/* S3 – chrisreiner */
.s-photo .logo-slot svg { height: clamp(56px, 9vh, 84px); }

/* S4 – Lebensfreunde: bewusster Tonbruch, ruhig und reduziert */
.s-quiet {
  background:
    radial-gradient(90% 70% at 50% 50%, #161311 0%, transparent 70%),
    var(--bg);
}
.s-quiet .inner {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.s-quiet .logo-slot svg,
.s-quiet .logo-slot img { height: clamp(84px, 14vh, 120px); }
.s-quiet .eyebrow { color: var(--faint); }
.s-quiet .eyebrow::before { background: var(--faint); }
.s-quiet .headline { font-size: clamp(2.2rem, 5.6vw, 4.6rem); }
.s-quiet .sub { margin-inline: auto; max-width: 44ch; }

/* S5 – SGS */
.s-sgs .logo-slot svg { height: clamp(84px, 13vh, 118px); }
.s-sgs .clip-wrap { clip-path: inset(0 0 0 0); }

/* S6 – Kontakt */
.s-contact .inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.contact-lines {
  margin-top: clamp(1.8rem, 5vh, 3rem);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.contact-lines a {
  font-family: var(--serif);
  font-weight: 340;
  font-size: clamp(1.5rem, 3.6vw, 2.7rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  transition: color 0.35s var(--ease-out), letter-spacing 0.5s var(--ease-out);
}
.contact-lines a:hover { color: var(--gold); letter-spacing: 0.015em; }

.foot {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.3rem var(--pad-x);
  border-top: 1px solid var(--line);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--faint);
}
.foot nav { display: flex; gap: 1.6rem; }
.foot a { transition: color 0.3s var(--ease-out); }
.foot a:hover { color: var(--ink); }

/* ---------- Unterseiten (Impressum / Datenschutz) ------------------------------ */
.legal {
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(9rem, 20vh, 11rem) var(--pad-x) 6rem;
}
.legal h1 {
  font-family: var(--serif);
  font-weight: 340;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin-bottom: 2rem;
}
.legal p { color: var(--muted); margin-bottom: 1.2rem; max-width: 60ch; }
.legal .back {
  display: inline-block;
  margin-top: 3rem;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- Mobile --------------------------------------------------------------- */
@media (max-width: 700px) {
  .rail .label { display: none; }
  /* Slide-Striche wandern nach oben: horizontale Punktleiste statt rechter Rail,
     damit rechts nichts mehr mit Text und Bildern kollidiert */
  .rail {
    top: 1.55rem;
    right: 50%;
    transform: translateX(50%);
    flex-direction: row;
    gap: 0.7rem;
  }
  .rail .tick { width: 12px; height: 2px; }
  .rail a.is-active .tick { width: 22px; }
  .aurora .blob { width: 95vmax; height: 95vmax; }
  .site-head .brand svg { height: 30px; }
  .headline { max-width: 14ch; }
  .foot { justify-content: center; text-align: center; }
  .ghost-num { font-size: clamp(9rem, 42vw, 15rem); opacity: 0.05; }
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* ---------- Draw-In-Startzustand (nur wenn Bewegung erlaubt; JS animiert) --------- */
@media (prefers-reduced-motion: no-preference) {
  .bg-art .draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
}

/* ---------- Reduzierte Bewegung --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .aurora, .grain, .progress, .cursor-dot, .cursor-ring { display: none !important; }
  .scroll-hint .line { background: var(--faint); }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Runde 4: groessere Logos, Mini-Galerien, Taenzerin, Performance
   ========================================================================== */

/* Performance-Hints: alle bewegten Ebenen auf den Compositor */
.slide .inner, .slide .bg, .bg-photo, .logo-slot, .mini, .dancer {
  backface-visibility: hidden;
}

/* Logos deutlich groesser (Scroll-Transform via GSAP auf .logo-slot) */
.logo-slot { transform-origin: left center; }
.s-crgroup .logo-slot, .s-quiet .logo-slot { transform-origin: center bottom; }
.s-crgroup .logo-slot svg { height: clamp(116px, 18vh, 172px); }
.s-eyedee .logo-slot svg  { height: clamp(64px, 10.5vh, 96px); }
.s-photo .logo-slot svg   { height: clamp(88px, 14vh, 128px); }
.s-quiet .logo-slot svg,
.s-quiet .logo-slot img   { height: clamp(110px, 18vh, 168px); }
.s-sgs .logo-slot svg     { height: clamp(112px, 18vh, 168px); }

/* ---------- Taenzerin: weicher Schatten hinter Slide 1 ------------------------ */
.dancer {
  position: absolute;
  left: 58%;
  bottom: -3%;
  height: 88%;
  width: auto;
  opacity: 0.5;
  filter: blur(14px);
  transform-origin: 50% 100%;
  will-change: transform;
  pointer-events: none;
}
@media (max-width: 700px) {
  .dancer { left: 48%; height: 74%; filter: blur(10px); opacity: 0.42; }
}

/* ---------- Mini-Galerien ------------------------------------------------------ */
.mini-gallery {
  display: flex;
  gap: clamp(0.8rem, 1.6vw, 1.3rem);
  margin-top: clamp(1.4rem, 3.6vh, 2.4rem);
}
.mini {
  width: clamp(88px, 10vw, 148px);
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(194, 162, 90, 0.28);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.85);
  will-change: transform;
  background: var(--bg-2);
}
.mini img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.mini.m1 { transform: rotate(-3deg); }
.mini.m2 { transform: rotate(2.2deg) translateY(10px); }

/* Links ausgerichtete Slides: Galerie als gefaecherter Stapel rechts */
@media (min-width: 1001px) {
  .s-eyedee .mini-gallery,
  .s-photo .mini-gallery,
  .s-sgs .mini-gallery {
    position: absolute;
    right: clamp(2rem, 6vw, 5rem);
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
    flex-direction: column;
    gap: 1.1rem;
  }
  .s-eyedee .mini, .s-photo .mini, .s-sgs .mini { width: clamp(150px, 13vw, 200px); }
  .s-eyedee .mini.m2, .s-photo .mini.m2, .s-sgs .mini.m2 { transform: rotate(2.2deg) translateX(26px); }
}
/* Auf zentrierten Slides bleibt die Galerie klein und mittig */
.s-crgroup .mini-gallery, .s-contact .mini-gallery, .s-quiet .mini-gallery { justify-content: center; }
.s-crgroup .mini { width: clamp(64px, 7vw, 96px); }
.s-contact .mini { width: clamp(76px, 8vw, 116px); }
.s-quiet .mini {
  border-color: rgba(242, 239, 232, 0.18);
}

/* Footer-Credit */
.foot .credit a { color: var(--muted); transition: color 0.3s var(--ease-out); }
.foot .credit a:hover { color: var(--gold); }

/* S1 kompakter, damit Logo + Galerie + Hint in 100svh passen */
.s-crgroup .inner { padding-top: clamp(4.2rem, 10vh, 6rem); padding-bottom: clamp(4.2rem, 10vh, 6rem); }
.s-crgroup .sub { margin-top: clamp(0.9rem, 2.2vh, 1.4rem); }
.s-crgroup .mini-gallery { margin-top: clamp(1rem, 2.6vh, 1.8rem); }
.s-crgroup .headline { font-size: clamp(2.4rem, 6.6vw, 5.4rem); }

/* Mobile-Verdichtung: Galerie + groessere Logos muessen in 100svh passen */
@media (max-width: 700px) {
  .slide .inner { padding-top: clamp(4.2rem, 9vh, 5.5rem); padding-bottom: clamp(3.6rem, 8vh, 5rem); }
  .mini { width: 64px; border-radius: 8px; }
  .mini-gallery { margin-top: 1rem; gap: 0.7rem; }
  .sub { font-size: 0.95rem; margin-top: 1rem; }
  .cta-row { margin-top: 1.3rem; }
  .s-eyedee .logo-slot svg { height: 50px; }
  .s-photo .logo-slot svg { height: 66px; }
  .s-sgs .logo-slot svg { height: 88px; }
  .s-quiet .logo-slot svg, .s-quiet .logo-slot img { height: 96px; }
  .s-crgroup .logo-slot svg { height: 104px; }
  .headline { font-size: clamp(2.1rem, 9vw, 2.9rem); }
}

/* ==========================================================================
   Runde 5: Taenzerin sichtbar, Snap-Feintuning-Support
   ========================================================================== */
.dancer-light {
  position: absolute;
  left: 46%;
  top: 4%;
  width: 52%;
  height: 96%;
  background: radial-gradient(50% 46% at 50% 52%, rgba(214, 178, 108, 0.34) 0%, rgba(150, 118, 64, 0.16) 55%, transparent 78%);
  pointer-events: none;
}
.dancer {
  opacity: 0.82;
  filter: blur(9px);
}
@media (max-width: 700px) {
  .dancer-light { left: 30%; width: 76%; }
  .dancer { opacity: 0.72; filter: blur(7px); }
}

.legal h2 {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 2.4rem 0 0.8rem;
}
.legal h2:first-of-type { margin-top: 1rem; }

/* ==========================================================================
   Runde 6: Tanzvideo, groesseres Header-Logo, Rechtsseiten-Navigation
   ========================================================================== */

/* Header-Logo deutlich groesser */
.site-head .brand {
  position: absolute;
  top: 2rem;
  left: 2rem;
  margin: 0;
  opacity: 0.75;
  transition: opacity 0.35s var(--ease-out);
}
.site-head .brand:hover, .site-head .brand:focus-visible { opacity: 1; }
.site-head .brand svg { height: 106px; overflow: visible; }
@media (max-width: 700px) { .site-head .brand { top: 1.4rem; left: 1.4rem; } .site-head .brand svg { height: 66px; } }

/* Tanzvideo: ersetzt Lichtinsel + SVG-Silhouette, weich in den Grund maskiert */
.dancer-video {
  position: absolute;
  left: 55%;
  top: 2%;
  height: 96%;
  width: auto;
  object-fit: cover;
  opacity: 0.78;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(50% 46% at 50% 50%, #000 36%, transparent 68%);
  mask-image: radial-gradient(50% 46% at 50% 50%, #000 36%, transparent 68%);
}
/* Solange das Video laeuft, sind SVG-Schatten und CSS-Lichtinsel aus */
.s-crgroup:not(.dvid-failed) .dancer,
.s-crgroup:not(.dvid-failed) .dancer-light { display: none; }
.s-crgroup.dvid-failed .dancer-video { display: none; }

@media (max-width: 700px) {
  .dancer-video { left: 30%; height: 78%; }
}
@media (prefers-reduced-motion: reduce) {
  .dancer-video { display: none !important; }
  .s-crgroup .dancer, .s-crgroup .dancer-light { display: block !important; }
}

/* Echtbild-Feinabstimmung: Marmor auf S1 ist heller als der Stand-in */
.s-crgroup .bg-photo { opacity: 0.34; }
.s-crgroup .bg-scrim {
  background:
    radial-gradient(72% 64% at 50% 52%, rgba(10, 10, 12, 0.8) 0%, rgba(10, 10, 12, 0.38) 62%, rgba(10, 10, 12, 0.14) 100%),
    linear-gradient(180deg, rgba(10, 10, 12, 0.6) 0%, rgba(10, 10, 12, 0.05) 40%, rgba(10, 10, 12, 0.75) 100%);
}

/* Runde 8: Feinschliff Typografie & Farbklima */
.sub { text-wrap: pretty; }
.s-eyedee .bg-photo { opacity: 0.3; }

/* Runde 10: Kachelbilder duerfen im Rahmen wandern (Ken-Burns) */
.mini img { transform-origin: 50% 50%; will-change: transform; }
/* Neues Horizont-Motiv auf S6: helle Wasserflaeche unten -> Fuss und Kontaktzeilen schuetzen */
.s-contact .bg-scrim {
  background:
    radial-gradient(72% 64% at 50% 46%, rgba(10, 10, 12, 0.7) 0%, rgba(10, 10, 12, 0.32) 62%, rgba(10, 10, 12, 0.12) 100%),
    linear-gradient(180deg, rgba(10, 10, 12, 0.55) 0%, rgba(10, 10, 12, 0.05) 38%, rgba(10, 10, 12, 0.62) 74%, rgba(10, 10, 12, 0.88) 100%);
}

/* Runde 13: Lebensfreunde bekommt ein Bild – aber im Fluesterton */
.s-quiet .bg-photo { opacity: 0.4; }
.s-quiet .bg-scrim {
  background:
    radial-gradient(80% 70% at 50% 50%, rgba(10, 10, 12, 0.55) 0%, rgba(10, 10, 12, 0.3) 60%, rgba(10, 10, 12, 0.2) 100%),
    linear-gradient(180deg, rgba(10, 10, 12, 0.5) 0%, rgba(10, 10, 12, 0.15) 45%, rgba(10, 10, 12, 0.6) 100%);
}

/* Runde 14: zurueckhaltender CTA fuer Lebensfreunde + S4-Verdichtung */
.cta-quiet { border-color: rgba(242, 239, 232, 0.28); }
.cta-quiet .arrow { color: var(--muted); }
.s-quiet .inner { padding-top: clamp(4.2rem, 9vh, 5.5rem); padding-bottom: clamp(3.6rem, 8vh, 5rem); }
.s-quiet .logo-slot svg, .s-quiet .logo-slot img { height: clamp(96px, 15vh, 140px); }
.s-quiet .sub { margin-top: clamp(0.9rem, 2.2vh, 1.4rem); }
.s-quiet .cta-row { margin-top: clamp(1.2rem, 3vh, 1.8rem); }
.s-quiet .mini-gallery { margin-top: clamp(1rem, 2.6vh, 1.6rem); }

/* Runde 16: Mobile-Raender und Galerie-Abstand */
@media (max-width: 700px) {
  .slide .inner { padding-inline: 1.6rem; }
  .site-head { padding-inline: 1.25rem; }
  .mini-gallery { justify-content: flex-start; }
  .s-crgroup .mini-gallery, .s-contact .mini-gallery, .s-quiet .mini-gallery { justify-content: center; }
  .ghost-num { right: 0.75rem; }
}

/* Kleine Viewports: CTAs kompakter, damit S5 (zwei Buttons) in 100svh passt */
@media (max-width: 700px) {
  .cta { padding: 0.75rem 1.25rem; font-size: 0.76rem; gap: 0.45rem; }
  .cta-row { gap: 0.8rem; margin-top: 1.1rem; }
  .s-sgs .logo-slot svg { height: 78px; }
  .s-sgs .sub { max-width: 40ch; }
}

/* Runde 18: flache Viewports (z. B. iPad quer 1024x768) vertikal verdichten */
@media (min-width: 701px) and (max-height: 830px) {
  .slide .inner { padding-top: clamp(3.6rem, 8vh, 5rem); padding-bottom: clamp(3.2rem, 7vh, 4.5rem); }
  .headline { font-size: clamp(2.2rem, 5.6vw, 4.6rem); }
  .sub { margin-top: 0.9rem; }
  .cta-row { margin-top: 1.2rem; }
  .mini-gallery { margin-top: 1.1rem; }
  .s-crgroup .logo-slot svg { height: clamp(96px, 15vh, 132px); }
  .s-eyedee .logo-slot svg { height: clamp(52px, 8.5vh, 76px); }
  .s-photo .logo-slot svg { height: clamp(70px, 11vh, 100px); }
  .s-quiet .logo-slot svg, .s-quiet .logo-slot img { height: clamp(84px, 13vh, 116px); }
  .s-sgs .logo-slot svg { height: clamp(88px, 14vh, 124px); }
  .scroll-hint { display: none; }
}

/* Tablets (Touch): Rail nur als Ticks, Labels sind Hover-Artefakte und
   kollidieren im Querformat mit dem Galerie-Faecher */
@media (max-width: 1100px) {
  .rail .label { display: none; }
}

/* Runde 21: Farbklima weiter abkuehlen */
.ghost-num { opacity: 0.05; }
.s-contact .bg-photo { opacity: 0.36; }

/* Runde 22: Der Zylinder zieht sich zum Gruss (Header-Logo) */
.site-head .brand .logo-hat {
  transform-box: fill-box;
  transform-origin: 30% 100%;
  transition: transform 0.45s var(--ease-out);
}
@media (hover: hover) {
  .site-head .brand:hover .logo-hat { transform: translate(10%, -34%) rotate(11deg); }
}
@media (prefers-reduced-motion: reduce) {
  .site-head .brand .logo-hat { transition: none; }
  .site-head .brand:hover .logo-hat { transform: none; }
}

/* Runde 27: Vorhang fuer Mehrfach-Spruenge (Rail/Kontakt) – statt Vorbeiflug */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 14; /* ueber Slides/Grain, unter Header (20) und Rail */
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}