/* ══════════════════════════════════════════════════════════
   OLIVIA — Beziehungscoaching
   Warm editorial luxury · cream / charcoal / brass · liquid glass
   ══════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --cream-50:  #FBF8F2;
  --cream-100: #F6F1E9;
  --cream-200: #EFE8DB;
  --cream-300: #E7DDCB;
  --sand:      #DCCFB8;

  --ink:       #201B14;
  --charcoal:  #2A241C;
  --charcoal-soft: #4A4238;
  --muted:     #736A5C;

  --gold:      #A8895A;
  --gold-deep: #8A6E42;

  /* RGB channels — drive every translucent tint/glow so themes can retint them */
  --cream-rgb:      246, 241, 233;
  --cream50-rgb:    251, 248, 242;
  --sand-rgb:       220, 207, 184;
  --ink-rgb:        32, 27, 20;
  --muted-rgb:      115, 106, 92;
  --gold-rgb:       168, 137, 90;
  --gold-deep-rgb:  138, 110, 66;

  --line:      rgba(var(--ink-rgb), 0.13);
  --line-soft: rgba(var(--ink-rgb), 0.08);

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Volle Bildschirmbreite nutzen — auf großen Displays wächst der
     Inhalt mit, statt in einer schmalen Mittelspalte zu stehen */
  --wrap: 100%;
  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --sec: clamp(4.5rem, 11vw, 9.5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--cream-100);
  color: var(--charcoal);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }

::selection { background: var(--gold); color: var(--cream-50); }

/* subtle paper grain over the whole page */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 1000; pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Layout helpers ─────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--sec); }

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

/* ── Typography primitives ──────────────────────────────── */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 1.4rem;
  display: flex; align-items: center; gap: 0.85rem;
}
.eyebrow::before {
  content: ""; width: 2.2rem; height: 1px;
  background: var(--gold); display: inline-block; flex: none;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: ""; width: 2.2rem; height: 1px; background: var(--gold);
}
.eyebrow--light { color: rgba(var(--cream-rgb), 0.78); }

.section-title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 380;
  font-size: clamp(2.1rem, 1.4rem + 3.4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.section-title em { font-weight: 380; color: var(--gold-deep); }

.section-head { max-width: 22ch; margin-bottom: clamp(2.75rem, 6vw, 5rem); }

/* ── Buttons (with liquid-glass sheen) ──────────────────── */
.btn {
  --bg: var(--ink); --fg: var(--cream-50);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 0.7em;
  background: var(--bg); color: var(--fg);
  font-family: var(--font-sans);
  font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 1.05em 1.75em; border: 1px solid var(--bg);
  border-radius: 999px; cursor: pointer;
  transition: background .5s var(--ease), color .5s var(--ease),
              border-color .5s var(--ease), transform .4s var(--ease), box-shadow .5s var(--ease);
  white-space: nowrap;
}
/* specular sweep — the "glass shine" */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 26%, rgba(255,255,255,0.5) 48%, transparent 66%);
  transform: translateX(-135%); transition: transform .85s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateX(135%); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -16px rgba(var(--ink-rgb),0.5); }
.btn__arrow { transition: transform .4s var(--ease); display: inline-block; }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ghost → turns to liquid glass on hover */
.btn--ghost {
  --bg: transparent; --fg: var(--ink);
  border-color: rgba(var(--ink-rgb),0.28);
}
.btn--ghost:hover {
  background: rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  backdrop-filter: blur(10px) saturate(180%);
  border-color: rgba(255,255,255,0.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 12px 30px -14px rgba(var(--ink-rgb),0.28);
  color: var(--ink);
}

/* glass — translucent at rest, adapts to whatever is behind it */
.btn--glass {
  background: rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border-color: rgba(var(--ink-rgb),0.14);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.btn--glass:hover {
  background: rgba(255,255,255,0.24);
  border-color: rgba(255,255,255,0.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 12px 28px -14px rgba(var(--ink-rgb),0.28);
  color: var(--ink);
}

.btn--sm { padding: 0.75em 1.35em; font-size: 0.72rem; }
.btn--lg { padding: 1.2em 2.4em; font-size: 0.875rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-weight: 500; font-size: 0.9rem;
  letter-spacing: 0.02em; color: var(--ink);
  padding-bottom: 0.2em; border-bottom: 1px solid var(--line);
  transition: gap .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.link-arrow span { color: var(--gold-deep); transition: transform .4s var(--ease); }
.link-arrow:hover { gap: 1em; border-color: var(--gold); color: var(--gold-deep); }
.link-arrow:hover span { transform: translateX(3px); }
.link-arrow--sm { font-size: 0.8rem; border: none; padding: 0; }

/* ══ NAVIGATION — real liquid glass ══════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .5s var(--ease), box-shadow .5s var(--ease),
              padding .5s var(--ease), border-color .5s var(--ease);
  padding-block: clamp(1rem, 2.2vw, 1.7rem);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(var(--cream50-rgb), 0.5);
  -webkit-backdrop-filter: blur(22px) saturate(185%);
  backdrop-filter: blur(22px) saturate(185%);
  border-bottom-color: rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 12px 34px -16px rgba(var(--ink-rgb),0.16);
  padding-block: 0.8rem;
}
.nav__inner {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--pad);
  display: flex; align-items: center; justify-content: space-between;
}
.nav__brand {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.6rem; letter-spacing: 0.01em; color: var(--ink);
  transition: color .5s var(--ease);
}
.nav__links { display: flex; gap: clamp(1.5rem, 3vw, 3rem); }
.nav__links a {
  font-size: 0.9rem; font-weight: 400; color: var(--charcoal);
  position: relative; padding-block: 0.3rem; transition: color .5s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--gold);
  transition: width .4s var(--ease);
}
.nav__links a:hover::after { width: 100%; }

.nav__actions { display: flex; align-items: center; gap: 1rem; }

.nav__toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 8px;
}
.nav__toggle span {
  width: 24px; height: 1.5px; background: var(--ink);
  transition: transform .4s var(--ease), opacity .3s var(--ease), background .5s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-6.5px) rotate(-45deg); }

/* adaptive: when the nav sits over a dark section */
.nav--dark .nav__brand,
.nav--dark .nav__links a { color: var(--cream-100); }
.nav--dark .nav__toggle span { background: var(--cream-100); }
.nav--dark.scrolled {
  background: rgba(var(--ink-rgb), 0.4);
  border-bottom-color: rgba(var(--cream-rgb), 0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 12px 34px -16px rgba(0,0,0,0.45);
}
.nav--dark .btn--glass {
  background: rgba(var(--cream-rgb), 0.10);
  border-color: rgba(var(--cream-rgb), 0.34);
  color: var(--cream-50);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.nav--dark .btn--glass:hover { background: rgba(var(--cream-rgb), 0.2); border-color: rgba(var(--cream-rgb),0.6); color: var(--cream-50); }

/* Liquid Glass auf den dunklen CTAs (Erstgespräch-Bande + Impuls-Form):
   Beige-Ton (wie der übrige Text auf Braun) statt Reinweiß, Text in
   Schwarz; Hover geht ins Rot wie beim Nav-Button; der Lichtreflex
   wandert per --shine-x (JS setzt ihn über die Mausposition) */
.pband .btn--glass,
.guide[data-act="2"] .guide__form .btn--glass {
  background: rgba(var(--cream-rgb), 0.92);
  border-color: rgba(var(--cream-rgb), 0.95);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 16px 34px -16px rgba(0,0,0,0.55);
}
.pband .btn--glass:hover,
.guide[data-act="2"] .guide__form .btn--glass:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--cream-50);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 18px 38px -16px rgba(0,0,0,0.6);
}
.erstg__cta .btn::after,
.guide__form .btn--glass::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg,
    transparent calc(var(--shine-x, 50%) - 13%),
    rgba(255, 255, 255, 0.5) var(--shine-x, 50%),
    transparent calc(var(--shine-x, 50%) + 13%));
}
@media (prefers-reduced-motion: reduce) {
  .erstg__cta .btn::after, .guide__form .btn--glass::after { display: none; }
}

/* ── Mobile menu ────────────────────────────────────────── */
.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(var(--cream-rgb), 0.86);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu__links { display: flex; flex-direction: column; gap: 1.6rem; text-align: center; }
.mobile-menu__links a {
  font-family: var(--font-display); font-size: 2rem; font-weight: 350; color: var(--ink);
}
.mobile-menu__links .btn { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 500; color: var(--cream-50); align-self: center; margin-top: 1rem; }
.mobile-menu__links .btn:hover { color: var(--cream-50); }

/* ══ HERO ════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 78% center;
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(var(--cream-rgb),0.94) 0%,
      rgba(var(--cream-rgb),0.72) 26%,
      rgba(var(--cream-rgb),0.28) 46%,
      rgba(var(--cream-rgb),0) 62%);
}
.hero__content {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--wrap);
  margin-inline: auto; padding-inline: var(--pad);
  /* Guaranteed clearance below the fixed header: because the hero centers its
     content (align-items:center), a taller title would otherwise rise into the
     header on short viewports. This padding acts as a floor so the eyebrow/title
     never crowd the top, regardless of which content variant is active. */
  padding-top: 9rem;
}
.hero__title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 340;
  font-size: clamp(2.9rem, 1.6rem + 6.4vw, 6.4rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 1.6rem;
}
.hero__title em { color: var(--gold-deep); font-weight: 340; }
.hero__lead {
  max-width: 34ch;
  font-size: clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem);
  line-height: 1.6; color: var(--charcoal-soft);
  margin-bottom: 2.5rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ══ ATEMPAUSE — Full-Bleed-Interlude ════════════════════ */
.interlude {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--cream-100);
}
.interlude__media { position: absolute; inset: 0; z-index: 0; }
.interlude__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%;
}
@media (prefers-reduced-motion: no-preference) {
  .interlude__media img { animation: interludeDrift 28s var(--ease) infinite alternate; will-change: transform; }
}
@keyframes interludeDrift { from { transform: scale(1.004); } to { transform: scale(1.07); } }

/* switcher bar — always on top, above whichever variant is active */
.interlude__bar {
  position: absolute; inset: 0 0 auto; z-index: 6;
  padding-top: clamp(1rem, 3vw, 1.7rem);
  pointer-events: none;
}
.interlude__bar .vswitch { position: static; margin-bottom: 0; pointer-events: auto; }

/* per-variant scrim (top always dissolves into cream → nav stays readable) */
.interlude__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.interlude__scrim--dawn {
  background:
    linear-gradient(to bottom,
      rgba(var(--cream50-rgb), 1) 0%,
      rgba(var(--cream50-rgb), 0.96) 15%,
      rgba(var(--cream50-rgb), 0.6) 32%,
      rgba(var(--cream50-rgb), 0.12) 47%,
      rgba(var(--cream50-rgb), 0) 60%),
    linear-gradient(to top,
      rgba(var(--cream-rgb), 1) 0%,
      rgba(var(--cream-rgb), 0) 20%);
}
.interlude__scrim--vast {
  background:
    linear-gradient(to bottom, rgba(var(--cream50-rgb), 1) 0%, rgba(var(--cream50-rgb), 0) 22%),
    linear-gradient(to top, rgba(var(--ink-rgb), 0.8) 0%, rgba(var(--ink-rgb), 0.34) 25%, rgba(var(--ink-rgb), 0.06) 46%, rgba(var(--ink-rgb), 0) 60%);
}
.interlude__scrim--quote {
  background:
    linear-gradient(to bottom, rgba(var(--cream50-rgb), 1) 0%, rgba(var(--cream50-rgb), 0) 20%),
    linear-gradient(to top, rgba(var(--ink-rgb), 0.62) 0%, rgba(var(--ink-rgb), 0.22) 38%, rgba(var(--ink-rgb), 0) 58%),
    radial-gradient(118% 74% at 50% 52%, rgba(var(--ink-rgb), 0.54) 0%, rgba(var(--ink-rgb), 0.14) 46%, rgba(var(--ink-rgb), 0) 70%);
}

/* content layers */
.interlude__content {
  position: relative; z-index: 3;
  display: flex; flex-direction: column;
  min-height: clamp(30rem, 88svh, 58rem);
  padding-block: clamp(2.4rem, 7vh, 5.5rem);
}
.interlude__content--top { justify-content: flex-start; padding-top: clamp(3.75rem, 9vh, 6rem); }
.interlude__content--top .eyebrow { text-shadow: 0 1px 18px rgba(var(--cream50-rgb), 0.85); }
.interlude__content--top .interlude__title { max-width: 19ch; text-shadow: 0 2px 26px rgba(var(--cream50-rgb), 0.7); }
.interlude__content--bottom { justify-content: flex-end; }
.interlude__content--bottom .eyebrow { text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55); }
.interlude__content--center { justify-content: center; align-items: center; text-align: center; }

.interlude__title {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 360;
  font-size: clamp(2.2rem, 1.3rem + 4vw, 4.6rem);
  line-height: 1.02; letter-spacing: -0.025em;
  color: var(--ink); max-width: 20ch;
}
.interlude__title em { color: var(--gold-deep); font-weight: 360; }
.interlude__title--light { color: var(--cream-50); text-shadow: 0 1px 44px rgba(0, 0, 0, 0.38); max-width: 17ch; }
.interlude__title--light em { color: var(--gold); }

.interlude__quote {
  font-family: var(--font-display); font-style: italic; font-weight: 340;
  font-size: clamp(1.7rem, 1.05rem + 2.7vw, 3.2rem);
  line-height: 1.16; letter-spacing: -0.015em;
  color: var(--cream-50); max-width: 24ch; text-shadow: 0 1px 46px rgba(0, 0, 0, 0.42);
}
.interlude__quote em { color: var(--gold); font-style: italic; }
.interlude__cite {
  margin-top: clamp(1rem, 2.4vw, 1.6rem);
  font-family: var(--font-sans); font-size: 0.78rem;
  letter-spacing: 0.28em; text-transform: uppercase; color: rgba(var(--cream-rgb), 0.92);
  display: flex; align-items: center; gap: 0.7rem; justify-content: center;
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.5);
}
.interlude__cite::before { content: ""; width: 2rem; height: 1px; background: var(--gold); }

@media (max-width: 640px) {
  .interlude__content { min-height: clamp(26rem, 82svh, 42rem); }
  .interlude__media img { object-position: 56% 50%; }
  .interlude__content--top { padding-top: clamp(4.25rem, 15vh, 6.5rem); }
}

/* ══ MANIFEST (reduziert, kinetisch) ═════════════════════ */
.manifest { background: var(--cream-100); }
/* (Wrap-Verengung entfernt — einheitliche linke Kante mit allen Sektionen) */
.manifest__line {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 330;
  font-size: clamp(1.9rem, 1rem + 4.4vw, 4.6rem);
  line-height: 1.07; letter-spacing: -0.03em; color: var(--ink);
}
.manifest__line em { font-style: italic; color: var(--gold-deep); }
.manifest__line--muted { color: var(--muted); margin-top: 0.4em; max-width: 22ch; }

/* ══ NAV CTA — strong / prominent (user: "stärker") ══════ */
.nav__actions .btn {
  background: var(--ink); color: var(--cream-50); border-color: var(--ink);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 8px 20px -10px rgba(var(--ink-rgb),0.5);
}
.nav__actions .btn:hover { background: var(--gold); border-color: var(--gold); color: var(--cream-50); }
.nav--dark .nav__actions .btn { background: var(--cream-50); color: var(--ink); border-color: var(--cream-50); }
.nav--dark .nav__actions .btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* scroll progress bar (element injected by JS) */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left center; will-change: transform;
}

.section-title--light { color: var(--cream-50); }
.section-title--light em { color: var(--gold); }

/* ══ TIMELINE (Der Ansatz) — grafisch, scroll-gezeichnet ══ */
.timeline { background: var(--ink); color: var(--cream-100); }
.timeline .section-head { max-width: 34ch; }
.timeline__track { position: relative; margin-top: clamp(2rem, 5vw, 4rem); }
.timeline__line {
  position: absolute; top: 0.6rem; bottom: 0.6rem;
  left: calc(clamp(3.4rem, 6vw, 5rem) / 2 - 1px); width: 2px;
  background: rgba(var(--cream-rgb),0.12); border-radius: 2px; overflow: hidden;
}
.timeline__fill { position: absolute; inset: 0 0 auto 0; height: 0%; background: var(--gold); transition: height .12s linear; }
.timeline__steps { list-style: none; display: flex; flex-direction: column; gap: clamp(2.4rem, 5vw, 4.5rem); }
.timeline__step {
  position: relative; display: grid;
  grid-template-columns: clamp(3.4rem, 6vw, 5rem) 1fr;
  gap: clamp(1.4rem, 3vw, 3rem); align-items: start;
}
.js .timeline__step { opacity: 0.4; transition: opacity .6s var(--ease); }
.js .timeline__step.is-active { opacity: 1; }
.timeline__node {
  position: relative; z-index: 2;
  width: clamp(3.4rem, 6vw, 5rem); height: clamp(3.4rem, 6vw, 5rem);
  border-radius: 50%; border: 1.5px solid rgba(var(--gold-rgb),0.4); background: var(--ink);
  display: grid; place-items: center;
  transition: border-color .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.timeline__num { font-family: var(--font-display); font-style: italic; font-weight: 340; font-size: clamp(1.1rem, 2.4vw, 1.5rem); color: rgba(var(--cream-rgb),0.5); transition: color .5s var(--ease); }
.timeline__step.is-active .timeline__node {
  border-color: var(--gold); background: var(--gold);
  box-shadow: 0 0 0 8px rgba(var(--gold-rgb),0.14); transform: scale(1.06);
}
.timeline__step.is-active .timeline__num { color: var(--ink); }
.timeline__content { padding-top: clamp(0.3rem, 1vw, 0.9rem); }
.timeline__title {
  font-family: var(--font-display); font-weight: 360;
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.8rem); line-height: 1.06;
  letter-spacing: -0.02em; color: var(--cream-50); margin-bottom: 0.9rem;
}
.timeline__text { color: rgba(var(--cream-rgb),0.66); max-width: 46ch; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); line-height: 1.6; }

/* ══ OFFERS (Angebote) — Bento-Grid, nicht verlinkt ══════ */
.offers { background: var(--cream-100); }
.offers__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  grid-template-areas: "feat two" "feat three" "four four";
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
}
.offer {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px;
  padding: clamp(1.8rem, 3vw, 2.8rem);
  background: var(--cream-50);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem;
  min-height: 248px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.offer:hover { transform: translateY(-5px); box-shadow: 0 34px 55px -34px rgba(var(--ink-rgb),0.34); border-color: rgba(var(--gold-rgb),0.5); }
.offer__num {
  position: absolute; top: -0.22em; right: 0.06em; pointer-events: none;
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(5.5rem, 12vw, 10rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(var(--gold-rgb),0.26);
  transition: -webkit-text-stroke-color .5s var(--ease), transform .6s var(--ease);
}
.offer:hover .offer__num { -webkit-text-stroke-color: rgba(var(--gold-rgb),0.55); transform: translateY(-5px); }
.offer__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.offer__tags span {
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  color: var(--gold-deep); border: 1px solid var(--line); border-radius: 999px; padding: 0.4em 0.9em;
}
.offer__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.15rem); line-height: 1.08; letter-spacing: -0.01em; color: var(--ink); }
.offer__text { color: var(--muted); max-width: 42ch; }
.offer--featured { grid-area: feat; background: var(--ink); border-color: var(--ink); }
.offer--featured .offer__title { color: var(--cream-50); }
.offer--featured .offer__text { color: rgba(var(--cream-rgb),0.66); }
.offer--featured .offer__tags span { color: var(--gold); border-color: rgba(var(--cream-rgb),0.24); }
.offer--featured .offer__num { -webkit-text-stroke-color: rgba(var(--gold-rgb),0.5); }
.offer--two { grid-area: two; }
.offer--three { grid-area: three; }
.offer--four { grid-area: four; }
.offers__cta { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 3.2rem); }

/* ══ ABOUT ═══════════════════════════════════════════════ */
.about { background: var(--cream-200); }
.about__grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
}
.about__grid--rev { grid-template-columns: 1.1fr 0.9fr; }
.about__media { position: relative; }
.about__media img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 60% 30%;
  border-radius: 4px;
}
.about__tag {
  position: absolute; bottom: 1.4rem; left: -1.2rem;
  background: var(--cream-50); color: var(--ink);
  font-family: var(--font-display); font-style: italic; font-size: 1.4rem;
  padding: 0.5rem 1.6rem; border-radius: 999px;
  box-shadow: 0 20px 40px -20px rgba(var(--ink-rgb),0.35);
}
.about__body > * + * { margin-top: 1.4rem; }
.about__body p { color: var(--charcoal-soft); max-width: 46ch; }
.about__stats {
  display: flex; gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: 1.8rem 0.4rem; margin-top: 2rem;
  border-top: 1px solid var(--line);
}
.about__stats div { display: flex; flex-direction: column; }
.about__stats strong {
  font-family: var(--font-display); font-weight: 380; font-size: 2.2rem;
  color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums;
}
.about__stats span { font-size: 0.8rem; color: var(--muted); letter-spacing: 0.03em; margin-top: 0.4rem; }
.about__body .btn { margin-top: 2.4rem; }

/* decorative offset frame behind the portrait */
.about__media img { position: relative; z-index: 1; }
.about__media::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  transform: translate(1.1rem, 1.1rem);
  border: 1px solid var(--gold); border-radius: 4px;
}
.about__tag { z-index: 2; }

/* faux signature */
.about__signature { margin-top: 2.2rem; }
.about__signature-name {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 1.8vw, 2.8rem); color: var(--ink); line-height: 1;
}
.about__signature svg { display: block; margin-top: 0.4rem; width: clamp(120px, 18vw, 180px); height: auto; color: var(--gold); }

/* ══ QUOTE ═══════════════════════════════════════════════ */
.quote { background: var(--ink); color: var(--cream-100); text-align: center; position: relative; }
.quote .wrap { max-width: 1000px; position: relative; }
.quote__mark {
  font-family: var(--font-display); font-size: 9rem; line-height: 0.5;
  color: var(--gold); opacity: 0.5; height: 3rem;
}
.quote__text {
  font-family: var(--font-display); font-weight: 330;
  font-size: clamp(1.7rem, 1.1rem + 2.8vw, 3.2rem);
  line-height: 1.28; letter-spacing: -0.015em; color: var(--cream-50);
  margin-block: 1.5rem 2rem;
}
.quote__text em { color: var(--gold); font-style: italic; }
.quote__by { font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sand); }

/* ══ VOICES ══════════════════════════════════════════════ */
.voices { background: var(--cream-100); }
.voices__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.voice {
  background: var(--cream-50); border: 1px solid var(--line-soft);
  padding: clamp(1.8rem, 3vw, 2.6rem); border-radius: 4px;
  display: flex; flex-direction: column; gap: 1.5rem;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.voice:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -30px rgba(var(--ink-rgb),0.3); }
.voice blockquote {
  font-family: var(--font-display); font-weight: 360; font-style: italic;
  font-size: 1.2rem; line-height: 1.45; color: var(--charcoal); flex: 1;
}
.voice figcaption {
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 500;
}

/* ══ GUIDE / LEAD MAGNET ═════════════════════════════════ */
.guide { background: var(--cream-300); }
.guide__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.guide__text p {
  /* läuft auf voller Spaltenbreite wie die Frage darüber (Feedback 17.07.) */
  color: var(--charcoal-soft); margin-top: 1.4rem; max-width: none;
}
.guide__form { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.guide__form input {
  flex: 1 1 260px; font-family: var(--font-sans); font-size: 1rem;
  padding: 1.05em 1.4em; border: 1px solid rgba(var(--ink-rgb),0.2);
  border-radius: 999px; background: var(--cream-50); color: var(--ink);
  transition: border-color .4s var(--ease);
}
.guide__form input::placeholder { color: var(--muted); }
.guide__form input:focus { outline: none; border-color: var(--gold); }
.guide__note { flex-basis: 100%; font-size: 0.78rem; color: var(--muted); margin-top: 0.2rem; }

/* ══ FAQ ═════════════════════════════════════════════════ */
.faq { background: var(--cream-100); }
.faq__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: 1.6rem;
  font-family: var(--font-display); font-weight: 400; font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
  color: var(--ink); line-height: 1.25;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icon { position: relative; width: 16px; height: 16px; flex: none; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; background: var(--gold-deep);
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.faq__icon::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.faq__icon::after { left: 50%; top: 0; height: 100%; width: 1.5px; transform: translateX(-50%); }
.faq__item[open] .faq__icon::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }
.faq__item[open] summary { color: var(--gold-deep); }
.faq__item p {
  color: var(--muted); max-width: 56ch;
  padding-bottom: 1.7rem; margin-top: -0.3rem;
  animation: faqIn .5s var(--ease);
}
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ══ CTA ═════════════════════════════════════════════════ */
.cta { background: var(--cream-200); text-align: center; }
.cta__title {
  font-family: var(--font-display); font-weight: 340;
  font-size: clamp(2.6rem, 1.5rem + 5vw, 5.5rem);
  line-height: 1; letter-spacing: -0.03em; color: var(--ink);
  margin-block: 0.6rem 1.6rem;
}
.cta__title em { color: var(--gold-deep); }
.cta__lead { max-width: 44ch; margin-inline: auto; color: var(--charcoal-soft); margin-bottom: 2.6rem; font-size: 1.1rem; }

/* ══ OUTRO ═══════════════════════════════════════════════ */
/* Feuerwerk über der Croisette als stiller Schlussakkord: volle
   Breite, Bild unbeschnitten (height: auto). Oben und unten fadet
   es weich in die dunkle Seite bzw. Richtung Footer aus; ein leiser
   Rand-Verlauf in Foto-Schwarz dunkelt die Flanken ab. */
.outro {
  margin: 0; position: relative; line-height: 0;
  /* R15 (19.07.): Der Banner-Hintergrund (--ink) darf oben NICHT hart auf die
     helle Body-Fläche stoßen. Deshalb kein solides Braun, sondern ein Verlauf,
     der oben aus Transparenz (= Creme des Body) weich ins Braun einblendet.
     Unten bleibt --ink und trifft nahtlos auf den ebenfalls dunklen Footer. */
  background: linear-gradient(180deg, transparent 0%, var(--ink) 42%, var(--ink) 100%);
}
.outro img {
  /* R14 (19.07.): Bild ~30% schmaler & niedriger (width 70%, zentriert),
     GLEICHER Ausschnitt (3/1, pos 77%). Statt voller Breite blendet das
     Bild an allen vier Kanten weich ins Braun des Hintergrunds (--ink)
     aus — dadurch nimmt der Banner deutlich weniger Platz ein, ohne dass
     etwas vom Paar abgeschnitten wird. Köpfe/Rücken sitzen mittig. */
  display: block; width: 70%; margin-inline: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover; object-position: 50% 77%;
  /* vier-Kanten-Fade: vertikale + horizontale Maske kombiniert */
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 32%, #000 82%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(180deg, transparent 0%, #000 32%, #000 82%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-composite: intersect;
}
@media (max-width: 720px) { .outro img { width: 90%; } }

/* ══ FOOTER ══════════════════════════════════════════════ */
.footer { background: var(--ink); color: var(--cream-200); padding-block: clamp(3.5rem, 7vw, 6rem) 2.5rem; }
.footer__inner {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem;
  padding-bottom: 3.5rem; border-bottom: 1px solid rgba(var(--cream-rgb),0.12);
}
.footer__logo { font-family: var(--font-display); font-size: 2rem; color: var(--cream-50); }
.footer__brand p { color: rgba(var(--cream-rgb),0.55); margin-top: 0.8rem; max-width: 26ch; }
.footer__nav, .footer__social { display: flex; flex-direction: column; gap: 0.9rem; padding-top: 0.6rem; }
.footer__nav a, .footer__social a { color: rgba(var(--cream-rgb),0.7); font-size: 0.92rem; width: fit-content; transition: color .3s var(--ease); }
.footer__nav a:hover, .footer__social a:hover { color: var(--gold); }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem; padding-top: 2.5rem;
}
.footer__bottom p { font-size: 0.82rem; color: rgba(var(--cream-rgb),0.45); }
.footer__legal { display: flex; gap: 1.8rem; }
.footer__legal a { font-size: 0.82rem; color: rgba(var(--cream-rgb),0.55); transition: color .3s var(--ease); }
.footer__legal a:hover { color: var(--gold); }

/* ══ SUBPAGE HEADER ══════════════════════════════════════ */
.page-hero { padding-block: clamp(8.5rem, 17vh, 13rem) clamp(2.5rem, 6vw, 4.5rem); background: var(--cream-100); }
.page-hero__title {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 330;
  font-size: clamp(2.8rem, 1.6rem + 5vw, 5.6rem); line-height: 1.0;
  letter-spacing: -0.03em; color: var(--ink); margin-top: 0.4rem;
}
.page-hero__title em { color: var(--gold-deep); font-style: italic; }
.page-hero__lead { max-width: 54ch; margin-top: 1.6rem; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); color: var(--charcoal-soft); }

/* active nav link (current page) */
.nav__links a[aria-current="page"] { color: var(--gold-deep); }
.nav__links a[aria-current="page"]::after { width: 100%; }
.nav--dark .nav__links a[aria-current="page"] { color: var(--gold); }

/* anchor offset under the fixed nav */
:target { scroll-margin-top: 6rem; }

/* ══ CONTACT (Kontakt-Seite) ═════════════════════════════ */
.contact { background: var(--cream-100); }
.contact__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.contact__lead { font-family: var(--font-display); font-weight: 340; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 2rem; max-width: 18ch; }
.contact__lead em { color: var(--gold-deep); font-style: italic; }
.contact__details { display: flex; flex-direction: column; }
.contact__detail { border-top: 1px solid var(--line); padding-top: 1.3rem; margin-top: 1.5rem; }
.contact__detail:first-child { margin-top: 0; }
.contact__label { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; }
.contact__value { font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); line-height: 1.3; }
.contact__value a { border-bottom: 1px solid var(--line); transition: border-color .3s var(--ease), color .3s var(--ease); }
.contact__value a:hover { border-color: var(--gold); color: var(--gold-deep); }

/* ══ MANIFEST — scroll word-fill ═════════════════════════ */
.manifest__text {
  /* Bubble statt freiem Statement (Feedback 17.07.): schlichte Kachel-Optik
     wie die Pakete, nur mit weichem Doppelschatten — Text eine Stufe kleiner
     als das Statement-Format, läuft dafür breiter, Sektion wird flacher */
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 340;
  font-size: clamp(1.4rem, 0.95rem + 1.9vw, 2.3rem);
  line-height: 1.42; letter-spacing: -0.015em; color: var(--ink);
  max-width: none;
  /* R34 (21.07.): undurchsichtig + über der Fassade — die Fassade schien vorher
     durch die halbtransparente Bubble durch. */
  position: relative; z-index: 2;
  background: var(--cream-50);
  border: 1px solid var(--line-soft);
  border-radius: 1.8rem;
  /* R30 (21.07.): Blocksatz + mehr Innenabstand, damit der Text mittiger in
     der Bubble sitzt (nicht am Rand klebt) */
  padding: clamp(2.1rem, 4vw, 3.2rem) clamp(2.4rem, 5vw, 4rem);
  text-align: justify; text-wrap: pretty;
  box-shadow:
    0 14px 30px -18px rgba(var(--ink-rgb), 0.28),
    0 42px 90px -48px rgba(var(--ink-rgb), 0.32);
}
.manifest__text em { color: var(--gold-deep); }
/* R29 (21.07.): Bubble enger und zentriert (nicht mehr randbündig), ab der
   Breite, wo die Fassade erscheint — verhindert Überlappung und wirkt ruhiger.
   Auf Mobil bleibt sie voll (Fassade dort ohnehin aus). Textgröße unverändert. */
@media (min-width: 1080px) {
  .manifest__text { max-width: 70%; margin-inline: auto; }
}
.mword { display: inline-block; }
.js [data-scrollfill] .mword { opacity: 0.12; }
.mword--accent { color: var(--gold-deep); font-style: italic; }

/* ══ ROTATING SEAL — floating booking badge ══════════════ */
.seal {
  position: fixed; bottom: clamp(1.2rem, 3vw, 2rem); right: clamp(1.2rem, 3vw, 2rem);
  width: clamp(88px, 11vw, 118px); aspect-ratio: 1; z-index: 90;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--ink); color: var(--cream-50);
  box-shadow: 0 18px 44px -16px rgba(var(--ink-rgb),0.55);
  opacity: 0; transform: scale(0.7); pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.seal.is-visible { opacity: 1; transform: scale(1); pointer-events: auto; }
.seal__svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: sealspin 16s linear infinite; }
.seal__svg text { fill: var(--cream-100); font-family: var(--font-sans); font-size: 8px; font-weight: 500; letter-spacing: 1.4px; }
.seal__dot { font-size: 1.35rem; color: var(--gold); transition: transform .4s var(--ease); }
.seal:hover .seal__dot { transform: translate(3px, -3px); }
.seal:hover .seal__svg { animation-duration: 5s; }
@keyframes sealspin { to { transform: rotate(360deg); } }

/* ══ OFFER CARD 3D tilt (JS-driven) ══════════════════════ */
.offers__grid { perspective: 1200px; }
.offer { transform-style: preserve-3d; }

/* ══ Impuls-Block atmospheric gold glow ══════════════════ */
.guide { position: relative; }
/* (Der frühere rote Glow lebte nur in dieser Sektion und wurde an der
   FAQ-Grenze hart abgeschnitten — das war die sichtbare Kante dort.
   Der Effekt lebt jetzt durchgehend in der .act-atmo-Ebene.) */
.guide .wrap { position: relative; z-index: 1; }
.guide__text .section-title em { color: var(--gold-deep); }
@keyframes glowpulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.75; }
  50% { transform: translate(-50%, -50%) scale(1.16); opacity: 1; }
}

/* ══ VARIANT SWITCHER (design chooser per block) ═════════ */
[data-variant-block] { position: relative; }
.vswitch {
  position: sticky; top: clamp(4.5rem, 9vh, 6rem);
  margin-left: auto; margin-bottom: clamp(1rem, 3vw, 1.8rem); width: fit-content;
  z-index: 6; display: flex; align-items: center; gap: 0.14rem;
  padding: 0.2rem; border-radius: 999px;
  background: rgba(var(--ink-rgb), 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 10px 26px -12px rgba(0, 0, 0, 0.4);
}
.vswitch__label { font-size: 0.5rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(var(--cream-rgb), 0.55); padding: 0 0.32rem 0 0.38rem; }
.vswitch button {
  flex: none;
  width: 1.3rem; height: 1.3rem; border-radius: 50%; border: none; cursor: pointer;
  font-family: var(--font-display); font-style: italic; font-size: 0.66rem;
  background: transparent; color: var(--cream-50);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.vswitch button:hover { background: rgba(var(--cream-rgb), 0.14); }
.vswitch button[aria-pressed="true"] { background: var(--gold); color: var(--ink); }

.vpanel { display: none; }
[data-variant-block][data-variant="1"] .vpanel[data-v="1"],
[data-variant-block][data-variant="2"] .vpanel[data-v="2"],
[data-variant-block][data-variant="3"] .vpanel[data-v="3"],
[data-variant-block][data-variant="4"] .vpanel[data-v="4"],
[data-variant-block][data-variant="5"] .vpanel[data-v="5"],
[data-variant-block][data-variant="6"] .vpanel[data-v="6"],
[data-variant-block][data-variant="7"] .vpanel[data-v="7"],
[data-variant-block][data-variant="8"] .vpanel[data-v="8"],
[data-variant-block][data-variant="9"] .vpanel[data-v="9"],
[data-variant-block][data-variant="10"] .vpanel[data-v="10"] { display: block; }

/* ── Switcher stack: Design row + Inhalt row ───────────── */
.vswitch-stack {
  position: sticky; top: clamp(4.5rem, 9vh, 6rem);
  margin-left: auto; width: fit-content; z-index: 6;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem;
  margin-bottom: clamp(1rem, 3vw, 1.8rem);
}
.vswitch-stack .vswitch { position: static; margin: 0; }
.vswitch--content .vswitch__label { color: var(--gold); opacity: 0.9; }
.vswitch--solo {
  position: absolute; top: clamp(5rem, 11vh, 6.5rem); right: clamp(1rem, 4vw, 2.4rem);
  z-index: 6; margin: 0;
}

/* ── Ansatz · Variante 2: horizontaler Stepper ─────────── */
.hstep { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(2rem, 5vw, 4rem); position: relative; }
.hstep::before { content: ""; position: absolute; top: 2.2rem; left: 9%; right: 9%; height: 1px; background: rgba(var(--cream-rgb), 0.16); }
.hstep__item { position: relative; }
.hstep__num { width: 4.4rem; height: 4.4rem; border-radius: 50%; border: 1.5px solid var(--gold); background: var(--ink); display: grid; place-items: center; font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: var(--gold); margin-bottom: 1.6rem; position: relative; z-index: 1; }
.hstep__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); color: var(--cream-50); margin-bottom: 0.7rem; }
.hstep__text { color: rgba(var(--cream-rgb), 0.66); }

/* ── Ansatz · Variante 3: editoriale Großzahlen ────────── */
.estep { margin-top: clamp(2rem, 5vw, 4rem); }
.estep__item { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(1.6rem, 3vw, 2.6rem); border-top: 1px solid rgba(var(--cream-rgb), 0.14); }
.estep__num { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(3.5rem, 8vw, 7rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(var(--gold-rgb), 0.55); }
.estep__title { font-family: var(--font-display); font-weight: 360; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); color: var(--cream-50); margin-bottom: 0.5rem; }
.estep__text { color: rgba(var(--cream-rgb), 0.66); max-width: 52ch; }

/* ── Angebote · Variante 2: editoriale Index-Reihen ────── */
.olist { display: flex; flex-direction: column; margin-top: clamp(1rem, 2vw, 1.5rem); }
.olist__item {
  display: grid; grid-template-columns: clamp(3.2rem, 7vw, 6rem) 1fr auto;
  gap: clamp(1.2rem, 3vw, 2.6rem); align-items: center;
  padding: clamp(1.5rem, 3vw, 2.3rem) clamp(0.8rem, 1.5vw, 1.4rem);
  border-top: 1px solid var(--line); position: relative;
  transition: background .5s var(--ease);
}
.olist__item:last-child { border-bottom: 1px solid var(--line); }
.olist__item:hover { background: var(--cream-200); }
.olist__num {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(2.4rem, 5.5vw, 4.2rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(var(--gold-rgb), 0.4);
  transition: color .5s var(--ease), -webkit-text-stroke-color .5s var(--ease);
}
.olist__item:hover .olist__num { color: var(--gold); -webkit-text-stroke-color: var(--gold); }
.olist__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); color: var(--ink); line-height: 1.08; }
.olist__text { color: var(--muted); margin-top: 0.5rem; max-width: 56ch; }
.olist__meta { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.6rem); }
.olist__tag { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); border: 1px solid var(--line); border-radius: 999px; padding: 0.4em 0.9em; white-space: nowrap; }
.olist__arrow { font-size: 1.5rem; color: var(--gold-deep); opacity: 0; transform: translateX(-10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.olist__item:hover .olist__arrow { opacity: 1; transform: none; }

/* ── Angebote · Variante 3: Verlaufs-Feature-Karten ────── */
.ocards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 1.8vw, 1.5rem); margin-top: clamp(1rem, 2vw, 1.5rem); }
.ocard {
  position: relative; overflow: hidden; border-radius: 16px;
  padding: clamp(1.9rem, 3vw, 2.8rem); min-height: 250px;
  background: linear-gradient(155deg, var(--cream-50) 0%, var(--cream-200) 100%);
  border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 0.9rem;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.ocard::after { content: ""; position: absolute; top: -25%; right: -15%; width: 55%; height: 55%; background: radial-gradient(circle, rgba(var(--gold-rgb), 0.18), transparent 70%); pointer-events: none; }
.ocard:hover { transform: translateY(-5px); box-shadow: 0 34px 55px -34px rgba(var(--ink-rgb), 0.32); border-color: rgba(var(--gold-rgb), 0.5); }
.ocard__badge { width: 3rem; height: 3rem; flex: none; border-radius: 50%; border: 1.5px solid var(--gold); display: grid; place-items: center; font-family: var(--font-display); font-style: italic; color: var(--gold-deep); font-size: 1.1rem; background: rgba(var(--cream50-rgb), 0.6); position: relative; z-index: 1; }
.ocard__tag { align-self: flex-start; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); border: 1px solid var(--line); border-radius: 999px; padding: 0.35em 0.85em; }
.ocard__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem); color: var(--ink); margin-top: auto; line-height: 1.1; }
.ocard__text { color: var(--muted); }

/* ── Seiten-Header · Variante 2: zentriert ─────────────── */
.phero-center { text-align: center; }
.phero-center .eyebrow { justify-content: center; }
.phero-center .eyebrow::before { content: ""; }
.phero-center .eyebrow::after { content: ""; width: 2.2rem; height: 1px; background: var(--gold); }
.phero-center .page-hero__lead { margin-inline: auto; }

/* ── Seiten-Header · Variante 3: Split mit Riesen-Marke ── */
.phero-split { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.phero-split__mark {
  justify-self: end; font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(6rem, 15vw, 13rem); line-height: 0.8; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(var(--gold-rgb), 0.4);
}

/* ── Zitat · Variante 2: übergroßes Statement ──────────── */
.qbig { text-align: left; }
.qbig__mark { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 6rem); line-height: 0.5; color: var(--gold); opacity: 0.4; display: block; }
.qbig__text {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 320;
  font-size: clamp(2.2rem, 1rem + 6vw, 6rem); line-height: 1.03; letter-spacing: -0.03em;
  color: var(--cream-50); margin-top: 1rem;
}
.qbig__text em { color: var(--gold); font-style: italic; }
.qbig__by { margin-top: 2rem; font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sand); }

/* ── Zitat · Variante 3: Split mit Gold-Kreis ──────────── */
.qsplit { display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; text-align: left; }
.qsplit__badge {
  width: clamp(9rem, 20vw, 15rem); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold), var(--gold-deep));
  display: grid; place-items: center; flex: none;
  box-shadow: 0 30px 60px -24px rgba(var(--gold-rgb), 0.5);
}
.qsplit__badge span { font-family: var(--font-display); font-size: clamp(5rem, 12vw, 9rem); line-height: 1; color: var(--ink); margin-top: 0.35em; }
.qsplit__text { font-family: var(--font-display); font-weight: 330; font-size: clamp(1.5rem, 1rem + 2.4vw, 3rem); line-height: 1.24; letter-spacing: -0.015em; color: var(--cream-50); }
.qsplit__text em { color: var(--gold); font-style: italic; }
.qsplit__by { margin-top: 1.4rem; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sand); }

/* ── Stimmen · Variante 2: Zitat-Karussell ─────────────── */
.vcarousel { display: flex; gap: clamp(1rem, 2vw, 1.5rem); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1.2rem; scrollbar-width: none; scroll-behavior: smooth; }
.vcarousel::-webkit-scrollbar { display: none; }
.vcarousel .voice { scroll-snap-align: start; flex: 0 0 clamp(270px, 78vw, 400px); }
.vcarousel-hint { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.4rem; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.vcarousel-hint::before { content: ""; width: 2rem; height: 1px; background: var(--gold); }

/* ── Stimmen · Variante 3: großes Feature-Zitat ────────── */
.vfeature { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.2rem, 2.5vw, 1.8rem); align-items: stretch; }
.vfeature__main { background: var(--ink); color: var(--cream-100); border-radius: 8px; padding: clamp(2.2rem, 4vw, 3.6rem); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.vfeature__main::before { content: "“"; position: absolute; top: -0.1em; right: 0.1em; font-family: var(--font-display); font-size: 10rem; line-height: 1; color: var(--gold); opacity: 0.16; }
.vfeature__main blockquote { font-family: var(--font-display); font-style: italic; font-weight: 340; font-size: clamp(1.5rem, 1rem + 2.2vw, 2.5rem); line-height: 1.3; color: var(--cream-50); position: relative; }
.vfeature__main figcaption { margin-top: 1.6rem; color: var(--gold); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.78rem; font-weight: 500; }
.vfeature__side { display: flex; flex-direction: column; gap: clamp(1.2rem, 2.5vw, 1.8rem); }
.vfeature__side .voice { flex: 1; }

/* ── FAQ · Variante 2: zentriert & groß ────────────────── */
.faq-big { max-width: 780px; margin-inline: auto; }
.faq-big .faq__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.faq-big .faq__head .eyebrow { justify-content: center; }
.faq-big .faq__head .eyebrow::before { content: ""; }
.faq-big .faq__head .eyebrow::after { content: ""; width: 2.2rem; height: 1px; background: var(--gold); }
.faq-big .faq__item summary { font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); }

/* ── FAQ · Variante 3: offenes Q&A-Raster ──────────────── */
.faq-open { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.6rem, 3.5vw, 3rem) clamp(2rem, 4vw, 3.5rem); }
.faq-qa { border-top: 2px solid var(--gold); padding-top: 1.2rem; }
.faq-qa h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem); color: var(--ink); line-height: 1.2; margin-bottom: 0.7rem; }
.faq-qa p { color: var(--muted); }

/* ── Kontakt · Variante 2: zentriert ───────────────────── */
.contact-center { text-align: center; max-width: 660px; margin-inline: auto; }
.contact-center .eyebrow { justify-content: center; }
.contact-center .eyebrow::after { content: ""; width: 2.2rem; height: 1px; background: var(--gold); }
.contact-center .contact__lead { max-width: none; margin: 0 auto 2rem; }
.contact-center__details { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.5rem, 4vw, 3rem); margin-top: 2.6rem; }
.contact-center__details .contact__detail { border-top: none; border-left: 1px solid var(--line); padding: 0.1rem 0 0.1rem 1.2rem; margin: 0; text-align: left; }

/* ── Kontakt · Variante 3: Karte ───────────────────────── */
.contact-card { max-width: 720px; margin-inline: auto; background: var(--cream-50); border: 1px solid var(--line); border-radius: 20px; padding: clamp(2.2rem, 5vw, 3.6rem); box-shadow: 0 40px 80px -40px rgba(var(--ink-rgb),0.3); }
.contact-card__lead { font-family: var(--font-display); font-weight: 340; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); color: var(--ink); line-height: 1.12; margin-bottom: 1.5rem; max-width: 20ch; }
.contact-card__lead em { color: var(--gold-deep); font-style: italic; }
.contact-card__details { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem 2rem; border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1.8rem; }

/* ── Manifest · Variante 2: Zitat mit Goldmarke ────────── */
.mquote { position: relative; }
.mquote__text {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 340;
  font-size: clamp(1.7rem, 1rem + 3.6vw, 3.9rem); line-height: 1.16; letter-spacing: -0.025em;
  color: var(--ink); max-width: 22ch;
  border-left: 2px solid var(--gold); padding-left: clamp(1.3rem, 3vw, 2.4rem);
}
.mquote__text em { color: var(--gold-deep); font-style: italic; }
.mquote__mark { font-family: var(--font-display); font-size: clamp(4rem, 9vw, 7rem); line-height: 0.6; color: var(--gold); opacity: 0.45; display: block; margin-bottom: 0.4rem; }

/* ── Manifest · Variante 3: zentriert mit Rahmenlinien ─── */
.mframe { text-align: center; max-width: 26ch; margin-inline: auto; }
.mframe__rule { width: 3rem; height: 1px; background: var(--gold); margin-inline: auto; }
.mframe__text {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 330;
  font-size: clamp(1.8rem, 1rem + 3.8vw, 4.1rem); line-height: 1.14; letter-spacing: -0.025em;
  color: var(--ink); margin-block: clamp(1.6rem, 3.5vw, 2.6rem);
}
.mframe__text em { color: var(--gold-deep); font-style: italic; }

/* ── Impuls · Variante 2: dunkle Karte ─────────────────── */
.impulse-card {
  background: var(--ink); color: var(--cream-100); border-radius: 22px;
  padding: clamp(2.4rem, 5vw, 4rem); text-align: center; max-width: 760px; margin-inline: auto;
  position: relative; overflow: hidden;
}
.impulse-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 120%, rgba(var(--gold-rgb),0.28), transparent 60%);
}
.impulse-card > * { position: relative; }
.impulse-card .eyebrow { justify-content: center; color: var(--gold); }
.impulse-card .eyebrow::before, .impulse-card .eyebrow::after { background: var(--gold); }
.impulse-card__title { font-family: var(--font-display); font-weight: 340; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); color: var(--cream-50); line-height: 1.08; margin-bottom: 0.9rem; }
.impulse-card__title em { color: var(--gold); font-style: italic; }
.impulse-card__lead { color: rgba(var(--cream-rgb),0.66); max-width: 44ch; margin: 0 auto 1.9rem; }
.impulse-card .guide__form { justify-content: center; max-width: 500px; margin-inline: auto; }
.impulse-card .guide__form input { background: rgba(var(--cream-rgb),0.08); border-color: rgba(var(--cream-rgb),0.22); color: var(--cream-50); }
.impulse-card .guide__form input::placeholder { color: rgba(var(--cream-rgb),0.5); }
.impulse-card .guide__note { color: rgba(var(--cream-rgb),0.5); }

/* ── Impuls · Variante 3: Postkarte mit Perforation ────── */
.impulse-ticket { display: grid; grid-template-columns: 1.15fr auto 1fr; align-items: center; gap: clamp(1.5rem, 4vw, 3.2rem); background: var(--cream-50); border: 1px solid var(--line); border-radius: 18px; padding: clamp(2rem, 4vw, 3.4rem); }
.impulse-ticket__divider { align-self: stretch; width: 1px; background: repeating-linear-gradient(var(--gold) 0 5px, transparent 5px 12px); opacity: 0.6; }
.impulse-ticket__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); color: var(--ink); line-height: 1.08; margin-bottom: 0.6rem; }
.impulse-ticket__title em { color: var(--gold-deep); font-style: italic; }
.impulse-ticket p { color: var(--muted); max-width: 34ch; }
.impulse-ticket .guide__form { flex-direction: column; align-items: stretch; }

/* ── Über-mich · Variante 3: überlappende Karte ────────── */
.aover { position: relative; max-width: 900px; margin-inline: auto; }
.aover__media { position: relative; border-radius: 6px; overflow: hidden; }
.aover__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: 70% 30%; display: block; }
.aover__card { position: absolute; right: clamp(1rem, 4vw, 3rem); bottom: clamp(-1rem, -2vw, -2.5rem); background: var(--cream-50); border-radius: 12px; padding: clamp(1.6rem, 3vw, 2.4rem); max-width: min(420px, 80%); box-shadow: 0 40px 70px -30px rgba(var(--ink-rgb),0.4); }
.aover__card .eyebrow { margin-bottom: 1rem; }
.aover__card h2 { font-family: var(--font-display); font-weight: 360; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); color: var(--ink); line-height: 1.1; letter-spacing: -0.015em; margin-bottom: 1rem; }
.aover__card h2 em { color: var(--gold-deep); font-style: italic; }
.aover__card p { color: var(--charcoal-soft); margin-bottom: 1.2rem; }

/* ══ BOOKING MODAL (liquid glass) ════════════════════════ */
.modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1.5rem; opacity: 0; visibility: hidden; transition: opacity .18s var(--ease), visibility .18s; }
.modal.open { opacity: 1; visibility: visible; }
/* Backdrop erscheint sofort (kurzer Fade) und dimmt dezenter — die Seite bleibt sichtbar */
.modal__backdrop { position: absolute; inset: 0; background: rgba(var(--ink-rgb), var(--modal-dim, 0.3)); -webkit-backdrop-filter: blur(var(--modal-blur, 3px)); backdrop-filter: blur(var(--modal-blur, 3px)); }
.modal__panel {
  position: relative; width: min(520px, 100%); max-height: 90vh; overflow: auto;
  padding: clamp(1.8rem, 4vw, 3rem); border-radius: 24px;
  background-color: rgba(var(--cream50-rgb), var(--glass-bg, 0.72));
  background-image: var(--glass-sheen, none);
  -webkit-backdrop-filter: var(--glass-bf, blur(30px) saturate(180%));
          backdrop-filter: var(--glass-bf, blur(30px) saturate(180%));
  border: 1px solid var(--glass-edge, rgba(255, 255, 255, 0.6));
  box-shadow: var(--glass-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 40px 90px -30px rgba(var(--ink-rgb), 0.55));
  transform: translateY(18px) scale(0.98); transition: transform .5s var(--ease);
}
.modal.open .modal__panel { transform: none; }

/* ── Glas-Stufen: 1 Klar (Default) → 2 Glasiger → 3 Kristall → 4 Liquid ── */
.modal[data-glass="2"] .modal__panel {
  --glass-bg: .5;
  --glass-bf: blur(40px) saturate(200%) brightness(1.04);
  --glass-edge: rgba(255,255,255,.78);
  --glass-sheen: linear-gradient(135deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 44%);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.06), 0 44px 96px -32px rgba(var(--ink-rgb),.5);
}
.modal[data-glass="3"] .modal__panel {
  --glass-bg: .3;
  --glass-bf: blur(54px) saturate(215%) brightness(1.08);
  --glass-edge: rgba(255,255,255,.9);
  --glass-sheen: linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 40%), radial-gradient(120% 80% at 12% -8%, rgba(255,255,255,.4), rgba(255,255,255,0) 55%);
  --glass-shadow: inset 0 1px 0 #fff, inset 0 -1px 1px rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.12), 0 54px 110px -34px rgba(var(--ink-rgb),.5);
}
.modal[data-glass="4"] .modal__panel {
  --glass-bg: .12;
  --glass-bf: blur(56px) saturate(235%) brightness(1.12) url(#glassLiquid);
  --glass-edge: rgba(255,255,255,.92);
  --glass-sheen:
    linear-gradient(135deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,0) 34%),
    radial-gradient(130% 90% at 10% -10%, rgba(255,255,255,.5), rgba(255,255,255,0) 50%),
    radial-gradient(90% 70% at 105% 108%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%);
  --glass-shadow: inset 0 1px 0 #fff, inset 0 -1px 2px rgba(255,255,255,.45), inset 0 0 0 1px rgba(255,255,255,.16), inset 0 0 46px rgba(255,255,255,.14), 0 64px 130px -38px rgba(var(--ink-rgb),.55);
}

/* Glas-Umschalter im Modal (oben links, Pendant zum Schließen-Button) */
.modal__glass.vswitch { position: absolute; top: 1rem; left: 1rem; z-index: 3; margin: 0; }
.modal__close { position: absolute; top: 1rem; right: 1rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.5); cursor: pointer; display: grid; place-items: center; color: var(--ink); font-size: 0.95rem; transition: background .3s var(--ease), color .3s var(--ease), transform .4s var(--ease); }
.modal__close:hover { background: var(--ink); color: var(--cream-50); transform: rotate(90deg); }
.modal__title { font-family: var(--font-display); font-weight: 340; font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 0.6rem; }
.modal__title em { color: var(--gold-deep); font-style: italic; }
.modal__lead { color: var(--charcoal-soft); margin-bottom: 1.6rem; font-size: 0.98rem; }
.modal__form { display: flex; flex-direction: column; gap: 0.85rem; }
.field label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 0.4rem; }
.field input, .field textarea, .field select { width: 100%; font-family: var(--font-sans); font-size: 1rem; padding: 0.85em 1.1em; border: 1px solid rgba(var(--ink-rgb), 0.18); border-radius: 12px; background: rgba(255, 255, 255, 0.55); color: var(--ink); transition: border-color .3s var(--ease), background .3s var(--ease); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold); background: rgba(255, 255, 255, 0.85); }
.field textarea { resize: vertical; min-height: 88px; }
.modal__form .btn { margin-top: 0.5rem; justify-content: center; }
.modal__success { text-align: center; padding: 1.5rem 0; }
.modal__success h3 { font-family: var(--font-display); font-weight: 360; font-size: 1.9rem; color: var(--ink); margin-bottom: 0.6rem; }
.modal__success p { color: var(--charcoal-soft); max-width: 34ch; margin-inline: auto; }
/* R22 (20.07.): Impuls-Anmeldefeld direkt in der Buchungs-Bestätigung —
   kompakte Zeile unter dem PS (Feld-Optik wie .field input, Pill-Radius).
   Anbindung an Brevo folgt mit dem Haupt-Formular (F5). */
.modal__nl {
  margin: 1.1rem auto 0; max-width: 26rem;
  display: flex; gap: 0.55rem;
}
.modal__nl input {
  flex: 1; min-width: 0;
  font-family: var(--font-sans); font-size: 0.95rem;
  padding: 0.75em 1.1em;
  border: 1px solid rgba(var(--ink-rgb), 0.18); border-radius: 999px;
  background: rgba(255, 255, 255, 0.55); color: var(--ink);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.modal__nl input:focus { outline: none; border-color: var(--gold); background: rgba(255, 255, 255, 0.85); }
.modal__nl .btn { padding: 0.85em 1.3em; flex: none; }
@media (max-width: 419.98px) {
  .modal__nl { flex-direction: column; }
  .modal__nl .btn { justify-content: center; }
}

/* ══ LEGAL PAGES ═════════════════════════════════════════ */
.legal { background: var(--cream-100); }
.legal__body { max-width: 72ch; }
.legal__body h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); color: var(--ink); margin: 2.6rem 0 0.8rem; }
.legal__body h2:first-child { margin-top: 0; }
.legal__body p { color: var(--charcoal-soft); margin-bottom: 1rem; }
.legal__body a { color: var(--gold-deep); border-bottom: 1px solid var(--line); }
.legal__note { margin-top: 3rem; padding: 1.2rem 1.5rem; border-left: 2px solid var(--gold); background: var(--cream-200); color: var(--muted); font-size: 0.92rem; border-radius: 0 8px 8px 0; }

/* ══ REVEAL ANIMATION ════════════════════════════════════ */
/* Hidden only when JS is present (.js). No-JS → content stays visible. */
.js [data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.js [data-reveal].in-view { opacity: 1; transform: none; }

/* ══ RESPONSIVE ══════════════════════════════════════════ */
@media (max-width: 980px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__media { max-width: 420px; }
  .guide__inner, .faq__grid { grid-template-columns: 1fr; }
  .voices__grid { grid-template-columns: 1fr; max-width: 560px; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .contact__grid { grid-template-columns: 1fr; }
}

/* Offers bento → single column on smaller screens */
@media (max-width: 820px) {
  .offers__grid { grid-template-columns: 1fr; grid-template-areas: "feat" "two" "three" "four"; }
  .offer { min-height: 200px; }
  .ocards { grid-template-columns: 1fr; }
  .hstep { grid-template-columns: 1fr; gap: 2rem; }
  .hstep::before { display: none; }
  .olist__item { grid-template-columns: auto 1fr; }
  .olist__tag { grid-column: 2; justify-self: start; margin-top: 0.6rem; }
  .estep__item { gap: 1.2rem; }
  .vswitch { position: static; margin-bottom: 1.5rem; flex-wrap: wrap; max-width: 100%; border-radius: 16px; }
  .vswitch-stack { position: static; align-items: stretch; width: 100%; }
  .vswitch--content { border-radius: 16px; }
  .vswitch--solo { position: static; margin: 0 0 1.2rem; }
  .olist__item { grid-template-columns: clamp(2.8rem,10vw,4rem) 1fr; }
  .olist__meta { grid-column: 2; justify-content: flex-start; margin-top: 0.6rem; }
  .ocards { grid-template-columns: 1fr; }
  .impulse-ticket { grid-template-columns: 1fr; text-align: left; }
  .impulse-ticket__divider { width: auto; height: 1px; background: repeating-linear-gradient(90deg, var(--gold) 0 5px, transparent 5px 12px); }
  .aover__card { position: static; max-width: none; margin-top: 1rem; box-shadow: none; border: 1px solid var(--line); }
  .phero-split { grid-template-columns: 1fr; }
  .phero-split__mark { display: none; }
  .qsplit { grid-template-columns: 1fr; text-align: center; }
  .qsplit__badge { margin-inline: auto; }
  .vfeature { grid-template-columns: 1fr; }
  .faq-open { grid-template-columns: 1fr; }
  .contact-card__details { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav__links { display: none; }
  .nav__actions .btn { display: none; }
  .nav__toggle { display: flex; }

  .footer__inner { grid-template-columns: 1fr; gap: 2rem; }

  /* Hero → stacked: image top, text on cream below */
  .hero {
    min-height: auto; flex-direction: column;
    padding-top: 4.5rem;
  }
  .hero__media { position: relative; height: 50svh; min-height: 340px; }
  .hero__media img { object-position: 72% center; transform: none; }
  .hero__scrim {
    background: linear-gradient(180deg, rgba(var(--cream-rgb),0) 55%, rgba(var(--cream-rgb),0.9) 100%);
  }
  .hero__content {
    padding-top: 2.5rem; padding-bottom: 3.5rem;
    background: var(--cream-100); text-align: left;
  }
  .hero__lead { max-width: none; }
  .hero__cta .btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__media img { transform: none !important; }
  .js .timeline__step { opacity: 1 !important; }
  .js [data-scrollfill] .mword { opacity: 1 !important; }
  .js [data-linefill] .statement__line { opacity: 1 !important; }
}




/* ▓▓ SEKTION: PROBLEM-ERKENNUNG (prob) ▓▓
   Neue Sektion aus dem Brief (Customer Problems). 3 Designvarianten,
   inhaltlich per Content-Toggle umschaltbar. Nur :root-Tokens. */
.prob { background: var(--cream-100); }

/* Variante 1 · Karten-Raster */
.prob1__head { max-width: none; margin: 0 0 clamp(2.4rem, 5vw, 4rem); text-align: left; }
/* R37 (21.07.): gleiches Format wie die Für-wen-Subline (.audience-neu__sub) —
   „Du löst komplexe Probleme jeden Tag …" */
.prob1__lead {
  color: var(--charcoal-soft); max-width: none;
  font-size: clamp(1rem, 0.86rem + 0.6vw, 1.32rem);
  line-height: 1.6; margin-top: 1.1rem;
}
.prob1__grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.4rem); }
.prob1__card { position: relative; background: var(--cream-50); border: 1px solid var(--line); border-radius: 18px; padding: clamp(1.6rem, 2.4vw, 2.2rem); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
.prob1__card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -30px rgba(var(--ink-rgb), .4); border-color: rgba(var(--gold-rgb), .55); }
/* Nummerierung als großes Serifen-Zeichen mit Farbverlauf + Hairline */
.prob1__num {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-style: italic; font-weight: 320;
  font-size: clamp(1.7rem, 1.3rem + 1vw, 2.4rem); line-height: 1;
  background: linear-gradient(125deg, var(--gold) 10%, var(--gold-deep) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.prob1__num::after {
  content: ""; width: 2.6rem; height: 1px;
  background: linear-gradient(90deg, rgba(var(--gold-rgb), 0.65), transparent);
}
.prob1__t { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.9rem); color: var(--ink); margin: .7rem 0 .5rem; }
.prob1__x { color: var(--muted); font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.3rem); line-height: 1.55; }

/* Variante 2 · Editorial-Checkliste */
.prob2 { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.prob2__intro { position: sticky; top: 6rem; }
.prob2__lead { color: var(--muted); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); margin-top: 1rem; }
.prob2__list { list-style: none; }
.prob2__row { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; padding: 1.25rem 0; border-top: 1px solid var(--line); }
.prob2__row:last-child { border-bottom: 1px solid var(--line); }
.prob2__mark { font-family: var(--font-display); color: var(--gold); font-size: 1.3rem; line-height: 1.2; }
.prob2__t { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); color: var(--ink); margin-bottom: .3rem; }
.prob2__x { color: var(--muted); font-size: .96rem; line-height: 1.55; }

/* Variante 3 · Ink-Panel */
.prob3 { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); border-radius: 26px; padding: clamp(2.4rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem); }
.prob3__glow { position: absolute; z-index: -1; right: -8%; bottom: -28%; width: 55%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(var(--gold-rgb), .38), transparent 68%); filter: blur(18px); }
.prob3__head { max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.prob3__lead { color: rgba(var(--cream-rgb), .7); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); margin-top: 1rem; }
.prob3__rows { list-style: none; columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem); }
.prob3__row { break-inside: avoid; display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid rgba(var(--cream-rgb), .14); }
.prob3__num { font-family: var(--font-display); font-style: italic; color: var(--gold); font-size: 1rem; }
.prob3__t { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem); color: var(--cream-50); margin-bottom: .3rem; }
.prob3__x { color: rgba(var(--cream-rgb), .66); font-size: .92rem; line-height: 1.5; }

@media (max-width: 900px) {
  .prob1__grid { grid-template-columns: repeat(2, 1fr); }
  .prob2 { grid-template-columns: 1fr; }
  .prob2__intro { position: static; }
  .prob3__rows { columns: 1; }
}
@media (max-width: 560px) {
  .prob1__grid { grid-template-columns: 1fr; gap: 0.55rem; }
  /* R22 (20.07., 2. Runde): die sechs Karten waren auf dem Handy immer noch
     zu groß — jetzt richtig kompakt: die Nummer sitzt als kleines Detail
     oben rechts in der Ecke (spart die eigene Zeile), enger Innenraum,
     kleinere Schrift */
  .prob1__card { padding: 0.8rem 0.95rem; border-radius: 12px; }
  .prob1__num { position: absolute; top: 0.75rem; right: 0.95rem; font-size: 0.95rem; }
  .prob1__num::after { display: none; }
  .prob1__t { font-size: 1rem; margin: 0 0 0.2rem; padding-right: 2rem; }
  .prob1__x { font-size: 0.84rem; line-height: 1.45; }
}


/* ▓▓ SEKTION: ZWEI SÄULEN / FRAMEWORK (pillars) ▓▓
   Neue Sektion aus dem Brief (Coaching Framework: Persönlichkeit +
   Konflikte). 3 Designvarianten, inhaltlich per Content-Toggle. */
.pillars { background: var(--cream-100); }

/* Variante 1 · Zwei Spalten */
.pil1__head { max-width: 44rem; margin: 0 auto clamp(2.4rem, 5vw, 4rem); text-align: center; }
.pil1__lead { color: var(--muted); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); margin-top: 1rem; }
.pil1__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2.4rem); }
.pil1__col { position: relative; background: var(--cream-50); border: 1px solid var(--line); border-radius: 22px; padding: clamp(1.8rem, 3vw, 2.8rem); }
.pil1__num { font-family: var(--font-display); font-style: italic; font-size: 2.2rem; color: var(--gold); display: block; margin-bottom: .7rem; }
.pil1__t { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); color: var(--ink); margin-bottom: .8rem; }
.pil1__x { color: var(--muted); line-height: 1.6; margin-bottom: 1.4rem; }
.pil1__tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.pil1__tags li { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--gold-deep); border: 1px solid rgba(var(--gold-rgb), .35); border-radius: 999px; padding: .3rem .7rem; }

/* Variante 2 · Editorial gestapelt */
.pil2 { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.pil2__intro { position: sticky; top: 6rem; }
.pil2__lead { color: var(--muted); margin-top: 1rem; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); }
.pil2__rows { list-style: none; }
.pil2__row { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 2vw, 1.8rem); padding: clamp(1.4rem, 3vw, 2.2rem) 0; border-top: 1px solid var(--line); }
.pil2__row:last-child { border-bottom: 1px solid var(--line); }
.pil2__num { font-family: var(--font-display); font-style: italic; font-size: clamp(2rem, 3vw, 3rem); color: var(--gold); line-height: 1; }
.pil2__t { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); color: var(--ink); margin-bottom: .6rem; }
.pil2__x { color: var(--muted); line-height: 1.6; }

/* Variante 3 · Ink-Panel */
.pil3 { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); border-radius: 26px; padding: clamp(2.4rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem); }
.pil3__glow { position: absolute; z-index: -1; left: -8%; top: -30%; width: 55%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(var(--gold-rgb), .38), transparent 68%); filter: blur(18px); }
.pil3__head { max-width: 42rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.pil3__lead { color: rgba(var(--cream-rgb), .7); margin-top: 1rem; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); }
.pil3__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); }
.pil3__col { position: relative; padding-top: 1.6rem; border-top: 2px solid rgba(var(--gold-rgb), .5); }
.pil3__num { font-family: var(--font-display); font-style: italic; font-size: 1.6rem; color: var(--gold); display: block; margin-bottom: .5rem; }
.pil3__t { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); color: var(--cream-50); margin-bottom: .7rem; }
.pil3__x { color: rgba(var(--cream-rgb), .68); line-height: 1.6; }

@media (max-width: 860px) {
  .pil1__grid { grid-template-columns: 1fr; }
  .pil2 { grid-template-columns: 1fr; }
  .pil2__intro { position: static; }
  .pil3__cols { grid-template-columns: 1fr; }
}


/* ▓▓ SEKTION: VERTRAUEN / CREDENTIALS (trust) ▓▓
   Trust Elements aus dem Brief. 2 Designvarianten, per Content-Toggle. */
.trust { background: var(--cream-50); }

/* Variante 1 · Helle Leiste */
.trust1__head { text-align: center; max-width: 40rem; margin: 0 auto clamp(2rem, 4vw, 3.5rem); }
.trust1__grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
.trust1__item { text-align: center; padding: clamp(1.2rem, 2vw, 1.8rem) 0.5rem 0; border-top: 2px solid rgba(var(--gold-rgb), .4); }
.trust1__mark { color: var(--gold); font-size: 1rem; display: block; margin-bottom: .6rem; }
.trust1__t { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); color: var(--ink); margin-bottom: .4rem; }
.trust1__x { color: var(--muted); font-size: .9rem; line-height: 1.5; }

/* Variante 2 · Dunkle Leiste */
.trust2 { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); border-radius: 26px; padding: clamp(2.4rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem); }
.trust2__glow { position: absolute; z-index: -1; left: 50%; top: -40%; transform: translateX(-50%); width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(var(--gold-rgb), .3), transparent 68%); filter: blur(20px); }
.trust2__head { text-align: center; max-width: 40rem; margin: 0 auto clamp(1.8rem, 3vw, 2.6rem); }
.trust2__row { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); }
.trust2__item { text-align: center; padding: 0 clamp(1rem, 2vw, 1.6rem); }
.trust2__item + .trust2__item { border-left: 1px solid rgba(var(--cream-rgb), .14); }
.trust2__t { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); color: var(--gold); margin-bottom: .4rem; }
.trust2__x { color: rgba(var(--cream-rgb), .66); font-size: .88rem; line-height: 1.45; }

@media (max-width: 760px) {
  .trust1__grid { grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; }
  .trust2__row { grid-template-columns: 1fr 1fr; gap: 1.8rem 0; }
  .trust2__item + .trust2__item { border-left: none; }
}
@media (max-width: 420px) {
  .trust1__grid { grid-template-columns: 1fr; }
  .trust2__row { grid-template-columns: 1fr; }
}


/* ▓▓ SEKTION: TRANSFORMATION (transform) ▓▓
   "Vom Energienehmer zum Energiespender." 10 Designvarianten,
   inhaltlich per Content-Toggle umschaltbar. Jede Variante macht den
   Vorher→Nachher-Wandel sichtbar. Nur :root-Tokens + rgba-Ableitungen.
   Alle Klassen mit Präfix `tf`. */
.transform { background: var(--cream-100); }

/* gemeinsame Vorher/Nachher-Bausteine (dezent, editorial) */
.tf__from { color: var(--muted); }
.tf__to   { color: var(--gold-deep); }

/* ── Variante 1 · Magazine / Split-Diptychon ─────────────── */
.tf1__head { max-width: 46rem; margin: 0 0 clamp(2.4rem, 5vw, 4rem); text-align: left; }
.tf1__lead { color: var(--muted); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); margin-top: 1rem; }
.tf1__rows { list-style: none; display: grid; gap: clamp(0.7rem, 1.6vw, 1.1rem); }
.tf1__row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(0.8rem, 2.5vw, 2.2rem);
  background: var(--cream-50); border: 1px solid var(--line);
  border-radius: 16px; padding: clamp(1.1rem, 2.2vw, 1.7rem) clamp(1.3rem, 3vw, 2.4rem);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.tf1__row:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -30px rgba(var(--ink-rgb), .4); border-color: rgba(var(--gold-rgb), .5); }
.tf1__from {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.55rem); color: var(--muted);
  text-align: right; opacity: .82;
}
.tf1__arrow {
  width: clamp(2.4rem, 5vw, 3.4rem); height: 1px; background: var(--gold);
  position: relative; flex: none;
}
.tf1__arrow::after {
  content: ""; position: absolute; right: -1px; top: 50%;
  width: 7px; height: 7px; border-top: 1px solid var(--gold); border-right: 1px solid var(--gold);
  transform: translateY(-50%) rotate(45deg);
}
.tf1__to {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.55rem); color: var(--ink);
  text-align: left;
}
.tf1__to em { font-style: normal; color: var(--gold-deep); }

/* ── Variante 2 · Ink-Inversion + Goldglut ───────────────── */
.tf2 { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); border-radius: 26px; padding: clamp(2.4rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem); }
.tf2__glow { position: absolute; z-index: -1; right: -6%; bottom: -30%; width: 58%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(var(--gold-rgb), .4), transparent 68%); filter: blur(18px); }
.tf2__head { max-width: 42rem; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.tf2__lead { color: rgba(var(--cream-rgb), .7); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); margin-top: 1rem; }
.tf2__rows { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 2rem) clamp(1.8rem, 4vw, 3.5rem); }
.tf2__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(0.5rem, 1.5vw, 1rem); padding: 1.15rem 0; border-top: 1px solid rgba(var(--cream-rgb), .14); }
.tf2__from { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem); color: rgba(var(--cream-rgb), .5); text-align: right; }
.tf2__mid { color: var(--gold); font-size: 1.05rem; text-align: center; }
.tf2__to { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem); color: var(--gold); text-align: left; }

/* ── Variante 3 · Typo-Poster ────────────────────────────── */
.tf3 { text-align: center; }
.tf3__eyebrow { justify-content: center; }
.tf3__eyebrow::after { content: ""; width: 2.2rem; height: 1px; background: var(--gold); }
.tf3__title {
  font-family: var(--font-display); font-weight: 350;
  font-size: clamp(2.6rem, 1.4rem + 6vw, 6rem); line-height: 0.98;
  letter-spacing: -0.03em; color: var(--ink);
  margin: 0.6rem auto clamp(1.8rem, 4vw, 3rem); max-width: 16ch;
}
.tf3__title em { font-weight: 350; color: var(--gold-deep); }
.tf3__lead { color: var(--muted); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); max-width: 42ch; margin: 0 auto clamp(2.4rem, 5vw, 3.6rem); }
.tf3__grid { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(0.7rem, 1.6vw, 1.1rem); }
.tf3__chip {
  display: inline-flex; align-items: center; gap: 0.7rem;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.7rem clamp(1.1rem, 2vw, 1.5rem);
  background: var(--cream-50);
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.tf3__chip:hover { border-color: rgba(var(--gold-rgb), .55); transform: translateY(-2px); }
.tf3__chip .tf__from { font-family: var(--font-display); font-style: italic; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); text-decoration: line-through; text-decoration-color: rgba(var(--gold-rgb), .5); }
.tf3__chip .tf__arw { color: var(--gold); font-size: 0.85rem; }
.tf3__chip .tf__to { font-family: var(--font-display); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); color: var(--ink); font-weight: 500; }

/* ── Variante 4 · Archiv / Index-Zeilen ──────────────────── */
.tf4__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem 2rem; margin-bottom: clamp(1.6rem, 3.5vw, 2.6rem); }
.tf4__lead { color: var(--muted); font-size: clamp(1.02rem, 1rem + 0.3vw, 1.15rem); max-width: 32ch; }
.tf4__rows { list-style: none; border-top: 1px solid var(--ink); }
.tf4__row {
  display: grid; grid-template-columns: 3.2rem 1fr auto 1fr; align-items: baseline;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  padding: clamp(1rem, 2.2vw, 1.5rem) 0; border-bottom: 1px solid var(--line);
  transition: padding-left .5s var(--ease), background .5s var(--ease);
}
.tf4__row:hover { padding-left: 0.8rem; background: linear-gradient(to right, rgba(var(--gold-rgb),.06), transparent 60%); }
.tf4__idx { font-family: var(--font-display); font-style: italic; color: var(--gold); font-size: 1rem; }
.tf4__from { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.55rem); color: var(--muted); }
.tf4__arrow { font-size: 0.8rem; letter-spacing: 0.2em; color: var(--gold); align-self: center; }
.tf4__to { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.55rem); color: var(--ink); text-align: right; }
.tf4__to em { font-style: normal; color: var(--gold-deep); }

/* ── Variante 5 · Zeitungsspalten ────────────────────────── */
.tf5 { border-top: 2px solid var(--ink); padding-top: clamp(1.4rem, 3vw, 2.2rem); }
.tf5__head { text-align: center; max-width: 44rem; margin: 0 auto clamp(2rem, 4vw, 3.2rem); }
.tf5__lead { color: var(--muted); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); margin-top: 1rem; }
.tf5__cols { list-style: none; columns: 3; column-gap: clamp(1.6rem, 3.5vw, 3rem); column-rule: 1px solid var(--line); }
.tf5__item { break-inside: avoid; padding: 1rem 0; border-top: 1px solid var(--line); }
.tf5__item:first-child { border-top: none; }
.tf5__num { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); display: block; margin-bottom: 0.5rem; }
.tf5__from { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem); color: var(--muted); }
.tf5__rule { display: block; width: 2rem; height: 1px; background: var(--gold); margin: 0.5rem 0; }
.tf5__to { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem); color: var(--ink); }

/* ── Variante 6 · Ticket / Print-Artefakt ────────────────── */
.tf6 { display: grid; place-items: center; }
.tf6__ticket {
  width: min(640px, 100%); position: relative; isolation: isolate;
  background: var(--cream-50); border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(2rem, 4.5vw, 3.4rem) clamp(1.5rem, 4vw, 3rem);
  box-shadow: 0 30px 60px -44px rgba(var(--ink-rgb), .5);
}
.tf6__ticket::before, .tf6__ticket::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%; background: var(--cream-100);
  border: 1px solid var(--line);
}
.tf6__ticket::before { left: -12px; }
.tf6__ticket::after { right: -12px; }
.tf6__head { text-align: center; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.tf6__eyebrow { justify-content: center; }
.tf6__eyebrow::after { content: ""; width: 2.2rem; height: 1px; background: var(--gold); }
.tf6__lead { color: var(--muted); font-size: 0.98rem; margin-top: 0.8rem; max-width: 40ch; margin-inline: auto; }
.tf6__rows { list-style: none; }
.tf6__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(0.5rem, 2vw, 1.2rem); padding: 0.9rem 0; border-top: 1px dashed rgba(var(--gold-rgb), .38); }
.tf6__row:first-child { border-top: none; }
.tf6__from { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1rem, 0.95rem + 0.35vw, 1.25rem); color: var(--muted); text-align: right; }
.tf6__perf { color: var(--gold); font-size: 0.75rem; letter-spacing: 0.25em; text-align: center; }
.tf6__to { font-family: var(--font-display); font-weight: 400; font-size: clamp(1rem, 0.95rem + 0.35vw, 1.25rem); color: var(--ink); text-align: left; }
.tf6__stamp {
  position: absolute; top: clamp(1rem, 2.5vw, 1.8rem); right: clamp(1rem, 2.5vw, 1.8rem);
  width: clamp(3.4rem, 8vw, 4.6rem); aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid rgba(var(--gold-rgb), .55); display: grid; place-items: center;
  transform: rotate(-8deg); text-align: center;
  font-family: var(--font-display); font-style: italic; font-size: 0.66rem; line-height: 1.1;
  color: var(--gold-deep);
}

/* ── Variante 7 · Liquid Glass über Goldglut ─────────────── */
.tf7 {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.4rem);
  border: 1px solid rgba(var(--cream-rgb), 0.12); border-radius: 26px;
  background:
    radial-gradient(110% 90% at 12% 0%, rgba(var(--gold-rgb), 0.34), transparent 55%),
    radial-gradient(95% 90% at 88% 100%, rgba(var(--gold-deep-rgb), 0.32), transparent 58%),
    var(--ink);
}
.tf7__head { text-align: center; max-width: 42rem; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.tf7__lead { color: rgba(var(--cream-rgb), .72); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); margin-top: 1rem; }
.tf7__grid { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(0.7rem, 1.6vw, 1.1rem); }
.tf7__card {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(1.2rem, 2.4vw, 1.8rem) clamp(0.7rem, 1.5vw, 1.1rem);
  border-radius: 18px;
  border: 1px solid rgba(var(--cream-rgb), 0.14);
  background: linear-gradient(160deg, rgba(var(--cream-rgb), 0.12), rgba(var(--cream-rgb), 0.03));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(var(--cream-rgb), 0.18);
  transition: transform .5s var(--ease), border-color .5s var(--ease);
}
.tf7__card:hover { transform: translateY(-4px); border-color: rgba(var(--gold-rgb), .5); }
.tf7__from { font-size: 0.82rem; letter-spacing: 0.02em; color: rgba(var(--cream-rgb), .55); text-decoration: line-through; text-decoration-color: rgba(var(--gold-rgb), .5); }
.tf7__arw { color: var(--gold); font-size: 0.9rem; display: block; margin: 0.5rem 0; }
.tf7__to { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); color: var(--gold); }

/* ── Variante 8 · Orbit / Kreis-Anordnung ────────────────── */
.tf8 { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.tf8__intro { }
.tf8__lead { color: var(--muted); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); margin-top: 1rem; }
.tf8__orbit { position: relative; width: min(420px, 90vw); aspect-ratio: 1; margin: 0 auto; }
.tf8__orbit::before, .tf8__orbit::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px dashed rgba(var(--gold-rgb), .35);
}
.tf8__orbit::after { inset: 18%; border-style: solid; border-color: rgba(var(--gold-rgb), .18); }
.tf8__core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 40%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  background: var(--ink); color: var(--gold);
  font-family: var(--font-display); font-style: italic; font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1.15rem); line-height: 1.2;
  box-shadow: 0 0 0 10px rgba(var(--gold-rgb), .1);
}
.tf8__node {
  position: absolute; left: 50%; top: 50%;
  width: clamp(6.2rem, 15vw, 8rem);
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * min(210px, 45vw))) rotate(calc(-1 * var(--a)));
  text-align: center;
}
.tf8__node:nth-child(2) { --a: 0deg; }
.tf8__node:nth-child(3) { --a: 72deg; }
.tf8__node:nth-child(4) { --a: 144deg; }
.tf8__node:nth-child(5) { --a: 216deg; }
.tf8__node:nth-child(6) { --a: 288deg; }
.tf8__from { display: block; font-size: 0.74rem; color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(var(--gold-rgb), .45); }
.tf8__to { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(1rem, 0.95rem + 0.35vw, 1.28rem); color: var(--ink); margin-top: 0.15rem; }
.tf8__to em { font-style: normal; color: var(--gold-deep); }

/* ── Variante 9 · Bogen / Brücken-Diagramm ───────────────── */
.tf9 { position: relative; overflow: hidden; padding-top: clamp(2rem, 5vw, 3.6rem); }
.tf9__head { text-align: center; max-width: 44rem; margin: 0 auto clamp(2.4rem, 5vw, 3.8rem); }
.tf9__lead { color: var(--muted); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); margin-top: 1rem; }
.tf9__ends { display: flex; justify-content: space-between; max-width: 900px; margin: 0 auto clamp(1.4rem, 3vw, 2.2rem); }
.tf9__end { font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; }
.tf9__end--from { color: var(--muted); }
.tf9__end--to { color: var(--gold-deep); }
.tf9__bridge { position: relative; max-width: 900px; margin: 0 auto; padding-top: clamp(2.2rem, 6vw, 4.5rem); }
.tf9__arc {
  position: absolute; left: 0; right: 0; top: 0; height: clamp(4rem, 10vw, 7rem);
  border: 1px dashed rgba(var(--gold-rgb), .4); border-bottom: none;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; pointer-events: none;
}
.tf9__steps { position: relative; list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(0.5rem, 1.5vw, 1rem); }
.tf9__step { text-align: center; }
.tf9__step:nth-child(2), .tf9__step:nth-child(4) { transform: translateY(clamp(-1.6rem, -3.5vw, -1rem)); }
.tf9__step:nth-child(3) { transform: translateY(clamp(-2.8rem, -6vw, -1.8rem)); }
.tf9__node {
  width: clamp(2.6rem, 5vw, 3.4rem); aspect-ratio: 1; border-radius: 50%;
  margin: 0 auto clamp(0.8rem, 2vw, 1.2rem); display: grid; place-items: center;
  background: var(--cream-50); border: 1.5px solid var(--gold);
  font-family: var(--font-display); font-style: italic; color: var(--gold-deep); font-size: 0.95rem;
  transition: background .5s var(--ease), color .5s var(--ease), transform .5s var(--ease);
}
.tf9__step:hover .tf9__node { background: var(--gold); color: var(--cream-50); transform: scale(1.06); }
.tf9__from { display: block; font-size: 0.78rem; color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(var(--gold-rgb), .45); }
.tf9__to { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(0.98rem, 0.9rem + 0.4vw, 1.25rem); color: var(--ink); margin-top: 0.2rem; }

/* ── Variante 10 · Editorial-Titelseite / Masthead ───────── */
.tf10 { background: var(--ink); border-radius: 26px; padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4.5vw, 4rem); position: relative; isolation: isolate; overflow: hidden; }
.tf10__glow { position: absolute; z-index: -1; left: 50%; top: -35%; transform: translateX(-50%); width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(var(--gold-rgb), .26), transparent 68%); filter: blur(20px); }
.tf10__masthead { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.4rem 1.5rem; padding-block: 0.7rem; border-top: 1px solid rgba(var(--cream-rgb), .3); border-bottom: 1px solid rgba(var(--cream-rgb), .22); margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.tf10__brand { font-family: var(--font-display); font-style: italic; font-weight: 380; font-size: 1.05rem; color: var(--gold); letter-spacing: 0.02em; }
.tf10__note { font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(var(--cream-rgb), .55); }
.tf10__head { text-align: center; max-width: 40rem; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.tf10__eyebrow { justify-content: center; }
.tf10__eyebrow::after { content: ""; width: 2.2rem; height: 1px; background: var(--gold); }
.tf10__lead { color: rgba(var(--cream-rgb), .72); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); margin-top: 1rem; }
.tf10__cols { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); }
.tf10__col { padding-inline: clamp(0.7rem, 2vw, 1.4rem); text-align: center; }
.tf10__col + .tf10__col { border-left: 1px solid rgba(var(--cream-rgb), .16); }
.tf10__from { font-size: 0.78rem; letter-spacing: 0.02em; color: rgba(var(--cream-rgb), .5); text-decoration: line-through; text-decoration-color: rgba(var(--gold-rgb), .5); }
.tf10__arw { color: var(--gold); font-size: 0.85rem; display: block; margin: 0.55rem 0; }
.tf10__to { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.4rem); color: var(--gold); line-height: 1.15; }

/* ══ RESPONSIVE ══════════════════════════════════════════ */
@media (max-width: 960px) {
  .tf2__rows { grid-template-columns: 1fr; gap: 0 clamp(1.8rem, 4vw, 3.5rem); }
  .tf7__grid { grid-template-columns: repeat(3, 1fr); }
  .tf8 { grid-template-columns: 1fr; }
  .tf8__intro { text-align: center; }
  .tf10__cols { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 760px) {
  .tf5__cols { columns: 2; }
  .tf9__steps { grid-template-columns: 1fr; gap: 1.4rem; }
  .tf9__step, .tf9__step:nth-child(2), .tf9__step:nth-child(3), .tf9__step:nth-child(4) { transform: none; }
  .tf9__arc { display: none; }
  .tf9__ends { max-width: none; }
  .tf9__node { margin-bottom: 0.6rem; }
  .tf10__cols { grid-template-columns: 1fr 1fr; gap: 1.4rem 0; }
  .tf10__col { padding-block: 0.9rem; }
  .tf10__col + .tf10__col { border-left: none; }
  .tf10__col:nth-child(even) { border-left: 1px solid rgba(var(--cream-rgb), .16); }
}
@media (max-width: 560px) {
  .tf1__row { grid-template-columns: 1fr; gap: 0.4rem; text-align: center; padding: 1.2rem 1.3rem; }
  .tf1__from, .tf1__to { text-align: center; }
  .tf1__arrow { transform: rotate(90deg); margin: 0.3rem auto; }
  .tf3__grid { flex-direction: column; align-items: stretch; }
  .tf3__chip { justify-content: center; }
  .tf4__row { grid-template-columns: 2.2rem 1fr; row-gap: 0.2rem; }
  .tf4__arrow { grid-column: 2; justify-self: start; }
  .tf4__to { grid-column: 2; text-align: left; }
  .tf5__cols { columns: 1; }
  .tf6__row { grid-template-columns: 1fr; text-align: center; gap: 0.2rem; }
  .tf6__from, .tf6__to { text-align: center; }
  .tf6__perf { transform: rotate(90deg); }
  .tf6__stamp { position: static; margin: 0 auto 1.2rem; transform: rotate(-4deg); }
  .tf7__grid { grid-template-columns: 1fr 1fr; }
  .tf8__orbit { display: none; }
  .tf10__cols { grid-template-columns: 1fr; }
  .tf10__col:nth-child(even) { border-left: none; }
  .tf10__col + .tf10__col { border-top: 1px solid rgba(var(--cream-rgb), .16); }
}


/* ▓▓ SEKTION: PROZESS (process) ▓▓
   "Der Ablauf" — wie die Arbeit beginnt. 10 Designvarianten, inhaltlich
   per Content-Toggle umschaltbar. 3 Schritte. Nur :root-Tokens.
   Klassen-Präfix: pc. */
.process { background: var(--cream-100); }

/* ── Prozess · Variante 1: Vertikale Timeline ─────────────── */
.pc1 { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.pc1__steps {
  list-style: none; position: relative;
  padding-left: clamp(2.6rem, 6vw, 3.6rem);
}
.pc1__steps::before {
  content: ""; position: absolute; top: 0.6rem; bottom: 0.6rem;
  left: clamp(1.1rem, 2.6vw, 1.55rem); width: 1px;
  background: linear-gradient(var(--gold), rgba(var(--gold-rgb), 0.15));
}
.pc1__step {
  position: relative;
  padding-block: clamp(1.4rem, 3vw, 2.2rem);
  border-top: 1px solid var(--line);
}
.pc1__step:first-child { border-top: none; padding-top: 0.4rem; }
.pc1__num {
  position: absolute; left: calc(-1 * clamp(2.6rem, 6vw, 3.6rem)); top: clamp(1.5rem, 3.1vw, 2.3rem);
  width: clamp(2.2rem, 5.2vw, 3.1rem); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cream-50); border: 1.5px solid var(--gold);
  font-family: var(--font-display); font-style: italic; font-size: 0.95rem;
  color: var(--gold-deep); z-index: 1;
  transition: background .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease);
}
.pc1__step:first-child .pc1__num { top: 0; }
.pc1__step:hover .pc1__num {
  background: var(--gold); color: var(--cream-50);
  box-shadow: 0 0 0 6px rgba(var(--gold-rgb), 0.14);
}
.pc1__t {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.9rem); line-height: 1.12;
  letter-spacing: -0.015em; color: var(--ink); margin-bottom: 0.5rem;
}
.pc1__x { color: var(--muted); max-width: 52ch; }

/* ── Prozess · Variante 2: Horizontaler Stepper ───────────── */
.pc2 { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.pc2__steps {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 2rem);
}
.pc2__step { position: relative; padding-top: clamp(1.6rem, 3vw, 2.2rem); }
.pc2__step::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--line);
}
.pc2__step::after {
  content: ""; position: absolute; top: 0; left: 0; width: 2.6rem; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  transition: width .6s var(--ease);
}
.pc2__step:hover::after { width: 100%; }
.pc2__num {
  font-family: var(--font-display); font-style: italic; font-weight: 320;
  font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1;
  color: rgba(var(--gold-rgb), 0.32); display: block; margin-bottom: 0.7rem;
  transition: color .5s var(--ease);
}
.pc2__step:hover .pc2__num { color: var(--gold); }
.pc2__t {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); line-height: 1.12;
  letter-spacing: -0.015em; color: var(--ink); margin-bottom: 0.5rem;
}
.pc2__x { color: var(--muted); font-size: 0.97rem; }

/* ── Prozess · Variante 3: Editoriale Großzahlen (Register) ─ */
.pc3 { list-style: none; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.pc3__step {
  display: grid; grid-template-columns: clamp(3.4rem, 11vw, 7rem) 1fr;
  gap: clamp(1.2rem, 3vw, 2.6rem); align-items: baseline;
  padding-block: clamp(1.6rem, 3.2vw, 2.4rem);
  border-top: 1px solid var(--line);
  transition: border-color .5s var(--ease);
}
.pc3__step:last-child { border-bottom: 1px solid var(--line); }
.pc3__step:hover { border-top-color: rgba(var(--gold-rgb), 0.6); }
.pc3__num {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 300;
  font-size: clamp(2.8rem, 3rem + 3vw, 5.6rem); line-height: 0.9;
  letter-spacing: -0.03em; color: var(--sand);
  transition: color .5s var(--ease);
}
.pc3__step:hover .pc3__num { color: var(--gold); }
.pc3__t {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2rem); line-height: 1.1;
  letter-spacing: -0.015em; color: var(--ink); margin-bottom: 0.5rem;
}
.pc3__x { color: var(--muted); max-width: 54ch; }

/* ── Prozess · Variante 4: Boarding-Pass / Ticket ─────────── */
.pc4 { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.pc4__pass {
  list-style: none; position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--cream-50); color: var(--charcoal);
  border-radius: 16px;
  box-shadow: 0 40px 80px -38px rgba(0, 0, 0, 0.55);
}
.pc4__pass::before, .pc4__pass::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%; background: var(--cream-100);
}
.pc4__pass::before { left: -11px; }
.pc4__pass::after { right: -11px; }
.pc4__seg {
  position: relative;
  padding: clamp(1.7rem, 3.2vw, 2.6rem);
  transition: background .4s var(--ease);
}
.pc4__seg:first-child { border-radius: 16px 0 0 16px; }
.pc4__seg:last-child { border-radius: 0 16px 16px 0; }
.pc4__seg:hover { background: var(--cream-100); }
.pc4__seg + .pc4__seg { border-left: 1px dashed rgba(var(--ink-rgb), 0.3); }
.pc4__seg + .pc4__seg::before, .pc4__seg + .pc4__seg::after {
  content: ""; position: absolute; left: -11px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--cream-100);
}
.pc4__seg + .pc4__seg::before { top: -11px; }
.pc4__seg + .pc4__seg::after { bottom: -11px; }
.pc4__code {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 500; color: var(--gold-deep);
  padding-bottom: 0.9rem; margin-bottom: 1.1rem;
  border-bottom: 1px dashed rgba(var(--ink-rgb), 0.22);
}
.pc4__code b { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: 0; }
.pc4__t {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); line-height: 1.12;
  letter-spacing: -0.01em; color: var(--ink); margin-bottom: 0.6rem;
}
.pc4__x { color: var(--muted); font-size: 0.95rem; }
.pc4__barcode {
  display: flex; gap: 2px; align-items: flex-end; height: 1.6rem; margin-top: 1.4rem;
}
.pc4__barcode span { flex: 1; background: rgba(var(--ink-rgb), 0.55); }
.pc4__barcode span:nth-child(3n) { flex: 0.5; background: rgba(var(--ink-rgb), 0.3); }
.pc4__barcode span:nth-child(4n) { flex: 1.6; }

/* ── Prozess · Variante 5: Bogen / Brücke (dunkel) ────────── */
.pc5 {
  position: relative; overflow: hidden;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(2.4rem, 6vw, 4.5rem) clamp(1.4rem, 4vw, 3.5rem) clamp(1.6rem, 4vw, 3rem);
  background: var(--ink); border-radius: 26px; isolation: isolate;
}
.pc5__glow {
  position: absolute; z-index: -1; left: 50%; top: -32%; transform: translateX(-50%);
  width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--gold-rgb), 0.32), transparent 68%);
  filter: blur(20px);
}
.pc5__arc {
  position: absolute; left: 50%; top: clamp(3rem, 8vw, 5rem); transform: translateX(-50%);
  width: min(1200px, 150%); aspect-ratio: 2 / 1;
  border: 1px dashed rgba(var(--gold-rgb), 0.4);
  border-bottom: none; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
}
.pc5__steps {
  position: relative; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
}
.pc5__step { text-align: center; padding-inline: clamp(0.2rem, 1vw, 0.9rem); }
.pc5__step:nth-child(2) { margin-top: calc(-1 * clamp(1.4rem, 4vw, 2.8rem)); }
.pc5__node {
  width: clamp(3.2rem, 5vw, 4rem); aspect-ratio: 1; border-radius: 50%;
  margin: 0 auto clamp(1.1rem, 2.5vw, 1.7rem);
  display: grid; place-items: center; position: relative; z-index: 1;
  background: var(--ink); border: 1.5px solid var(--gold);
  font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--gold);
  transition: background .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.pc5__step:hover .pc5__node {
  background: var(--gold); color: var(--ink);
  box-shadow: 0 0 0 8px rgba(var(--gold-rgb), 0.16); transform: scale(1.05);
}
.pc5__t {
  font-family: var(--font-display); font-weight: 380;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem); line-height: 1.12;
  letter-spacing: -0.015em; color: var(--cream-50); margin-bottom: 0.55rem;
}
.pc5__x { color: rgba(var(--cream-rgb), 0.66); max-width: 32ch; margin-inline: auto; }

/* ── Prozess · Variante 6: Index-Zeilen (Belief, dunkel) ──── */
.pc6 {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--ink); border-radius: 26px;
  padding: clamp(2.2rem, 5vw, 4rem) clamp(1.5rem, 5vw, 4rem);
}
.pc6__glow {
  position: absolute; z-index: -1; right: -6%; top: -30%;
  width: 50%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--gold-rgb), 0.34), transparent 68%);
  filter: blur(20px);
}
.pc6__rows { list-style: none; }
.pc6__row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(1rem, 3vw, 2.4rem);
  padding-block: clamp(1.3rem, 2.8vw, 2rem);
  border-top: 1px solid rgba(var(--cream-rgb), 0.14);
  transition: padding-left .5s var(--ease);
}
.pc6__row:last-child { border-bottom: 1px solid rgba(var(--cream-rgb), 0.14); }
.pc6__row:hover { padding-left: clamp(0.4rem, 1.4vw, 1rem); }
.pc6__num {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1;
  color: rgba(var(--cream-rgb), 0.28); min-width: 2.2ch;
  transition: color .5s var(--ease);
}
.pc6__row:hover .pc6__num { color: var(--gold); }
.pc6__t {
  font-family: var(--font-display); font-weight: 380;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.85rem); line-height: 1.1;
  letter-spacing: -0.015em; color: var(--cream-50); margin-bottom: 0.35rem;
}
.pc6__x { color: rgba(var(--cream-rgb), 0.64); font-size: 0.97rem; max-width: 60ch; }
.pc6__dot {
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  border: 1px solid rgba(var(--gold-rgb), 0.6); flex: none;
  transition: background .5s var(--ease), transform .5s var(--ease);
}
.pc6__row:hover .pc6__dot { background: var(--gold); transform: scale(1.3); }

/* ── Prozess · Variante 7: Frage — Glaskarten über Goldglut ─ */
.pc7 {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.7rem, 3.6vw, 3rem);
  border: 1px solid rgba(var(--cream-rgb), 0.1); border-radius: 24px;
  background:
    radial-gradient(110% 90% at 15% 0%, rgba(var(--gold-rgb), 0.34), transparent 55%),
    radial-gradient(95% 90% at 85% 100%, rgba(var(--gold-deep-rgb), 0.3), transparent 58%),
    var(--ink);
}
.pc7__ask {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-style: italic; font-weight: 360;
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem); line-height: 1.2;
  color: var(--cream-50); max-width: 30ch; margin-bottom: clamp(1.6rem, 3.4vw, 2.6rem);
}
.pc7__grid {
  position: relative; z-index: 1; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.9rem, 1.8vw, 1.4rem);
}
.pc7__card {
  position: relative; overflow: hidden;
  padding: clamp(1.6rem, 3vw, 2.3rem); border-radius: 18px;
  background: rgba(var(--cream-rgb), 0.07);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(var(--cream-rgb), 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
}
.pc7__card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.14) 50%, transparent 68%);
  transform: translateX(-140%); transition: transform .9s var(--ease);
}
.pc7__card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--cream-rgb), 0.4); background: rgba(var(--cream-rgb), 0.11);
}
.pc7__card:hover::after { transform: translateX(140%); }
.pc7__num {
  display: inline-grid; place-items: center;
  width: 2.8rem; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(var(--gold-rgb), 0.7);
  font-family: var(--font-display); font-style: italic; font-size: 1.05rem;
  color: var(--gold); margin-bottom: clamp(1.3rem, 3vw, 2rem);
}
.pc7__t {
  font-family: var(--font-display); font-weight: 380;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); line-height: 1.12;
  letter-spacing: -0.015em; color: var(--cream-50); margin-bottom: 0.55rem;
}
.pc7__x { color: rgba(var(--cream-rgb), 0.7); font-size: 0.97rem; }

/* ── Prozess · Variante 8: Minimal (Register, luftig) ─────── */
.pc8 { list-style: none; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.pc8__step {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  padding-block: clamp(1.5rem, 3.4vw, 2.4rem);
  border-top: 1px solid var(--line-soft);
}
.pc8__step:first-child { border-top: none; }
.pc8__num {
  font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
  font-weight: 500; color: var(--gold-deep); padding-top: 0.5rem;
  white-space: nowrap;
}
.pc8__t {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 340;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.06;
  letter-spacing: -0.02em; color: var(--ink); margin-bottom: 0.6rem;
}
.pc8__t em { color: var(--gold-deep); font-style: italic; }
.pc8__x { color: var(--muted); max-width: 50ch; }

/* ── Prozess · Variante 9: Vertrauen — helle Karten + Siegel ─ */
.pc9 {
  list-style: none; margin-top: clamp(1.5rem, 3vw, 2.5rem);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.2vw, 1.6rem);
}
.pc9__card {
  position: relative; overflow: hidden;
  background: var(--cream-50); border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(1.8rem, 3vw, 2.6rem);
  display: flex; flex-direction: column;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.pc9__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -30px rgba(var(--ink-rgb), 0.4);
  border-color: rgba(var(--gold-rgb), 0.55);
}
.pc9__seal {
  width: clamp(3rem, 6vw, 4rem); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: clamp(1.2rem, 2.6vw, 1.8rem);
  border: 1.5px solid rgba(var(--gold-rgb), 0.5);
  background: radial-gradient(circle at 50% 35%, rgba(var(--gold-rgb), 0.14), transparent 70%);
  font-family: var(--font-display); font-style: italic; font-size: 1.1rem;
  color: var(--gold-deep);
  transition: border-color .5s var(--ease), transform .5s var(--ease);
}
.pc9__card:hover .pc9__seal { border-color: var(--gold); transform: rotate(-6deg); }
.pc9__label {
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 500; color: var(--gold-deep); margin-bottom: 0.6rem;
}
.pc9__t {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.65rem); line-height: 1.12;
  letter-spacing: -0.015em; color: var(--ink); margin-bottom: 0.55rem;
}
.pc9__x { color: var(--muted); font-size: 0.95rem; }

/* ── Prozess · Variante 10: Poster mit Riesen-Numeralen ───── */
.pc10 {
  position: relative; text-align: center; isolation: isolate;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(2.4rem, 6vw, 5rem) clamp(1.2rem, 4vw, 4rem);
  background: var(--ink); border-radius: 26px; overflow: hidden;
}
.pc10__glow {
  position: absolute; z-index: -1; left: 50%; top: -30%; transform: translateX(-50%);
  width: 65%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--gold-rgb), 0.28), transparent 70%);
  filter: blur(22px);
}
.pc10__steps {
  position: relative; list-style: none;
  display: flex; flex-direction: column; gap: clamp(2.2rem, 5vw, 3.6rem);
}
.pc10__step {
  position: relative;
  padding-block: clamp(0.4rem, 1.5vw, 1rem);
}
.pc10__step + .pc10__step { border-top: 1px solid rgba(var(--cream-rgb), 0.12); padding-top: clamp(2rem, 5vw, 3.4rem); }
.pc10__num {
  font-family: var(--font-display); font-optical-sizing: auto; font-style: italic; font-weight: 280;
  font-size: clamp(4rem, 6rem + 8vw, 12rem); line-height: 0.82;
  letter-spacing: -0.04em; color: rgba(var(--gold-rgb), 0.22);
  display: block; margin-bottom: clamp(0.2rem, 1vw, 0.6rem);
  transition: color .6s var(--ease);
}
.pc10__step:hover .pc10__num { color: rgba(var(--gold-rgb), 0.44); }
.pc10__t {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 340;
  font-size: clamp(1.7rem, 1rem + 3vw, 3.4rem); line-height: 1.04;
  letter-spacing: -0.025em; color: var(--cream-50); margin-bottom: 0.7rem;
  overflow-wrap: break-word;
}
.pc10__t em { color: var(--gold); font-style: italic; }
.pc10__x { max-width: 46ch; margin-inline: auto; color: rgba(var(--cream-rgb), 0.66); }

/* ── Prozess 1–10 · Responsive ────────────────────────────── */
@media (max-width: 900px) {
  .pc2__steps { grid-template-columns: 1fr; gap: 0; }
  .pc2__step { padding-block: 1.6rem 0.4rem; }
  .pc2__step + .pc2__step { margin-top: 1.4rem; }

  .pc4__pass { grid-template-columns: 1fr; }
  .pc4__seg:first-child { border-radius: 16px 16px 0 0; }
  .pc4__seg:last-child { border-radius: 0 0 16px 16px; }
  .pc4__seg + .pc4__seg { border-left: none; border-top: 1px dashed rgba(var(--ink-rgb), 0.3); }
  .pc4__seg + .pc4__seg::before { top: -11px; left: -11px; bottom: auto; }
  .pc4__seg + .pc4__seg::after { top: -11px; right: -11px; left: auto; bottom: auto; }
  .pc4__pass::before, .pc4__pass::after { display: none; }

  /* V5: Bogen weg, gestapelte Liste */
  .pc5 { overflow: visible; }
  .pc5__arc { display: none; }
  .pc5__steps { grid-template-columns: 1fr; gap: 0; text-align: left; }
  .pc5__step { text-align: left; padding: 1.6rem 0; border-top: 1px solid rgba(var(--cream-rgb), 0.12); }
  .pc5__step:first-child { border-top: none; padding-top: 0.2rem; }
  .pc5__step:nth-child(2) { margin-top: 0; }
  .pc5__node { margin: 0 0 1rem; }
  .pc5__x { max-width: 52ch; margin-inline: 0; }

  .pc7__grid { grid-template-columns: 1fr; }

  .pc9 { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .pc1__steps { padding-left: clamp(2.2rem, 9vw, 2.9rem); }
  .pc3__step { grid-template-columns: 1fr; gap: 0.3rem; }
  .pc3__num { font-size: clamp(2.6rem, 16vw, 3.6rem); }
  .pc6__row { grid-template-columns: auto 1fr; }
  .pc6__dot { display: none; }
  .pc8__step { grid-template-columns: 1fr; gap: 0.5rem; }
  .pc8__num { padding-top: 0; }
}


/* ▓▓ SEKTION: ZIELGRUPPE (audience) ▓▓
   Für wen · Zielgruppe aus dem Brief (Target Audience). 10 Design-
   Varianten, inhaltlich per Content-Toggle. Klassen-Präfix: au.
   Nur Tokens + rgba(). Voll responsiv, ≤700px einspaltig. */
.audience { background: var(--cream-50); }

/* ── Variante 1 · Karten-Raster (Editorial / Default) ─────── */
.au1__head { max-width: 46rem; margin: 0 auto clamp(2.4rem, 5vw, 4rem); text-align: center; }
.au1__lead { color: var(--muted); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); margin-top: 1rem; }
.au1__grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.4rem); }
.au1__card { position: relative; background: var(--cream-100); border: 1px solid var(--line); border-radius: 18px; padding: clamp(1.6rem, 2.4vw, 2.2rem); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
.au1__card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -30px rgba(var(--ink-rgb), .4); border-color: rgba(var(--gold-rgb), .55); }
.au1__num { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--gold); }
.au1__t { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem); color: var(--ink); margin: .7rem 0 .5rem; }
.au1__x { color: var(--muted); font-size: .96rem; line-height: 1.55; }

/* ── Variante 2 · Register / nummerierte Index-Zeilen ─────── */
.au2 { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.au2__intro { position: sticky; top: 6rem; }
.au2__lead { color: var(--muted); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); margin-top: 1rem; }
.au2__list { list-style: none; counter-reset: none; }
.au2__row { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: clamp(1rem, 2vw, 1.6rem); row-gap: .3rem; padding: 1.25rem 0; border-top: 1px solid var(--line); }
.au2__row:last-child { border-bottom: 1px solid var(--line); }
.au2__idx { grid-row: span 2; font-family: var(--font-display); font-style: italic; color: var(--gold); font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1; }
.au2__t { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); color: var(--ink); }
.au2__x { color: var(--muted); font-size: .96rem; line-height: 1.5; }

/* ── Variante 3 · Zwei-Spalten-Liste mit Linien ──────────── */
.au3__head { max-width: 44rem; margin: 0 auto clamp(2.4rem, 5vw, 4rem); text-align: center; }
.au3__lead { color: var(--muted); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); margin-top: 1rem; }
.au3__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4.5rem); }
.au3__row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1rem; padding: clamp(1.1rem, 2.2vw, 1.5rem) 0; border-top: 1px solid var(--line); }
.au3__t { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.15rem, 1rem + 0.55vw, 1.45rem); color: var(--ink); }
.au3__x { color: var(--muted); font-size: .92rem; line-height: 1.45; text-align: right; max-width: 18ch; }

/* ── Variante 4 · Tag- / Chip-Wolke ──────────────────────── */
.au4__head { max-width: 42rem; margin: 0 auto clamp(2.4rem, 5vw, 3.6rem); text-align: center; }
.au4__lead { color: var(--muted); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); margin-top: 1rem; }
.au4__cloud { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(.7rem, 1.6vw, 1.1rem); max-width: 60rem; margin-inline: auto; }
.au4__chip { display: inline-flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; background: var(--cream-100); border: 1px solid rgba(var(--gold-rgb), .35); border-radius: 999px; padding: clamp(.9rem, 1.8vw, 1.2rem) clamp(1.3rem, 2.6vw, 1.9rem); transition: border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease); }
.au4__chip:hover { border-color: var(--gold); background: var(--cream-200); transform: translateY(-3px); }
.au4__t { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem); color: var(--ink); }
.au4__x { color: var(--muted); font-size: .85rem; line-height: 1.4; }

/* ── Variante 5 · Orbit / Kreis ──────────────────────────── */
.au5__center { max-width: 40rem; margin: 0 auto clamp(2.6rem, 5vw, 4rem); text-align: center; }
.au5__lead { color: var(--muted); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); margin-top: 1rem; }
.au5__orbit { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3.5vw, 3rem) clamp(1rem, 2.5vw, 2rem); position: relative; }
.au5__orbit::before { content: ""; position: absolute; inset: 8% 12%; border: 1px dashed rgba(var(--gold-rgb), .28); border-radius: 50%; z-index: 0; pointer-events: none; }
.au5__node { position: relative; z-index: 1; text-align: center; padding-top: 1.6rem; }
.au5__dot { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: .7rem; height: .7rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(var(--gold-rgb), .16); }
.au5__t { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.1rem, 1rem + 0.45vw, 1.4rem); color: var(--ink); margin-bottom: .35rem; }
.au5__x { color: var(--muted); font-size: .9rem; line-height: 1.45; max-width: 22ch; margin-inline: auto; }

/* ── Variante 6 · Ink-Panel mit Gold-Glow (DARK) ─────────── */
.au6 { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); border-radius: 26px; padding: clamp(2.4rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem); }
.au6__glow { position: absolute; z-index: -1; right: -8%; top: -28%; width: 55%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(var(--gold-rgb), .38), transparent 68%); filter: blur(18px); }
.au6__head { max-width: 42rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.au6__lead { color: rgba(var(--cream-rgb), .7); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); margin-top: 1rem; }
.au6__grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); }
.au6__item { position: relative; padding-top: 1.4rem; border-top: 2px solid rgba(var(--gold-rgb), .5); }
.au6__num { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--gold); display: block; margin-bottom: .45rem; }
.au6__t { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem); color: var(--cream-50); margin-bottom: .5rem; }
.au6__x { color: rgba(var(--cream-rgb), .68); font-size: .95rem; line-height: 1.55; }

/* ── Variante 7 · Zeitungs-Spalten ───────────────────────── */
.au7__head { max-width: 44rem; margin: 0 auto clamp(2.4rem, 5vw, 3.6rem); text-align: center; }
.au7__lead { color: var(--muted); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); margin-top: 1rem; }
.au7__cols { list-style: none; columns: 3; column-gap: clamp(2rem, 4vw, 3.5rem); column-rule: 1px solid var(--line); }
.au7__entry { break-inside: avoid; padding: 0 0 clamp(1.4rem, 2.6vw, 2rem); margin-bottom: clamp(1.4rem, 2.6vw, 2rem); border-bottom: 1px solid var(--line-soft); }
.au7__entry:last-child { border-bottom: none; }
.au7__t { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); color: var(--ink); margin-bottom: .4rem; }
.au7__x { color: var(--muted); font-size: .95rem; line-height: 1.55; }

/* ── Variante 8 · Minimaler Index ────────────────────────── */
.au8__head { max-width: 40rem; margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.au8__lead { color: var(--muted); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); margin-top: 1rem; }
.au8__list { list-style: none; }
.au8__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.2rem; padding: clamp(1.1rem, 2.2vw, 1.5rem) 0; border-top: 1px solid var(--line); }
.au8__row:last-child { border-bottom: 1px solid var(--line); }
.au8__t { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2.1rem); color: var(--ink); letter-spacing: -0.01em; }
.au8__x { color: var(--muted); font-size: .95rem; line-height: 1.5; }
.au8__row:hover .au8__t { color: var(--gold-deep); }

/* ── Variante 9 · Glass-over-Gold (DARK) ─────────────────── */
.au9 { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); border-radius: 26px; padding: clamp(2.4rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem); }
.au9__glow { position: absolute; z-index: -1; left: 50%; top: -35%; transform: translateX(-50%); width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(var(--gold-rgb), .34), transparent 66%); filter: blur(20px); }
.au9__head { max-width: 42rem; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.au9__lead { color: rgba(var(--cream-rgb), .72); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); margin-top: 1rem; }
.au9__grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.4rem); }
.au9__card { background: rgba(var(--cream-rgb), .05); border: 1px solid rgba(var(--cream-rgb), .14); border-radius: 18px; padding: clamp(1.5rem, 2.4vw, 2.1rem); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color .4s var(--ease), background .4s var(--ease); }
.au9__card:hover { border-color: rgba(var(--gold-rgb), .55); background: rgba(var(--cream-rgb), .08); }
.au9__t { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem); color: var(--gold); margin-bottom: .5rem; }
.au9__x { color: rgba(var(--cream-rgb), .7); font-size: .95rem; line-height: 1.55; }

/* ── Variante 10 · Menü-Karte / Poster ───────────────────── */
.au10 { background: var(--cream-100); border: 1px solid var(--line); border-radius: 24px; padding: clamp(2.2rem, 5vw, 4.5rem) clamp(1.5rem, 5vw, 4rem); }
.au10__head { max-width: 42rem; margin: 0 auto clamp(2.2rem, 4.5vw, 3.4rem); text-align: center; }
.au10__lead { color: var(--muted); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); margin-top: 1rem; }
.au10__menu { list-style: none; max-width: 52rem; margin-inline: auto; }
.au10__line { display: flex; align-items: baseline; gap: .8rem; padding: clamp(.9rem, 2vw, 1.3rem) 0; }
.au10__line + .au10__line { border-top: 1px solid var(--line-soft); }
.au10__t { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem); color: var(--ink); flex: none; }
.au10__dots { flex: 1; align-self: flex-end; margin-bottom: .35rem; border-bottom: 1px dotted rgba(var(--gold-rgb), .5); min-width: 1.5rem; }
.au10__x { color: var(--muted); font-size: .95rem; line-height: 1.45; text-align: right; flex: none; max-width: 24ch; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 960px) {
  .au1__grid { grid-template-columns: repeat(2, 1fr); }
  .au2 { grid-template-columns: 1fr; }
  .au2__intro { position: static; }
  .au5__orbit { grid-template-columns: repeat(2, 1fr); }
  .au5__orbit::before { display: none; }
  .au6__grid { grid-template-columns: repeat(2, 1fr); }
  .au7__cols { columns: 2; }
  .au9__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .au1__grid { grid-template-columns: 1fr; }
  .au3__list { grid-template-columns: 1fr; }
  .au3__row:first-child + .au3__row { /* keep top borders on single column */ }
  .au3__x { text-align: left; max-width: none; }
  .au5__orbit { grid-template-columns: 1fr; }
  .au6__grid { grid-template-columns: 1fr; }
  .au7__cols { columns: 1; column-rule: none; }
  .au9__grid { grid-template-columns: 1fr; }
  .au10__line { flex-wrap: wrap; gap: .2rem .6rem; }
  .au10__dots { display: none; }
  .au10__x { text-align: left; max-width: none; flex: 1 0 100%; }
  .au8__t { font-size: clamp(1.3rem, 1.1rem + 2vw, 1.7rem); }
}


/* ══════════════════════════════════════════════════════════
   LOOK CONFIGURATOR — three independent axes
   data-palette (colour) · data-design (type/layout) · data-accents
   All combinable. Design axis carries NO colour — it reads whatever
   palette is active, so every combination works.
   ══════════════════════════════════════════════════════════ */


/* ── AXIS 1 · PALETTE (colour only) ─────────────────────── */
:root[data-palette="sand"] {
  --cream-50:#FBF8F2; --cream-100:#F6F1E9; --cream-200:#EFE8DB; --cream-300:#E7DDCB; --sand:#DCCFB8;
  --ink:#201B14; --charcoal:#2A241C; --charcoal-soft:#4A4238; --muted:#736A5C;
  --gold:#A8895A; --gold-deep:#8A6E42;
  --cream-rgb:246,241,233; --cream50-rgb:251,248,242; --sand-rgb:220,207,184;
  --ink-rgb:32,27,20; --muted-rgb:115,106,92; --gold-rgb:168,137,90; --gold-deep-rgb:138,110,66;
}
:root[data-palette="rot"] {
  --cream-50:#FBF7F4; --cream-100:#F7F0EC; --cream-200:#F0E6E0; --cream-300:#E8D8D0; --sand:#DEC7BC;
  --ink:#241612; --charcoal:#30201C; --charcoal-soft:#533C36; --muted:#806A62;
  --gold:#BE3A32; --gold-deep:#97271F;
  --cream-rgb:247,240,236; --cream50-rgb:251,247,244; --sand-rgb:222,199,188;
  --ink-rgb:36,22,18; --muted-rgb:128,106,98; --gold-rgb:190,58,50; --gold-deep-rgb:151,39,31;
}
:root[data-palette="terra"] {
  --cream-50:#FBF6F0; --cream-100:#F6EEE4; --cream-200:#EFE3D5; --cream-300:#E6D3C0; --sand:#D8BFA3;
  --ink:#241A12; --charcoal:#31251A; --charcoal-soft:#544433; --muted:#82705E;
  --gold:#B5623C; --gold-deep:#8E4527;
  --cream-rgb:246,238,228; --cream50-rgb:251,246,240; --sand-rgb:216,191,163;
  --ink-rgb:36,26,18; --muted-rgb:130,112,94; --gold-rgb:181,98,60; --gold-deep-rgb:142,69,39;
}
:root[data-palette="salbei"] {
  --cream-50:#F5F8F3; --cream-100:#EBF1E9; --cream-200:#DFE8DC; --cream-300:#CEDBCA; --sand:#B7CBB0;
  --ink:#16241D; --charcoal:#21322A; --charcoal-soft:#3D5147; --muted:#62766B;
  --gold:#2E7D64; --gold-deep:#1E5D49;
  --cream-rgb:235,241,233; --cream50-rgb:245,248,243; --sand-rgb:183,203,176;
  --ink-rgb:22,36,29; --muted-rgb:98,118,107; --gold-rgb:46,125,100; --gold-deep-rgb:30,93,73;
}
:root[data-palette="ozean"] {
  --cream-50:#FBFCFE; --cream-100:#EEF2FA; --cream-200:#E3EAF6; --cream-300:#D3DEF0; --sand:#BFCDE6;
  --ink:#171C2B; --charcoal:#23293D; --charcoal-soft:#434B66; --muted:#6B7490;
  --gold:#2F9AD4; --gold-deep:#3E63C8;
  --cream-rgb:238,242,250; --cream50-rgb:251,252,254; --sand-rgb:191,205,230;
  --ink-rgb:23,28,43; --muted-rgb:107,116,144; --gold-rgb:47,154,212; --gold-deep-rgb:62,99,200;
}
:root[data-palette="nacht"] {
  --cream-50:#F7F8FA; --cream-100:#EDEFF3; --cream-200:#E1E4EB; --cream-300:#CFD4DE; --sand:#B4BCCB;
  --ink:#0F1622; --charcoal:#1B2432; --charcoal-soft:#3A4557; --muted:#68717F;
  --gold:#2E5A9E; --gold-deep:#1E3D6E;
  --cream-rgb:237,239,243; --cream50-rgb:247,248,250; --sand-rgb:180,188,203;
  --ink-rgb:15,22,34; --muted-rgb:104,113,127; --gold-rgb:46,90,158; --gold-deep-rgb:30,61,110;
}
:root[data-palette="graphit"] {
  --cream-50:#F7F7F4; --cream-100:#EFEEEA; --cream-200:#E5E4DE; --cream-300:#D8D6CE; --sand:#C3C1B6;
  --ink:#1A1A18; --charcoal:#262523; --charcoal-soft:#46453F; --muted:#6E6D66;
  --gold:#46586B; --gold-deep:#33424F;
  --cream-rgb:239,238,234; --cream50-rgb:247,247,244; --sand-rgb:195,193,182;
  --ink-rgb:26,26,24; --muted-rgb:110,109,102; --gold-rgb:70,88,107; --gold-deep-rgb:51,66,79;
}


/* Kupfer — the middle ground between Messing (brass) and Rot (crimson):
   a warm, earthy copper-rust. Keeps red character without the aggression. */
:root[data-palette="kupfer"] {
  --cream-50:#FBF7F3; --cream-100:#F6EFE8; --cream-200:#EFE5DA; --cream-300:#E7D8C9; --sand:#DCC6B2;
  --ink:#241811; --charcoal:#2E211A; --charcoal-soft:#4E3E34; --muted:#7C6B5D;
  --gold:#B0503C; --gold-deep:#883829;
  --cream-rgb:246,239,232; --cream50-rgb:251,247,243; --sand-rgb:220,198,178;
  --ink-rgb:36,24,17; --muted-rgb:124,107,93; --gold-rgb:176,80,60; --gold-deep-rgb:136,56,41;
}

/* ── AXIS 2 · DESIGN (type / layout / rhythm — NO colour) ── */

/* BOLD — louder: pill eyebrows, heavy tight titles, filled CTAs, tighter rhythm */
:root[data-design="bold"] { --sec: clamp(4rem, 9.5vw, 8rem); }
/* R36 (21.07.): Sektions-Pillen DÜNN wie die Programm-Kicker (Feedback: die
   großen waren zu fett). Länge flexibel = natürliche Breite (kein erzwungenes
   Einheitsmaß mehr). Weißer Text, Kupfer. Die Hero-Pille ist eigenständig
   (eigene Regel unten). */
:root[data-design="bold"] .eyebrow {
  display:inline-flex; align-items:center; justify-content:center;
  width:fit-content; gap:0;
  background:var(--gold); color:var(--cream-50);
  padding:.6em 1.4em; border-radius:999px;
  letter-spacing:.16em; font-weight:600; font-size:0.86rem; line-height:1;
  box-shadow:0 10px 22px -12px rgba(var(--gold-rgb),.6);
}
:root[data-design="bold"] .eyebrow::before,
:root[data-design="bold"] .eyebrow--center::after { content:none; }
/* Hero-Bubble: größer und zweizeilig (Umbruch nach „Beziehungscoaching") —
   bleibt links verankert und läuft damit nie über das Gesicht */
:root[data-design="bold"] .hero .eyebrow {
  display: block; width: fit-content; min-width: 0;
  font-size: clamp(0.82rem, 0.68rem + 0.5vw, 1.05rem);
  line-height: 1.8;
  padding: 0.6em 1.25em;
}
:root[data-design="bold"] .hero .eyebrow strong { font-weight: 740; }
/* Gesichts-Ausweich wie beim Titel: die Bubble bleibt innerhalb der aus
   der Bildgeometrie berechneten Textbreite; die Schrift schrumpft mit,
   damit die längere zweite Zeile nie umbricht oder das Gesicht berührt */
@media (min-width: 821px) {
  :root[data-design="bold"] .hero .eyebrow {
    max-width: var(--hero-text-max, none);
    font-size: min(clamp(0.82rem, 0.68rem + 0.5vw, 1.05rem), calc(var(--hero-text-max, 999rem) / 30));
  }
}
:root[data-design="bold"] .eyebrow--center { margin-inline:auto; }
/* R36 (21.07.): nur die Programm-Kicker bleiben einheitlich breit (eigene
   Gruppe, an „Signature · 1:1" orientiert), nur auf Desktop. Sektions-Eyebrows
   sind jetzt flexibel (natürliche Breite). */
@media (min-width: 820px) {
  :root[data-design="bold"] { --kicker-w: 176px; }
}
:root[data-design="bold"] .section-title { font-weight:500; letter-spacing:-.035em; }
:root[data-design="bold"] .section-title em { font-weight:500; }
:root[data-design="bold"] .btn:not(.btn--glass):not(.btn--ghost) {
  --bg:var(--gold); --fg:var(--cream-50); border-color:var(--gold);
}
:root[data-design="bold"] .btn:not(.btn--glass):not(.btn--ghost):hover {
  --bg:var(--gold-deep); border-color:var(--gold-deep);
}
:root[data-design="bold"] .nav__links a::after { height:2px; }

/* MINIMAL — quieter: light airy titles, wide-tracked labels, sharp outline buttons */
:root[data-design="minimal"] { --sec: clamp(5rem, 12vw, 10.5rem); }
:root[data-design="minimal"] .eyebrow { letter-spacing:.4em; font-weight:500; }
:root[data-design="minimal"] .eyebrow--light { color:rgba(var(--cream-rgb),.72); }
:root[data-design="minimal"] .section-title { font-weight:300; letter-spacing:-.006em; }
:root[data-design="minimal"] .section-title em { font-weight:300; }
:root[data-design="minimal"] .btn { border-radius:3px; }
:root[data-design="minimal"] .btn:not(.btn--glass):not(.btn--ghost) {
  --bg:transparent; --fg:var(--ink); border-color:rgba(var(--ink-rgb),.4);
}
:root[data-design="minimal"] .btn:not(.btn--glass):not(.btn--ghost):hover {
  --bg:var(--ink); --fg:var(--cream-50); border-color:var(--ink);
  background:var(--ink); color:var(--cream-50);
}

/* EDITORIAL — magazine: oversized display headlines, serif italic byline eyebrows */
:root[data-design="editorial"] { --sec: clamp(5rem, 12vw, 11rem); }
:root[data-design="editorial"] .section-title {
  font-size: clamp(2.6rem, 1.55rem + 4.7vw, 5.3rem);
  font-weight:340; letter-spacing:-.025em; line-height:1.0;
}
:root[data-design="editorial"] .section-title em { font-style:italic; font-weight:340; }
:root[data-design="editorial"] .eyebrow {
  font-family:var(--font-display); text-transform:none; font-style:italic;
  letter-spacing:0; font-size:1.05rem; font-weight:400; color:var(--gold-deep); gap:.7rem;
}
:root[data-design="editorial"] .eyebrow::before { width:1.8rem; }


/* ── AXIS 3 · ACCENT COLOUR (independent of the base palette) ──
   Overrides ONLY the accent tokens, so ANY base × ANY accent works
   — e.g. Sand-Basis + roter Akzent. Sits after the palettes so it
   wins the cascade; "off" (Ton in Ton) stays last so mono always wins.
   Every translucent tint reads var(--gold-rgb), so this retints the
   whole page in one place. */
:root[data-accent="messing"]  { --gold:#A8895A; --gold-deep:#8A6E42; --gold-rgb:168,137,90;  --gold-deep-rgb:138,110,66; }
:root[data-accent="rot"]      { --gold:#BE3A32; --gold-deep:#97271F; --gold-rgb:190,58,50;   --gold-deep-rgb:151,39,31; }
:root[data-accent="kupfer"]   { --gold:#B0503C; --gold-deep:#883829; --gold-rgb:176,80,60;   --gold-deep-rgb:136,56,41; }
:root[data-accent="terra"]    { --gold:#B5623C; --gold-deep:#8E4527; --gold-rgb:181,98,60;   --gold-deep-rgb:142,69,39; }
:root[data-accent="salbei"]   { --gold:#2E7D64; --gold-deep:#1E5D49; --gold-rgb:46,125,100;  --gold-deep-rgb:30,93,73; }
:root[data-accent="ozean"]    { --gold:#2F9AD4; --gold-deep:#3E63C8; --gold-rgb:47,154,212;  --gold-deep-rgb:62,99,200; }
:root[data-accent="petrol"]   { --gold:#2E5A9E; --gold-deep:#1E3D6E; --gold-rgb:46,90,158;   --gold-deep-rgb:30,61,110; }
:root[data-accent="schiefer"] { --gold:#46586B; --gold-deep:#33424F; --gold-rgb:70,88,107;   --gold-deep-rgb:51,66,79; }

/* Ton in Ton — accent folds into ink (mono). Kept last → always wins. */
:root[data-accents="off"] {
  --gold: var(--ink); --gold-deep: var(--ink);
  --gold-rgb: var(--ink-rgb); --gold-deep-rgb: var(--ink-rgb);
}


/* ── AXIS 4 · ACCENT STRENGTH — dezent (default) vs. kräftig/„Mischung" ──
   "Kräftig" lets the accent also carry the HEADINGS and the primary
   button, so a base × accent pair (e.g. Sand + Rot) reads as a real
   blend — not just small marks. Titles on dark sections stay light. */
:root[data-accent-strength="strong"] .section-title:not(.section-title--light),
:root[data-accent-strength="strong"] .hero__title,
:root[data-accent-strength="strong"] .page-hero__title {
  color: var(--gold-deep);
}
:root[data-accent-strength="strong"] .section-title:not(.section-title--light) em,
:root[data-accent-strength="strong"] .hero__title em,
:root[data-accent-strength="strong"] .page-hero__title em {
  color: var(--gold);
}
:root[data-accent-strength="strong"] .btn:not(.btn--glass):not(.btn--ghost) {
  --bg: var(--gold); --fg: var(--cream-50); border-color: var(--gold);
  background: var(--gold); color: var(--cream-50);
}
:root[data-accent-strength="strong"] .btn:not(.btn--glass):not(.btn--ghost):hover {
  --bg: var(--gold-deep); border-color: var(--gold-deep);
  background: var(--gold-deep); color: var(--cream-50);
}


/* ══ AXIS 5 · ROLLEN-AKZENTE ═══════════════════════════════
   Rot als ZWEITE Akzentfarbe, unabhängig vom Gold-Akzent — pro
   Element-Rolle einzeln zuweisbar (data-fx-*). So lassen sich Gold
   UND Rot mischen (z. B. Overlines rot, Zahlen gold). Wirkt am
   klarsten mit Basis-Akzent = Auto (Gold). */
:root {
  --rot: #BE3A32; --rot-deep: #97271F; --rot-rgb: 190,58,50;
  /* Echtes Messing-Gold — bewusst NICHT von Palette/Akzent überschrieben,
     damit „Gold" pro Rolle IMMER wirklich Gold ist (auch bei Palette/Akzent = Rot).
     Genau das behebt das „Gold wird auch rot"-Problem. */
  --gold-true: #A8895A; --gold-true-deep: #8A6E42; --gold-true-rgb: 168,137,90;
}

/* Jede Rolle kennt drei Zustände:
   • ohne Attribut / "auto" → erbt den globalen Akzent (nichts erzwungen)
   • "gold"                 → erzwingt echtes Messing-Gold (palette-unabhängig)
   • "rot"                  → erzwingt Krapprot (palette-unabhängig) */

/* Overlines / Eyebrows */
:root[data-fx-eyebrow="rot"] .eyebrow { color: var(--rot-deep); }
:root[data-fx-eyebrow="rot"] .eyebrow--light { color: var(--rot); }
:root[data-fx-eyebrow="rot"] .eyebrow::before, :root[data-fx-eyebrow="rot"] .eyebrow::after,
:root[data-fx-eyebrow="rot"] .eyebrow--light::before, :root[data-fx-eyebrow="rot"] .eyebrow--light::after { background: var(--rot); }
:root[data-fx-eyebrow="gold"] .eyebrow { color: var(--gold-true-deep); }
:root[data-fx-eyebrow="gold"] .eyebrow--light { color: var(--gold-true); }
:root[data-fx-eyebrow="gold"] .eyebrow::before, :root[data-fx-eyebrow="gold"] .eyebrow::after,
:root[data-fx-eyebrow="gold"] .eyebrow--light::before, :root[data-fx-eyebrow="gold"] .eyebrow--light::after { background: var(--gold-true); }
/* BOLD: Eyebrow ist eine GEFÜLLTE Pill — die FX-Rollenfarbe als Schriftfarbe wäre
   dort Ton-in-Ton unlesbar. Sie tönt stattdessen den Pill-Hintergrund, Schrift bleibt hell. */
:root[data-design="bold"][data-fx-eyebrow="rot"] .eyebrow {
  background: var(--rot); color: var(--cream-50);
  box-shadow: 0 10px 22px -12px rgba(var(--rot-rgb), .6);
}
:root[data-design="bold"][data-fx-eyebrow="gold"] .eyebrow {
  background: var(--gold-true); color: var(--cream-50);
  box-shadow: 0 10px 22px -12px rgba(var(--gold-true-rgb), .6);
}

/* Headlines → em-Akzente in Überschriften */
:root[data-fx-headline="rot"]  :is(h1, h2, h3, h4) em { color: var(--rot); }
:root[data-fx-headline="gold"] :is(h1, h2, h3, h4) em { color: var(--gold-true); }

/* Fließtext-Akzente → em in Copy + Scroll-Fill-Wort */
:root[data-fx-text="rot"] :is(p, blockquote, li, figcaption, dd) em,
:root[data-fx-text="rot"] .mword--accent { color: var(--rot); }
:root[data-fx-text="gold"] :is(p, blockquote, li, figcaption, dd) em,
:root[data-fx-text="gold"] .mword--accent { color: var(--gold-true); }

/* Zahlen → Prozess-/Timeline-Ziffern */
:root[data-fx-num="rot"] :is([class*="__num"], [class*="__idx"]) { color: var(--rot); -webkit-text-stroke-color: var(--rot); }
:root[data-fx-num="rot"] .timeline__step.is-active .timeline__node { background: var(--rot); border-color: var(--rot); }
:root[data-fx-num="rot"] .timeline__fill { background: linear-gradient(180deg, var(--rot), var(--rot-deep)); }
:root[data-fx-num="gold"] :is([class*="__num"], [class*="__idx"]) { color: var(--gold-true); -webkit-text-stroke-color: var(--gold-true); }
:root[data-fx-num="gold"] .timeline__step.is-active .timeline__node { background: var(--gold-true); border-color: var(--gold-true); }
:root[data-fx-num="gold"] .timeline__fill { background: linear-gradient(180deg, var(--gold-true), var(--gold-true-deep)); }

/* Buttons → expliziter Override (schlägt „Kräftig") */
:root[data-fx-cta="neutral"] .btn:not(.btn--glass):not(.btn--ghost) { --bg: var(--ink); --fg: var(--cream-50); background: var(--ink); color: var(--cream-50); border-color: var(--ink); }
:root[data-fx-cta="gold"] .btn:not(.btn--glass):not(.btn--ghost) { --bg: var(--gold-true); --fg: var(--cream-50); background: var(--gold-true); color: var(--cream-50); border-color: var(--gold-true); }
:root[data-fx-cta="rot"] .btn:not(.btn--glass):not(.btn--ghost) { --bg: var(--rot); --fg: var(--cream-50); background: var(--rot); color: var(--cream-50); border-color: var(--rot); }


/* ══════════════════════════════════════════════════════════
   CONTROL PANEL — liquid-glass configurator, top-left
   ══════════════════════════════════════════════════════════ */
.theme-switch {
  position: fixed;
  top: clamp(4.4rem, 8.5vh, 5.4rem);
  left: clamp(1rem, 3vw, 1.6rem);
  z-index: 140; font-family: var(--font-sans);
}
.theme-switch__trigger {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.42rem 0.5rem; border-radius: 999px; cursor: pointer;
  background: rgba(var(--cream50-rgb), 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 10px 26px -14px rgba(var(--ink-rgb), 0.4);
  color: var(--ink);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              background .5s var(--ease), border-color .5s var(--ease);
}
.theme-switch__trigger:hover { transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 16px 34px -14px rgba(var(--ink-rgb), 0.5); }
.theme-switch__trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.theme-switch__dot {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), 0 1px 3px rgba(var(--ink-rgb),0.25);
}
.theme-switch__label {
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; padding-right: 0.35rem; white-space: nowrap;
}
.theme-switch__caret { width: 12px; height: 12px; margin-right: 0.15rem; flex: none;
  transition: transform .4s var(--ease); opacity: 0.6; }
.theme-switch[data-open="true"] .theme-switch__caret { transform: rotate(180deg); }

.theme-switch__panel {
  position: absolute; top: calc(100% + 0.55rem); left: 0;
  width: 272px; max-width: calc(100vw - 2rem);
  padding: 0.95rem; border-radius: 20px;
  display: flex; flex-direction: column; gap: 1.05rem;
  background: rgba(var(--cream50-rgb), 0.66);
  -webkit-backdrop-filter: blur(26px) saturate(185%);
  backdrop-filter: blur(26px) saturate(185%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 22px 50px -20px rgba(var(--ink-rgb), 0.5);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px) scale(0.98); transform-origin: top left;
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.theme-switch[data-open="true"] .theme-switch__panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.theme-switch__section-label {
  display: block; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); opacity: 0.75; margin-bottom: 0.6rem;
}

/* colour swatches */
.theme-switch__swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.35rem; }
.theme-switch__swatch {
  aspect-ratio: 1; border-radius: 50%; cursor: pointer; padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.14);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.5);
  transition: transform .2s var(--ease);
}
.theme-switch__swatch:hover { transform: scale(1.14); }
.theme-switch__swatch:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.theme-switch__swatch[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }

/* design options */
.theme-switch__opts { display: flex; flex-direction: column; gap: 0.1rem; }
.theme-switch__opt {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  padding: 0.5rem 0.6rem; border: none; cursor: pointer; border-radius: 10px;
  background: transparent; color: var(--charcoal);
  font-family: var(--font-sans); font-size: 0.88rem; text-align: left;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.theme-switch__opt:hover { background: rgba(var(--ink-rgb), 0.06); }
.theme-switch__opt[aria-pressed="true"] { background: rgba(var(--ink-rgb), 0.08); color: var(--ink); font-weight: 500; }
.theme-switch__opt-name { flex: 1; }
.theme-switch__opt-check { width: 15px; height: 15px; flex: none; opacity: 0; color: var(--ink); transition: opacity .25s var(--ease); }
.theme-switch__opt[aria-pressed="true"] .theme-switch__opt-check { opacity: 1; }

/* accents segmented toggle */
.theme-switch__seg { display: inline-flex; background: rgba(var(--ink-rgb), 0.07); border-radius: 999px; padding: 0.22rem; gap: 0.2rem; }
.theme-switch__seg button {
  border: none; background: transparent; cursor: pointer;
  padding: 0.4rem 1rem; border-radius: 999px; font-size: 0.8rem; color: var(--muted);
  font-family: var(--font-sans); transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.theme-switch__seg button[aria-pressed="true"] {
  background: rgba(var(--cream50-rgb), 0.95); color: var(--ink); font-weight: 500;
  box-shadow: 0 1px 3px rgba(var(--ink-rgb),0.22);
}

/* Rollen-Akzente: kompakte Zeilen (Name links, Segment rechts) */
.theme-switch__roles { display: flex; flex-direction: column; gap: 0.4rem; }
.fxrole { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.fxrole__name { font-size: 0.8rem; color: var(--charcoal-soft); }
.fxrole__seg { display: inline-flex; background: rgba(var(--ink-rgb), 0.07); border-radius: 999px; padding: 0.18rem; gap: 0.14rem; }
.fxrole__seg button {
  border: none; background: transparent; cursor: pointer;
  padding: 0.28rem 0.58rem; border-radius: 999px; font-size: 0.72rem; color: var(--muted);
  font-family: var(--font-sans); transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.fxrole__seg button[aria-pressed="true"] {
  background: rgba(var(--cream50-rgb), 0.95); color: var(--ink); font-weight: 500;
  box-shadow: 0 1px 3px rgba(var(--ink-rgb),0.22);
}
.fxrole__seg button[data-fx-val="rot"][aria-pressed="true"] { background: var(--rot); color: #fff; }
.fxrole__seg button[data-fx-val="gold"][aria-pressed="true"] { background: var(--gold-true); color: #fff; }

/* palette swatch fills — diagonal page-tint + accent */
.pal--sand    { background: linear-gradient(135deg, #F6F1E9 46%, #A8895A 46%); }
.pal--rot     { background: linear-gradient(135deg, #F7F0EC 46%, #BE3A32 46%); }
.pal--kupfer  { background: linear-gradient(135deg, #F6EFE8 46%, #B0503C 46%); }
.pal--terra   { background: linear-gradient(135deg, #F6EEE4 46%, #B5623C 46%); }
.pal--salbei  { background: linear-gradient(135deg, #EBF1E9 46%, #2E7D64 46%); }
.pal--ozean   { background: linear-gradient(135deg, #EEF2FA 46%, #2F9AD4 46%); }
.pal--nacht   { background: linear-gradient(135deg, #EDEFF3 46%, #2E5A9E 46%); }
.pal--graphit { background: linear-gradient(135deg, #EFEEEA 46%, #46586B 46%); }

/* accent swatch fills — solid accent dot (Auto shows base+accent split, Aus = mono) */
.acc--auto     { background: linear-gradient(135deg, #EFE8DB 46%, #A8895A 46%); }
.acc--messing  { background: #A8895A; }
.acc--rot      { background: #BE3A32; }
.acc--kupfer   { background: #B0503C; }
.acc--terra    { background: #B5623C; }
.acc--salbei   { background: #2E7D64; }
.acc--ozean    { background: #2F9AD4; }
.acc--petrol   { background: #2E5A9E; }
.acc--schiefer { background: #46586B; }
.acc--off      { background: #201B14; position: relative; overflow: hidden; }
.acc--off::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 45%, rgba(255,255,255,0.85) 45%, rgba(255,255,255,0.85) 55%, transparent 55%); }

@media (max-width: 640px) {
  .theme-switch__label, .theme-switch__caret { display: none; }
  .theme-switch__trigger { padding: 0.42rem; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-switch__trigger, .theme-switch__panel, .theme-switch__caret,
  .theme-switch__opt, .theme-switch__swatch, .theme-switch__seg button,
  .theme-switch__opt-check { transition: none; }
}

/* ▓▓ SEKTION: ATMOSPHÄRE (atmo) ▓▓ ═══════════════════════════════════════
   Hintergrundbild-Explorationen (additiv) · 10 Design-Varianten, ein Bild-Satz.
   Overlays/Duoton nutzen die Paletten-Variablen (var(--gold-rgb) …) und folgen
   damit dem Look-Konfigurator. Bilder: assets/bg-{hall,lounge,lobby}-{dark,light}.jpg
   ═══════════════════════════════════════════════════════════════════════ */
.atmo.section { padding: 0; position: relative; }
/* Umschalter schwebt als Overlay oben rechts über der Sektion — kein leerer Balken */
.atmo__head { position: absolute; top: 0; left: 0; right: 0; z-index: 7; display: flex; justify-content: flex-end;
  padding: clamp(4.75rem, 9vh, 6.25rem) clamp(1rem, 4vw, 2.4rem) 0; pointer-events: none; }
.atmo__head > * { pointer-events: auto; }
.atmo .vswitch-stack, .atmo .vswitch { position: static; top: auto; margin-left: 0; margin-bottom: 0; }

/* gemeinsame Serifen-Titel */
.atmo-cine__title, .atmo-split__title, .atmo-frame__title, .atmo-glass__title,
.atmo-duo__title, .atmo-parallax__title, .atmo-mag__title, .atmo-trip__title,
.atmo-quote__text, .atmo-wash__title {
  font-family: var(--font-display); font-weight: 350; line-height: 1.06; letter-spacing: -0.015em;
}

/* Innen-Rhythmus der eingefassten (nicht randlosen) Varianten */
.atmo-split, .atmo-frame, .atmo-mag { padding-block: clamp(4rem, 9vw, 7.5rem); }
.atmo-trip__head { padding-top: clamp(4rem, 9vw, 7.5rem); }
.atmo-trip { padding-bottom: clamp(4rem, 9vw, 7.5rem); }

/* ── V1 · Cinematic Full-Bleed ─────────────────────────── */
.atmo-cine {
  position: relative; isolation: isolate; display: flex; align-items: flex-end;
  min-height: clamp(30rem, 82vh, 52rem);
  background: #14100c url("assets/bg-lobby-dark.jpg") center/cover no-repeat;
}
.atmo-cine__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(10,8,6,0.88) 4%, rgba(10,8,6,0.32) 45%, rgba(10,8,6,0.10) 72%, rgba(10,8,6,0.40) 100%); }
.atmo-cine__inner { position: relative; z-index: 2; padding-block: clamp(3rem, 7vw, 6rem); }
.atmo-cine__title { color: var(--cream-50); font-size: clamp(2.4rem, 6vw, 5rem); margin: 0.5rem 0 0; }
.atmo-cine__title em { color: var(--gold); }
.atmo-cine__sub { color: rgba(var(--cream-rgb), 0.82); max-width: 46ch; margin: 1.4rem 0 2rem; font-size: clamp(1rem, 1.4vw, 1.18rem); }

/* ── V2 · Editorial-Split ──────────────────────────────── */
.atmo-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.atmo-split__title { font-size: clamp(2rem, 3.6vw, 3.4rem); color: var(--ink); margin: 0.6rem 0 0; }
.atmo-split__title em { color: var(--gold-deep); }
.atmo-split__sub { color: var(--muted); max-width: 42ch; margin: 1.3rem 0 2rem; }
.atmo-split__media { margin: 0; overflow: hidden; border-radius: 18px; box-shadow: 0 40px 80px -50px rgba(var(--ink-rgb), 0.5); }
.atmo-split__media img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; transition: transform 1.2s var(--ease); }
.atmo-split__media:hover img { transform: scale(1.04); }

/* ── V3 · Gerahmtes Bild ───────────────────────────────── */
.atmo-frame { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; }
.atmo-frame__media { position: relative; margin: 0; padding: clamp(0.7rem, 1.4vw, 1.1rem);
  background: var(--cream-50); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 50px 90px -55px rgba(var(--ink-rgb), 0.55); }
.atmo-frame__media img { width: 100%; border-radius: 3px; }
.atmo-frame__cap { position: absolute; bottom: clamp(1.1rem, 2.4vw, 1.8rem); left: clamp(1.1rem, 2.4vw, 1.8rem);
  padding: 0.35rem 0.85rem; border-radius: 999px; background: rgba(10,8,6,0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--cream-50); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; }
.atmo-frame__title { font-size: clamp(1.9rem, 3.2vw, 3rem); color: var(--ink); margin: 0.6rem 0 0; }
.atmo-frame__title em { color: var(--gold-deep); }
.atmo-frame__sub { color: var(--muted); margin-top: 1.2rem; max-width: 40ch; }

/* ── V4 · Frosted Glass über Unschärfe ─────────────────── */
.atmo-glass { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
  min-height: clamp(28rem, 74vh, 46rem); background: #14100c; }
.atmo-glass__bg { position: absolute; inset: -8%; z-index: 0; transform: scale(1.1);
  background: url("assets/bg-lounge-dark.jpg") center/cover; filter: blur(28px) brightness(0.68) saturate(1.1); }
.atmo-glass .wrap { position: relative; z-index: 1; }
.atmo-glass__card { max-width: 34rem; padding: clamp(2rem, 4vw, 3.2rem); border-radius: 24px; color: var(--cream-50);
  background: rgba(var(--cream50-rgb), 0.13); border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 40px 80px -40px rgba(0,0,0,0.62); }
.atmo-glass__card .eyebrow { color: var(--gold); }
.atmo-glass__title { font-size: clamp(1.9rem, 3.4vw, 3rem); color: var(--cream-50); margin: 0.5rem 0 0; }
.atmo-glass__title em { color: var(--gold); }
.atmo-glass__sub { color: rgba(var(--cream-rgb), 0.85); margin: 1.1rem 0 1.9rem; }

/* ── V5 · Duoton · Farbe folgt der Palette ─────────────── */
.atmo-duo { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
  min-height: clamp(26rem, 66vh, 40rem); background: #0e0b08; }
.atmo-duo__img { position: absolute; inset: 0; z-index: 0; background: url("assets/bg-hall-dark.jpg") center/cover;
  filter: grayscale(1) contrast(1.05) brightness(0.82); }
.atmo-duo__tint { position: absolute; inset: 0; z-index: 1; mix-blend-mode: multiply;
  background: linear-gradient(90deg, rgba(var(--ink-rgb),0.97) 0%, rgba(var(--ink-rgb),0.72) 32%, rgba(var(--gold-rgb),0.88) 100%); }
.atmo-duo__inner { position: relative; z-index: 2; }
.atmo-duo__title { color: var(--cream-50); font-size: clamp(2rem, 4vw, 3.6rem); margin: 0.5rem 0 0; max-width: 22ch; }
.atmo-duo__sub { color: rgba(var(--cream-rgb), 0.82); max-width: 42ch; margin-top: 1.1rem; }

/* ── V6 · Parallax-Band ────────────────────────────────── */
.atmo-parallax { position: relative; isolation: isolate; display: flex; align-items: center;
  min-height: clamp(24rem, 62vh, 38rem);
  background: #14100c url("assets/bg-hall-dark.jpg") center/cover fixed; }
.atmo-parallax__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(8,6,4,0.86) 0%, rgba(8,6,4,0.5) 55%, rgba(8,6,4,0.22) 100%); }
.atmo-parallax__inner { position: relative; z-index: 2; }
.atmo-parallax__title { color: var(--cream-50); font-size: clamp(2rem, 4.4vw, 3.8rem); margin: 0.5rem 0 0; max-width: 20ch; }
.atmo-parallax__title em { color: var(--gold); }

/* ── V7 · Magazin-Überlappung ──────────────────────────── */
.atmo-mag { position: relative; }
.atmo-mag__media { margin: 0 0 0 auto; width: 82%; overflow: hidden; border-radius: 14px; box-shadow: 0 50px 90px -50px rgba(var(--ink-rgb), 0.5); }
.atmo-mag__media img { width: 100%; aspect-ratio: 16 / 9.5; object-fit: cover; }
.atmo-mag__card { position: relative; z-index: 2; width: min(30rem, 84%); margin-top: clamp(-6rem, -7vw, -3.5rem);
  background: var(--cream-50); border: 1px solid var(--line); border-radius: 14px; padding: clamp(1.8rem, 3.5vw, 2.8rem);
  box-shadow: 0 40px 80px -50px rgba(var(--ink-rgb), 0.4); }
.atmo-mag__title { font-size: clamp(1.8rem, 3vw, 2.8rem); color: var(--ink); margin: 0.5rem 0 0; }
.atmo-mag__title em { color: var(--gold-deep); }
.atmo-mag__sub { color: var(--muted); margin: 1.1rem 0 1.6rem; }

/* ── V8 · Zitat über Bild ──────────────────────────────── */
.atmo-quote { position: relative; isolation: isolate; display: flex; align-items: center;
  min-height: clamp(26rem, 68vh, 42rem); background: #14100c url("assets/bg-lobby-dark.jpg") center/cover; }
.atmo-quote__scrim { position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(125% 105% at 50% 45%, rgba(8,6,4,0.52), rgba(8,6,4,0.84)); }
.atmo-quote__inner { position: relative; z-index: 2; max-width: 60ch; margin-inline: auto; text-align: center; border: 0; }
.atmo-quote__mark { display: block; font-family: var(--font-display); font-size: 5rem; line-height: 0.4; color: var(--gold); }
.atmo-quote__text { font-style: italic; color: var(--cream-50); font-size: clamp(1.55rem, 3.4vw, 2.7rem); line-height: 1.3; margin: 1.5rem 0 0; }
.atmo-quote__text em { color: var(--gold); font-style: italic; }
.atmo-quote__cite { margin-top: 1.6rem; color: rgba(var(--cream-rgb), 0.72); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; }

/* ── V9 · Triptychon ───────────────────────────────────── */
.atmo-trip__head { max-width: 42ch; }
.atmo-trip__title { font-size: clamp(1.9rem, 3.4vw, 3rem); color: var(--ink); margin: 0.5rem 0 0; }
.atmo-trip__title em { color: var(--gold-deep); }
.atmo-trip { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 1.6vw, 1.4rem); margin-top: clamp(1.6rem, 3.5vw, 2.6rem); }
.atmo-trip__cell { position: relative; margin: 0; overflow: hidden; border-radius: 12px; }
.atmo-trip__cell img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 1.1s var(--ease); }
.atmo-trip__cell:hover img { transform: scale(1.05); }
.atmo-trip__cell figcaption { position: absolute; inset: auto 0 0 0; padding: 2.6rem 1rem 0.95rem; text-align: center;
  color: var(--cream-50); font-family: var(--font-display); font-style: italic; font-size: 1.05rem;
  background: linear-gradient(to top, rgba(8,6,4,0.78), transparent); }

/* ── V10 · Sanfter Bild-Schleier hinter dem Inhalt ─────── */
.atmo-wash { position: relative; isolation: isolate; overflow: hidden; background: var(--cream-100); }
.atmo-wash__bg { position: absolute; inset: 0; z-index: 0; background: url("assets/bg-lobby-light.jpg") center/cover;
  opacity: 0.22; filter: blur(3px) saturate(1.05); }
.atmo-wash::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, var(--cream-100) 0%, rgba(var(--cream-rgb),0.5) 34%, rgba(var(--cream-rgb),0.5) 66%, var(--cream-100) 100%); }
.atmo-wash__inner { position: relative; z-index: 2; max-width: 44rem; text-align: center; padding-block: clamp(5rem, 12vw, 9rem); }
.atmo-wash__title { font-size: clamp(2rem, 4vw, 3.4rem); color: var(--ink); margin: 0.6rem 0 0; }
.atmo-wash__title em { color: var(--gold-deep); }
.atmo-wash__sub { color: var(--charcoal); margin: 1.3rem auto 0; max-width: 48ch; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Umschalter zurück in den Fluss (über dem Inhalt) statt Overlay — kein Text-Überlappen */
  .atmo__head { position: static; justify-content: flex-start; padding: clamp(1rem, 4vw, 1.4rem) var(--pad) 0; }
  .atmo-split, .atmo-frame { grid-template-columns: 1fr; gap: clamp(1.6rem, 5vw, 2.5rem); }
  .atmo-frame { direction: ltr; }
  .atmo-frame__media { order: -1; }
  .atmo-mag__media { width: 100%; }
  .atmo-mag__card { width: min(28rem, 100%); margin-top: clamp(-4rem, -12vw, -2.5rem); }
  .atmo-trip { grid-template-columns: 1fr; }
  .atmo-trip__cell img { aspect-ratio: 16 / 10; }
  .atmo-parallax { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
  .atmo-parallax { background-attachment: scroll; }
  .atmo-split__media img, .atmo-trip__cell img { transition: none; }
}
/* ══ PORTRAIT-BAND · Kino-Editorial ════════════════════════
   Foto vollflächig (Olivia rechts), Text im dunklen linken Bereich.
   Nur :root-Tokens → passt sich Rot/Salbei/Cristal automatisch an. */
.pband {
  position: relative;
  min-height: clamp(540px, 82svh, 880px);
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream-50);
}
.pband__media { position: absolute; inset: 0; z-index: 0; }
.pband__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 72% center;
  display: block;
}
.pband__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(var(--ink-rgb),0.92) 0%,
      rgba(var(--ink-rgb),0.80) 24%,
      rgba(var(--ink-rgb),0.34) 50%,
      rgba(var(--ink-rgb),0) 70%),
    linear-gradient(0deg,
      rgba(var(--ink-rgb),0.40) 0%,
      rgba(var(--ink-rgb),0) 32%);
}
.pband__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--wrap);
  margin-inline: auto; padding-inline: var(--pad);
}
.pband__text { max-width: 35ch; }
.pband .eyebrow--light { color: var(--gold); margin-bottom: 1.4rem; }
.pband__title {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 340;
  font-size: clamp(2.4rem, 1.5rem + 4.6vw, 5rem);
  line-height: 1.0; letter-spacing: -0.03em;
  color: var(--cream-50);
  margin-bottom: 1.5rem;
}
.pband__title em { font-style: italic; color: var(--gold); }
.pband__lead {
  max-width: 42ch;
  font-size: clamp(1.05rem, 0.98rem + 0.5vw, 1.28rem);
  line-height: 1.65;
  color: rgba(var(--cream-rgb), 0.82);
  margin-bottom: 2.2rem;
}
.pband .link-arrow { color: var(--cream-50); border-color: rgba(var(--cream-rgb), 0.3); }
.pband .link-arrow span { color: var(--gold); }
.pband .link-arrow:hover { color: var(--gold); border-color: var(--gold); }

@media (max-width: 820px) {
  .pband { min-height: clamp(460px, 76svh, 680px); align-items: flex-end; }
  .pband__media img { object-position: 74% center; }
  .pband__scrim {
    background: linear-gradient(0deg,
      rgba(var(--ink-rgb),0.94) 0%,
      rgba(var(--ink-rgb),0.72) 32%,
      rgba(var(--ink-rgb),0.32) 60%,
      rgba(var(--ink-rgb),0) 90%);
  }
  .pband__inner { padding-block: clamp(2.5rem, 9vw, 4rem); }
  .pband__text { max-width: none; }
}

/* ── PROZESS-Variante der Bande: Schritte links über dem Bild ── */
/* Fließender Farbverlauf statt harter Kante: die Bande beginnt im
   Akt-2-Braun, läuft in der Mitte in ECHTES Foto-Schwarz (nicht in den
   bräunlichen Ink-Ton — der erzeugte links neben dem Bild einen
   sichtbaren braunen Rand) und endet wieder im Braun. */
.pband--process {
  /* R26 (21.07.): Band kompakter — hatte viel Leerraum um den Inhalt */
  min-height: clamp(520px, 72svh, 760px);
  /* Kanten TRANSPARENT statt braun: Body-Farbe und Atmo-Glows laufen
     durch die Bande hindurch — kein Ton-Sprung mehr an den Grenzen */
  background: linear-gradient(180deg,
    rgba(20, 17, 14, 0) 0%,
    #14110E 42%,
    #14110E 60%,
    rgba(20, 17, 14, 0) 100%);
}
/* Foto & Scrim faden an Ober- und Unterkante der Bande vertikal aus:
   dort zeigt sich der reine Braun-Verlauf (= Body-Farbe) — keine harte
   Braun-zu-Schwarz-Kante mehr an den Sektionsgrenzen */
.pband--process .pband__media,
.pband--process .pband__scrim {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
}
/* Scrim ebenfalls im Foto-Schwarz — verschmilzt Bildränder und Bande */
.pband--process .pband__scrim {
  background:
    linear-gradient(90deg,
      rgba(16, 13, 11, 0.94) 0%,
      rgba(16, 13, 11, 0.80) 26%,
      rgba(16, 13, 11, 0.36) 52%,
      rgba(16, 13, 11, 0) 74%),
    linear-gradient(0deg,
      rgba(16, 13, 11, 0.42) 0%,
      rgba(16, 13, 11, 0) 34%);
}
.pband--process .pband__text { max-width: 44ch; }
.pband--process .pband__title { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.1rem); line-height: 1.04; margin-bottom: 1.05rem; }
.pband--process .pband__lead { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); line-height: 1.6; margin-bottom: 1.7rem; max-width: 40ch; }

/* ══ ABLAUF-Bande · Bildwechsel + Fade-Designs (eigene, unabhängige Umschalter) ══ */
/* Zwei Fotos übereinander, weiches Cross-Fade beim Umschalten */
.pband__img { opacity: 0; transition: opacity .6s var(--ease); }
.pband--process[data-img="1"] .pband__img[data-img="1"],
.pband--process[data-img="2"] .pband__img[data-img="2"] { opacity: 1; }

/* — Bild in VOLLER HÖHE statt formatfüllend beschnitten (Desktop) —
   Die Fotos sind Querformat; „cover" skaliert sie auf volle Bandbreite und
   schneidet oben/unten ab (Kopf/Beine weg) + zoomt/unschärft auf großen
   Displays. Stattdessen: natürliche Proportion, volle Bandhöhe, rechtsbündig
   — links läuft die schwarze Bande aus (Textspalte sitzt auf Schwarz).
   So bleibt Olivia komplett sichtbar und scharf. */
@media (min-width: 821px) {
  .pband--process .pband__media img {
    top: 0; right: 0; bottom: auto; left: auto;
    width: auto; height: 100%; max-width: none;
    object-fit: contain; object-position: right center;
  }
  .pband--process[data-img="2"] .pband__img[data-img="2"] { object-position: right center; }
}
@media (max-width: 820px) {
  .pband--process[data-img="2"] .pband__img[data-img="2"] { object-position: 64% 26%; }
}

/* Bild 2 hat links mehr Stadt → linke Seite per Overlay stärker abdunkeln (Text bleibt lesbar) */
.pband--process[data-img="2"] .pband__scrim {
  background:
    linear-gradient(90deg,
      rgba(var(--ink-rgb),0.97) 0%,
      rgba(var(--ink-rgb),0.90) 30%,
      rgba(var(--ink-rgb),0.46) 56%,
      rgba(var(--ink-rgb),0) 76%),
    linear-gradient(0deg,
      rgba(var(--ink-rgb),0.44) 0%,
      rgba(var(--ink-rgb),0) 34%);
}

/* Fade-Designs — alle weich gefedert (keine harte Kante); Maske auf die Bild-Ebene */
.pband--process .pband__media { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
/* 1 · Weich oben + unten (tiefere Federung — keine sichtbare Bildkante) */
.pband--process[data-fade="1"] .pband__media {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
}
/* R16 (19.07.) / R22 (20.07.): Auf Desktop steht das Foto rechts (contain).
   Die LINKE Bildkante stieß hart auf den dunklen Textbereich. R16 hatte den
   Links-Fade auf die Bande gelegt — dessen Prozente beziehen sich aber auf
   die BANDBREITE, nicht aufs Bild: je breiter der Screen, desto weiter
   rechts die Bildkante, desto weniger griff der Fade (harte Kante blieb).
   R22: Der Links-Fade liegt jetzt direkt auf dem BILD — er beginnt damit
   IMMER exakt an der Bildkante, egal wie breit der Viewport ist. */
@media (min-width: 821px) {
  .pband--process[data-fade="1"] .pband__media img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
  }
}
/* 2 · Unten weich ins Schwarz (oben voll) */
.pband--process[data-fade="2"] .pband__media {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
}
/* 3 · Oben weich, unten voll bis zur Bandkante */
.pband--process[data-fade="3"] .pband__media {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 100%);
}
/* 4 · Rundum-Vignette (oben/unten + rechte Kante) */
.pband--process[data-fade="4"] .pband__media {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%), linear-gradient(270deg, transparent 0%, #000 24%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%), linear-gradient(270deg, transparent 0%, #000 24%, #000 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
/* 5 · Weiche Ellipse um Olivia (komplett kantenlos) */
.pband--process[data-fade="5"] .pband__media {
  -webkit-mask-image: radial-gradient(130% 118% at 70% 47%, #000 50%, transparent 100%);
          mask-image: radial-gradient(130% 118% at 70% 47%, #000 50%, transparent 100%);
}

/* Umschalter oben rechts in der Bande (Bild-Reihe + Fade-Reihe) */
.pband__switch {
  position: absolute; top: clamp(1rem, 3vw, 1.5rem); right: clamp(1rem, 4vw, 2.2rem);
  z-index: 6; display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem;
}
.pband__switch .vswitch { position: static; margin: 0; }

.pband__steps { list-style: none; margin: 0; padding: 0; }
.pband__step { position: relative; display: flex; gap: 1rem; align-items: flex-start; padding-bottom: clamp(1.15rem, 2.6vw, 1.75rem); }
.pband__step:last-child { padding-bottom: 0; }
.pband__step:not(:last-child)::before {
  content: ""; position: absolute; left: 0.82rem; top: 1.95rem; bottom: 0.25rem; width: 1px;
  background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.55), rgba(var(--gold-rgb), 0.05));
}
.pband__num {
  flex: 0 0 auto; min-width: 1.7em;
  font-family: var(--font-display); font-style: italic; font-weight: 340;
  font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.7rem);
  color: var(--gold); line-height: 1.05;
}
.pband__st {
  font-family: var(--font-display); font-weight: 360;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.45rem);
  color: var(--cream-50); line-height: 1.12; margin-bottom: 0.28rem;
}
.pband__sx {
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  color: rgba(var(--cream-rgb), 0.72); line-height: 1.5; max-width: 34ch;
}
.pband__cta { margin-top: 1.9rem; }

/* Auf großen Screens läuft der Text weiter ins Bild hinein — die schwarze
   Lücke zur Person schließt sich, ohne sie je zu berühren (Feedback 17.07.,
   Runde 2: Lead und Schritt-Zeilen brechen deutlich seltener um).
   WICHTIG: muss NACH den Basis-Regeln von __text/__lead/__sx stehen (Kaskade). */
@media (min-width: 1200px) {
  .pband--process .pband__text { max-width: 66ch; }
  .pband--process .pband__lead { max-width: 64ch; }
  .pband--process .pband__sx { max-width: 60ch; }
}

@media (max-width: 820px) {
  .pband--process { min-height: auto; align-items: stretch; }
  .pband--process .pband__inner { padding-block: clamp(5.5rem, 20vw, 7rem) clamp(3rem, 10vw, 4rem); }
  /* R21 (20.07.): Olivia weiter an den rechten Bildrand gerückt — halb
     geschnitten, Gesicht noch sichtbar, Körper nicht hinter dem Text
     (Feedback: 71% war noch zu mittig). */
  .pband--process .pband__media img { object-position: 65% 33%; }
  .pband--process .pband__scrim {
    background: linear-gradient(180deg,
      rgba(var(--ink-rgb),0.60) 0%,
      rgba(var(--ink-rgb),0.80) 52%,
      rgba(var(--ink-rgb),0.92) 100%);
  }
}

/* ▓▓ MASTER-SCHALTER: Ansicht Live ↔ Dev ▓▓
   Live = finaler Stand (fester Look, keine Dev-Umschalter).
   Dev  = Spiel-/Archiv-Version mit Konfigurator + allen Varianten. */
.mode-switch {
  position: fixed;
  top: clamp(4.4rem, 8.5vh, 5.4rem);
  right: clamp(1rem, 3vw, 1.6rem);
  z-index: 150; font-family: var(--font-sans);
  display: flex; align-items: center; gap: 0.12rem;
  padding: 0.26rem 0.3rem; border-radius: 999px;
  background: rgba(var(--cream50-rgb), 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 10px 26px -14px rgba(var(--ink-rgb), 0.4);
}
/* (Das nicht klickbare „Ansicht"-Label wurde entfernt —
   der Schalter zeigt nur noch Live | Dev) */
.mode-switch__btn {
  appearance: none; -webkit-appearance: none; border: none; cursor: pointer;
  padding: 0.36rem 0.72rem; border-radius: 999px;
  font-family: var(--font-sans); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  background: transparent; color: rgba(var(--ink-rgb), 0.6);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.mode-switch__btn:hover { color: var(--ink); background: rgba(var(--ink-rgb), 0.07); }
.mode-switch__btn[aria-pressed="true"] { background: var(--gold); color: var(--cream-50); }
.mode-switch__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Live: alle Dev-Bedienelemente ausblenden */
[data-mode="live"] .theme-switch,
[data-mode="live"] .vswitch,
[data-mode="live"] .vswitch-stack,
[data-mode="live"] .interlude__bar,
[data-mode="live"] .pband__switch,
[data-mode="live"] .atmo__head { display: none !important; }

/* Dev: sticky Block-Umschalter unter den Master-Schalter schieben (kein Overlap) */
[data-mode="dev"] .vswitch-stack,
[data-mode="dev"] [data-variant-block] > .vswitch { top: clamp(7.6rem, 13vh, 9rem); }
[data-mode="dev"] .vswitch--solo { top: clamp(7.9rem, 14vh, 9.6rem); }

@media (max-width: 640px) {
  .mode-switch { gap: 0; padding: 0.22rem 0.26rem; }
  .mode-switch__btn { padding: 0.32rem 0.6rem; font-size: 0.6rem; }
}

/* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
   ONE-PAGER 2026 — Neubauten (Hero-Staccato, Statement, Methode,
   Stimmen, Über mich, Erstgespräch, FAQ, Akt-2-Dramaturgie)
   ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */

/* ── Hero: Titel & Staccato weichen Olivias Gesicht aus — die maximale
   Textbreite wird per JS aus der sichtbaren Bildgeometrie berechnet
   (CSS-Variable --hero-text-max, nur Desktop-Layout mit Overlay-Text) ── */
@media (min-width: 821px) {
  .hero__title, .hero__staccato { max-width: var(--hero-text-max, none); }
  /* Zweite Sicherung: Schriftgröße schrumpft mit, damit auch das längste
     Wort („Beziehung.") innerhalb der Textbreite bleibt statt überzulaufen */
  .hero__title { font-size: min(clamp(2.9rem, 1.6rem + 6.4vw, 6.4rem), calc(var(--hero-text-max, 999rem) / 5.2)); }
}

/* ── Über mich: schlichter Erstgespräch-Link unter dem Abschnitt ── */
.ueber__cta { margin-top: clamp(2rem, 4vw, 3rem); }
.ueber .link-arrow { color: var(--act2-ink); border-color: rgba(242,235,223,0.3); }
.ueber .link-arrow span { color: var(--gold); }
.ueber .link-arrow:hover { color: var(--gold); border-color: var(--gold); }

/* ── Hero: Staccato-Zeile unter dem Claim ── */
.hero__staccato {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 2vw, 2.3rem);
  font-weight: 380;
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: var(--charcoal-soft);
  margin: 0 0 2.2rem;
}
.hero__staccato em { font-style: italic; color: var(--gold-deep); }
/* „UND" herausgestellt: rot und fett — beides gehört zusammen,
   der Rest der Zeile bleibt ruhig */
.hero__staccato .stac-und { color: var(--gold-deep); font-weight: 680; }
/* „Beziehungscoaching" in der roten Hero-Zeile kräftiger abgesetzt */
.eyebrow strong { font-weight: 740; }

/* ── Klarheits-Statement: füllt sich beim Scrollen Wort für Wort,
   wie Tinte entlang der Lesezeile (Mechanik: [data-scrollfill] .mword,
   horizontaler Versatz pro Wort im Script) ── */
.statement__text {
  /* kein fester Rahmen: der Text nutzt die volle Wrap-Breite und
     passt sich großen Fenstern dynamisch an */
  max-width: none;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 330;
  font-size: clamp(1.55rem, 1.05rem + 2.3vw, 2.8rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}
/* Fließtext statt fester Zeilen: die Sätze laufen als ein Absatz
   durch und brechen dynamisch — keine harten Umbrüche mehr */
.statement__line { display: inline; }
.js [data-linefill] .statement__line { opacity: 0.16; }

/* ── Akzent-Wörter: rot, nicht kursiv
   (die Marker-Farbflächen sind auf Olivias Wunsch wieder raus) ── */
.accent-rot { color: var(--gold-deep); font-style: normal; }

/* ── Die Veränderung: ein prägender Satz statt Gegenüberstellung ── */
.transform__satz {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 340;
  font-size: clamp(1.7rem, 1rem + 3.2vw, 3.4rem);
  line-height: 1.28; letter-spacing: -0.02em; color: var(--ink);
  /* volle Wrap-Breite wie das Für-wen-Statement — der Satz passt sich
     dem Rahmen an, statt auf großen Screens in der Mitte zu enden */
  max-width: none; text-wrap: pretty;
}

/* ── Akt-Dramaturgie: EIN bewusster Wechsel hell → dunkel ──
   Akt 1 (Sand) läuft bis zum Pool-Bild am Ende der Veränderungs-Sektion.
   Dort (Kipppunkt) färbt sich der Seitenhintergrund weich dunkel um
   (~600ms Scroll-Morph). Sektionen in Akt 2 tragen data-act="2" und
   sind dunkel-nativ gestaltet — bis zum Seitenende. */
:root {
  --act2-bg: #251E16;
  --act2-ink: #F2EBDF;
  --act2-muted: rgba(242, 235, 223, 0.62);
  --act2-line: rgba(242, 235, 223, 0.16);
}
body { transition: background-color 0.6s var(--ease); }
body.act2 { background-color: var(--act2-bg); }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }
/* Scroll-gebundener Verlauf statt Umschalt-Sprung: --actmix (0 = hell,
   1 = dunkel) wird in script.js beim Scrollen gesetzt, während das
   Pool-Bild durch den Viewport wandert — auch beim Hochscrollen fließend */
@supports (background: color-mix(in srgb, red 50%, blue)) {
  body, body.act2 {
    transition: none;
    background-color: color-mix(in srgb, var(--act2-bg) calc(var(--actmix, 0) * 100%), var(--cream-100));
  }
}

/* ── Atmosphäre im dunklen Akt: EIN durchgehender, fixer Licht-Layer
   statt Glows pro Sektion (deren Beschnitt an den Abschnittsgrenzen
   erzeugte sichtbare Kanten). Zwei sehr subtile Farbimpulse — Nachtblau
   und Kupferrot — wandern langsam über den ganzen Screen; der Layer
   blendet über --actmix ein und existiert nur in der dunklen Hälfte. */
.act-atmo {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
  opacity: var(--actmix, 0);
}
.act-atmo::before, .act-atmo::after {
  content: ""; position: absolute; border-radius: 50%;
  width: 62vmax; height: 62vmax;
}
.act-atmo::before {
  left: -14vmax; top: -20vmax;
  background: radial-gradient(circle, rgba(99, 130, 165, 0.15), transparent 65%);
  animation: atmo-blau 30s ease-in-out infinite alternate;
}
.act-atmo::after {
  right: -18vmax; bottom: -22vmax;
  background: radial-gradient(circle, rgba(var(--gold-rgb), 0.14), transparent 65%);
  animation: atmo-rot 38s ease-in-out infinite alternate;
}
/* dritter Impuls: das rote Pulsieren, das vorher nur hinter
   „Eine Frage vorab" lag — jetzt Teil der ganzen dunklen Hälfte */
.act-atmo__glow {
  position: absolute; left: 50%; top: 64%;
  width: 66vmax; height: 66vmax; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(var(--gold-rgb), 0.13), transparent 62%);
  animation: atmo-puls 11s ease-in-out infinite;
}
@keyframes atmo-puls {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.75; }
  50%      { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}
@keyframes atmo-blau {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(10vmax, 8vmax, 0) scale(1.16); }
}
@keyframes atmo-rot {
  from { transform: translate3d(0, 0, 0) scale(1.12); }
  to   { transform: translate3d(-9vmax, -7vmax, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .act-atmo::before, .act-atmo::after, .act-atmo__glow { animation: none; }
}

/* ── Die Entscheidung: Ohne/Mit-Gegenüberstellung vor dem Erstgespräch —
   links die nüchterne Ist-Liste auf dem dunklen Grund, rechts der
   Gewinn im hellen Kasten (gleiche Sprache wie der Über-mich-Kasten) ── */
.entscheidung__head { max-width: 62rem; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.entscheidung__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 4rem);
  /* beide Bubbles gleich hoch */
  align-items: stretch;
}
@media (max-width: 899.98px) { .entscheidung__grid { grid-template-columns: 1fr; gap: 1.6rem; } }
.entscheidung__label {
  /* Überschriften-Stil statt Eyebrow (Feedback 17.07.): Display-Schrift,
     deutlich größer — trägt die Spalte wie eine echte Zwischenüberschrift */
  font-family: var(--font-display); font-weight: 380;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  letter-spacing: -0.01em; line-height: 1.15;
  color: var(--act2-ink); margin-bottom: 1.3rem;
}
.entscheidung__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.95rem;
}
.entscheidung__liste li {
  display: flex; gap: 0.85rem; align-items: baseline;
  color: var(--act2-muted); line-height: 1.55;
}
.entscheidung__liste li span {
  /* schwere Glyphen (✖/✔) + volleres Kupfer: die Zeichen kommen raus */
  flex: 0 0 auto; font-size: 0.9em;
  color: rgba(var(--gold-rgb), 0.75);
}
/* linke Spalte: schlichte Bubble in gleicher Größe — nur eine ruhige
   Kontur, kein Grund, kein Schatten (Feedback R11: einheitliches Paar) */
.entscheidung__ohne {
  border: 1px solid var(--act2-line);
  border-radius: 1.6rem;
  padding: clamp(1.5rem, 3vw, 2.4rem);
}
/* rechte Spalte: der Gewinn — liegt als Blase sichtbar AUF dem Grund
   (hellerer Füllton, kräftig gestaffelter Schatten) */
.entscheidung__mit {
  background: rgba(var(--cream-rgb), 0.075);
  border: 1px solid rgba(var(--gold-rgb), 0.45);
  border-radius: 1.6rem;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  box-shadow:
    0 14px 30px -16px rgba(0, 0, 0, 0.55),
    0 42px 90px -40px rgba(0, 0, 0, 0.75);
}
.entscheidung__mit .entscheidung__label { color: var(--gold); }
.entscheidung__mit .entscheidung__liste li { color: var(--act2-ink); }
.entscheidung__mit .entscheidung__liste li span { color: var(--gold); font-size: 1em; }
/* Conclusion unter der Mit-Coaching-Liste: der Coaching-Aspekt
   bekommt eine ruhige, klare Schlusszeile in der Karte */
.entscheidung__conclusion {
  margin-top: 1.2rem; padding-top: 1.1rem;
  border-top: 1px solid rgba(var(--gold-rgb), 0.25);
  color: var(--act2-ink); font-size: 1rem;
}
.entscheidung__conclusion em {
  /* „professionelle Zusammenarbeit" hell auf Kupfer-Pille statt rotem Text
     (Feedback 17.07.: ging als Rot-Ton unter) — clone lässt die Pille bei
     Zeilenumbruch sauber auf beiden Zeilen weiterlaufen */
  font-style: normal; color: rgb(var(--cream50-rgb));
  background: var(--gold);
  padding: 0.14em 0.55em; border-radius: 999px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.entscheidung__schluss {
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
  font-family: var(--font-display); font-weight: 340;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.9rem);
  letter-spacing: -0.01em;
  color: var(--act2-ink);
}
.entscheidung__schluss em { font-style: italic; color: var(--gold); }

/* Helle Sektionen sind opak im Seiten-Beige: der Hell-Dunkel-Verlauf
   des Hintergrunds kann sie damit NIE einfärben — Programme & Co.
   bleiben beim Scrollen in beide Richtungen konstant hell.
   (Manifest und Veränderung tragen ihr Beige bereits selbst.) */
.statement, .prob, .audience-neu, .methode,
.zruf:not([data-act="2"]) { background-color: var(--cream-100); }

/* Die Veränderung endet bündig mit dem Pool-Bild: kein Beige-Streifen
   zwischen Bild-Unterkante und den dunklen Stimmen */
.transform.section { padding-bottom: 0; }

/* Pool-Bild als Kipppunkt: bleibt farbig (Abendlicht als Pattern
   Interrupt), bekommt aber einen leichten dunklen Tonal-Schleier,
   der es an den Akt-2-Hintergrund anbindet. */
.interlude--in-transform { position: relative; }
/* Haarlinien-Fix: die GPU-skalierte Bild-Ebene (Drift-Animation) kann
   an der Oberkante des Interludes eine dünne dunkle Kante durchschimmern
   lassen — diese schmale Cream-Blende deckt die Naht deterministisch ab */
.interlude--in-transform::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 4px;
  background: var(--cream-100); z-index: 3; pointer-events: none;
}
.interlude--in-transform::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  z-index: 2; /* über den Varianten-Scrims (1), unter dem Text (3) */
  background:
    linear-gradient(to bottom,
      rgba(37, 30, 22, 0) 56%,
      rgba(37, 30, 22, 0.26) 84%,
      rgba(37, 30, 22, 0.95) 96%,
      rgb(37, 30, 22) 100%);
}

/* ── Akt-2-Sektionen: dunkel-native Grundfarben ── */
[data-act="2"] { color: var(--act2-ink); }
[data-act="2"] :is(h2, h3, h4), [data-act="2"] .section-title { color: var(--act2-ink); }
[data-act="2"] .section-title em { color: var(--gold); }

/* Newsletter (Impuls) im dunklen Akt: eigener Cream-Grund entfällt */
.guide[data-act="2"] { background: transparent; }
.guide[data-act="2"] .guide__text p:not(.eyebrow) { color: var(--act2-muted); }
.guide[data-act="2"] .guide__note { color: rgba(242, 235, 223, 0.5); }
.guide[data-act="2"] .guide__form input { border-color: rgba(242, 235, 223, 0.25); }

/* Tinte-Buttons invertieren im dunklen Akt (sonst dunkel auf dunkel) */
[data-act="2"] .btn:not(.btn--glass):not(.btn--ghost) {
  --bg: var(--cream-50); --fg: var(--ink);
  background: var(--cream-50); color: var(--ink); border-color: var(--cream-50);
}
:root[data-fx-cta="neutral"] [data-act="2"] .btn:not(.btn--glass):not(.btn--ghost) {
  --bg: var(--cream-50); --fg: var(--ink);
  background: var(--cream-50); color: var(--ink); border-color: var(--cream-50);
}

/* ── Stimmen: EIN Testimonial-Marquee (Glas-Pills, Sandton, dunkler Akt) ──
   Langsames Endlos-Band (~52s), Hover pausiert, weiches Ausfädeln an den
   Rändern, KEINE Kupferkontur. reduced-motion → statisches Grid. */
.voices-band { overflow: hidden; }
.voices-band__discretion {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: rgba(242, 235, 223, 0.55);
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.voices-band__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.voices-band__track {
  display: flex; align-items: stretch; gap: clamp(0.9rem, 2vw, 1.4rem);
  width: max-content; list-style: none; padding-block: 0.4rem;
  animation: voices-scroll 52s linear infinite;
}
/* Band läuft immer weiter — kein Hover-Stopp mehr (Olivias Wunsch);
   manuelles Schieben über die Pfeil-Buttons */
.voices-band { position: relative; }
.voices-band__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 2.7rem; height: 2.7rem; border-radius: 50%;
  display: grid; place-items: center; padding: 0;
  background: rgba(var(--cream-rgb), 0.08);
  border: 1px solid rgba(var(--cream-rgb), 0.32);
  color: var(--cream-50); font-size: 1.05rem; line-height: 1; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.voices-band__arrow:hover { background: rgba(var(--cream-rgb), 0.2); border-color: rgba(var(--cream-rgb), 0.6); }
.voices-band__arrow--prev { left: clamp(0.9rem, 2.5vw, 2rem); }
.voices-band__arrow--next { right: clamp(0.9rem, 2.5vw, 2rem); }
@media (prefers-reduced-motion: reduce) { .voices-band__arrow { display: none; } }
@keyframes voices-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.voice-pill {
  /* Zitate sitzen vertikal mittig in der Bubble (Feedback 17.07., Runde 2 —
     oben bündig sah mit dem Leerraum unten nicht gut aus); Luft oben/unten bleibt */
  display: flex; flex-direction: column; justify-content: center; gap: 0.55rem;
  max-width: 24rem; padding: 1.9rem 2rem;
  border-radius: 2.2rem;
  background: rgba(var(--sand-rgb), 0.13);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(var(--cream-rgb), 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.voice-pill blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem);
  font-weight: 360; line-height: 1.45;
  color: var(--act2-ink);
}
.voice-pill__who {
  font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(242, 235, 223, 0.5);
}
.voice-pill__ph {
  font-style: normal; font-size: 0.68rem; letter-spacing: 0.06em;
  text-transform: none; color: rgba(242, 235, 223, 0.38);
  margin-left: 0.6em;
}
@media (prefers-reduced-motion: reduce) {
  .voices-band__track { animation: none; flex-wrap: wrap; width: auto; }
  .voices-band__viewport { -webkit-mask-image: none; mask-image: none; }
}

/* Pool-Interlude bündig an die Unterkante der Veränderungs-Sektion ziehen:
   kompensiert das Section-Padding, damit das Bild direkt in Akt 2 mündet. */
.interlude--in-transform {
  margin-top: clamp(0.75rem, 1.8vw, 1.4rem);
  margin-bottom: calc(-1 * var(--sec));
}

/* ── Methode: Intro, Themen-Chips, Sticky-Kapitel, Tools, Rahmendaten ── */
.methode__intro { max-width: 46rem; }
.methode__statement {
  margin-top: 1.5rem;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.65; color: var(--charcoal-soft);
}

.methode__topics {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.8rem 1.4rem; margin-top: clamp(2.2rem, 4vw, 3.2rem);
}
.methode__topics-label {
  font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; }
.chip {
  font-size: 0.84rem; padding: 0.5em 1.15em; border-radius: 999px;
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--cream50-rgb), 0.65); color: var(--charcoal-soft);
}

/* „So arbeiten wir": feste Timeline. Die Schritte stehen dauerhaft an ihren
   Stationen; nur die Kupfer-Linie füllt sich beim Scrollen und aktiviert
   die Nummern-Kreise. Kein Pinnen, kein Ein-/Ausblenden. */
.msteps { margin-top: clamp(2.5rem, 5vw, 4rem); position: relative; }
.msteps__body { position: relative; z-index: 1; }
/* R22 (20.07.): Der Schritt-Text lief seitlich ÜBER die Fassade (Feedback).
   Sobald die Fassade sichtbar ist (≥1080px), endet die Textspalte vor dem
   sichtbaren Bildbereich — nur der komplett ausgefadete Bildrand darf noch
   unter den Text ragen. (R24: an die kleinere Fassade angepasst.) */
@media (min-width: 1080px) {
  .msteps__body { padding-right: clamp(250px, 26vw, 480px); }
}
/* ── „So arbeiten wir": Carlton-Fassade als bildliche Haltung rechts —
   eine ovale Maske lässt das Foto weich in den Seitengrund verlaufen,
   statt als hartes Rechteck zu stehen (nur breite Viewports) ── */
.msteps__fassade {
  display: none; margin: 0; pointer-events: none;
  /* R31 (21.07.): wieder GROSS und raumgreifend, aber UNTEN am „So arbeiten
     wir"-Block verankert (nicht mehr mittig). Dadurch wächst sie auf großen
     Frames nach OBEN (darf das Statement streifen) statt nach unten in die
     Programme. So ragt sie NIE in die Pakete, egal wie breit der Frame ist. */
  position: absolute; bottom: 0; top: auto;
  /* klebt hart am rechten Bildschirmrand */
  right: calc(-1 * var(--pad));
  width: clamp(380px, 36vw, 680px);
  z-index: 0;
  /* Multiply: das helle Himmel-Weiß verschmilzt mit dem Beige der Seite */
  mix-blend-mode: multiply;
  opacity: 0.92;
}
@media (min-width: 1080px) { .msteps__fassade { display: block; } }
.msteps__fassade img {
  /* natürliche Proportion (hochkant): volle Höhe, keine Beschnitt-Maske,
     keine ovale Linse — nur lineares Ausfaden nach links, oben und unten */
  display: block; width: 100%; height: auto;
  /* R22: Links-Fade endet früher (80 % statt 92 %) — die linke Bildzone ist
     komplett durchsichtig, damit nichts mehr hinter dem Text durchscheint */
  -webkit-mask-image: linear-gradient(to left, #000 28%, transparent 80%),
                      linear-gradient(180deg, transparent 0%, #000 30%, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to left, #000 28%, transparent 80%),
                      linear-gradient(180deg, transparent 0%, #000 30%, #000 72%, transparent 100%);
          mask-composite: intersect;
}
/* Die Pakete unter der Timeline bleiben über dem auslaufenden Bild */
.methode__block { position: relative; z-index: 1; }
.msteps__line {
  position: absolute; top: 1.3rem; bottom: 1.3rem; left: 1.3rem;
  width: 2px; transform: translateX(-50%);
  background: rgba(var(--ink-rgb), 0.12); border-radius: 2px;
}
.msteps__fill {
  position: absolute; top: 0; left: 0; width: 100%; height: 0%;
  background: var(--gold); border-radius: 2px;
}
.msteps__list {
  list-style: none;
  display: flex; flex-direction: column;
  /* R28 (21.07.): enger gestapelt — die Schritte brauchten zu viel Höhe
     (langes Scrollen), bleiben aber angenehm luftig (nicht gequetscht). */
  gap: clamp(1.4rem, 3vw, 2.2rem);
}
.msteps__item {
  display: grid; grid-template-columns: 2.6rem 1fr;
  gap: clamp(1.3rem, 3.5vw, 2.6rem); align-items: start;
}
.msteps__node {
  position: relative; z-index: 1;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em;
  background: var(--cream-50); border: 1px solid rgba(var(--ink-rgb), 0.16);
  color: var(--muted);
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.msteps__node.is-active {
  border-color: var(--gold); color: var(--gold-deep);
  box-shadow: 0 0 0 4px rgba(var(--gold-rgb), 0.16);
}
/* R24: vierter, OPTIONALER Schritt (Partner-Paket) — gestrichelter Kreis
   mit „+" statt Nummer signalisiert: gehört dazu, ist aber freiwillig */
.msteps__node--opt { border-style: dashed; font-size: 1rem; font-weight: 400; }
.msteps__content h4 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.2rem);
  /* R28: weniger Lücke zwischen Überschrift und Text */
  margin: 0.1rem 0 0.3rem; color: var(--ink);
}
.msteps__content p {
  /* R28 (21.07.): kleiner + ruhiger als zuvor (war zu groß und nahm zu viel
     Platz). KEINE max-width-Begrenzung mehr — die zwang den Text auf breiten
     Screens in eine zweite Zeile mit Einzelwort. Jetzt passt jeder Schritt
     (außer ggf. dem Partner-Schritt) auf eine Zeile; text-wrap verhindert
     Schusterjungen, falls doch umgebrochen wird. */
  font-size: clamp(0.95rem, 0.85rem + 0.45vw, 1.1rem);
  line-height: 1.5; color: var(--charcoal-soft);
  text-wrap: pretty;
}
/* R22 (20.07.): Kernwörter in den Schritt-Texten fett und dunkler abgesetzt —
   gleiche Mechanik wie .ueber__copy strong, nur für den hellen Grund */
.msteps__content p strong { font-weight: 600; color: var(--ink); }

.methode__block { margin-top: clamp(3.5rem, 7vw, 6rem); }
.methode__block > h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem);
  margin-bottom: 1.6rem; color: var(--ink);
}
.mtools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; list-style: none; }
@media (max-width: 819.98px) { .mtools { grid-template-columns: 1fr; } }
.mtool {
  border: 1px solid var(--line-soft); border-radius: 1.4rem;
  padding: 1.6rem 1.7rem; background: rgba(var(--cream50-rgb), 0.55);
}
.mtool h4 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--ink); }
.mtool p { font-size: 0.95rem; color: var(--muted); }
.mfacts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem 2.6rem; }
@media (max-width: 640px) { .mfacts { grid-template-columns: 1fr; } }
.mfacts > div { border-top: 1px solid var(--line); padding-top: 0.9rem; }
.mfacts dt {
  font-size: 0.74rem; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 0.35rem;
}
.mfacts dd { font-size: 1.02rem; color: var(--charcoal); }

/* ── Zwischenrufe: kurze Ein-Satz-Blöcke mit CTA ── */
/* Einheitliche linke Kante: Zwischenrufe folgen dem Standard-Wrap */
.zruf { padding-block: clamp(3.5rem, 8vw, 6.5rem); text-align: left; }
.zruf__line {
  font-family: var(--font-display); font-weight: 350;
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 3rem);
  letter-spacing: -0.015em; color: var(--ink); margin-bottom: 1.4rem;
}
.zruf__line em { font-style: italic; color: var(--gold-deep); }
.zruf[data-act="2"] .zruf__line { color: var(--act2-ink); }
.zruf[data-act="2"] .zruf__line em { color: var(--gold); }
.zruf[data-act="2"] .link-arrow { color: var(--act2-ink); }

/* ── Über mich: Portrait + verschmolzene Story + Credentials + Video-Reserve ── */
.ueber__grid {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center;
}
@media (max-width: 819.98px) { .ueber__grid { grid-template-columns: 1fr; } }
.ueber__media { position: relative; }
.ueber__media img {
  border-radius: 1.6rem; width: 100%;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.55);
}
.ueber__copy {
  color: var(--act2-muted); margin-top: 1.1rem;
  /* R17: fluide Schriftgröße (vw) — skaliert stufenlos mit dem Viewport */
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.2rem); line-height: 1.68;
  /* keine feste Maximalbreite: der Text füllt den Kasten und wächst/
     schrumpft mit ihm — die Zeilenlänge begrenzt die Kasten-Spalte */
  max-width: none;
  /* Blocksatz OHNE Silbentrennung (Feedback 17.07.: keine Wörter
     mitten im Wort über Bindestrich trennen) */
  text-align: justify; hyphens: manual; -webkit-hyphens: manual;
}
/* Kernwörter im Fließtext: fett und hell abgesetzt */
.ueber__copy strong { font-weight: 600; color: var(--cream-50); }
.ueber__creds {
  list-style: none; margin-top: 2rem;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2rem;
}
/* R22 (20.07.): nur noch 3 Credentials (Master Coach + ICF verschmolzen) —
   auf Desktop eine ausgewogene Dreierreihe statt 2+1 mit Loch */
@media (min-width: 900px) { .ueber__creds { grid-template-columns: repeat(3, 1fr); gap: 1rem 1.6rem; } }
@media (max-width: 540px) { .ueber__creds { grid-template-columns: 1fr; } }
.ueber__creds li { border-top: 1px solid var(--act2-line); padding-top: 0.8rem; }
.ueber__creds strong { display: block; font-size: 0.95rem; font-weight: 600; color: var(--act2-ink); }
.ueber__creds span { font-size: 0.85rem; color: var(--act2-muted); }
.ueber__video {
  margin-top: 2.2rem; display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.4rem; border-radius: 1.2rem;
  border: 1px dashed rgba(242, 235, 223, 0.3); color: var(--act2-muted);
  font-size: 0.9rem;
}
.ueber__play {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.7rem;
  background: rgba(var(--sand-rgb), 0.15); border: 1px solid rgba(242, 235, 223, 0.25);
}

/* ── So starten wir: Kreisschluss-Satz ── */
.pband__circle {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem);
  color: rgba(var(--cream-rgb), 0.88);
  margin-top: 1.8rem; max-width: 44ch;
}

/* ── Erstgespräch: Konversions-Sektion ── */
.erstg__inner { max-width: 46rem; margin-inline: auto; text-align: center; }
.erstg__inner .section-title { margin-inline: auto; }
.erstg__facts {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.6rem; margin-top: 1.8rem;
}
.erstg__facts li {
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.55em 1.2em; border-radius: 999px;
  border: 1px solid var(--act2-line); color: var(--act2-ink);
  background: rgba(var(--sand-rgb), 0.1);
}
.erstg__honest {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
  color: var(--act2-ink); margin-top: 2.2rem;
}
.erstg__scarcity { color: var(--act2-muted); margin-top: 1rem; max-width: 48ch; margin-inline: auto; }
.erstg__cta { margin-top: 2.4rem; }
.erstg__ctanote { margin-top: 0.9rem; font-size: 0.78rem; color: rgba(242, 235, 223, 0.45); }

/* ── FAQ im dunklen Akt ── */
.faq-neu__grid {
  display: grid; grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
@media (max-width: 819.98px) { .faq-neu__grid { grid-template-columns: 1fr; } }
.faq-neu .faq__item { border-bottom: 1px solid var(--act2-line); }
.faq-neu .faq__item summary { color: var(--act2-ink); }
/* R26 (21.07.): FAQ-Antworten im Blocksatz über die volle Spaltenbreite
   (bis zur Trennlinie links↔rechts), nicht mittig gestoppt */
.faq-neu .faq__item p {
  color: var(--act2-muted); max-width: none;
  text-align: justify; text-justify: inter-word;
  hyphens: manual; -webkit-hyphens: manual;
}
.faq-neu .faq__icon::before, .faq-neu .faq__icon::after { background: rgba(242, 235, 223, 0.7); }

/* ── Navbar-CTA „Erstgespräch": Feinschliff (Glas bleibt Glas) ── */
.nav__cta {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(var(--ink-rgb), 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 8px 20px -12px rgba(var(--ink-rgb), 0.25);
}
.nav__cta:hover { transform: translateY(-1px); }
.nav--dark .nav__cta {
  background: rgba(var(--cream-rgb), 0.12);
  border-color: rgba(var(--cream-rgb), 0.4);
}

/* ── Signature-Moves: Parallax-Easing, Lichtreflex, Zeilen-Reveal,
   sich zeichnende Overlines, S/W-Pool-Option ── */

/* Weiches Nachziehen der Parallax-Transforms (nur Desktop aktiv) */
.hero__media img, .hero__cta { transition: transform 0.7s var(--ease); will-change: transform; }
.hero__cta .btn { transition-property: background, color, border-color, transform, box-shadow; }

/* Lichtreflex, der über den Hero-Glass-Button wandert */
.hero .btn--glass::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: linear-gradient(105deg,
    transparent calc(var(--shine-x, 50%) - 14%),
    rgba(255, 255, 255, 0.38) var(--shine-x, 50%),
    transparent calc(var(--shine-x, 50%) + 14%));
  opacity: 0.85;
  transition: background 0.2s linear;
}

/* Zeilenweises Headline-Reveal (Zeilen aus <br>-Segmenten, JS-gestützt) */
.rline { display: block; overflow: hidden; }
.rline__in {
  display: inline-block; transform: translateY(112%);
  transition: transform 0.85s var(--ease);
  transition-delay: calc(var(--l, 0) * 130ms);
}
[data-reveal].in-view .rline__in { transform: none; }

/* Overlines „zeichnen sich" beim Erscheinen: Linie wächst, Bold-Pill wischt auf */
.eyebrow[data-reveal]::before { width: 0; transition: width 0.7s var(--ease) 0.1s; }
.eyebrow[data-reveal].in-view::before { width: 2.2rem; }
:root[data-design="bold"] .eyebrow[data-reveal] {
  clip-path: inset(0 100% 0 0 round 999px);
  transition: clip-path 0.7s var(--ease) 0.1s;
}
:root[data-design="bold"] .eyebrow[data-reveal].in-view { clip-path: inset(0 0 0 0 round 999px); }

/* S/W-Version des Pool-Bilds (Panel-Option; Standard = farbig) */
.interlude[data-pool="sw"] .interlude__media img { filter: grayscale(1); }

@media (prefers-reduced-motion: reduce) {
  .hero__media img, .hero__cta { transition: none; }
  .hero .btn--glass::after { display: none; }
  .rline__in { transform: none; transition: none; }
  .eyebrow[data-reveal]::before { width: 2.2rem; transition: none; }
  :root[data-design="bold"] .eyebrow[data-reveal] { clip-path: none; transition: none; }
}

/* ── Feedback-Runde Olivia (2026-07-10) ── */

/* Mobile-Menü: Links als Bubbles mit wandernder Hover-Linie */
.mobile-menu__links a:not(.btn) {
  position: relative; width: fit-content;
  padding: 0.45em 1.25em; border-radius: 999px;
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  background: rgba(var(--cream50-rgb), 0.72);
}
.mobile-menu__links a:not(.btn)::after {
  content: ""; position: absolute; left: 1.25em; right: 100%; bottom: 0.42em;
  height: 1.5px; background: var(--gold);
  transition: right 0.35s var(--ease);
}
.mobile-menu__links a:not(.btn):hover::after,
.mobile-menu__links a:not(.btn):focus-visible::after { right: 1.25em; }

/* Lichtreflex wandert jetzt über den schwarzen Hero-CTA */
.hero__cta .btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg,
    transparent calc(var(--shine-x, 50%) - 12%),
    rgba(255, 255, 255, 0.2) var(--shine-x, 50%),
    transparent calc(var(--shine-x, 50%) + 12%));
}

/* ── Für wen: kompaktes Editorial-Statement, einspaltig — das
   Dinner-Portrait schwebt als Kreis-Medaillon im Zwischenruf darüber.
   Die Lücke nach oben ist bewusst knapper als vorher. */
.audience-neu.section { padding-block: clamp(2rem, 4vw, 3rem); }

/* ── Zwischenruf mit Medaillon: die rechte Spalte ist per Padding für
   den Kreis reserviert (Text kann nie darunter laufen), das Padding
   unten hält zusätzlich die Lücke zum Für-wen-Abschnitt frei. Der
   Kreis liegt komplett innerhalb der Sektion → berührt nie Text. */
.zruf--medaillon {
  --medl: clamp(180px, 20vw, 320px);
  position: relative;
  padding-bottom: calc(var(--medl) * 0.55 + clamp(2rem, 4vw, 3.5rem));
}
.zruf--medaillon .wrap {
  padding-right: calc(var(--medl) + clamp(2.5rem, 7vw, 8rem));
}
/* Sehr schmal: Text volle Breite, der Kreis rutscht ganz in die
   reservierte Lücke unter dem CTA */
@media (max-width: 639.98px) {
  .zruf--medaillon .wrap { padding-right: var(--pad); }
  /* R18 (19.07.): keine große Platz-Reservierung mehr nötig, das Medaillon
     fließt jetzt normal unter dem Text (s. Regel nach .zruf__medaillon img) */
  .zruf--medaillon { padding-bottom: clamp(2rem, 7vw, 3rem); }
}
.zruf__medaillon {
  margin: 0; position: absolute;
  right: clamp(1.5rem, 6vw, 7rem);
  /* R22 (20.07.): tiefer gerückt — saß zu nah an den Bekannt-vor-Karten;
     jetzt mittig in der Lücke zwischen Karten und Für-wen-Text. Der Kreis
     wächst mit dem Viewport (--medl) und frisst oben Platz, deshalb wandert
     bottom auf breiten Screens leicht ins Negative (vermessen: 0 bei 1380,
     ca. -23px bei ≥1680 → mittig). */
  bottom: clamp(-24px, calc((1380px - 100vw) / 13), 0px);
  width: var(--medl); aspect-ratio: 1 / 1;
  border-radius: 50%; overflow: hidden;
  /* R20 (19.07.): dezenter, enger Schlagschatten statt großem weichem Halo
     (Feedback: der 64px-Schatten wirkte wie ein zweiter großer Kreis).
     Kleiner Blur + leichter Offset nach unten = natürlicher Schatten, kein Ring. */
  box-shadow: 0 8px 18px -10px rgba(var(--ink-rgb), 0.35);
  z-index: 2;
}
/* Liquid-Glass-Anmutung: Lichtreflex oben links, innere Schattenkante
   unten — der Kreis wirkt wie eine aufgelegte Glasblase, nicht wie ein
   umrandeter Avatar */
.zruf__medaillon::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(130% 130% at 30% 18%, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.1) 26%, rgba(255, 255, 255, 0) 44%),
    radial-gradient(120% 120% at 72% 96%, rgba(20, 17, 14, 0.28) 0%, rgba(20, 17, 14, 0) 46%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.4),
    inset 0 -16px 30px -14px rgba(20, 17, 14, 0.45);
}
.zruf__medaillon img {
  display: block; width: 100%; height: 100%;
  /* nah an der Person: Zoom + Fokus tiefer — Kleid und Schulter
     sichtbar, weniger Hintergrund über dem Kopf */
  object-fit: cover; object-position: 50% 58%;
  transform: scale(1.35); transform-origin: 50% 58%;
}
/* R18 (19.07.): Auf dem Handy war das Medaillon absolut positioniert und
   hat den Text der Für-wen-Sektion zur Hälfte überdeckt. Jetzt liegt es im
   normalen Textfluss UNTER dem CTA, kleiner und zentriert — nie über Text.
   (Steht bewusst NACH der Basis-Regel, damit die Handy-Regel gewinnt.) */
@media (max-width: 639.98px) {
  .zruf__medaillon {
    position: static;
    right: auto; bottom: auto;
    width: clamp(120px, 42vw, 168px);
    margin: 1.8rem auto 0;
    /* R21 (20.07.): auf dem Handy KEIN Schatten und KEINE Glas-Blase mehr —
       der weiche Schatten wirkte als störender großer Kreis. Nur der reine
       runde Bildausschnitt, flach auf der Fläche. */
    box-shadow: none;
  }
  .zruf__medaillon::after { display: none; }
}

/* Für wen: kompaktes Editorial-Statement — einheitliche linke Kante
   (Kupfer-Kante und Einrückung entfernt, Breite liegt am Text selbst) */
.audience-neu__statement {
  max-width: none;
  font-family: var(--font-display); font-weight: 340;
  font-size: clamp(1.55rem, 1.05rem + 2.4vw, 2.8rem);
  line-height: 1.35; letter-spacing: -0.015em; color: var(--ink);
  margin-top: 1.2rem;
  text-wrap: pretty;
}
.audience-neu__statement em { font-style: italic; color: var(--gold-deep); }
.audience-neu__sub {
  margin-top: 1.3rem; color: var(--charcoal-soft); max-width: none;
  /* wächst/schrumpft mit dem Viewport wie die großen Statements
     (Feedback R11); R29 (21.07.): als Blocktext über die volle Breite */
  font-size: clamp(1rem, 0.86rem + 0.6vw, 1.32rem);
  line-height: 1.6; text-align: justify;
}

/* Pakete: Beziehungscode · Hauptpaket · Partner-Sessions */
.pakete { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; align-items: stretch; }
@media (max-width: 819.98px) { .pakete { grid-template-columns: 1fr; } }
.paket {
  display: flex; flex-direction: column; gap: 0.7rem;
  border: 1px solid var(--line-soft); border-radius: 1.6rem;
  padding: 1.9rem 1.8rem; background: rgba(var(--cream50-rgb), 0.55);
}
.paket--main {
  border-color: rgba(var(--gold-rgb), 0.55);
  background: rgba(var(--gold-rgb), 0.07);
  box-shadow: 0 20px 44px -26px rgba(var(--gold-rgb), 0.5);
}
/* Partner-Paket: hell, aber mit dünnem rotem Rahmen als Paket-Marker */
.paket--rand { border-color: rgba(var(--gold-rgb), 0.55); }
.paket__tag {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--gold-deep);
}
.paket h4 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.65rem); color: var(--ink); }
.paket p { font-size: clamp(0.9rem, 0.85rem + 0.28vw, 1.05rem); color: var(--charcoal-soft); }
.paket__ph { margin-top: auto; font-size: 0.76rem; color: var(--muted); }
/* R24 (20.07.): ausführliche Paket-Inhalte — Subline, Intro, Leistungs-Bullets
   und ein Abschluss-Satz, der über margin-top:auto an der Kartenunterkante
   ausgerichtet ist (gleiche Höhe über alle drei Karten) */
.paket__sub { font-weight: 600; color: var(--ink); }
.paket__list { list-style: none; display: grid; gap: 0.65rem; margin: 0.35rem 0 0.4rem; }
.paket__list li {
  position: relative; padding-left: 1.05rem;
  font-size: clamp(0.88rem, 0.83rem + 0.26vw, 1rem);
  line-height: 1.55; color: var(--charcoal-soft);
}
.paket__list li::before {
  content: ""; position: absolute; left: 0; top: 0.58em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-deep);
}
.paket__list strong { font-weight: 600; color: var(--ink); }
.paket__out {
  margin-top: auto; padding-top: 0.95rem;
  border-top: 1px solid rgba(var(--gold-rgb), 0.3);
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.12rem);
  line-height: 1.5; color: var(--ink);
}

/* ═══ R27 (21.07., Olivias Richtung): Alle drei Pakete UNTEREINANDER, jeweils
   im Band-Layout — links Kicker + Foto-Banner mit Titel darauf, rechts der
   Text; jedes Paket durch einen langen roten Strich getrennt (wie zuvor nur
   das Partner-Band). Ersetzt das frühere Nebeneinander von Essential +
   Signature (Feedback: zu kompakt/unübersichtlich). ═══ */
/* Eigener Präfix `prow`, um NICHT mit dem Erstgespräch-Band (.pband/.pband__*)
   zu kollidieren. */
.prow { padding-top: 1.1rem; border-top: 2px solid rgba(var(--gold-rgb), 0.55); }
.prow + .prow { margin-top: clamp(2.6rem, 5vw, 4rem); }
/* R35 (21.07.): Kicker wieder als Kupfer-Pille (weißer Text). Eigene Gruppe:
   alle drei gleich breit, an der längsten orientiert (--kicker-w), Text
   zentriert. */
.prow > .paket__tag {
  display: inline-flex; align-items: center; justify-content: center;
  width: fit-content; min-width: var(--kicker-w, auto);
  background: var(--gold); color: var(--cream-50);
  padding: 0.6em 1.4em; border-radius: 999px;
  font-size: 0.86rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; line-height: 1;
  box-shadow: 0 10px 22px -12px rgba(var(--gold-rgb), 0.6);
  margin-bottom: 1rem;
}
/* links Bild-Band, rechts der Text — Schwerpunkt auf dem Text (2/5 Bild, 3/5 Text).
   R29 (21.07.): mehr Luft zwischen Bild und Textbeginn (klebte zu nah). */
.prow__grid {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(2.8rem, 6vw, 5.5rem); align-items: start;
}
/* Foto-Banner mit Titel darauf — heller Text + Scrim für Lesbarkeit.
   R34 (21.07.): deutlich schlanker (~50% Höhe raus) — nur ein dünner Streifen,
   der Fokus liegt auf dem Text, nicht auf den (recht vollen) Bildern. */
.prow__banner {
  position: relative; overflow: hidden;
  border-radius: 0.9rem; height: clamp(128px, 12.5vw, 168px);
  display: flex; align-items: flex-end;
  background: linear-gradient(150deg, var(--gold-deep) 0%, var(--ink) 92%);
  box-shadow: 0 20px 44px -30px rgba(var(--ink-rgb), 0.6);
}
.prow__banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prow__banner-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(20,17,14,0.82) 0%, rgba(20,17,14,0.32) 42%, rgba(20,17,14,0) 72%);
}
.prow__title {
  position: relative; z-index: 1; margin: 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.4rem, 1.15rem + 1vw, 2.05rem); line-height: 1.1;
  color: var(--cream-50); text-wrap: balance;
  padding: clamp(1rem, 2.6vw, 1.5rem);
  text-shadow: 0 1px 16px rgba(20, 17, 14, 0.55);
}
/* Body rechts: Subline schwarz + fett, dann Intro, Bullets, Pull-Quote, CTA.
   Feedback 21.07.: mehr Luft überall + Bullets in der GLEICHEN Größe/Textart
   wie der Einleitungssatz (Intro), nur die Labels bleiben fett. */
.prow .paket__sub {
  color: var(--ink); font-weight: 700;
  /* R38 (21.07.): Sublines 1–2 Punkte größer */
  font-size: clamp(1.12rem, 1.0rem + 0.45vw, 1.42rem); line-height: 1.35;
  margin: 0 0 1.5rem;
}
/* R30 (21.07.): Textbereich als KOMPAKTER Blocksatz, der rechts NICHT bis an
   den Rand läuft — die letzten ~12% bleiben Weißraum (padding-right am Body).
   Bild bleibt bei 40% (Grid-Ratio unverändert). */
.prow__body { padding-right: clamp(2rem, 12vw, 13rem); }
.prow .paket__intro {
  font-size: clamp(0.94rem, 0.88rem + 0.3vw, 1.1rem);
  line-height: 1.65; color: var(--charcoal-soft);
  text-align: justify; text-wrap: pretty;
}
.prow .paket__intro strong { font-weight: 600; color: var(--ink); }
/* Bullets: gleiche Schriftgröße/Zeilenhöhe wie das Intro (Blocksatz).
   R32 (21.07.): zwischen den Punkten KOMPAKT (reine Info-Liste), Abstand zum
   Intro darüber bleibt. */
.prow .paket__list { margin: 1.5rem 0 0; gap: 0.55rem; }
.prow .paket__list li {
  font-size: clamp(0.94rem, 0.88rem + 0.3vw, 1.1rem); line-height: 1.65;
  text-align: justify;
}
/* Abschluss-Satz als Pull-Quote — kupferne Kante links, mehr Luft nach oben */
.prow .paket__out {
  margin-top: 2.4rem; padding: 0.15rem 0 0.15rem 1.2rem;
  border-top: none; border-left: 3px solid var(--gold-deep);
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.28rem); line-height: 1.45;
  color: var(--ink);
}
/* R37 (21.07.): CTA als Ghost-Button wieder LINKS UNTER DEM BILD (der Button
   unter dem Zitat machte den Textblock zu lang). Schlicht, mit Kontur. */
.prow__cta { margin-top: 1.1rem; }
.prow__btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.78em 1.6em; border-radius: 999px;
  border: 1px solid rgba(var(--gold-rgb), 0.55);
  color: var(--gold-deep); background: transparent;
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; line-height: 1;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.prow__btn span { transition: transform 0.35s var(--ease); }
.prow__btn:hover { background: var(--gold-deep); color: var(--cream-50); border-color: var(--gold-deep); }
.prow__btn:hover span { transform: translateX(3px); }
/* Mobil: Bild über den Text, etwas höher für den Titel; kein rechter Weißraum */
@media (max-width: 819.98px) {
  .prow__grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .prow__banner { height: auto; aspect-ratio: 16 / 8; }
  .prow__body { padding-right: 0; }
}

/* Stimmen: sachliche Fußnote unter dem Band */
.voices-band__note {
  margin-top: 1.8rem; font-size: 0.78rem; letter-spacing: 0.04em;
  color: rgba(242, 235, 223, 0.42);
}

/* ── Über mich: Leitsatz als Überschrift über Kasten und Bild ── */
.ueber__head { max-width: 62rem; margin-bottom: clamp(1.8rem, 4vw, 3rem); }

/* ── Über mich: Text im Kasten, Lounge-Portrait daneben —
   das Foto überlappt die Kastenkante leicht (Premium-Feel) ── */
.ueber__grid {
  display: grid;
  /* Text bekommt deutlich mehr Raum, das Foto tritt zurück
     (R22: Foto weiter verkleinert — nahm zu viel Platz ein).
     R23: Foto-Spalte hart GEDECKELT (20rem) statt fr-Anteil — auf sehr
     breiten Screens wuchs das Foto unbegrenzt mit und wurde größer als
     der Text-Kasten. 20vw entspricht bei 1380px exakt dem alten
     0.45fr-Anteil (Foto 320px, R22-Abnahme), ab ~1600px bleibt das Foto
     stehen (vermessen: auch auf 3440er-Ultrawide unter der Kastenhöhe). */
  grid-template-columns: minmax(0, 1fr) clamp(13rem, 20vw, 20rem);
  align-items: center;
  /* kein Spaltenabstand — die Überlappung entsteht über den negativen
     Rand des Fotos; ein geerbter Gap würde sie sonst auffressen */
  column-gap: 0;
}
.ueber__card {
  position: relative; z-index: 1;
  background: rgba(var(--cream-rgb), 0.045);
  border: 1px solid var(--act2-line);
  border-radius: 1.8rem;
  padding: clamp(1.8rem, 4vw, 3.2rem);
  /* rechts mehr Innenabstand: dort schiebt sich das Foto über den Kasten */
  padding-right: clamp(2.4rem, 6vw, 5rem);
  box-shadow: 0 34px 70px -42px rgba(0, 0, 0, 0.65);
}
.ueber__foto {
  position: relative; z-index: 2;
  margin: 0 0 0 clamp(-3rem, -3.2vw, -1.4rem);
}
/* schwebend aufgelegt: gestaffelte weiche Schatten, feine helle Kante */
.ueber__foto img {
  display: block; width: 100%; height: auto;
  border-radius: 1.4rem;
  box-shadow:
    0 10px 22px -12px rgba(0, 0, 0, 0.55),
    0 34px 60px -30px rgba(0, 0, 0, 0.7),
    0 70px 120px -50px rgba(0, 0, 0, 0.8);
  outline: 1px solid rgba(255, 255, 255, 0.07);
  outline-offset: -1px;
}
@media (max-width: 899.98px) {
  .ueber__grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .ueber__card { padding-right: clamp(1.8rem, 4vw, 3.2rem); }
  /* unter dem Kasten deutlich kleiner — das Foto ist hier Beigabe,
     kein zweiter Vollformat-Block (Feedback R11; R22: weiter verkleinert) */
  .ueber__foto { margin: 0; max-width: 15rem; }
}

/* Pool-Übergänge: oben nahtlos aus dem Seiten-Beige (cream-100 statt cream-50),
   unten weicher und mit weniger Bildabdeckung (Füße bleiben sichtbar) */
.interlude--in-transform .interlude__scrim--dawn {
  /* Oben: nahtlos aus dem Seiten-Beige, und das Bild taucht früh auf —
     keine große leere Lücke unter dem Veränderungs-Satz.
     Unten: das Foto fadet weich ins Akt-2-Braun aus. */
  background: linear-gradient(to bottom,
    var(--cream-100) 0%,
    var(--cream-100) 2%,
    rgba(var(--cream-rgb), 0.85) 8%,
    rgba(var(--cream-rgb), 0.4) 16%,
    rgba(var(--cream-rgb), 0.1) 23%,
    rgba(var(--cream-rgb), 0) 30%,
    rgba(37, 30, 22, 0) 72%,
    rgba(37, 30, 22, 0.6) 90%,
    var(--act2-bg) 100%);
}

/* ── Feedback-Runde 2 ── */

/* Platzhalter-Hinweis in den Paket-Karten: dezent statt weißer Kästen */
.paket__ph {
  width: fit-content; padding: 0.4em 1em;
  border: 1px dashed rgba(var(--ink-rgb), 0.28);
  border-radius: 999px; font-style: italic;
}

/* Veränderungs-Buckets kompakter: schmaler und mit weniger Innenraum */
.tf1__rows { max-width: 44rem; margin-inline: 0; gap: 0.6rem; }
.tf1__row { padding: 0.85rem clamp(1.2rem, 2.4vw, 1.8rem); }

/* ── Feedback-Runde 4 ── */

/* Programme: Intro-Zeile unter der Bubble */
.programme__lead {
  /* volle Textbreite wie der übrige Fließtext — passt sich dem Rahmen an
     (Feedback 17.07.: keine ch-Deckelung mehr) */
  margin: 1.3rem 0 2.2rem; max-width: none;
  font-size: clamp(1rem, 0.82rem + 0.75vw, 1.42rem);
  line-height: 1.65; color: var(--charcoal-soft);
}
/* R22 (20.07.): Kernwörter im Programme-Lead fett und dunkler abgesetzt —
   gleiche Mechanik wie .msteps__content p strong (heller Grund) */
.programme__lead strong { font-weight: 600; color: var(--ink); }

/* Erstgespräch-Elemente in der Rooftop-Bande: linksbündig statt zentriert */
.pband .erstg__facts { justify-content: flex-start; margin-top: 2rem; }
.pband .erstg__scarcity { margin-inline: 0; }
.pband .erstg__honest { color: rgba(var(--cream-rgb), 0.92); }
.pband .erstg__scarcity { color: rgba(var(--cream-rgb), 0.62); }
.pband .erstg__ctanote { color: rgba(var(--cream-rgb), 0.5); }

/* Über mich: Platz-Reserve für Zertifikat/Logo */
.ueber__zert {
  margin-top: 1.6rem; padding: 0.9rem 1.3rem; width: fit-content;
  border: 1px dashed rgba(242, 235, 223, 0.3); border-radius: 1rem;
  color: var(--act2-muted); font-size: 0.85rem; font-style: italic;
}

/* ── Engerer vertikaler Rhythmus (Feedback Olivia) ──
   Weniger Luft zwischen den Abschnitts-Blöcken im Live-Design (Bold).
   R26 (21.07.): nochmal ~1/3 enger (mehrere Abschnitte waren zu luftig,
   u. a. Lücke unter Partner-Paket und vor FAQ). */
:root[data-design="bold"] { --sec: clamp(2.2rem, 4vw, 3.5rem); }
.zruf { padding-block: clamp(2rem, 4.5vw, 3.6rem); }
.methode__block { margin-top: clamp(2.6rem, 5vw, 4.2rem); }
.msteps { margin-top: clamp(2rem, 4vw, 3.2rem); }

/* ══ EINHEITLICHES STATEMENT-FORMAT (Feedback R10) ═══════════
   Gleiche Schriftart, Größe und Zeilenabstand für alle großen
   Zwischensätze — Farben bleiben je Kontext (hell: ink/kupfer,
   dunkel: weiß/kupfer). Referenz: Für-wen-Statement. */
.audience-neu__statement, .zruf__line, .transform__satz,
.ueber__head .section-title {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 340;
  font-size: clamp(1.55rem, 1.05rem + 2.4vw, 2.8rem);
  line-height: 1.42; letter-spacing: -0.015em;
}
/* .manifest__text ist seit 17.07. bewusst raus aus der Liste:
   die Haltungs-Bubble läuft eine Stufe kleiner (Regel bei .manifest__text) */
/* Bold-Design setzt section-title sonst auf 500 — der Über-mich-Leitsatz
   soll aber im Statement-Gewicht bleiben */
:root[data-design="bold"] .ueber__head .section-title,
:root[data-design="bold"] .ueber__head .section-title em { font-weight: 340; }

/* ══ FEEDBACK-RUNDE 11 ═══════════════════════════════════════
   Engerer Anschluss Stimmen → Entscheidung: der braune Leerraum
   zwischen Marquee und „Deine Entscheidung" war fast zwei volle
   Sektionspolster hoch. */
.voices-band.section { padding-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.entscheidung.section { padding-top: clamp(1.4rem, 3vw, 2.4rem); }

/* Pool-Interlude schmaler: weniger Bandhöhe, und der knappere
   Ausschnitt nimmt das Bild von OBEN weg (schwarzer Himmel) —
   Pool, Liegen und Skyline bleiben. Nur das Live-Interlude,
   das Dev-Archiv behält seine volle Höhe. */
.interlude--in-transform .interlude__content { min-height: clamp(22rem, 62svh, 40rem); }
.interlude--in-transform .interlude__media img { object-position: 50% 72%; }

/* EIN Kupferton für alles (Entscheidung Aurelian, R11): Live fährt
   nur noch den hellen Kupfer #B0503C — Flächen UND Textakzente.
   Das Dev-Archiv behält seine Zwei-Ton-Logik. */
:root[data-mode="live"] {
  --gold-deep: var(--gold);
  --gold-deep-rgb: var(--gold-rgb);
}

/* Wortmarke „Olivia Wald": etwas größer und kräftiger, Nav-Zeile
   selbst bleibt gleich hoch */
.nav__brand { font-size: 1.85rem; font-weight: 520; }

/* Unterlängen-Fix (Feedback R11: abgeschnittenes „g" in „Beziehung
   neu denken"): line-height 1.04 war enger als die Glyphen-Tinte —
   etwas mehr Zeilenluft + Mini-Polster fängt die Unterlängen ein */
.section-title { line-height: 1.1; padding-bottom: 0.06em; }
.modal__title { line-height: 1.12; }

/* ── Anfrage-Modal: Vorname/Nachname als Bubble-Paar, darunter der
   Calendly-Prototyp (Direkt-Buchung) mit „oder"-Trenner ── */
.modal__form .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
@media (max-width: 419.98px) { .modal__form .frow { grid-template-columns: 1fr; } }

/* Breiteres Fenster, EINE Ansicht: Kontaktfelder oben (zweispaltig),
   Nachricht und Terminwahl in voller Breite darunter — der Kalender
   erscheint im selben Fenster, nichts wird ausgeblendet. */
.modal__panel { width: min(920px, 100%); }
@media (min-width: 760px) {
  .modal__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.85rem 1.5rem;
    align-items: start;
  }
  .modal__form > .frow { grid-column: 1; }
  .modal__form > .field--email { grid-column: 2; }
  .modal__form > .field--msg,
  .modal__form > .modal__booking { grid-column: 1 / -1; }
  .modal__form .field--msg textarea { min-height: 72px; }
}

/* Terminwahl als Pflichtblock im Formular: dezent gerahmt wie ein
   großes Eingabefeld, damit sie als Teil des einen Flows liest */
.modal__booking {
  padding: 0.9rem 1.1rem 0.7rem;
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.35);
}
.modal__booking-note {
  font-size: 0.8rem; color: var(--charcoal-soft);
  margin-bottom: 0.9rem;
}

/* Zwei-Klick-Hinweis (DSGVO): das Cal.com-Embed lädt erst nach dem
   „Weiter zur Terminwahl"-Klick — dieser Text erklärt das vorab */
.cal-consent {
  font-size: 0.78rem; line-height: 1.6; color: var(--muted);
}
.cal-consent a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }

/* Buchungs-Modal ohne eigenes Formular: der Kalender bringt seine
   eigene Optik mit — kein Feldrahmen, kompakter Kopf */
.modal__booking { border: none; background: none; padding: 0; }
.modal .modal__lead { margin-bottom: 0.9rem; }
.cal-consent { margin-top: 0.7rem; }
.cal-embed { min-height: 500px; }
.cal-fallback { margin-top: 0.7rem; font-size: 0.78rem; color: var(--muted); }
.cal-fallback a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }

/* Newsletter-PS in der Bestätigung */
.modal__ps { margin-top: 1.1rem; font-size: 0.85rem; color: var(--muted); }
.modal__ps a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }