/* ============================================================
   Marina Betke — Redesign v2
   Richtung: hell, vertrauensbildend, klare Konventionen.
   Referenzen: healyourselftherapy.com, elektro-sasse.de,
   peinemann.de, thechangemethod.com — Foto-Hero, Trust-Badges/
   Zahlenreihe, kräftiger Signalfarben-CTA, Karten-Grids.
   ============================================================ */

@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-variable-latin.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-italic-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

:root {
  --navy: #102a36;
  --navy-deep: #0b2029;
  --navy-mid: #315766;
  --ink: #1f2c30;
  --ink-soft: #626d6b;
  --paper: #fbfaf7;
  --mist: #eef1ec;
  --line: #dce2dd;
  --white: #ffffff;
  --white-soft: rgba(255, 255, 255, 0.82);

  --gold: #b76f32;
  --gold-deep: #945722;
  --gold-deeper: #774316;
  --gold-light: #d89b67;

  --sage: #dce4dd;
  --sage-deep: #aebeb3;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --font-display: "Inter Tight", "Arial Narrow", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-accent: "Fraunces", "Iowan Old Style", Georgia, serif;

  --wrap: min(1180px, 100% - 3rem);
  --radius: 10px;
  --radius-sm: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Verankerte Abschnitte dürfen nicht unter dem fixed Header verschwinden */
section[id] { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
  color: var(--navy);
}
p { margin: 0; }
.wrap { width: var(--wrap); margin-inline: auto; }
.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;
}

.type-accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--gold-deep);
}
section.on-dark .type-accent,
section.on-navy-deep .type-accent,
.hero .type-accent,
.topic-hero .type-accent { color: var(--gold-light); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
section.on-dark .eyebrow { color: var(--gold-light); }

.lede { font-size: 1.05rem; color: var(--ink-soft); max-width: 44ch; }
section.on-dark .lede { color: var(--white-soft); }

/* -- Buttons ----------------------------------------------------*/
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.95em 1.7em;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.97rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 180ms var(--ease-out), background-color 180ms ease, border-color 180ms ease, box-shadow 180ms var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: translateY(0) scale(0.99); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.btn--gold { background: var(--gold-deep); color: #fff; box-shadow: 0 10px 24px -10px rgba(156, 98, 36, 0.5); }
.btn--gold:hover { background: var(--gold-deeper); }

.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-deep); }

.btn--outline { background: transparent; border-color: var(--line); color: var(--navy); }
.btn--outline:hover { border-color: var(--navy); }

.btn--outline-light { background: transparent; border-color: rgba(255,255,255,0.4); color: #fff; }
.btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 700;
  font-size: 0.93rem;
  text-decoration: none;
  color: var(--navy);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 0.15em;
  transition: gap 0.25s ease;
}
.link-arrow:hover { gap: 0.65em; }
.link-arrow { min-height: 44px; }
section.on-dark .link-arrow { color: #fff; }
.hero .link-arrow { color: rgba(255,255,255,0.9); }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  background: rgba(11, 32, 41, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: background-color 0.3s ease;
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; width: var(--wrap); margin-inline: auto; }

.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: #fff; flex-shrink: 0; }
.brand-mark {
  width: 2.15rem; height: 2.15rem; border-radius: 50%;
  border: 1.5px solid var(--gold-light);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--font-body); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.025em; }
.brand-sub { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.78); }

.main-nav { display: flex; gap: 1.9rem; }
.main-nav a { text-decoration: none; color: rgba(255,255,255,0.82); font-size: 0.92rem; font-weight: 600; transition: color 0.2s ease; }
.main-nav a:hover { color: #fff; }
.main-nav a[aria-current="page"] { color: #fff; text-decoration: underline; text-decoration-color: var(--gold-light); text-underline-offset: 0.45rem; }
.main-nav a:focus-visible, .brand:focus-visible, .mobile-nav a:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; border-radius: 2px; }

.header-actions { display: flex; align-items: center; gap: 0.7rem; }

.nav-toggle {
  display: none;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.3);
  background: transparent; color: #fff;
  align-items: center; justify-content: center; cursor: pointer;
}
.nav-toggle svg { width: 1.1rem; height: 1.1rem; }
.nav-toggle:focus-visible, .mobile-nav-close:focus-visible, .faq-q:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

.mobile-nav {
  position: fixed; inset: 0; z-index: 600;
  background: var(--navy-deep);
  display: flex; flex-direction: column; justify-content: center; gap: 1.8rem;
  padding: 2rem;
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 280ms var(--ease-out), visibility 0s linear 280ms;
}
.mobile-nav.is-open {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.mobile-nav a { font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: #fff; text-decoration: none; }
.mobile-nav-close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.3);
  background: transparent; color: #fff; cursor: pointer;
}

/* ============================================================
   Hero — Foto-Hero mit Overlay (wie Referenzen)
   ============================================================ */
.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 9s var(--ease-in-out) both; }
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(11,32,41,0.94) 22%, rgba(11,32,41,0.68) 52%, rgba(11,32,41,0.28) 78%);
}
.hero .wrap { position: relative; z-index: 1; padding-bottom: 3.6rem; padding-top: 9rem; }
.hero-copy { max-width: 640px; }
.hero-copy h1 { font-size: clamp(2.3rem, 3.6vw + 0.6rem, 3.4rem); color: #fff; }
.hero-copy .eyebrow { margin-bottom: 1.2rem; }
.hero-copy .lede { color: rgba(255,255,255,0.88); margin: 1.4rem 0 2rem; max-width: 48ch; font-size: 1.08rem; }
.hero-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }

/* -- Trust-Badge-Leiste direkt unter Hero -------------------- */
.trust-bar { background: var(--navy-deep); border-top: 1px solid rgba(255,255,255,0.08); }
.trust-bar .wrap {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 1.8rem 0;
}
.trust-stat { text-align: center; padding: 0 1rem; border-left: 1px solid rgba(255,255,255,0.12); }
.trust-stat:first-child { border-left: none; }
.trust-stat b { display: block; font-family: var(--font-display); font-size: 1.7rem; color: #fff; }
.trust-stat span { font-size: 0.8rem; color: rgba(255,255,255,0.82); }

/* -- Ruhige, erklärende Bildsequenz --------------------------- */
.story-journey { background: #eef2f4; overflow: hidden; }
.story-journey-head { display: grid; grid-template-columns: 0.8fr 1.4fr 1fr; gap: 2rem; align-items: end; margin-bottom: 3rem; }
.story-journey-head h2 { font-size: clamp(2rem, 3vw, 3rem); max-width: 14ch; }
.story-journey-head p { color: var(--ink-soft); max-width: 40ch; }
.story-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.story-step { min-width: 0; }
.story-step:nth-child(even) { padding-top: 3rem; }
.story-step figure { margin: 0 0 1.2rem; height: clamp(250px, 30vw, 430px); overflow: hidden; border-radius: var(--radius); background: var(--navy); }
.story-step img {
  width: 100%; height: calc(100% + 36px); object-fit: cover;
  transform: translate3d(0, -18px, 0) scale(1.035);
  transform-origin: center center;
  will-change: transform;
  animation: story-camera 10s cubic-bezier(0.77, 0, 0.175, 1) infinite alternate;
}
.story-step:nth-child(2) img { animation-direction: alternate-reverse; animation-delay: -3s; }
.story-step:nth-child(3) img { animation-duration: 12s; animation-delay: -6s; }
.story-step:nth-child(4) img { animation-direction: alternate-reverse; animation-duration: 11s; animation-delay: -8s; }
@keyframes story-camera {
  from { transform: translate3d(0, -18px, 0) scale(1.035); }
  to { transform: translate3d(0, 0, 0) scale(1.085); }
}
.story-number { display: block; color: var(--gold-deep); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; margin-bottom: 0.35rem; }
.story-step h3 { font-size: 1.25rem; margin-bottom: 0.45rem; }
.story-step p { color: var(--ink-soft); font-size: 0.9rem; max-width: 30ch; }

/* ============================================================
   Section rhythm
   ============================================================ */
section { padding: 5.5rem 0; }
section.tight { padding: 3.8rem 0; }
section.on-dark { background: var(--navy); color: #fff; }
section.on-mist { background: var(--mist); }
section.on-navy-deep { background: var(--navy-deep); color: #fff; }

.section-head { max-width: 680px; margin-bottom: 3rem; }
.section-head--center { max-width: 680px; margin-inline: auto; text-align: center; margin-bottom: 3.2rem; }
.section-head h2 { font-size: clamp(1.9rem, 2vw + 1.1rem, 2.5rem); margin-top: 0.8rem; }

/* Kleinere Elemente (Karten, Badges, Buttons-Wrapper): 650ms */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Größere Elemente (Überschriften-Blöcke, Section-Heads): 950ms, etwas mehr Weg */
.reveal-head {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 950ms var(--ease-out), transform 950ms var(--ease-out);
}
.reveal-head.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-head { opacity: 1; transform: none; transition: none; }
}
/* Sicherheitsnetz: falls JS/IntersectionObserver aus irgendeinem Grund nicht läuft,
   bleibt Inhalt sichtbar statt dauerhaft unsichtbar. */
.no-js .reveal, .no-js .reveal-head, noscript ~ .reveal, noscript ~ .reveal-head { opacity: 1; transform: none; }

/* -- Hero-Entrance: ruhiges, gestaffeltes Einblenden beim Laden -- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes kenburns { from { transform: scale(1.06); } to { transform: scale(1); } }

.stagger-in > * { opacity: 0; animation: fadeUp 950ms var(--ease-out) both; }
.stagger-in > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-in > *:nth-child(2) { animation-delay: 0.24s; }
.stagger-in > *:nth-child(3) { animation-delay: 0.38s; }
.stagger-in > *:nth-child(4) { animation-delay: 0.52s; }
.stagger-in > *:nth-child(5) { animation-delay: 0.66s; }

/* Header blendet minimal später ein, damit es hinter dem Hero "ankommt" */
.site-header { opacity: 0; animation: fadeUp 700ms var(--ease-out) 0.2s both; }

@media (prefers-reduced-motion: reduce) {
  .stagger-in > *, .site-header, .hero-bg img {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* -- Gestaffeltes Einblenden für Karten-Grids: 130ms je Element, --
   über ein Inline-`transition-delay` pro Karte gesteuert (siehe HTML),
   hier nur die Obergrenze fürs Sicherheitsnetz. */

/* ============================================================
   Themen — Karten-Grid (statt Editorial-Liste)
   ============================================================ */
.topics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.topic-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem 1.6rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 220ms ease, box-shadow 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.topic-card:hover { border-color: var(--gold); box-shadow: 0 16px 30px -18px rgba(20,40,56,0.25); transform: translateY(-4px); }
.topic-card:hover .topic-icon { background: var(--gold); color: #fff; }
.topic-icon {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--mist); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem;
  transition: background-color 220ms ease, color 220ms ease, transform 220ms var(--ease-out);
}
.topic-icon svg { width: 1.2rem; height: 1.2rem; }
.topic-card h3 { font-size: 1.12rem; margin-bottom: 0.5rem; }
.topic-card p { color: var(--ink-soft); font-size: 0.92rem; }

.topics-free {
  margin-top: 1.8rem;
  padding: 2rem 2.2rem;
  border-radius: var(--radius);
  background: var(--navy);
  color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.topics-free h3 { color: #fff; font-size: 1.25rem; margin-bottom: 0.35rem; }
.topics-free p { color: rgba(255,255,255,0.78); max-width: 46ch; font-size: 0.94rem; }

/* ============================================================
   Warum Marina — Prinzipien-Grid mit Foto
   ============================================================ */
.feature { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3.4rem; align-items: center; }
.feature-media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/5; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.principle-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.3rem; margin-top: 1.8rem; }
.principle-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.3rem 1.4rem; }
.principle-card h4 { font-size: 1rem; margin-bottom: 0.4rem; color: var(--navy); }
.principle-card p { font-size: 0.9rem; color: var(--ink-soft); }

/* ============================================================
   Prozess — nummerierte Schritte, Karten
   ============================================================ */
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.process-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.9rem; position: relative; }
.process-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--gold-deep); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  margin-bottom: 1rem;
}
.process-card h4 { font-size: 1.08rem; margin-bottom: 0.5rem; }
.process-card p { color: var(--ink-soft); font-size: 0.92rem; }
.process-note { margin-top: 2.2rem; font-family: var(--font-accent); font-style: italic; font-size: 1.1rem; color: var(--ink-soft); max-width: 56ch; }

/* ============================================================
   Über Marina — Founder-Bio (wie thechangemethod)
   ============================================================ */
.about-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 3.4rem; align-items: start; }
.about-media img { border-radius: var(--radius); aspect-ratio: 4/5; object-fit: cover; }
.about-copy .lede { max-width: none; font-size: 1.06rem; margin-bottom: 1.6rem; }
.badge-row { display: flex; gap: 0.8rem; margin-top: 1.6rem; flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.55em 1.1em; border-radius: 999px; background: var(--mist); border: 1px solid var(--line); font-size: 0.85rem; font-weight: 700; color: var(--navy); }
.badge svg { width: 1rem; height: 1rem; color: var(--gold-deep); }

/* ============================================================
   Wie Hypnose funktioniert — Karten auf navy
   ============================================================ */
.method-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.method-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius); padding: 1.7rem; }
.method-card h4 { color: #fff; font-size: 1.05rem; margin: 0 0 0.5rem; }
.method-card p { color: rgba(255,255,255,0.75); font-size: 0.9rem; }
.method-disclaimer { margin-top: 2rem; font-size: 0.85rem; color: rgba(255,255,255,0.8); max-width: 64ch; }

/* ============================================================
   Typische Ausgangspunkte
   ============================================================ */
.point-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.point-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.9rem; border-top: 4px solid var(--gold); }
.point-card h4 { font-size: 1.1rem; margin-bottom: 0.6rem; }
.point-card p { color: var(--ink-soft); font-size: 0.93rem; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-layout { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 3.4rem; }
.faq-aside-card { background: var(--navy); color: #fff; padding: 2rem; border-radius: var(--radius); margin-top: 1.6rem; }
.faq-aside-card h3, .faq-aside-card h4 { color: #fff; font-size: 1.05rem; }
.faq-aside-card p { color: rgba(255,255,255,0.78); font-size: 0.92rem; margin: 0.6rem 0 1.4rem; }

.faq-item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 0.8rem; overflow: hidden; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.2rem 1.4rem; background: none; border: none; text-align: left; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 1.02rem; color: var(--navy);
}
.faq-q-icon { flex-shrink: 0; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--mist); display: flex; align-items: center; justify-content: center; transition: background-color 0.25s ease, color 0.25s ease; color: var(--navy); }
.faq-q-icon::before { content: "+"; font-size: 1.15rem; font-weight: 650; line-height: 1; transform: translateY(-0.04em); }
.faq-q-icon svg { display: none; }
.faq-item[data-open="true"] .faq-q-icon { background: var(--gold-deep); color: #fff; }
.faq-item[data-open="true"] .faq-q-icon::before { content: "−"; }
.faq-a { max-height: none; overflow: visible; }
.js .faq-a { max-height: 0; overflow: hidden; transition: max-height 280ms var(--ease-out); }
.faq-a p { padding: 0 1.4rem 1.3rem; color: var(--ink-soft); max-width: 58ch; }

.trust-row { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin-top: 3rem; }
.trust-tag { padding: 0.55em 1.2em; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); font-size: 0.85rem; font-weight: 600; }

/* ============================================================
   Booking
   ============================================================ */
.booking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.booking-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.2rem; }
.booking-card h3 { font-size: 1.25rem; margin-bottom: 0.7rem; }
.booking-card p { color: var(--ink-soft); font-size: 0.94rem; margin-bottom: 1.5rem; }
.booking-actions { display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; }
.booking-external-note { color: rgba(255,255,255,0.68); font-size: 0.8rem; margin-top: -1.1rem; }
.transparency-grid { grid-template-columns: repeat(4, 1fr); }

/* ============================================================
   Closing CTA
   ============================================================ */
.closing { text-align: center; }
.closing h2 { color: #fff; font-size: clamp(1.9rem, 2.6vw + 1rem, 2.8rem); max-width: 20ch; margin-inline: auto; }
.closing .lede { max-width: 46ch; margin: 1.2rem auto 2rem; text-align: center; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,0.7); padding: 4rem 0 2rem; font-size: 0.9rem; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 0.8fr 1.7fr 1.1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-brand { display: flex; align-items: center; gap: 0.7rem; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin-bottom: 1rem; }
.footer-grid p { max-width: 32ch; }
.footer-grid h5 { color: #fff; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1rem; font-family: var(--font-body); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-grid > div:nth-child(3) ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
.footer-grid a { text-decoration: none; color: rgba(255,255,255,0.82); transition: color 0.2s ease; }
.footer-grid a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 1.5rem; flex-wrap: wrap; gap: 0.8rem; font-size: 0.8rem; }

/* ============================================================
   Unterseiten: Themen-Detailseiten, Preise, Terminbuchung
   ============================================================ */

/* -- Mini-Hero (Themenseiten) -------------------------------- */
.topic-hero { position: relative; background: var(--navy); color: #fff; padding: 8.5rem 0 3.5rem; overflow: hidden; }
.topic-hero .eyebrow { color: var(--gold-light); margin-bottom: 1rem; }
.topic-hero h1 { color: #fff; font-size: clamp(2rem, 3vw + 0.8rem, 2.9rem); max-width: 20ch; }
.topic-hero .lede { color: rgba(255,255,255,0.85); margin: 1.2rem 0 1.8rem; max-width: 54ch; }
.topic-hero-actions { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 2rem; }
.tag-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.tag-pill { padding: 0.4em 1em; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); font-size: 0.82rem; color: rgba(255,255,255,0.85); }
.topic-hero > .ai-disclosure {
  position: absolute;
  z-index: 4;
  right: max(1.5rem, calc((100vw - 1180px) / 2));
  bottom: 1.25rem;
  display: inline-flex;
  align-items: center;
  padding: .42rem .68rem;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 3px;
  background: rgba(11,32,41,.78);
  color: rgba(255,255,255,.9);
  font-size: .72rem;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: .035em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* -- Ruhiges, animiertes Gradient-Feld statt Foto -------------- */
.hero-field { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-field span {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  will-change: transform;
}
.hero-field span:nth-child(1) {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  left: -8%; top: -18%;
  background: radial-gradient(circle at 30% 30%, var(--gold) 0%, transparent 70%);
  animation: driftA 22s ease-in-out infinite alternate;
}
.hero-field span:nth-child(2) {
  width: 40vw; height: 40vw; max-width: 560px; max-height: 560px;
  right: -10%; top: 6%;
  background: radial-gradient(circle at 60% 40%, var(--navy-mid) 0%, transparent 72%);
  opacity: 0.7;
  animation: driftB 26s ease-in-out infinite alternate;
}
.hero-field span:nth-child(3) {
  width: 30vw; height: 30vw; max-width: 420px; max-height: 420px;
  left: 30%; bottom: -22%;
  background: radial-gradient(circle at 50% 50%, var(--gold-light) 0%, transparent 70%);
  opacity: 0.28;
  animation: driftC 30s ease-in-out infinite alternate;
}
.topic-hero .wrap { position: relative; z-index: 1; }

/* Angebotsseiten: visuelles Gegengewicht zur Textspalte */
.topic-hero--visual::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 56%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 20%, #000 52%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 20%, #000 52%);
  opacity: 0.78;
  pointer-events: none;
}
.topic-hero--visual::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(90deg, rgba(11,32,41,0.96) 0%, rgba(11,32,41,0.78) 48%, rgba(11,32,41,0.2) 100%);
  pointer-events: none;
}
.topic-hero--visual .wrap { z-index: 3; }
.topic-hero--visual .hero-field { opacity: 0.5; }
.topic-hero--visual .wrap > .lede { max-width: 48ch; }
.topic-visual-narzissmus::after { background-image: url("../images/topic-narzissmus-room.webp"); }
.topic-visual-toxische-beziehungen::after { background-image: url("../images/topic-relationships.webp"); }
.topic-visual-selbstwert::after { background-image: url("../images/topic-selbstwert.webp"); }
.topic-visual-aengste::after { background-image: url("../images/topic-aengste.webp"); }
.topic-visual-stress::after { background-image: url("../images/topic-stress.webp"); }
.topic-visual-jugendamt::after { background-image: url("../images/topic-jugendamt.webp"); }
.topic-visual-verlustangst::after { background-image: url("../images/topic-verlustangst.webp"); }
.topic-visual-schlaf::after { background-image: url("../images/topic-calm.webp"); }
.topic-visual-selbstbewusstsein::after { background-image: url("../images/topic-selbstbewusstsein.webp"); }
.topic-visual-redeangst::after { background-image: url("../images/topic-redeangst.webp"); }
.topic-visual-motivation::after { background-image: url("../images/topic-motivation.webp"); }
.topic-visual-leistung::after { background-image: url("../images/topic-performance.webp"); }
.topic-visual-raucherentwoehnung::after { background-image: url("../images/topic-change.webp"); }

/* Themenspezifische Hero-Bewegung: nur dekorativ, Text bleibt stabil */
.topic-motion { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
.topic-motion span { position: absolute; display: block; opacity: 0; will-change: transform, opacity; }

/* Narzissmus: Ein echter Schaukelsessel bewegt sich kaum merklich auf seinen Kufen. */
.narzissmus-chair {
  position: absolute;
  z-index: 1;
  right: max(2rem, calc((100vw - 1180px) / 2));
  bottom: -12%;
  width: clamp(290px, 31vw, 470px);
  pointer-events: none;
  transform-origin: 50% 94%;
  animation: chair-rock 7s var(--ease-in-out) infinite;
  filter: drop-shadow(0 22px 22px rgba(4, 15, 20, .34));
  will-change: transform;
}
.narzissmus-chair img { width: 100%; height: auto; }
@keyframes chair-rock {
  0%, 18%, 100% { transform: translate3d(-1px, 0, 0) rotate(-.7deg); }
  50%, 66% { transform: translate3d(2px, -1px, 0) rotate(.85deg); }
}

/* Ergänzende Lichtstreifen bleiben sehr zurückhaltend. */
.topic-visual-narzissmus .topic-motion span {
  top: 0; bottom: 0; width: 8%; right: 18%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  animation: perception-shift 8s cubic-bezier(0.77, 0, 0.175, 1) infinite alternate;
}
.topic-visual-narzissmus .topic-motion span:nth-child(2) { right: 9%; animation-delay: -3s; animation-duration: 10s; }
.topic-visual-narzissmus .topic-motion span:nth-child(3) { right: 30%; animation-delay: -6s; animation-duration: 12s; }
@keyframes perception-shift { from { opacity: 0.05; transform: translate3d(-18px,0,0); } to { opacity: 0.3; transform: translate3d(22px,0,0); } }

/* Toxische Bindung: ein Lichtweg öffnet sich langsam */
.topic-visual-toxische-beziehungen .topic-motion span:first-child {
  right: 5%; top: 0; width: 42%; height: 100%;
  background: linear-gradient(110deg, transparent 20%, rgba(227,167,104,0.2) 52%, transparent 75%);
  animation: doorway-light 9s cubic-bezier(0.77, 0, 0.175, 1) infinite alternate;
}
@keyframes doorway-light { from { opacity: 0.08; transform: translate3d(-4%,0,0) scaleX(0.92); } to { opacity: 0.42; transform: translate3d(5%,0,0) scaleX(1.08); } }

/* Selbstwert: ruhige goldene Kreise breiten sich vom reparierten Gefäß aus */
.topic-visual-selbstwert .topic-motion span {
  right: 7%; bottom: 10%; width: 170px; height: 170px; border: 1px solid rgba(227,167,104,0.5); border-radius: 50%;
  animation: quiet-ripple 7s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}
.topic-visual-selbstwert .topic-motion span:nth-child(2) { animation-delay: -2.3s; }
.topic-visual-selbstwert .topic-motion span:nth-child(3) { animation-delay: -4.6s; }

/* Ängste: Wasserwellen werden größer und verschwinden */
.topic-visual-aengste .topic-motion span {
  right: 10%; bottom: 20%; width: 130px; height: 42px; border: 1px solid rgba(255,255,255,0.45); border-radius: 50%;
  animation: quiet-ripple 6s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}
.topic-visual-aengste .topic-motion span:nth-child(2) { animation-delay: -2s; }
.topic-visual-aengste .topic-motion span:nth-child(3) { animation-delay: -4s; }
@keyframes quiet-ripple { 0% { opacity: 0; transform: scale(0.35); } 18% { opacity: 0.48; } 100% { opacity: 0; transform: scale(1.65); } }

/* Erschöpfung: das warme Licht atmet langsamer und wird ruhiger */
.topic-visual-stress .topic-motion span:first-child,
.topic-visual-motivation .topic-motion span:first-child {
  right: 0; top: 8%; width: 44%; height: 84%; border-radius: 50%;
  background: radial-gradient(circle, rgba(227,167,104,0.3), transparent 68%);
  animation: lamp-breathe 8s cubic-bezier(0.77, 0, 0.175, 1) infinite alternate;
}
@keyframes lamp-breathe { from { opacity: 0.12; transform: scale(0.9); } to { opacity: 0.48; transform: scale(1.08); } }

/* Jugendamt & Gericht: ein ruhiger Fokusstreifen wandert über die Unterlagen */
.topic-visual-jugendamt .topic-motion span:first-child {
  right: 2%; bottom: 13%; width: 43%; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(227,167,104,0.75), transparent);
  animation: document-focus 7s cubic-bezier(0.77, 0, 0.175, 1) infinite alternate;
}
@keyframes document-focus { from { opacity: 0.05; transform: translate3d(0,-70px,0); } to { opacity: 0.55; transform: translate3d(0,50px,0); } }

/* Verlustangst: Morgenlicht zieht langsam über die geschlossene Technik */
.topic-visual-verlustangst .topic-motion span:first-child,
.topic-visual-leistung .topic-motion span:first-child {
  right: 0; top: 0; width: 50%; height: 100%;
  background: linear-gradient(115deg, transparent 25%, rgba(255,235,205,0.24) 50%, transparent 72%);
  animation: morning-pass 10s cubic-bezier(0.77, 0, 0.175, 1) infinite alternate;
}
@keyframes morning-pass { from { opacity: 0.08; transform: translate3d(-16%,0,0); } to { opacity: 0.5; transform: translate3d(18%,0,0); } }

/* Schlaf: hauchfeine Vorhangbewegung */
.topic-visual-schlaf .topic-motion span {
  top: -10%; right: 3%; width: 7%; height: 120%; border-radius: 50%;
  background: rgba(255,255,255,0.1); filter: blur(12px);
  animation: curtain-drift 8s cubic-bezier(0.77, 0, 0.175, 1) infinite alternate;
}
.topic-visual-schlaf .topic-motion span:nth-child(2) { right: 13%; animation-delay: -3s; }
.topic-visual-schlaf .topic-motion span:nth-child(3) { right: 23%; animation-delay: -5s; }
@keyframes curtain-drift { from { opacity: 0.06; transform: translate3d(-12px,0,0) skewX(-2deg); } to { opacity: 0.32; transform: translate3d(18px,0,0) skewX(3deg); } }

/* Selbstbewusstsein: der lichte Raum wird weiter */
.topic-visual-selbstbewusstsein .topic-motion span:first-child {
  right: 2%; top: 5%; width: 45%; height: 90%;
  background: radial-gradient(ellipse at 72% 50%, rgba(255,245,225,0.3), transparent 62%);
  animation: presence-open 9s cubic-bezier(0.77, 0, 0.175, 1) infinite alternate;
}
@keyframes presence-open { from { opacity: 0.08; transform: scaleX(0.82); } to { opacity: 0.52; transform: scaleX(1.08); } }

/* Redeangst: leise Schallwellen gehen vom Mikrofon aus */
.topic-visual-redeangst .topic-motion span {
  right: 9%; top: 29%; width: 70px; height: 70px; border: 1px solid rgba(255,255,255,0.55); border-radius: 50%;
  animation: voice-wave 5.5s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}
.topic-visual-redeangst .topic-motion span:nth-child(2) { animation-delay: -1.8s; }
.topic-visual-redeangst .topic-motion span:nth-child(3) { animation-delay: -3.6s; }
@keyframes voice-wave { 0% { opacity: 0; transform: scale(0.25); } 20% { opacity: 0.45; } 100% { opacity: 0; transform: scale(2.1); } }

/* Raucherentwöhnung: Rauch löst sich am offenen Fenster auf */
.topic-visual-raucherentwoehnung .topic-motion span {
  right: 20%; bottom: 22%; width: 86px; height: 170px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 36% 78%, rgba(244,247,248,.72) 0 8%, rgba(225,232,235,.34) 22%, transparent 50%),
    radial-gradient(ellipse at 62% 48%, rgba(244,247,248,.58) 0 10%, rgba(225,232,235,.25) 25%, transparent 54%),
    radial-gradient(ellipse at 38% 18%, rgba(244,247,248,.46) 0 9%, rgba(225,232,235,.18) 25%, transparent 52%);
  filter: blur(5px);
  animation: smoke-release 7s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}
.topic-visual-raucherentwoehnung .topic-motion span:nth-child(2) { right: 18%; animation-delay: -2.2s; animation-duration: 8.5s; }
.topic-visual-raucherentwoehnung .topic-motion span:nth-child(3) { right: 22%; animation-delay: -4.4s; animation-duration: 9.5s; }
@keyframes smoke-release { 0% { opacity: 0; transform: translate3d(0,40px,0) scale(.48) rotate(-8deg); } 18% { opacity: .72; } 68% { opacity: .42; } 100% { opacity: 0; transform: translate3d(54px,-160px,0) scale(1.45) rotate(18deg); } }

@keyframes driftA { from { transform: translate(0, 0) scale(1); } to { transform: translate(4%, 6%) scale(1.08); } }
@keyframes driftB { from { transform: translate(0, 0) scale(1); } to { transform: translate(-6%, 4%) scale(0.94); } }
@keyframes driftC { from { transform: translate(0, 0) scale(1); } to { transform: translate(5%, -5%) scale(1.1); } }

@media (prefers-reduced-motion: reduce) {
  .hero-field span { animation: none !important; }
  .narzissmus-chair { animation: none !important; transform: none !important; will-change: auto; }
}
@media (max-width: 640px) {
  .hero-field span { filter: blur(36px); }
  .topic-hero--visual::after { width: 100%; opacity: 0.48; -webkit-mask-image: none; mask-image: none; }
  .topic-hero--visual::before { background: linear-gradient(90deg, rgba(11,32,41,0.96) 0%, rgba(11,32,41,0.72) 100%); }
  .narzissmus-chair { right: -13vw; bottom: -5%; width: min(74vw, 340px); opacity: .56; }
}

/* -- Checkliste ------------------------------------------------ */
.check-list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.check-list li { display: flex; align-items: flex-start; gap: 0.7em; font-size: 0.98rem; color: var(--ink); }
.check-list svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; margin-top: 0.15em; color: var(--gold-deep); }
.check-avatar {
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
  margin-bottom: 1rem;
}

/* -- Rahmen Mini-Preisbox ---------------------------------------*/
.price-mini {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center;
}
.price-mini-figure b { display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--navy); }
.price-mini-figure span { font-size: 0.85rem; color: var(--ink-soft); }
.price-mini-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }

/* -- 3-stufige Preis-Tiers --------------------------------------*/
.tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; align-items: stretch; }
.tier-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.9rem; display: flex; flex-direction: column; }
.tier-card--featured {
  position: relative;
  background: var(--navy);
  border-color: var(--gold);
  color: #fff;
  box-shadow: 0 24px 48px -30px rgba(11,32,41,0.7);
}
.tier-featured-tag { position: absolute; top: -0.8rem; left: 1.6rem; background: var(--gold-deep); color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; padding: 0.35em 0.9em; border-radius: 999px; }
.tier-num { font-family: var(--font-display); color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 0.6rem; }
.tier-card h4 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.tier-card p { color: var(--ink-soft); font-size: 0.9rem; flex-grow: 1; }
.tier-price { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--navy); margin-top: 1.2rem; }
.tier-card--featured .tier-num { color: var(--gold-light); }
.tier-card--featured h4,
.tier-card--featured .tier-price { color: #fff; }
.tier-card--featured p { color: rgba(255,255,255,0.78); }

/* -- Merkliste (2x3 Grid, "Woran du es merkst") ------------------*/
.trait-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.trait-card h4 { font-size: 1rem; color: var(--navy); margin-bottom: 0.4rem; }
.trait-card p { font-size: 0.9rem; color: var(--ink-soft); }

/* -- Callout / Wichtig zu wissen ----------------------------------*/
.callout { background: var(--mist); border-left: 3px solid var(--gold); border-radius: var(--radius-sm); padding: 1.3rem 1.5rem; margin-top: 1.8rem; }
.callout h4 { font-size: 0.95rem; color: var(--navy); margin-bottom: 0.4rem; }
.callout p { font-size: 0.9rem; color: var(--ink-soft); }

/* -- Verwandte Themen --------------------------------------------*/
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.related-link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.4rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--navy); font-weight: 700; font-size: 0.95rem;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.related-link:hover { border-color: var(--gold); transform: translateX(2px); }
.related-link svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--gold-deep); }

/* -- Preise: zwei klare Entscheidungen + kompakte Paketübersicht --*/
.pricing-page .topic-hero .lede { max-width: 66ch; }
.pricing-section { background: #f6f1e7; }
.pricing-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .65fr);
  align-items: end;
  gap: clamp(2rem, 6vw, 6rem);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.pricing-intro h2 { max-width: 18ch; font-size: clamp(2.25rem, 4vw, 4rem); }
.pricing-intro p { max-width: 48ch; color: var(--ink-soft); }
.price-offer-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(1.2rem, 3vw, 2.2rem);
  align-items: stretch;
}
.price-offer {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(1.7rem, 3.6vw, 3.25rem);
  border: 1px solid #d9d4c9;
  border-radius: 20px;
  background: rgba(251,250,247,.76);
}
.price-offer--featured {
  border: 2px solid var(--gold);
  background: var(--paper);
  box-shadow: 0 28px 60px -44px rgba(16,42,54,.55);
  transition-delay: 130ms;
}
.price-offer-badge {
  align-self: flex-start;
  margin-bottom: 1.8rem;
  padding: .52rem .9rem;
  border-radius: 999px;
  background: var(--sage);
  color: var(--navy);
  font-size: .69rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.price-offer--featured .price-offer-badge { background: var(--navy); color: #fff; }
.price-offer h2 { font-size: clamp(1.65rem, 2.6vw, 2.35rem); }
.price-offer-total {
  display: flex;
  align-items: flex-start;
  gap: .18em;
  margin: 1.4rem 0 .2rem;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(3.45rem, 6vw, 5.6rem);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: .9;
  letter-spacing: -.04em;
}
.price-offer-total sup { padding-top: .2em; font-size: .36em; line-height: 1; letter-spacing: 0; }
.price-offer-per { color: var(--ink-soft); font-size: .88rem; font-weight: 600; }
.price-offer-reference { margin-top: .45rem; color: var(--ink-soft); font-size: .78rem; }
.price-offer-copy { max-width: 48ch; margin: 1.65rem 0 1.5rem; color: var(--ink-soft); font-size: .94rem; }
.price-includes { margin-top: auto; padding-top: 1.5rem; border-top: 1px solid #ddd6ca; }
.price-includes h3 { margin-bottom: .7rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.price-includes ul { list-style: none; margin: 0 0 1.7rem; padding: 0; }
.price-includes li {
  display: grid;
  grid-template-columns: 1.55rem 1fr;
  gap: .75rem;
  align-items: center;
  padding: .72rem 0;
  border-bottom: 1px solid #e3ddd2;
  color: var(--navy);
  font-size: .88rem;
  font-weight: 550;
}
.price-includes svg {
  width: 1.35rem;
  height: 1.35rem;
  padding: .23rem;
  border-radius: 50%;
  background: #ead8c5;
  color: var(--gold-deep);
}
.price-offer .btn { width: 100%; border-radius: 999px; white-space: normal; text-align: center; justify-content: center; }
.price-offer--featured .btn--outline { border-color: var(--gold); background: var(--gold); color: #fff; }
.price-offer--featured .btn--outline:hover { border-color: var(--gold-deeper); background: var(--gold-deeper); }

.package-overview {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  padding: clamp(1.7rem, 3vw, 2.6rem);
  border-radius: 18px;
  background: var(--navy);
  color: #fff;
}
.package-overview-head { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: 1.5rem; }
.package-overview-head h2 { color: #fff; font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.package-overview-head p { max-width: 42ch; color: rgba(255,255,255,.68); font-size: .86rem; }
.package-table { width: 100%; border-collapse: collapse; border-top: 1px solid rgba(255,255,255,.22); }
.package-table th, .package-table td { padding: 1rem .15rem; border-bottom: 1px solid rgba(255,255,255,.16); text-align: left; vertical-align: middle; }
.package-table thead th { padding-top: .65rem; color: rgba(255,255,255,.54); font-size: .67rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.package-name { color: #fff; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }
.package-total { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.package-rate { color: var(--gold-light); font-size: .86rem; font-weight: 650; }
.package-comparison { color: rgba(255,255,255,.62); font-size: .78rem; }
.package-foot { display: flex; justify-content: space-between; gap: 2rem; align-items: center; margin-top: 1.5rem; }
.package-foot p { max-width: 64ch; color: rgba(255,255,255,.68); font-size: .82rem; }
.package-foot .btn { flex: 0 0 auto; }

.price-guidance-layout { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: clamp(3rem, 8vw, 8rem); align-items: start; }
.price-guidance-intro h2 { max-width: 16ch; font-size: clamp(2.1rem, 3.6vw, 3.5rem); }
.price-guidance-intro p { max-width: 40ch; margin: 1.2rem 0 1.7rem; color: var(--ink-soft); }
.price-guidance-list { margin: 0; padding: 0; list-style: none; }
.price-guidance-list li { display: grid; grid-template-columns: minmax(7.5rem, .35fr) 1fr; gap: 1.25rem; padding: 1.35rem 0; border-top: 1px solid #d3d9d3; }
.price-guidance-list li:last-child { border-bottom: 1px solid #d3d9d3; }
.price-guidance-list > li > span { color: var(--gold-deep); font-size: .72rem; font-weight: 750; letter-spacing: .08em; }
.price-guidance-list strong { display: block; color: var(--navy); font-size: 1rem; }
.price-guidance-list p { max-width: 55ch; margin-top: .3rem; color: var(--ink-soft); font-size: .88rem; }

@media (max-width: 860px) {
  .pricing-intro, .price-offer-grid, .price-guidance-layout { grid-template-columns: 1fr; }
  .pricing-intro { gap: 1.2rem; }
  .pricing-intro h2 { max-width: 22ch; }
  .package-overview-head, .package-foot { align-items: flex-start; flex-direction: column; }
  .package-foot .btn { width: 100%; }
}

@media (max-width: 640px) {
  .price-offer { padding: 1.55rem; border-radius: 16px; }
  .price-offer-badge { margin-bottom: 1.35rem; }
  .price-offer-total { font-size: clamp(3.25rem, 17vw, 4.55rem); }
  .package-overview { padding: 1.5rem; border-radius: 14px; }
  .package-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
  .package-table, .package-table tbody { display: block; width: 100%; }
  .package-table tbody tr { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .package-table tbody th, .package-table tbody td { padding: 0; border: 0; }
  .package-name { grid-column: 1; grid-row: 1; }
  .package-total { grid-column: 2; grid-row: 1; text-align: right !important; }
  .package-rate { grid-column: 1; grid-row: 2; }
  .package-comparison { grid-column: 2; grid-row: 2; text-align: right !important; }
  .price-guidance-list li { grid-template-columns: 1fr; gap: .45rem; }
}

/* -- Legal-Prosa (Impressum/Datenschutz) --------------------------*/
.legal-prose { max-width: 74ch; }
.legal-prose h2 { font-size: 1.5rem; margin-top: 2.6rem; margin-bottom: 0.9rem; }
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose h3 { font-size: 1.08rem; margin-top: 1.6rem; margin-bottom: 0.5rem; color: var(--navy); }
.legal-prose p { color: var(--ink-soft); font-size: 0.96rem; margin-bottom: 1rem; }
.legal-prose ul { color: var(--ink-soft); font-size: 0.96rem; padding-left: 1.2rem; margin-bottom: 1rem; }
.legal-prose li { margin-bottom: 0.4rem; }
.legal-prose a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--line); }
.legal-callout { background: var(--mist); border-radius: var(--radius); padding: 1.4rem 1.6rem; margin-bottom: 2.4rem; font-size: 0.92rem; color: var(--ink-soft); }
.legal-address { background: var(--mist); border-radius: var(--radius-sm); padding: 1.2rem 1.4rem; font-size: 0.95rem; margin: 1rem 0; }
.legal-address p { margin-bottom: 0.2rem; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .topics-grid, .method-grid { grid-template-columns: repeat(2, 1fr); }
  .feature, .about-grid { grid-template-columns: 1fr; }
  .feature-media, .about-media img { aspect-ratio: 16/9; }
  .trust-bar .wrap { grid-template-columns: repeat(2, 1fr); row-gap: 1.2rem; }
  .trust-stat:nth-child(3) { border-left: none; }
  .process-grid, .point-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 2.4rem; }
  .tier-grid, .trait-grid, .related-grid, .price-grid { grid-template-columns: repeat(2, 1fr); }
  .price-mini { grid-template-columns: 1fr; text-align: left; }
  .transparency-grid { grid-template-columns: repeat(2, 1fr); }
  .story-journey-head { grid-template-columns: 1fr 1fr; }
  .story-journey-head .eyebrow { grid-column: 1 / -1; }
  .story-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
}

@media (max-width: 860px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .hero { min-height: 560px; }
  .booking-grid { grid-template-columns: 1fr; }
  /* Der CTA-Button im Header darf das Hamburger-Icon nie aus dem
     sichtbaren Bereich schieben — auf schmalen Screens lebt der CTA
     nur noch im aufgeklappten Menü, nicht zusätzlich in der Kopfzeile. */
  .header-actions .btn { display: none; }
  .header-actions { gap: 0; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  section { padding: 3.8rem 0; }
  .hero .wrap { padding-top: 6.5rem; }
  .topics-grid, .method-grid, .process-grid, .point-grid,
  .principle-grid, .transparency-grid, .tier-grid, .trait-grid,
  .related-grid, .price-grid, .booking-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .topics-grid > *, .method-grid > *, .process-grid > *, .point-grid > *,
  .principle-grid > *, .tier-grid > *, .trait-grid > *, .related-grid > *,
  .price-grid > *, .booking-grid > *, .faq-layout > *, .price-mini > * {
    min-width: 0;
  }
  .btn { max-width: 100%; white-space: normal; text-align: center; justify-content: center; }
  .price-mini { padding: 1.5rem; }
  .price-mini-actions, .price-mini-actions .btn, .faq-aside-card .btn { width: 100%; }
  .legal-prose, .legal-prose a, .booking-card, .faq-q { overflow-wrap: anywhere; }
  .stat-row-methode { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1.4rem !important; }
  .stat-row-methode > * { min-width: 0; overflow-wrap: anywhere; }
  .trust-bar .wrap { grid-template-columns: 1fr 1fr; }
  .trust-stat { border-left: none; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > div:nth-child(3) ul { grid-template-columns: 1fr; }
  .tier-grid, .trait-grid, .related-grid, .price-grid { grid-template-columns: 1fr; }
  .topic-hero { padding-top: 6.5rem; }
  .topic-hero-actions { flex-direction: column; align-items: flex-start; }
  .topic-hero-actions .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
  .story-journey-head { grid-template-columns: 1fr; gap: 1rem; }
  .story-journey-head .eyebrow { grid-column: auto; }
  .story-track { display: flex; overflow-x: auto; gap: 0.9rem; padding: 0 1.5rem 1.2rem; margin-inline: -1.5rem; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .story-step { flex: 0 0 78vw; scroll-snap-align: start; }
  .story-step:nth-child(even) { padding-top: 0; }
  .story-step figure { height: 390px; }
}

@media (prefers-reduced-motion: reduce) {
  .story-step img { animation: none !important; transform: none !important; height: 100%; will-change: auto; }
  .topic-motion { display: none !important; }
}

/* ============================================================
   Startseite v3 — klare Dramaturgie, große Flächen, ruhige Tiefe
   ============================================================ */
.skip-link {
  position: fixed;
  z-index: 900;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.7rem 1rem;
  background: var(--paper);
  color: var(--navy);
  border-radius: 4px;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 180ms var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.home-v3 { background: var(--paper); }
.home-v3 section { padding: clamp(5.5rem, 8vw, 8rem) 0; }
.home-v3 .site-header { box-shadow: 0 12px 40px -30px rgba(11, 32, 41, 0.75); }
.home-v3 .main-nav { gap: clamp(1rem, 1.7vw, 1.8rem); }

/* Hero: Nutzen links, persönliche Sicherheit rechts */
.home-hero {
  min-height: min(820px, 100dvh);
  align-items: stretch;
  background: var(--navy-deep);
}
.home-hero .hero-bg img { object-position: 66% 44%; }
.home-hero .hero-bg::after {
  background:
    linear-gradient(90deg, rgba(11,32,41,.98) 0%, rgba(11,32,41,.93) 36%, rgba(11,32,41,.54) 65%, rgba(11,32,41,.14) 100%),
    linear-gradient(0deg, rgba(11,32,41,.72), transparent 45%);
}
.home-hero-glow {
  position: absolute;
  z-index: 1;
  width: 34rem;
  height: 34rem;
  left: -17rem;
  bottom: -21rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(183,111,50,.28), transparent 66%);
  pointer-events: none;
  animation: home-ambient 12s var(--ease-in-out) infinite alternate;
}
@keyframes home-ambient {
  from { opacity: .45; transform: scale(.94); }
  to { opacity: .9; transform: scale(1.08); }
}
.home-hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, .52fr);
  align-items: end;
  gap: 5rem;
  width: var(--wrap);
  padding-top: 10rem;
  padding-bottom: 4.5rem;
}
.home-hero .hero-copy { max-width: 690px; }
.home-hero .hero-copy h1 {
  max-width: 15ch;
  font-size: clamp(3.15rem, 5.4vw, 5.3rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.04em;
}
.home-hero .hero-copy .lede {
  max-width: 53ch;
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  line-height: 1.7;
}
.hero-microcopy {
  margin-top: 1.15rem;
  color: rgba(255,255,255,.6);
  font-size: .8rem;
  letter-spacing: .025em;
}
.hero-assurance {
  align-self: end;
  justify-self: end;
  width: min(100%, 290px);
  padding: 1.5rem;
  background: rgba(250,248,243,.92);
  color: var(--ink);
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 2px;
  box-shadow: 0 24px 70px -40px rgba(0,0,0,.7);
  backdrop-filter: blur(14px);
}
.hero-assurance-mark {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-deep);
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 700;
}
.hero-assurance p {
  margin: 1rem 0 .75rem;
  font-family: var(--font-display);
  color: var(--navy);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.25;
}
.hero-assurance > span:last-child { color: var(--ink-soft); font-size: .76rem; line-height: 1.5; }

/* Vertrauensleiste direkt nach dem Versprechen */
.confidence-rail { padding: 0 !important; background: #f3f0e9; border-bottom: 1px solid var(--line); }
.confidence-rail .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.confidence-item { padding: 1.55rem 1.5rem; border-left: 1px solid var(--line); }
.confidence-item:first-child { border-left: 0; }
.confidence-item strong { display: block; color: var(--navy); font-size: .88rem; font-weight: 750; }
.confidence-item span { display: block; margin-top: .15rem; color: var(--ink-soft); font-size: .76rem; }

/* Wiederkehrender Editorial-Header */
.editorial-head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr);
  align-items: end;
  gap: clamp(2rem, 6vw, 6rem);
  margin-bottom: clamp(2.7rem, 5vw, 4.5rem);
}
.editorial-head h2 {
  margin-top: .9rem;
  max-width: 17ch;
  font-size: clamp(2.4rem, 4vw, 4.1rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
}
.editorial-head > p { max-width: 43ch; color: var(--ink-soft); font-size: .98rem; }

/* Drei echte Einstiegssituationen statt Kartenwand */
.situation-section { background: var(--paper); }
.situation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .72fr);
  grid-template-rows: repeat(2, minmax(250px, 1fr));
  gap: 1rem;
}
.situation-card {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  padding: clamp(1.7rem, 3vw, 2.7rem);
  border-radius: 3px;
  color: var(--navy);
  text-decoration: none;
}
.situation-card--large { grid-row: 1 / 3; min-height: 560px; color: #fff; }
.situation-card--large img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.situation-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,32,41,.92), rgba(11,32,41,.05) 72%); }
.situation-content { position: absolute; z-index: 1; inset: auto 2.7rem 2.7rem; display: flex; flex-direction: column; align-items: flex-start; }
.situation-card--calm { display: flex; flex-direction: column; justify-content: flex-end; background: var(--sage); }
.situation-card--warm { display: flex; flex-direction: column; justify-content: flex-end; background: #ead8c5; }
.situation-index { display: block; margin-bottom: 1rem; font-size: .72rem; font-weight: 800; letter-spacing: .1em; opacity: .72; }
.situation-card strong { display: block; max-width: 19ch; font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.65rem); line-height: 1.02; letter-spacing: -.025em; }
.situation-card--large strong { font-size: clamp(2.3rem, 4.3vw, 4.2rem); }
.situation-card span:not(.situation-index):not(.situation-shade):not(.situation-content):not(.ai-card-label) { display: block; max-width: 42ch; margin-top: .8rem; font-size: .9rem; line-height: 1.55; opacity: .82; }
.situation-card em { display: block; margin-top: 1.5rem; font-style: normal; font-size: .8rem; font-weight: 750; }
.ai-image-notice {
  max-width: 78ch;
  margin: -2.2rem 0 2.2rem auto;
  padding-left: 1rem;
  border-left: 2px solid rgba(183,111,50,.6);
  color: var(--ink-soft);
  font-size: .72rem;
  line-height: 1.55;
}
.ai-card-label {
  position: absolute;
  z-index: 3;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  width: max-content;
  max-width: calc(100% - 2rem);
  padding: .38rem .6rem;
  border: 1px solid rgba(255,255,255,.27);
  border-radius: 3px;
  background: rgba(11,32,41,.76);
  color: rgba(255,255,255,.92);
  font-size: .6rem;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: .035em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Text/Bild-Kapitel */
.insight-section { background: #f3f0e9; }
.insight-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.insight-media { margin: 0; position: relative; }
.insight-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 3px; }
.insight-media figcaption {
  position: absolute;
  right: -2rem;
  bottom: 2rem;
  width: min(280px, 72%);
  padding: 1.35rem 1.5rem;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.35;
  box-shadow: 0 22px 55px -38px rgba(16,42,54,.7);
}
.insight-copy h2 { margin-top: .9rem; max-width: 13ch; font-size: clamp(2.7rem, 4.6vw, 4.7rem); font-weight: 700; letter-spacing: -.04em; }
.insight-copy > .lede { margin-top: 1.5rem; max-width: 54ch; }
.editorial-list { list-style: none; margin: 2.2rem 0 0; padding: 0; }
.editorial-list li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding: 1.2rem 0; border-top: 1px solid #d8d5ce; }
.editorial-list li > span { color: var(--gold-deep); font-size: .75rem; font-weight: 800; letter-spacing: .08em; }
.editorial-list strong { display: block; color: var(--navy); font-size: .96rem; }
.editorial-list p { margin-top: .25rem; color: var(--ink-soft); font-size: .86rem; }

/* Methode als vertikale Reise */
.method-stage { background: var(--navy-deep) !important; }
.method-stage-grid { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr); gap: clamp(4rem, 10vw, 10rem); align-items: start; }
.method-stage-intro { position: sticky; top: 8rem; }
.method-stage-intro h2 { margin-top: .9rem; max-width: 12ch; color: #fff; font-size: clamp(2.7rem, 4.2vw, 4.3rem); font-weight: 700; letter-spacing: -.04em; }
.method-stage-intro p { max-width: 44ch; margin: 1.4rem 0 1.8rem; color: rgba(255,255,255,.68); }
.method-timeline { list-style: none; margin: 0; padding: 0; counter-reset: method; }
.method-timeline li { display: grid; grid-template-columns: 4.2rem 1fr; gap: 1.4rem; padding: 1.9rem 0 2.1rem; border-top: 1px solid rgba(255,255,255,.14); }
.method-timeline li:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.method-timeline li > span { color: var(--gold-light); font-size: .75rem; font-weight: 800; letter-spacing: .1em; }
.method-timeline h3 { color: #fff; font-size: clamp(1.65rem, 2.5vw, 2.3rem); font-weight: 650; }
.method-timeline p { max-width: 48ch; margin-top: .55rem; color: rgba(255,255,255,.65); font-size: .92rem; }

/* Themenbibliothek: vier visuelle Schwerpunkte + alle übrigen Links */
.theme-library { background: var(--paper); }
.featured-themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.featured-theme { position: relative; min-height: 430px; overflow: hidden; border-radius: 3px; color: #fff; text-decoration: none; }
.featured-theme img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 650ms var(--ease-out); }
.featured-theme::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,32,41,.93), rgba(11,32,41,.06) 75%); }
.featured-theme > span:not(.ai-card-label) { position: absolute; z-index: 1; inset: auto 2rem 2rem; display: flex; flex-direction: column; align-items: flex-start; }
.featured-theme small { margin-bottom: .7rem; color: var(--gold-light); font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.featured-theme strong { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1; font-weight: 700; }
.featured-theme em { max-width: 43ch; margin-top: .8rem; color: rgba(255,255,255,.72); font-size: .78rem; font-style: normal; line-height: 1.5; }
.more-themes { display: grid; grid-template-columns: minmax(230px, .55fr) minmax(0, 1.45fr); gap: clamp(2.5rem, 6vw, 6rem); margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2.3rem; border-top: 1px solid var(--line); }
.more-themes-intro p { max-width: 28ch; margin-top: .75rem; color: var(--ink-soft); font-size: .9rem; }
.theme-link-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.2rem; }
.theme-link-list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); color: var(--navy); font-size: .88rem; font-weight: 680; text-decoration: none; }
.theme-link-list b { color: var(--gold-deep); font-size: .9rem; transition: transform 180ms var(--ease-out); }

/* Persönliches Vertrauen */
.about-signature { background: #edf1ec; }
.about-signature-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(3.5rem, 8vw, 8rem); align-items: center; }
.about-portrait { position: relative; }
.about-portrait img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 48% 48% 4px 4px; }
.portrait-note { position: absolute; right: -1.5rem; bottom: 2rem; padding: 1rem 1.25rem; background: var(--paper); color: var(--navy); font-family: var(--font-display); font-size: 1rem; line-height: 1.25; box-shadow: 0 22px 55px -38px rgba(16,42,54,.7); }
.portrait-note small { color: var(--ink-soft); font-family: var(--font-body); font-size: .63rem; letter-spacing: .06em; text-transform: uppercase; }
.about-signature-copy h2 { margin-top: .9rem; max-width: 14ch; font-size: clamp(2.7rem, 4.4vw, 4.5rem); font-weight: 700; letter-spacing: -.04em; }
.about-signature-copy > .lede { margin-top: 1.5rem; max-width: 54ch; }
.about-signature-copy blockquote { margin: 2rem 0; padding: 0 0 0 1.5rem; border-left: 2px solid var(--gold); color: var(--navy); font-family: var(--font-accent); font-size: clamp(1.2rem, 2vw, 1.55rem); font-style: italic; line-height: 1.35; }
.assurance-list { display: flex; flex-direction: column; gap: .65rem; }
.assurance-list span { position: relative; padding-left: 1.4rem; color: var(--ink-soft); font-size: .86rem; }
.assurance-list span::before { content: ""; position: absolute; left: 0; top: .58em; width: .48rem; height: .48rem; border-radius: 50%; background: var(--gold); }
.about-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.4rem; margin-top: 2rem; }

/* Weg und Preis nebeneinander */
.booking-path { background: var(--paper); }
.booking-path-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(290px, .75fr); gap: clamp(2rem, 6vw, 6rem); align-items: stretch; }
.booking-steps { list-style: none; margin: 0; padding: 0; }
.booking-steps li { display: grid; grid-template-columns: 3rem 1fr; gap: 1.2rem; padding: 1.45rem 0; border-top: 1px solid var(--line); }
.booking-steps li:last-child { border-bottom: 1px solid var(--line); }
.booking-steps li > span { display: flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-deep); font-family: var(--font-display); font-size: .85rem; }
.booking-steps strong { color: var(--navy); font-size: 1rem; }
.booking-steps p { max-width: 55ch; margin-top: .35rem; color: var(--ink-soft); font-size: .88rem; }
.price-clarity { padding: clamp(2rem, 4vw, 3.3rem); background: var(--navy); color: #fff; border-radius: 3px; }
.price-clarity .eyebrow { color: var(--gold-light); }
.price-kicker { margin-top: 2.5rem; color: rgba(255,255,255,.66); font-size: .8rem; }
.price-clarity > strong { display: block; margin: .15rem 0 .8rem; color: #fff; font-family: var(--font-display); font-size: clamp(3rem, 5vw, 4.6rem); font-weight: 700; line-height: 1; }
.price-clarity > p:not(.price-kicker) { max-width: 33ch; margin-bottom: 2rem; color: rgba(255,255,255,.67); font-size: .86rem; }
.price-clarity .btn--outline { color: #fff; border-color: rgba(255,255,255,.28); }

/* FAQ ohne zusätzliche Kartenwand */
.faq-premium { background: #f3f0e9; }
.faq-premium-intro h2 { margin-top: .9rem; max-width: 13ch; font-size: clamp(2.7rem, 4.2vw, 4.2rem); font-weight: 700; letter-spacing: -.04em; }
.faq-premium-intro > p { max-width: 40ch; margin: 1.3rem 0 1.7rem; color: var(--ink-soft); }
.faq-premium .faq-item { background: transparent; border: 0; border-top: 1px solid #d7d3cb; border-radius: 0; margin: 0; }
.faq-premium .faq-item:last-child { border-bottom: 1px solid #d7d3cb; }
.faq-premium .faq-q { padding: 1.35rem 0; }
.faq-premium .faq-a p { padding: 0 3rem 1.35rem 0; }

/* Abschluss als ein eindeutiger nächster Schritt */
.final-invitation { position: relative; min-height: 630px; display: flex; align-items: center; overflow: hidden; background: var(--navy-deep); color: #fff; }
.final-invitation-image { position: absolute; inset: 0 0 0 47%; background: url("../images/story-3.webp") center/cover no-repeat; opacity: .66; }
.final-invitation::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,32,41,1) 0%, rgba(11,32,41,.96) 46%, rgba(11,32,41,.2) 100%); }
.final-invitation .wrap { position: relative; z-index: 1; }
.final-invitation-copy { max-width: 650px; }
.final-invitation-copy .eyebrow { color: var(--gold-light); }
.final-invitation h2 { margin-top: 1rem; max-width: 13ch; color: #fff; font-size: clamp(2.8rem, 4.7vw, 4.9rem); font-weight: 700; letter-spacing: -.04em; }
.final-invitation p { max-width: 50ch; margin-top: 1.4rem; color: rgba(255,255,255,.72); }
.final-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 2rem; }
.final-mail { color: rgba(255,255,255,.78); font-size: .85rem; font-weight: 700; text-underline-offset: .3em; }

/* Hover nur dort, wo ein echter Mauszeiger vorhanden ist */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .featured-theme:hover img { transform: scale(1.035); }
  .theme-link-list a:hover b { transform: translateX(4px); }
  .situation-card:hover em { text-decoration: underline; text-underline-offset: .25em; }
}

@media (max-width: 1050px) {
  .home-v3 .main-nav a:nth-last-child(1) { display: none; }
  .home-hero .wrap { grid-template-columns: minmax(0, 1fr) 230px; gap: 2rem; }
  .editorial-head { grid-template-columns: 1fr .55fr; gap: 3rem; }
  .about-signature-grid, .insight-grid { gap: 4rem; }
}

@media (max-width: 860px) {
  .home-hero { min-height: 700px; }
  .home-hero .wrap { grid-template-columns: 1fr; align-content: end; }
  .home-hero .hero-copy { max-width: 610px; }
  .home-hero .hero-copy h1 { font-size: clamp(3rem, 9vw, 4.6rem); }
  .hero-assurance { display: none; }
  .confidence-rail .wrap { grid-template-columns: repeat(2, 1fr); }
  .confidence-item:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .confidence-item:nth-child(4) { border-top: 1px solid var(--line); }
  .editorial-head { grid-template-columns: 1fr; gap: 1.4rem; }
  .editorial-head h2 { max-width: 20ch; }
  .situation-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .situation-card--large { grid-column: 1 / -1; grid-row: auto; min-height: 520px; }
  .insight-grid, .about-signature-grid, .method-stage-grid, .booking-path-grid { grid-template-columns: 1fr; }
  .insight-media { max-width: 620px; }
  .insight-media img { aspect-ratio: 16/11; }
  .method-stage-intro { position: static; }
  .method-stage-intro h2 { max-width: 16ch; }
  .more-themes { grid-template-columns: 1fr; gap: 1.5rem; }
  .about-portrait { max-width: 570px; }
  .about-portrait img { aspect-ratio: 4/4.5; object-position: center 22%; }
  .faq-premium .faq-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .home-v3 section { padding: 4.6rem 0; }
  .home-hero { min-height: 670px; }
  .home-hero .hero-bg img { object-position: 70% center; }
  .home-hero .hero-bg::after { background: linear-gradient(90deg, rgba(11,32,41,.98) 0%, rgba(11,32,41,.88) 66%, rgba(11,32,41,.55) 100%); }
  .home-hero .wrap { padding-top: 7.5rem; padding-bottom: 3rem; }
  .home-hero .hero-copy h1 { max-width: 13ch; font-size: clamp(2.65rem, 12vw, 3.8rem); }
  .home-hero .hero-copy .lede { font-size: .96rem; }
  .home-hero .hero-actions .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
  .confidence-rail .wrap { grid-template-columns: 1fr; }
  .confidence-item { border-left: 0; border-top: 1px solid var(--line); padding: 1.1rem 0; }
  .confidence-item:first-child { border-top: 0; }
  .editorial-head h2, .insight-copy h2, .about-signature-copy h2, .faq-premium-intro h2 { font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .situation-grid { display: flex; flex-direction: column; }
  .situation-card--large { min-height: 470px; }
  .situation-card--calm, .situation-card--warm { min-height: 300px; }
  .situation-content { inset: auto 1.6rem 1.6rem; }
  .insight-media figcaption, .portrait-note { position: relative; right: auto; bottom: auto; width: calc(100% - 1.5rem); margin: -1.5rem 0 0 1.5rem; }
  .method-timeline li { grid-template-columns: 2.8rem 1fr; }
  .featured-themes { grid-template-columns: 1fr; }
  .featured-theme { min-height: 390px; }
  .featured-theme > span:not(.ai-card-label) { inset: auto 1.5rem 1.5rem; }
  .ai-image-notice { margin: -1rem 0 2rem; }
  .topic-hero > .ai-disclosure {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 4;
    display: flex;
    width: max-content;
    margin: 1rem 1.5rem 0 auto;
  }
  .theme-link-list { grid-template-columns: 1fr; }
  .about-portrait img { aspect-ratio: 4/5; }
  .about-actions, .final-actions { align-items: flex-start; flex-direction: column; }
  .booking-steps li { grid-template-columns: 2.5rem 1fr; }
  .final-invitation { min-height: 650px; align-items: flex-end; }
  .final-invitation-image { inset: 0; opacity: .36; }
  .final-invitation::after { background: linear-gradient(0deg, rgba(11,32,41,1) 0%, rgba(11,32,41,.82) 72%, rgba(11,32,41,.4) 100%); }
  .final-invitation h2 { font-size: clamp(2.5rem, 12vw, 3.6rem); }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-glow, .home-hero .hero-bg img { animation: none !important; transform: none !important; }
  .home-v3 .reveal, .home-v3 .reveal-head { transform: none; transition: opacity 200ms ease; }
  .featured-theme img, .theme-link-list b, .btn { transition-property: color, background-color, border-color, opacity; }
}

/* ============================================================
   Startseite stabil — kompakter Aufbau vor dem v3-Experiment
   ============================================================ */
.home-stable .hero {
  padding: 0;
  min-height: min(640px, 88dvh);
}
.home-stable .trust-bar {
  padding: 0;
}
.home-stable .site-header {
  padding: .65rem 0;
}
.home-stable .site-header .btn {
  padding: .78em 1.35em;
}
.home-stable .hero-bg img {
  object-position: 66% 44%;
}
.home-stable .hero-copy {
  max-width: 610px;
}
.home-stable .hero-copy h1 {
  max-width: 16ch;
  font-size: clamp(2.7rem, 3.55vw, 3.55rem);
  line-height: .98;
  letter-spacing: -.012em;
}
.home-stable .hero-copy .lede {
  max-width: 50ch;
  font-weight: 400;
  letter-spacing: .002em;
}
.home-stable .story-journey-head h2,
.home-stable .section-head h2,
.home-stable .section-head--center h2 {
  text-wrap: balance;
}

@media (max-width: 1120px) {
  .home-stable .main-nav { gap: 1.25rem; }
  .home-stable .main-nav a:last-child { display: none; }
}

@media (max-width: 860px) {
  .home-stable .hero {
    min-height: min(590px, 88dvh);
  }
}

@media (max-width: 640px) {
  .home-stable .hero {
    min-height: 570px;
  }
  .home-stable .hero-bg img {
    object-position: 70% center;
  }
  .home-stable .hero-bg::after {
    background: linear-gradient(90deg, rgba(11,32,41,.97) 0%, rgba(11,32,41,.86) 64%, rgba(11,32,41,.48) 100%);
  }
  .home-stable .hero-copy h1 {
    max-width: 14ch;
    font-size: clamp(2.25rem, 10vw, 2.85rem);
  }
  .home-stable .hero-copy .lede {
    font-size: .98rem;
    line-height: 1.6;
  }
  .home-stable .hero-microcopy {
    margin-top: .8rem;
  }
}

/* Der Ablauf wird nicht dekorativ bewegt, sondern als vierteilige Folge erklärt. */
.hypnosis-flow {
  position: relative;
  overflow: hidden;
}
.hypnosis-flow .method-sequence {
  position: relative;
}
.hypnosis-flow .method-track {
  position: relative;
  height: 4.6rem;
  margin-bottom: .7rem;
}
.hypnosis-flow .method-grid {
  position: relative;
  isolation: isolate;
}
.hypnosis-path {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .62;
  clip-path: inset(0 0 0 0);
}
.hypnosis-path path {
  fill: none;
  stroke: rgba(216, 155, 103, .72);
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
}
.hypnosis-flow .method-nodes {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
}
.hypnosis-flow .method-node {
  justify-self: center;
  margin: 0;
  box-shadow: 0 0 0 7px var(--navy);
}
.hypnosis-flow.motion-ready .hypnosis-path {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity 300ms var(--ease-out), clip-path 1100ms var(--ease-in-out);
}
.hypnosis-flow .method-card {
  position: relative;
  z-index: 1;
}
.hypnosis-flow .method-card::before { display: none; }
.hypnosis-flow.motion-ready .method-node {
  opacity: 0;
  transform: translateY(8px) scale(.92);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
.hypnosis-flow.motion-ready .method-card {
  opacity: 0;
  transform: translateY(20px) scale(.98);
  transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
}
.hypnosis-flow.motion-ready.is-active .hypnosis-path {
  opacity: .82;
  clip-path: inset(0 0 0 0);
}
.hypnosis-flow.motion-ready.is-active .method-node,
.hypnosis-flow.motion-ready.is-active .method-card {
  opacity: 1;
  transform: none;
}
.hypnosis-flow.motion-ready.is-active .method-node:nth-child(1) { transition-delay: 0ms; }
.hypnosis-flow.motion-ready.is-active .method-card:nth-child(1) { transition-delay: 70ms; }
.hypnosis-flow.motion-ready.is-active .method-node:nth-child(2) { transition-delay: 150ms; }
.hypnosis-flow.motion-ready.is-active .method-card:nth-child(2) { transition-delay: 220ms; }
.hypnosis-flow.motion-ready.is-active .method-node:nth-child(3) { transition-delay: 300ms; }
.hypnosis-flow.motion-ready.is-active .method-card:nth-child(3) { transition-delay: 370ms; }
.hypnosis-flow.motion-ready.is-active .method-node:nth-child(4) { transition-delay: 450ms; }
.hypnosis-flow.motion-ready.is-active .method-card:nth-child(4) { transition-delay: 520ms; }

.home-stable #faq .faq-intro {
  max-width: 34ch;
  margin-top: 1rem;
  color: var(--ink-soft);
  font-size: .96rem;
}
.home-stable #faq .faq-a a {
  color: var(--navy);
  font-weight: 650;
  text-decoration-color: var(--gold);
  text-underline-offset: .22em;
}

@media (min-width: 1025px) {
  .home-stable #faq .faq-layout > :first-child {
    position: sticky;
    top: 7.4rem;
  }
}

@media (max-width: 1024px) {
  .hypnosis-flow .method-track { display: none; }
  .hypnosis-flow .method-card::before {
    content: attr(data-step);
    display: flex;
    width: 2.4rem;
    height: 2.4rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--gold-deep);
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hypnosis-flow.motion-ready .method-node,
  .hypnosis-flow.motion-ready .method-card,
  .hypnosis-flow.motion-ready.is-active .method-node,
  .hypnosis-flow.motion-ready.is-active .method-card {
    opacity: 1;
    transform: none;
    transition: opacity 200ms ease;
    transition-delay: 0ms;
  }
  .hypnosis-path,
  .hypnosis-flow.motion-ready.is-active .hypnosis-path {
    opacity: .62;
    clip-path: inset(0 0 0 0);
    transition: none;
  }
}

/* ============================================================
   Narzissmus-Seite — klare Orientierung, Passung und Preise
   ============================================================ */
.topic-detail--narzissmus .topic-hero { padding-bottom: 4.75rem; }
.topic-service-line {
  margin-bottom: 1rem;
  color: var(--gold-light);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .11em;
  line-height: 1.4;
  text-transform: uppercase;
}
.topic-hero-note {
  color: rgba(255,255,255,.7);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .015em;
}
.topic-two-column {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.topic-narrative h2,
.topic-section-intro h2,
.marina-context h2,
.topic-faq h2 {
  font-size: clamp(2rem, 3vw, 3rem);
  max-width: 18ch;
}
.topic-narrative .lede {
  max-width: 56ch;
  margin-top: 1.35rem;
  font-size: 1.06rem;
}
.topic-plain-note {
  max-width: 58ch;
  margin-top: 1.4rem;
  padding-left: 1rem;
  border-left: 2px solid var(--gold);
  color: var(--ink-soft);
  font-size: .88rem;
}
.topic-signal-panel {
  padding: clamp(1.6rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold-deep);
  background: #fff;
}
.topic-signal-panel h3 { font-size: 1.22rem; }
.topic-check-list { margin-top: 1.5rem; gap: 1rem; }
.topic-check-list li + li { padding-top: 1rem; border-top: 1px solid var(--line); }
.topic-work-focus {
  max-width: 74ch;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 1.02rem;
}
.topic-section-intro { max-width: 760px; margin-bottom: 2.5rem; }
.topic-section-intro > p { max-width: 62ch; margin-top: 1.15rem; color: var(--ink-soft); }
.fit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.fit-panel {
  padding: clamp(1.6rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-top: 4px solid var(--navy-mid);
  background: var(--paper);
}
.fit-panel--boundary { border-top-color: var(--gold-deep); background: #f8f3ec; }
.fit-panel h3 { font-size: 1.24rem; }
.fit-list { display: grid; gap: .9rem; margin: 1.35rem 0 0; padding: 0; list-style: none; }
.fit-list li { position: relative; padding-left: 1.25rem; color: var(--ink-soft); font-size: .94rem; }
.fit-list li::before { content: ""; position: absolute; top: .69em; left: 0; width: .38rem; height: .38rem; border-radius: 50%; background: var(--gold-deep); }
.boundary-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  margin-top: 1.25rem;
  padding: 1.25rem 1.4rem;
  background: var(--navy);
  color: rgba(255,255,255,.82);
  font-size: .9rem;
}
.boundary-note strong { color: #fff; }
.topic-two-column--method { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.topic-service-line--dark { color: var(--gold-deep); }
.marina-context > p:not(.topic-service-line) { max-width: 55ch; margin: 1.25rem 0 1.4rem; color: var(--ink-soft); }
.method-steps-clean { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.method-steps-clean li { display: grid; grid-template-columns: 2.65rem 1fr; gap: 1.15rem; padding: 1.45rem 0; border-bottom: 1px solid var(--line); }
.method-steps-clean li > span { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: 50%; background: var(--navy); color: #fff; font-family: var(--font-display); font-weight: 700; }
.method-steps-clean h3 { margin-bottom: .4rem; font-size: 1.15rem; }
.method-steps-clean p { color: var(--ink-soft); font-size: .94rem; }
.method-boundary {
  max-width: 76ch;
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: .86rem;
}
.topic-price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.topic-price-card { display: flex; flex-direction: column; min-width: 0; padding: clamp(1.5rem, 2.5vw, 2rem); border: 1px solid var(--line); background: var(--paper); }
.topic-price-card--featured { border-color: var(--navy); background: var(--navy); color: rgba(255,255,255,.8); }
.topic-price-label { min-height: 2.8em; color: var(--gold-deep); font-size: .72rem; font-weight: 800; letter-spacing: .09em; line-height: 1.4; text-transform: uppercase; }
.topic-price-card--featured .topic-price-label { color: var(--gold-light); }
.topic-price-card h3 { margin-top: .85rem; font-size: 1.3rem; }
.topic-price-card--featured h3 { color: #fff; }
.topic-price-value { margin-top: 1.2rem; color: var(--navy); font-family: var(--font-display); font-size: clamp(2.25rem, 4vw, 3.5rem); font-weight: 750; letter-spacing: -.05em; line-height: .95; }
.topic-price-card--featured .topic-price-value { color: #fff; }
.topic-price-rate { margin: .65rem 0 1.3rem; color: var(--ink-soft); font-size: .82rem; font-weight: 650; }
.topic-price-card--featured .topic-price-rate { color: rgba(255,255,255,.68); }
.topic-price-card > p:last-child { color: var(--ink-soft); font-size: .9rem; }
.topic-price-card--featured > p:last-child { color: rgba(255,255,255,.76); }
.topic-price-actions { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-top: 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.topic-price-actions > p { max-width: 54ch; color: var(--ink-soft); font-size: .84rem; }
.topic-price-actions > div { display: flex; gap: .75rem; flex-shrink: 0; }
.topic-process .section-head h2 { color: #fff; }
.topic-process .section-head .lede { margin-top: 1rem; }
.topic-process-grid .process-card { border-color: rgba(255,255,255,.12); }
.topic-process-grid .process-card h3 { margin-bottom: .55rem; font-size: 1.14rem; }
.topic-faq .faq-layout > .reveal-head > p { max-width: 43ch; margin-top: 1rem; color: var(--ink-soft); }
.topic-faq .faq-aside-card { margin-top: 1.75rem; }
.topic-faq .faq-aside-card p { color: rgba(255,255,255,.78); }

/* Die inhaltlich umfangreichere Narzissmus-Seite bleibt bewusst editorial.
   Rahmen werden nur dort eingesetzt, wo sie eine Entscheidung strukturieren
   (Preise und FAQ), nicht als Standardbehälter für jeden Textblock. */
.topic-detail .topic-signal-panel {
  padding: 1.35rem 0 0;
  border: 0;
  border-top: 2px solid var(--gold-deep);
  background: transparent;
}
.topic-detail .topic-patterns .trait-grid {
  gap: 0 clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.topic-detail .topic-patterns .trait-card {
  padding: 1.35rem 0 1.7rem;
  border-top: 1px solid var(--line);
}
.topic-detail .topic-patterns .trait-card h4 {
  margin-bottom: .65rem;
  font-size: 1.08rem;
}
.topic-detail .topic-patterns .trait-card p {
  max-width: 31ch;
  font-size: .94rem;
  line-height: 1.7;
}
.topic-detail .topic-deep-dive .feature {
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(3rem, 7vw, 6rem);
  align-items: start;
}
.topic-detail .topic-deep-dive .feature > .reveal:last-child {
  padding-left: clamp(1.5rem, 3vw, 3rem);
  border-left: 1px solid var(--line);
}
.topic-detail .fit-grid {
  gap: clamp(2.5rem, 7vw, 6rem);
}
.topic-detail .fit-panel,
.topic-detail .fit-panel--boundary {
  padding: 1.4rem 0 0;
  border: 0;
  border-top: 2px solid var(--navy-mid);
  border-radius: 0;
  background: transparent;
}
.topic-detail .fit-panel--boundary { border-top-color: var(--gold-deep); }
.topic-detail .boundary-note { border-radius: 1rem; }
.topic-detail .topic-price-card {
  border-radius: clamp(1rem, 2vw, 1.5rem);
  overflow: hidden;
}
.topic-detail .topic-process-grid {
  gap: 0 clamp(2rem, 4vw, 4rem);
}
.topic-detail .topic-process-grid .process-card {
  padding: 1.55rem 0 2.1rem;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.24);
  border-radius: 0;
  background: transparent;
}
.topic-detail .topic-process-grid .process-num {
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: var(--gold-deep);
  color: #fff;
  justify-content: center;
}
.topic-detail .topic-process-grid .process-card p {
  max-width: 36ch;
  color: rgba(255,255,255,.7);
  line-height: 1.7;
}
.topic-detail .topic-session-frame .principle-grid {
  gap: 0 clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.topic-detail .topic-session-frame .principle-card {
  padding: 1.4rem 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.topic-detail .topic-session-frame .principle-card p {
  max-width: 34ch;
  line-height: 1.7;
}
.topic-detail .topic-session-frame .callout {
  max-width: 76ch;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: 1.3rem 0 0;
  border: 0;
  border-top: 1px solid var(--gold-deep);
  border-radius: 0;
  background: transparent;
}
.topic-detail .related-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 6vw, 5rem);
  margin-top: clamp(2rem, 4vw, 3.25rem);
}
.topic-detail .related-link {
  padding: 1.2rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.topic-detail .related-link:hover {
  border-color: var(--gold-deep);
  transform: translateX(4px);
}
.topic-detail .topic-faq .faq-item {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.topic-detail .topic-faq .faq-item:last-child { border-bottom: 1px solid var(--line); }
.topic-detail .topic-faq .faq-q { padding: 1.35rem 0; }
.topic-detail .topic-faq .faq-a p { padding: 0 3rem 1.35rem 0; }
.topic-detail .topic-faq .faq-aside-card { border-radius: 1.25rem; }

@media (max-width: 1024px) {
  .topic-detail .topic-deep-dive .feature {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
  }
  .topic-detail .topic-deep-dive .feature > .reveal:last-child {
    padding: 2rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 900px) {
  .topic-two-column,
  .topic-two-column--method,
  .fit-grid,
  .topic-price-grid { grid-template-columns: minmax(0, 1fr); }
  .topic-signal-panel { max-width: 720px; }
  .topic-price-card { max-width: 720px; width: 100%; }
  .topic-price-label { min-height: 0; }
  .topic-price-actions { align-items: flex-start; flex-direction: column; }
  .topic-price-actions > div { flex-wrap: wrap; }
  .topic-detail .topic-session-frame .principle-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.8rem;
  }
}

@media (max-width: 640px) {
  .topic-detail--narzissmus .topic-hero { padding-bottom: 3.5rem; }
  .topic-service-line { font-size: .7rem; }
  .topic-two-column { gap: 2.25rem; }
  .boundary-note { grid-template-columns: 1fr; gap: .35rem; }
  .topic-price-actions > div,
  .topic-price-actions .btn { width: 100%; }
  .method-steps-clean li { grid-template-columns: 2.4rem 1fr; gap: .85rem; }
  .faq-q { min-height: 3rem; padding: 1rem; }
}


/* ============ Audit-Korrekturen 2026-09-10 ============ */

/* K2 – sichtbare KI-Kennzeichnung an Personen-/Atmosphärenbildern */
.hero { position: relative; }
.ai-disclosure--hero {
  position: absolute; z-index: 4;
  right: max(1.5rem, calc((100vw - 1180px) / 2));
  bottom: 1.25rem;
  display: inline-flex; align-items: center;
  padding: .42rem .68rem;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 3px;
  background: rgba(11,32,41,.78);
  color: rgba(255,255,255,.92);
  font-size: .72rem; letter-spacing: .04em;
}
.media-ai-note {
  margin-top: .5rem;
  font-size: .72rem; letter-spacing: .04em;
  color: var(--ink-soft);
}
@media (max-width: 640px) {
  .ai-disclosure--hero { right: 1rem; bottom: 1rem; font-size: .68rem; }
}

/* W7 – 4-Schritte-Bildsequenz auf Mobile untereinander statt Wischkarussell */
@media (max-width: 640px) {
  .story-track {
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow: visible !important;
    gap: 2.5rem !important;
    padding: 0 !important;
    margin-inline: 0 !important;
    scroll-snap-type: none !important;
  }
  .story-step { flex: none !important; }
  .story-step figure { height: 260px; }
}

/* O12 – primärer CTA im Mobile-Menü als Button erkennbar */
.mobile-nav a[href="terminbuchung.html"] {
  margin-top: 1.4rem;
  font-size: 1.15rem;
  padding: .9rem 1.4rem;
  background: var(--gold-deep);
  color: #fff;
  border-radius: 6px;
  align-self: flex-start;
}


/* ============ Audit-Korrekturen Runde 2 (2026-09-11) ============ */

/* Schritt-Überschriften im dunklen Ablauf-Block waren dunkel auf dunkel */
.topic-process-grid .process-card h3,
.topic-detail .topic-process-grid .process-card h3 { color: #fff; }

/* Tieferer-Blick-Spalte: auf Mobile echte Einspaltigkeit, Trennlinie oben statt links */
@media (max-width: 1024px) {
  .topic-detail .topic-deep-dive .feature { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .topic-detail .topic-deep-dive .feature > .reveal:last-child { padding-left: 0; border-left: 0; }
}

/* Deep-Dive-Headline nicht Wort-für-Wort umbrechen lassen */
.topic-deep-dive .feature h2 { text-wrap: pretty; }
@media (max-width: 640px) {
  .topic-deep-dive .feature h2 { font-size: 1.4rem !important; }
}

/* ============================================================
   Ruhig-luxuriöse Feinabstimmung · 2026-09-11
   Bewusst nur eine Veredelung des bestehenden Designs:
   Identität, Farben, Inhalte und Seitenstruktur bleiben erhalten.
   ============================================================ */

:root {
  --radius: 18px;
  --radius-sm: 12px;
  --shadow-soft: 0 18px 46px -34px rgba(11, 32, 41, .42);
  --shadow-lift: 0 24px 56px -34px rgba(11, 32, 41, .5);
}

::selection {
  background: rgba(183, 111, 50, .22);
  color: var(--navy-deep);
}

body {
  line-height: 1.68;
  letter-spacing: .002em;
}

h1, h2, h3, h4 {
  font-weight: 650;
  letter-spacing: -.026em;
}

a:not(.btn):not(.topic-card):not(.brand):not(.related-link) {
  text-underline-offset: .24em;
  text-decoration-thickness: .08em;
}

/* Kopfzeile: gleicher Aufbau, nur präziser und ruhiger. */
.site-header {
  padding: .72rem 0;
  background: rgba(11, 32, 41, .92);
  box-shadow: 0 16px 46px -38px rgba(0, 0, 0, .82);
}

.site-header .wrap { min-height: 3.55rem; }

.brand { gap: .78rem; }
.brand-mark {
  width: 2.35rem;
  height: 2.35rem;
  border-color: var(--gold-light);
  background: rgba(255, 255, 255, .025);
}
.brand-name { font-size: 1.04rem; letter-spacing: -.02em; }
.brand-sub { color: rgba(255, 255, 255, .7); letter-spacing: .14em; }

.main-nav { gap: clamp(1.15rem, 2vw, 2rem); }
.main-nav a {
  position: relative;
  padding: .55rem 0;
  font-weight: 550;
}
.main-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: .22rem;
  left: 0;
  height: 1px;
  background: var(--gold-light);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 260ms var(--ease-out);
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.main-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}
.main-nav a[aria-current="page"] { text-decoration: none; }

.btn {
  border-radius: 10px;
  padding: .98em 1.7em;
  transition-duration: 240ms;
}
.btn--gold { box-shadow: 0 14px 34px -20px rgba(148, 87, 34, .8); }

/* Hero: dieselbe Komposition, typografisch etwas feiner. */
.hero-bg img { animation-duration: 16s; }
.home-stable .hero-copy h1 {
  max-width: 15.5ch;
  font-weight: 650;
  letter-spacing: -.026em;
}
.home-stable .hero-copy .lede {
  max-width: 49ch;
  color: rgba(255, 255, 255, .84);
  line-height: 1.7;
}
.hero-microcopy { color: rgba(255, 255, 255, .64); }
.ai-disclosure--hero {
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Ruhigere vertikale Dramaturgie ohne neue Abschnitte. */
section { padding: clamp(5rem, 7vw, 6.9rem) 0; }
section.tight { padding: clamp(3.8rem, 5vw, 5rem) 0; }
.section-head { margin-bottom: clamp(2.7rem, 4vw, 3.8rem); }
.section-head--center { margin-bottom: clamp(2.8rem, 4vw, 4rem); }
.section-head h2,
.section-head--center h2 { line-height: 1.02; }
.eyebrow { letter-spacing: .13em; }

/* Vertrauensleiste: weniger Kennzahlenoptik, mehr ruhige Orientierung. */
.trust-bar .wrap { padding: 1.65rem 0; }
.trust-stat { padding-inline: clamp(.8rem, 2vw, 1.6rem); }
.trust-stat b {
  font-size: 1.45rem;
  font-weight: 650;
  letter-spacing: -.02em;
}
.trust-stat span { margin-top: .12rem; color: rgba(255, 255, 255, .72); }

/* Bildfolge und Karten behalten ihre Form, wirken aber weniger technisch. */
.story-journey { background: #edf1ee; }
.story-track { gap: clamp(.9rem, 1.5vw, 1.35rem); }
.story-step figure {
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
}
.story-step h3 { font-size: 1.32rem; }
.story-step p { line-height: 1.65; }

.topics-grid { gap: clamp(.9rem, 1.5vw, 1.25rem); }
.topic-card {
  border-radius: 16px;
  background: rgba(251, 250, 247, .88);
  box-shadow: 0 12px 30px -30px rgba(11, 32, 41, .72);
}
.topic-card h3 { font-size: 1.16rem; }
.topic-card p { line-height: 1.62; }
.topic-icon { background: #f0ebe3; }

.topics-free {
  margin-top: 1.25rem;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 20px;
  box-shadow: var(--shadow-lift);
}

.feature-media,
.about-media img { border-radius: 24px; box-shadow: var(--shadow-soft); }

.principle-card,
.process-card,
.booking-card,
.faq-aside-card {
  border-radius: 16px;
}
.principle-card { background: rgba(251, 250, 247, .72); }
.point-card {
  border-top-width: 2px;
  border-radius: 16px;
  box-shadow: 0 12px 30px -32px rgba(11, 32, 41, .7);
}

.faq-item { border-radius: 14px; margin-bottom: .7rem; }
.faq-q { padding: 1.3rem 1.45rem; }
.faq-q-icon { width: 1.85rem; height: 1.85rem; }

.site-footer { padding-top: 4.8rem; }
.footer-grid { gap: clamp(2rem, 4vw, 3.4rem); }
.footer-grid a { text-underline-offset: .25em; }

/* Unterseiten: vorhandene Mini-Heros und Inhalte bleiben unverändert. */
.topic-hero { padding-top: 9rem; padding-bottom: 4.25rem; }
.topic-hero h1 {
  font-weight: 650;
  line-height: 1.01;
  letter-spacing: -.03em;
}
.topic-hero .lede { line-height: 1.7; }
.tag-pill { background: rgba(255, 255, 255, .035); }

/* Preisboxen: dieselben Angebote, Empfehlung klarer hervorgehoben. */
.pricing-section { background: #f5f1e8; }
.price-offer {
  border-radius: 24px;
  background: rgba(251, 250, 247, .9);
  box-shadow: var(--shadow-soft);
}
.price-offer--featured {
  border-color: var(--gold);
  box-shadow: 0 30px 66px -40px rgba(11, 32, 41, .62);
  transform: translateY(-.65rem);
}
.price-offer-badge { margin-bottom: 1.6rem; }
.price-offer-total { font-weight: 680; }
.price-includes li { line-height: 1.45; }
.package-overview { border-radius: 22px; box-shadow: var(--shadow-lift); }
.topic-price-card { border-radius: 20px; }

@media (hover: hover) and (pointer: fine) {
  .topic-card:hover {
    transform: translateY(-5px);
    border-color: rgba(183, 111, 50, .72);
    box-shadow: var(--shadow-lift);
  }
  .topic-card:hover .topic-icon { transform: translateY(-2px); }
  .btn:hover { transform: translateY(-2px); }
}

@media (max-width: 1024px) {
  section { padding: clamp(4.6rem, 8vw, 5.8rem) 0; }
  .price-offer--featured { transform: none; }
}

@media (max-width: 640px) {
  :root { --radius: 16px; --radius-sm: 10px; }
  body { line-height: 1.64; }
  section { padding: 4.2rem 0; }
  section.tight { padding: 3.4rem 0; }
  .site-header { padding: .62rem 0; }
  .brand-mark { width: 2.25rem; height: 2.25rem; }
  .brand-sub { letter-spacing: .1em; }
  .mobile-nav a[href="terminbuchung.html"] { border-radius: 10px; }
  .home-stable .hero-copy h1 { font-size: clamp(2.25rem, 10vw, 2.9rem); }
  .trust-bar .wrap { padding: .8rem 0; }
  .trust-stat { padding: 1rem .75rem; }
  .trust-stat b { font-size: 1.3rem; }
  .story-step figure { border-radius: 16px; }
  .topic-card,
  .principle-card,
  .process-card,
  .booking-card,
  .faq-aside-card,
  .point-card { border-radius: 14px; }
  .topics-free,
  .feature-media,
  .about-media img,
  .price-offer,
  .topic-price-card,
  .package-overview { border-radius: 18px; }
  .topic-hero { padding-top: 7rem; padding-bottom: 3.6rem; }
  .price-offer--featured { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .main-nav a::after,
  .topic-card,
  .topic-icon,
  .btn { transition-duration: 0.01ms !important; }
  .hero-bg img { animation: none !important; }
}

/* ============================================================
   Ruhige UI-Bewegung · 2026-09-11
   Bewegung führt den Blick, ohne das vorhandene Design umzubauen.
   ============================================================ */

/* Der Header reagiert auf den Seitenfortschritt, ohne seine Höhe zu ändern. */
.site-header {
  transition:
    background-color 240ms var(--ease-out),
    border-color 240ms var(--ease-out),
    box-shadow 240ms var(--ease-out);
}
.site-header.is-scrolled {
  background: rgba(11, 32, 41, .975);
  border-bottom-color: rgba(216, 155, 103, .16);
  box-shadow: 0 18px 48px -34px rgba(0, 0, 0, .95);
}

/* Gruppen werden zeilenweise und höchstens 210 ms versetzt eingeblendet. */
.reveal.motion-item {
  transition-delay: var(--motion-delay, 0ms) !important;
}

/* Große Bilder öffnen sich wie eine ruhige redaktionelle Blende. */
.js .feature-media.reveal,
.js .about-media.reveal {
  clip-path: inset(0 0 10% 0 round 24px);
  transform: translateY(18px) scale(.985);
  transition:
    opacity 820ms var(--ease-out),
    transform 880ms var(--ease-out),
    clip-path 1000ms var(--ease-in-out);
}
.js .feature-media.reveal.is-visible,
.js .about-media.reveal.is-visible {
  clip-path: inset(0 0 0 0 round 24px);
  transform: translateY(0) scale(1);
}
.feature-media img,
.about-media img {
  transform: scale(1.035);
  transition: transform 1200ms var(--ease-out);
}
.feature-media.is-visible img,
.about-media.is-visible img { transform: scale(1); }

/* Unterseiten: Motiv und Text kommen einmalig, leicht zeitversetzt in den Blick. */
.js .topic-hero--visual::after {
  --topic-image-opacity: .78;
  transform-origin: right center;
  animation: topic-image-enter 1100ms var(--ease-out) 120ms both;
}
.js .topic-hero .wrap > * {
  animation: topic-copy-enter 720ms var(--ease-out) both;
}
.js .topic-hero .wrap > *:nth-child(2) { animation-delay: 70ms; }
.js .topic-hero .wrap > *:nth-child(3) { animation-delay: 140ms; }
.js .topic-hero .wrap > *:nth-child(4) { animation-delay: 210ms; }
.js .topic-hero .wrap > *:nth-child(n + 5) { animation-delay: 280ms; }

@keyframes topic-image-enter {
  from { opacity: 0; transform: translateX(18px) scale(1.025); }
  to { opacity: var(--topic-image-opacity); transform: translateX(0) scale(1); }
}
@keyframes topic-copy-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Kleine Reaktionen bleiben kurz und erklären eindeutig, was klickbar ist. */
.btn > [aria-hidden="true"],
.link-arrow > [aria-hidden="true"] {
  display: inline-block;
  transition: transform 180ms var(--ease-out);
}
.faq-q-icon {
  transition:
    transform 200ms var(--ease-out),
    background-color 200ms var(--ease-out),
    color 200ms var(--ease-out);
}
.faq-item[data-open="true"] .faq-q-icon { transform: rotate(90deg); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover > [aria-hidden="true"] { transform: translateX(4px); }
  .link-arrow:hover > [aria-hidden="true"] { transform: translateX(3px); }
  .hero .link-arrow:hover > [aria-hidden="true"] { transform: translateY(3px); }
}

@media (max-width: 640px) {
  .js .topic-hero--visual::after { --topic-image-opacity: .48; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .reveal.motion-item,
  .js .feature-media.reveal,
  .js .about-media.reveal,
  .feature-media img,
  .about-media img,
  .btn > [aria-hidden="true"],
  .link-arrow > [aria-hidden="true"],
  .faq-q-icon {
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .js .feature-media.reveal,
  .js .feature-media.reveal.is-visible,
  .js .about-media.reveal,
  .js .about-media.reveal.is-visible {
    clip-path: none;
    opacity: 1;
    transform: none;
  }
  .feature-media img,
  .about-media img,
  .feature-media.is-visible img,
  .about-media.is-visible img { transform: none; }
  .js .topic-hero--visual::after,
  .js .topic-hero .wrap > * {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .faq-item[data-open="true"] .faq-q-icon { transform: none; }
}