/* ============================================================
   FETAI · SALON
   Der gemeinsame Look aller Landingpages. Wird als letzte Datei
   geladen und liegt damit über fetai-styles.css und über dem
   seiteneigenen Stilblock. Wer hier etwas ändert, ändert es auf
   allen Seiten zugleich.

   1 · Die Schaltflächen
   2 · Der Raum: Stuckkante, Tageslicht, Rahmen im Rahmen
   3 · Die Goldrahmen
   4 · Der Atem der Bilder
   5 · Der Seitenkopf: von Creme in tiefe Jade
   ============================================================ */

/* ---------- 1 · DIE SCHALTFLÄCHEN ----------
   Eine einzige Schaltfläche für die ganze Website: Versalien in der
   Grotesk, weit gesperrt, immer dieselbe Größe. Beim Rübergehen wie
   beim Anspringen mit der Tabulatortaste geht sofort das Gold auf –
   Schrift, Linie und ein weicher Schein ringsum. Bewegt wird nichts
   außer dem Pfeil. */
.cta-primary, .cta-outline, .cta-quiet,
button.cta-primary, a.cta-primary, input.cta-primary {
  font-family: var(--ui);
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.2em;
  line-height: 1.35;
  gap: 13px;
  padding: 19px 40px;
  border-radius: var(--radius);
  text-align: center;
  cursor: pointer;
  outline: none;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease),
              background-color 0.4s var(--ease), box-shadow 0.5s var(--ease);
}
/* Die Sperrung setzt hinter den letzten Buchstaben eine Lücke.
   Die nehmen wir wieder heraus, damit die Schrift mittig steht. */
.cta-primary > span, .cta-outline > span, .cta-quiet > span {
  letter-spacing: inherit; margin-right: -0.2em;
}
.cta-primary svg, .cta-outline svg, .cta-quiet svg {
  transition: transform 0.5s var(--ease), opacity 0.4s ease; opacity: 0.8;
}

/* Der Tastaturweg: dieselbe goldene Antwort wie die Maus, nur ohne
   Zögern. Wer mit der Tabulatortaste kommt, sieht sofort, wo er steht. */
.cta-primary:focus-visible, .cta-outline:focus-visible, .cta-quiet:focus-visible {
  transition-duration: 0.1s, 0.1s, 0.1s, 0.14s;
}

/* Auf Creme: Jadeschrift, goldene Linie */
.cta-primary {
  border: 1px solid var(--border-gold);
  background: transparent;
  color: var(--tief, #16261d);
}
/* Beim Rübergehen und beim Anspringen mit der Tastatur füllt sich die
   Fläche mit Gold. Das ist unmissverständlich und auf hellem wie auf
   grünem Grund gleich gut lesbar. */
.cta-primary:hover, .cta-primary:focus-visible,
.cta-outline:hover, .cta-outline:focus-visible,
.page-hero .cta-primary:hover, .page-hero .cta-primary:focus-visible,
[data-tone="dark"] .cta-primary:hover, [data-tone="dark"] .cta-primary:focus-visible,
.dl-section .cta-primary:hover, .dl-section .cta-primary:focus-visible,
.areas-section .cta-primary:hover, .areas-section .cta-primary:focus-visible,
.cta-primary.solid:hover, .cta-primary.solid:focus-visible,
.menue-fuss .cta-primary:hover, .menue-fuss .cta-primary:focus-visible {
  color: #1b2f22;
  border-color: #e8d2a4;
  background: linear-gradient(180deg, #f0dcb0 0%, #e0c896 42%, #cdae74 100%);
  box-shadow: 0 0 0 1px rgba(232,210,164,0.55),
              0 0 38px -6px rgba(224,200,150,0.8),
              0 14px 34px -18px rgba(163,132,74,0.6);
}
.cta-primary:focus-visible, .cta-outline:focus-visible, .cta-primary.solid:focus-visible {
  box-shadow: 0 0 0 1px rgba(232,210,164,0.7), 0 0 0 5px rgba(201,169,110,0.34),
              0 0 38px -6px rgba(224,200,150,0.85);
}
/* Auf Jade trägt dieselbe Schaltfläche in Ruhe das helle Gold */
.page-hero .cta-primary, [data-tone="dark"] .cta-primary,
.dl-section .cta-primary, .areas-section .cta-primary {
  color: var(--gold-bright); border-color: rgba(201,169,110,0.62);
}
.cta-primary:hover svg, .cta-outline:hover svg, .cta-quiet:hover svg,
.cta-primary:focus-visible svg, .cta-outline:focus-visible svg, .cta-quiet:focus-visible svg {
  opacity: 1; transform: translateX(4px);
}
.cta-primary::after, .cta-outline::after, .cta-quiet::after { content: none; }

/* Die massive Fassung bleibt in Ruhe Jade */
.cta-primary.solid, .page-hero .cta-primary.solid, [data-tone="dark"] .cta-primary.solid {
  background: var(--forest); border-color: var(--forest); color: var(--cream);
}

/* Auf Jade: helle Goldlinie, helle Goldschrift */
.cta-outline {
  border: 1px solid rgba(201,169,110,0.62);
  background: transparent;
  color: var(--gold-bright);
}

/* Steht die Linienfassung auf Creme, trägt sie das dunklere Gold */
.prose-section:not(.dark) .cta-outline, .faq-section .cta-outline,
.sib-section .cta-outline, .ask-section .cta-outline, .shot .cta-outline {
  color: var(--gold-deep); border-color: var(--border-gold);
}
.prose-section:not(.dark) .cta-outline:hover, .prose-section:not(.dark) .cta-outline:focus-visible,
.faq-section .cta-outline:hover, .faq-section .cta-outline:focus-visible,
.sib-section .cta-outline:hover, .sib-section .cta-outline:focus-visible,
.ask-section .cta-outline:hover, .ask-section .cta-outline:focus-visible {
  color: #7f622c; border-color: rgba(201,169,110,1); background: rgba(201,169,110,0.15);
  box-shadow: 0 0 0 1px rgba(201,169,110,0.38), 0 12px 32px -16px rgba(163,132,74,0.55);
}

.cta-quiet {
  border: 0; padding: 14px 0; color: var(--gold-deep); background: none;
}
.cta-quiet:hover, .cta-quiet:focus-visible { color: var(--forest); background: none; }
.cta-quiet:focus-visible { box-shadow: 0 2px 0 0 var(--gold); }
.page-hero .cta-quiet, [data-tone="dark"] .cta-quiet { color: var(--gold-bright); }
.page-hero .cta-quiet:hover, .page-hero .cta-quiet:focus-visible,
[data-tone="dark"] .cta-quiet:hover, [data-tone="dark"] .cta-quiet:focus-visible { color: #fbf1dc; }

/* Auf dem Telefon liegt auch der Startseitenkopf auf Jade.
   Und das Zahlenband unter dem Kopf bricht auf zwei Spalten um,
   damit die längeren Beschriftungen Platz finden. */
@media (max-width: 900px) {
  .cta-primary, .cta-outline { padding: 17px 30px; }
  .hero-strip-inner { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero-strip-cta { grid-column: 1 / -1; }
  .hero-stat { min-width: 0; }
  .hero-stat b { font-size: 30px; }
  .hero-stat span, .hero-stat small, .hero-stat p { overflow-wrap: break-word; hyphens: none; }
  .hero .cta-primary { color: var(--gold-bright); border-color: rgba(201,169,110,0.62); }
  .hero .cta-primary:hover, .hero .cta-primary:focus-visible {
    color: #fbf1dc; border-color: rgba(232,210,164,0.95); }
  .hero .cta-primary.solid { color: var(--cream); }
  .hero .cta-quiet { color: var(--gold-bright); }
  /* Der Startseitenkopf steht am Telefon auf Jade: der Spruch braucht helle Schrift */
  .hero .hero-claim { color: rgba(255,255,255,0.84); }
  .hero .hero-claim::before { background: linear-gradient(90deg, var(--gold), transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-primary:hover svg, .cta-outline:hover svg, .cta-quiet:hover svg,
  .cta-primary:focus-visible svg, .cta-outline:focus-visible svg, .cta-quiet:focus-visible svg {
    transform: none; }
}

/* ---------- 2 · DER RAUM ----------
   Drei Griffe aus dem Salon: die Stuckkante als Profil aus Gold,
   Schatten und Licht an jeder Naht. Das Tageslicht, das von links
   oben über jede helle Fläche fällt. Und der Rahmen im Rahmen,
   eine Haarlinie innen in jeder Karte. */
.aeo-section, .prose-section, .shot, .faq-section, .sib-section, .ask-section,
.trust-strip, .areas-section, .facts-section, .dl-section { position: relative; }
.aeo-section::before, .prose-section::before, .shot::before,
.faq-section::before, .sib-section::before, .ask-section::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(201,169,110,0.32) 0 1px,
    rgba(28,26,21,0.055) 1px 2px,
    rgba(255,253,249,0.85) 2px 3px);
}
.prose-section.dark::before, .areas-section::before, .facts-section.dark::before, .dl-section::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(201,169,110,0.4) 0 1px,
    rgba(0,0,0,0.28) 1px 2px,
    rgba(201,169,110,0.10) 2px 3px);
}
.prose-section:not(.dark), .faq-section, .sib-section, .ask-section, .shot, .aeo-section {
  background-image: radial-gradient(128% 92% at 5% -12%,
    rgba(255,249,235,0.9) 0%, rgba(255,249,235,0.34) 34%, rgba(255,249,235,0) 62%);
}
.aeo-item, .hy-myth, .author-card, .hy-calc, .pick, .sib-card, .tl-step,
.facts-table, .cmp-wrap, .zone-table { position: relative; }
.aeo-item::after, .hy-myth::after, .author-card::after, .hy-calc::after,
.pick::after, .sib-card::after, .tl-step::after {
  content: ''; position: absolute; inset: 5px; border: 1px solid rgba(201,169,110,0.15);
  border-radius: 1px; pointer-events: none;
}
.sib-card.current::after { border-color: rgba(224,200,150,0.24); }

/* ---------- 3 · DIE GOLDRAHMEN ----------
   Nach den Bildern im Salon: ein profiliertes Band mit feiner
   Kreuzrippung, Lichtkante oben, Schattenfuge unten, innen der Falz.
   Beim Rübergehen tritt der Rahmen vor die Wand. */
.shot-frame, .zone-frame, .dl-frame, .op-img-wrap, .portrait-frame,
.author-card .photo, .faq-portrait, .reel-card {
  background:
    repeating-linear-gradient(46deg, rgba(232,210,164,0.15) 0 1.5px, rgba(232,210,164,0) 1.5px 5px),
    repeating-linear-gradient(-46deg, rgba(5,18,13,0.2) 0 1.5px, rgba(5,18,13,0) 1.5px 5px),
    linear-gradient(180deg, rgba(246,233,206,0.16) 0 2px, rgba(246,233,206,0) 2px),
    linear-gradient(158deg, #315444 0%, #1d3a2c 34%, #12271c 66%, #0a1a13 100%);
  border: 1px solid rgba(201,169,110,0.46);
  box-shadow:
    inset 0 1px 0 rgba(246,233,206,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    inset 1px 0 0 rgba(246,233,206,0.12),
    inset -1px 0 0 rgba(0,0,0,0.34),
    0 1px 0 rgba(255,253,249,0.55),
    0 16px 34px -20px rgba(5,18,13,0.7);
  transition: box-shadow 0.55s var(--ease), transform 0.55s var(--ease),
              border-color 0.4s ease;
}
.shot-frame { padding: 17px; }
.op-img-wrap, .portrait-frame, .faq-portrait { padding: 14px; }
.zone-frame, .dl-frame { padding: 12px; }
.shot-frame::before, .zone-frame::before, .dl-frame::before, .op-img-wrap::before,
.portrait-frame::before, .faq-portrait::before {
  content: ''; position: absolute; inset: 10px; border: 1px solid rgba(214,186,132,0.66);
  border-radius: 1px; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.42), 0 0 0 1px rgba(246,233,206,0.10);
}
.shot-frame:hover, .op-img-wrap:hover, .portrait-frame:hover, .faq-portrait:hover, .dl-frame:hover {
  transform: translateY(-5px);
  border-color: rgba(232,210,164,0.78);
  box-shadow:
    inset 0 1px 0 rgba(250,240,216,0.42),
    inset 0 -1px 0 rgba(0,0,0,0.6),
    inset 1px 0 0 rgba(250,240,216,0.18),
    inset -1px 0 0 rgba(0,0,0,0.4),
    0 1px 0 rgba(255,253,249,0.6),
    0 34px 60px -26px rgba(5,18,13,0.86),
    0 0 0 1px rgba(201,169,110,0.22);
}
.zone-frame:hover {
  border-color: rgba(232,210,164,0.7);
  box-shadow:
    inset 0 1px 0 rgba(250,240,216,0.38),
    inset 0 -1px 0 rgba(0,0,0,0.58),
    0 1px 0 rgba(255,253,249,0.6),
    0 30px 54px -24px rgba(5,18,13,0.82);
}

/* ---------- 4 · DER ATEM DER BILDER ----------
   Ein Zoom über 26 Sekunden um 3,6 Prozent, hin und zurück. Er läuft
   auf der eigenen Eigenschaft scale und liegt damit neben der
   bildlaufgetriebenen Wanderung auf translate, ohne sie zu
   überschreiben. Die Zonenkarte atmet nicht, dort sind Koordinaten
   am Bild festgemacht. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .shot-frame img, .op-img-wrap img, .portrait-frame img,
    .author-card .photo img, .faq-portrait img {
      scale: 1.09;
      animation-name: shotDrift, bildAtem;
      animation-timeline: view(), auto;
      animation-range: entry 0% exit 100%, normal;
      animation-duration: auto, 26s;
      animation-timing-function: linear, cubic-bezier(0.42, 0, 0.58, 1);
      animation-iteration-count: 1, infinite;
      animation-direction: normal, alternate;
      animation-fill-mode: both, none;
      will-change: translate, scale;
    }
    @keyframes shotDrift { from { translate: 0 -2.4%; } to { translate: 0 2.4%; } }
    @keyframes bildAtem { from { scale: 1.09; } to { scale: 1.126; } }
    .shot--strip .shot-frame img { animation-delay: 0s, -9s; }
    .author-card .photo img { animation-delay: 0s, -17s; }
    .op-img-wrap img { animation-delay: 0s, -5s; }
    .shot-frame:hover img, .op-img-wrap:hover img, .portrait-frame:hover img {
      animation-play-state: running, paused; }
    .page-hero-photo img, .hero-photo {
      animation-name: heroSink, heroAtem;
      animation-timeline: view(), auto;
      animation-range: exit 0% exit 100%, normal;
      animation-duration: auto, 34s;
      animation-timing-function: linear, cubic-bezier(0.42, 0, 0.58, 1);
      animation-iteration-count: 1, infinite;
      animation-direction: normal, alternate;
      animation-fill-mode: both, none;
    }
    @keyframes heroSink { from { translate: 0 0; } to { translate: 0 2.6%; } }
    @keyframes heroAtem { from { scale: 1; } to { scale: 1.045; } }
    .section-header::after, .aeo-head::after, .prose-block h3::after,
    .prose-side .overline::before, .facts-head .overline::before,
    .dl-head .overline::before, .ask-text .overline::before {
      animation: drawSeal linear both; animation-timeline: view(); animation-range: entry 12% entry 88%; }
    @keyframes drawSeal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
    @media (max-width: 760px) {
      @keyframes shotDrift { from { translate: 0 -3.2%; } to { translate: 0 3.2%; } }
      .hero-stat, .trust-item, .aeo-item {
        animation: liftIn linear both; animation-timeline: view(); animation-range: entry 0% entry 62%; }
      @keyframes liftIn { from { opacity: 0.15; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .shot-frame, .zone-frame, .dl-frame, .op-img-wrap, .portrait-frame { transition: box-shadow 0.3s ease; }
  .shot-frame:hover, .op-img-wrap:hover, .portrait-frame:hover, .faq-portrait:hover, .dl-frame:hover { transform: none; }
}

/* ---------- 5 · DER SEITENKOPF ----------
   Oben fällt Licht in Creme herein, nach unten geht es über Salbei in
   tiefe Jade, bis das Band darunter die Fläche schließt. Die Maske
   hält den Verlauf von der Fotoseite fern. */
.page-hero { position: relative; }
.page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(250,247,239,0.97) 0%,
    rgba(248,245,236,0.95) 8%,
    rgba(238,238,226,0.78) 13%,
    rgba(206,216,203,0.50) 17%,
    rgba(150,176,158,0.26) 21%,
    rgba(92,127,105,0.11) 25%,
    rgba(38,71,55,0.035) 31%,
    rgba(10,26,19,0) 44%,
    rgba(7,20,15,0.15) 70%,
    rgba(5,17,12,0.47) 88%,
    rgba(4,14,10,0.78) 100%);
  -webkit-mask-image: linear-gradient(96deg, transparent 19%, rgba(0,0,0,0.30) 33%, #000 51%);
  mask-image: linear-gradient(96deg, transparent 19%, rgba(0,0,0,0.30) 33%, #000 51%);
}
.hero-strip { background: linear-gradient(180deg, #04120c 0%, var(--forest-deep) 34%, var(--forest) 100%); }

/* Wortmarke: das Bild trägt den Namen, der Textersatz daneben wäre doppelt */
.logo img + .logo-word { display: none !important; }

@media (max-width: 900px) {
  .page-hero::before {
    -webkit-mask-image: none; mask-image: none;
    background: linear-gradient(180deg, rgba(10,26,19,0) 0%, rgba(10,26,19,0) 52%,
      rgba(7,20,15,0.16) 74%, rgba(4,14,10,0.7) 100%);
  }
}

/* ---------- Die Zeile für das Besondere ----------
   Steht unter der Spezialisierung, kursiv und in Gold. Ein Satz,
   der nicht wirbt, sondern einordnet. */
.hero-claim {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(18px, 1.45vw, 22px); line-height: 1.45;
  color: var(--forest); margin: 14px 0 0; max-width: 24em;
}
.hero-claim + * { margin-top: 10px; }
[data-tone="dark"] .hero-claim, .page-hero .hero-claim { color: var(--gold-bright); }
.hero-claim::before {
  content: ''; display: block; width: 46px; height: 1px; margin: 0 0 14px;
  background: linear-gradient(90deg, var(--gold), rgba(201,169,110,0));
}
@media (max-width: 900px) { .hero-claim { font-size: 17px; margin-top: 12px; } }

/* ---------- 6 · DAS MENÜ AM TELEFON ----------
   Der Vorhang. Er hängt unter der Kopfleiste und wird beim Öffnen
   nach unten aufgezogen, die Einträge steigen versetzt nach.
   Gebaut wird er von fetai-menue.js aus der vorhandenen
   Hauptnavigation, damit beide nie auseinanderlaufen. */
.menue-taste { display: none; }

@media (max-width: 900px) {
  /* In der Leiste bleiben Zeichen und Wort: Suche und Menü.
     Die Wege nach außen wandern in den Vorhang. */
  .header-actions .icon-btn:not(.search-toggle), .header-actions .lang-btn { display: none; }
  .header-actions { gap: 10px; }

  .menue-taste {
    display: inline-flex; align-items: center; gap: 11px;
    background: transparent; border: 1px solid var(--border-gold); border-radius: var(--radius);
    color: var(--gold-bright); cursor: pointer;
    font-family: var(--ui); font-weight: 500; text-transform: uppercase;
    font-size: 12px; letter-spacing: 0.18em; line-height: 1;
    padding: 14px 15px 14px 17px; outline: none;
    transition: color 0.4s var(--ease), border-color 0.4s var(--ease),
                background-color 0.4s var(--ease), box-shadow 0.5s var(--ease);
  }
  .menue-taste:hover, .menue-taste:focus-visible {
    color: #fbf1dc; border-color: rgba(232,210,164,0.95); background: rgba(201,169,110,0.12);
    box-shadow: 0 0 0 1px rgba(201,169,110,0.28), 0 0 30px -10px rgba(201,169,110,0.5);
  }
  .menue-taste:focus-visible { box-shadow: 0 0 0 1px rgba(232,210,164,0.7), 0 0 0 4px rgba(201,169,110,0.26); }
  .menue-wort { display: block; }
  .menue-glyph { position: relative; display: block; width: 16px; height: 11px; flex: none; }
  .menue-glyph i {
    position: absolute; left: 0; width: 100%; height: 1.4px; background: currentColor;
    transition: transform 0.42s var(--ease), opacity 0.2s ease;
  }
  .menue-glyph i:first-child { top: 0; }
  .menue-glyph i:last-child  { bottom: 0; }
  .menue-taste[aria-expanded="true"] .menue-glyph i:first-child { transform: translateY(4.8px) rotate(45deg); }
  .menue-taste[aria-expanded="true"] .menue-glyph i:last-child  { transform: translateY(-4.8px) rotate(-45deg); }

  /* Der Vorhang selbst */
  .menue-vorhang {
    position: fixed; inset: 0; z-index: 48;
    display: flex; flex-direction: column;
    padding-top: var(--kopfhoehe, 72px);
    background:
      radial-gradient(120% 62% at 8% 0%, rgba(255,249,235,0.10), rgba(255,249,235,0.03) 42%, transparent 70%),
      linear-gradient(180deg, var(--forest-deep) 0%, var(--forest) 42%, #0d2318 100%);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.62s var(--ease);
    overscroll-behavior: contain;
  }
  .menue-vorhang[hidden] { display: none; }
  .menue-vorhang.auf { clip-path: inset(0 0 0 0); }
  .menue-saum {
    position: absolute; left: 0; right: 0; top: var(--kopfhoehe, 72px); height: 1px; z-index: 2;
    background: linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold-bright) 50%, var(--gold) 78%, transparent);
    transform: scaleX(0); transform-origin: 50% 50%;
    transition: transform 0.7s var(--ease) 0.06s;
  }
  .menue-vorhang.auf .menue-saum { transform: scaleX(1); }

  .menue-blatt {
    flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 26px 24px calc(34px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; gap: 26px;
  }
  .menue-liste { display: flex; flex-direction: column; }
  .menue-liste > *, .menue-fuss {
    opacity: 0; transform: translateY(16px);
    transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
  }
  .menue-vorhang.auf .menue-liste > *, .menue-vorhang.auf .menue-fuss {
    opacity: 1; transform: none;
    transition-delay: calc(0.16s + var(--i, 0) * 0.055s);
  }

  /* Ein Ast: Kopfzeile zum Aufklappen */
  .menue-kopf, .menue-punkt {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
    padding: 18px 2px; color: var(--cream);
    font-family: var(--display); font-weight: 400; font-size: 25px; line-height: 1.2;
    letter-spacing: 0.012em; border-bottom: 1px solid rgba(201,169,110,0.2);
    outline: none; transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
  }
  .menue-punkt { text-decoration: none; }
  .menue-kopf:hover, .menue-punkt:hover,
  .menue-kopf:focus-visible, .menue-punkt:focus-visible {
    color: var(--gold-bright); border-color: rgba(201,169,110,0.55);
  }
  .menue-kopf svg { flex: none; color: var(--gold); transition: transform 0.44s var(--ease), color 0.35s ease; }
  .menue-kopf[aria-expanded="true"] { color: var(--gold-bright); border-color: rgba(201,169,110,0.55); }
  .menue-kopf[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--gold-bright); }

  /* Das Fach klappt über die Zeilenhöhe auf, ohne gerechnete Höhe */
  .menue-fach { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); }
  .menue-zweig.auf .menue-fach { grid-template-rows: 1fr; }
  .menue-fach-innen { overflow: hidden; min-height: 0; }
  .menue-zweig.auf .menue-fach-innen { padding: 14px 0 22px; }

  .menue-gruppe {
    display: block; margin: 18px 0 8px;
    font-family: var(--ui); font-weight: 500; text-transform: uppercase;
    font-size: 11px; letter-spacing: 0.2em; color: var(--gold);
  }
  .menue-gruppe:first-child { margin-top: 6px; }
  .menue-eintrag {
    display: block; padding: 10px 0 10px 16px; position: relative;
    font-family: var(--body); font-weight: 400; font-size: 17.5px; line-height: 1.35;
    color: rgba(242,240,234,0.9); text-decoration: none; outline: none;
    transition: color 0.3s ease, padding-left 0.4s var(--ease);
  }
  .menue-eintrag::before {
    content: ''; position: absolute; left: 0; top: 50%; width: 7px; height: 1px;
    background: var(--gold); opacity: 0.45;
    transition: width 0.4s var(--ease), opacity 0.3s ease;
  }
  .menue-eintrag:hover, .menue-eintrag:focus-visible { color: var(--gold-bright); padding-left: 22px; }
  .menue-eintrag:hover::before, .menue-eintrag:focus-visible::before { width: 13px; opacity: 1; }
  .menue-eintrag.hier { color: var(--gold-bright); }
  .menue-eintrag.hier::before { width: 13px; opacity: 1; }
  .menue-uebersicht { font-style: italic; color: rgba(242,240,234,0.62); }
  .menue-eintrag.still { color: rgba(242,240,234,0.34); pointer-events: none; }
  .menue-eintrag.still::before { opacity: 0.16; }

  /* Der Fuß */
  .menue-fuss { margin-top: auto; padding-top: 26px; border-top: 1px solid rgba(201,169,110,0.24); }
  .menue-fuss .cta-primary { display: flex; width: 100%; justify-content: center;
    color: var(--gold-bright); border-color: rgba(201,169,110,0.62);
    font-size: 12px; letter-spacing: 0.16em; padding: 17px 18px; white-space: nowrap; }
  .menue-fuss .cta-primary:hover, .menue-fuss .cta-primary:focus-visible {
    color: #fbf1dc; border-color: rgba(232,210,164,0.95); background: rgba(201,169,110,0.12); }
  .menue-wege { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; }
  .menue-weg {
    font-family: var(--ui); font-weight: 400; text-transform: uppercase;
    font-size: 11.5px; letter-spacing: 0.19em; color: rgba(242,240,234,0.6);
    text-decoration: none; outline: none; transition: color 0.3s ease;
  }
  .menue-weg:hover, .menue-weg:focus-visible { color: var(--gold-bright); }

  body.menue-offen { overflow: hidden; }
  body.menue-offen .float-bar { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .menue-vorhang { transition: opacity 0.2s linear; clip-path: none; opacity: 0; }
  .menue-vorhang.auf { opacity: 1; }
  .menue-vorhang[hidden] { display: none; }
  .menue-liste > *, .menue-fuss { opacity: 1; transform: none; transition: none; }
  .menue-saum { transform: scaleX(1); transition: none; }
  .menue-fach { transition: none; }
}

/* ---------- 7 · DAS GRÜN ----------
   Ein Ton heller als bisher, genommen aus dem Bildmuster der Marke.
   Kopfleiste, Fußleiste und alles, was unmittelbar daran grenzt,
   stehen einfarbig darin. Die Inhaltsflächen tragen denselben Ton,
   werden nach unten hin aber eine Spur heller und nehmen am unteren
   Rand einen Hauch Creme auf, damit die Naht zur hellen Fläche
   darunter weich bleibt. */
:root {
  --tief:        #121d17;
  --forest:      #16241c;
  --forest-deep: #121e18;
  --forest-mid:  #26372c;
  --forest-pale: #3d5646;
  --jade-hell:   #223329;
  /* Schrift, die auf hellem Grund sicher steht */
  --text-light:  #6b6558;
  --gold-deep:   #7f622c;
}

/* Einfarbig: die Menüs und was daran hängt */
.header, .header.scrolled,
.search-panel, .submenu-panel, .submenu-flat, .submenu-inner,
.float-btn, .menue-vorhang, footer, .footer-bottom {
  background: var(--forest) !important;
}
.header { background-image: none; }
footer { background-image: none; }
.float-btn:hover { background: var(--forest-mid) !important; }
.menue-vorhang {
  background-image: radial-gradient(120% 62% at 8% 0%, rgba(255,249,235,0.09), transparent 68%) !important;
}

/* Die Inhaltsflächen: nach unten heller, ganz unten ein Hauch Creme */
[data-tone="dark"], .prose-section.dark, .areas-section, .dl-section,
.facts-section.dark, .assoc-bar, .ratings-bar, .channel-section,
.treatment-cta-wrap, .event-card {
  background:
    linear-gradient(180deg, rgba(250,247,239,0) 72%, rgba(250,247,239,0.09) 100%),
    linear-gradient(180deg, var(--forest-deep) 0%, var(--forest) 38%, var(--jade-hell) 100%);
}
.page-hero { background: var(--forest); }
.hero-strip {
  background:
    linear-gradient(180deg, rgba(250,247,239,0) 68%, rgba(250,247,239,0.08) 100%),
    linear-gradient(180deg, var(--forest-deep) 0%, var(--forest) 46%, var(--jade-hell) 100%);
}
/* Der Startseitenkopf am Telefon endet ebenfalls im helleren Grün */
@media (max-width: 900px) {
  .hero { background: var(--forest-deep); }
  .hero-photo::after {
    background: linear-gradient(180deg, transparent 46%, rgba(36,56,44,0.18) 66%,
      rgba(36,56,44,0.62) 85%, var(--forest-deep) 100%) !important;
  }
}

/* ---------- 8 · DIE SCHRIFT ----------
   Der Fließtext läuft jetzt in derselben Grotesk wie das Menü.
   Die Antiqua bleibt den Überschriften, den Zahlen und den
   kursiven Zwischenrufen vorbehalten. */
:root { --body: 'Jost', 'Helvetica Neue', Arial, sans-serif; }
body, p, li, dd, td, th, figcaption, blockquote, label, input, textarea, select,
summary, .prose-block, .answer-first, .faq-a, .sib-card, .zone-table {
  font-family: var(--ui);
}
body { font-size: 17px; line-height: 1.72; letter-spacing: 0.004em; }
p, li, dd, td, figcaption { font-family: var(--ui); }
h1, h2, h3, h4, .section-title, .hero h1, .page-hero h1,
.hero-spec, .hero-claim, .hy-quote, blockquote p, cite, em.zahl,
.hero-stat b, .fact-item b, .stat-num, .menue-uebersicht {
  font-family: var(--display);
}
/* Die kursiven Einwürfe bleiben Antiqua */
.hy-quote p, .hy-cap, .zone-hint, .page-hero-credit + *, .hero-meta { font-family: var(--display); }
.menue-kopf, .menue-punkt, .menue-eintrag { font-family: var(--ui); }
.menue-kopf, .menue-punkt { font-size: 21px; letter-spacing: 0.01em; }
.menue-eintrag { font-size: 15.5px; letter-spacing: 0.012em; }
.menue-uebersicht { font-style: italic; }

/* ---------- 9 · SICHTBARKEIT ----------
   Jede Schrift steht auf einem Grund, von dem sie sich deutlich
   abhebt. Auf hellem Grund die tiefen Töne, auf grünem Grund Creme
   und helles Gold. Nichts Gedämpftes unter der Lesbarkeitsschwelle. */

/* --- Auf grünem Grund ---
   Nur, was unmittelbar auf der grünen Fläche liegt. Helle Tafeln,
   die darin schwimmen, behalten weiter unten ihre eigene Schrift. */
.channel-section > .section > * , .channel-section p, .channel-section h2, .channel-section h3,
[data-tone="dark"] > .section > *, .dl-head, .dl-head p, .areas-section > .section > *,
.hero-strip, .assoc-bar, .ratings-bar > .section > * {
  color: var(--cream);
}
.channel-section p, .dl-head p, .areas-section > .section > * p,
[data-tone="dark"] > .section > * p, .assoc-bar p, .ratings-bar p, .hero-strip p {
  color: rgba(242,240,234,0.9);
}
/* Gold auf Grün ist immer das helle Gold */
.channel-section em, .channel-section .overline span, .channel-section cite,
[data-tone="dark"] em, [data-tone="dark"] .overline span, [data-tone="dark"] cite,
.dl-section .dl-head em, .dl-section .overline span, .areas-section em,
.areas-section .overline span, .facts-section.dark > .section > * em,
.assoc-bar em, .ratings-bar em, .event-card em, .treatment-cta-wrap em,
.treatment-cta-label, .page-hero em, .hero-strip em,
.event-card .overline span, .treatment-cta-wrap .overline span, .assoc-label,
.channel-section .section-label, [data-tone="dark"] > .section .section-label,
.dl-section > .section .section-label, .areas-section > .section .section-label {
  color: var(--gold-bright);
}
/* Gedämpfte Beschriftungen auf Grün: hell genug zum Lesen */
.zone-hint, .dl-note, .hero-stat span, .shot-empty span,
.reel-placeholder, .dl-tag, .page-hero-credit, .menue-uebersicht, .menue-weg,
.event-card .event-meta, .treatment-cta-wrap .treatment-cta-label {
  color: rgba(242,240,234,0.8);
}
.shot-empty b, .dl-tag, .sib-num, .event-card .overline span { color: var(--gold-bright); }

/* --- Helle Tafeln auf grünem Grund behalten ihre dunkle Schrift --- */
.facts-bar, .facts-bar *, .zone-table, .zone-table *,
.hy-calc, .hy-calc *, .rating-card, .rating-card *,
.voice-card, .voice-card *, .search-results, .search-results * {
  --text: #1c1a15; --text-muted: #5a564d; --text-light: #6b6558;
}
.facts-bar p, .facts-bar span, .facts-bar div, .facts-bar b, .facts-bar li,
.zone-table th, .zone-table td, .zone-table caption,
.rating-label, .facts-note, .facts-row-label, .facts-row-sub, .fact-label, .fact-desc,
.tag, .voice-card p, .voice-card span {
  color: var(--text-muted);
}
.facts-bar b, .fact-number, .zone-table td, .zone-table th, .voice-card p { color: var(--text); }
.fact-item.featured .fact-label, .fact-item.featured .fact-desc { color: rgba(242,240,234,0.8); }
.fact-item.featured b, .fact-item.featured .fact-number { color: var(--gold-bright); }
.sib-card, .sib-card .sib-name, .sib-card b { color: var(--text); }
.sib-card .sib-desc { color: var(--text-muted); }
.sib-num, .sib-arrow { color: #7f622c; }
.sib-card.current { color: var(--cream); }
.sib-card.current .sib-desc { color: rgba(242,240,234,0.85); }
.sib-card.current .sib-num, .sib-card.current .sib-arrow { color: var(--gold-bright); }
.bsafe-num { color: var(--gold-bright); }

/* --- Auf hellem Grund --- */
.section-label, figcaption, .hy-cap, label, .voice-img-placeholder,
.treatment-desc, .form-note, .footer-note {
  color: var(--text-light);
}
.prose-section:not(.dark) .section-label, .faq-section .section-label,
.sib-section .section-label, .ask-section .section-label,
.treatments-section .section-label, .op-section .section-label,
.form-section .section-label, .voices-section .section-label {
  color: #6b6558;
}
.about-sig, .jump-cta, .cta-quiet, .prose-section:not(.dark) cite,
.faq-section cite, .op-section .overline span, .treatments-section .overline span,
.form-section .overline span, .voices-section .overline span,
.bsafe-section .overline span, .faq-section .overline span {
  color: #7f622c;
}

/* --- Die rechte Leiste bleibt grün mit heller Schrift --- */
.float-bar .float-btn, .float-bar.on-dark .float-btn {
  background: var(--forest); color: var(--cream-warm);
  border-left-color: rgba(201,169,110,0.45);
}
.float-bar .float-btn .float-label, .float-bar.on-dark .float-btn .float-label { color: var(--cream-warm); }
.float-bar .float-btn:hover, .float-bar.on-dark .float-btn:hover {
  background: var(--forest-mid); color: var(--gold-bright); border-left-color: var(--gold);
}
.float-bar .float-btn:hover .float-label { color: var(--gold-bright); }
.float-bar .float-btn svg { color: var(--gold); }
.float-bar .float-btn:hover svg { color: var(--gold-bright); }

/* ---------- 10 · DIE TAFELN ----------
   Karten auf grünem Grund sind Körper, keine Flächen: eine Lichtkante
   oben, eine Schattenkante unten, ein goldener Falz innen und ein
   Schatten, der sie vom Grund abhebt. Beim Rübergehen treten sie vor. */
.event-card, .treatment-cta-wrap, .reel-card, .fact-item.featured,
.channel-section .cta-primary.solid, .bsafe-card, .sib-card {
  position: relative;
  background: linear-gradient(158deg, #26382d 0%, #1b2a21 54%, #142019 100%);
  border: 1px solid rgba(201,169,110,0.34);
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(255,247,230,0.13),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 2px 0 rgba(0,0,0,0.3),
    0 22px 44px -24px rgba(0,0,0,0.9);
  transition: transform 0.5s var(--ease), box-shadow 0.55s var(--ease), border-color 0.4s var(--ease);
}
.event-card::after, .treatment-cta-wrap::after, .fact-item.featured::after {
  content: ''; position: absolute; inset: 8px; pointer-events: none;
  border: 1px solid rgba(201,169,110,0.2); border-radius: 1px;
  transition: border-color 0.4s var(--ease);
}
.event-card:hover, .treatment-cta-wrap:hover, .reel-card:hover,
.fact-item.featured:hover, .bsafe-card:hover, .sib-card:hover {
  transform: translateY(-4px);
  border-color: rgba(224,200,150,0.62);
  box-shadow:
    inset 0 1px 0 rgba(255,247,230,0.2),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 4px 0 rgba(0,0,0,0.32),
    0 34px 60px -26px rgba(0,0,0,0.95);
}
.event-card:hover::after, .treatment-cta-wrap:hover::after { border-color: rgba(224,200,150,0.34); }
/* Auf hellem Grund tragen dieselben Tafeln helle Körper */
.bsafe-section .bsafe-card, .sib-section .sib-card {
  background: linear-gradient(158deg, var(--paper) 0%, var(--cream) 58%, var(--linen) 100%);
  border-color: rgba(201,169,110,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(28,26,21,0.07),
    0 2px 0 rgba(28,26,21,0.05),
    0 20px 40px -26px rgba(28,26,21,0.4);
}
.bsafe-section .bsafe-card *, .sib-section .sib-card * { color: inherit; }
.bsafe-section .bsafe-card:hover, .sib-section .sib-card:hover {
  border-color: rgba(201,169,110,0.75);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(28,26,21,0.08),
    0 4px 0 rgba(28,26,21,0.06),
    0 30px 52px -26px rgba(28,26,21,0.45);
}
@media (prefers-reduced-motion: reduce) {
  .event-card:hover, .treatment-cta-wrap:hover, .reel-card:hover,
  .fact-item.featured:hover, .bsafe-card:hover, .sib-card:hover { transform: none; }
}

/* ---------- 9b · NACHGEZOGEN ----------
   Einzelne Stellen, an denen eine seiteneigene Regel spezifischer war
   als die allgemeine, und helle Tafeln, die in einer grünen Fläche
   schwimmen und ihre eigene Schrift behalten. */
.hy-myth, .hy-myth *, .dl-frame, .dl-frame *, .shot-frame, .shot-frame *,
.author-card, .author-card *, .faq-portrait, .faq-portrait * {
  --text: #1c1a15; --text-muted: #5a564d; --text-light: #6b6558;
}
.hy-myth p, .hy-myth li, .hy-myth div, .hy-myth span:not(.tag) { color: #5a564d !important; }
.hy-myth h3, .hy-myth b, .hy-myth .hy-myth-q { color: #1c1a15 !important; }
.hy-myth .tag { color: #7f622c !important; }
.facts-bar p, .facts-bar span, .facts-bar div, .facts-bar b, .facts-bar li,
.zone-table th, .zone-table td, .zone-table caption, .hy-calc > p,
.dl-frame p, .dl-frame > span,
.author-card p, .author-card span, .shot-frame figcaption { color: #5a564d !important; }
.facts-bar b, .zone-table td, .zone-table th, .author-card b { color: #1c1a15 !important; }
.fact-item.featured .fact-label, .fact-item.featured .fact-desc { color: rgba(242,240,234,0.82) !important; }
.fact-item.featured b, .fact-item.featured .fact-number { color: var(--gold-bright) !important; }

.channel-section h2 em, .channel-section h3 em, .channel-text h2 em,
[data-tone="dark"] h2 em, [data-tone="dark"] h3 em,
.dl-section h2 em, .areas-section h2 em, .event-card h3 em,
.treatment-cta-wrap h3 em, .hero-strip em, .assoc-bar em, .ratings-bar h2 em {
  color: var(--gold-bright) !important;
}
.bsafe-num, .bsafe-card .bsafe-num { color: var(--gold-bright) !important; }

/* Zu blasse Beschriftungen auf Grün */
.section-label, .assoc-label, .footer-copyright, .footer-note,
.depth-steps button, .dl-legend, .scroll-hint, .tl-note {
  --blass: rgba(242,240,234,0.82);
}
[data-tone="dark"] .section-label, .dl-section .section-label,
.areas-section .section-label, .channel-section .section-label,
.prose-section.dark .section-label, .facts-section.dark .section-label,
.prose-section.dark .overline span, .prose-section.dark .scroll-hint,
.areas-section .scroll-hint, .dl-section .scroll-hint { color: rgba(242,240,234,0.82); }
.prose-section.dark em, .prose-section.dark .overline span { color: var(--gold-bright); }
.prose-section.dark h2, .prose-section.dark h3 { color: var(--cream); }
.prose-section.dark > .section > * > p, .prose-section.dark .prose-block > p { color: rgba(242,240,234,0.9); }
.assoc-label { color: rgba(242,240,234,0.82) !important; }
.footer-copyright { color: rgba(242,240,234,0.72) !important; }
.depth-steps button { color: rgba(242,240,234,0.88); }
.depth-steps button[aria-pressed="true"] { color: var(--forest-deep); }
.dl-section .dl-text span, .dl-section .dl-head span,
.areas-section .zone-hint, .dl-section .dl-note { color: rgba(242,240,234,0.86); }