/* ============================================================
   MIRACLES — Website Mockup
   Brand: Brigitte Mühlberger · Traumasensibles Coaching
   Designsystem: Editorial Garden — warm, ruhig, atmend
   ============================================================ */

/* ===== DESIGN TOKENS ===== */
:root {
  /* Neutrale Basis — abgeleitet aus der neuen Palette */
  --bg:        #FAF6F4;   /* Off-White mit leicht warmem Stich */
  --bg-soft:   #F5E5E3;   /* Sehr blasses Rosé — Tint aus Tonys Pink */
  --bg-deep:   #EDD8D5;   /* Tieferes Rosé — Akzent-Flächen */
  --ink:       #1F2A1D;   /* Sehr dunkles Grün-Anthrazit — aus Tom Thumb */
  --ink-soft:  #5A6A56;   /* Mittleres Grün-Grau */
  --ink-faint: #9AA597;   /* Verblasstes Grün-Grau */

  /* Akzente — die vier Brand-Farben */
  --violet:    #C77FE0;   /* Perfume — Hauptakzent (Main) */
  --violet-deep:#B481C1;  /* Perfume-Shade — Hover/aktiv */
  --violet-mist:#F8EAFB;  /* Perfume-Tint — blasse Hintergrundtöne */
  --moss:      #E6A29C;   /* Tonys Pink — Sekundär-Akzent */
  --forest:    #365931;   /* Tom Thumb — Dunkle Sektion / Tiefe */
  --lime:      #F24C3D;   /* Flamingo — Highlight, kontrastreich */
  --mustard:   #E6A29C;   /* Alias auf Tonys Pink */

  /* Linien */
  --line:      #EDD8D5;
  --line-strong:#DCC0BD;

  /* Schriften */
  --display:   "Fraunces", "Times New Roman", Georgia, serif;
  --text:      "Manrope", system-ui, -apple-system, sans-serif;

  /* Raster */
  --section-y: clamp(80px, 11vw, 160px);
  --gap-block: clamp(32px, 4vw, 56px);
  --max-w:     1240px;
  --max-prose: 960px;
  --pad-x:     clamp(24px, 5vw, 64px);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Subtle paper grain — gibt der Marke Wärme ohne aufdringlich zu sein */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

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

::selection { background: var(--violet); color: var(--bg); }

/* ===== TYPOGRAPHY UTILITIES ===== */
.display {
  font-family: var(--display);
  font-weight: 350;
  font-style: normal;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
}

.eyebrow {
  font-family: var(--text);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

em.lyric {
  font-family: var(--display);
  font-style: italic;
  font-weight: 350;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--violet);
}

/* ===== LAYOUT ===== */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  position: relative;
  z-index: 2;
}

section {
  padding: var(--section-y) 0;
  position: relative;
  z-index: 2;
}

.block-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--text);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  margin-bottom: 28px;
}
.block-label::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--ink-faint);
}

/* ===== NAVIGATION ===== */
nav.top {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(250, 247, 238, 0.85);
  border-bottom: 1px solid rgba(221, 212, 184, 0.4);
}
nav.top .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
}
.brand-mark {
  font-family: var(--display);
  font-style: italic;
  font-weight: 350;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.brand-mark::before {
  content: "";
  color: var(--violet);
  margin-right: 8px;
  font-style: normal;
}
/* Trennzeichen statt Apostroph: zarter, leicht hochgestellter Punkt in Markenviolett */
.brand-sep {
  color: var(--violet);
  font-style: normal;
  vertical-align: 0.18em;
  padding: 0 0.04em;
}
.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
}
.nav-links a {
  color: var(--ink-soft);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--violet); }
.nav-cta {
  padding: 10px 20px;
  background: #5A4060;
  color: var(--bg);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s;
}
.nav-cta:hover { background: var(--violet); }

@media (max-width: 880px) {
  .nav-links { display: none; }
  nav.top .nav-cta { display: none; }
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  font-family: var(--text);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
}
.btn-primary {
  background: var(--violet);
  color: var(--bg);
}
.btn-primary:hover {
  background: var(--violet-deep);
  transform: translateY(-1px);
}
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn-secondary:hover {
  border-color: var(--ink);
  background: var(--bg-soft);
}
.btn .arrow {
  transition: transform 0.25s;
  display: inline-block;
}
.btn:hover .arrow { transform: translateX(4px); }

/* ============================================================
   BLOCK 1 — HERO
   ============================================================ */
.hero {
  padding: clamp(40px, 6vw, 80px) 0 var(--section-y);
  position: relative;
  overflow: hidden;
}
.hero .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: end;
}
@media (min-width: 880px) {
  .hero .container {
    grid-template-columns: 1.4fr 1fr;
  }
}
.hero-headline {
  font-size: clamp(32px, 5.3vw, 70px);
}
.hero-headline em {
  font-style: italic;
  color: var(--violet);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.hero-subline {
  margin-top: 32px;
  max-width: 480px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.hero-meta {
  margin-top: 40px;
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

/* Hero decorative ornament — Lotus / bloom marker */
.hero-ornament {
  display: flex;
  justify-content: flex-end;
  align-self: end;
  padding-bottom: 12px;
}
.hero-ornament svg {
  width: clamp(180px, 22vw, 280px);
  height: auto;
}

/* ============================================================
   BLOCK 2 — INTRO
   ============================================================ */
.intro {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.intro-inner {
  max-width: var(--max-prose);
  margin: 0 auto;
  text-align: center;
}
.intro-text {
  font-family: var(--display);
  font-weight: 350;
  font-style: normal;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.intro-text strong {
  font-weight: 500;
}
.intro-location {
  margin-top: 32px;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ============================================================
   BLOCK 3 — WIEDERERKENNEN (Fragen)
   ============================================================ */
.recognize .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 80px);
}
@media (min-width: 880px) {
  .recognize .container {
    grid-template-columns: 1fr 1.3fr;
  }
}
.recognize-headline {
  font-size: clamp(40px, 5.5vw, 68px);
}
.recognize-headline em {
  font-style: italic;
  color: var(--moss);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.recognize-intro {
  margin-top: 24px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 380px;
}
.recognize-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.recognize-list li {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  position: relative;
  padding-left: 36px;
}
.recognize-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 18px;
  height: 1px;
  background: var(--violet);
}
.recognize-list li:last-child { border-bottom: none; }
/* Optionaler, farblich abgesetzter Punkt für jugendliche Mädchen */
.recognize-list li.teen {
  background: var(--violet-mist);
  border: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 20px 24px 20px 44px;
  color: var(--ink);
}
.recognize-list li.teen::before {
  top: 28px;
  left: 24px;
  background: var(--violet-deep);
}
.recognize-list em.it {
  font-family: var(--display);
  font-style: italic;
  font-variation-settings: "SOFT" 100;
}

.recognize-anchor {
  margin-top: 48px;
  padding: 36px;
  background: var(--violet-mist);
  border-radius: 4px;
  border-left: 3px solid var(--violet);
}
.recognize-anchor p {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.45;
  color: var(--ink);
}
.recognize-anchor .follow {
  margin-top: 16px;
  font-family: var(--text);
  font-style: normal;
  font-size: 16px;
  color: var(--ink-soft);
}
.recognize-cta {
  margin-top: 32px;
}

/* ============================================================
   BLOCK 4 — WARUM MIRACLES
   ============================================================ */
.miracles {
  background: var(--bg-soft);
  text-align: center;
}
.miracles-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.miracles-headline {
  font-size: clamp(40px, 5.5vw, 68px);
}
.miracles-quotes {
  margin: 56px auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 560px;
  text-align: left;
}
.miracle-quote {
  padding-left: 24px;
  border-left: 2px solid var(--moss);
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.4;
  color: var(--ink);
  font-variation-settings: "SOFT" 100;
}
.miracles-coda {
  margin-top: 40px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.miracles-coda strong {
  color: var(--ink);
  font-weight: 500;
}

.miracles-split {
  display: grid;
  grid-template-columns: 0.8fr 0.8fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  margin: 56px 0;
}
.miracles-split .miracles-figure,
.miracles-split .miracles-quotes { margin: 0; }
@media (max-width: 720px) {
  .miracles-split { grid-template-columns: 1fr; }
}

/* ============================================================
   BLOCK 5 — DREI ZUTATEN
   ============================================================ */
.approach-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(48px, 6vw, 80px);
}
.approach-head h2 {
  font-size: clamp(40px, 5.5vw, 72px);
}
.approach-head h2 em {
  font-style: italic;
  color: var(--violet);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.approach-head p {
  margin-top: 20px;
  font-size: 18px;
  color: var(--ink-soft);
}
.approach-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
@media (min-width: 720px) {
  .approach-grid { grid-template-columns: repeat(3, 1fr); }
}
.approach-card {
  background: var(--bg);
  padding: clamp(32px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.approach-num {
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  color: var(--violet);
  letter-spacing: 0.08em;
}
.approach-card h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.approach-card p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.approach-card .pull {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
  font-variation-settings: "SOFT" 100;
}

.approach-coda {
  margin-top: clamp(48px, 6vw, 80px);
  text-align: center;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.approach-coda p {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.45;
  color: var(--ink);
  font-variation-settings: "SOFT" 100;
}
.approach-coda p strong {
  font-style: normal;
  font-weight: 500;
  color: var(--violet);
}

/* ============================================================
   BLOCK 6 — DEIN NUTZEN
   ============================================================ */
.benefits {
  background: var(--violet-mist);
}
.benefits .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
@media (min-width: 880px) {
  .benefits .container {
    grid-template-columns: 1fr 1.5fr;
  }
}
.benefits-head h2 {
  font-size: clamp(40px, 5vw, 64px);
}
.benefits-head h2 em {
  font-style: italic;
  color: var(--violet);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.benefits-head p {
  margin-top: 24px;
  color: var(--ink-soft);
  max-width: 360px;
}
.benefits-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 600px) {
  .benefits-list {
    grid-template-columns: 1fr 1fr;
  }
}
.benefit-item {
  padding: 24px 24px 24px 0;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border-top: 1px solid rgba(225, 162, 242, 0.45);
}
.benefit-item:first-child,
.benefit-item:nth-child(2) {
  border-top: 1px solid rgba(225, 162, 242, 0.45);
}
.benefit-item .bullet {
  color: var(--violet);
  font-size: 14px;
  line-height: 1;
  margin-top: 5px;
  flex-shrink: 0;
}
.benefit-item .bullet::before {
  content: "✦"; //✧❋
}

.benefit-item p {
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink);
}
.benefit-item strong {
  font-weight: 600;
  color: var(--ink);
}
.benefits-quote {
  grid-column: 1 / -1;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(225, 162, 242, 0.45);
  text-align: center;
}
.benefits-quote p {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--violet);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.benefits-cta {
  margin-top: 32px;
  grid-column: 1 / -1;
  text-align: center;
}

/* ============================================================
   BLOCK 7 — ANGEBOTE
   ============================================================ */
.offers-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(48px, 6vw, 72px);
}
.offers-head h2 {
  font-size: clamp(40px, 5.5vw, 72px);
}
.offers-head h2 em {
  font-style: italic;
  color: var(--moss);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.offers-head p {
  margin-top: 20px;
  font-size: 18px;
  color: var(--ink-soft);
}

.offer-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 60px);
  padding: clamp(48px, 6vw, 72px) 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.offer-row:last-of-type { border-bottom: 1px solid var(--line); }
@media (min-width: 880px) {
  .offer-row {
    grid-template-columns: 0.9fr 1.3fr 0.8fr;
  }
}
.offer-num {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(48px, 6vw, 72px);
  color: var(--violet);
  line-height: 1;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.offer-num small {
  display: block;
  font-family: var(--text);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 12px;
}
.offer-body h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 38px);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.offer-tagline {
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
  color: var(--moss);
  margin-bottom: 24px;
  font-variation-settings: "SOFT" 100;
}
.offer-desc {
  color: var(--ink-soft);
  margin-bottom: 24px;
}
.offer-when {
  margin-bottom: 24px;
}
.offer-when-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 12px;
  font-weight: 500;
}
.offer-when ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.offer-when li {
  font-size: 15px;
  color: var(--ink);
  padding-left: 20px;
  position: relative;
}
.offer-when li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--violet);
  font-weight: bold;
  font-size: 20px;
  line-height: 1;
}
.offer-side {
  background: var(--bg-soft);
  padding: 28px;
  border-radius: 4px;
}
.offer-side dl {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.offer-side dt {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}
.offer-side dd {
  font-family: var(--display);
  font-size: 18px;
  color: var(--ink);
  margin-top: 2px;
}
.offer-side dd .euro {
  color: var(--violet);
  font-style: italic;
  font-variation-settings: "SOFT" 100;
}
.offer-side .btn {
  margin-top: 24px;
  width: 100%;
  justify-content: center;
}

/* ============================================================
   BLOCK 8 — ÜBER MICH
   ============================================================ */
.about {
  background: #5A4060;
  color: var(--bg);
  position: relative;
  overflow: hidden;
}
.about::after {
  content: "";
  position: absolute;
  right: -10%;
  top: 10%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 76, 61, 0.16), transparent 70%);
  pointer-events: none;
}
.about .block-label { color: rgba(250, 247, 238, 0.6); }
.about .block-label::before { background: rgba(250, 247, 238, 0.4); }
.about .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 80px);
  position: relative;
  z-index: 1;
}
@media (min-width: 880px) {
  .about .container {
    grid-template-columns: 1fr 1.4fr;
  }
}
.about-portrait {
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, rgba(242, 76, 61, 0.22), rgba(225, 162, 242, 0.55));
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.about-portrait::before {
  content: "Portrait Brigitte";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 16px;
  color: rgba(250, 247, 238, 0.5);
  font-variation-settings: "SOFT" 100;
}
.about-content h2 {
  font-family: var(--display);
  font-weight: 350;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--bg);
}
.about-content h2 em {
  font-style: italic;
  color: #EABDF5;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.about-content p {
  margin-top: 24px;
  font-size: 17.5px;
  line-height: 1.7;
  color: rgba(250, 247, 238, 0.88);
  max-width: 580px;
}
.about-content p strong {
  font-weight: 500;
  color: #EABDF5;
  font-style: italic;
  font-family: var(--display);
  font-variation-settings: "SOFT" 100;
}
.about-cta {
  margin-top: 36px;
}
.about-cta .btn {
  background: transparent;
  color: var(--bg);
  border: 1px solid rgba(250, 247, 238, 0.4);
}
.about-cta .btn:hover {
  background: var(--lime);
  color: #FDEDEB;
  border-color: var(--lime);
}

/* ============================================================
   BLOCK 9 — WERTE MIRACLES
   ============================================================ */
.values-head {
  text-align: center;
  margin-bottom: clamp(48px, 6vw, 80px);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.values-head h2 {
  font-size: clamp(40px, 5vw, 64px);
}
.values-head h2 em {
  font-style: italic;
  color: var(--violet);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.values-head p {
  margin-top: 20px;
  color: var(--ink-soft);
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  max-width: 900px;
  margin: 0 auto;
}
@media (min-width: 720px) {
  .values-grid { grid-template-columns: repeat(4, 1fr); }
}
.value-cell {
  background: var(--bg);
  padding: clamp(24px, 3vw, 36px) 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: background 0.3s;
}
.value-cell:hover { background: var(--violet-mist); }
.value-letter {
  font-family: var(--display);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(40px, 5vw, 64px);
  color: var(--violet);
  line-height: 1;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.value-word {
  font-family: var(--text);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.values-vision {
  margin-top: clamp(48px, 6vw, 80px);
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.values-vision p {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.5;
  color: var(--ink);
  font-variation-settings: "SOFT" 100;
}

/* ============================================================
   BLOCK 10 — STIMMEN
   ============================================================ */
.voices {
  background: var(--bg-soft);
}
.voices-head {
  margin-bottom: clamp(48px, 6vw, 72px);
  max-width: 720px;
}
.voices-head h2 {
  font-size: clamp(40px, 5vw, 64px);
}
.voices-head h2 em {
  font-style: italic;
  color: var(--moss);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.voices-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 720px) {
  .voices-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: dense;
  }
  .voice-card.featured { grid-column: span 2; }
}
.voice-card {
  background: var(--bg);
  border-radius: 4px;
  padding: clamp(28px, 3.5vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}
.voice-card::before {
  content: "„";
  position: absolute;
  top: -36px;
  left: 12px;
  font-family: var(--display);
  font-size: 68px;
  line-height: 1;
  color: var(--violet);
  opacity: 0.25;
  font-variation-settings: "SOFT" 100;
}
.voice-card p {
  font-family: var(--display);
  font-weight: 350;
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  color: var(--ink);
  position: relative;
  z-index: 1;
  font-variation-settings: "SOFT" 100;
}
.voice-card .meta {
  margin-top: auto;
  font-family: var(--text);
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}

/* ============================================================
   BLOCK 11 — EXTRAS / SERVICE
   ============================================================ */
.extras .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
@media (min-width: 880px) {
  .extras .container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "head    figure"
      "list    figure";
    align-items: start;
  }
  .extras-head { grid-area: head; }
  .extras-figure {
    grid-area: figure;
    align-self: stretch;
    aspect-ratio: auto;
    height: 100%;
    min-height: 380px;
    max-width: 100%;
    overflow: hidden;
  }
  .extras-list { grid-area: list; }
}
.extras-head h2 {
  font-size: clamp(36px, 4.5vw, 56px);
}
.extras-head h2 em {
  font-style: italic;
  color: var(--violet);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.extras-head p {
  margin-top: 24px;
  color: var(--ink-soft);
  max-width: 420px;
}
.extras-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.extras-list li {
  padding: 22px 0;
  border-top: 1px solid var(--line);
  font-size: 17px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  color: var(--ink);
}
.extras-list li:last-child { border-bottom: 1px solid var(--line); }
.extras-list .num {
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
  color: var(--violet);
  flex-shrink: 0;
  width: 28px;
  font-variation-settings: "SOFT" 100;
}
.extras-list strong { font-weight: 600; color: var(--ink); }

/* ============================================================
   BLOCK 12 — FAQ
   ============================================================ */
.faq {
  background: var(--bg-soft);
}
.faq-head {
  text-align: center;
  margin-bottom: clamp(48px, 6vw, 72px);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.faq-head h2 {
  font-size: clamp(36px, 4.8vw, 56px);
}
.faq-head h2 em {
  font-style: italic;
  color: var(--moss);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.faq-list {
  max-width: 780px;
  margin: 0 auto;
}
.faq-item {
  border-top: 1px solid var(--line-strong);
}
.faq-list .faq-item:last-child { border-bottom: 1px solid var(--line-strong); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 28px 60px 28px 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: -0.005em;
  color: var(--ink);
  position: relative;
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--display);
  font-size: 32px;
  color: var(--violet);
  font-weight: 300;
  transition: transform 0.3s;
  line-height: 1;
}
.faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}
.faq-item summary:hover { color: var(--violet); }
.faq-item .answer {
  padding: 0 60px 28px 0;
  color: var(--ink-soft);
  font-size: 16.5px;
  line-height: 1.65;
  max-width: 640px;
}

/* ============================================================
   BLOCK 13 — FINAL CTA
   ============================================================ */
.final-cta {
  background: #5A4060;
  color: var(--bg);
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute;
  left: -10%;
  top: -30%;
  width: 60%;
  height: 160%;
  background: radial-gradient(ellipse, rgba(225, 162, 242, 0.45), transparent 70%);
  pointer-events: none;
}
.final-cta .container {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 1200px;
}
.final-cta h2 {
  font-family: var(--display);
  font-weight: 350;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--bg);
}
.final-cta h2 em {
  font-style: italic;
  color: var(--lime);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.final-cta .lede {
  margin-top: 28px;
  font-size: 19px;
  line-height: 1.6;
  color: rgba(250, 247, 238, 0.85);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.final-cta .pause {
  margin-top: 18px;
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
  color: #E6A29C;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.contact-card {
  margin: 48px auto 0;
  padding: 36px;
  background: rgba(250, 247, 238, 0.05);
  border: 1px solid rgba(250, 247, 238, 0.15);
  border-radius: 4px;
  max-width: 480px;
  text-align: left;
}
.contact-card dl {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-card dt {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(250, 247, 238, 0.5);
  font-weight: 500;
}
.contact-card dd {
  margin-top: 2px;
  font-family: var(--display);
  font-size: 18px;
  color: var(--bg);
}
.contact-card dd a { color: var(--bg); transition: color 0.2s; }
.contact-card dd a:hover { color: var(--lime); }
.final-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 40px;
}
.final-ctas .btn-primary {
  background: var(--lime);
  color: #FDEDEB;
}
.final-ctas .btn-primary:hover {
  background: var(--bg);
  color: var(--ink);
}
.final-ctas .btn-secondary {
  background: transparent;
  color: var(--bg);
  border-color: rgba(250, 247, 238, 0.3);
}
.final-ctas .btn-secondary:hover {
  border-color: var(--bg);
  background: rgba(250, 247, 238, 0.05);
}

/* ============================================================
   FOOTER / BLOCK 14
   ============================================================ */
footer {
  background: #433048;
  color: rgba(250, 247, 238, 0.7);
  padding: 64px 0 32px;
  border-top: 1px solid rgba(250, 247, 238, 0.08);
}
.footer-claim {
  text-align: center;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(250, 247, 238, 0.08);
  margin-bottom: 32px;
}
.footer-claim p {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.3;
  color: var(--bg);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.footer-claim p em {
  color: var(--lime);
}
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.footer-meta a:hover { color: var(--lime); }

/* ===== ENTRANCE ANIMATIONS (subtle) ===== */
@media (prefers-reduced-motion: no-preference) {
  .fade-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.9s ease forwards;
  }
  .fade-up.delay-1 { animation-delay: 0.15s; }
  .fade-up.delay-2 { animation-delay: 0.3s; }
  .fade-up.delay-3 { animation-delay: 0.45s; }
  @keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
  }
}

/* ===== IMAGE / FIGURE TREATMENTS ===== */
figure { margin: 0; }

.lotus-figure {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bg-soft);
}
.lotus-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95);
  transition: transform 0.8s ease;
}
.lotus-figure:hover img { transform: scale(1.02); }

/* Hero — Figure Image */
.hero-figure {
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.hero-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(31,42,29,0.18));
  pointer-events: none;
}

/* Recognize block — image beside the anchor */
.recognize-figure {
  margin-top: 48px;
  aspect-ratio: 3 / 2;
}

/* Miracles block — small centered image between quotes and coda */
.miracles-figure {
  margin: 56px auto;
  max-width: 520px;
  aspect-ratio: 3 / 2;
}

/* Dosierung card — image as visual anchor at top of card */
.approach-card.with-image { padding-top: clamp(32px, 4vw, 48px); }
.approach-card .card-figure {
  aspect-ratio: 16 / 10;
  margin: 0 -1px 24px;
  border-radius: 0;
}

/* About — replaces portrait placeholder */
.about-portrait.with-image::before { content: none; }
.about-portrait.with-image {
  background: transparent;
  padding: 0;
}
.about-portrait.with-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

/* Values — soft atmospheric header image */
.values-figure {
  max-width: 900px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  aspect-ratio: 21 / 9;
  border-radius: 4px;
}

/* Extras — image beside the list */
.extras-figure {
  aspect-ratio: 4 / 3;
  margin-top: 8px;
}

/* Final CTA — atmospheric backdrop image */
.final-cta-figure {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.32;
}
.final-cta-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.7);
}
.final-cta-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(31,42,29,0.45) 70%, rgba(31,42,29,0.7) 100%);
}
.final-cta { position: relative; }
p.block-label { font-size: 11px; } 

/* ============================================================
   MOBILE-MENÜ (Vollbild-Overlay)
   ============================================================ */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 210;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}
.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-overlay-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  font-size: 36px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}
.nav-overlay-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
}
.nav-overlay-menu a {
  font-family: var(--display);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(26px, 7vw, 34px);
  color: var(--ink);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  transition: color 0.2s;
}
.nav-overlay-menu a:hover { color: var(--violet); }
.nav-overlay-cta {
  margin-top: 18px;
  padding: 14px 32px;
  background: #5A4060;
  color: var(--bg) !important;
  border-radius: 999px;
  font-family: var(--text) !important;
  font-style: normal !important;
  font-size: 16px !important;
  font-variation-settings: normal !important;
}
.nav-overlay-cta:hover { background: var(--violet); }
body.nav-open { overflow: hidden; }

/* ============================================================
   WERDEGANG — Ausklapp in Block 8 (heller Text auf dunklem Grund)
   ============================================================ */
.werdegang {
  margin-top: 36px;
  border-top: 1px solid rgba(250, 247, 238, 0.25);
  border-bottom: 1px solid rgba(250, 247, 238, 0.25);
  max-width: 640px;
}
.werdegang summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  font-family: var(--text);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--bg);
}
.werdegang summary::-webkit-details-marker { display: none; }
.werdegang-icon {
  font-size: 26px;
  line-height: 1;
  color: #EABDF5;
  transition: transform 0.3s ease;
}
.werdegang[open] .werdegang-icon { transform: rotate(45deg); }
.werdegang-body { padding-bottom: 32px; }
.werdegang-body h3 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 350;
  font-size: 22px;
  color: #EABDF5;
  margin-bottom: 20px;
  font-variation-settings: "SOFT" 100;
}
.werdegang-list { display: flex; flex-direction: column; }
.werdegang-list > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(250, 247, 238, 0.12);
}
.werdegang-list > div:first-child { border-top: none; }
.werdegang-list dt {
  font-weight: 600;
  font-size: 14px;
  color: rgba(250, 247, 238, 0.9);
  letter-spacing: 0.02em;
  padding-top: 2px;
}
.werdegang-list dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(250, 247, 238, 0.82);
}
@media (max-width: 600px) {
  .werdegang-list > div { grid-template-columns: 1fr; gap: 3px; }
  .werdegang-list dt { color: #EABDF5; }
}

/* Hamburger nur auf Mobil sichtbar — bewusst am Ende, damit diese Regel
   die Basisregel (.nav-toggle { display:none }) korrekt überschreibt */
@media (max-width: 880px) {
  .nav-toggle { display: flex; }
}


/* ============================================================
   UNTERSEITEN (Impressum, Datenschutz, Impulse)
   ============================================================ */
.subpage { padding-top: clamp(48px, 7vw, 96px); padding-bottom: var(--section-y); min-height: 60vh; }
.subpage .block-label { margin-bottom: 24px; }
.subpage h1 { font-family: var(--display); font-weight: 350; font-size: clamp(34px, 5vw, 60px); line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); }
.subpage h1 em { font-style: italic; color: var(--violet); font-variation-settings: "SOFT" 100, "WONK" 1; }
.subpage h2 { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 3vw, 30px); color: var(--ink); margin-top: 48px; margin-bottom: 12px; }
.subpage p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); max-width: var(--max-prose); margin-top: 16px; }
.subpage a { color: var(--violet); text-decoration: underline; text-underline-offset: 2px; }
.subpage a:hover { color: var(--violet-deep); }

.legal { max-width: 820px; }
.legal .lede { font-size: 19px; color: var(--ink); }
.legal-facts { margin-top: 32px; display: flex; flex-direction: column; max-width: 660px; }
.legal-facts > div { display: grid; grid-template-columns: 210px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.legal-facts > div:first-child { border-top: none; }
.legal-facts dt { font-weight: 600; color: var(--ink); font-size: 15px; }
.legal-facts dd { margin: 0; color: var(--ink-soft); font-size: 15.5px; }
@media (max-width: 600px) { .legal-facts > div { grid-template-columns: 1fr; gap: 2px; } }

.impulse-lede { font-size: clamp(19px, 2.4vw, 24px); font-family: var(--display); font-weight: 350; color: var(--ink); line-height: 1.4; max-width: 720px; margin-top: 8px; }
.impulse-joy { margin-top: 12px; font-style: italic; color: var(--violet); font-family: var(--display); }
.channel-link { margin-top: 28px; }
.channel-link a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; border-radius: 999px; background: #5A4060; color: var(--bg); text-decoration: none; font-size: 15px; font-weight: 500; }
.channel-link a:hover { background: var(--violet); color: var(--bg); }
.video-grid { margin-top: 48px; display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vw, 32px); }
@media (min-width: 720px) { .video-grid { grid-template-columns: 1fr 1fr; } }
.video-embed { margin: 0; border-radius: 8px; overflow: hidden; background: var(--bg-soft); }
.video-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.video-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; aspect-ratio: 16 / 9; color: var(--ink-faint); border: 1px dashed var(--line-strong); border-radius: 8px; }
.video-placeholder span { font-family: var(--display); font-style: italic; font-size: 18px; color: var(--ink-soft); }
.video-placeholder small { font-size: 12px; }
.impulse-feature { margin-top: 64px; padding: clamp(28px, 4vw, 48px); background: var(--violet-mist); border-radius: 8px; border-left: 3px solid var(--violet); max-width: 820px; }
.impulse-feature h2 { margin-top: 0; }
.impulse-feature .subtitle { font-style: italic; color: var(--violet-deep); font-family: var(--display); margin-top: 4px; }

.footer-legal { margin-top: 18px; display: flex; gap: 10px; align-items: center; font-size: 12px; letter-spacing: 0.04em; }
.footer-legal a { color: rgba(250, 247, 238, 0.55); text-decoration: none; }
.footer-legal a:hover { color: var(--lime); }
.footer-legal span { color: rgba(250, 247, 238, 0.35); }