@import url('fonts.css');

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

:root {
  /* Farbe — Verteilung 60/20/10/5/5 aus dem Brandboard */
  --ivory:        #F7F4EF;
  --white:        #FCFBF9;
  --sand:         #E8E0D5;
  --sand-warm:    #EDE4D7;
  --olive:        #454B40;
  --sage:         #7D8174;
  --taupe:        #9A846C;
  --taupe-deep:   #65584C;
  --ink:          #292824;
  --ink-invert:   #F7F4EF;
  --on-olive-mut: #BFC3B6;   /* Sage selbst käme auf Oliv nur auf 2,6:1 */

  --rule:         rgba(154, 132, 108, .30);
  --rule-strong:  #9A846C;
  --rule-invert:  rgba(125, 129, 116, .35);

  --veil-olive:   rgba(69, 75, 64, .22);
  --veil-warm:    rgba(247, 244, 239, .16);

  /* Raster */
  --maxw:   1440px;
  --pad:    clamp(20px, 5vw, 72px);
  --gutter: clamp(16px, 2vw, 32px);

  /* Rhythmus — bewusst ungleich, damit die Seite nicht durchgetaktet wirkt.
     Die Untergrenzen sind bewusst klein: auf dem Telefon stossen zwei Abstaende
     aneinander, aus 2 x 72px wird ein Loch von anderthalb Handbreit. Unterhalb
     von rund 530px Breite uebernimmt darum wieder der vw-Anteil. */
  --space-s:  clamp(32px,  6vw,  80px);
  --space-m:  clamp(48px,  9vw, 128px);
  --space-l:  clamp(64px, 12vw, 176px);

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  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. */
.arch { border-radius: 50% 50% 0 0 / 32% 32% 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: clamp(18px, 2.4vw, 34px) 0;
  transition: background-color .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}

.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 */
.site-head__logo .mark { transition: width .3s var(--ease), height .3s var(--ease); }
.site-head.is-stuck .site-head__logo .mark { width: 58px; height: 58px; }

.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;
  grid-template-columns: 42fr 58fr;
  min-height: 88vh;
  background: var(--sand);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(120px, 15vh, 190px) clamp(28px, 4.5vw, 76px) clamp(64px, 8vh, 96px) 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);
}

.hero h1 { 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; }
.hero__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

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

.invite { padding: var(--space-l) 0; }
.invite__head { grid-column: 2 / span 6; grid-row: 1; }
.invite__body { grid-column: 2 / span 5; grid-row: 2; margin-top: var(--space-s); }

/* Die rechte Hälfte stand über anderthalb Bildschirme leer */
.invite__ph {
  grid-column: 9 / span 4;
  grid-row: 1 / span 2;
  align-self: start;
  margin: clamp(130px, 17vw, 280px) 0 0;
}

.invite__ph .ph { aspect-ratio: 4 / 5; }

.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. ------------------------------------------------- */

.bms { padding: var(--space-l) 0 0; }
.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);
}

.exp__item .ph      { grid-column: 2 / span 5; }
.exp__item .exp__tx { grid-column: 8 / span 5; }

.exp__item--flip .ph      { grid-column: 7 / span 5; grid-row: 1; }
.exp__item--flip .exp__tx { grid-column: 2 / span 4; grid-row: 1; }


.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; }
.kulinarik__ph { grid-column: 2 / span 5; }
.kulinarik__ph .ph { aspect-ratio: 1; }
.kulinarik__tx { grid-column: 8 / span 5; }

/* Rechtsbündig unter dem Quadrat, gleicher Steg wie im Mosaik —
   sonst baumelt das kleine Bild ohne Bezug in der Spalte. */
.kulinarik__extra { margin: 10px 0 0 auto; width: 62%; }
.kulinarik__extra .ph { aspect-ratio: 4 / 5; }

.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 ----------------------------------------------- */

.haus { padding: var(--space-l) 0 var(--space-m); }
.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); }

.tier__ph  { grid-column: 1 / span 3; }
.tier__ph .ph { aspect-ratio: 3 / 4; }
.tier__tx  { grid-column: 5 / 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__ph { margin: var(--space-s) 0 0; }
.inkl__ph .ph { aspect-ratio: 4 / 5; }

.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;
}

.member .ph        { grid-column: 2 / span 4; }
.member .ph        { aspect-ratio: 4 / 5; }
.member__tx        { grid-column: 7 / span 5; }
.member--flip .ph      { grid-column: 7 / span 4; grid-row: 1; }
.member--flip .member__tx { grid-column: 2 / span 4; grid-row: 1; }

.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; }
.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); }

.fuerwen__ph {
  grid-column: 10 / span 3;
  grid-row: 1 / span 2;
  align-self: start;
  margin: clamp(20px, 4vw, 70px) 0 0;
}

.fuerwen__ph .ph { aspect-ratio: 4 / 5; }

.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;
}

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

/* --- 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; }
.abschluss__bg img { width: 100%; height: 100%; object-fit: cover; }

/* 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.
   ========================================================================== */

/* Lange, flach auslaufende Kurve — daher wirkt die Bewegung ruhig statt flott */
:root {
  --ease-soft: cubic-bezier(.16, 1, .3, 1);
  --dur-s: .5s;
  --dur-m: .9s;
  --dur-l: 1.4s;
}

/* --- 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) {
  html { scroll-behavior: auto; }

  .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__ph, .kulinarik__tx,
  .inkl__head, .inkl__list, .inkl__out,
  .bms__cols, .timeline, .ablauf__ph {
    grid-column: 1 / -1;
  }

  .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 */
  .invite__ph, .fuerwen__ph { grid-row: auto; margin-top: var(--space-s); max-width: 420px; }
  .inkl__ph { max-width: 360px; }
  .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--wide .exp__tx,
  .member .ph, .member__tx,
  .member--flip .ph, .member--flip .member__tx {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .exp__item .ph, .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; }
}

@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. */
  .hero__ph { order: 1; aspect-ratio: 16 / 9; }
  .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; }
  .tier__ph { max-width: 300px; margin-bottom: 2rem; }

  /* 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; }

  /* --- 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; }

  /* Der Text liegt hier ueber der ganzen Bildbreite, nicht nur ueber dem dunklen Drittel */
  .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%);
  }

  .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); }
.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; }
}