:root {
  --burgundy: #9d2d33;
  --burgundy-dark: #6f2027;
  --cream: #f7efe5;
  --cream-soft: #fbf7f1;
  --card: #f3e8dc;
  --ink: #211a18;
  --muted: #5d504c;
  --sage: #667052;
  --gold: #c9a24b;
  --line: rgba(111, 32, 39, 0.18);
  --serif: "Cormorant Garamond", Georgia, serif;
  --display: "Cinzel", Georgia, serif;
  --display-decorative: "Cinzel Decorative", "Cinzel", Georgia, serif;
  /* Lydias gekaufte Schreibschrift, nur fuer grosse Zitatzeilen. Als Fallback
     bewusst der vorhandene Serif statt einer System-Schreibschrift wie Brush
     Script - die sieht auf jedem Rechner anders und meist billig aus. */
  --script: "Amsterdam Four", "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
}

img {
  max-width: 100%;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* 76 statt 64 px (04.09.2026): Lydia wollte den Schmetterling groesser. Die
     Leiste musste mitwachsen — sonst haetten die Fluegelspitzen den Rand
     beruehrt. Alle scroll-margin-top-Werte liegen bei 92 px und tragen das. */
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 clamp(18px, 4vw, 40px);
  border-bottom: 1px solid rgba(76, 53, 47, 0.18);
  background: rgba(251, 247, 241, 0.88);
  -webkit-backdrop-filter: saturate(1.1) blur(10px);
  backdrop-filter: saturate(1.1) blur(10px);
  transition: box-shadow 240ms ease, background 240ms ease;
}

.site-header.is-scrolled {
  background: rgba(251, 247, 241, 0.96);
  box-shadow: 0 10px 30px rgba(82, 53, 43, 0.08);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #4b4f39;
}

.brand-mark {
  width: 30px;
  height: 30px;
  color: var(--burgundy);
}

.brand-mark svg {
  width: 100%;
  height: 100%;
}

.brand-mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
}

/* Vorläufiges Bild-Logo (Schmetterling). Ersetzt im Header das SVG-Zeichen. */
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Der Schmetterling trägt mehr Detail als das alte Zeichen — im Header deutlich
   größer. Am 04.09.2026 auf Lydias Wunsch von 48 auf 60 px gewachsen; die Leiste
   ging dafür von 64 auf 76 px. Mehr geht ohne noch höhere Leiste nicht: Bei
   64 px säßen die Flügelspitzen auf der Trennlinie. */
.site-header .brand-mark {
  width: 60px;
  height: 60px;
}

.brand strong {
  font-family: var(--display-decorative);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
}

.main-nav {
  color: #1f1714;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.nav-list > li {
  position: relative;
}

.nav-list > li > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 21px 0;
  transition: color 160ms ease;
}

.nav-list > li > a:hover,
.nav-list > li > a:focus-visible {
  color: var(--burgundy);
}

.caret {
  width: 7px;
  height: 7px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.6;
  transition: transform 200ms ease;
}

.has-dropdown:hover .caret,
.has-dropdown:focus-within .caret {
  transform: translateY(0) rotate(225deg);
}

.nav-cta {
  padding: 9px 20px !important;
  border: 1px solid var(--burgundy);
  border-radius: 999px;
  color: var(--burgundy-dark);
  transition: background 180ms ease, color 180ms ease;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  background: var(--burgundy);
  color: #fffaf4 !important;
}

.dropdown {
  position: absolute;
  top: calc(100% - 6px);
  left: 50%;
  z-index: 60;
  min-width: 216px;
  margin: 0;
  padding: 10px;
  list-style: none;
  border: 1px solid rgba(111, 32, 39, 0.12);
  border-radius: 12px;
  background: rgba(251, 247, 241, 0.99);
  box-shadow: 0 24px 54px rgba(82, 53, 43, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.dropdown a {
  display: block;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 15px;
  color: #2b211e;
  transition: background 150ms ease, color 150ms ease;
}

.dropdown a:hover,
.dropdown a:focus-visible {
  background: rgba(157, 45, 51, 0.08);
  color: var(--burgundy-dark);
}

/* Drei Pillar-Dropdowns mit längeren Labels (Mental Coaching, Veranstaltungen):
   im mittleren Desktop-Bereich knapp über dem Drawer-Breakpoint kompakter halten,
   damit die einzeilige Navigation nicht überläuft. */
@media (min-width: 961px) and (max-width: 1160px) {
  .main-nav {
    font-size: 15px;
  }
  .nav-list {
    gap: 16px;
  }
  .nav-cta {
    padding: 8px 15px !important;
  }
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 1.8px;
  background: var(--burgundy-dark);
  border-radius: 2px;
  transition: transform 220ms ease, opacity 160ms ease;
  content: "";
}

.nav-toggle span {
  top: 21px;
}

.nav-toggle span::before {
  top: -7px;
}

.nav-toggle span::after {
  top: 7px;
}

.nav-toggle[aria-expanded="true"] span {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] span::before {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span::after {
  transform: translateY(-7px) rotate(-45deg);
}

.hero {
  position: relative;
  min-height: clamp(520px, 45vw, 680px);
  overflow: hidden;
  background: var(--cream);
}

.hero-media,
.hero-media img,
.hero-overlay {
  position: absolute;
  inset: 0;
}

/* Der Bildausschnitt ist pro Seite steuerbar: `style="--hero-pos: 61% 32%"` am
   .hero-media setzen. Default passt fuer Motive mit der Person rechts der Mitte;
   bei liegenden oder hoch aufgebauten Motiven schneidet er sonst den Kopf ab.
   Zweiter Wert = vertikal, kleiner heisst weiter oben im Bild. */
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-pos, 61% center);
}

/* Liegt deckungsgleich ueber dem Poster und wird erst sichtbar, wenn das Video
   wirklich laeuft (Klasse kommt aus main.js). Der Uebergang faellt so nicht auf:
   erste Videobild und Poster sind dasselbe Bild. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-pos, 61% center);
  opacity: 0;
  /* Kurz statt 900ms: eingeblendet wird jetzt Bild 0, und das ist exakt das
     Poster darunter -- es gibt nichts zu ueberblenden. Die 200ms bleiben nur
     als Puffer, falls der erste Videoframe einen Wimpernschlag spaeter
     gezeichnet wird als die Klasse gesetzt ist. */
  transition: opacity 200ms ease;
}

.hero-media.is-playing .hero-video {
  opacity: 1;
}

/* Auf der Startseite liegt ein Video ueber dem Standbild -- beide zeigen dasselbe
   Motiv und MUESSEN denselben Ausschnitt zeigen, sonst springt das Bild in dem
   Moment, in dem das Video uebernimmt.
   Genau das passierte zwischen 701 und 880px: der 66%-Versatz weiter unten gilt
   fuer `.hero-media img` und damit auch hier, waehrend das Video `--hero-pos`
   (45%) folgte. 21 Prozentpunkte Unterschied, sichtbar als Ruck nach links.
   Diese Regel muss VOR dem 700px-Block stehen: beide haben dieselbe Spezifitaet,
   und unterhalb von 700px soll der Block darunter gewinnen. */
@media (max-width: 880px) {
  .hero-media.hero-media-clip img {
    object-position: var(--hero-pos, 61% center);
  }
}

/* Bei der Hochkant-Fassung steckt der Ausschnitt schon in der Datei. Der sonst
   auf schmalen Schirmen gesetzte Versatz (66%) wuerde ihn ein zweites Mal
   verschieben und Lydia an den Rand druecken. */
@media (max-width: 700px) {
  /* `.hero-media.hero-media-clip img` und nicht `.hero-media-clip img`: sonst
     gleiche Spezifitaet wie die 66%-Regel im 880px-Block, und die steht weiter
     unten -- sie haette gewonnen und den Ausschnitt ein zweites Mal verschoben. */
  .hero-media.hero-media-clip img,
  .hero-media.hero-media-clip .hero-video {
    object-position: center;
  }
}

/* Viele Stuetzstellen statt vier: der alte Verlauf fiel von 0.88 auf 0.18 ueber
   nur 28% Breite, und diese Kante sah man als Streifen mitten im Bild stehen.
   Die Stufen unten bilden eine weiche Kurve nach, zwischen zwei Werten liegt nie
   mehr als 0.14. Das gilt fuer ALLE Heros - der Streifen ist ueberall weg.

   Wie deckend es links anfaengt, unterscheidet sich dagegen: Diese Fassung
   (0.94) gilt fuer die Motive der Unterseiten. Sie sind teils dunkel, und die
   burgunderrote Ueberschrift braucht den Untergrund. Gemessen gegen das jeweils
   echte Bild: alle Seiten >= 3:1 fuer die Ueberschrift (Grenzwert fuer grosse
   Schrift), Fliesstext >= 6:1. Mit 0.84 fielen fuenf Seiten auf 2.2 bis 2.8. */
.hero-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(247, 239, 229, 0.9) 0%,
      rgba(247, 239, 229, 0.87) 14%,
      rgba(247, 239, 229, 0.8) 27%,
      rgba(247, 239, 229, 0.69) 38%,
      rgba(247, 239, 229, 0.55) 48%,
      rgba(247, 239, 229, 0.4) 58%,
      rgba(247, 239, 229, 0.26) 68%,
      rgba(247, 239, 229, 0.14) 79%,
      rgba(247, 239, 229, 0.06) 90%,
      rgba(247, 239, 229, 0) 100%
    ),
    linear-gradient(180deg, rgba(251, 247, 241, 0.18), rgba(251, 247, 241, 0) 44%, rgba(247, 239, 229, 0.22) 100%);
}

/* Startseite: dort laeuft das Video, und es soll auch links hinter der Schrift
   durchscheinen. Der helle Abendhimmel traegt das - hier bleibt die Ueberschrift
   auch bei 0.84 ueber dem ganzen Clip bei >= 3.8:1. */
.hero-clip .hero-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(247, 239, 229, 0.84) 0%,
      rgba(247, 239, 229, 0.8) 14%,
      rgba(247, 239, 229, 0.72) 27%,
      rgba(247, 239, 229, 0.6) 38%,
      rgba(247, 239, 229, 0.45) 48%,
      rgba(247, 239, 229, 0.31) 58%,
      rgba(247, 239, 229, 0.19) 68%,
      rgba(247, 239, 229, 0.1) 79%,
      rgba(247, 239, 229, 0.04) 90%,
      rgba(247, 239, 229, 0) 100%
    ),
    linear-gradient(180deg, rgba(251, 247, 241, 0.18), rgba(251, 247, 241, 0) 44%, rgba(247, 239, 229, 0.22) 100%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 48px), 1110px);
  min-height: clamp(520px, 45vw, 680px);
  display: flex;
  align-items: center;
  margin: 0 auto;
  padding: 52px 0 58px;
}

.hero-copy {
  width: min(100%, 470px);
}

.hero-copy h1 {
  margin-bottom: 18px;
  color: var(--burgundy-dark);
  font-family: var(--serif);
  font-size: clamp(46px, 4.8vw, 72px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 0.92;
}

.hero-copy p {
  max-width: 420px;
  margin-bottom: 28px;
  color: #241a17;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.44;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

h2,
h3,
p {
  margin-top: 0;
}

.button {
  display: inline-flex;
  min-width: 160px;
  min-height: 40px;
  /* Ohne seitliche Polsterung passten nur kurze Beschriftungen: sie blieben
     zufaellig innerhalb der 160px Mindestbreite. Laengere klebten am Rand und
     brachen um — „Alle Veranstaltungen ansehen (8 weitere)" stand dreizeilig in
     einem 40px hohen Knopf. */
  padding: 0 22px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  border: 1px solid var(--burgundy);
  background: var(--burgundy);
  color: #fffaf4;
}

.button-secondary {
  border: 1px solid var(--burgundy);
  background: rgba(251, 247, 241, 0.42);
  color: var(--burgundy-dark);
}

.section-shell {
  width: min(calc(100% - 48px), 1110px);
  margin: 0 auto;
}

.intro-band {
  position: relative;
  overflow: hidden;
  padding: 42px 0 64px;
  background: var(--cream-soft);
}

.intro-band::before,
.intro-band::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.intro-band::before {
  left: -42px;
  bottom: -58px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(157, 45, 51, 0.08);
  border-radius: 50%;
}

.intro-band::after {
  right: 5%;
  top: 16px;
  width: 220px;
  height: 80px;
  background: radial-gradient(ellipse at center, rgba(157, 45, 51, 0.05), transparent 70%);
}

.room-heading {
  position: relative;
  display: grid;
  place-items: center;
  margin-bottom: 34px;
  text-align: center;
}

/* Schreibschrift-Überschriften — siehe die Regel bei --script in :root.
   „Ich halte Räume für" ist Lydias eigene Ansage, kein Gliederungstitel. Deutlich
   größer als der Serif zuvor (31px): Amsterdam hat sehr feine Striche und wirkt
   bei gleicher Punktgröße erheblich kleiner. line-height 1 wäre zu eng, die
   Unterlängen der Schwünge würden in die Zierlinie darunter laufen. */
.room-heading h2 {
  /* Abstand in em, nicht px: die Schwuenge reichen rund 0,4em unter die
     Zeilenbox und wachsen mit der Schriftgroesse mit. Mit den 8px des Serifs
     schnitten sie durch die Zierlinie darunter. */
  margin-bottom: 0.7em;
  color: var(--burgundy-dark);
  font-family: var(--script);
  font-size: clamp(36px, 4.2vw, 46px);
  font-weight: 400;
  line-height: 1.2;
}

.room-heading span {
  position: relative;
  width: 120px;
  height: 12px;
  border-top: 1px solid rgba(111, 32, 39, 0.22);
}

.room-heading span::before {
  position: absolute;
  top: -9px;
  left: 50%;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(111, 32, 39, 0.26);
  border-radius: 50% 50% 0 50%;
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.room-list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.room-list article {
  min-height: 72px;
  display: grid;
  align-content: center;
  padding: 4px 30px 8px;
  text-align: center;
}

.room-list article + article {
  border-left: 1px solid var(--line);
}

.room-list h3 {
  margin-bottom: 4px;
  color: #36241f;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}

.room-list p {
  max-width: 180px;
  margin: 0 auto;
  color: #2d2522;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
}

.offers {
  position: relative;
  padding: 52px 0 72px;
  background:
    linear-gradient(180deg, #fff 0%, #fff 62%, rgba(247, 239, 229, 0.42) 100%);
}

.offers .section-shell {
  width: min(calc(100% - 48px), 1370px);
}

.section-heading {
  display: none;
}

/* Fuenf Karten je Zeile, das schmale Kachelformat ist so gewollt (27.08.2026).
   Die Reihenfolge folgt dem Menue. */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* Neun Karten ergeben 5 + 4, und die zweite Zeile soll mittig stehen. Mit fuenf
   Spalten geht das nicht: die vier Karten muessten bei Spalte 1,5 beginnen.
   Deshalb ZEHN Halbspalten, jede Karte ueber zwei davon -- dann faengt die
   zweite Zeile eine Halbspalte spaeter an und sitzt exakt in der Mitte.
   Die Kartenbreite bleibt dabei unveraendert: zwei Halbspalten plus die Luecke
   dazwischen sind genau eine ganze Spalte.

   Nur ab 881px, denn darunter greifen die 2- und 1-spaltigen Regeln -- dort
   wuerde `span 2` eine Karte ueber die volle Breite ziehen. */
@media (min-width: 881px) {
  .offer-grid {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .offer-card {
    grid-column: span 2;
  }

  /* Start UND Spannweite in einer Angabe. Nur `grid-column-start: 2` ueberschrieb
     die Spannweite aus `grid-column: span 2` -- die Karte war dann eine halbe
     Spalte breit und alles dahinter verrutschte. */
  .offer-card:nth-child(6) {
    grid-column: 2 / span 2;
  }
}

/* Angebots-Überblick unter dem Bild-Grid — alle Unterangebote auf einen Blick. */
.offer-index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin-top: 46px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}

.offer-index-col h3 {
  margin: 0 0 12px;
  color: var(--burgundy);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.offer-index-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.offer-index-col a {
  color: var(--burgundy-dark);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.2;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.offer-index-col a:hover,
.offer-index-col a:focus-visible {
  color: var(--burgundy);
  border-bottom-color: var(--burgundy);
}

@media (max-width: 720px) {
  .offer-index {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 34px;
    padding-top: 26px;
  }
}

.offer-card {
  position: relative;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(111, 32, 39, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 250, 244, 0.84), rgba(243, 232, 220, 0.96)),
    var(--card);
  box-shadow: 0 18px 42px rgba(82, 53, 43, 0.1);
  text-align: center;
  isolation: isolate;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.offer-card img {
  width: 100%;
  height: 246px;
  object-fit: cover;
  filter: saturate(0.94) contrast(0.98);
  transition: transform 700ms ease, filter 300ms ease;
}

.offer-card:hover,
.offer-card:focus-visible {
  border-color: rgba(111, 32, 39, 0.22);
  box-shadow: 0 26px 58px rgba(82, 53, 43, 0.16);
  transform: translateY(-6px);
}

.offer-card:hover img,
.offer-card:focus-visible img {
  filter: saturate(1.02) contrast(1.02);
  transform: scale(1.045);
}

.offer-card:focus-visible {
  outline: 3px solid rgba(157, 45, 51, 0.2);
  outline-offset: 4px;
}

.offer-card strong {
  display: block;
  width: auto;
  min-width: 0;
  margin: 20px 20px 9px;
  color: var(--burgundy-dark);
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 0.98;
  /* Bei fuenf Spalten sind die Karten nur ~224px breit, und lange Komposita
     passen nicht in eine Zeile. `overflow-wrap` allein trennte stumpf mitten im
     Wort ("Meditationsgrup | pe"). Mit `hyphens: auto` und `lang="de"` am
     <html> trennt der Browser nach deutschen Regeln und setzt einen Bindestrich.
     `overflow-wrap` bleibt als Notnagel fuer alles, was er nicht trennen kann. */
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.offer-card span {
  display: block;
  width: min(100%, 216px);
  min-width: 0;
  min-height: 54px;
  margin: 0 auto 62px;
  padding: 0 12px;
  color: #2b211e;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.28;
  hyphens: auto;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.offer-card::after {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(111, 32, 39, 0.18);
  border-radius: 50%;
  background: rgba(255, 250, 244, 0.76);
  color: var(--burgundy-dark);
  content: "→";
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1;
  transition: background 220ms ease, color 220ms ease, transform 220ms ease;
}

.offer-card:hover::after,
.offer-card:focus-visible::after {
  background: var(--burgundy);
  color: #fffaf4;
  transform: translateX(3px);
}

.journey {
  position: relative;
  overflow: hidden;
  padding: clamp(82px, 8vw, 132px) 0 clamp(78px, 8vw, 122px);
  background:
    radial-gradient(circle at 9% 28%, rgba(157, 45, 51, 0.055), transparent 22%),
    radial-gradient(circle at 92% 8%, rgba(102, 112, 82, 0.14), transparent 25%),
    radial-gradient(circle at 82% 86%, rgba(157, 45, 51, 0.055), transparent 22%),
    linear-gradient(180deg, #fff 0%, var(--cream-soft) 100%);
}

.journey::before {
  position: absolute;
  top: 10%;
  left: -80px;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(157, 45, 51, 0.08);
  border-radius: 50%;
  content: "";
}

.journey::after {
  position: absolute;
  right: -120px;
  bottom: 7%;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(102, 112, 82, 0.13);
  border-radius: 50%;
  content: "";
}

.journey-heading {
  max-width: 720px;
  position: relative;
  z-index: 1;
  margin: 0 auto 28px;
  text-align: center;
}

/* „Eine kleine Reise zurück zu dir" — Einladung, kein Gliederungstitel.
   Abstand in em (siehe .room-heading h2): mit den 14px des Serifs schnitt der
   Bogen des „R" quer durch die Unterzeile. Massgeblich ist nicht die Zeilenbox,
   sondern die tatsaechliche Glyphenkante — die liegt deutlich tiefer. */
.journey-heading h2 {
  margin-bottom: 0.75em;
  color: var(--burgundy-dark);
  font-family: var(--script);
  font-size: clamp(44px, 4.8vw, 66px);
  font-weight: 400;
  line-height: 1.2;
}

.journey-heading p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.journey-senses {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, 780px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 auto 64px;
  overflow: hidden;
  border: 1px solid rgba(111, 32, 39, 0.12);
  border-radius: 8px;
  background: rgba(111, 32, 39, 0.12);
  box-shadow: 0 16px 52px rgba(82, 53, 43, 0.07);
}

.journey-senses span {
  position: relative;
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 18px 18px 20px;
  background: rgba(255, 250, 244, 0.76);
  text-align: center;
}

.journey-senses span::before {
  width: 8px;
  height: 8px;
  margin-bottom: 2px;
  border: 1px solid rgba(157, 45, 51, 0.34);
  border-radius: 50%;
  background: rgba(157, 45, 51, 0.08);
  content: "";
}

.journey-senses strong {
  color: var(--burgundy-dark);
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 500;
  line-height: 1;
}

.journey-senses small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}

.journey-list {
  display: grid;
  gap: 38px;
  position: relative;
  z-index: 1;
}

.journey-list::before {
  position: absolute;
  top: 34px;
  bottom: 34px;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(111, 32, 39, 0.26), transparent);
  content: "";
  transform: translateX(-50%);
}

.journey-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(310px, 0.7fr);
  align-items: stretch;
  gap: 0;
  width: min(100%, 940px);
  min-height: 312px;
  overflow: hidden;
  border: 1px solid rgba(111, 32, 39, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 250, 244, 0.94), rgba(247, 239, 229, 0.86)),
    rgba(247, 239, 229, 0.84);
  box-shadow: 0 26px 76px rgba(82, 53, 43, 0.12);
  isolation: isolate;
}

.journey-item.reverse {
  justify-self: end;
  grid-template-columns: minmax(310px, 0.7fr) minmax(0, 0.94fr);
}

.journey-item.reverse .journey-text {
  grid-column: 2;
}

.journey-item.reverse figure {
  grid-column: 1;
  grid-row: 1;
}

.journey-number {
  position: absolute;
  top: 24px;
  left: 28px;
  z-index: 2;
  color: rgba(111, 32, 39, 0.24);
  font-family: var(--serif);
  font-size: 68px;
  line-height: 1;
}

.journey-item.reverse .journey-number {
  left: auto;
  right: 28px;
}

.journey-text {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 312px;
  padding: 64px clamp(34px, 5vw, 74px) 46px;
}

.journey-text::before {
  width: 44px;
  height: 1px;
  margin-bottom: 22px;
  background: rgba(157, 45, 51, 0.28);
  content: "";
}

.journey-text h3 {
  margin-bottom: 18px;
  color: var(--burgundy-dark);
  font-family: var(--serif);
  font-size: clamp(38px, 4.2vw, 58px);
  font-weight: 500;
  line-height: 0.96;
}

.journey-text p {
  max-width: 520px;
  margin-bottom: 22px;
  color: #2b211e;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.58;
}

.journey-text small {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 9px 12px 10px;
  border: 1px solid rgba(111, 32, 39, 0.12);
  border-radius: 999px;
  background: rgba(255, 250, 244, 0.58);
  color: var(--burgundy-dark);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.journey-item figure {
  position: relative;
  min-height: 312px;
  margin: 0;
  overflow: hidden;
}

.journey-item figure::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(247, 239, 229, 0.42), rgba(247, 239, 229, 0) 42%),
    linear-gradient(0deg, rgba(36, 26, 23, 0.16), rgba(36, 26, 23, 0) 45%);
  content: "";
}

.journey-item.reverse figure::after {
  background:
    linear-gradient(270deg, rgba(247, 239, 229, 0.42), rgba(247, 239, 229, 0) 42%),
    linear-gradient(0deg, rgba(36, 26, 23, 0.14), rgba(36, 26, 23, 0) 45%);
}

.journey-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms ease;
}

.journey-item:hover img {
  transform: scale(1.035);
}

.journey-quote {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 56px;
  padding: clamp(34px, 5vw, 58px) clamp(28px, 5vw, 64px);
  border-radius: 8px;
  border: 1px solid rgba(111, 32, 39, 0.1);
  background:
    radial-gradient(circle at 90% 20%, rgba(102, 112, 82, 0.13), transparent 28%),
    linear-gradient(90deg, rgba(247, 239, 229, 0.98), rgba(251, 247, 241, 0.94)),
    var(--cream);
  box-shadow: 0 18px 60px rgba(82, 53, 43, 0.08);
}

.journey-quote::before {
  color: rgba(157, 45, 51, 0.26);
  content: "“";
  font-family: var(--serif);
  font-size: 82px;
  line-height: 0.7;
}

/* Lydias eigener Satz - hier traegt die gekaufte Schreibschrift. Sie ist von
   Haus aus geneigt und zart, deshalb KEIN italic (das wuerde der Browser
   zusaetzlich schraegstellen) und kein Fettschnitt (den gibt es nicht, er
   wuerde nur synthetisch verdickt). Groesser und luftiger als der Serif zuvor:
   Schreibschriften brauchen Platz fuer Ober- und Unterlaengen. */
.journey-quote p {
  max-width: 620px;
  margin-bottom: 0;
  color: var(--burgundy-dark);
  font-family: var(--script);
  font-size: clamp(34px, 3.8vw, 54px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.25;
}

/* Das Band hatte keine vertikale Polsterung — mit dem kompakten Serif reichte
   die min-height. Die Schreibschrift ist hoeher und ihre Schwuenge stiessen oben
   wie unten an die Bandkante. Polsterung statt groesserer min-height, damit das
   Band mitwaechst, wenn der Text auf schmalen Viewports mehr Zeilen braucht. */
.contact-callout {
  min-height: 84px;
  display: grid;
  align-items: center;
  padding: 22px 0;
  background: var(--sage);
  color: #fffaf4;
}

.contact-grid {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 260px;
  align-items: center;
  gap: 28px;
}

.lotus svg {
  width: 110px;
  color: rgba(255, 250, 244, 0.42);
}

.lotus path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* Handgezeichnete Zeichen im Abschluss-Aufruf. Sie ERSETZEN dort den generischen
   Lotus-Umriss, statt zusaetzlich zu erscheinen — und jedes kommt genau einmal
   auf der ganzen Seite vor: Herzen auf /tantra, Lotus auf /mental-coaching,
   Bluete auf /veranstaltungen. Wer sich durchklickt, soll ein neues Zeichen
   entdecken und nicht dreimal dasselbe sehen.
   Etwas zurueckgenommen (0.88), damit sie neben der Schreibschrift-Ueberschrift
   nicht um Aufmerksamkeit konkurrieren. */
.cta-mark {
  width: clamp(64px, 8vw, 92px);
  height: auto;
  margin-bottom: 4px;
  opacity: 0.88;
}

/* ── Verspielte Zierzeichen ─────────────────────────────────────────────────
   Lydias handgezeichnete Motive als lose Akzente in den freien Flaechen. Die
   Seite ist sehr aufgeraeumt — viele Kaesten, viel Weissraum. Das wirkt
   ordentlich, laesst aber wenig von ihr durch. Die Zeichen brechen das auf,
   ohne die Ordnung anzutasten.

   Regeln, damit daraus Charakter wird und keine Dekortapete:
   - hoechstens drei pro Seite, jedes Motiv auf einer Seite nur einmal
   - immer in eine LEERE Flaeche, nie ueber Text
   - `aria-hidden` + `pointer-events: none` — rein visuell, fuer Screenreader
     und Maus nicht vorhanden
   - kein `z-index: -1`: das schoebe sie hinter den Kastenhintergrund und sie
     waeren unsichtbar. Stattdessen liegt der Inhalt daneben auf z-index 1. */
.deco {
  position: absolute;
  z-index: 0;
  width: var(--deco-size, 110px);
  height: auto;
  rotate: var(--deco-rot, 0deg);
  opacity: var(--deco-opacity, 0.42);
  pointer-events: none;
  user-select: none;
}

/* Zwei sehr langsame Bewegungen. Getrennte `scale`/`translate`-Eigenschaften
   statt `transform`, damit die Drehung aus --deco-rot erhalten bleibt und nicht
   ueberschrieben wird. Nur Kompositor-Eigenschaften — kein Layout, kein Neuzeichnen. */
@keyframes deco-atmen {
  50% {
    scale: 1.06;
  }
}

@keyframes deco-schweben {
  50% {
    translate: 0 -12px;
  }
}

/* Unterschiedliche Dauern und Verzoegerungen: liefen sie im Gleichtakt, saehe es
   maschinell aus statt lebendig. */
.deco-atmend {
  animation: deco-atmen 11s ease-in-out infinite;
}

.deco-schwebend {
  animation: deco-schweben 14s ease-in-out infinite;
}

.deco-spaet {
  animation-delay: -5s;
}

/* Wer Bewegung abgestellt hat, bekommt die Zeichen ruhig — sie bleiben sichtbar,
   sie bewegen sich nur nicht. */
@media (prefers-reduced-motion: reduce) {
  .deco-atmend,
  .deco-schwebend {
    animation: none;
  }
}

/* Die einzelnen Plaetze. Bewusst hier und nicht als style="" im Markup: auf
   schmalen Schirmen fehlt der freie Platz, den diese Zeichen brauchen, und
   Inline-Positionen liessen sich per Media Query nicht mehr korrigieren. */
.deco-blume-band {
  --deco-size: 116px;
  --deco-rot: -12deg;
  --deco-opacity: 0.38;
  top: -14px;
  right: 2%;
}

.deco-herzen-zitat {
  --deco-size: 78px;
  --deco-rot: 8deg;
  --deco-opacity: 0.5;
  top: 16px;
  right: 22px;
}

.deco-lotus-newsletter {
  --deco-size: 132px;
  --deco-rot: -8deg;
  --deco-opacity: 0.42;
  top: -62px;
  left: -52px;
}

@media (max-width: 900px) {
  /* Enger gestellt und kleiner: die Kaesten reichen hier fast bis an den Rand,
     die Zeichen ruecken deshalb ueber die Kante nach aussen statt nach innen. */
  .deco-blume-band {
    --deco-size: 68px;
    --deco-opacity: 0.3;
    top: -34px;
    right: 6px;
  }

  .deco-herzen-zitat {
    --deco-size: 58px;
    top: 10px;
    right: 12px;
  }

  .deco-lotus-newsletter {
    --deco-size: 84px;
    --deco-opacity: 0.32;
    top: -74px;
    left: -22px;
  }
}

/* „Ich freue mich auf dich" — persönlichste Zeile der Seite, direkt über dem
   Kontaktbereich. */
.contact-callout h2 {
  /* 3px reichten beim Serif, hier laufen die Schwuenge sonst in die Unterzeile. */
  margin-bottom: 0.7em;
  font-family: var(--script);
  font-size: clamp(34px, 3.6vw, 42px);
  font-weight: 400;
  line-height: 1.2;
}

.contact-callout p {
  max-width: 560px;
  margin: 0;
  color: rgba(255, 250, 244, 0.86);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
}

.contact-panel {
  display: flex;
  justify-content: flex-end;
}

.button-light {
  min-width: 196px;
  min-height: 42px;
  border: 1px solid rgba(255, 250, 244, 0.8);
  background: #fffaf4;
  color: var(--burgundy-dark);
}

@media (max-width: 1120px) {
  .site-header {
    gap: 34px;
  }

  .brand {
    min-width: 238px;
  }

  .brand strong {
    font-size: 25px;
  }

  .main-nav {
    gap: 24px;
  }

  .about-grid {
    grid-template-columns: 42% minmax(320px, 1fr);
  }

  .about-still {
    display: none;
  }
}

@media (max-width: 880px) {
  .site-header {
    height: auto;
    min-height: 74px;
    justify-content: space-between;
    padding: 12px 18px;
  }

  /* Mobil ist die Leiste 74px hoch: 50px Logo + 2x12px Innenabstand. Der
     Schmetterling wuchs hier von 40 auf 50 px mit — auf dem Handy ist er das
     Erste, was man von der Marke sieht. */
  .site-header .brand-mark {
    width: 50px;
    height: 50px;
  }

  .hero {
    min-height: 620px;
  }

  .hero-media img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
    object-position: 66% center;
  }

  /* Gleiche Behandlung wie oben: weicher abgestuft und insgesamt durchlaessiger.
     Achtung, die beiden Verlaeufe multiplizieren sich - unten links liegt die
     Summe beider Schichten, deshalb sind hier beide zurueckgenommen. */
  .hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(247, 239, 229, 0.86) 0%,
        rgba(247, 239, 229, 0.83) 24%,
        rgba(247, 239, 229, 0.76) 44%,
        rgba(247, 239, 229, 0.64) 60%,
        rgba(247, 239, 229, 0.49) 74%,
        rgba(247, 239, 229, 0.33) 87%,
        rgba(247, 239, 229, 0.2) 100%
      ),
      linear-gradient(
        0deg,
        rgba(247, 239, 229, 0.62) 0%,
        rgba(247, 239, 229, 0.42) 16%,
        rgba(247, 239, 229, 0.24) 30%,
        rgba(247, 239, 229, 0.1) 42%,
        rgba(247, 239, 229, 0.02) 54%
      );
  }

  /* Die Startseiten-Regel `.hero-clip .hero-overlay` ist spezifischer als die
     allgemeine daruber und wuerde sonst auch hier gewinnen -- das Handy bekaeme
     den Desktop-Verlauf ohne den Verlauf von unten, und der Fliesstext faellt
     auf 3.6:1. Deshalb hier noch einmal ausdruecklich, minimal durchlaessiger
     als die Unterseiten. */
  .hero-clip .hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(247, 239, 229, 0.82) 0%,
        rgba(247, 239, 229, 0.79) 24%,
        rgba(247, 239, 229, 0.72) 44%,
        rgba(247, 239, 229, 0.6) 60%,
        rgba(247, 239, 229, 0.45) 74%,
        rgba(247, 239, 229, 0.3) 87%,
        rgba(247, 239, 229, 0.18) 100%
      ),
      linear-gradient(
        0deg,
        rgba(247, 239, 229, 0.62) 0%,
        rgba(247, 239, 229, 0.42) 16%,
        rgba(247, 239, 229, 0.24) 30%,
        rgba(247, 239, 229, 0.1) 42%,
        rgba(247, 239, 229, 0.02) 54%
      );
  }

  .hero-inner {
    width: min(calc(100% - 32px), 1110px);
    min-height: 620px;
    align-items: flex-start;
    padding-top: 64px;
  }

  .hero-copy h1 {
    max-width: 9.5ch;
    font-size: 48px;
  }

  .hero-copy p {
    max-width: 27ch;
    font-size: 14px;
    font-weight: 600;
  }

  .hero-actions {
    display: grid;
    max-width: 270px;
    gap: 10px;
  }

  .room-list,
  .offer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .offers {
    padding-top: 34px;
  }

  .offer-card {
    min-height: 420px;
  }

  .offer-card img {
    height: 262px;
  }

  .room-list article:nth-child(odd) {
    border-left: 0;
  }

  .room-list article {
    border-bottom: 1px solid var(--line);
  }

  .journey-item,
  .journey-item.reverse {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 24px;
    min-height: 0;
  }

  .journey-list::before {
    display: none;
  }

  .journey-senses {
    grid-template-columns: 1fr;
    gap: 1px;
    margin-bottom: 42px;
  }

  .journey-senses span {
    padding: 16px 18px;
  }

  .journey-item.reverse .journey-text,
  .journey-item.reverse figure {
    grid-column: auto;
    grid-row: auto;
  }

  .journey-number,
  .journey-item.reverse .journey-number {
    position: static;
    font-size: 32px;
  }

  .journey-text {
    min-height: 0;
    padding: 0;
  }

  .journey-text::before {
    margin-bottom: 10px;
  }

  .journey-text small {
    border-radius: 8px;
  }

  .journey-item figure {
    min-height: 0;
    border-radius: 7px;
  }

  .journey-item img {
    width: 100%;
    height: 210px;
  }

  .journey-quote {
    display: grid;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 26px 0;
  }

  .lotus {
    display: none;
  }

  .contact-panel {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .brand strong {
    font-size: 22px;
  }

  .hero {
    min-height: 590px;
  }

  .hero-inner {
    min-height: 590px;
    padding-top: 54px;
  }

  .hero-copy h1 {
    font-size: 42px;
  }

  .section-shell {
    width: min(calc(100% - 28px), 1110px);
  }

  .room-list,
  .offer-grid {
    grid-template-columns: 1fr;
  }

  .offer-grid {
    gap: 18px;
  }

  .offer-card {
    min-height: 432px;
  }

  .offer-card img {
    height: 272px;
  }

  .offer-card strong {
    margin-top: 18px;
    font-size: 28px;
  }

  .offer-card span {
    width: min(100%, 280px);
    padding: 0 18px;
    font-size: 11px;
    line-height: 1.34;
  }

  .offer-card::after {
    right: auto;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
  }

  .offer-card:hover::after,
  .offer-card:focus-visible::after {
    transform: translateX(-50%);
  }

  .journey-heading {
    margin-bottom: 24px;
  }

  .journey-heading h2 {
    max-width: 340px;
    margin-right: auto;
    margin-left: auto;
    font-size: 36px;
    line-height: 0.98;
  }

  .journey-heading p {
    max-width: 300px;
    margin-right: auto;
    margin-left: auto;
    font-size: 14px;
  }

  .room-list article + article {
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   Utilities & shared section intro
   ========================================================= */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 100;
  padding: 9px 16px;
  border-radius: 0 0 8px 8px;
  background: var(--burgundy);
  color: #fffaf4;
  font-size: 13px;
  font-weight: 700;
  transition: top 180ms ease;
}

.skip-link:focus {
  top: 0;
}

main section[id] {
  scroll-margin-top: 84px;
}

.eyebrow {
  margin-bottom: 10px;
  color: var(--burgundy);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero-eyebrow {
  margin-bottom: 14px;
  color: var(--burgundy);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.section-intro {
  max-width: 680px;
  margin: 0 auto 40px;
  text-align: center;
}

.section-intro h2 {
  margin-bottom: 14px;
  color: var(--burgundy-dark);
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 500;
  line-height: 1.02;
}

.section-lead {
  margin: 0 auto;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

/* =========================================================
   Veranstaltungen / Events
   ========================================================= */
.events {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 8vw, 116px) 0 clamp(72px, 8vw, 116px);
  background:
    radial-gradient(circle at 88% 6%, rgba(102, 112, 82, 0.12), transparent 26%),
    radial-gradient(circle at 6% 92%, rgba(157, 45, 51, 0.06), transparent 24%),
    linear-gradient(180deg, var(--cream-soft) 0%, #fff 100%);
}

.event-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 38px;
}

.chip {
  padding: 9px 20px;
  border: 1px solid rgba(111, 32, 39, 0.2);
  border-radius: 999px;
  background: rgba(255, 250, 244, 0.7);
  color: var(--burgundy-dark);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.chip:hover {
  border-color: var(--burgundy);
  transform: translateY(-1px);
}

.chip.is-active {
  border-color: var(--burgundy);
  background: var(--burgundy);
  color: #fffaf4;
}

/* ===== Veranstaltungen — Hybrid: Spotlight + Bento-Bildkarten ===== */
.event-card.is-hidden {
  display: none;
}

/* Basis: altes Zeilen-Layout neutralisieren; Varianten bringen ihr Layout selbst mit */
.event-card {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(111, 32, 39, 0.12);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 250, 244, 0.97), rgba(247, 239, 229, 0.82));
  box-shadow: 0 16px 40px rgba(82, 53, 43, 0.09);
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

/* gemeinsamer Kicker: Mond-Glyph + Jahreszeit/Datum (lunarer Layer) */
.event-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  color: var(--burgundy);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.event-kicker .kicker-moon {
  flex: none;
  color: var(--gold);
}

/* ---------- Spotlight: nächster Termin ---------- */
.event-spotlight {
  display: grid;
  grid-template-columns: clamp(280px, 42%, 460px) 1fr;
  align-items: stretch;
  margin-bottom: 44px;
  border-radius: 24px;
  border-color: rgba(111, 32, 39, 0.16);
  box-shadow: 0 26px 60px rgba(82, 53, 43, 0.14);
}

.event-spotlight:hover {
  transform: translateY(-3px);
  box-shadow: 0 34px 72px rgba(82, 53, 43, 0.18);
}

.spotlight-media {
  position: relative;
  min-height: 320px;
  overflow: hidden;
}

.spotlight-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms ease;
}

.event-spotlight:hover .spotlight-media img {
  transform: scale(1.05);
}

.spotlight-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 52%, rgba(111, 32, 39, 0.3));
  pointer-events: none;
}

/* ---------- Kachel führt zur Formatseite ----------
   Nur bei Terminen mit `detail` in src/data/events.js. Bild UND Überschrift
   sind klickbar; das Bild ist dabei bewusst NICHT fokussierbar (tabindex="-1"),
   denn es zeigt auf dasselbe Ziel wie die Überschrift — zwei Tab-Stopps auf
   dieselbe Seite wären für Tastatur- und Screenreader-Nutzung nur Lärm. */
.media-link {
  display: block;
  width: 100%;
  height: 100%;
}

.spotlight-media .media-link {
  position: absolute;
  inset: 0;
}

/* Unterstrich wächst beim Hover aus dem Nichts, statt hart zu erscheinen —
   die Überschrift soll als Link lesbar sein, ohne wie einer auszusehen. */
.title-link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 280ms ease, color 200ms ease;
}

.title-link:hover,
.title-link:focus-visible {
  color: var(--burgundy);
  background-size: 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
  .title-link {
    transition: none;
  }
}

.spotlight-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  background: rgba(33, 26, 24, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff8f1;
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.badge-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  animation: badgePulse 2.2s ease-out infinite;
}

@keyframes badgePulse {
  0% { box-shadow: 0 0 0 0 rgba(201, 162, 75, 0.6); }
  70% { box-shadow: 0 0 0 9px rgba(201, 162, 75, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 162, 75, 0); }
}

.spotlight-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(26px, 3vw, 42px);
}

.spotlight-content .event-tag {
  margin-bottom: 12px;
}

.spotlight-content h3 {
  margin: 0 0 10px;
  color: #2c211d;
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 600;
  line-height: 1.05;
}

.spotlight-lead {
  max-width: 52ch;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.55;
}

.spotlight-content .event-meta {
  margin-bottom: 18px;
}

/* ---------- Countdown ---------- */
.countdown {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 250, 244, 0.7);
}

.cd-unit {
  display: grid;
  justify-items: center;
  min-width: 42px;
}

.cd-unit b {
  color: var(--burgundy);
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cd-unit small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cd-sep {
  color: rgba(157, 45, 51, 0.38);
  font-family: var(--serif);
  font-size: 24px;
  transform: translateY(-6px);
}

/* gemeinsame Aktions-Reihe */
.event-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: auto;
}

/* „Mehr erfahren" war bisher ein gleichrangiges Flex-Kind zwischen Kalender-
   Knopf und Platzhinweis. Je nachdem, welche davon eine Karte hatte, landete es
   an einer anderen Stelle — auf jeder Kachel woanders. Jetzt sind die linken
   Aktionen eine eigene Gruppe und der Link wird mit margin-left:auto nach rechts
   gedrueckt: passt alles in eine Zeile, sitzt er am rechten Rand; passt es nicht,
   rutscht er in die naechste Zeile und bleibt dort rechts. Unten rechts also in
   jedem Fall, ohne die Spalten auf schmalen Kacheln zu quetschen. */
.event-cta-split {
  align-items: flex-end;
}

/* --- Feste Anordnung, sobald Kacheln nebeneinander stehen ------------------
   Titel (ein- oder zweizeilig), Beschreibung (drei bis sechs Zeilen), der
   Zusatzhinweis und die „Mehr erfahren"-Pille sind je Termin unterschiedlich
   lang. Ohne Reservierung sass dadurch auf jeder Kachel einer Reihe alles auf
   einer anderen Hoehe. Jeder Block haelt deshalb seine volle Flaeche frei und
   packt den Inhalt nach oben; beim CTA-Block haelt zusaetzlich `margin-top:auto`
   die Pille unten. Ueberall min-height statt height: ein laengerer Text darf die
   Kachel wachsen lassen — lieber eine Kachel hoeher als eine abgeschnittene
   Beschreibung.

   Erst ab 660px, denn darunter ist das Raster einspaltig (Kacheln ab 290px +
   22px Abstand + 48px Seitenrand). Einspaltig gibt es nichts auszurichten, die
   Reservierung waere dort nur Leerraum unter kurzen Texten. */
@media (min-width: 660px) {
  .tile-content h3 {
    min-height: 2.24em;
  }

  /* `h3 + p` und nicht `.tile-content > p`: direktes p-Kind ist auch der
     Datums-Kicker UEBER der Ueberschrift. Der bekam die reservierte Hoehe sonst
     mit ab und riss eine 126px-Luecke zwischen Datum und Titel auf.
     6 Zeilen a 1.5 = 9em, deckt den laengsten aktuellen Text (194 Zeichen). */
  .tile-content > h3 + p {
    min-height: 9em;
  }

  .tile-content .event-meta {
    min-height: calc(3 * 20px + 2 * 8px);
  }

  /* Gemessen: 58px Aktionen inkl. zweizeiligem Hinweis + 12px + 36px Pille. */
  .tile-content .event-cta {
    align-content: flex-start;
    min-height: 106px;
  }

  .tile-content .event-cta-main {
    align-content: flex-start;
    min-height: 58px;
  }
}

.event-cta-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.event-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 8px 16px;
  border: 1px solid rgba(157, 45, 51, 0.5);
  border-radius: 999px;
  background: rgba(255, 250, 244, 0.92);
  color: var(--burgundy-dark);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.event-more:hover,
.event-more:focus-visible {
  border-color: var(--burgundy);
  background: var(--burgundy);
  color: #fffaf4;
  transform: translateY(-1px);
}

.event-more-arrow {
  transition: transform 200ms ease;
}

.event-more:hover .event-more-arrow {
  transform: translateX(3px);
}

/* ---------- Bento-Grid + Bildkacheln ---------- */
.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  grid-auto-flow: dense;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-tile {
  display: flex;
  flex-direction: column;
}

.event-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(111, 32, 39, 0.22);
  box-shadow: 0 28px 60px rgba(82, 53, 43, 0.16);
}

.tile-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 11;
}

.tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 650ms ease;
}

.event-tile:hover .tile-media img {
  transform: scale(1.06);
}

.tile-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(33, 26, 24, 0.32));
  pointer-events: none;
}

.tile-media .event-tag {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  margin: 0;
  background: rgba(255, 250, 244, 0.92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.tile-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px clamp(18px, 2vw, 24px) 22px;
}

.tile-content h3 {
  margin: 0 0 8px;
  color: #2c211d;
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 600;
  line-height: 1.12;
}

.tile-content > p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Auf den Kacheln stehen Uhrzeit, Ort und Preis IMMER untereinander. Als
   umbrechende Zeile sassen Uhrzeit und Ort mal nebeneinander, mal getrennt --
   je nach Laenge der Ortsangabe. Das machte die Reihe unruhig. Gilt auf jeder
   Breite, auch einspaltig: untereinander liest es sich ohnehin ruhiger. */
.tile-content .event-meta {
  display: grid;
  grid-auto-flow: row;
  justify-items: start;
  gap: 8px;
  margin-bottom: 16px;
}

/* breite Akzent-Kachel: Bild | Text nebeneinander */
.event-tile.is-wide {
  grid-column: span 2;
}

@media (min-width: 760px) {
  .event-tile.is-wide {
    flex-direction: row;
  }

  .event-tile.is-wide .tile-media {
    flex: none;
    width: 46%;
    aspect-ratio: auto;
  }

  .event-tile.is-wide .tile-content {
    justify-content: center;
  }
}

.button-text {
  gap: 8px;
  min-width: auto;
  min-height: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--burgundy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.button-text span {
  transition: transform 200ms ease;
}

.button-text:hover span {
  transform: translateX(4px);
}

/* ---------- Scroll-Reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 620ms ease, transform 620ms ease;
  transition-delay: calc(var(--i, 0) * 70ms);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .badge-pulse {
    animation: none;
  }

  .event-spotlight:hover .spotlight-media img,
  .event-tile:hover .tile-media img {
    transform: none;
  }
}

.event-tag {
  display: inline-block;
  margin-bottom: 9px;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tag-yoga {
  background: rgba(102, 112, 82, 0.16);
  color: #4c5a36;
}

.tag-tantra {
  background: rgba(157, 45, 51, 0.12);
  color: var(--burgundy-dark);
}

.tag-frau-sein {
  background: rgba(168, 80, 110, 0.15);
  color: #8a3f5c;
}

.tag-retreat {
  background: rgba(201, 162, 75, 0.2);
  color: #8a6a1f;
}

/* Vergangene Termine: Badge + zurückgenommene Karte */
.tag-past {
  background: rgba(33, 26, 24, 0.72);
  color: #fffaf4;
}

.event-tile.is-past .tile-media img {
  filter: grayscale(0.55);
  opacity: 0.72;
}

.event-tile.is-past .tile-media .tag-past {
  right: 12px;
  left: auto;
  background: rgba(33, 26, 24, 0.78);
  color: #fffaf4;
}

.event-tile.is-past .tile-content h3,
.event-tile.is-past .tile-content p,
.event-tile.is-past .event-meta {
  opacity: 0.7;
}

.tag-ritual {
  background: rgba(120, 92, 72, 0.16);
  color: #6f4e3a;
}

/* Datums-Badge für Termine ohne festes Datum ("auf Anfrage" / Monat) */
.event-date.is-tba {
  align-content: center;
  gap: 0;
  padding: 10px 6px;
}

.event-tba {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: uppercase;
}

.event-body h3 {
  margin-bottom: 8px;
  color: #2c211d;
  font-family: var(--serif);
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 600;
  line-height: 1.1;
}

.event-body p {
  max-width: 60ch;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.5;
}

.event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #463a36;
  font-size: 13px;
  font-weight: 600;
}

.meta-item::before {
  width: 15px;
  height: 15px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  opacity: 0.8;
}

.meta-time::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f2027' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

.meta-place::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f2027' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E");
}

.meta-price::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f2027' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 8.5A5 5 0 1 0 16 16'/%3E%3Cpath d='M5.5 11h7M5.5 13.6h7'/%3E%3C/svg%3E");
}

.event-action {
  display: grid;
  justify-items: center;
  gap: 9px;
}

.event-action .button {
  min-width: 150px;
}

.event-spots {
  color: var(--sage);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.event-empty {
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-style: italic;
  text-align: center;
}

/* =========================================================
   Bewertungen / Reviews
   ========================================================= */
.reviews {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 8vw, 116px) 0;
  background:
    radial-gradient(circle at 10% 12%, rgba(157, 45, 51, 0.05), transparent 22%),
    linear-gradient(180deg, #fff 0%, var(--cream-soft) 100%);
}

.reviews-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 44px;
}

.reviews-head .section-intro {
  margin: 0;
  max-width: 560px;
  text-align: left;
}

.rating-badge {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 16px;
  padding: 16px 24px;
  border: 1px solid rgba(111, 32, 39, 0.14);
  border-radius: 14px;
  background: rgba(255, 250, 244, 0.86);
  box-shadow: 0 14px 36px rgba(82, 53, 43, 0.08);
}

.rating-score {
  grid-row: span 2;
  color: var(--burgundy-dark);
  font-family: var(--serif);
  font-size: 52px;
  font-weight: 600;
  line-height: 0.9;
}

.rating-stars {
  color: var(--gold, #c9a24b);
  font-size: 19px;
  letter-spacing: 2px;
}

.rating-meta {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.review-grid {
  columns: 3;
  column-gap: 22px;
}

/* Eine einzelne echte Stimme statt fuenf erfundener (2026-09-04). In der
   dreispaltigen `.review-grid` haette die eine Karte im linken Drittel
   geklebt und der Rest waere leer geblieben — mittig und schmal wirkt eine
   Stimme wie eine Aussage, nicht wie ein halb gefuelltes Raster. */
.review-single {
  max-width: 720px;
  margin: 0 auto;
}

.review-more {
  margin: 20px 0 0;
  text-align: center;
  font-size: 14.5px;
}

.review-more a {
  color: var(--burgundy-dark);
  font-weight: 600;
  text-decoration: none;
}

.review-more a:hover {
  text-decoration: underline;
}

/* Das Badge ist seit 2026-09-04 ein Link aufs Google-Profil. */
a.rating-badge {
  text-decoration: none;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

a.rating-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(82, 53, 43, 0.13);
}

.review-card {
  position: relative;
  break-inside: avoid;
  margin: 0 0 22px;
  padding: 28px 26px 24px;
  border: 1px solid rgba(111, 32, 39, 0.12);
  border-radius: 16px;
  background: rgba(255, 250, 244, 0.92);
  box-shadow: 0 16px 40px rgba(82, 53, 43, 0.08);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 56px rgba(82, 53, 43, 0.14);
}

.review-feature {
  background:
    radial-gradient(circle at 88% 12%, rgba(102, 112, 82, 0.12), transparent 34%),
    linear-gradient(150deg, rgba(247, 239, 229, 0.96), rgba(243, 232, 220, 0.96));
  border-color: rgba(111, 32, 39, 0.18);
}

.quote-mark {
  position: absolute;
  top: 8px;
  right: 20px;
  color: rgba(157, 45, 51, 0.16);
  font-family: var(--serif);
  font-size: 64px;
  line-height: 1;
  pointer-events: none;
}

.review-card blockquote {
  margin: 0 0 20px;
}

.review-card blockquote p {
  margin: 0;
  color: #34261f;
  font-family: var(--serif);
  font-size: 19px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.45;
}

.review-feature blockquote p {
  font-size: 22px;
}

.review-card figcaption {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

.review-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--burgundy), var(--burgundy-dark));
  color: #fff8f1;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
}

.review-author {
  display: grid;
  line-height: 1.2;
}

.review-author strong {
  color: #2c211d;
  font-size: 15px;
  font-weight: 700;
}

.review-author small {
  color: var(--muted);
  font-size: 12.5px;
}

.review-stars {
  color: var(--gold, #c9a24b);
  font-size: 14px;
  letter-spacing: 1px;
}

/* Echte Stimmen von der alten WordPress-Seite (A11, 2026-09-10), siehe
   src/components/Testimonials.astro. Manche haben mehrere Absaetze, die
   ohne Abstand aneinanderkleben wuerden. */
.review-card blockquote p + p {
  margin-top: 0.6em;
}

/* Zwei Stimmen: zwei Spalten statt einer leeren dritten. Die Breakpoints
   weiter unten setzen `.review-grid` spaeter im Dokument und gelten weiter. */
.review-grid-2 {
  columns: 2;
  max-width: 960px;
  margin: 0 auto;
}

/* =========================================================
   Newsletter
   ========================================================= */
.newsletter {
  padding: clamp(60px, 7vw, 100px) 0;
  background: linear-gradient(180deg, var(--cream-soft) 0%, #fff 100%);
}

.newsletter-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  overflow: hidden;
  padding: clamp(36px, 5vw, 60px) clamp(28px, 5vw, 64px);
  border: 1px solid rgba(111, 32, 39, 0.12);
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 86%, rgba(102, 112, 82, 0.16), transparent 30%),
    linear-gradient(135deg, rgba(252, 244, 236, 0.96), rgba(244, 226, 224, 0.9));
  box-shadow: 0 28px 70px rgba(82, 53, 43, 0.12);
}

.newsletter-motif {
  position: absolute;
  top: -26px;
  left: -26px;
  width: 150px;
  color: rgba(157, 45, 51, 0.1);
  pointer-events: none;
}

.newsletter-motif svg {
  width: 100%;
}

.newsletter-motif path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.newsletter-copy {
  position: relative;
  z-index: 1;
}

.newsletter-copy h2 {
  margin-bottom: 14px;
  color: var(--burgundy-dark);
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 500;
  line-height: 1.04;
}

.newsletter-copy > p {
  max-width: 46ch;
  margin-bottom: 18px;
  color: #3c2f2a;
  font-size: 15.5px;
  line-height: 1.6;
}

.newsletter-benefits {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.newsletter-benefits li {
  position: relative;
  padding-left: 26px;
  color: #3c2f2a;
  font-size: 14.5px;
  font-weight: 600;
}

.newsletter-benefits li::before {
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: rgba(157, 45, 51, 0.12);
  color: var(--burgundy);
  font-size: 11px;
  font-weight: 700;
  content: "✓";
}

.newsletter-form {
  position: relative;
  z-index: 1;
}

.newsletter-field {
  display: flex;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(111, 32, 39, 0.18);
  border-radius: 999px;
  background: rgba(255, 252, 248, 0.94);
  box-shadow: inset 0 1px 3px rgba(82, 53, 43, 0.06);
}

.newsletter-field input {
  flex: 1;
  min-width: 0;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
}

.newsletter-field input:focus {
  outline: none;
}

.newsletter-field .button {
  min-width: 0;
  flex-shrink: 0;
  padding: 0 22px;
  border-radius: 999px;
}

.newsletter-note {
  margin: 14px 4px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.newsletter-note a {
  color: var(--burgundy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.newsletter-success {
  margin: 14px 4px 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(102, 112, 82, 0.14);
  color: #41502f;
  font-size: 14px;
  font-weight: 600;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  --footer-fg: rgba(247, 239, 229, 0.74);
  color: var(--footer-fg);
  background:
    radial-gradient(circle at 12% 0%, rgba(157, 45, 51, 0.28), transparent 30%),
    linear-gradient(170deg, #3a201f 0%, #281613 100%);
  font-size: 14.5px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: clamp(28px, 4vw, 56px);
  width: min(calc(100% - 48px), 1110px);
  margin: 0 auto;
  padding: clamp(54px, 6vw, 76px) 0 40px;
}

.brand-footer {
  color: #f7efe5;
}

.brand-footer .brand-mark {
  color: #e6b9a0;
}

.brand-footer strong {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
}

.footer-tagline {
  max-width: 34ch;
  margin: 16px 0 20px;
  color: var(--footer-fg);
  font-size: 14.5px;
  line-height: 1.6;
}

.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social a {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(247, 239, 229, 0.24);
  border-radius: 50%;
  color: #f7efe5;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.footer-social a:hover {
  background: rgba(247, 239, 229, 0.12);
  border-color: rgba(247, 239, 229, 0.5);
  transform: translateY(-2px);
}

.footer-social svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.footer-col h3 {
  margin: 0 0 16px;
  color: #f7efe5;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-col ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-col a {
  color: var(--footer-fg);
  transition: color 160ms ease;
}

.footer-col a:hover {
  color: #e6b9a0;
}

.footer-contact address {
  font-style: normal;
  line-height: 1.65;
}

.footer-contact address strong {
  color: #f7efe5;
}

.footer-todo {
  color: #d99a72;
  font-style: italic;
}

.footer-contact-links {
  margin: 14px 0 0;
}

.footer-contact-links a {
  color: #e6b9a0;
  text-underline-offset: 2px;
}

.footer-contact-links a:hover {
  text-decoration: underline;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  width: min(calc(100% - 48px), 1110px);
  margin: 0 auto;
  padding: 22px 0 30px;
  border-top: 1px solid rgba(247, 239, 229, 0.14);
}

.footer-seo {
  margin: 0;
  color: rgba(247, 239, 229, 0.5);
  font-size: 12.5px;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.footer-legal a {
  color: var(--footer-fg);
}

.footer-legal a:hover {
  color: #e6b9a0;
}

/* =========================================================
   Mobile navigation drawer
   ========================================================= */
@media (max-width: 960px) {
  .nav-toggle {
    display: block;
    position: relative;
    z-index: 70;
  }

  .main-nav {
    position: fixed;
    /* 76px = Hoehe der Kopfleiste (.site-header). Mitwachsen lassen, wenn sich
       die Leiste aendert -- sonst ueberlappt der Drawer den Header oder es
       bleibt ein Spalt. */
    inset: 76px 0 0 auto;
    z-index: 65;
    width: min(86vw, 360px);
    padding: 18px 22px 32px;
    overflow-y: auto;
    background: rgba(251, 247, 241, 0.99);
    border-left: 1px solid rgba(111, 32, 39, 0.14);
    box-shadow: -24px 0 60px rgba(82, 53, 43, 0.18);
    transform: translateX(102%);
    visibility: hidden;
    transition: transform 280ms ease, visibility 280ms;
  }

  body.nav-open .main-nav {
    transform: translateX(0);
    visibility: visible;
  }

  /* `backdrop-filter` am Header macht diesen zum Bezugsrahmen fuer alles, was
     darin `position: fixed` ist -- eine Eigenheit der Spezifikation, die man
     leicht uebersieht. Der Drawer liegt im <header>, also mass er `inset: 64px
     0 0 auto` nicht am Fenster, sondern am 64px hohen Header: heraus kam ein
     50px hoher Streifen, in dem nur "Yoga" zu sehen war (der Rest war da,
     scrollHeight 792px, nur abgeschnitten).

     Solange das Menue offen ist, braucht der Header die Weichzeichnung nicht --
     hinter ihm liegt dann der abgedunkelte Backdrop, zu sehen ist davon nichts.
     Ohne den Filter positioniert sich der Drawer wieder am Fenster.

     `nav-closing` haelt den Filter waehrend des Herausfahrens weiter aus. Ueber
     eine verzoegerte Transition ging das nicht: `backdrop-filter` springt von
     `none` sofort auf den Wert, die Verzoegerung wird ignoriert -- der Drawer
     klappte mitten in der Bewegung auf 50px zusammen. Die Klasse setzt main.js
     und nimmt sie nach der Animation wieder weg. */
  body.nav-open .site-header,
  body.nav-closing .site-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body.nav-open {
    overflow: hidden;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    white-space: normal;
  }

  .nav-list > li > a {
    padding: 13px 6px;
    font-size: 19px;
    border-bottom: 1px solid rgba(111, 32, 39, 0.1);
  }

  .caret {
    display: none;
  }

  .dropdown {
    position: static;
    min-width: 0;
    margin: 0 0 8px;
    padding: 4px 0 8px 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .dropdown a {
    padding: 8px 12px;
    font-size: 15px;
    color: var(--muted);
  }

  .nav-cta {
    display: inline-block;
    margin-top: 12px;
    text-align: center;
  }

  /* Der Backdrop haengt direkt am <body>, der Drawer aber im <header>. Der
     Header ist `position: sticky` mit `z-index: 50` und bildet damit einen
     eigenen Stapelkontext: Das `z-index: 65` des Drawers zaehlt nur innerhalb
     des Headers, nach aussen gilt die 50 des Headers. Mit `z-index: 60` lag
     der Backdrop deshalb UEBER dem kompletten Header samt Drawer -- jeder Tipp
     auf einen Menuepunkt traf den Backdrop und schloss das Menue, statt den
     Link zu oeffnen (elementFromPoint lieferte DIV.nav-backdrop).
     Der Backdrop muss unter dem Header liegen: 40 < 50. */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(40, 22, 19, 0.32);
    opacity: 0;
    visibility: hidden;
    transition: opacity 280ms ease, visibility 280ms;
  }

  body.nav-open .nav-backdrop {
    opacity: 1;
    visibility: visible;
  }
}

/* =========================================================
   Responsive — new sections
   ========================================================= */
@media (max-width: 920px) {
  .review-grid {
    columns: 2;
  }
}

@media (max-width: 880px) {
  .event-spotlight {
    grid-template-columns: 1fr;
  }

  .spotlight-media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .reviews-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .reviews-head .section-intro {
    text-align: left;
  }

  .review-grid {
    columns: 1;
  }

  .review-feature blockquote p {
    font-size: 20px;
  }

  .newsletter-shell {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px 28px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .section-intro h2 {
    font-size: 30px;
  }

  .event-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .event-tile.is-wide {
    grid-column: auto;
  }

  .countdown {
    width: 100%;
    justify-content: space-between;
  }

  .newsletter-field {
    flex-direction: column;
    border-radius: 18px;
  }

  .newsletter-field input {
    padding: 10px 14px;
  }

  .newsletter-field .button {
    padding: 12px 22px;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================================
   Landingpages (Yoga / Tantra / Frau Sein)
   ========================================================= */
/* Die Deckelung bei 480px war der Grund, warum die Heroes auf breiten Monitoren
   zum Schlitz wurden: Bei 1850px Fensterbreite blieb vom Bild nur noch ein Band
   von 39% seiner Hoehe uebrig — der Rest war weggeschnitten. Genau das sah auf
   einem breiteren Fenster „anders aus" als auf einem schmalen.
   620px lassen dem Motiv Luft, ohne dass der Hero die erste Bildschirmseite
   auffrisst. */
.hero-compact {
  min-height: clamp(360px, 40vw, 620px);
}

.hero-compact .hero-inner {
  min-height: clamp(360px, 40vw, 620px);
  padding: 44px 0;
}

.hero-compact .hero-copy {
  width: min(100%, 560px);
}

.hero-compact .hero-copy h1 {
  font-size: clamp(42px, 5vw, 66px);
  line-height: 0.96;
}

.breadcrumb {
  margin-bottom: 16px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
}

.breadcrumb a:hover {
  color: var(--burgundy);
}

.breadcrumb span {
  margin: 0 7px;
  opacity: 0.5;
}

/* Aktiver Menüpunkt */
.nav-list > li > a[aria-current="page"] {
  color: var(--burgundy);
}

.page-intro {
  padding: clamp(56px, 6vw, 88px) 0 clamp(20px, 3vw, 36px);
  background: linear-gradient(180deg, #fff 0%, var(--cream-soft) 100%);
}

.page-intro .section-intro {
  margin-bottom: 28px;
}

.pill-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.pill-nav a {
  padding: 9px 20px;
  border: 1px solid rgba(111, 32, 39, 0.2);
  border-radius: 999px;
  background: rgba(255, 250, 244, 0.7);
  color: var(--burgundy-dark);
  font-size: 13px;
  font-weight: 600;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.pill-nav a:hover {
  border-color: var(--burgundy);
  background: var(--burgundy);
  color: #fffaf4;
  transform: translateY(-1px);
}

.features {
  padding: clamp(40px, 5vw, 64px) 0 clamp(64px, 7vw, 104px);
  background: linear-gradient(180deg, var(--cream-soft) 0%, #fff 100%);
}

.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 68px);
  padding: clamp(36px, 5vw, 60px) 0;
  scroll-margin-top: 92px;
}

.feature-row + .feature-row {
  border-top: 1px solid var(--line);
}

.feature-row:nth-child(even) .feature-media {
  order: 2;
}

.feature-media {
  position: relative;
}

.feature-media img {
  width: 100%;
  height: clamp(280px, 32vw, 420px);
  object-fit: cover;
  object-position: center 35%;
  border-radius: 18px;
  box-shadow: 0 26px 64px rgba(82, 53, 43, 0.16);
}

.feature-media::after {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(0deg, rgba(36, 26, 23, 0.14), transparent 42%);
  content: "";
  pointer-events: none;
}

.feature-text .eyebrow {
  margin-bottom: 8px;
}

.feature-text h2 {
  margin-bottom: 16px;
  color: var(--burgundy-dark);
  font-family: var(--serif);
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 500;
  line-height: 1.02;
}

.feature-text > p {
  margin-bottom: 18px;
  color: #34281f;
  font-size: 16px;
  line-height: 1.62;
}

.feature-list {
  display: grid;
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.feature-list li {
  position: relative;
  padding-left: 28px;
  color: #34281f;
  font-size: 15px;
  line-height: 1.5;
}

.feature-list li::before {
  position: absolute;
  left: 0;
  top: 2px;
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 50%;
  background: rgba(157, 45, 51, 0.1);
  color: var(--burgundy);
  font-size: 11px;
  font-weight: 700;
  content: "✦";
}

.feature-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 22px;
}

.feature-meta span {
  padding: 7px 14px;
  border: 1px solid rgba(111, 32, 39, 0.14);
  border-radius: 999px;
  background: rgba(255, 250, 244, 0.7);
  color: var(--burgundy-dark);
  font-size: 12.5px;
  font-weight: 600;
}

/* Page-CTA (wiederverwendet Kontakt-Look, eigenständig einsetzbar) */
.page-cta {
  padding: clamp(56px, 6vw, 88px) 0;
  background:
    radial-gradient(circle at 88% 14%, rgba(102, 112, 82, 0.14), transparent 30%),
    linear-gradient(180deg, #fff 0%, var(--cream-soft) 100%);
}

.page-cta-card {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: clamp(40px, 5vw, 68px) clamp(28px, 5vw, 64px);
  border: 1px solid rgba(111, 32, 39, 0.12);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(252, 244, 236, 0.96), rgba(244, 226, 224, 0.92));
  box-shadow: 0 28px 70px rgba(82, 53, 43, 0.12);
  text-align: center;
}

/* Die Abschluss-Einladung jeder Unterseite („Komm zur Ruhe", „Lass dich tragen").
   max-width in ch bleibt, wird aber grosszuegiger: Amsterdam laeuft schmaler als
   der Serif, 18ch haetten sonst zu frueh umgebrochen. */
.page-cta-card h2 {
  max-width: 22ch;
  /* In em, nicht px: die Groesse ist ein clamp() und der Schwung waechst mit.
     Bemessen am tiefsten Fall („Komm …" - das K reicht am weitesten hinunter,
     rund 0,4em unter die Zeilenbox), plus Luft. */
  margin: 0 0 0.6em;
  color: var(--burgundy-dark);
  font-family: var(--script);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 400;
  line-height: 1.2;
}

.page-cta-card p {
  max-width: 52ch;
  margin: 0;
  color: #3c2f2a;
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 800px) {
  .feature-row,
  .feature-row:nth-child(even) .feature-media {
    grid-template-columns: 1fr;
    order: 0;
  }

  .feature-media {
    order: -1;
  }
}

/* Lotus-Akzent im Page-CTA (auf hellem Grund sichtbar) */
.page-cta-card .lotus svg {
  width: 84px;
  color: rgba(157, 45, 51, 0.2);
}

/* =========================================================
   Rechtsseiten (Impressum / Datenschutz)
   ========================================================= */
.legal {
  padding: clamp(48px, 6vw, 84px) 0 clamp(56px, 7vw, 96px);
  background: linear-gradient(180deg, #fff 0%, var(--cream-soft) 100%);
}

.legal .section-shell {
  width: min(calc(100% - 48px), 820px);
}

.legal .breadcrumb {
  margin-bottom: 18px;
}

.legal h1 {
  margin: 0 0 10px;
  color: var(--burgundy-dark);
  font-family: var(--serif);
  font-size: clamp(36px, 4.4vw, 56px);
  font-weight: 500;
  line-height: 1.02;
}

.legal-lead {
  margin: 0 0 36px;
  color: var(--muted);
  font-size: 16px;
}

.legal h2 {
  margin: 34px 0 12px;
  color: var(--burgundy-dark);
  font-family: var(--serif);
  font-size: clamp(23px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.1;
}

.legal h3 {
  margin: 22px 0 8px;
  color: #2c211d;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
}

.legal p,
.legal li {
  color: #34281f;
  font-size: 15.5px;
  line-height: 1.7;
}

.legal p {
  margin: 0 0 14px;
}

.legal ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.legal a {
  color: var(--burgundy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal address {
  margin: 0 0 14px;
  font-style: normal;
  line-height: 1.7;
}

.legal-todo {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 6px;
  background: rgba(217, 154, 114, 0.22);
  color: #9a5a2a;
  font-style: italic;
  font-weight: 600;
}

.legal-note {
  margin: 36px 0 0;
  padding: 16px 20px;
  border-left: 3px solid var(--burgundy);
  border-radius: 0 10px 10px 0;
  background: rgba(157, 45, 51, 0.06);
  color: #4a3a34;
  font-size: 14px;
  line-height: 1.6;
}

/* =========================================================
   Angebots-Detailseiten (ein Menü-Unterpunkt = eine Seite)
   ========================================================= */

/* --- Intro mit klebriger Info-Karte (modernes Produktseiten-Layout) --- */
.detail-intro {
  padding: clamp(48px, 6vw, 88px) 0 clamp(24px, 3vw, 44px);
  background: linear-gradient(180deg, #fff 0%, var(--cream-soft) 100%);
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 30vw, 360px);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.detail-main > .eyebrow {
  margin-bottom: 8px;
}

.detail-main > h2 {
  margin: 0 0 22px;
  color: var(--burgundy-dark);
  font-family: var(--serif);
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 500;
  line-height: 1.02;
}

.detail-lead {
  margin: 0 0 18px;
  color: #34281f;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.7;
}

.detail-lead:first-of-type {
  color: #2c211d;
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.6;
}

/* Wie .journey-quote p, nur eine Stufe kleiner. Unter ~26px wird Amsterdam
   schwer lesbar, deshalb faengt die Skala hoeher an als beim Serif zuvor. */
.detail-quote {
  margin: 28px 0 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--burgundy);
  color: var(--burgundy-dark);
  font-family: var(--script);
  font-size: clamp(26px, 2.8vw, 34px);
  font-style: normal;
  line-height: 1.35;
}

.detail-aside {
  position: sticky;
  top: 88px;
}

.detail-card {
  display: grid;
  gap: 14px;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid rgba(111, 32, 39, 0.14);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(252, 244, 236, 0.96), rgba(244, 226, 224, 0.9));
  box-shadow: 0 24px 60px rgba(82, 53, 43, 0.13);
}

.detail-price {
  margin: 0;
  color: var(--burgundy-dark);
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 600;
  line-height: 1;
}

.detail-facts {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(111, 32, 39, 0.12);
}

.detail-facts li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(111, 32, 39, 0.12);
}

.detail-facts .fact-k {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.detail-facts .fact-v {
  color: #2c211d;
  font-size: 13.5px;
  font-weight: 700;
  text-align: right;
}

.detail-card-cta {
  width: 100%;
  margin-top: 4px;
}

.detail-card-link {
  color: var(--burgundy-dark);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.detail-card-link:hover {
  color: var(--burgundy);
}

/* --- Highlights / „Das erwartet dich" --- */
.detail-highlights {
  padding: clamp(40px, 5vw, 76px) 0;
  background: var(--cream-soft);
}

.highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}

.highlight-card {
  position: relative;
  padding: clamp(22px, 2.4vw, 30px);
  padding-top: 34px;
  border: 1px solid rgba(111, 32, 39, 0.12);
  border-radius: 16px;
  background: rgba(255, 250, 244, 0.7);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.highlight-card::before {
  position: absolute;
  top: 22px;
  left: clamp(22px, 2.4vw, 30px);
  width: 26px;
  height: 2px;
  background: var(--burgundy);
  content: "";
}

.highlight-card:hover {
  transform: translateY(-3px);
  border-color: rgba(111, 32, 39, 0.22);
  box-shadow: 0 20px 44px rgba(82, 53, 43, 0.12);
}

/* Karten mit Illustration. Das Bild laeuft randlos bis an die Kartenkante:
   ein eingerueckter Kasten waere als zweites Rechteck im Rechteck sichtbar,
   randlos verschwindet die Kante. */
/* Die Polsterung wandert von der Karte auf Text und Bild. Erster Versuch war
   ein negativer Rand am Bild — der scheiterte an `img { max-width: 100% }`
   weiter oben: die Breite wurde gekappt, das Bild lief aus der Karte. */
.highlight-card-media {
  overflow: hidden;
  padding: 0 0 clamp(22px, 2.4vw, 30px);
}

.highlight-card-media h3,
.highlight-card-media p {
  padding-right: clamp(22px, 2.4vw, 30px);
  padding-left: clamp(22px, 2.4vw, 30px);
}

/* Der kleine Burgunderstrich markiert sonst den Kartenanfang. Hier uebernimmt
   das die Illustration — beides waere doppelt. */
.highlight-card-media::before {
  content: none;
}

.highlight-media {
  display: block;
  width: 100%;
  /* `height: auto` ist noetig, damit `aspect-ratio` die Hoehe bestimmt. Ohne das
     zieht die quadratische Vorlage (1254×1254) die Karte in die Laenge. */
  height: auto;
  aspect-ratio: 5 / 4;
  margin-bottom: clamp(14px, 1.6vw, 20px);
  object-fit: cover;
  /* Der Cremehintergrund der Zeichnung ist minimal heller als die Karte.
     Multiply legt ihn deckungsgleich darueber, statt ein helles Feld zu setzen. */
  mix-blend-mode: multiply;
}

.highlight-card h3 {
  margin: 14px 0 8px;
  color: var(--burgundy-dark);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
}

.highlight-card p {
  margin: 0;
  color: #34281f;
  font-size: 14.5px;
  line-height: 1.55;
}

/* --- Zielgruppen-Karten (Frauen · Männer · Paare) --- */
.detail-audiences {
  padding: clamp(44px, 5vw, 80px) 0;
  background: linear-gradient(180deg, #fff 0%, var(--cream-soft) 100%);
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 20px;
}

.audience-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 30px 28px;
  border: 1px solid rgba(111, 32, 39, 0.14);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 250, 244, 0.94), rgba(243, 232, 220, 0.66));
  box-shadow: 0 18px 42px rgba(82, 53, 43, 0.08);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.audience-card::before {
  width: 30px;
  height: 2px;
  background: var(--burgundy);
  content: "";
}

.audience-card:hover {
  transform: translateY(-4px);
  border-color: rgba(111, 32, 39, 0.24);
  box-shadow: 0 28px 60px rgba(82, 53, 43, 0.15);
}

.audience-card h3 {
  margin: 0;
  color: var(--burgundy-dark);
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.04;
}

.audience-card > p {
  margin: 0;
  color: #34281f;
  font-size: 15px;
  line-height: 1.6;
}

.audience-points {
  display: grid;
  gap: 7px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.audience-points li {
  position: relative;
  padding-left: 20px;
  color: #4a3a34;
  font-size: 13.5px;
  line-height: 1.45;
}

.audience-points li::before {
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--burgundy);
  font-size: 10px;
  content: "✦";
}

.audience-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid rgba(111, 32, 39, 0.12);
}

.audience-meta {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.audience-price {
  color: var(--burgundy-dark);
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 600;
  line-height: 1;
}

.audience-cta {
  width: 100%;
  margin-top: 4px;
}

/* --- Ablauf-Schritte --- */
.detail-steps {
  padding: clamp(44px, 5vw, 80px) 0;
  background: linear-gradient(180deg, #fff 0%, var(--cream-soft) 100%);
}

.steps {
  display: grid;
  gap: 14px;
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 20px 22px;
  border: 1px solid rgba(111, 32, 39, 0.12);
  border-radius: 14px;
  background: rgba(255, 250, 244, 0.66);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.step:hover {
  transform: translateX(3px);
  box-shadow: 0 16px 38px rgba(82, 53, 43, 0.1);
}

.step-num {
  color: var(--burgundy);
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.step-text h3 {
  margin: 0 0 5px;
  color: var(--burgundy-dark);
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.1;
}

.step-text p {
  margin: 0;
  color: #34281f;
  font-size: 15px;
  line-height: 1.6;
}

/* --- Kleine Fußnote unter Karten (Zielgruppen, Tantra-Übersicht) --- */
.price-foot {
  max-width: 760px;
  margin: 22px auto 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
  text-align: center;
}

/* --- FAQ (native Accordion, ohne JS) --- */
.detail-faq {
  padding: clamp(44px, 5vw, 80px) 0;
  background: linear-gradient(180deg, var(--cream-soft) 0%, #fff 100%);
}

.faq {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.faq-item {
  border: 1px solid rgba(111, 32, 39, 0.14);
  border-radius: 14px;
  background: rgba(255, 250, 244, 0.72);
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.faq-item[open] {
  border-color: rgba(111, 32, 39, 0.24);
  box-shadow: 0 16px 38px rgba(82, 53, 43, 0.1);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  color: var(--burgundy-dark);
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 21px);
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.faq-icon::before,
.faq-icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: var(--burgundy);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 220ms ease, opacity 220ms ease;
  content: "";
}

.faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] .faq-icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq-body {
  padding: 0 22px 20px;
}

.faq-body p {
  margin: 0;
  color: #34281f;
  font-size: 15px;
  line-height: 1.65;
}

/* --- Verwandte Angebote / klickbare Pfad-Karten (auch auf Übersichten) --- */
.detail-related {
  padding: clamp(48px, 6vw, 88px) 0;
  background: linear-gradient(180deg, #fff 0%, var(--cream-soft) 100%);
}

.path-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 24px;
}

.path-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(111, 32, 39, 0.12);
  border-radius: 18px;
  background: rgba(255, 250, 244, 0.78);
  box-shadow: 0 18px 42px rgba(82, 53, 43, 0.09);
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

.path-card:hover,
.path-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(111, 32, 39, 0.22);
  box-shadow: 0 30px 64px rgba(82, 53, 43, 0.17);
  outline: none;
}

.path-media {
  display: block;
  overflow: hidden;
}

/* Nicht mittig zuschneiden: die Kachel ist 208px hoch, ein Hochformat zeigt darin
   nur gut 40% seiner Hoehe. Mittig lag das Fenster auf dem Oberkoerper und schnitt
   die Koepfe ab (aufgefallen an den Namaste-Paarbildern). Gesichter sitzen in der
   Portraetfotografie fast immer im oberen Drittel -- 35% trifft sie, und fuer Raum-
   und Landschaftsmotive aendert es kaum etwas. */
.path-media img {
  width: 100%;
  height: 208px;
  object-fit: cover;
  object-position: center 35%;
  filter: saturate(0.96);
  transition: transform 700ms ease;
}

.path-card:hover .path-media img,
.path-card:focus-visible .path-media img {
  transform: scale(1.05);
}

.path-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 9px;
  padding: 22px 24px 24px;
}

.path-title {
  color: var(--burgundy-dark);
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.04;
}

.path-teaser {
  flex: 1;
  color: #34281f;
  font-size: 14.5px;
  line-height: 1.55;
}

.path-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: var(--burgundy);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.path-more span {
  transition: transform 220ms ease;
}

.path-card:hover .path-more span,
.path-card:focus-visible .path-more span {
  transform: translateX(4px);
}

.overview-paths {
  padding: clamp(8px, 2vw, 20px) 0 clamp(56px, 7vw, 100px);
  background: linear-gradient(180deg, var(--cream-soft) 0%, #fff 100%);
}

/* --- Responsiv --- */
@media (max-width: 880px) {
  .detail-layout {
    grid-template-columns: 1fr;
  }
  .detail-aside {
    position: static;
  }
  .detail-card {
    max-width: 460px;
  }
}

@media (max-width: 560px) {
  .step {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ============================================================
   Veranstaltungsseite (/veranstaltungen.html)
   Ergaenzt den bestehenden Events-Block. Karten, Spotlight und
   Filter werden von dort wiederverwendet — hier steht nur, was
   ausschliesslich auf der eigenen Seite vorkommt.
   ============================================================ */

/* Leerzustand: keine kommenden Termine. Tritt bei Lydia regelmaessig auf,
   weil sie in Wellen plant — darf deshalb nicht nach Fehler aussehen. */
.event-none {
  text-align: center;
  padding: clamp(32px, 6vw, 56px) clamp(20px, 5vw, 48px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  margin-bottom: 32px;
}

.event-none h3 {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  margin: 0 0 10px;
  color: var(--burgundy);
}

.event-none p {
  max-width: 52ch;
  margin: 0 auto 22px;
  color: var(--muted);
}

.event-none .event-cta {
  justify-content: center;
}

/* Link von der Startseiten-Vorschau zur vollstaendigen Liste */
.events-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-top: clamp(28px, 4vw, 40px);
}

.events-more-note {
  margin: 0;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
}

/* Archiv vergangener Termine — eingeklappt, damit die Seite nicht tot wirkt,
   aber auffindbar: zeigt, dass regelmaessig etwas stattfindet. */
.event-archive {
  margin-top: clamp(36px, 5vw, 56px);
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

.event-archive > summary {
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--muted);
  padding: 10px 4px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease;
}

.event-archive > summary::-webkit-details-marker { display: none; }

.event-archive > summary::before {
  content: "▸";
  transition: transform 0.2s ease;
  display: inline-block;
}

.event-archive[open] > summary::before { transform: rotate(90deg); }
.event-archive > summary:hover { color: var(--burgundy); }

.event-archive > summary:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 3px;
  border-radius: 4px;
}

.archive-lead {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 8px 4px 18px;
  max-width: 60ch;
}

.archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.archive-item {
  display: grid;
  grid-template-columns: minmax(150px, auto) 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}

.archive-item:last-child { border-bottom: none; }

.archive-when {
  font-size: 0.85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.archive-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ink);
}

@media (max-width: 640px) {
  .archive-item {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 16px 4px;
  }
}

/* ===== Terminbuchung (Apex Booking) =====
   Platz für das eingebettete Widget auf /termin.html. Das Widget ist ein iframe:
   fremdes CSS erreicht es nicht, unseres also auch nicht — hier wird nur der
   Rahmen gesetzt, die Farben gehen über data-Attribute am Skript-Tag (siehe
   bookingTheme in src/data/booking.js).
   min-height verhindert, dass die Seite beim Nachladen der Höhe springt. */
.booking-embed {
  margin-top: 28px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--cream-soft);
  padding: clamp(8px, 2vw, 18px);
  min-height: 620px;
}

.booking-embed iframe {
  border-radius: 10px;
}

/* =========================================================
   Über mich (/ueber-mich.html)
   Die Seite borgt sich fast alles: Hero, detail-layout mit klebriger
   Karte, feature-row, path-card, page-cta. Wirklich neu sind nur die
   Kapitelabsaetze, die Ausbildungs-Chips und die Herzensaufgaben-Karte.
   ========================================================= */

/* Lydias neuer Text (09/2026) traegt jede Station in genau einem Absatz.
   Ohne Ueberschrift daneben stuende dieser eine Absatz mit 16 px allein
   neben einem 420 px hohen Bild — deshalb eine Stufe groesser und luftiger,
   wie der Fliesstext der Detailseiten.
   Selektor bewusst zweistufig: `.feature-text > p` ist spezifischer als eine
   einzelne Klasse und haette den Absatz sonst zurueckgesetzt. */
.feature-text > .about-chapter {
  margin-bottom: 0;
  color: #34281f;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.68;
}

.about-creds {
  padding: clamp(48px, 6vw, 84px) 0;
  background: var(--cream-soft);
}

/* Zehn Ausbildungen als Chips statt als Fließtext-Aufzählung: sie sind
   scanbar und tragen für sich, ohne einen Absatz vorzutäuschen. */
.cred-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cred-list li {
  padding: 9px 18px;
  border: 1px solid rgba(111, 32, 39, 0.16);
  border-radius: 999px;
  background: rgba(255, 250, 244, 0.75);
  color: var(--burgundy-dark);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
}

/* Der Schlussgedanke ihres Textes („Heute ist es meine Herzensaufgabe …")
   traegt die Seite und soll nicht als vierter Fliesstextabsatz untergehen.
   Karte wie .journey-quote, aber im Serif statt in der Schreibschrift: der
   Satz ist zu lang, Amsterdam wuerde ihn ueber vier Zeilen zerfasern. */
.about-mission {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(30px, 4vw, 52px) clamp(24px, 4vw, 56px);
  border: 1px solid rgba(111, 32, 39, 0.1);
  border-radius: 20px;
  background:
    radial-gradient(circle at 90% 15%, rgba(102, 112, 82, 0.13), transparent 30%),
    linear-gradient(90deg, rgba(247, 239, 229, 0.98), rgba(251, 247, 241, 0.94)),
    var(--cream);
  box-shadow: 0 18px 60px rgba(82, 53, 43, 0.08);
  text-align: center;
}

.about-mission-lead {
  margin: 0 0 18px;
  color: var(--burgundy-dark);
  font-family: var(--serif);
  font-size: clamp(20px, 2.1vw, 27px);
  font-weight: 500;
  line-height: 1.42;
}

.about-mission-note {
  margin: 0 auto 26px;
  max-width: 560px;
  color: #34281f;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.7;
}

/* =========================================================
   Videos (selbst gehostet, ohne YouTube/Vimeo)
   Aufbau: .video-band (Abschnitt) → .video-feature (Erklaervideo neben Text)
   bzw. .video-duo (zwei Einblick-Karten) → .video-figure (Rahmen + Poster).
   ========================================================= */

.video-band {
  padding: clamp(48px, 6vw, 88px) 0;
  background: linear-gradient(180deg, var(--cream-soft) 0%, #fff 100%);
}

/* Zweiter Video-Abschnitt auf derselben Seite: der Verlauf lief sonst zweimal
   in die gleiche Richtung und die Naht zwischen den Abschnitten war sichtbar. */
.video-band-alt {
  background: linear-gradient(180deg, #fff 0%, var(--cream-soft) 100%);
}

.video-figure {
  margin: 0;
}

.video-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--video-ratio, 9 / 16);
  border: 1px solid rgba(111, 32, 39, 0.16);
  border-radius: 20px;
  background: #1b1412;
  box-shadow: 0 22px 52px rgba(82, 53, 43, 0.16);
}

.video-el {
  width: 100%;
  height: 100%;
  background: #1b1412;
  object-fit: cover;
}

/* Kleine Plakette statt eines eigenen Play-Knopfes: die Browser zeichnen ueber
   ein ungestartetes Video selbst einen grossen Play-Kreis, ein zweiter saesse
   dort doppelt. Sie nennt die Laufzeit und verschwindet beim Abspielen. */
.video-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px 6px 11px;
  border-radius: 999px;
  background: rgba(27, 20, 18, 0.6);
  color: #fbf7f1;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  pointer-events: none;
  transition: opacity 220ms ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.video-figure.is-playing .video-badge {
  opacity: 0;
}

.video-fallback {
  margin: 0;
  padding: 20px;
  color: #fbf7f1;
  font-size: 14px;
}

.video-fallback a {
  text-decoration: underline;
}

.video-caption {
  display: grid;
  gap: 5px;
  margin: 14px 2px 0;
}

.video-caption-title {
  color: var(--burgundy-dark);
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
}

.video-caption-text {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

/* --- Erklaervideo neben Text --- */
.video-feature {
  display: grid;
  grid-template-columns: minmax(240px, 330px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
}

.video-feature-text h2 {
  margin: 0 0 16px;
  color: var(--burgundy-dark);
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 500;
  line-height: 1.04;
}

/* :not(.video-link-row) ist Absicht: `.video-feature-text p` ist spezifischer
   als `.video-link-row` und hat dessen margin-top vorher stillschweigend
   plattgemacht — der Link klebte an der Liste darueber. Hier ausnehmen statt
   dort die Spezifitaet hochschrauben. */
.video-feature-text p:not(.video-link-row) {
  margin: 0 0 14px;
  color: #34281f;
  font-size: 15.5px;
  line-height: 1.65;
}

.video-points {
  display: grid;
  gap: 9px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.video-points li {
  position: relative;
  padding-left: 22px;
  color: #4a3a34;
  font-size: 14.5px;
  line-height: 1.5;
}

.video-points li::before {
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--burgundy);
  font-size: 10px;
  content: "✦";
}

/* --- Kleiner Zusatzclip, mittig unter dem Hauptvideo --- */
.video-strip {
  width: min(100%, 520px);
  margin: clamp(32px, 4vw, 56px) auto 0;
}

.video-strip .video-caption {
  text-align: center;
}

/* --- Zwei Einblick-Karten nebeneinander --- */
/* 500px als Schwelle, nicht 320: eine Karte stellt Video und Text nebeneinander.
   Bei zwei Spalten unter ~1030px Gesamtbreite blieben neben dem 210px breiten
   Hochkantvideo nur noch gut 100px Textspalte uebrig. Lieber untereinander,
   dann hat der Text Platz. */
.video-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: clamp(20px, 3vw, 30px);
}

.video-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 26px 30px;
  border: 1px solid rgba(111, 32, 39, 0.14);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 250, 244, 0.94), rgba(243, 232, 220, 0.66));
  box-shadow: 0 18px 42px rgba(82, 53, 43, 0.08);
}

.video-card-inner {
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  align-items: start;
  gap: 22px;
}

.video-card h3 {
  margin: 0 0 10px;
  color: var(--burgundy-dark);
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.04;
}

.video-card p {
  margin: 0;
  color: #34281f;
  font-size: 15px;
  line-height: 1.6;
}

.video-card .video-points {
  margin-top: 14px;
}

.video-card-foot {
  margin-top: auto;
  padding-top: 4px;
}

.video-link-row {
  margin: 18px 0 0;
}

/* Der Telegram-Kanal ist der einzige Ort, an dem man die Lektionen taeglich
   hoeren kann — als Textlink direkt unter dem Absatz ging er unter. Als Pille
   mit deutlichem Abstand liest er sich als eigenes Angebot, nicht als Fussnote. */
.video-link-row-button {
  margin-top: 30px;
}

.button-channel {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 46px;
  padding: 0 22px 0 16px;
  border: 1px solid rgba(111, 32, 39, 0.26);
  border-radius: 999px;
  background: rgba(255, 250, 244, 0.95);
  box-shadow: 0 10px 24px rgba(82, 53, 43, 0.1);
  color: var(--burgundy-dark);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.button-channel:hover,
.button-channel:focus-visible {
  border-color: var(--burgundy);
  box-shadow: 0 16px 34px rgba(82, 53, 43, 0.17);
  transform: translateY(-1px);
}

/* Das Zeichen traegt die Wiedererkennung in Telegram-Blau, der Knopf bleibt in
   der Palette der Seite — ein komplett blauer Knopf waere ein Fremdkoerper.
   Weil das Logo schon „Telegram“ sagt, nennt die Beschriftung nur den Kanal. */
.icon-telegram {
  flex: none;
}

/* Falls die Beschriftung auf sehr schmalen Schirmen doch zweizeilig wird:
   linksbuendig neben dem Zeichen statt zentriert — zentriert saehe es aus, als
   haette der Knopf zwei Mitten. */
.button-channel > span {
  text-align: left;
  line-height: 1.25;
}

.video-link {
  color: var(--burgundy);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.video-link:hover {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .video-feature {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .video-feature .video-figure {
    width: min(100%, 320px);
  }

  .video-feature .video-caption,
  .video-points li {
    text-align: left;
  }
}

/* Unter dieser Breite bleibt neben einem 210px breiten Hochkant-Video keine
   lesbare Textspalte mehr uebrig — dann lieber untereinander. */
@media (max-width: 620px) {
  .video-card {
    padding: 22px 20px 26px;
  }

  .video-card-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .video-card .video-figure {
    width: min(100%, 280px);
    margin: 0 auto;
  }
}

/* =========================================================
   Kontaktformular (/kontakt.html, seit 10.09.2026)
   Borgt sich detail-layout und detail-card; neu sind nur die Felder.
   Die Eingabefelder folgen dem Newsletter-Feld (Cremeweiss, feine
   Burgunder-Kante), nur eckiger — ein Textfeld mit 999px-Radius saehe
   aus wie ein Suchschlitz.
   ========================================================= */
.contact-form {
  position: relative;
  display: grid;
  gap: 18px;
  margin-top: 8px;
}

.contact-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.contact-field {
  display: grid;
  gap: 7px;
}

.contact-field label {
  color: var(--burgundy-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.contact-optional {
  color: var(--muted);
  font-weight: 500;
}

.contact-req {
  color: var(--burgundy);
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid rgba(111, 32, 39, 0.22);
  border-radius: 12px;
  background: rgba(255, 252, 248, 0.94);
  box-shadow: inset 0 1px 3px rgba(82, 53, 43, 0.06);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.contact-field textarea {
  min-height: 180px;
  resize: vertical;
}

.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--burgundy);
  box-shadow: 0 0 0 3px rgba(157, 45, 51, 0.14);
}

/* Honeypot: aus dem sichtbaren Fluss, nicht display:none — manche Bots
   ueberspringen unsichtbare Felder, aber nicht solche ausserhalb des Fensters. */
.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: #34281f;
  font-size: 13.5px;
  line-height: 1.55;
  cursor: pointer;
}

.contact-consent input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--burgundy);
  cursor: pointer;
}

.contact-consent a {
  color: var(--burgundy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Vorbelegtes Anliegen (?thema=…): sichtbar, aber nicht editierbar — das
   Thema steht im Betreff, die Nachricht darunter ist frei. */
.contact-topic {
  margin: 0;
  padding: 12px 16px;
  border-left: 3px solid var(--burgundy);
  border-radius: 0 12px 12px 0;
  background: rgba(157, 45, 51, 0.07);
  color: var(--burgundy-dark);
  font-size: 14px;
  line-height: 1.5;
}

.contact-error {
  margin: 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(157, 45, 51, 0.1);
  color: var(--burgundy-dark);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

.contact-actions .button {
  min-height: 46px;
  cursor: pointer;
}

.contact-actions .button:disabled {
  opacity: 0.65;
  cursor: progress;
  transform: none;
}

.contact-required {
  color: var(--muted);
  font-size: 12px;
}

/* Erfolgsmeldung ersetzt das Formular — Salbei wie die Newsletter-Bestaetigung. */
.contact-success {
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid rgba(102, 112, 82, 0.3);
  border-radius: 20px;
  background: rgba(102, 112, 82, 0.12);
  color: #41502f;
}

.contact-success:focus {
  outline: none;
}

.contact-success h3 {
  margin: 0 0 10px;
  color: #34401f;
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.15;
}

.contact-success p {
  margin: 0 0 18px;
  line-height: 1.6;
}

.contact-success p a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Info-Karte neben dem Formular */
.detail-card .contact-card-title {
  font-size: clamp(22px, 2.2vw, 26px);
}

.detail-card .contact-card-note {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.detail-facts .fact-v a {
  color: inherit;
}

.detail-facts .fact-v a:hover {
  color: var(--burgundy);
}

/* Terminseite: der Hinweis unter dem Buchungs-Widget. */
.booking-alt {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
}

.booking-alt a {
  color: var(--burgundy);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Startseite, Kontaktband: zwei Wege, der zweite als Textlink unter dem
   hellen Knopf — zwei gleich grosse Knoepfe wuerden dort die 260px-Spalte
   sprengen. */
.contact-ways {
  display: grid;
  gap: 9px;
  justify-items: end;
}

.contact-ways-link {
  color: rgba(255, 250, 244, 0.9);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-ways-link:hover {
  color: #fffaf4;
}

@media (max-width: 640px) {
  .contact-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================
   Wege zu Lydia auf den Angebotsseiten (seit 10.09.2026)
   Knopf mit Zeichen, Kanal-Band, Zwischenband, Textlink unter der
   Abschlusskarte. Logik dazu: `offer.contact` in OfferDetail.astro.
   ========================================================= */

/* Knopf mit vorangestelltem Zeichen (Telegram). Links etwas weniger Polster,
   sonst sitzt der runde Kreis optisch zu weit innen. */
.button-with-icon {
  gap: 10px;
  padding-left: 14px;
}

.button-with-icon .icon-telegram {
  flex: none;
}

/* Kanal-Band (Ein Kurs in Wundern): der Satz, den Lydia sich an dieser Stelle
   gewuenscht hat, und der Weg in den Kanal direkt daneben. */
.detail-channel {
  padding: clamp(8px, 2vw, 20px) 0 clamp(44px, 5vw, 72px);
  background: var(--cream-soft);
}

.detail-channel-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px 32px;
  padding: clamp(24px, 3vw, 36px) clamp(24px, 4vw, 44px);
  border: 1px solid rgba(111, 32, 39, 0.12);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(82, 53, 43, 0.08);
}

.detail-channel-text .eyebrow {
  margin-bottom: 6px;
}

/* Zwischenband: Lydias Wunsch aus dem Gespraech am 08.09. (T2 43:19) — auf
   langen Seiten nicht erst bis ganz unten scrollen muessen, um zu schreiben.
   Bewusst kleiner als die Abschlusskarte: ein Angebot, keine zweite Seite. */
.detail-nudge {
  padding: clamp(8px, 2vw, 24px) 0 clamp(40px, 5vw, 64px);
  background: linear-gradient(180deg, #fff 0%, var(--cream-soft) 100%);
}

.detail-nudge-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  padding: clamp(24px, 3vw, 34px) clamp(24px, 4vw, 44px);
  border: 1px solid rgba(111, 32, 39, 0.12);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(252, 244, 236, 0.96), rgba(244, 226, 224, 0.78));
  box-shadow: 0 18px 44px rgba(82, 53, 43, 0.08);
}

.detail-nudge-text {
  flex: 1 1 320px;
  max-width: 58ch;
}

.detail-nudge-text h2,
.detail-channel-text h2 {
  margin: 0 0 6px;
  color: var(--burgundy-dark);
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.15;
}

.detail-nudge-text p,
.detail-channel-text p {
  max-width: 60ch;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.detail-nudge-actions {
  flex: 0 1 auto;
}

/* Abschlusskarte: der zweite Weg (Erstgespraech) als Textlink unter den
   Knoepfen — wie im Kontaktband der Startseite, nur auf hellem Grund. */
.page-cta-alt {
  color: var(--burgundy-dark);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-cta-alt:hover {
  color: var(--burgundy);
}

@media (max-width: 760px) {
  .detail-channel-card {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
}

/* =========================================================
   Preise in der Info-Karte (seit 10.09.2026, Protokoll A3)
   Lydia: Jemand hat die Preise nicht gefunden, weil sie auf dem Handy ganz
   unten standen. Jetzt stehen sie oben rechts, direkt unter dem „ab"-Preis.
   ========================================================= */
.detail-prices {
  display: grid;
  gap: 6px;
}

.detail-prices-title {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.detail-prices ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(111, 32, 39, 0.12);
}

.detail-prices li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  /* Enger als die Fakten (11px): Die Yogakurse haben fuenf Preise, bei 9px
     war die Karte 772px hoch — genau der Platz unter dem klebenden Kopf. */
  padding: 7px 0;
  border-bottom: 1px solid rgba(111, 32, 39, 0.12);
}

.detail-price-label {
  display: grid;
  gap: 2px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
}

.detail-price-label small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.detail-price-value {
  flex: none;
  color: var(--burgundy-dark);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  white-space: nowrap;
}

.detail-smallprint {
  display: grid;
  gap: 6px;
}

.detail-smallprint p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Editorial-Zeile ohne Bild (Meditationsgruppe „So treffen wir uns"). */
.feature-row-text {
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
}

/* =========================================================
   Kursplan als Karten (Yogakurse, seit 10.09.2026, Protokoll A4)
   „so ähnlich wie die Preise … Button-mäßig" — Tag und Uhrzeit sollen auf
   einen Blick lesbar sein, nicht in einer Fließtext-Liste untergehen.
   ========================================================= */
.detail-schedule {
  padding: clamp(8px, 2vw, 24px) 0 clamp(44px, 5vw, 72px);
  background: var(--cream-soft);
}

.schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.schedule-card {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 18px 20px;
  border: 1px solid rgba(111, 32, 39, 0.14);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(82, 53, 43, 0.08);
}

.schedule-day {
  color: var(--burgundy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.schedule-time {
  color: var(--burgundy-dark);
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.schedule-title {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.schedule-place {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.schedule-cta {
  margin: 24px 0 0;
  text-align: center;
}

/* =========================================================
   Hervorgehobene Hinweise (Tantra, seit 10.09.2026, Protokoll A7)
   Vorher graue Fußnote; Lydia wollte den Hinweis zur genitalen Berührung und
   das Vierhand-Ritual sichtbar haben.
   ========================================================= */
.note-callouts {
  display: grid;
  gap: 14px;
  max-width: 760px;
  margin: 28px auto 0;
}

.note-callout {
  padding: 16px 20px;
  border: 1px solid rgba(111, 32, 39, 0.18);
  border-left: 4px solid var(--burgundy);
  border-radius: 12px;
  background: rgba(255, 250, 244, 0.94);
}

.note-callout p {
  margin: 0;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.6;
  text-align: left;
}

.note-callout strong {
  color: var(--burgundy-dark);
}

/* Editorial-Zeile mit kleinem Bild (Thai „Was dich erwartet", Protokoll A6).
   Nur ab 801px: darunter stapelt .feature-row einspaltig (max-width: 800px),
   und diese Regel stuende sonst spaeter in der Datei und gewaenne. */
@media (min-width: 801px) {
  .feature-row-compact {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  }

  .feature-row-compact .feature-media img {
    height: clamp(240px, 24vw, 320px);
    object-position: center 30%;
  }
}

/* Yoga-Säule: Wann/Dauer/Preis unter dem ausführlicheren Kartentext (A4). */
.path-facts {
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}