/* ===========================================================
   CS_Psychotherapie – Design System "Rosalotusblume"
   Creme #F7F2EC · Sand #E8DDD1 · Rosé #D8A7B1
   Salbeigrün #7B8F72 · Dunkelgrün #4E6650
   Schrift: Lora (aus Design)
   Flächen: Papierstruktur, Weiß oder weiche Verläufe
=========================================================== */

:root {
  --creme: #F7F2EC;
  --weiss: #FFFFFF;
  --sand: #E8DDD1;
  --rose: #D8A7B1;
  --rose-hell: #EBD3D8;
  --rose-tief: #C08693;
  --sage: #7B8F72;
  --sage-dark: #4E6650;

  --text-main: #46423C;
  --text-soft: #736C64;

  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Lora', Georgia, 'Times New Roman', serif;

  --radius-xl: 40px;
  --radius-lg: 30px;
  --radius-md: 22px;
  --radius-sm: 14px;

  /* weichere, diffusere Schatten */
  --shadow-soft: 0 30px 70px -40px rgba(78, 102, 80, 0.4);
  --shadow-card: 0 18px 50px -28px rgba(78, 102, 80, 0.32);
  --shadow-lift: 0 34px 70px -34px rgba(78, 102, 80, 0.42);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.33, .01, .18, 1);

  --paper: url('../img/paper-grain.jpg');
  --torn-top: url('../img/torn-top.png');

  /* wiederkehrende Verläufe */
  --grad-creme: linear-gradient(180deg, var(--weiss) 0%, var(--creme) 55%, var(--sand) 100%);
  --grad-rose: linear-gradient(150deg, var(--rose-hell) 0%, var(--rose) 100%);
  --grad-sage: linear-gradient(140deg, var(--sage) 0%, var(--sage-dark) 100%);
  --grad-card: linear-gradient(160deg, rgba(255,255,255,.96) 0%, rgba(247,242,236,.9) 100%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text-main);
  background: var(--weiss);
  line-height: 1.8;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--sage-dark);
  line-height: 1.28;
  letter-spacing: -.005em;
  margin: 0 0 .5em;
}

p { margin: 0 0 1em; color: var(--text-soft); }
a { color: inherit; text-decoration: none; }
em { font-style: italic; color: var(--rose-tief); }

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
  position: relative;
  z-index: 2;
}

/* ---------- Flächen ----------
   Der Papier-Stack ist EIN Wert, den Sektion und Riss-Kante identisch nutzen.
   Nur so entsteht an der Kante kein Helligkeitssprung (= harte Linie). */
.bg-paper,
.torn-into-paper::after,
.torn-on-paper {
  background-color: var(--creme);
  background-image:
    linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.6)),
    var(--paper);
  background-size: auto, 620px;
  background-repeat: repeat, repeat;
  background-attachment: fixed, fixed;
}
.bg-paper { position: relative; }
.bg-white { background: var(--weiss); position: relative; }
.bg-soft { position: relative; background: linear-gradient(180deg, var(--weiss) 0%, #FBF8F4 45%, var(--creme) 100%); }

/* ---------- Riss-Kanten ---------- */
.torn {
  position: relative;
  height: clamp(54px, 7vw, 104px);
  z-index: 3;
  pointer-events: none;
  margin-bottom: -1px;
}
/* Die Riss-Textur ist am unteren Rand nur ~86 % deckend. Ohne Gegenmaßnahme
   scheint dort die helle Fläche durch und es entsteht genau an der Naht zur
   nächsten Sektion eine harte Linie. Deshalb wird die Maske mit einem
   Verlauf vereinigt (union), der die untere Hälfte voll deckend macht. */
.torn::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: -1px;
  -webkit-mask-image: var(--torn-top), linear-gradient(to bottom, transparent 50%, #000 78%);
  mask-image: var(--torn-top), linear-gradient(to bottom, transparent 50%, #000 78%);
  -webkit-mask-size: 100% 100%, 100% 100%;
  mask-size: 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
.torn-into-white::after { background: var(--weiss); }
.torn-into-soft::after  { background: var(--weiss); }
.torn-into-dark::after  { background: var(--sage-dark); }
.torn-on-white { background: var(--weiss); }
.torn-on-creme { background: var(--creme); }

/* Weicher Anschluss: löst jede Restkante zwischen Riss und Fläche auf */
.torn-on-white::before,
.torn-on-creme::before,
.torn-on-paper::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -34px;
  height: 34px;
  z-index: 1;
}
.torn-on-white::before { background: linear-gradient(180deg, rgba(255,255,255,0), var(--weiss)); }
.torn-on-creme::before { background: linear-gradient(180deg, rgba(247,242,236,0), var(--creme)); }

/* ---------- Scroll-Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1.2s var(--ease-soft), transform 1.2s var(--ease-soft);
  transition-delay: var(--delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.lotus-bloom {
  opacity: 0;
  transform: scale(.74) rotate(-8deg);
  transition: opacity 1.7s var(--ease-soft), transform 1.8s var(--ease-soft);
  transition-delay: var(--delay, 0ms);
}
.lotus-bloom.is-visible { opacity: var(--lotus-opacity, 1); transform: scale(1) rotate(0deg); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .lotus-bloom { opacity: var(--lotus-opacity, 1); transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .scroll-hint span { animation: none !important; }
}

/* ---------- Lotus & Blütenblätter ----------
   Die Deko-Blüten laufen an den Rändern weich aus. Sonst schneidet das
   overflow:hidden der Sektion die Blüte mit einer harten Kante ab. */
.lotus-deco { position: absolute; pointer-events: none; user-select: none; z-index: 1; }
.lotus-deco img {
  width: 100%; height: auto;
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(closest-side at 50% 50%, #000 58%, transparent 100%);
}
/* Die aufblühende Blüte neben dem Praxisbild bleibt voll sichtbar */
.philosophy-lotus img { -webkit-mask-image: none; mask-image: none; }

/* Großes, sehr zurückhaltendes Lotus-Wasserzeichen als Hintergrundmotiv */
.has-lotus { position: relative; overflow: hidden; }
.section-lotus { width: min(440px, 56vw); --lotus-opacity: .10; }
.section-lotus.lotus-r { right: -130px; top: 8%; }
.section-lotus.lotus-l { left: -130px; bottom: -6%; }
@media (max-width: 760px) {
  .section-lotus { width: 68vw; --lotus-opacity: .08; }
}

.petal-layer {
  position: absolute;
  inset: 0;
  background-image: url('../img/petals-web.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  opacity: .45;
  pointer-events: none;
  z-index: 1;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: .5em;
  padding: 16px 34px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .015em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), filter .45s var(--ease), background .45s var(--ease), color .45s var(--ease);
}
.btn-primary { background: var(--grad-sage); color: var(--weiss); box-shadow: var(--shadow-soft); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); filter: brightness(1.07); }
.btn-ghost { background: rgba(255,255,255,.5); color: var(--sage-dark); border-color: rgba(78,102,80,.45); backdrop-filter: blur(4px); }
.btn-ghost:hover { background: var(--sage-dark); color: var(--weiss); border-color: var(--sage-dark); transform: translateY(-3px); }
.btn-rose { background: var(--grad-rose); color: var(--sage-dark); box-shadow: var(--shadow-soft); }
.btn-rose:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); filter: brightness(1.04); }
.btn-small { padding: 11px 24px; font-size: .85rem; }
.btn-full { width: 100%; }

/* =========================================================
   HEADER
========================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 24px 0;
  transition: padding .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header.scrolled {
  padding: 12px 0;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 40px -30px rgba(62,58,53,.55);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; }
.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--sage-dark);
  transition: color .5s var(--ease);
}
.logo-lotus { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
/* Wortmarke in der Kopfzeile in Versalien – mit Laufweite, sonst
   stehen die Grossbuchstaben der Lora zu eng beieinander. */
.site-header .logo-text { text-transform: uppercase; letter-spacing: .09em; }

.main-nav { display: flex; align-items: center; gap: 34px; }
.nav-link { position: relative; font-size: .92rem; color: var(--text-main); transition: color .5s var(--ease); }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--rose);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav-link:hover::after { transform: scaleX(1); }

/* heller Header über dem dunklen Hero-Foto */
.site-header:not(.scrolled).on-dark .logo,
.site-header:not(.scrolled).on-dark .nav-link { color: var(--weiss); }
.site-header:not(.scrolled).on-dark .nav-toggle span { background: var(--weiss); }
.site-header:not(.scrolled).on-dark .btn-ghost { color: var(--weiss); border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.12); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span {
  width: 24px; height: 1.5px;
  background: var(--sage-dark);
  transition: transform .4s var(--ease), opacity .4s var(--ease), background .4s var(--ease);
}
.mobile-nav-backdrop {
  position: fixed; inset: 0;
  background: rgba(62,58,53,.4);
  opacity: 0; pointer-events: none;
  transition: opacity .45s var(--ease);
  z-index: 90;
}

/* =========================================================
   HERO – großer Bereich mit Foto & Verläufen
========================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 150px 0 96px;
  background: #2E2A28;
}

.hero-bg {
  position: absolute;
  inset: -8% 0 -8% 0;
  z-index: 0;
  will-change: transform;
}
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 32%;
}

/* Verlaufs-Schleier: dunkles Foto weich in Creme überführen */
.hero-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
/* Blüte oben klar sichtbar, Text unten auf abgedunkeltem Grund */
.hero-veil::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(46,42,40,.5) 0%,
      rgba(46,42,40,.14) 16%,
      rgba(46,42,40,.1) 38%,
      rgba(46,42,40,.55) 62%,
      rgba(46,42,40,.8) 82%,
      rgba(46,42,40,.88) 100%);
}
.hero-veil::after {
  /* weicher Auslauf nach unten in die Seite */
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 26%;
  background: linear-gradient(180deg, rgba(247,242,236,0) 0%, rgba(247,242,236,.5) 58%, rgba(255,255,255,.97) 100%);
}

.hero-inner { position: relative; z-index: 4; max-width: 880px; }

.hero-eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: .74rem;
  color: var(--rose-hell);
  margin-bottom: 26px;
}
.hero-title {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  color: var(--weiss);
  font-weight: 400;
  line-height: 1.18;
  margin-bottom: .45em;
  text-shadow: 0 4px 40px rgba(0,0,0,.35);
}
.hero-title em { color: var(--rose-hell); font-style: italic; }
.hero-subtitle {
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  color: rgba(255,255,255,.9);
  max-width: 560px;
  margin: 0 auto 2.4em;
  text-shadow: 0 2px 20px rgba(0,0,0,.4);
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

.hero-lotus-mark {
  width: min(200px, 40vw);
  margin: 0 auto 30px;
  --lotus-opacity: .95;
  filter: drop-shadow(0 14px 40px rgba(0,0,0,.4));
}

.scroll-hint {
  position: absolute;
  left: 50%; bottom: 34px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sage-dark);
}
.scroll-hint span {
  width: 1px; height: 46px;
  background: linear-gradient(var(--sage), transparent);
  animation: hintPulse 2.4s ease-in-out infinite;
}
/* ---------- Formular-Rückmeldungen ---------- */
.form-status {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-sm, 10px);
  background: #EEF1EA;
  color: var(--sage-dark);
  font-size: .94rem;
}
.form-status.is-error { background: #F7E9EB; color: #8C3F49; }
.consent-hint { display: block; margin-top: 3px; font-size: .86em; opacity: .8; }

/* ---------- Heller Kopfbereich (Lotusblume auf Creme) ----------
   Die Blüte sitzt rechts im Bild, links bleibt Fläche für den Text. */
.hero--hell { background: #FBF6F1; }
.hero--hell .hero-bg img { object-position: right center; }
.hero--hell .hero-veil::before {
  background: linear-gradient(90deg,
    rgba(251,246,241,.94) 0%,
    rgba(251,246,241,.72) 34%,
    rgba(251,246,241,0) 58%);
}
.hero--hell .hero-eyebrow  { color: var(--sage); }
.hero--hell .hero-title    { color: var(--sage-dark); text-shadow: none; font-size: clamp(2.2rem, 4.4vw, 3.7rem); }
.hero--hell .hero-title em { color: #B26E7D; }
.hero--hell .hero-subtitle { color: var(--text-main); text-shadow: none; }

@media (min-width: 900px) {
  .hero--hell { align-items: center; justify-content: flex-start; text-align: left; }
  .hero--hell .hero-inner { max-width: var(--container, 1180px); width: 100%; }
  .hero--hell .hero-inner > * { max-width: 560px; }
  .hero--hell .hero-subtitle { margin-left: 0; }
  .hero--hell .hero-actions { justify-content: flex-start; }
}
@media (max-width: 899px) {
  .hero--hell .hero-bg img { object-position: 78% 30%; }
  .hero--hell .hero-veil::before {
    /* sanft auslaufend statt linear – ein gerader Verlauf zeichnet eine sichtbare Kante */
    background: linear-gradient(180deg,
      rgba(251,246,241,0) 0%,
      rgba(251,246,241,0) 20%,
      rgba(251,246,241,.1) 28%,
      rgba(251,246,241,.28) 36%,
      rgba(251,246,241,.5) 44%,
      rgba(251,246,241,.7) 52%,
      rgba(251,246,241,.86) 61%,
      rgba(251,246,241,.94) 72%,
      rgba(251,246,241,.97) 100%);
  }
}

@keyframes hintPulse {
  0%, 100% { opacity: .35; transform: scaleY(.6); transform-origin: top; }
  50%      { opacity: 1;   transform: scaleY(1);  transform-origin: top; }
}

/* =========================================================
   Abschnitts-Köpfe
========================================================= */
.eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .74rem;
  color: var(--sage);
  margin-bottom: 18px;
}
.section-head { max-width: 680px; margin: 0 auto 60px; text-align: center; }
.section-head h2 { font-size: clamp(1.95rem, 3.4vw, 2.7rem); }
.section-lede { font-size: 1.05rem; }

/* =========================================================
   USPs
========================================================= */
.usps { padding: 70px 0 110px; }
.usp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; align-items: start; }

.usp-card {
  background: var(--grad-card);
  border: 1px solid rgba(123,143,114,.14);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 20px 50px -34px rgba(78,102,80,.4);
  transition: transform .6s var(--ease-soft), box-shadow .6s var(--ease-soft);
}
.usp-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lift); }

/* leicht versetzt – nimmt der Reihe die Strenge */
.usp-grid > .usp-card:nth-child(even) { margin-top: 42px; }

.usp-photo {
  aspect-ratio: 5 / 4;
  position: relative;
  background: linear-gradient(155deg, var(--sand) 0%, var(--rose-hell) 55%, var(--rose) 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--sage-dark);
}
.usp-photo img { width: 100%; height: 100%; object-fit: cover; }
.usp-photo::after {
  /* weicher Auslauf ins Kartenweiß */
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.85));
}
.usp-photo svg { width: 34px; height: 34px; opacity: .5; position: relative; z-index: 2; }

.usp-body { padding: 4px 26px 30px; }
.usp-card h3 { font-size: 1.04rem; margin-bottom: .45em; }
.usp-card p { margin: 0; font-size: .92rem; }

/* Angebote: drei gleich hohe Karten nebeneinander */
.usp-grid-3 { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.usp-grid-3 > .usp-card { display: flex; flex-direction: column; }
.usp-grid-3 > .usp-card:nth-child(even) { margin-top: 0; }   /* kein Versatz in dieser Reihe */
.usp-grid-3 .usp-body { flex: 1; }
/* mittlere Karte hat kein Foto – gleicht die Höhe über den Innenabstand aus */
.usp-card.is-plain { padding-top: 34px; }
.usp-card.is-plain .usp-body { padding-left: 28px; padding-right: 28px; }

/* =========================================================
   SCHWERPUNKTE
========================================================= */
.focus { padding: 90px 0 100px; position: relative; overflow: hidden; }
.focus-lotus { width: min(360px, 52vw); left: -110px; bottom: -40px; --lotus-opacity: .16; }

.focus-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.focus-card {
  background: var(--weiss);
  border: 1px solid rgba(123,143,114,.14);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.focus-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lift); }
.focus-media { aspect-ratio: 4/3; }
.focus-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-placeholder {
  width: 100%; height: 100%;
  background: var(--grad-rose);
  display: flex; align-items: center; justify-content: center;
  color: var(--sage-dark);
}
.photo-placeholder.large { border-radius: var(--radius-xl); aspect-ratio: 4/5; box-shadow: var(--shadow-soft); }
.focus-content { padding: 28px 26px 32px; }
.focus-content h3 { font-size: 1.05rem; }
.focus-content p { font-size: .92rem; margin: 0; }

/* =========================================================
   QUIZ – "Ist das der richtige Weg für Sie?"
========================================================= */
.quiz { padding: 90px 0 100px; position: relative; overflow: hidden; }
.quiz-lotus { width: min(320px, 46vw); right: -90px; top: 40px; --lotus-opacity: .14; }

.quiz-card {
  max-width: 780px;
  margin: 0 auto;
  background: var(--grad-card);
  border: 1px solid rgba(123,143,114,.18);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  padding: clamp(28px, 4vw, 52px);
  position: relative;
  overflow: hidden;
}

.quiz-progress {
  height: 4px;
  border-radius: 999px;
  background: rgba(123,143,114,.16);
  overflow: hidden;
  margin-bottom: 30px;
}
.quiz-progress-bar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--grad-rose);
  transition: width .7s var(--ease-soft);
}

.quiz-step { display: none; }
.quiz-step.active { display: block; animation: quizIn .7s var(--ease-soft) both; }
@keyframes quizIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.quiz-count {
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 12px;
}
.quiz-question { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 26px; }

.quiz-options { display: flex; flex-direction: column; gap: 12px; }
.quiz-option {
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: .98rem;
  color: var(--text-main);
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(123,143,114,.22);
  border-radius: var(--radius-md);
  padding: 17px 22px;
  cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.quiz-option::before {
  content: '';
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--rose);
  flex-shrink: 0;
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
.quiz-option:hover {
  transform: translateX(5px);
  border-color: var(--sage);
  background: var(--weiss);
  box-shadow: var(--shadow-card);
}
.quiz-option:hover::before { background: var(--rose); box-shadow: 0 0 0 4px rgba(216,167,177,.25); }

.quiz-back {
  margin-top: 22px;
  background: none; border: none;
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--sage);
  cursor: pointer;
  padding: 4px 0;
  transition: color .3s;
}
.quiz-back:hover { color: var(--sage-dark); }
.quiz-back[hidden] { display: none; }

/* Ergebnis */
.quiz-result { text-align: center; }
.quiz-result-lotus { width: 130px; margin: 0 auto 22px; }
.quiz-result h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: .5em; }
.quiz-result-lede { font-size: 1.02rem; }

.quiz-points {
  list-style: none;
  padding: 0;
  margin: 28px auto 30px;
  max-width: 520px;
  display: flex; flex-direction: column; gap: 13px;
  text-align: left;
}
.quiz-points li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: .95rem;
  color: var(--text-soft);
}
.quiz-points svg { color: var(--sage); flex-shrink: 0; margin-top: 5px; }

.quiz-trust {
  font-size: .84rem;
  color: var(--sage-dark);
  background: rgba(216,167,177,.16);
  border-radius: var(--radius-md);
  padding: 16px 22px;
  margin: 26px 0 0;
}
.quiz-disclaimer {
  font-size: .78rem;
  color: var(--text-soft);
  margin: 18px 0 0;
  opacity: .85;
}
.quiz-restart {
  background: none; border: none;
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--sage);
  cursor: pointer;
  text-decoration: underline;
  margin-top: 16px;
}

/* =========================================================
   TERMINBUCHUNG – kostenloses Erstgespräch
========================================================= */
.booking { padding: 90px 0 100px; position: relative; overflow: hidden; }
.booking-lotus { width: min(300px, 44vw); left: -80px; bottom: -30px; --lotus-opacity: .14; }

.booking-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--grad-rose);
  color: var(--sage-dark);
  font-size: .82rem;
  letter-spacing: .04em;
  padding: 8px 20px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.booking-badge svg { width: 15px; height: 15px; }

.booking-shell {
  max-width: 900px;
  margin: 0 auto;
  background: var(--grad-card);
  border: 1px solid rgba(123,143,114,.18);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  padding: clamp(24px, 3.4vw, 40px);
}
.booking-embed { min-height: 620px; border-radius: var(--radius-lg); overflow: hidden; }
.booking-embed iframe { width: 100%; min-height: 620px; border: 0; display: block; }

/* ---------- Kalender ---------- */
.booking-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; }

.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.cal-month { font-family: var(--font-display); font-size: 1.1rem; color: var(--sage-dark); }
.cal-nav { display: flex; gap: 8px; }
.cal-nav button {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(123,143,114,.3);
  background: var(--weiss);
  color: var(--sage-dark);
  font-size: 1rem; cursor: pointer;
  transition: background .3s, transform .3s, opacity .3s;
}
.cal-nav button:hover:not(:disabled) { background: var(--creme); transform: translateY(-2px); }
.cal-nav button:disabled { opacity: .3; cursor: not-allowed; }

.cal-weekdays, .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-weekdays {
  margin-bottom: 8px;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sage);
  text-align: center;
}
.cal-day {
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  font-family: var(--font-body);
  font-size: .92rem;
  color: var(--text-main);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.cal-day.is-empty { pointer-events: none; }
.cal-day.is-free:hover { background: var(--rose-hell); transform: scale(1.08); }
.cal-day.is-free::after {
  content: '';
  position: absolute; bottom: 6px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--rose);
}
.cal-day.is-disabled { color: rgba(70,66,60,.25); pointer-events: none; }
.cal-day.is-selected { background: var(--grad-sage); color: var(--weiss); }
.cal-day.is-selected::after { background: var(--weiss); }

.cal-legend {
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; color: var(--text-soft);
  margin-top: 16px;
}
.cal-legend i { width: 6px; height: 6px; border-radius: 50%; background: var(--rose); display: inline-block; }

/* ---------- Slots ---------- */
.slot-panel {
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(123,143,114,.18);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  min-height: 100%;
}
.slot-title { font-family: var(--font-display); color: var(--sage-dark); font-size: 1.02rem; margin-bottom: 4px; }
.slot-sub { font-size: .84rem; color: var(--text-soft); margin-bottom: 20px; }

.slot-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.slot {
  font-family: var(--font-body);
  font-size: .92rem;
  padding: 13px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(123,143,114,.28);
  background: var(--weiss);
  color: var(--sage-dark);
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.slot:hover { background: var(--rose-hell); border-color: var(--rose); transform: translateY(-2px); }
.slot.is-selected { background: var(--grad-sage); color: var(--weiss); border-color: transparent; }

.slot-empty { font-size: .9rem; color: var(--text-soft); }

/* ---------- Buchungsformular ---------- */
.booking-form { margin-top: 22px; }
.booking-form[hidden] { display: none; }
.booking-summary {
  background: var(--grad-rose);
  color: var(--sage-dark);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: .9rem;
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px;
}
.booking-summary svg { flex-shrink: 0; }
.booking-note { font-size: .78rem; color: var(--text-soft); margin-top: 14px; }

.booking-done {
  text-align: center;
  padding: 20px 6px;
}
.booking-done[hidden] { display: none; }
.booking-done img { width: 110px; margin: 0 auto 16px; }
.booking-done h3 { font-size: 1.25rem; }

.booking-alt {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(123,143,114,.18);
}
.booking-alt-label { width: 100%; text-align: center; font-size: .85rem; color: var(--text-soft); margin: 0; }

/* =========================================================
   INSTAGRAM
========================================================= */
.insta { padding: 90px 0 100px; position: relative; overflow: hidden; }
.insta-handle {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display);
  color: var(--sage-dark);
  font-size: 1.02rem;
  margin-bottom: 8px;
}
.insta-handle svg { width: 20px; height: 20px; color: var(--rose-tief); }

.insta-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 44px;
}
.insta-post {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: block;
  background: linear-gradient(150deg, var(--sand), var(--rose-hell) 60%, var(--rose));
  box-shadow: var(--shadow-card);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.insta-post:nth-child(even) { margin-top: 26px; }
.insta-post:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); }
.insta-post img { width: 100%; height: 100%; object-fit: cover; }
.insta-post-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(78,102,80,.42);
  color: var(--weiss);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.insta-post:hover .insta-post-overlay { opacity: 1; }
.insta-post-overlay svg { width: 26px; height: 26px; }

.insta-cta { text-align: center; }
.insta-cta p { max-width: 520px; margin: 0 auto 22px; }

@media (max-width: 1024px) {
  .booking-grid { grid-template-columns: 1fr; }
  .insta-grid { grid-template-columns: repeat(3, 1fr); }
  .insta-post:nth-child(even) { margin-top: 0; }
  .insta-post:nth-child(3n-1) { margin-top: 22px; }
}
@media (max-width: 620px) {
  .insta-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .insta-post:nth-child(n) { margin-top: 0; }
  .insta-post:nth-child(n+5) { display: none; } /* auf dem Handy vier Kacheln, zwei Reihen */
  .slot-list { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   PHILOSOPHIE
========================================================= */
.philosophy { padding: 100px 0; position: relative; overflow: hidden; }
.philosophy-inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: center; }
.philosophy-media { position: relative; }
.philosophy-lotus { width: 60%; right: -12%; bottom: -10%; --lotus-opacity: .95; z-index: 4; }
.philosophy-text h2 { font-size: clamp(2rem, 3.4vw, 2.7rem); }
.philosophy-text blockquote {
  margin: 30px 0 0;
  padding-left: 24px;
  border-left: 2px solid var(--rose);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.18rem;
  color: var(--sage-dark);
}

/* =========================================================
   TESTIMONIALS
========================================================= */
.testimonials { padding: 90px 0 100px; position: relative; overflow: hidden; }
.testimonial-petals { inset: 0; opacity: .28; background-position: center; }
.testimonial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.testimonial-card {
  background: var(--grad-card);
  border: 1px solid rgba(123,143,114,.16);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  margin: 0;
  box-shadow: var(--shadow-card);
}
.testimonial-card p {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-style: italic;
  color: var(--sage-dark);
  margin-bottom: 18px;
}
.testimonial-card footer { color: var(--rose-tief); font-size: .86rem; }

/* =========================================================
   ABLAUF & KOSTEN
========================================================= */
.process { padding: 90px 0 100px; position: relative; overflow: hidden; }
.process-lotus { width: min(460px, 58vw); right: -110px; top: 40px; --lotus-opacity: .17; }

.timeline { list-style: none; margin: 0 auto 56px; padding: 0; max-width: 760px; position: relative; }
.timeline::before {
  content: '';
  position: absolute;
  left: 10px; top: 10px; bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--rose), var(--sage));
  opacity: .5;
}
.timeline-step { position: relative; padding-left: 48px; margin-bottom: 42px; }
.timeline-step:last-child { margin-bottom: 0; }
.timeline-dot {
  position: absolute;
  left: 0; top: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--weiss);
  border: 2px solid var(--sage);
  box-shadow: 0 0 0 5px rgba(123,143,114,.1);
}
.timeline-content h3 { font-size: 1.08rem; margin-bottom: .3em; }
.timeline-content p { margin-bottom: .5em; }
.timeline-price {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .85rem;
  color: var(--sage-dark);
  background: var(--grad-rose);
  padding: 6px 18px;
  border-radius: 999px;
}

.insurance-note {
  max-width: 700px;
  margin: 0 auto 48px;
  padding: 26px 30px;
  background: var(--grad-card);
  border: 1px solid rgba(123,143,114,.18);
  border-radius: var(--radius-lg);
  text-align: center;
}
.insurance-note p { margin: 0; font-size: .9rem; color: var(--text-main); }
.process-cta { text-align: center; }

/* =========================================================
   KONTAKT
========================================================= */
.contact { padding: 90px 0 100px; position: relative; overflow: hidden; }
.contact-lotus { width: min(320px, 46vw); left: -90px; top: 60px; --lotus-opacity: .15; }
.contact-inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; }
.contact-text h2 { font-size: clamp(2rem, 3.4vw, 2.6rem); }
.contact-alt { list-style: none; padding: 0; margin: 28px 0; display: flex; flex-direction: column; gap: 16px; }
.contact-alt li { display: flex; align-items: center; gap: 12px; color: var(--text-main); font-size: .95rem; }
.contact-alt svg { color: var(--sage); flex-shrink: 0; }
.privacy-note {
  font-size: .85rem;
  color: var(--sage-dark);
  border-top: 1px solid rgba(78,102,80,.18);
  padding-top: 18px;
}

.contact-form {
  background: var(--grad-card);
  border: 1px solid rgba(123,143,114,.18);
  border-radius: var(--radius-xl);
  padding: 44px;
  box-shadow: var(--shadow-card);
}
.form-row { margin-bottom: 20px; }
.form-row label {
  display: block;
  font-size: .85rem;
  color: var(--sage-dark);
  margin-bottom: 8px;
  font-family: var(--font-display);
}
.form-row input, .form-row textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid rgba(123,143,114,.25);
  border-radius: var(--radius-sm);
  background: var(--weiss);
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--text-main);
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
  resize: vertical;
}
.form-row input:focus, .form-row textarea:focus {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 4px rgba(123,143,114,.15);
}
.form-checks { border: none; padding: 0; margin: 0 0 18px; display: flex; gap: 22px; flex-wrap: wrap; }
.form-checks legend { font-size: .85rem; color: var(--sage-dark); font-family: var(--font-display); margin-bottom: 10px; padding: 0; }
.check { display: flex; align-items: center; gap: 9px; font-size: .9rem; color: var(--text-soft); cursor: pointer; }
.check input { accent-color: var(--sage); width: 16px; height: 16px; }
.consent { align-items: flex-start; margin-bottom: 22px; font-size: .85rem; line-height: 1.6; }
.consent input { margin-top: 5px; flex-shrink: 0; }
.consent a { color: var(--sage-dark); text-decoration: underline; }

/* =========================================================
   FOOTER
========================================================= */
/* Startet exakt mit --sage-dark, damit die Riss-Kante darüber nahtlos anschließt */
.site-footer {
  background: linear-gradient(180deg, var(--sage-dark) 0%, #445A46 100%);
  color: var(--creme);
  padding: 20px 0 26px;
}
.site-footer h3 { color: var(--creme); font-size: 1rem; letter-spacing: .04em; margin-bottom: 18px; }
.site-footer p { color: rgba(247,242,236,.75); }

.footer-grid { display: grid; grid-template-columns: 1.1fr .9fr 1.1fr; gap: 48px; padding: 44px 0; }
.footer-brand-block .logo { color: var(--creme); margin-bottom: 18px; }
.footer-address {
  list-style: none; padding: 0; margin: 0 0 24px;
  display: flex; flex-direction: column; gap: 12px;
  font-size: .92rem;
}
.footer-address li { display: flex; align-items: flex-start; gap: 11px; color: rgba(247,242,236,.85); }
.footer-address svg { color: var(--rose); flex-shrink: 0; margin-top: 4px; }
.footer-address a { transition: color .3s; }
.footer-address a:hover { color: var(--rose); }

.social-row { display: flex; gap: 12px; }
.social-link {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(247,242,236,.3);
  color: var(--creme);
  transition: background .45s var(--ease), color .45s var(--ease), transform .45s var(--ease), border-color .45s var(--ease);
}
.social-link:hover { background: var(--grad-rose); border-color: transparent; color: var(--sage-dark); transform: translateY(-3px); }
.social-link svg { width: 19px; height: 19px; }

.footer-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; font-size: .92rem; }
.footer-menu a { color: rgba(247,242,236,.85); transition: color .35s, padding-left .35s; }
.footer-menu a:hover { color: var(--rose); padding-left: 5px; }

.footer-map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(247,242,236,.22);
  box-shadow: var(--shadow-soft);
  min-height: 240px;
  background: rgba(247,242,236,.08);
}
.footer-map iframe { width: 100%; height: 100%; min-height: 240px; border: 0; display: block; filter: saturate(.82); }

.footer-badges {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 26px 0;
  border-top: 1px solid rgba(247,242,236,.16);
}
.badge-placeholder {
  font-size: .75rem;
  border: 1px dashed rgba(247,242,236,.4);
  padding: 9px 18px;
  border-radius: 999px;
  opacity: .75;
}
/* ---------- Verbandslogo (VFP) ----------
   Das Logo bleibt in seinen Originalfarben – Verbandslogos dürfen in der
   Regel nicht eingefärbt werden. Deshalb helle Fläche statt Umfärben. */
.footer-badges {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; flex-wrap: wrap;
  padding: 26px 0 4px;
}
.vfp-badge {
  background: var(--creme);
  border-radius: 50%;
  padding: 12px;
  width: 104px; height: 104px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 14px 34px -20px rgba(0,0,0,.5);
}
.vfp-badge img { width: 100%; height: 100%; object-fit: contain; }
/* Zweites Siegel (Psychomeda) – weisse Fläche, damit das JPG randlos sitzt */
.siegel-badge { background: #fff; padding: 9px; }
.siegel-badge img { border-radius: 50%; }
.siegel-badge:hover { transform: translateY(-2px); transition: transform .3s var(--ease); }
.vfp-text {
  margin: 0;
  font-size: .78rem;
  line-height: 1.6;
  color: rgba(247,242,236,.72);
  max-width: 30em;
}
@media (max-width: 620px) {
  .footer-badges { flex-direction: column; text-align: center; gap: 14px; }
  .vfp-badge { width: 88px; height: 88px; }
}

/* Rechtliches: bewusst klein und ganz unten, unter dem Verbandslogo */
.footer-legal {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 8px 22px;
  padding: 20px 0 0;
  margin-top: 18px;
  border-top: 1px solid rgba(247,242,236,.15);
}
.footer-legal a,
.footer-legal .consent-reopen {
  font-family: var(--font-body);
  font-size: .78rem;
  color: rgba(247,242,236,.62);
  opacity: 1;
}
.footer-legal a:hover,
.footer-legal .consent-reopen:hover { color: var(--creme); text-decoration: underline; }

.footer-copy { text-align: center; font-size: .8rem; opacity: .6; margin: 12px 0 0; color: var(--creme); }

/* =========================================================
   UNTERSEITE „ÜBER MICH"
========================================================= */

/* ---------- Seiten-Hero ---------- */
.page-hero { padding: 170px 0 80px; position: relative; overflow: hidden; }
.page-hero-lotus { width: min(340px, 46vw); right: -110px; top: -60px; --lotus-opacity: .16; }
.page-hero-inner {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(32px, 5vw, 70px);
  align-items: center;
  position: relative; z-index: 2;
}
.portrait-frame { position: relative; }
.portrait-frame .photo-placeholder,
.portrait-frame .portrait-photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
}
/* echte Fotos */
.portrait-photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
}
.portrait-photo.large { aspect-ratio: 4 / 5; }
.story-media .portrait-photo { aspect-ratio: 2 / 3; }  /* Quellformat – so wird nichts beschnitten */
.portrait-frame::after {
  /* zarter Rahmenversatz, nimmt dem Bild die Strenge */
  content: '';
  position: absolute;
  inset: 20px -20px -20px 20px;
  border: 1px solid rgba(123,143,114,.35);
  border-radius: var(--radius-xl);
  z-index: -1;
}
.page-hero h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); margin-bottom: .35em; }
.page-hero h1 em { font-style: italic; color: var(--rose-tief); }
.page-hero-lede { font-size: 1.08rem; max-width: 30em; }
.page-hero-sig {
  margin-top: 26px;
  font-style: italic;
  color: var(--sage-dark);
  font-size: 1.05rem;
}

/* ---------- Brücke zur Leserin ---------- */
.bridge { padding: 80px 0 90px; position: relative; overflow: hidden; }
.bridge-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.bridge-inner p { font-size: 1.06rem; }
.bridge-turn {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-style: italic;
  color: var(--sage-dark);
  line-height: 1.5;
  margin-top: 8px;
}

/* ---------- Mein Weg ---------- */
.story { padding: 90px 0 100px; position: relative; overflow: hidden; }
.story-lotus { width: min(320px, 46vw); left: -100px; bottom: -50px; --lotus-opacity: .14; }
.story-inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 66px); align-items: center; }
.story-text > p { font-size: 1.02rem; }
.story-quote {
  margin: 30px 0 0;
  padding: 22px 0 22px 26px;
  border-left: 2px solid var(--rose);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--sage-dark);
}
.story-media .photo-placeholder { aspect-ratio: 4 / 5; border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); }

/* ---------- Werte ---------- */
.values { padding: 90px 0 100px; position: relative; overflow: hidden; }
.values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.value-card {
  display: flex; gap: 20px;
  background: var(--grad-card);
  border: 1px solid rgba(123,143,114,.14);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: 0 20px 50px -34px rgba(78,102,80,.35);
  transition: transform .55s var(--ease-soft), box-shadow .55s var(--ease-soft);
}
.value-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); }
.value-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--rose-tief);
  line-height: 1;
  flex-shrink: 0;
  padding-top: 4px;
}
.value-card h3 { font-size: 1.06rem; margin-bottom: .4em; }
.value-card p { margin: 0; font-size: .94rem; }

/* ---------- Wie ich arbeite ---------- */
.methods { padding: 90px 0 100px; position: relative; overflow: hidden; }
.methods-lotus { width: min(320px, 46vw); right: -100px; top: 40px; --lotus-opacity: .13; }
.method {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(28px, 4.5vw, 60px);
  align-items: center;
  margin-bottom: 60px;
}
.method:last-child { margin-bottom: 0; }
/* jede zweite Zeile gespiegelt – ergibt einen ruhigen Rhythmus */
.method:nth-child(even) .method-media { order: 2; }
.method-media .photo-placeholder,
.method-media img {
  display: block;
  width: 100%;
  height: auto;          /* nötig, sonst schlägt das height-Attribut aspect-ratio */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
/* Spalten spiegeln, damit das Bild links wie rechts gleich breit ist */
.method:nth-child(even) { grid-template-columns: 1.1fr .9fr; }

/* ---------- Gestaltete Karten statt Personenfotos (Für wen ich da bin) ----------
   Ein Wort für das, was in dieser Lebenslage fehlt – nicht für das Problem. */
.situation-art {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  isolation: isolate;
}
.situation-art::after {                 /* dieselbe Papierstruktur wie im Rest der Seite */
  content: '';
  position: absolute; inset: 0;
  background: url('../img/paper-grain.jpg') center / 480px;
  mix-blend-mode: multiply;
  opacity: .35;
  z-index: -1;
}
.situation-art--rose   { background: linear-gradient(145deg, #F4E1E4 0%, #E8C3CA 100%); }
.situation-art--sand   { background: linear-gradient(145deg, #F7F2EC 0%, #E8DDD1 100%); }
.situation-art--salbei { background: linear-gradient(145deg, #EEF1EA 0%, #D3DCCD 100%); }
.situation-art--lotus  { background: linear-gradient(145deg, #F7EDEE 0%, #E9DCD0 100%); }
.situation-art-lotus {
  width: 52px !important; height: 52px !important;
  aspect-ratio: auto !important;
  box-shadow: none !important; border-radius: 0 !important;
  object-fit: contain;
  opacity: .8;
}
.situation-art-wort {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  color: var(--sage-dark);
  letter-spacing: .01em;
}
.method-label {
  display: inline-block;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 12px;
}
.method h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin-bottom: .45em; }
.method p { margin-bottom: .8em; }
/* „Ich begleite dich bei:" + Aufzählung */
.method-intro { font-weight: 500; color: var(--sage-dark); margin: 1.2em 0 .5em; }
.method-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1em;
  display: flex; flex-direction: column; gap: 9px;
}
.method-list li {
  position: relative;
  padding-left: 22px;
  font-size: .95rem;
  color: var(--text-soft);
  line-height: 1.6;
}
.method-list li::before {
  content: '';
  position: absolute; left: 2px; top: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rose);
}
/* Methoden, die noch nicht angeboten werden – Kennzeichnung ist Pflicht */
.method-soon {
  display: inline-block;
  margin-left: 6px;
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--sage-dark);
  background: rgba(123,143,114,.16);
  border-radius: 999px;
  padding: 2px 10px;
  vertical-align: middle;
}

.method-for {
  font-size: .92rem;
  color: var(--sage-dark);
  background: rgba(123,143,114,.1);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin: 14px 0 0;
}

/* ---------- Hinweis-Box in Situationsblöcken (rosé) ---------- */
.method-for.is-rose {
  background: var(--grad-rose);
  color: var(--sage-dark);
}

/* ---------- kleine Hilfsklassen (statt Inline-Styles, damit eine
   strenge Content-Security-Policy ohne 'unsafe-inline' möglich ist) ---------- */
.mt-md { margin-top: 22px; }
.mt-lg { margin-top: 28px; }
.section-head-sub { margin-top: 70px; margin-bottom: 34px; }
.h2-sm { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.label-hint { opacity: .6; }
.form-hint { font-size: .8rem; color: var(--text-soft); margin: 7px 0 0; line-height: 1.5; }

/* Zusatz in Überschriften, etwas leiser gesetzt */
.h3-add { font-size: .88em; color: var(--sage); font-style: italic; }

/* Verfahren als ruhige Stichwortliste */
.method-tags {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.method-tags li {
  font-size: .82rem;
  line-height: 1.3;
  color: var(--sage-dark);
  background: rgba(216,167,177,.28);
  border-radius: 999px;
  padding: 6px 14px;
}

/* Honeypot gegen Spam-Bots. Bewusst statt reCAPTCHA – das wäre selbst eine
   Datenübertragung an Google. Für Menschen unsichtbar, für Screenreader
   ausgeblendet; Bots füllen es aus und werden serverseitig verworfen. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ---------- Einwilligungs-Banner ----------
   Wichtig: „Ablehnen" und „Akzeptieren" sind bewusst optisch gleichwertig.
   Ein hervorgehobener Zustimmen-Button gilt als unzulässiges Dark Pattern. */
.consent-overlay {
  position: fixed; inset: 0;
  background: rgba(62,58,53,.42);
  backdrop-filter: blur(3px);
  z-index: 300;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 20px;
}
.consent-box {
  width: 100%;
  max-width: 720px;
  background: var(--creme);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 90px -40px rgba(62,58,53,.65);
  padding: clamp(22px, 3vw, 32px);
  max-height: 82vh;
  overflow-y: auto;
}
.consent-box h2 { font-size: 1.15rem; margin-bottom: .5em; }
.consent-box p { font-size: .92rem; margin-bottom: 1em; }
.consent-box a { color: var(--sage-dark); text-decoration: underline; }

.consent-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: stretch;
  margin-top: 18px;
}
/* Beide Schaltflächen sind zwingend identisch – gleiche Breite, gleiche Höhe,
   gleiche Farbe. min-height verhindert, dass die längere Beschriftung beim
   Umbruch höher wird und dadurch stärker wirkt. */
.consent-actions .consent-btn {
  flex: 1 1 180px;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-body);
  font-size: .92rem;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--sage-dark);
  background: var(--sage-dark);
  color: var(--creme);
  cursor: pointer;
  transition: filter .3s var(--ease), transform .3s var(--ease);
}
.consent-actions .consent-btn:hover { filter: brightness(1.14); transform: translateY(-2px); }

.consent-more {
  background: none; border: 0;
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--sage-dark);
  text-decoration: underline;
  cursor: pointer;
  padding: 14px 4px 0;
}
.consent-details { margin-top: 18px; border-top: 1px solid rgba(123,143,114,.25); padding-top: 16px; }
.consent-details[hidden] { display: none; }
.consent-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(123,143,114,.16);
}
.consent-item:last-child { border-bottom: 0; }
.consent-item input { width: 18px; height: 18px; accent-color: var(--sage); margin-top: 4px; flex-shrink: 0; }
.consent-item h3 { font-size: .98rem; margin-bottom: .25em; }
.consent-item p { font-size: .86rem; margin: 0; }
.consent-fixed { font-size: .78rem; color: var(--sage); font-style: italic; }
.consent-links { margin-top: 16px; font-size: .82rem; display: flex; gap: 18px; flex-wrap: wrap; }

/* Aufrufpunkt im Footer – Widerruf muss jederzeit möglich sein */
.consent-reopen {
  background: none; border: 0;
  font-family: var(--font-body);
  font-size: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
  opacity: .85;
  text-align: left;
}
.consent-reopen:hover { opacity: 1; text-decoration: underline; }

@media (max-width: 620px) {
  .consent-overlay { padding: 0; align-items: flex-end; }
  .consent-box { border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 88vh; }
  .consent-actions .consent-btn { flex: 1 1 100%; }
}

/* ---------- Ruhiges Bildband mit Zitat ---------- */
.quote-band {
  position: relative;
  min-height: clamp(400px, 48vw, 570px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  text-align: center;
}
.quote-band img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Abdunklung, damit die Schrift sicher lesbar bleibt */
.quote-band::before {
  content: '';
  position: absolute; inset: 0;
  /* An den Raendern schwaecher, damit das Foto dort heller ist und
     leichter ins Weiss bzw. Creme uebergeht; in der Mitte voll fuer die Schrift. */
  background: linear-gradient(180deg,
    rgba(62,58,53,.18) 0%,
    rgba(62,58,53,.44) 24%,
    rgba(62,58,53,.56) 72%,
    rgba(62,58,53,.20) 100%);
  z-index: 1;
}
/* Weiche Kanten statt Riss – oben ins Weiss, unten ins Papier.
   Ein linearer Alpha-Verlauf bricht am transparenten Ende hart ab und
   erzeugt genau die sichtbare Kante. Darum eine Smootherstep-Kurve:
   flach an beiden Enden, der Uebergang loest sich vollstaendig auf. */
.quote-band::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      var(--weiss) 0%,
      rgba(255,255,255,0.993) 3.1%,
      rgba(255,255,255,0.955) 6.2%,
      rgba(255,255,255,0.871) 9.3%,
      rgba(255,255,255,0.743) 12.4%,
      rgba(255,255,255,0.585) 15.5%,
      rgba(255,255,255,0.415) 18.5%,
      rgba(255,255,255,0.257) 21.6%,
      rgba(255,255,255,0.129) 24.7%,
      rgba(255,255,255,0.045) 27.8%,
      rgba(255,255,255,0.007) 30.9%,
      rgba(255,255,255,0) 34.0%),
    linear-gradient(0deg,
      var(--creme) 0%,
      rgba(247,242,236,0.993) 2.9%,
      rgba(247,242,236,0.955) 5.8%,
      rgba(247,242,236,0.871) 8.7%,
      rgba(247,242,236,0.743) 11.6%,
      rgba(247,242,236,0.585) 14.5%,
      rgba(247,242,236,0.415) 17.5%,
      rgba(247,242,236,0.257) 20.4%,
      rgba(247,242,236,0.129) 23.3%,
      rgba(247,242,236,0.045) 26.2%,
      rgba(247,242,236,0.007) 29.1%,
      rgba(247,242,236,0) 32.0%);
  z-index: 2;
  pointer-events: none;
}
.quote-band .container { position: relative; z-index: 3; max-width: 760px; }
.quote-band p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2.6vw, 1.9rem);
  line-height: 1.55;
  color: var(--weiss);
  margin: 0;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.quote-band cite {
  display: block;
  margin-top: 18px;
  font-style: normal;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}

/* ---------- Sanftes Bild als Sektions-Hintergrund ---------- */
.bg-image { position: relative; overflow: hidden; }
.bg-image > img.bg-image-src {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: .5;
}
.bg-image::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(247,242,236,.9));
  z-index: 1;
}
.bg-image > .container { position: relative; z-index: 2; }

/* Variante für das Markenmotiv: Bild rechts sichtbar, Text links frei.
   Der Verlauf hellt von links stark auf, damit die Karten lesbar bleiben. */
.bg-image.is-soft > img.bg-image-src { opacity: .85; object-position: right center; }
.bg-image.is-soft::after {
  background:
    linear-gradient(90deg, rgba(247,242,236,.97) 0%, rgba(247,242,236,.9) 45%, rgba(247,242,236,.7) 100%),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(247,242,236,.55));
}
@media (max-width: 900px) {
  /* schmal wird das Motiv zur reinen Fläche */
  .bg-image.is-soft::after {
    background: linear-gradient(180deg, rgba(247,242,236,.93), rgba(247,242,236,.95));
  }
}

/* ---------- Rechtstexte ---------- */
.legal { padding: 80px 0 96px; position: relative; }
.legal-inner { max-width: 760px; margin: 0 auto; }
.legal-inner h2 {
  font-size: 1.2rem;
  margin-top: 2.2em;
  padding-top: .9em;
  border-top: 1px solid rgba(123,143,114,.22);
}
.legal-inner h2:first-of-type { margin-top: 1em; }
.legal-inner h3 { font-size: 1.02rem; margin-top: 1.6em; }
.legal-inner p { font-size: .96rem; }
.legal-inner code {
  font-size: .88em;
  background: rgba(123,143,114,.12);
  padding: 2px 6px; border-radius: 5px;
}
.legal-todo {
  background: var(--grad-rose);
  color: var(--sage-dark);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  font-size: .9rem;
  line-height: 1.6;
  margin-bottom: 10px;
}
.legal-updated { margin-top: 2.4em; font-size: .85rem; opacity: .7; }

/* ---------- Karte: Zwei-Klick-Lösung ----------
   Google Maps wird erst nach ausdrücklichem Klick geladen. Vorher geht
   keine Anfrage an Google, es werden also keine IP-Adressen übertragen. */
.map-consent {
  width: 100%; height: 100%;
  min-height: 240px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  padding: 26px 22px;
  text-align: center;
  background: linear-gradient(155deg, var(--sand), var(--rose-hell));
  color: var(--sage-dark);
}
.map-consent svg { width: 30px; height: 30px; opacity: .65; }
.map-consent p { font-size: .84rem; color: var(--sage-dark); margin: 0; max-width: 34em; }
.map-consent-btn {
  font-family: var(--font-body);
  font-size: .85rem;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--sage-dark);
  background: var(--sage-dark);
  color: var(--creme);
  cursor: pointer;
  transition: filter .3s var(--ease), transform .3s var(--ease);
}
.map-consent-btn:hover { filter: brightness(1.12); transform: translateY(-2px); }
.map-consent-link { font-size: .78rem; color: var(--sage-dark); text-decoration: underline; opacity: .8; }

/* ---------- Entwurfs-Hinweis (nur für die Kundenabnahme) ---------- */
.draft-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
  padding: 13px 22px;
  background: var(--sage-dark);
  color: var(--creme);
  font-size: .86rem;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 -10px 30px -18px rgba(62,58,53,.5);
}
.draft-banner strong { color: var(--rose-hell); font-weight: 500; }
.draft-banner button {
  font-family: var(--font-body);
  font-size: .8rem;
  color: var(--creme);
  background: rgba(247,242,236,.14);
  border: 1px solid rgba(247,242,236,.35);
  border-radius: 999px;
  padding: 6px 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .3s var(--ease);
}
.draft-banner button:hover { background: rgba(247,242,236,.26); }
body.has-draft-banner { padding-bottom: 64px; }
@media (max-width: 620px) {
  .draft-banner { font-size: .8rem; padding: 11px 16px; gap: 10px; }
  body.has-draft-banner { padding-bottom: 92px; }
}

/* ---------- Kontaktwege als Kacheln ---------- */
.ways { padding: 88px 0 96px; position: relative; overflow: hidden; }
.ways-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.way-card {
  display: block;
  text-align: center;
  background: var(--grad-card);
  border: 1px solid rgba(123,143,114,.15);
  border-radius: var(--radius-lg);
  padding: 30px 22px;
  box-shadow: 0 20px 50px -34px rgba(78,102,80,.35);
  transition: transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft);
}
.way-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); }
.way-icon {
  width: 52px; height: 52px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--grad-rose);
  color: var(--sage-dark);
  display: flex; align-items: center; justify-content: center;
}
.way-icon svg { width: 22px; height: 22px; }
.way-card h3 { font-size: 1rem; margin-bottom: .3em; }
.way-card p { margin: 0; font-size: .88rem; }
.way-value {
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  color: var(--sage-dark);
  font-size: .95rem;
  word-break: break-word;
}

/* ---------- Vertraulichkeit ---------- */
.trust { padding: 80px 0 90px; position: relative; overflow: hidden; }
.trust-inner {
  max-width: 780px; margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr;
  gap: 26px; align-items: start;
  background: var(--grad-sage);
  color: var(--creme);
  border-radius: var(--radius-lg);
  padding: 34px 36px;
  box-shadow: var(--shadow-soft);
}
.trust-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(247,242,236,.16);
  color: var(--creme);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.trust-icon svg { width: 24px; height: 24px; }
.trust-text h3 { color: var(--creme); font-size: 1.08rem; }
.trust-text p { color: rgba(247,242,236,.88); }
.trust-text p:last-child { margin-bottom: 0; }

/* ---------- Anfahrt ---------- */
.arrival { padding: 88px 0 96px; position: relative; overflow: hidden; }
.arrival-inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: 46px; align-items: center; }
.arrival-map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  min-height: 320px;
}
.arrival-map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; filter: saturate(.82); }
.arrival-list { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 16px; }
.arrival-list li { display: flex; align-items: flex-start; gap: 13px; font-size: .95rem; color: var(--text-soft); }
.arrival-list svg { color: var(--sage); flex-shrink: 0; margin-top: 4px; }

/* ---------- Zentrierter Seiten-Hero (ohne Bild) ---------- */
.page-hero-center { text-align: center; }
.page-hero-center .page-hero-inner {
  display: block;
  max-width: 720px;
  margin: 0 auto;
}
.page-hero-center .page-hero-lede { margin-left: auto; margin-right: auto; }

/* ---------- Erster Kontakt: drei Schritte ---------- */
.firststeps { padding: 84px 0 94px; position: relative; overflow: hidden; }
.firststeps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.firststep {
  background: var(--grad-card);
  border: 1px solid rgba(123,143,114,.15);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: 0 20px 50px -34px rgba(78,102,80,.35);
  transition: transform .55s var(--ease-soft), box-shadow .55s var(--ease-soft);
}
.firststep:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); }
.firststep-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--grad-rose);
  color: var(--sage-dark);
  font-family: var(--font-display);
  margin-bottom: 18px;
}
.firststep h3 { font-size: 1.02rem; margin-bottom: .4em; }
.firststep p { margin: 0; font-size: .93rem; }

/* ---------- Preise ---------- */
.prices { padding: 90px 0 100px; position: relative; overflow: hidden; }
.prices-lotus { width: min(300px, 44vw); left: -90px; bottom: -40px; --lotus-opacity: .14; }
.price-card {
  max-width: 820px; margin: 0 auto;
  background: var(--grad-card);
  border: 1px solid rgba(123,143,114,.16);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  padding: clamp(24px, 3.4vw, 40px);
  position: relative; z-index: 2;
}
.price-row {
  display: flex; align-items: baseline; gap: 18px;
  padding: 22px 4px;
  border-bottom: 1px solid rgba(123,143,114,.18);
}
.price-row:last-of-type { border-bottom: 0; }
.price-info { flex: 1; }
.price-info h3 { font-size: 1.04rem; margin-bottom: .25em; }
.price-info p { margin: 0; font-size: .9rem; }
.price-value {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--sage-dark);
  white-space: nowrap;
  text-align: right;
}
.price-value small { display: block; font-size: .76rem; color: var(--text-soft); }

/* hervorgehobene Zeile: das kostenlose Erstgespräch */
.price-row.is-free {
  background: var(--grad-rose);
  border-radius: var(--radius-md);
  border-bottom: 0;
  padding: 22px 22px;
  margin-bottom: 8px;
}
.price-row.is-free .price-info h3,
.price-row.is-free .price-value { color: var(--sage-dark); }
.price-row.is-free .price-info p { color: rgba(78,102,80,.85); }

.price-honest {
  max-width: 700px; margin: 34px auto 0;
  text-align: center;
  font-size: .96rem;
  position: relative; z-index: 2;
}

/* ---------- Absageregelung ---------- */
.policy { padding: 86px 0 96px; position: relative; overflow: hidden; }
.policy-inner {
  max-width: 780px; margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr;
  gap: 26px; align-items: start;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(123,143,114,.2);
  border-radius: var(--radius-lg);
  padding: 32px 34px;
}
.policy-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--grad-sage);
  color: var(--creme);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.policy-icon svg { width: 24px; height: 24px; }
.policy-text h3 { font-size: 1.06rem; }
.policy-text p:last-child { margin-bottom: 0; }

/* ---------- „Erkennst du dich wieder" ---------- */
.signs { padding: 90px 0 100px; position: relative; overflow: hidden; }
.signs-lotus { width: min(300px, 44vw); right: -90px; bottom: -40px; --lotus-opacity: .14; }
/* Gedankenfetzen: freistehende Sprechblasen statt gleichförmiger Liste.
   Mehrspaltiger Fluss erzeugt automatisch ungleiche Höhen. */
.signs-cloud {
  columns: 2;
  column-gap: clamp(18px, 2.4vw, 28px);
  max-width: 960px;
  margin: 0 auto;
  position: relative; z-index: 2;
}
.sign {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 clamp(16px, 2vw, 24px);
  padding: 24px 28px 26px;
  border-radius: 28px 28px 28px 10px;
  background: var(--weiss);
  border: 1px solid rgba(123,143,114,.15);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  font-size: 1.01rem;
  line-height: 1.65;
  color: var(--text-main);
  transition: transform .55s var(--ease-soft), box-shadow .55s var(--ease-soft);
}
/* großes, blasses Anführungszeichen als Zierde – oben rechts, damit es
   nicht mit dem Textanfang kollidiert */
.sign::before {
  content: '\201C';
  position: absolute;
  top: 10px; right: 20px;
  font-family: var(--font-display);
  font-size: 4.6rem;
  line-height: 1;
  color: var(--rose);
  opacity: .22;
  pointer-events: none;
}
.sign span { position: relative; z-index: 2; display: block; }

/* leichte Schräglage und wechselnde Töne – nimmt der Reihe die Strenge */
.sign:nth-child(5n+1) { transform: rotate(-1.1deg); }
.sign:nth-child(5n+2) { transform: rotate(.8deg);  background: linear-gradient(155deg, var(--weiss), var(--creme)); }
.sign:nth-child(5n+3) { transform: rotate(-.5deg); background: linear-gradient(150deg, #FDF7F8, var(--rose-hell)); border-color: rgba(216,167,177,.4); }
.sign:nth-child(5n+4) { transform: rotate(1.2deg); }
.sign:nth-child(5n+5) { transform: rotate(-.8deg); background: linear-gradient(155deg, var(--weiss), var(--creme)); }

/* Akzentkarten: gleiche Schriftgröße wie alle anderen, nur farblich gesetzt */
.sign.is-loud {
  background: var(--grad-sage);
  border-color: transparent;
  box-shadow: var(--shadow-soft);
}
.sign.is-loud, .sign.is-loud span { color: var(--creme); }
.sign.is-loud::before { color: var(--creme); opacity: .34; }

.sign:hover {
  transform: rotate(0deg) translateY(-7px);
  box-shadow: var(--shadow-lift);
}

.signs-after {
  margin: clamp(26px, 4vw, 44px) auto 0;
  max-width: 620px;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.8vw, 1.22rem);
  color: var(--sage-dark);
  position: relative; z-index: 2;
}
.signs-after::after {
  content: '';
  display: block;
  width: 64px; height: 2px;
  margin: 20px auto 0;
  border-radius: 2px;
  background: var(--grad-rose);
}

/* ---------- Grenzen: „Wann ich nicht die Richtige bin" ---------- */
.limits { padding: 90px 0 100px; position: relative; overflow: hidden; }
.limits-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin-bottom: 34px;
}
.limit-card {
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(123,143,114,.2);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
}
.limit-card h3 { font-size: 1rem; margin-bottom: .4em; }
.limit-card p { margin: 0; font-size: .93rem; }
.crisis-note {
  max-width: 760px; margin: 0 auto;
  background: var(--grad-sage);
  color: var(--creme);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.crisis-note h3 { color: var(--creme); font-size: 1.06rem; }
.crisis-note p { color: rgba(247,242,236,.88); margin-bottom: 0; font-size: .95rem; }
.crisis-number {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--weiss);
  margin: 6px 0;
}

/* ---------- Praxisraum ---------- */
.room { padding: 90px 0 100px; position: relative; overflow: hidden; }
.room-grid { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: repeat(2, 1fr); gap: 18px; }
.room-grid .photo-placeholder { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); height: 100%; min-height: 190px; }
.room-grid > :first-child { grid-row: span 2; }

/* ---------- Persönliches ---------- */
.personal { padding: 86px 0 96px; position: relative; overflow: hidden; }
.personal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.personal-card {
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(123,143,114,.16);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
  transition: transform .5s var(--ease-soft);
}
.personal-card:hover { transform: translateY(-7px); }
.personal-icon {
  width: 50px; height: 50px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--grad-rose);
  color: var(--sage-dark);
  display: flex; align-items: center; justify-content: center;
}
.personal-icon svg { width: 22px; height: 22px; }
.personal-card h3 { font-size: .98rem; margin-bottom: .35em; }
.personal-card p { margin: 0; font-size: .89rem; }

/* ---------- FAQ ---------- */
.faq { padding: 90px 0 100px; position: relative; overflow: hidden; }
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid rgba(123,143,114,.22);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 44px 24px 0;
  position: relative;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--sage-dark);
  transition: color .3s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--rose-tief); }
.faq-item summary::after {
  content: '';
  position: absolute; right: 8px; top: 50%;
  width: 10px; height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .35s var(--ease);
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-answer { padding: 0 20px 26px 0; margin: 0; }
.faq-answer p { margin-bottom: .7em; }
.faq-answer p:last-child { margin-bottom: 0; }

/* ---------- Abschluss-CTA ---------- */
.closing { padding: 96px 0 104px; position: relative; overflow: hidden; text-align: center; }
.closing-lotus { width: min(300px, 44vw); left: -90px; bottom: -40px; --lotus-opacity: .15; }
.closing-inner { max-width: 640px; margin: 0 auto; position: relative; z-index: 2; }
.closing h2 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); }
.closing-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* =========================================================
   TABLET
========================================================= */
@media (max-width: 1024px) {
  .main-nav {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(310px, 82vw);
    background: linear-gradient(160deg, var(--weiss), var(--creme));
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 26px;
    padding: 40px;
    transform: translateX(100%);
    transition: transform .5s var(--ease);
    z-index: 95;
    box-shadow: -24px 0 60px -34px rgba(0,0,0,.35);
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav .btn { margin-top: 10px; }
  .main-nav .nav-link { color: var(--text-main) !important; }
  .nav-toggle { display: flex; }
  .nav-toggle.open span { background: var(--sage-dark) !important; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .mobile-nav-backdrop.open { opacity: 1; pointer-events: auto; }

  .usp-grid, .usp-grid-3, .focus-grid { grid-template-columns: repeat(2, 1fr); }

  /* Über mich */
  .page-hero { padding: 140px 0 70px; }
  .page-hero-inner, .story-inner { grid-template-columns: 1fr; gap: 44px; }
  /* width:100% ist nötig – „margin: 0 auto" hebt bei Grid-Items das
     Strecken auf, die Box würde sonst auf Inhaltsbreite zusammenfallen */
  .page-hero-inner .portrait-frame,
  .story-media { width: 100%; max-width: 400px; margin: 0 auto; }
  .portrait-frame::after { inset: 16px -16px -16px 16px; }
  .method { grid-template-columns: 1fr; gap: 26px; }
  .method:nth-child(even) .method-media { order: 0; }
  /* Die Desktop-Regel für jeden zweiten Block (1.1fr .9fr) ist spezifischer
     als .method – ohne diese Zeile stünden gerade Blöcke auf dem Handy
     nebeneinander gequetscht statt untereinander. */
  .method:nth-child(even) { grid-template-columns: 1fr; }
  .method-media { max-width: 480px; }
  .personal-grid { grid-template-columns: repeat(2, 1fr); }
  .limits-grid { grid-template-columns: 1fr; }
  .firststeps-grid { grid-template-columns: 1fr; }
  .ways-grid { grid-template-columns: repeat(2, 1fr); }
  .arrival-inner { grid-template-columns: 1fr; gap: 32px; }

  .philosophy-inner { grid-template-columns: 1fr; text-align: center; }
  .philosophy-text blockquote { text-align: left; }
  .photo-placeholder.large { max-width: 420px; margin: 0 auto; }
  .philosophy-lotus { right: 4%; bottom: -8%; width: 40%; }

  .testimonial-grid { grid-template-columns: 1fr; }
  .contact-inner { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-map-block { grid-column: 1 / -1; }
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 760px) {
  body { font-size: .97rem; }

  /* iOS behandelt fixed-Backgrounds unzuverlässig – dort mitscrollen lassen */
  .bg-paper, .torn-into-paper::after, .torn-on-paper {
    background-attachment: scroll, scroll;
  }
  /* Hero mobil: Blüte als vollständig sichtbares Bildband, Text darunter */
  .hero {
    display: block;
    min-height: 0;
    padding: 0 0 68px;
    background: var(--weiss);
  }
  .hero-bg { position: relative; inset: auto; width: 100%; }
  .hero-bg img { height: auto; aspect-ratio: 4 / 3; object-position: center 38%; }
  .hero-veil { top: 0; bottom: auto; height: 75vw; }
  .hero-veil::before {
    background: linear-gradient(180deg,
      rgba(46,42,40,.5) 0%,
      rgba(46,42,40,.08) 26%,
      rgba(46,42,40,.06) 58%,
      rgba(46,42,40,.35) 84%,
      rgba(255,255,255,.96) 100%);
  }
  .hero-veil::after { display: none; }

  .hero-inner { margin-top: 34px; }
  .hero-eyebrow { color: var(--sage); }
  .hero-title { font-size: 2.1rem; color: var(--sage-dark); text-shadow: none; }
  .hero-title em { color: var(--rose-tief); }
  .hero-subtitle { color: var(--text-soft); text-shadow: none; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; }
  .scroll-hint { display: none; }

  .usps, .focus, .quiz, .philosophy, .testimonials, .process, .contact { padding-top: 64px; padding-bottom: 72px; }
  .usp-grid, .usp-grid-3, .focus-grid { grid-template-columns: 1fr; }
  /* einspaltig braucht es den Versatz nicht – sonst entstehen ungleiche Abstände */
  .usp-grid > .usp-card:nth-child(even) { margin-top: 0; }
  .contact-form { padding: 28px 22px; }
  .quiz-card { padding: 28px 22px; border-radius: var(--radius-lg); }
  .quiz-option { padding: 15px 18px; font-size: .93rem; }

  .focus-lotus, .contact-lotus, .process-lotus, .quiz-lotus { width: 60vw; }

  /* Über mich */
  .page-hero, .bridge, .story, .values, .methods, .room, .personal, .faq, .closing,
  .signs, .limits, .firststeps, .prices, .policy, .ways, .trust, .arrival {
    padding-top: 64px; padding-bottom: 72px;
  }
  .ways-grid { grid-template-columns: 1fr; }
  .trust-inner { grid-template-columns: 1fr; gap: 18px; padding: 26px 22px; }
  .price-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .price-value { text-align: left; }
  .policy-inner { grid-template-columns: 1fr; gap: 18px; padding: 26px 22px; }
  .signs-cloud { columns: 1; }
  .sign { padding: 20px 22px 22px; font-size: .97rem; }
  .sign::before { font-size: 3.6rem; top: 8px; right: 16px; }
  .crisis-note { padding: 24px 20px; }
  .page-hero { padding-top: 120px; }
  .values-grid, .personal-grid { grid-template-columns: 1fr; }
  .room-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .room-grid > :first-child { grid-row: auto; }
  .value-card { padding: 26px 22px; }
  .faq-item summary { font-size: .99rem; padding-right: 36px; }
  .closing-actions .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Heller Kopfbereich auf dem Handy ----------
   Unter 760 px steht das Bild als eigener Block über dem Text (4:3).
   Der Hintergrund darunter ist Weiß – deshalb läuft der Block in Weiß
   aus, nicht in Creme, sonst entsteht an der Unterkante eine Linie. */
@media (max-width: 760px) {
  .hero--hell .hero-bg img {
    object-position: 84% 45%;
    /* das Bild selbst unten ausblenden – so bleibt keine Haarlinie */
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  }
  .hero--hell .hero-veil::before {
    background: linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 52%,
      rgba(255,255,255,.18) 62%,
      rgba(255,255,255,.45) 72%,
      rgba(255,255,255,.75) 84%,
      rgba(255,255,255,.93) 93%,
      #FFFFFF 100%);
  }
}