/* ============================================================
   Heike · Yoga — Inside.Beyond.
   Farbwelt „Abendlicht": aus Heikes eigenen Fotos gemessen —
   jede Aufnahme entsteht in der tiefen Sonne. Von dort kommt der
   warme Grund: Trockengras und Eichenrinde.

   Die Aufgaben sind zwischen zwei Familien geteilt, damit keine
   allein die Seite trägt:
     Braun  liest sich  — Fließtext, Sekundärtext.
     Grün   trägt       — die dunklen Vollflächen, Überschriften, Links.
   Zuvor machte Braun beides; dadurch stand es auf jeder Fläche und
   kippte gegen das viele Grün der Fotos ins Schwere.

   Eine einzige kühle Note — Abendhimmel über dem Wald — hat genau
   zwei Auftritte: das Wort „Beyond." und der gedämpfte Text auf der
   dunklen Fläche. Dazu ein gesättigter Akzent: Hagebutte.
   ============================================================ */

:root {
  /* ---- Hue-Tokens (gemessen aus den Fotos) ---- */
  --paper:          #F1EBD3;  /* Trockengras im Licht — der Grund der Seite */
  --paper-deep:     #E4DBBD;  /* dasselbe Gras im Halbschatten */
  --field:          #FBF7EA;  /* Formularfelder */
  --ink:            #2A2218;  /* Eichenrinde im Schatten — Fließtext */
  --ink-soft:       #5B4B36;  /* Eichenrinde — Sekundärtext */
  --wiese:          #5A5A1E;  /* Wiese gegen die tiefe Sonne */
  --unterholz:      #35402C;  /* Unterholz im Schatten — dunkles Vollflächenfeld */
  --unterholz-tief: #28301F;  /* dasselbe Unterholz tiefer — Footer, gedrückte Zustände */
  --salbei:         #E2DDC6;  /* Papier mit einem Hauch Unterholz — nur das Vorteile-Band */
  --himmel:         #6E5F8C;  /* Abendhimmel durch die Bäume — trägt nur „Beyond." */
  --himmel-hell:    #C9C2DB;  /* derselbe Himmel, aufgehellt für die dunkle Fläche */
  --hagebutte:      #A3381F;  /* Hagebutte in der Abendsonne, einziger Akzent */
  --hagebutte-deep: #82290F;  /* Hover-Variante */
  --on-accent:      #FFFFFF;  /* Text auf Hagebutte */

  /* ---- Abstände ---- */
  --space-1: 0.3rem;
  --space-2: 0.6rem;
  --space-3: 0.9rem;
  --space-4: 1.4rem;
  --space-5: 1.6rem;
  --space-6: 2.2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* ---- Formen ---- */
  --radius: 18px;
  --radius-sm: 10px;
  --maxw: 1080px;
  --topbar-h: 66px;
  --wave-h: clamp(36px, 6vw, 70px);  /* Höhe der Hügel-Welle */

  /* ---- Ebenen ---- */
  --z-backdrop: 9;
  --z-nav: 10;
  --z-hero-text: 2;

  /* ---- Schatten (alle aus --ink #2A2218) ----
     Warm und weich: ein kalter Grauschatten zieht die ganze Seite
     ins Kühle zurück, egal wie warm die Flächen darunter sind. */
  --shadow-sm: 0 6px 18px rgba(42, 34, 24, 0.13);
  --shadow-md: 0 10px 30px rgba(42, 34, 24, 0.16);
  --shadow-lg: 0 18px 42px rgba(42, 34, 24, 0.21);

  /* ---- Schrift ---- */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Karla", "Segoe UI", sans-serif;
}

/* ---------- Semantische Ebene: Selektoren kennen die Rolle, nicht die Farbe ---------- */
:root,
.surface-light {
  --surface: var(--paper);
  --surface-alt: var(--paper-deep);
  --on-surface: var(--ink);
  --on-surface-muted: var(--ink-soft);
  --on-surface-heading: var(--unterholz);
  --border: color-mix(in srgb, var(--ink) 14%, transparent);
  --focus: var(--hagebutte);
}

.surface-dark {
  --surface: var(--unterholz);
  --surface-alt: var(--unterholz-tief);
  --on-surface: var(--paper);
  /* Der gedämpfte Text auf der dunklen Fläche ist der zweite und letzte
     Auftritt des Abendhimmels — Himmel über Wald, nicht Papier auf Wald. */
  --on-surface-muted: var(--himmel-hell);
  --on-surface-heading: var(--paper);
  --border: color-mix(in srgb, var(--paper) 22%, transparent);
  --focus: var(--paper);
}

/* Helle Rollen wie .surface-light, nur der Grund ist ein Hauch Grün —
   „Grün trägt" auch hier, ohne neben den Fotos einen kühlen Ton aufzumachen. */
.surface-salbei {
  --surface: var(--salbei);
  --surface-alt: var(--paper);
  --on-surface: var(--ink);
  --on-surface-muted: var(--ink-soft);
  --on-surface-heading: var(--unterholz);
  --border: color-mix(in srgb, var(--ink) 14%, transparent);
  --focus: var(--hagebutte);
}

.surface-light,
.surface-dark,
.surface-salbei {
  background: var(--surface);
  color: var(--on-surface);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* sonst schiebt jeder Ankerklick den Sektionsanfang unter die Sticky-Leiste */
  scroll-padding-top: calc(var(--topbar-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 560;
  line-height: 1.15;
  margin: 0 0 0.6em;
}
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h3 { font-size: 1.35rem; }

a { color: var(--on-surface-heading); }
/* height: auto ist Pflicht, sobald die <img> width/height-Attribute tragen —
   sonst wirkt die Attributhöhe als Presentational Hint und das Bild wird verzerrt. */
img { max-width: 100%; height: auto; display: block; }
/* <picture> trägt nur die Quellen — Layout, Float und aspect-ratio macht das <img> */
picture { display: contents; }

/* ---------- Skip-Link ---------- */
.skip-link {
  position: fixed;
  left: var(--space-3);
  top: var(--space-3);
  z-index: calc(var(--z-nav) + 1);
  background: var(--paper);
  color: var(--unterholz);
  font-weight: 700;
  text-decoration: none;
  padding: 0.7rem var(--space-4);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  transform: translateY(-250%);
  transition: transform 0.2s ease;
}
.skip-link:focus-visible { transform: translateY(0); }

/* ---------- Topbar ---------- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: nowrap;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.brand {
  font-family: var(--font-display);
  font-size: 1.25rem;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.brand-dot { color: var(--hagebutte); display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .brand-dot { animation: dot-breathe 4.5s ease-in-out infinite; }
}
.topbar nav { display: flex; gap: 1.2rem; align-items: center; }
.topbar nav a {
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 500;
}
@media (hover: hover) {
  .topbar nav a:hover { color: var(--unterholz); }
}
.topbar nav a:active { color: var(--unterholz-tief); }
@media (min-width: 801px) {
  .topbar nav a { padding: var(--space-2) 0.4rem; }
  .topbar nav a:not(.nav-cta) {
    position: relative;
  }
  .topbar nav a:not(.nav-cta)::after {
    content: "";
    position: absolute;
    left: 0.4rem;
    right: 100%;
    bottom: 0.2rem;
    height: 2px;
    background: var(--unterholz);
    transition: right 0.3s ease;
  }
}
@media (min-width: 801px) and (hover: hover) {
  .topbar nav a:not(.nav-cta):hover::after { right: 0.4rem; }
}
.nav-cta {
  background: var(--unterholz);
  color: var(--paper) !important;
  padding: 0.45rem 1rem;
  border-radius: 999px;
}
@media (hover: hover) {
  .nav-cta:hover { background: var(--unterholz-tief); }
}
.nav-cta:active { background: var(--unterholz-tief); }

.nav-toggle-btn {
  display: none;
  width: 44px;
  height: 44px;
  position: relative;
  cursor: pointer;
  flex: none;
  background: none;
  border: none;
  padding: 0;
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .nav-toggle-btn:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
}
.nav-toggle-btn:active { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.nav-toggle-btn span,
.nav-toggle-btn::before,
.nav-toggle-btn::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.nav-toggle-btn::before { top: 15px; }
.nav-toggle-btn span { top: 21px; }
.nav-toggle-btn::after { top: 27px; }
.topbar.nav-open .nav-toggle-btn::before { top: 21px; transform: rotate(45deg); }
.topbar.nav-open .nav-toggle-btn span { opacity: 0; }
.topbar.nav-open .nav-toggle-btn::after { top: 21px; transform: rotate(-45deg); }

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: var(--z-backdrop);
}
.topbar.nav-open + .nav-backdrop { opacity: 1; pointer-events: auto; }
body.nav-locked { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(1rem, 10vw, 7.5rem) clamp(1rem, 4vw, 2.5rem) clamp(3rem, 7vw, 5rem);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 0;
  text-align: left;
}
.hero-media { position: relative; z-index: 1; }
.hero-media::before {
  content: "";
  position: absolute;
  inset: 10% 6%;
  /* Gegenlicht: warmer Kern, der in den Abendhimmel ausläuft — nicht Deko,
     sondern das Licht, in dem die freigestellte Aufnahme entstanden ist.
     Auf dem warmen Grund trägt der Kern weniger Kontrast als auf dem alten
     kühlen Papier; ohne die höhere Deckkraft steht die Freistellung flach. */
  background: radial-gradient(circle, var(--hagebutte) 0%, var(--himmel) 62%, transparent 74%);
  filter: blur(46px);
  opacity: 0.34;
  z-index: -1;
  border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-media::before { animation: hero-breathe 8s ease-in-out infinite; }
}
.hero-text {
  position: relative;
  z-index: var(--z-hero-text);
  margin-left: clamp(-9rem, -10vw, -3rem);
  text-align: center;
}
.eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wiese);
  margin: 0 0 1rem;
}
/* Im Hero ist die Zeile Fließtext, kein gesperrtes Versal-Label */
.hero .eyebrow {
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.95rem;
  font-weight: 500;
}
.motto {
  font-weight: 340;
  margin: 0;
  letter-spacing: -0.01em;
}
.motto span { display: block; }
.motto-yoga {
  font-size: clamp(3.6rem, 12vw, 7.5rem);
}
.motto-line {
  font-size: clamp(1.6rem, 5vw, 3rem);
  margin-top: 0.1em;
}
.motto-beyond {
  color: var(--himmel);
  font-style: italic;
  margin-top: -0.05em;
}
.btn {
  display: inline-block;
  background: var(--hagebutte);
  color: var(--on-accent);
  text-decoration: none;
  font-weight: 700;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.hero-text .btn { margin-top: var(--space-6); }
@media (hover: hover) {
  .btn:hover { background: var(--hagebutte-deep); transform: translateY(-2px); box-shadow: var(--shadow-md); }
}
.btn:active { background: var(--hagebutte-deep); transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn[disabled] { opacity: 0.75; cursor: progress; transform: none; }
.hero-media img {
  width: 100%;
  filter: drop-shadow(0 18px 26px color-mix(in srgb, var(--ink) 22%, transparent));
}

/* ---------- Hügel-Divider (Signatur) ---------- */
/* Die Höhe ist 6vw und landet dadurch fast immer auf einem gebrochenen Pixel.
   Endete die flache Kante der Welle genau dort, rasterte der Browser sie nur
   mit Teildeckung und zwischen Welle und Sektion blitzte eine 1px-Naht in
   Papierfarbe durch (bei 1013px Breite messbar, bei 900px nicht — 6vw ist dort
   ganzzahlig). Deshalb läuft der Pfad im Markup über den viewBox-Rand hinaus
   und overflow: visible lässt ihn stehen: die Kante liegt jetzt außerhalb der
   Box, die letzte Pixelzeile der Box liegt im Inneren der Fläche und ist voll
   gedeckt. Der Überstand landet auf der gleichfarbigen Sektion — unsichtbar.
   Eine ganzzahlige Höhe zu erzwingen reicht nicht: auf Displays mit
   gebrochenem devicePixelRatio bricht dieselbe Zeile wieder auf. */
.divider { color: var(--unterholz); line-height: 0; }
.divider svg {
  width: 100%;
  height: var(--wave-h);
  display: block;
  overflow: visible;
}
.divider-flip { transform: scaleY(-1); background: var(--paper); }
.divider-flip svg { transform: scaleX(-1); }
/* Die Welle vom Salbei-Band zur dunklen Fläche liegt außerhalb jeder Fläche — deshalb wie .divider-flip auf Hue-Ebene */
.divider-salbei { background: var(--salbei); }

/* ---------- Sektionen ---------- */
.section {
  --section-pad-y: clamp(3rem, 7vw, 5.5rem);
  padding: var(--section-pad-y) clamp(1rem, 4vw, 2.5rem);
  max-width: var(--maxw);
  margin: 0 auto;
}
.section.surface-dark,
.section.surface-salbei {
  max-width: none;
}
.section.surface-dark > .section-head,
.section.surface-dark > .cards,
.section.surface-salbei > .section-head,
.section.surface-salbei > .vorteile {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
}
.section-head { text-align: center; margin-bottom: 2.5rem; }
.section-sub { color: var(--on-surface-muted); max-width: 36em; margin: 0.5rem auto 0; }

/* ---------- Leistungen ---------- */
/* Flex statt Grid: eine unvollständige letzte Reihe wird zentriert, nicht gedehnt.
   Basis 300px entscheidet den Umbruch, max-width 340px verhindert das Auffüllen —
   gerechnet gegen --maxw 1080px und gap 1.6rem. */
.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
}
.card {
  flex: 1 1 300px;
  max-width: 340px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
@media (hover: hover) {
  .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
  .card:hover .card-img { transform: scale(1.045); }
}
.card-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.6s ease; }
.card-body {
  padding: var(--space-4) 1.5rem var(--space-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card h3 { color: var(--on-surface-heading); margin-bottom: 0.2em; }
.card-teaser {
  color: var(--wiese);
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0 0 0.7em;
}
/* margin-top: auto — alle Karten schließen trotz unterschiedlich langer Texte bündig ab */
.card-link {
  margin-top: auto;
  padding-top: var(--space-3);
  align-self: flex-start;
  color: var(--hagebutte);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 2px solid color-mix(in srgb, var(--hagebutte) 35%, transparent);
}
.card-link::after { content: " →"; }
@media (hover: hover) {
  .card-link:hover { color: var(--hagebutte-deep); border-bottom-color: currentColor; }
}
.card-link:active { color: var(--hagebutte-deep); }

/* ---------- Vorteile ---------- */
/* Rahmenlos und zentriert — kurze Fakten, keine dritte Kartenart neben den Fotos.
   Flex wie .cards: eine unvollständige letzte Reihe wird zentriert. */
/* Kompakter als die übrigen Sektionen: das Band soll neben dem Zitat nicht wuchtig wirken */
.section.surface-salbei { --section-pad-y: clamp(2.2rem, 5vw, 3.5rem); }
.section.surface-salbei > .section-head { margin-bottom: var(--space-6); }
.vorteile {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-7) var(--space-6);
}
.vorteil { flex: 1 1 220px; max-width: 300px; text-align: center; }
.vorteil-icon {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-3);
  color: var(--on-surface-heading);
}
.vorteil-icon svg { width: 100%; height: 100%; display: block; }
.vorteil h3 { color: var(--on-surface-heading); font-size: 1.2rem; margin-bottom: 0.4em; }
.vorteil .prose { font-size: 0.98rem; }
.vorteil .prose p { margin: 0; }

/* ---------- Über mich ---------- */
.about-body { display: flow-root; }
.about-photo {
  float: left;
  width: min(320px, 42%);
  margin: 0.3rem var(--space-6) 1.2rem 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.prose h3 {
  margin-top: var(--space-6);
  color: var(--on-surface-heading);
}
.prose p:first-child { margin-top: 0; }

/* ---------- Kontakt ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: stretch;
}
.contact-form {
  background: var(--surface);
  color: var(--on-surface);
  padding: var(--space-6);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}
.contact-form label {
  font-weight: 700;
  font-size: 0.9rem;
  margin: var(--space-3) 0 var(--space-1);
}
.contact-form label:first-of-type { margin-top: 0; }
.contact-form input,
.contact-form textarea {
  font: inherit;
  color: var(--on-surface);
  padding: 0.7rem var(--space-3);
  border: 1.5px solid color-mix(in srgb, var(--ink) 25%, transparent);
  border-radius: var(--radius-sm);
  background: var(--field);
}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.card-link:focus-visible,
.nav-toggle-btn:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
/* Rot erst nach dem ersten Absendeversuch — sonst sind alle drei Pflichtfelder
   schon beim ersten Laden markiert. */
.contact-form.was-validated :invalid {
  border-color: var(--hagebutte);
  background: color-mix(in srgb, var(--hagebutte) 6%, var(--field));
}
.required { color: var(--hagebutte); }
.form-required-note { font-size: 0.82rem; color: var(--on-surface-muted); margin: 0 0 var(--space-4); }
.contact-form .btn { margin-top: var(--space-4); align-self: flex-start; }
.form-status {
  margin: var(--space-4) 0 0;
  padding: 0.2rem 0 0.2rem var(--space-3);
  border-left: 4px solid currentColor;
  font-weight: 700;
  font-size: 0.95rem;
}
.form-status.is-ok { color: var(--wiese); }
.form-status.is-error { color: var(--hagebutte); }
.form-note { font-size: 0.82rem; color: var(--on-surface-muted); margin: 1rem 0 0; }
.contact-direct {
  background: var(--surface);
  color: var(--on-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 1.8rem var(--space-6);
  /* Die Karte ist so hoch wie das Formular — der Inhalt sitzt mittig,
     damit unten keine Leerfläche stehen bleibt. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.contact-direct > :last-child { margin-bottom: 0; }
.contact-direct h3 { color: var(--on-surface-heading); }
.contact-direct a { color: var(--on-surface-heading); font-weight: 700; }
.contact-label {
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Footer ---------- */
.footer {
  /* Eine Stufe tiefer als das Unterholz darüber — sonst verschwimmt die
     Naht zwischen Finale und Footer zu einer einzigen dunklen Fläche. */
  background: var(--unterholz-tief);
  color: var(--paper-deep);
  padding: var(--space-6) clamp(1rem, 4vw, 2.5rem);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.95rem;
}
.footer a {
  color: var(--paper-deep);
  display: inline-block;
  padding: 0.5rem 0;
  margin-left: var(--space-3);
}

/* ---------- Mobil ---------- */
@media (max-width: 800px) {
  /* höchstes Kind der Leiste ist hier der 44px-Toggle: 44 + 2 × 1rem + 1px Border */
  :root { --topbar-h: 77px; }

  .contact-grid { grid-template-columns: 1fr; }
  .about-photo { float: none; width: 100%; max-width: 420px; margin: 0 auto 1.5rem; }
  .nav-toggle-btn { display: block; }
  .topbar nav {
    position: absolute;
    top: 100%;
    left: clamp(1rem, 4vw, 2.5rem);
    right: clamp(1rem, 4vw, 2.5rem);
    z-index: var(--z-nav);
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    background: var(--paper);
    border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
    border-radius: var(--radius);
    padding: var(--space-2);
    box-shadow: var(--shadow-lg);
    margin-top: var(--space-2);
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    visibility: hidden;
    pointer-events: none;
    transform-origin: top right;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }
  .topbar.nav-open nav {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
    pointer-events: auto;
  }
  .topbar nav a {
    padding: 0.85rem 0.8rem;
    border-radius: var(--radius-sm);
    font-size: 1.05rem;
  }
  .topbar nav a:not(.nav-cta):focus-visible {
    background: color-mix(in srgb, var(--unterholz) 8%, transparent);
  }
  .topbar nav a + a { border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
  .topbar nav .nav-cta {
    margin-top: 0.5rem;
    border-top: none;
    text-align: center;
    padding: 0.85rem 0.8rem;
  }
  /* Das Hero-Bild ragt per negativem Margin links aus der 500px-Spalte.
     Abgeschnitten wird erst an main, also am Bildschirmrand: Schnitte an der
     Spalte erzeugten zwischen 501 und 800px eine harte Kante mitten im Bild.
     clip statt hidden: kein Scroll-Container, der Lichtschein bleibt
     vertikal frei und sticky bleibt intakt. */
  main { overflow-x: clip; }
  .hero {
    --hvw: min(100vw, 500px);
    max-width: min(100%, 500px);
    margin: 0 auto;
    min-height: calc(100vh - var(--topbar-h));
    min-height: calc(100dvh - var(--topbar-h));
    padding: clamp(1rem, calc(var(--hvw) * 0.10), 7.5rem) clamp(1rem, calc(var(--hvw) * 0.04), 2.5rem) clamp(3rem, calc(var(--hvw) * 0.07), 5rem);
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "motto"
      "media"
      "btn";
    justify-items: end;
    /* center statt space-between: sonst steht zwischen Bildunterkante und
       Button der übrige Platz der Viewport-Höhe als Totraum. */
    align-content: center;
    row-gap: var(--space-2);
    text-align: right;
  }
  .hero-text { margin-left: 0; display: contents; }
  .hero-text .eyebrow { grid-area: eyebrow; position: relative; z-index: var(--z-hero-text); width: 100%}
  .hero-text .motto { grid-area: motto; position: relative; z-index: var(--z-hero-text); margin-right: 10%; padding-top: 5% }
  .hero-text .motto-yoga { font-size: clamp(4.2rem, calc(var(--hvw) * 0.16), 6rem); }
  .hero-text .motto-line { font-size: clamp(1.8rem, calc(var(--hvw) * 0.07), 2.4rem); }
  .hero-media {
    grid-area: media;
    position: relative;
    z-index: 1;
    width: 95%;
    max-width: 460px;
    justify-self: start;
    margin: -10.5rem 0 0 -23%;
  }
  .hero-text .btn { grid-area: btn; margin-top: var(--space-4); justify-self: center; }
}

@media (max-width: 800px) and (hover: hover) {
  .topbar nav a:not(.nav-cta):hover {
    background: color-mix(in srgb, var(--unterholz) 8%, transparent);
  }
}

@media (max-width: 480px) {
  .hero-text .btn { justify-self: stretch; text-align: center; }
}

/* ---------- Intro ---------- */
.intro { text-align: center; padding-top: 0; }
.intro-lead {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 340;
  max-width: 24em;
  margin: 0 auto 0.8rem;
}
.intro-prose { max-width: 44em; margin: 0 auto; color: var(--on-surface-muted); }

/* ---------- Manifest ---------- */
.manifest-inner {
  max-width: 54em;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 4vw, 2.5rem);
  text-align: center;
}
.manifest-text p {
  font-family: var(--font-display);
  font-weight: 340;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  line-height: 1.45;
  margin: 0;
}
.manifest-text strong { font-weight: 560; font-style: italic; }
/* Zitat und Vorteile stoßen ohne Welle aneinander. Eine Welle ragt etwa zur Hälfte
   ihrer Höhe in die Fläche hinein und wirkt dadurch luftiger als eine gerade Kante.
   Die gerade Kante bekommt deshalb die halbe Wellenhöhe dazu, damit beide Bänder
   oben und unten gleich viel Luft zeigen. */
.manifest:has(+ .surface-salbei) { padding-bottom: calc(var(--wave-h) / 2); }
.manifest + .surface-salbei { padding-top: calc(var(--section-pad-y) + var(--wave-h) / 2); }
/* Beide Bänder gleich hoch: das Zitat wächst auf die Höhe der Vorteile, sein
   Inhalt bleibt vertikal mittig. Erst ab der Breite, ab der die drei Vorteile
   nebeneinander stehen — darunter wäre das Zitat-Band viel zu hoch. */
@media (min-width: 860px) {
  .band-pair { display: grid; grid-auto-rows: 1fr; }
  .band-pair > .section { margin: 0; }  /* auto-Margins würden das Band im Grid schmal ziehen */
  .band-pair > .manifest { display: flex; flex-direction: column; justify-content: center; }
}
.manifest-mark {
  margin: var(--space-5) 0 0;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--on-surface-muted);
}

/* ---------- Rechtsseiten (Impressum, Datenschutz) ---------- */
.legal { max-width: 760px; }
.legal h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 1.2rem; }
.legal h2 {
  font-size: 1.5rem;
  margin-top: 2.4rem;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.legal h3 { font-size: 1.15rem; margin-top: var(--space-5); color: var(--on-surface-heading); }
.legal .prose { color: var(--on-surface-muted); }
.legal .prose p, .legal .prose li { font-size: 1rem; }
.legal a { word-break: break-word; }

/* ---------- Animationen ---------- */
@keyframes hero-breathe {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.06); opacity: 0.38; }
}
@keyframes dot-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .load-in {
    opacity: 0;
    transform: translateY(14px);
    animation: fade-up 0.9s ease forwards;
  }
  .load-in-1 { animation-delay: 0.05s; }
  .load-in-2 { animation-delay: 0.22s; }
  .load-in-3 { animation-delay: 0.42s; }

  .js .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.85s ease, transform 0.85s ease;
  }
  .js .reveal.in-view { opacity: 1; transform: none; }
  .js .cards .reveal:nth-child(2) { transition-delay: 0.08s; }
  .js .cards .reveal:nth-child(3) { transition-delay: 0.16s; }
  .js .cards .reveal:nth-child(4) { transition-delay: 0.24s; }
  .js .cards .reveal:nth-child(5) { transition-delay: 0.32s; }
  .js .vorteile .reveal:nth-child(2) { transition-delay: 0.08s; }
  .js .vorteile .reveal:nth-child(3) { transition-delay: 0.16s; }
  .js .vorteile .reveal:nth-child(4) { transition-delay: 0.24s; }
  .js .contact-grid .reveal:nth-child(2) { transition-delay: 0.12s; }
}