@import url('fonts.css');
@import url('tokens.css');

/* ==========================================================================
   B³ RETREATS
   Trennung passiert über drei Mittel: Haarlinie, Tonwechsel des Grundes, Luft.
   Keine Schatten, keine Rahmen-Container, keine Karten.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Weiches Rollen erst, wenn die Seite steht — siehe assets/js/main.js.

     Sonst faehrt der Sprung zu einem Anker BEIM LADEN durch die gesamte
     Seite: nach dem Absenden der Warteliste kommt man auf
     /?warteliste=…#warteliste zurueck, der Browser beginnt oben und rollt
     sekundenlang nach unten. Die Antwort auf ein abgeschicktes Formular
     soll sofort dastehen, nicht angefahren werden. */
  scroll-behavior: auto;
  overflow-x: clip;   /* die angeschnittene Sonne und der Zweig ragen bewusst raus */
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1rem, .96rem + .15vw, 1.0625rem);
  line-height: 1.75;
  letter-spacing: .005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

::selection { background: var(--sand); color: var(--ink); }

:focus-visible {
  outline: 1px solid var(--olive);
  outline-offset: 3px;
}

/* --- Typografie ----------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 300;
  margin: 0;
  text-wrap: balance;
  font-optical-sizing: auto;
}

h1 {
  font-size: clamp(3.25rem, 1.6rem + 5.6vw, 7.25rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  max-width: 15ch;
}

h2 {
  font-size: clamp(2rem, 1.3rem + 2.9vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  max-width: 18ch;
}

h3 {
  font-weight: 400;
  font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.125rem);
  line-height: 1.2;
}

p {
  margin: 0 0 1.15em;
  max-width: 62ch;
  hyphens: auto;
  text-wrap: pretty;
}

p:last-child { margin-bottom: 0; }

/* Absätze sind auf 62ch gedeckelt — diese Elemente sind Satzflächen, keine Absätze */
.belt, .eyebrow, .accent-block, .bms__sign, .ticket__fine,
.hero__meta, .site-foot__legal, .timeline__day p { max-width: none; }

.lead {
  font-weight: 300;
  font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  line-height: 1.6;
  max-width: 48ch;
}

.serif-line {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3rem);
  line-height: 1.25;
  letter-spacing: -.005em;
  max-width: 22ch;
}

.serif-line em { font-style: italic; }

.quiet { color: var(--taupe-deep); }

.small {
  font-size: .875rem;
  line-height: 1.6;
  letter-spacing: .01em;
  color: var(--taupe-deep);
}

/* Marke: gesperrtes Versal-Label auf einer Haarlinie, nie auf einer Plakette */
.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .75rem;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--taupe-deep);
  margin: 0 0 1.35rem;
  max-width: none;
}

.eyebrow::before {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: var(--rule-strong);
  margin-bottom: 1.1rem;
}

.eyebrow--center { text-align: center; }
.eyebrow--center::before { margin-inline: auto; }

/* Zahlen: Mediävalziffern im Fließtext, Tabellenziffern in Tabellen */
.num-old  { font-variant-numeric: oldstyle-nums; }
.num-tab  { font-variant-numeric: tabular-nums; font-family: var(--sans); }

a { color: inherit; }

.link {
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}

.link:hover { border-color: var(--taupe); color: var(--taupe-deep); }

/* --- Raster --------------------------------------------------------------- */

.wrap {
  width: min(100% - 2 * var(--pad), var(--maxw));
  margin-inline: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
}

/* Spalte 1 ist Handschriftenrand: dort steht nur die Kapitelnummer */
.rail {
  grid-column: 1;
  align-self: start;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--taupe);
  writing-mode: vertical-rl;
  white-space: nowrap;
  padding-top: .35rem;
}

/* --- Abschnitte ----------------------------------------------------------- */

section { position: relative; }

.band-ivory { background: var(--ivory); }
.band-sand  { background: var(--sand); }
.band-warm  { background: var(--sand-warm); }
.band-white { background: var(--white); }

.band-olive {
  background: var(--olive);
  color: var(--ink-invert);
}

.band-olive .eyebrow,
.band-olive .quiet,
.band-olive .small { color: var(--on-olive-mut); }

.band-olive .eyebrow::before { background: var(--sage); }

/* Lineal: Haarlinie unter jeder Abschnittsüberschrift, von der Nummer durchbrochen */
.ruler {
  position: relative;
  height: 1px;
  background: var(--rule);
  margin: var(--space-s) 0 var(--space-s);
}

.ruler span {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: var(--ivory);
  padding-inline: 0 1rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--taupe);
}

.band-sand  .ruler span { background: var(--sand); }
.band-warm  .ruler span { background: var(--sand-warm); }
.band-white .ruler span { background: var(--white); }
.band-olive .ruler      { background: var(--rule-invert); }
.band-olive .ruler span { background: var(--olive); color: var(--sage); }

/* Mondphasen statt <hr> */
.moons {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: var(--space-s) 0;
}

.moons i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--taupe);
  background: var(--ink);
}

.moons i:nth-child(2) { background: var(--taupe-deep); }
.moons i:nth-child(3) { background: var(--taupe); }
.moons i:nth-child(4) { background: rgba(154, 132, 108, .35); }
.moons i:nth-child(5) { background: transparent; }

/* Olivgrüner Gürtel — die einzige Form, in der Oliv große Flächen bekommt */
.belt {
  background: var(--olive);
  color: var(--ink-invert);
  text-align: center;
  padding: 1.85rem var(--pad);
  --medallion-drop: clamp(44px, 4.5vw, 62px);   /* halbe Medaillonhöhe */
  font-family: var(--sans);
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* Trägt das Medaillon auf der Naht — Text startet unter dessen Unterkante */
.belt--seam { padding-top: calc(var(--medallion-drop) + 2.4rem); }

/* --- Bilder --------------------------------------------------------------- */

.ph {
  position: relative;
  overflow: hidden;
  background: var(--sand);
}

/* Ein warmer Schleier über allem — klebt drei Kameras zu einem Satz zusammen */
.ph::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(214, 196, 168, .10), rgba(122, 110, 88, .08));
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bogen = Mensch und Innenraum. Rechteck = Ort. Nie im selben Block gemischt.
   Der senkrechte Radius ist die halbe Bildhoehe: der Bogen beginnt damit auf
   halber Hoehe und laeuft sichtbar an den Seiten herunter. Bei den vorherigen
   32 % sass die Rundung nur als flache Kappe obendrauf — von der Seite war
   vom Bogen nichts zu sehen. */
/* Auf Wunsch der Kundin sind alle Bildkanten gerade. Die einzige
   Ausnahme ist der Abschnitt „Ueber uns" — dort bleibt der Bogen,
   siehe .team .ph.arch. */
.arch { border-radius: 0; }

/* Der Bogen lebt nur noch hier weiter: die drei Portraits im Abschnitt
   „Ueber uns". Zwei Klassen schlagen eine, deshalb greift das gegen
   .arch oben ohne !important. */
.team .ph.arch { border-radius: 50% 50% 0 0 / 50% 50% 0 0; }

.veil::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--veil-olive);
  mix-blend-mode: multiply;
}

/* --- Schaltflächen -------------------------------------------------------- */

.btn {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 1.15em 2.6em;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

.btn--primary { background: var(--olive); color: var(--ivory); }
.btn--primary:hover { background: var(--ink); }

.btn--ghost { border-color: var(--taupe); color: var(--taupe-deep); background: transparent; }
.btn--ghost:hover { background: rgba(154, 132, 108, .08); color: var(--ink); }

.btn--invert { background: var(--ivory); color: var(--olive); }
.btn--invert:hover { background: var(--sand); }

.btn--outline-light { border-color: rgba(247, 244, 239, .55); color: var(--ivory); }
.btn--outline-light:hover { background: rgba(247, 244, 239, .12); border-color: var(--ivory); }

.btn--block { display: block; width: 100%; text-align: center; }

/* --- Marke ---------------------------------------------------------------- */

/* currentColor vererbt durch <use> hindurch — Klassenselektoren tun das nicht */
.mark { display: block; color: var(--taupe); }
.mark--invert { color: var(--sand); }

/* Medaillon sitzt auf der Naht zweier Abschnitte, nicht mittig */
.medallion {
  position: absolute;
  left: 62%;
  bottom: 0;
  transform: translate(-50%, 50%);
  z-index: 4;
  width: clamp(88px, 9vw, 124px);
  height: clamp(88px, 9vw, 124px);
  border-radius: 50%;
  background: var(--ivory);
  display: grid;
  place-items: center;
}

.medallion--sand { background: var(--sand); }

/* --- Kopfzeile ------------------------------------------------------------ */

.site-head {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  padding: var(--head-pad) 0;
  transition: background-color .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}

/* Die rechte Haelfte des Menues liegt ueber dem Hero-Foto. Seit dort ein helles
   Stoppelfeld steht statt Himmel, fielen "Unterkunft & Preise" und "Fragen"
   auf unter 3:1 Kontrast. Ein warmer Verlauf von oben, in der Farbe des Bandes
   daneben: ueber dem Sandfeld links ist er unsichtbar, ueber dem Foto rechts
   traegt er die Schrift. Liegt hinter dem Inhalt, nicht darueber. */
.site-head::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 190px;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(247, 244, 239, .82) 0%,
    rgba(247, 244, 239, .58) 45%,
    rgba(247, 244, 239, 0) 100%);
  pointer-events: none;
  transition: opacity .35s var(--ease);
}

/* Ist die Leiste eingerastet, deckt ihr eigener Grund schon alles ab. */
.site-head.is-stuck::before { opacity: 0; }

.site-head.is-stuck {
  position: fixed;
  background: var(--ivory);
  border-bottom-color: var(--rule);
  padding: 10px 0;
}

/* Groß über dem Hero, beim Mitscrollen etwas zurückgenommen */
/* Ueber dem Aufmacher darf das Zeichen gross stehen — dort ist es die Marke,
   nicht die Navigation. Die Groesse kommt aus dem Blatt, nicht aus dem
   width-Attribut im HTML, damit sie an einer Stelle liegt. */
.site-head__logo .mark {
  width: var(--mark);
  height: var(--mark);
  transition: width .3s var(--ease), height .3s var(--ease);
}
.site-head.is-stuck .site-head__logo .mark { width: 62px; height: 62px; }

.site-head__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.3vw, 2.5rem);
  font-weight: 500;
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.site-nav a { text-decoration: none; color: var(--taupe-deep); transition: color .25s var(--ease); }
.site-nav a:hover { color: var(--ink); }
.site-nav a.is-cta { color: var(--ink); border-bottom: 1px solid var(--rule-strong); padding-bottom: 3px; }

/* Die Kapitelnummern gehören ins Menü-Panel, auf dem Desktop stören sie nur */
.site-nav a i,
.site-nav__meta { display: none; }

/* Zwei Haarlinien — dasselbe Mittel, das die ganze Seite gliedert */
.burger {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

.burger span {
  position: absolute;
  left: 6px;
  width: 28px;
  height: 1px;
  background: var(--ink);
  transition: transform .32s var(--ease), opacity .2s var(--ease);
}

.burger span:first-child { top: 17px; }
.burger span:last-child  { top: 24px; }

.burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

/* --- Zurück nach oben ----------------------------------------------------- */

.totop {
  position: fixed;
  right: clamp(20px, 3vw, 40px);
  bottom: calc(clamp(20px, 3vw, 40px) + var(--consent-h) + var(--bar-h));
  z-index: 25;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: var(--ivory);
  color: var(--taupe-deep);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease),
              visibility .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}

.totop.is-on { opacity: 1; visibility: visible; transform: none; }
.totop { transition-property: opacity, transform, visibility, background-color, color, bottom; }
.totop:hover { background: var(--olive); color: var(--ivory); border-color: var(--olive); }
.totop svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.3; }

/* --- 01 Hero -------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  /* Vorher 42fr 58fr. Die Textspalte war fuer die riesige Zeile im Aufmacher zu
     schmal — „to be you." stand gequetscht unter „Be free". Die vier Punkte
     kosten das Bild nichts Sichtbares: seine linke Kante ist jetzt ein Oval und
     gibt die Ecken ohnehin an den Sand ab. */
  grid-template-columns: 46fr 54fr;
  /* Vorher 88vh. Der Aufmacher schob damit den Seitenanfang fast komplett aus
     dem ersten Bildschirm; jetzt bleibt unten ein Streifen des naechsten
     Abschnitts sichtbar und zeigt, dass es weitergeht. Wird die Zahl weiter
     gesenkt, ist nicht mehr sie die Untergrenze, sondern der Text in
     .hero__copy — dann muss dort das Polster mitgehen. */
  min-height: 72vh;
  background: var(--sand);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Oben muss das groessere Markenzeichen im Kopf Platz finden UND danach noch
     Luft stehen — sonst klebt die Datumszeile am Logo. */
  /* Rechts weniger Polster als vorher (war 4.5vw/76px): das Oval des Bildes
     haelt den Abstand jetzt selbst, die Zeile darf dafuer laenger laufen. */
  /* Gerechnet, nicht geraten: Polster der Leiste + Markenzeichen + Luft.
     So kann die Datumszeile dem Logo nicht mehr auf zwei Pixel nahe kommen,
     egal wie hoch das Fenster ist. Wird das Zeichen groesser, wandert der
     Aufmacher von selbst mit — beide Groessen stehen in tokens.css. */
  padding: calc(var(--head-pad) + var(--mark) + clamp(32px, 4vh, 64px))
           clamp(24px, 3vw, 52px) clamp(56px, 6vh, 80px) var(--pad);
}

.hero__meta {
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--taupe-deep);
  margin-bottom: clamp(1.6rem, 3vh, 2.6rem);
}

/* Cormorant hat kleine Mittellaenge bei langen Ober- und Unterlaengen: bei 1.02
   klaffen die Zeilen optisch weiter als die Zahl vermuten laesst. Im Aufmacher
   steht die Zeile riesig, dort faellt das auf. */
.hero h1 { line-height: .92; margin-bottom: clamp(1.5rem, 3vh, 2.2rem); }

.hero .lead { margin-bottom: clamp(2rem, 4vh, 3rem); }

.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; }

.hero__ph { position: relative; }
.hero__ph picture { display: contents; }
/* object-position: beide Zahlen sind im Browser nachgemessen, nicht geschaetzt.
   WAAGERECHT 62 % — Folge der Rundung: das Oval frisst die linke Haelfte der
   Ober- und Unterkante; stand die Gruppe mittig, lief sie in die Kurve.
   SENKRECHT 54 % — die Bildspalte ist am Desktop querformatig, `cover` schneidet
   also oben und unten weg, und davor schneidet schon `.hero__ph` das 118 % hohe
   Parallaxenbild. Die drei stehen in hero-tall.webp bei 0,315–0,725. Durchgemessen
   ueber 14 Fenstergroessen x drei Scrollstaende haelt sie jeder Wert aus
   [0,50 … 0,58] vollstaendig im Bild; die engste Groesse ist 1920x900. 54 % liegt
   in der Mitte dieses Fensters. Einzige Ausnahme ist ein extrem breites, flaches
   Fenster (2560x900, 2,8:1) — dort ist der sichtbare Streifen niedriger als die
   Gruppe hoch ist, das war beim vorherigen Bild schon so.
   Wer die Gruppe im Bild verschiebt, muss diese Zahl neu messen:
   scratchpad/objpos.py macht genau das. */
.hero__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 54%; }

/* Dieselbe Sprache wie .exp__item--flip: das Bild laeuft rechts aus dem Raster
   an die Fensterkante und ist zur Schrift hin als halbe Ellipse geschnitten —
   senkrechter Radius = halbe Hoehe, also eine durchgehende Kurve und keine
   abgerundete Ecke. Aussen bleibt es gerade, dort ist der Bildschirmrand. */
.hero__ph { border-radius: 0; }

/* --- 02 Einladung --------------------------------------------------------- */

/* Derselbe Weg von der .wrap bis zur Fensterkante wie in .exp — damit das Bild
   aus dem Raster heraus an den Bildschirmrand laufen kann. overflow:hidden
   verhindert, dass die Scrollbalkenbreite in 100vw waagerecht scrollen laesst. */
.invite {
  padding: var(--space-l) 0;
  overflow: hidden;
  --bleed: max(var(--pad), (100vw - var(--maxw)) / 2 + var(--pad));
}

/* Vorher span 6 bzw. span 5. Die Frage brach damit auf vier kurze Zeilen um und
   stand als schmale Saeule neben viel leerem Papier. Eine Spalte mehr macht drei
   Zeilen daraus; das Bild beginnt weiter rechts und verliert nichts. */
.invite__head { grid-column: 2 / span 7; grid-row: 1; }

/* Die breitere Spalte allein aendert nichts — h2 ist global auf 18ch gedeckelt,
   und genau dieser Deckel, nicht das Raster, hat die Frage auf vier Zeilen
   gebrochen. 25ch passen in die sieben Spalten und machen drei Zeilen daraus. */
.invite__head h2 { max-width: 25ch; }
.invite__body { grid-column: 2 / span 6; grid-row: 2; margin-top: var(--space-s); }

/* Die rechte Hälfte stand über anderthalb Bildschirme leer. Das Bild greift
   deshalb ueber beide Zeilen und laeuft rechts aus dem Raster an die
   Fensterkante — wie .exp__item--flip. */
.invite__ph {
  grid-column: 9 / span 4;
  grid-row: 1 / span 2;
  align-self: start;
  margin: clamp(130px, 17vw, 280px) calc(-1 * var(--bleed)) 0 0;
}

/* Zur Schrift hin eine halbe Ellipse, aussen gerade — dort ist der
   Bildschirmrand. Ueberschreibt .arch (zwei Klassen schlagen eine), damit die
   Vorlage weiter class="ph arch" schreiben kann. Das Hochformat wird dafuer
   flacher: 4/5 waere neben der Rundung eine Nadel geworden. */
.invite__ph .ph {
  aspect-ratio: 5 / 6;
  border-radius: 0;
}

/* Die Kerze steht im rechten Drittel des Bildes — der Ausschnitt darf links
   fressen, wo jetzt die Rundung liegt. */
.invite__ph .ph img { object-position: 68% center; }

.accent-block {
  grid-column: 1 / -1;
  grid-row: 3;
  text-align: center;
  margin-top: var(--space-m);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.6rem);
  line-height: 1.35;
  color: var(--taupe-deep);
}

.accent-block strong { display: block; font-weight: 300; color: var(--ink); }

.accent-block .said {
  display: block;
  margin-top: 1.2rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* --- 03 Body. Mind. Soul. ------------------------------------------------- */

/* Unten stand frueher ein Fries und schloss den Abschnitt ab. Ohne ihn braucht
   der Sandblock einen eigenen Rand — sonst klebt die Signatur am naechsten Ton. */
.bms { padding: var(--space-l) 0 var(--space-m); }
.bms__head { grid-column: 3 / span 6; }

.bms__cols {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(28px, 4vw, 64px);
  margin-top: var(--space-m);
}

.bms__col { border-left: 1px solid var(--rule); padding-left: clamp(20px, 2.4vw, 34px); }
.bms__col:nth-child(2) { margin-top: 40px; }
.bms__col:nth-child(3) { margin-top: 80px; }

.bms__col h3 { margin-bottom: .35rem; }
.bms__col h3 sup { font-size: .45em; color: var(--taupe); vertical-align: super; }

.bms__who {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 1.1rem;
}

.bms__outro { grid-column: 3 / span 7; margin-top: var(--space-m); }

.bms__sign {
  grid-column: 1 / -1;
  text-align: center;
  margin-inline: auto;
  margin-top: var(--space-s);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.4rem);
  color: var(--taupe-deep);
}

/* --- 04 Ablauf ------------------------------------------------------------ */

.ablauf { padding: var(--space-l) 0; overflow: hidden; }
.ablauf__head { grid-column: 2 / span 5; }
.ablauf__ph { grid-column: 8 / span 5; margin-top: clamp(40px, 7vw, 96px); }
.ablauf__ph .ph { aspect-ratio: 3 / 4; }

.timeline {
  grid-column: 2 / -1;
  margin: var(--space-m) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(20px, 2.6vw, 40px);
  border-top: 1px solid var(--rule);
  position: relative;
}

.timeline__day { padding-top: 2.25rem; position: relative; }

.timeline__day::before {
  content: '';
  position: absolute;
  top: -3.5px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--taupe);
}

.timeline__day b {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--taupe-deep);
  margin-bottom: .8rem;
}

.ablauf__note {
  grid-column: 4 / span 7;
  margin-top: var(--space-m);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.35rem, 1rem + 1.3vw, 2rem);
  line-height: 1.35;
  color: var(--taupe-deep);
  max-width: 26ch;
}

.sprig {
  position: absolute;
  right: clamp(-30px, -2vw, 0px);
  bottom: 6%;
  width: 160px;
  opacity: .5;
  pointer-events: none;
}

.sprig path { fill: none; stroke: var(--taupe); stroke-width: 1.1; }

/* --- 05 Neumond ----------------------------------------------------------- */

.neumond { padding: var(--space-m) 0; overflow: hidden; }
.neumond__head { grid-column: 2 / span 5; grid-row: 1; }
.neumond__q { grid-column: 8 / span 5; grid-row: 1 / span 2; }

.neumond__q li {
  list-style: none;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.85rem);
  line-height: 1.35;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule-invert);
}

.neumond__q ul { margin: 0; padding: 0; border-top: 1px solid var(--rule-invert); }

.neumond__outro { grid-column: 2 / span 5; grid-row: 2; margin-top: var(--space-s); }
.neumond__outro p { color: rgba(247, 244, 239, .76); }

.neumond__moon {
  position: absolute;
  top: clamp(24px, 5vw, 64px);
  right: clamp(-40px, -2vw, 0px);
  width: clamp(140px, 18vw, 260px);
  opacity: .35;
  pointer-events: none;
}

.neumond__moon circle { fill: none; stroke: var(--sage); stroke-width: 1; }

/* --- 06 Experiences ------------------------------------------------------- */

.exp { padding: var(--space-l) 0; position: relative; overflow: hidden; }
.exp__head { grid-column: 2 / span 6; }
.exp__intro { grid-column: 2 / span 6; margin-top: var(--space-s); }

.exp__item {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  align-items: center;
  margin-top: var(--space-m);
}

/* Der Weg vom Inhalt der .wrap bis zur Fensterkante: unter 1440 px ist es das
   Seitenpolster, darueber kommt die Haelfte des ueberschuessigen Randes dazu.
   Damit laeuft das Bild aus dem Raster heraus bis an den Bildschirmrand.
   .exp hat overflow:hidden — die Scrollbalkenbreite in 100vw kann also keinen
   waagerechten Scroll ausloesen. */
.exp {
  --bleed: max(var(--pad), (100vw - var(--maxw)) / 2 + var(--pad));
}

.exp__item .ph      { grid-column: 1 / span 6; margin-left: calc(-1 * var(--bleed)); }
.exp__item .exp__tx { grid-column: 8 / span 5; }

.exp__item--flip .ph      { grid-column: 7 / span 6; grid-row: 1;
                            margin-left: 0; margin-right: calc(-1 * var(--bleed)); }
.exp__item--flip .exp__tx { grid-column: 2 / span 4; grid-row: 1; }

/* Das Bild kommt seitlich ins Bild und ist zur Textspalte hin oval geschnitten:
   der senkrechte Radius laeuft ueber die volle Hoehe, also ist die Innenkante
   eine halbe Ellipse und keine abgerundete Ecke. Aussen bleibt es gerade —
   dort ist die Bildschirmkante. Ueberschreibt .arch (zwei Klassen schlagen
   eine), damit die Vorlage weiter class="ph arch" schreiben kann. */
.exp__item .ph       { border-radius: 0; }
.exp__item--flip .ph { border-radius: 0; }

/* Eine Experience ohne Bild: der Text ruecht auf die Kante der Kapitelspalte
   und wird zur Atempause zwischen den Bildbloecken — nicht an den rechten
   Rand geklebt, wo er ohne Bild danebensteht. */
.exp__item .exp__tx:only-child { grid-column: 2 / span 6; }

/* Sophie leitet zwei Experiences. Als zwei Artikel untereinander riss das
   zweite ein Loch: das hohe Bild des ersten bestimmt die Zeilenhoehe, und der
   Text darunter fing erst nach dem Bildende an. Jetzt stehen beide Texte in
   derselben Spalte neben dem einen Bild — die Trennlinie macht deutlich, dass
   es zwei Sessions sind. */
.exp__second {
  margin-top: 2.6rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--rule);
}


.exp__who {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--taupe);
  padding-bottom: .9rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--rule);
}

.exp__tx h3 { margin-bottom: 1.2rem; }

/* Strahlensonne als Textur, vom rechten Rand angeschnitten — einmal pro Seite */
.sun {
  position: absolute;
  top: 46%;
  right: -180px;
  width: 560px;
  opacity: .07;
  pointer-events: none;
  z-index: 0;
}

.sun line, .sun circle { stroke: var(--taupe); stroke-width: 1.4; fill: none; }

/* --- 07 Freie Zeit -------------------------------------------------------- */

.frieze .ph { aspect-ratio: 2.4 / 1; }
.frieze--tight { margin-top: var(--space-m); }
.frieze--tight .ph { aspect-ratio: 2.6 / 1; }

.freizeit { padding: var(--space-m) 0 var(--space-l); }
.freizeit__head { grid-column: 2 / span 4; }
.freizeit__body { grid-column: 7 / span 6; }

.pullout {
  border-left: 1px solid var(--rule-strong);
  padding-left: 1.4rem;
  margin: 2.25rem 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.75rem);
  line-height: 1.35;
  max-width: 24ch;
}

/* --- 08 Retreat-Ort ------------------------------------------------------- */

.ort { padding: var(--space-l) 0 var(--space-s); }
.ort__head { grid-column: 1 / span 4; }
.ort__body { grid-column: 6 / span 6; }

/* Der Ort bleibt rechteckig — der Bogen gehoert Menschen und Innenraeumen */
.mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(160px, 18vw, 265px);
  gap: 10px;
  margin-top: var(--space-m);
}

.mosaic .ph { border-radius: 0; }
.mosaic .m1 { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.mosaic .m2 { grid-column: 3;          grid-row: 1 / span 2; }
.mosaic .m3 { grid-column: 1;          grid-row: 3; }
.mosaic .m4 { grid-column: 2;          grid-row: 3; }
.mosaic .m5 { grid-column: 3;          grid-row: 3; }
.mosaic .m6 { grid-column: 1;          grid-row: 4 / span 2; }
.mosaic .m7 { grid-column: 2;          grid-row: 4 / span 2; }
.mosaic .m8 { grid-column: 3;          grid-row: 4 / span 2; }

.ort__map { grid-column: 1 / span 4; margin-top: 2rem; display: flex; align-items: center; gap: 1rem; }
.ort__map svg { width: 82px; flex: none; }
.ort__map path, .ort__map circle { fill: none; stroke: var(--taupe); stroke-width: 1.2; }
.ort__map .pin { fill: var(--taupe); stroke: none; }

/* --- 09 Kulinarik --------------------------------------------------------- */

.kulinarik { padding: var(--space-m) 0; }

/* Kapitel ohne Bild. Nicht links buendig wie ein Abschnittskopf — dann steht
   das rechte Drittel des Bandes leer. Stattdessen eingerueckt wie .bms__outro:
   beidseitig Luft, damit die Spalte gewollt wirkt und nicht angeschnitten.
   Auch nicht als Kopf/Text-Paar wie Kapitel 06 und 07 — dreimal dasselbe
   Raster hintereinander nimmt der Seite den Wechsel. */
.kulinarik__tx { grid-column: 3 / span 7; }

.tagline-rule {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--taupe-deep);
}

/* --- 10 Unterkunft & Preise ----------------------------------------------- */

/* overflow + --bleed wie in .exp: der Schieber der Positionszeilen laeuft links
   aus dem Raster heraus bis an die Fensterkante. */
.haus {
  padding: var(--space-l) 0 var(--space-m);
  overflow: hidden;
  --bleed: max(var(--pad), (100vw - var(--maxw)) / 2 + var(--pad));
}
.haus__head { grid-column: 2 / span 6; }
.haus__sub  { grid-column: 2 / span 5; margin-top: 1.5rem; }

/* Keine Karten: Positionszeilen, getrennt von Haarlinien */
.tier {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  padding: var(--space-s) 0;
  border-top: 1px solid var(--rule);
}

.tier:last-of-type { border-bottom: 1px solid var(--rule); }
.tier--exklusiv { border-top-color: var(--rule-strong); }

/* Eine Spalte breiter als frueher: als einzelnes Standbild reichten drei
   Spalten, zum Blaettern ist das Bild darin nur noch gut 170 px hoch. */
/* Der Schieber laeuft links aus dem Raster an die Fensterkante und ist zur
   Schrift hin oval geschnitten — die Gegenrichtung zu .invite und .hero, wie
   .exp__item es zwischen den Experiences abwechselt. Die Rundung sitzt auf
   .galerie__spur und nicht auf .galerie: nur die Spur ist die Bildflaeche,
   Unterschrift und Balken darunter bleiben gerade. Die Spur hat schon
   overflow-x, schneidet also von sich aus. */
/* Fuenf Spalten plus Ueberhang statt vier ohne: als Galerie zum Blaettern war
   das Bild vorher nur gut 270 px hoch und stand als Briefmarke neben einer
   langen Merkmalsliste. Jetzt rund 600 px breit — die Textspalte und die
   Preisspalte behalten dabei ihre Breite, es verschiebt sich nur die Grenze. */
.tier__ph  { grid-column: 1 / span 5; margin-left: calc(-1 * var(--bleed)); }

/* 18 %, nicht die 42 % der Portraitbilder: der waagerechte Radius zaehlt von der
   Breite, der senkrechte von der Hoehe. Bei einem 3:2-Bild ist die Hoehe klein,
   und 42 % Breite gegen 50 % Hoehe ergeben keine Bogenkante, sondern eine
   Blattform. 18 % geben die runde Aussenkante, ohne das Motiv anzuschneiden. */
.tier__ph .galerie__spur { border-radius: 0; }

/* Der Bogen jedes einzelnen Bildes muss hier weg. `.galerie__bild` traegt
   `50% 50% 0 0 / 22% 22% 0 0` — eine Kappe oben. Zusammen mit der Rundung der
   Spur ergab das links oben doch eine gebogene Ecke, obwohl die Spur dort auf 0
   steht: geschnitten wird zweimal, und die innere Kappe war die engere Form.
   Die Kontur macht jetzt allein die Spur — links schnurgerade, rechts rund. */
.tier__ph .galerie__bild { border-radius: 0; }

/* Der Pfeil sass 12 px vom Rand — in der Rundung haengt er im Sand. */
.tier__ph .galerie__pfeil--vor { right: 4%; }

/* Der Ueberhang gilt nur fuer die Bildflaeche. Unterschrift und Balken gehoeren
   zur Textspalte und wuerden sonst links aus dem Fenster rutschen. */
.tier__ph .galerie__fuss { padding-left: var(--bleed); }

.tier__tx  { grid-column: 6 / span 4; }
.tier__buy { grid-column: 10 / span 3; align-self: start; }

.tier__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: .9rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--rule);
}

.tier__label em { font-style: normal; font-size: .625rem; color: var(--taupe); letter-spacing: .24em; }

.tier__tx h3 { margin-bottom: 1rem; }

.feats { list-style: none; margin: 1.6rem 0 0; padding: 0; }

.feats li {
  padding: .7rem 0 .7rem 1.9rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
  font-size: .9375rem;
}

.feats li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--taupe);
}

.feats--tight li { padding-block: .55rem; }

.price {
  font-family: var(--serif);
  font-weight: 300;
  font-variant-numeric: oldstyle-nums;
  font-size: clamp(2.75rem, 1.6rem + 3.4vw, 4.5rem);
  line-height: .9;
  letter-spacing: -.02em;
  margin-bottom: .5rem;
}

.price small {
  display: block;
  font-family: var(--sans);
  font-size: .8125rem;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--taupe-deep);
  margin-top: 1.2rem;
  font-variant-numeric: normal;
}

.tier__buy .btn { margin-top: 1.6rem; }

/* --- 11 Inklusive --------------------------------------------------------- */

.inkl { padding: var(--space-m) 0; }
.inkl__head { grid-column: 1 / span 3; position: sticky; top: 96px; align-self: start; }
.inkl__list { grid-column: 5 / span 8; }


.inkl__list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: clamp(28px, 4vw, 64px);
  border-top: 1px solid var(--rule);
}

.inkl__list li {
  break-inside: avoid;
  padding: .8rem 0 .8rem 1.9rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
  font-size: .9375rem;
}

.inkl__list li::before { content: '→'; position: absolute; left: 0; color: var(--taupe); }

.inkl__out {
  grid-column: 5 / span 8;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .8rem 2.5rem;
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
}

.inkl__out b {
  flex: none;
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--taupe);
}

.inkl__out .small { flex: 1 1 24rem; margin: 0; }

/* --- 12 Team -------------------------------------------------------------- */

.team { padding: var(--space-l) 0 0; }
.team__head { grid-column: 3 / span 6; }
.team__intro { grid-column: 3 / span 6; margin-top: var(--space-s); }

.member {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  align-items: center;
  padding: var(--space-m) 0;
}

/* Bild und die beiden Links stehen in EINER Spalte — deshalb liegt die
   Rasterangabe an der Huelle. Das Bild behaelt nur sein Seitenverhaeltnis. */
.member__ph        { grid-column: 2 / span 4; }
.member .ph        { aspect-ratio: 4 / 5; }
.member__tx        { grid-column: 7 / span 5; }
.member--flip .member__ph { grid-column: 7 / span 4; grid-row: 1; }
.member--flip .member__tx { grid-column: 2 / span 4; grid-row: 1; }

/* Website und Instagram unter dem Portraet. Dieselbe Schriftgroesse und
   Sperrung wie die Taetigkeitszeile daneben — es sind Randangaben zur Person,
   keine Handlungsaufforderung, und sie sollen dem Buchungsbutton nicht die
   Aufmerksamkeit wegnehmen. */
.member__links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.6rem;
  margin-top: 1.1rem;
}

.member__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--taupe);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: .15rem;
  transition: color var(--dur-s) var(--ease-soft),
              border-color var(--dur-s) var(--ease-soft);
}

.member__link:hover,
.member__link:focus-visible { color: var(--olive); border-bottom-color: var(--olive); }

/* Das Symbol traegt Strich und Fuellung als Attribut, nicht als Klasse:
   im Schattenbaum von <use> greifen Klassen nicht. Hier nur die Groesse. */
.member__link svg { width: 16px; height: 16px; flex: none; }

.member__tx h3 { margin-bottom: .5rem; }

.member__craft {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--taupe);
  padding-bottom: 1rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--rule);
}

.member__accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.35rem, 1rem + 1.2vw, 1.9rem);
  line-height: 1.3;
  color: var(--taupe-deep);
  margin: 1.4rem 0;
  max-width: 24ch;
}

.team__seam { position: relative; height: 0; }

/* --- 13 Für wen ----------------------------------------------------------- */

.fuerwen {
  padding: var(--space-l) 0;
  overflow: hidden;
  --bleed: max(var(--pad), (100vw - var(--maxw)) / 2 + var(--pad));
}
.fuerwen__head { grid-column: 3 / span 6; grid-row: 1; }
.fuerwen__body { grid-column: 3 / span 6; grid-row: 2; margin-top: var(--space-s); }

/* Vorher drei Spalten und mit Abstand zum Rand: ein Briefmarkenbild, das im
   olivgruenen Feld verloren stand. Jetzt eine Spalte breiter und rechts aus dem
   Raster heraus bis an die Fensterkante, zur Schrift hin oval — dieselbe
   Sprache wie .invite und .exp__item--flip. */
.fuerwen__ph {
  grid-column: 9 / span 4;
  grid-row: 1 / span 2;
  align-self: start;
  margin: clamp(20px, 4vw, 70px) calc(-1 * var(--bleed)) 0 0;
}

.fuerwen__ph .ph {
  aspect-ratio: 5 / 6;
  border-radius: 0;
}
/* Kein object-position: das Bild ist 4:5, der Rahmen 5:6 — `cover` skaliert also
   nach der Breite und schneidet nur senkrecht, waagerecht gibt es keinen Spielraum
   zu verschieben. Den engeren Kader macht darum die Pipeline (fuerwen-blick). */

.fuerwen__q { grid-column: 3 / span 8; grid-row: 3; margin-top: var(--space-m); list-style: none; padding: 0; border-top: 1px solid var(--rule-invert); }

.fuerwen__q li {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.35rem, 1rem + 1.3vw, 2rem);
  line-height: 1.3;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule-invert);
}

.fuerwen__end { grid-column: 3 / span 5; grid-row: 4; margin-top: var(--space-m); }

.fuerwen__cta {
  grid-column: 9 / span 4;
  grid-row: 4;
  align-self: end;
  margin-top: var(--space-m);
}
.fuerwen__cta .small { margin-top: 1.1rem; color: var(--on-olive-mut); }

/* --- 14 Buchung ----------------------------------------------------------- */

.buchung { position: relative; padding: var(--space-l) 0; overflow: hidden; }

.buchung__bg { position: absolute; inset: 0; z-index: 0; }
.buchung__bg img { width: 100%; height: 100%; object-fit: cover; }

/* Hier liegt der Text auf einer eigenen hellen Karte, das Bild darf also offen
   bleiben: soft-light aus .ph::after ist gewollt und deshalb ausgeschrieben. */
.buchung__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  mix-blend-mode: soft-light;
  background: linear-gradient(180deg, rgba(69, 75, 64, .55), rgba(69, 75, 64, .78));
}

.ticket {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin-inline: auto;
  background: var(--ivory);
  border: 1px solid var(--rule-strong);
  padding: clamp(30px, 4.5vw, 60px);
}

.ticket__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ticket__top h2 { font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.6rem); max-width: none; }
.ticket__top span { font-size: .8125rem; letter-spacing: .06em; color: var(--taupe-deep); }

.ticket hr { border: 0; border-top: 1px solid var(--rule); margin: 1.9rem 0; }

.ticket__when { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

.ticket__when b {
  display: block;
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: .45rem;
}

.ticket__prices { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.ticket__prices > div + div { border-left: 1px solid var(--rule); padding-left: 1.5rem; }

.ticket__prices b {
  display: block;
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: .6rem;
}

.ticket__prices span {
  font-family: var(--sans);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2rem);
  letter-spacing: -.01em;
}

/* Je Variante ein eigener Button. Vorher lag EIN breiter Button unter beiden
   Preisen — er liess offen, welchen Tarif er eigentlich bucht, und mit zwei
   getrennten Buchungslinks war das nicht mehr aufloesbar. Die Spalten stehen
   deshalb als Saeule: Preis oben, Button buendig unten. */
.ticket__prices > div { display: flex; flex-direction: column; }
.ticket__prices > div > p { margin-bottom: 1.4rem; }
.ticket__btn { margin-top: auto; }

.ticket__fine { margin-top: 1.4rem; text-align: center; }

/* --- 15 Warteliste -------------------------------------------------------- */

.wl { padding: var(--space-l) 0; }
.wl__head { grid-column: 2 / span 6; }
.wl__form, .wl__danke { grid-column: 2 / span 7; margin-top: var(--space-s); }

/* Der Dank kommt als Fliesstext aus dem Panel, mit Leerzeilen dazwischen.
   pre-line macht daraus Absaetze, ohne dass die Kundin HTML tippen muss. */
.wl__danke {
  white-space: pre-line;
  max-width: 54ch;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.wl__fehler {
  border-left: 1px solid var(--rule-strong);
  padding: .2rem 0 .2rem 1.2rem;
  margin-bottom: 2rem;
  max-width: 54ch;
}

.wl__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.6rem; margin-bottom: 1.6rem; }
.wl__feld { display: flex; flex-direction: column; gap: .5rem; }

.wl__feld > span,
.wl__wahl legend {
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* Eine Linie unten statt eines Kastens — dasselbe Mittel wie im Raster.
   Der Rahmen eines Standard-Eingabefeldes waere hier ein Fremdkoerper. */
.wl__feld input {
  font-family: var(--sans);
  font-size: 1rem;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: .5rem 0;
  transition: border-color var(--dur-s) var(--ease-soft);
}
.wl__feld input:focus { outline: 0; border-bottom-color: var(--olive); }
/* Sichtbar auch fuer die, die mit der Tastatur unterwegs sind. */
.wl__feld input:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }

.wl__wahl { border: 0; padding: 0; margin: 0 0 1.6rem; }
.wl__wahl legend { padding: 0; margin-bottom: .8rem; }

.wl__haken { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .6rem; }
.wl__haken input { margin-top: .25rem; accent-color: var(--olive); flex: none; }
.wl__haken span { font-size: .9375rem; line-height: 1.55; }

.wl__haken--einwilligung { margin: 2rem 0; max-width: 58ch; }

/* Die Bot-Falle. NICHT display:none und nicht hidden — beides erkennen
   Bots und lassen das Feld dann aus. Aus dem Bild geschoben wirkt es fuer
   sie wie ein normales Feld, waehrend Auge, Tastatur (tabindex="-1") und
   Screenreader (aria-hidden) es nicht erreichen. */
.wl__falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 860px) {
  .wl__head, .wl__form, .wl__danke { grid-column: 1 / -1; }
  .wl__reihe { grid-template-columns: 1fr; }
}

/* --- 15 FAQ --------------------------------------------------------------- */

.faq { padding: var(--space-l) 0; }
.faq__head { grid-column: 2 / span 6; }

.faq__list {
  grid-column: 2 / span 11;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(32px, 4vw, 72px);
  margin-top: var(--space-s);
}

.faq__col { border-top: 1px solid var(--rule); }

.faq details { border-bottom: 1px solid var(--rule); }

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem);
  line-height: 1.35;
  transition: color .25s var(--ease);
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--taupe-deep); }

.faq summary::after {
  content: '→';
  flex: none;
  color: var(--taupe);
  font-family: var(--sans);
  font-size: .9rem;
  transition: transform .3s var(--ease);
}

.faq details[open] summary::after { transform: rotate(90deg); }
.faq details > div { padding: 0 0 1.6rem; max-width: 58ch; }
.faq details > div p { font-size: .9375rem; color: var(--taupe-deep); }

/* --- 16 Abschluss --------------------------------------------------------- */

.abschluss {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--ivory);
}

.abschluss__bg { position: absolute; inset: 0; z-index: 0; }

/* object-position rechts statt mittig: die drei Frauen stehen im rechten
   Bilddrittel, weil der Verlauf darunter links die Schrift traegt. Bei einem
   hohen, schmalen Fenster schneidet ein mittiger cover-Ausschnitt genau dort
   ab — bei 1024x1366 fehlte die halbe Gruppe. Mit 78 % frisst der Ausschnitt
   stattdessen das leere Feld links auf. */
.abschluss__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 78% center; }

/* Ohne eigenes mix-blend-mode erbt dieses ::after das soft-light von .ph::after.
   Dann verpufft der Schleier ueber dem hellen Abendhimmel und die Zeilen stehen
   praktisch ohne Kontrast. Deckend gemischt traegt der Verlauf die Schrift links
   und laesst das Bild nach rechts frei. */
.abschluss__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  mix-blend-mode: normal;
  background:
    linear-gradient(96deg, rgba(28, 30, 26, .66) 0%, rgba(28, 30, 26, .54) 28%, rgba(38, 42, 35, .20) 58%, rgba(38, 42, 35, 0) 80%),
    linear-gradient(180deg, rgba(28, 30, 26, .05), rgba(28, 30, 26, .16));
}

.abschluss .wrap { position: relative; z-index: 1; padding-block: var(--space-l); }
.abschluss__tx { grid-column: 2 / span 6; }
.abschluss__tx .eyebrow { color: var(--sand); }
.abschluss__tx .eyebrow::before { background: var(--sand); }
.abschluss h2 { margin-bottom: var(--space-s); }

.abschluss__lines p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.15rem, .95rem + .8vw, 1.5rem);
  line-height: 1.5;
  margin-bottom: 1.1rem;
  max-width: 40ch;
  color: rgba(247, 244, 239, .88);
}

.abschluss__lines p.big {
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
  line-height: 1.3;
  color: var(--ivory);
}

.abschluss__foot { margin-top: var(--space-m); display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; }

.abschluss__stamp {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sand);
}

/* --- Fußzeile ------------------------------------------------------------- */

/* Vier Spalten statt einer umbrechenden Zeile: sonst rutscht der längste
   Eintrag allein in die zweite Reihe und die Fußzeile fällt auseinander. */
.site-foot { background: var(--olive); color: var(--ink-invert); padding: var(--space-m) 0 2.5rem; }

.site-foot__in {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
  align-items: start;
  column-gap: clamp(24px, 3vw, 56px);
  row-gap: clamp(40px, 4vw, 64px);
}

.site-foot__brand .mark { margin-bottom: 1.4rem; }

/* .small traegt sonst --taupe-deep und kommt auf Oliv nur auf 1,3:1 */
.site-foot__brand p { margin-bottom: .9rem; color: var(--on-olive-mut); }

.site-foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }

.site-foot__label {
  width: 100%;
  margin: 0 0 .5rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--rule-invert);
  font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--on-olive-mut);
}

/* :not(.btn) ist hier Pflicht: der Selektor ist spezifischer als .btn--invert
   und faerbte den Knopf sonst sandfarben auf elfenbein — also unsichtbar. */
.site-foot a:not(.btn),
.site-foot .linklike {
  color: var(--sand);
  text-decoration: none;
  font-size: .8125rem;
  line-height: 1.5;
  letter-spacing: .04em;
  transition: color .25s var(--ease);
}

.site-foot a:not(.btn):hover, .site-foot .linklike:hover { color: var(--ivory); }

.site-foot__book .small { color: var(--on-olive-mut); margin-bottom: .5rem; }
.site-foot__book .btn { margin-top: .35rem; }

.site-foot__legal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem 2rem;
  padding: 1.5rem clamp(0px, 6vw, 96px) 0 0;
  border-top: 1px solid var(--rule-invert);
  font-size: .8125rem;
  color: var(--on-olive-mut);
}

@media (max-width: 1080px) {
  .site-foot__in { grid-template-columns: 1fr 1fr; }
  .site-foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .site-foot__in { grid-template-columns: 1fr; }
  .site-foot__legal { flex-direction: column; }
}

/* --- Einwilligung --------------------------------------------------------- */

/* Kein Overlay, keine Modal-Falle: die Seite bleibt bedienbar, weil außer der
   Entscheidung selbst nichts gespeichert wird. */
.consent {
  position: fixed;
  inset: auto 0 0;
  z-index: 35;
  background: var(--ivory);
  border-top: 1px solid var(--rule-strong);
  transform: translateY(100%);
  transition: transform .4s var(--ease);
}

.consent.is-on { transform: none; }
.consent[hidden] { display: none; }

.consent__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  padding: 1.4rem 0;
}

.consent__tx { flex: 1 1 32rem; }
.consent__tx .eyebrow { margin-bottom: .7rem; }
.consent__tx .eyebrow::before { width: 32px; margin-bottom: .7rem; }
.consent__tx p:last-child { font-size: .875rem; line-height: 1.65; max-width: 68ch; color: var(--taupe-deep); }

.consent__btns { display: flex; flex-wrap: wrap; gap: .8rem; }
.consent__btns .btn { padding: 1em 1.9em; }

@media (max-width: 860px) {
  .consent__in { padding: 1.1rem 0; gap: 1rem; }
  .consent__tx { flex: 1 1 100%; }
  .consent__tx .eyebrow { display: none; }
  .consent__tx p:last-child { font-size: .8125rem; line-height: 1.5; }
  .consent__btns { width: 100%; gap: .6rem; }
  .consent__btns .btn { flex: 1 1 0; padding: .95em .8em; }
}

/* Der untere Rand ist ein Stapel: Consent trägt die Buchungsleiste,
   die Buchungsleiste trägt den Pfeil. Höhen meldet das Skript. */
body { --consent-h: 0px; --bar-h: 0px; }

/* Der Schalter darf sich nicht als Formularelement verraten — Browser setzen
   auf <button> unter anderem letter-spacing: normal zurück. */
.linklike {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* --- Mobile Buchungsleiste ------------------------------------------------ */

.bar {
  position: fixed;
  inset: auto 0 var(--consent-h) 0;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem var(--pad);
  background: var(--ivory);
  border-top: 1px solid var(--rule);
  transform: translateY(100%);
  transition: transform .35s var(--ease);
}

.bar.is-on { transform: none; }
.bar span { font-size: .8125rem; letter-spacing: .04em; color: var(--taupe-deep); font-variant-numeric: tabular-nums; }
.bar .btn { padding: .95em 1.6em; }

/* ==========================================================================
   BEWEGUNG

   Leitgedanke: Satz und Bild verhalten sich wie im Druck, nicht wie eine
   Web-Vorlage. Zeilen kommen hinter einer Maske hervor, Bilder werden von
   einem Vorhang freigegeben, Haarlinien zeichnen sich. Kein Federn, kein
   Drehen, kein Stagger über ganze Abschnitte.
   ========================================================================== */

/* --- Grundeinblendung ----------------------------------------------------- */

.rise { opacity: 0; transform: translateY(14px); }

.rise.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-m) var(--ease-soft), transform var(--dur-m) var(--ease-soft);
}

/* --- Zeilen hinter der Maske ---------------------------------------------- */

.ln {
  display: block;
  overflow: hidden;
  padding-block: .11em;
  margin-block: -.11em;
}

.ln__i {
  display: block;
  transform: translateY(108%);
  transition: transform var(--dur-m) var(--ease-soft);
  transition-delay: calc(var(--i, 0) * 75ms);
  will-change: transform;
}

.is-in .ln__i { transform: none; }
.is-in .ln__i { will-change: auto; }

/* --- Bildvorhang ---------------------------------------------------------- */

/* Der Ausschnitt fährt von unten auf, das Bild fährt gleichzeitig zurück —
   zwei Geschwindigkeiten, deshalb wirkt es nach Kamera und nicht nach CSS. */
.ph {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-l) var(--ease-soft);
}

.ph.is-in, .rise.is-in .ph { clip-path: inset(0 0 0 0); }

.ph img {
  transform: scale(1.1);
  transition: transform 1.8s var(--ease-soft);
}

.ph.is-in img, .rise.is-in .ph img { transform: none; }

/* Bögen und Vollbildhintergründe bleiben ungeschnitten */
.arch, .hero__ph, .buchung__bg, .abschluss__bg { clip-path: none; }
.arch img { transition-duration: 1.6s; }

/* --- Haarlinien zeichnen sich --------------------------------------------- */

.ruler, .eyebrow::before, .tier__label, .exp__who, .member__craft,
.feats li, .inkl__list li, .fuerwen__q li, .neumond__q li, .faq details {
  --line-origin: left;
}

.ruler { transform: scaleX(0); transform-origin: left; transition: transform var(--dur-l) var(--ease-soft); }
.is-in .ruler, .ruler.is-in { transform: none; }

.eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform var(--dur-m) var(--ease-soft) .1s; }
.is-in .eyebrow::before { transform: none; }
.eyebrow--center::before, .abschluss .eyebrow::before { transform-origin: center; }

/* --- Zeilenlisten: kurzer Versatz, weil es echte Zeilen sind --------------
   Der Behälter selbst trägt .stagger und .is-in. Ein Selektor der Form
   `.is-in .liste li` würde verlangen, dass die Liste INNERHALB des
   eingeblendeten Elements liegt — sie ist aber selbst das eingeblendete
   Element, und die Zeilen blieben für immer unsichtbar. */

.stagger > * {
  opacity: 0;
  transform: translateY(10px);
}

.stagger.is-in > *,
.is-in .stagger > * {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-s) var(--ease-soft), transform var(--dur-s) var(--ease-soft);
  transition-delay: calc(var(--i, 0) * 55ms);
}

/* --- Mondphasen füllen sich nacheinander ---------------------------------- */

.moons i { transform: scale(0); transition: transform .55s var(--ease-soft); }
.moons.is-in i { transform: none; transition-delay: calc(var(--i, 0) * 90ms); }

/* --- Medaillon ------------------------------------------------------------ */

.medallion { transition: transform 1.1s var(--ease-soft), opacity .8s var(--ease-soft); }
.medallion:not(.is-in) { opacity: 0; transform: translate(-50%, 50%) scale(.82); }

/* --- Parallaxe ------------------------------------------------------------ */

/* Bewusst klein: das Bild atmet, es fliegt nicht. */
/* Das Bild ist absichtlich groesser als sein Ausschnitt und haengt oben ueber,
   damit die Parallaxe nach beiden Seiten Luft hat. Ohne position: absolute
   greift top nicht: das 118 % hohe Bild sitzt dann buendig oben, die Parallaxe
   schiebt es nach unten und die Sandflaeche des Ausschnitts blitzt als heller
   Streifen an der Oberkante hervor. */
.px img { position: absolute; inset-inline: 0; height: 118%; top: -9%; will-change: transform; }
.px { overflow: hidden; }

/* --- Lesefortschritt ------------------------------------------------------ */

.progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 60;
  width: 100%;
  height: 1px;
  background: var(--taupe);
  opacity: .7;
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* --- Zustände ------------------------------------------------------------- */

/* Vorhang von unten statt Farbsprung */
.btn { position: relative; overflow: hidden; z-index: 0; }

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateY(101%);
  transition: transform .5s var(--ease-soft);
}

.btn:hover::before { transform: none; }
.btn--primary::before { background: var(--ink); }
.btn--primary:hover { background: var(--olive); }
.btn--ghost::before { background: rgba(154, 132, 108, .12); }
.btn--invert::before { background: var(--sand); }
.btn--outline-light::before { background: rgba(247, 244, 239, .14); }

/* Unterstrich wächst von links */
.site-nav a:not(.is-cta) { position: relative; }

.site-nav a:not(.is-cta)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 1px;
  background: var(--rule-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-soft);
}

.site-nav a:not(.is-cta):hover::after { transform: none; }

.link { background-image: none; }
.mosaic .ph { transition: clip-path var(--dur-l) var(--ease-soft), opacity .5s var(--ease-soft); }
.mosaic .ph img { transition: transform 1.8s var(--ease-soft), filter .6s var(--ease-soft); }
.mosaic .ph:hover img { transform: scale(1.03); }

/* --- Menütafel ------------------------------------------------------------ */

@media (max-width: 860px) {
  .site-nav a, .site-nav__meta {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s var(--ease-soft), transform .5s var(--ease-soft);
  }

  .site-nav.is-open a, .site-nav.is-open .site-nav__meta {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--i, 0) * 55ms + 120ms);
  }
}

/* --- FAQ: auch das Schließen läuft weich ---------------------------------- */

.faq details > div {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .42s var(--ease-soft), opacity .3s var(--ease-soft);
}

.faq details > div > * { overflow: hidden; }
.faq details.is-closing > div { grid-template-rows: 0fr; opacity: 0; }

/* --- Abschalter ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  /* !important, weil main.js das weiche Rollen nach dem Laden direkt am
     Element setzt — ein Inline-Stil schlaegt sonst jede Regel hier. */
  html { scroll-behavior: auto !important; }

  .rise, .rise.is-in,
  .stagger > *,
  .site-nav a, .site-nav__meta {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ln__i, .ruler, .eyebrow::before, .moons i, .medallion, .btn::before,
  .site-nav a::after, .ph img {
    transform: none;
    transition: none;
  }

  .medallion:not(.is-in) { opacity: 1; transform: translate(-50%, 50%); }
  .ph, .ph.is-in { clip-path: none; transition: none; }
  .px img { height: 100%; top: 0; }
  .progress { display: none; }
  * { animation: none !important; }
}

/* --- Umbrüche ------------------------------------------------------------- */

@media (max-width: 1080px) {
  .rail { display: none; }

  .invite__head, .invite__body,
  .bms__head, .bms__outro,
  .ablauf__head, .ablauf__note,
  .neumond__head, .neumond__q, .neumond__outro,
  .exp__head, .exp__intro,
  .freizeit__head, .freizeit__body,
  .ort__head, .ort__body, .ort__map,
  .haus__head, .haus__sub,
  .team__head, .team__intro,
  .fuerwen__head, .fuerwen__body, .fuerwen__q, .fuerwen__end, .fuerwen__cta,
  .faq__head, .faq__list,
  .abschluss__tx,
  .neumond__outro,
  .invite__ph, .fuerwen__ph,
  .kulinarik__tx,
  .inkl__head, .inkl__list, .inkl__out,
  .bms__cols, .timeline, .ablauf__ph {
    grid-column: 1 / -1;
  }

  /* Gestapelt stiessen Ueberschrift und Text bei drei Kapiteln ohne jeden
     Abstand aneinander — bei „Genug Zeit fuer dich" beruehrte die Unterlaenge
     des Titels schon die erste Zeile. Nachgemessen: 0 px, waehrend Einladung,
     Experiences, Ueber uns und FAQ 32 px hatten. Diese drei ziehen nach. */
  .freizeit__body, .ort__body, .inkl__list { margin-top: 2rem; }

  /* Der Kompass stand mit 82 px neben einer zweizeilig umbrechenden Ortsangabe
     und lief optisch in den Absatz darunter. Kleiner, enger, mit Luft nach
     unten. */
  .ort__map { margin-top: 1.5rem; margin-bottom: 2.5rem; gap: .75rem; }
  .ort__map svg { width: 44px; }

  /* Ab hier laeuft .abschluss__tx ueber die ganze Breite (siehe grid-column
     oben), also darf der Schleier nicht mehr nur das linke Drittel decken.
     Diese Regel stand vorher erst bei 860 px — dazwischen lag die Schrift
     ueber dem ungedeckten Teil des Bildes und verlor den Kontrast. */
  .abschluss__bg::after {
    background: linear-gradient(180deg, rgba(41, 40, 36, .72) 0%, rgba(41, 40, 36, .80) 55%, rgba(41, 40, 36, .88) 100%);
  }

  .inkl__head { position: static; }
  .faq__list { grid-template-columns: 1fr; }
  .faq__col + .faq__col { border-top: 0; }
  .neumond__outro, .neumond__q { grid-row: auto; }
  .fuerwen__end, .fuerwen__cta { grid-column: 1 / -1; grid-row: auto; margin-top: var(--space-s); }

  /* Gestapelt braucht keine der Bildspalten mehr ihren Versatz */
  /* Gestapelt steht das Bild links unter dem Text und beruehrt keine
     Fensterkante mehr. Dann ist die halbe Ellipse keine Innenkante, sondern eine
     schiefe Ecke — also zurueck zum Bogen des uebrigen Satzes. */
  .invite__ph, .fuerwen__ph { grid-row: auto; margin-top: var(--space-s); max-width: 420px; }
  .invite__ph, .fuerwen__ph { margin-right: 0; }
  .invite__ph .ph, .fuerwen__ph .ph {
    aspect-ratio: 4 / 5;
    border-radius: 0;
  }
  .invite__ph .ph img, .fuerwen__ph .ph img { object-position: center; }
  .ablauf__ph { margin-top: var(--space-s); max-width: 460px; }
  .neumond__q, .neumond__outro { margin-top: var(--space-s); }

  .exp__item .ph, .exp__item .exp__tx,
  .exp__item--flip .ph, .exp__item--flip .exp__tx,
  .exp__item .exp__tx:only-child,
  .member__ph, .member__tx,
  .member--flip .member__ph, .member--flip .member__tx {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .exp__item .ph { max-width: 520px; margin-bottom: 2.25rem; }
  /* Der Abstand sass am Bild. Jetzt haengen die Links darunter — er gehoert
     unter sie, sonst kleben sie am folgenden Text. */
  .member__ph { max-width: 520px; margin-bottom: 2.25rem; }

  .tier__ph  { grid-column: 1 / span 5; }
  .tier__tx  { grid-column: 7 / span 6; }
  .tier__buy { grid-column: 7 / span 6; margin-top: 2rem; }
}

/* Gestapelt steht der Schieber mittig und beruehrt keine Fensterkante mehr —
   dann ist die halbe Ellipse keine Innenkante, sondern eine schiefe Ecke. */
@media (max-width: 860px) {
  .tier__ph { margin-left: 0; }
  .tier__ph .galerie__spur { border-radius: 0; }
  .tier__ph .galerie__bild { border-radius: 0; }
  .tier__ph .galerie__pfeil--vor { right: 12px; }
  .tier__ph .galerie__fuss { padding-left: 0; }
}

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__copy { order: 2; padding: var(--space-s) var(--pad) var(--space-m); }
  /* Das Bild bleibt auch hier absolut im Ausschnitt (siehe .px img) — statisch
     verliert es seinen Ueberhang und die Parallaxe legt oben Sand frei. */
  /* Gestapelt liegt das Bild als Band ueber der Schrift und beruehrt beide
     Fensterkanten. Eine Rundung nur links waere hier keine Innenkante mehr,
     sondern eine schiefe Ecke — und sie schnitte die Linke an. Also gerade,
     und die Gruppe zurueck in die Mitte. */
  /* Quadratisch statt 16:9: auf Wunsch der Kundin reicht das Bild weiter
     herunter, bis knapp ueber die Ueberschrift. Im Querformat blieb vom
     Motiv — drei Frauen in ganzer Figur — nur ein Streifen. */
  .hero__ph { order: 1; aspect-ratio: 1 / 1; border-radius: 0; }
  .hero__ph img { object-position: center; }
  .medallion { left: 50%; }

  .bms__cols { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .bms__col:nth-child(2), .bms__col:nth-child(3) { margin-top: 0; }

  .timeline { grid-template-columns: 1fr; row-gap: 1.75rem; border-top: 0; }
  .timeline__day { border-top: 1px solid var(--rule); }

  .inkl__list ul { columns: 1; }

  /* Ein Mosaik aus fünf Bildern geht in zwei Spalten nie sauber auf —
     also gestapelt, jedes Bild in seinem eigenen Format. */
  .mosaic { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .mosaic > .ph { grid-column: 1; grid-row: auto; }
  .mosaic .m1, .mosaic .m3, .mosaic .m4, .mosaic .m5 { aspect-ratio: 16 / 9; }
  .mosaic .m2, .mosaic .m6, .mosaic .m7, .mosaic .m8 { aspect-ratio: 4 / 5; }

  .tier__ph, .tier__tx, .tier__buy { grid-column: 1 / -1; }
  /* Die Galerie ging gestapelt auf 300 px Breite herunter und stand als
     Briefmarke ueber einer breiten Textspalte. Auf Wunsch der Kundin nimmt sie
     jetzt die volle Flaeche und laeuft bis an beide Fensterkanten — dieselbe
     Sprache wie die uebrigen Bilder auf dem Telefon (siehe .frieze). */
  .tier__ph {
    max-width: none;
    margin-inline: calc(-1 * var(--pad));
    margin-bottom: 2rem;
  }
  /* Unterschrift und Balken gehoeren zur Schrift, nicht zum Bild: sie bekommen
     den Seitenrand zurueck, sonst kleben sie an der Fensterkante. */
  .tier__ph .galerie__fuss { padding-inline: var(--pad); }

  /* Gestapelt fehlt die Textspalte als Gegengewicht: der versetzte Ausschnitt
     liest sich dann nicht als Collage, sondern als verrutschtes Bild. */
  .kulinarik__extra { width: 100%; margin: 1.25rem 0 0; }

  .ticket__when, .ticket__prices { grid-template-columns: 1fr; }
  .ticket__prices > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 1.2rem; }

  /* Gross wirkt das Zeichen erst neben viel Weissraum. Auf dem Telefon steht
     es ueber dem Bild und wuerde bei 104px den halben Ausschnitt zudecken. */
  /* Der Aufmacher rechnet mit --mark, deshalb aendert sich hier der Wert und
     nicht die Regel — sonst muesste das Polster oben von Hand nachgezogen
     werden und liefe beim naechsten Mal wieder auseinander. */
  :root { --mark: 76px; }
  .site-head.is-stuck .site-head__logo .mark { width: 54px; height: 54px; }

  /* --- Menü als eigene Fläche, nicht als gequetschte Zeile --- */
  .burger { display: block; }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    padding: max(96px, 12vh) var(--pad) max(40px, 6vh);
    background: var(--ivory);
    text-transform: none;
    letter-spacing: 0;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .3s var(--ease), transform .35s var(--ease), visibility .35s var(--ease);
  }

  .site-nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .site-nav a {
    display: flex;
    align-items: baseline;
    gap: 1.1rem;
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--rule);
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.4rem);
    line-height: 1.15;
    color: var(--ink);
  }

  .site-nav a i {
    display: block;
    flex: none;
    font-family: var(--sans);
    font-style: normal;
    font-weight: 500;
    font-size: .6875rem;
    letter-spacing: .24em;
    color: var(--taupe);
  }

  .site-nav a.is-cta {
    margin-top: 2rem;
    padding: 1.15em 2rem;
    border: 0;
    justify-content: center;
    background: var(--olive);
    color: var(--ivory);
    font-family: var(--sans);
    font-weight: 500;
    font-size: .6875rem;
    letter-spacing: .2em;
    text-transform: uppercase;
  }

  .site-nav__meta {
    display: block;
    margin-top: 1.6rem;
    font-size: .8125rem;
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--taupe-deep);
  }

  /* Das Panel liegt IM Header — Logo und Schalter müssen darüber bleiben,
     sonst fängt das Panel den Klick auf das X ab. */
  .site-head__logo, .burger { position: relative; z-index: 45; }

  body.nav-open { overflow: hidden; }
  body.nav-open .site-head { position: fixed; z-index: 50; background: transparent; border-bottom-color: transparent; }
  body.nav-open .totop, body.nav-open .bar { opacity: 0; visibility: hidden; }

  .bar { display: flex; }

  .totop { width: 44px; height: 44px; }

  .sun, .sprig { display: none; }

  .abschluss { min-height: 0; }
}

/* --- Rechtstexte (Unterseiten) -------------------------------------------- */

/* Unterseiten: die Kopfzeile steht hier fest, nicht ueber einem Hero */
.site-head--solid {
  position: static;
  background: var(--ivory);
  border-bottom-color: var(--rule);
}

.legal { padding: var(--space-m) 0 var(--space-l); }

.legal h1 {
  font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4rem);
  line-height: 1.05;
}
.legal__head { grid-column: 2 / span 8; }
.legal__body { grid-column: 2 / span 7; margin-top: var(--space-s); }
/* Die AGB trennen den Schlussblock (Stand, Anschrift) mit einer Linie vom
   letzten Paragraphen. Ohne eigene Regel waere es der dicke Browser-Balken. */
.legal__body hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.6rem 0 1.8rem;
}

.legal__body h2 { font-size: clamp(1.4rem, 1.15rem + .9vw, 1.85rem); max-width: 30ch; margin: var(--space-s) 0 1.1rem; }
.legal__body h3 { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.4rem); margin: 2.25rem 0 .9rem; }
.legal__body ul { padding-left: 1.2rem; max-width: 62ch; }
.legal__body li { margin-bottom: .5rem; }
.legal__body p { font-size: .9375rem; }
.legal__body h2:first-child { margin-top: 0; }

.todo {
  background: var(--sand);
  border-left: 1px solid var(--rule-strong);
  padding: .15rem .5rem;
  font-family: var(--sans);
  font-size: .8125rem;
  letter-spacing: .02em;
  color: var(--taupe-deep);
}

@media (max-width: 1080px) {
  .legal__head, .legal__body { grid-column: 1 / -1; }
}

/* --- Bildergalerie der Unterkuenfte (Kapitel 09) --------------------------- */

/* Waagerechter Schieber mit Scroll-Snap statt eines Karussells in JavaScript:
   ohne Skript blaettert man mit dem Finger oder dem Trackpad weiter, die Pfeile
   sind nur die Bequemlichkeit obendrauf. Faellt JS aus, bleibt die Galerie
   benutzbar — bei einem selbst gebauten Karussell waere sie dann eingefroren. */
.galerie { position: relative; }

.galerie__spur {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 0;
}
.galerie__spur::-webkit-scrollbar { display: none; }

.galerie__bild {
  flex: 0 0 100%;
  scroll-snap-align: center;
  padding: 0;
  border: 0;
  background: var(--sand);
  cursor: zoom-in;
  overflow: hidden;
  border-radius: 0;
}
.galerie__bild img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.galerie__bild:hover img { transform: scale(1.03); }

.galerie__pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(247, 244, 239, .86);
  cursor: pointer;
  transition: background-color .25s var(--ease), opacity .25s var(--ease);
}
.galerie__pfeil:hover { background: var(--ivory); }
.galerie__pfeil[disabled] { opacity: 0; pointer-events: none; }
.galerie__pfeil--zurueck { left: 12px; }
.galerie__pfeil--vor     { right: 12px; }

/* Der Pfeil selbst ist ein gedrehtes Winkelstueck — dieselbe Haarlinie wie
   im Menue und im Raster, damit kein fremdes Icon-Set dazukommt. */
.galerie__pfeil::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 9px;
  height: 9px;
  border-left: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.galerie__pfeil--zurueck::before { transform: translateX(2px) rotate(45deg); }
.galerie__pfeil--vor::before     { transform: translateX(-2px) rotate(-135deg); }


/* --- Lupe ----------------------------------------------------------------- */

.lupe {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(41, 40, 36, .92);
  cursor: zoom-out;
}
.lupe[hidden] { display: none; }
.lupe img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  cursor: default;
}

.lupe__zu {
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  cursor: pointer;
}
.lupe__zu::before, .lupe__zu::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 1px;
  background: var(--ink-invert);
}
.lupe__zu::before { transform: rotate(45deg); }
.lupe__zu::after  { transform: rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .galerie__spur { scroll-behavior: auto; }
  .galerie__bild img { transition: none; }
}

/* Fuss der Galerie: links steht, was zu sehen ist, rechts die Haarlinie als
   Stand. Ein Balken aus Segmenten statt Punkten — Punkte sind ein fremdes
   Vokabular, die Haarlinie benutzt die Seite ohnehin ueberall. */
.galerie__fuss {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  margin-top: 1rem;
}

.galerie__unterschrift {
  flex: 1;
  margin: 0;
  min-height: 2.6em;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--taupe-deep);
}

.galerie__balken {
  flex: 0 0 auto;
  display: flex;
  gap: 5px;
  align-self: center;
}
.galerie__balken i {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--rule);
  transition: background-color .35s var(--ease);
}
.galerie__balken i.ist-da { background: var(--rule-strong); }

/* Die Pfeile erscheinen erst, wenn man das Bild anfasst — im Ruhezustand
   soll die Flaeche ein Foto sein und keine Bedienoberflaeche. */
.galerie__pfeil { opacity: 0; }
.galerie:hover .galerie__pfeil,
.galerie__pfeil:focus-visible { opacity: 1; }
.galerie__pfeil[disabled] { opacity: 0 !important; }

@media (hover: none) {
  .galerie__pfeil { opacity: 1; }
}

/* ==========================================================================
   DANKE-SEITE (/danke)
   Eigene, ruhige Seite nach der Buchung. Sie benutzt die Bausteine der
   Hauptseite (.wrap, .ph, .btn, .eyebrow, .feats) und fuegt nur das Raster
   hinzu — zwei Spalten am Rechner, gestapelt am Telefon.
   ========================================================================== */

.danke { padding: var(--space-m) 0 var(--space-l); background: var(--ivory); }

.danke__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: var(--gutter) clamp(24px, 4vw, 64px);
  align-items: start;
}

/* Kopf und Text stehen links untereinander, das Bild rechts daneben und
   ueber beide Zeilen — so laeuft der Text nicht um ein schmales Hochformat. */
.danke__kopf { grid-column: 1; }
.danke__tx   { grid-column: 1; }
.danke__ph   { grid-column: 2; grid-row: 1 / span 2; margin: 0; position: sticky; top: 6rem; }

.danke__kopf h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
  max-width: 14ch;
  margin-bottom: .8rem;
}
.danke__kopf .lead { max-width: 34ch; }
.danke__kopf p { max-width: 56ch; }

.danke__ph .ph { aspect-ratio: 3 / 4; }

.danke__block { margin-top: var(--space-s); max-width: 60ch; }
.danke__block h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem);
  margin-bottom: .8rem;
}
.danke__block p + p { margin-top: 1rem; }

/* Der Kasten mit der Rueckfrage ist das Einzige, was die Leserin JETZT tun
   soll — er bekommt deshalb als einziger Block eine Kante. */
.danke__block--betont {
  border-left: 1px solid var(--rule-strong);
  padding: .2rem 0 .2rem 1.4rem;
}

.danke__sign {
  margin-top: 1.6rem;
  font-family: var(--serif);
  font-size: 1.25rem;
}

.danke__cta { margin-top: var(--space-s); }

@media (max-width: 860px) {
  .danke__in { grid-template-columns: 1fr; }
  /* Gestapelt kommt das Bild zwischen Begruessung und Ablauf zu stehen. */
  .danke__kopf { grid-column: 1; grid-row: 1; }
  .danke__ph   { grid-column: 1; grid-row: 2; position: static; margin-top: var(--space-s); }
  .danke__tx   { grid-column: 1; grid-row: 3; }
  .danke__ph .ph { aspect-ratio: 1 / 1; }
}