/* =============================================================================
   befreit-verbunden.com landing page
   Tokens first: the whole page reskins from :root.
   Palette measured from the live site CSS (BRIEF.md), text colours darkened
   where the brand value did not clear 4.5:1.
   ============================================================================= */

:root {
  /* Ink */
  --ink:        #23302b;  /* body on light  ~14.4:1 */
  --ink-soft:   #4f6159;  /* secondary on light ~6.6:1 */
  --ink-faint:  #7b8a83;  /* decorative only, never body text */

  /* Brand greens */
  --green:      #47635b;  /* headings on light 6.3:1 · deep band ground */
  --green-deep: #35473f;  /* pressed states, footer ground */
  --sage:       #71827a;
  --sage-pale:  #dfe5e1;

  /* Grounds */
  --paper:      #f8f9f8;
  --tint:       #e9ede9;
  --white:      #ffffff;

  /* Accent */
  --gold:       #a08967;  /* hairlines, numerals, marks. Never body text. */
  --gold-soft:  #cbb695;

  /* On dark */
  --on-deep:        #ffffff;   /* 6.6:1 on --green */
  --on-deep-soft:   #d7ded9;   /* 4.7:1 on --green */

  /* Type */
  --font-display: 'Cormorant SC', Cormorant, Georgia, 'Times New Roman', serif;
  --font-alt: 'Jost', 'Futura', 'Avenir Next', 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Hero display face. Swapped wholesale by body.hero-bold, see the block after .display. */
  --display-family:   var(--font-display);
  --display-weight:   600;
  --display-tracking: .004em;
  --display-leading:  1.1;
  --font-body: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Space */
  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4rem;
  --s9: 6rem;   --s10: 8rem;

  --band-y: clamp(3.5rem, 9vw, 7rem);
  --wrap: 74rem;
  --measure: 68ch;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow: 0 22px 48px -30px rgba(35, 48, 43, .55);
  --shadow-lift: 0 30px 60px -32px rgba(35, 48, 43, .6);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Anything JS toggles with el.hidden must actually disappear. The UA sheet's
   [hidden]{display:none} loses to any class that sets display, which is how the
   booking gate stayed on screen above the loaded calendar. This wins for every
   element, present and future. */
[hidden] { display: none !important; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 var(--s4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

/* ---------- browser surfaces ---------- */
::selection { background: var(--sage-pale); color: var(--green-deep); }
:root { caret-color: var(--green); scrollbar-color: var(--sage) var(--tint); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--tint); }
::-webkit-scrollbar-thumb { background: var(--sage); border: 3px solid var(--tint); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--green); }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}
.band--deep :focus-visible, .site-foot :focus-visible { outline-color: var(--gold-soft); }

.skip {
  position: absolute; left: var(--s4); top: var(--s4); z-index: 60;
  background: var(--green); color: var(--on-deep);
  padding: var(--s3) var(--s5); border-radius: 2px; text-decoration: none;
  transform: translateY(-220%);
  transition: transform .2s var(--ease);
}
.skip:focus { transform: translateY(0); }

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.band { padding-block: var(--band-y); }
.band--paper { background: var(--paper); }
.band--tint  { background: var(--tint); }
.band--white { background: var(--white); }
.band--close { background: var(--white); }
.band--deep  { background: var(--green); color: var(--on-deep); }
.band--deep p { color: var(--on-deep-soft); }

/* ---------- type ---------- */
.display {
  font-family: var(--display-family);
  font-weight: var(--display-weight);
  font-size: clamp(2.05rem, 8.4vw, 4.1rem);
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  color: var(--green);
  margin: 0;
  text-wrap: balance;
}
.display span { display: block; }
.display span + span { color: var(--ink); }

/* Alternative hero voice: Jost 700, the face her navigation already uses.
   Same size, tighter leading and tracking, because a grotesque at the size of a
   small-caps serif needs both pulled in. Only the hero h1 changes; every other
   heading stays Cormorant SC, so the page keeps one identity.
   Toggle: <body class="hero-bold">. */
body.hero-bold {
  --display-family:   var(--font-alt);
  --display-weight:   700;
  --display-tracking: -.018em;
  --display-leading:  1.08;   /* umlaut dots collide with the line above below this */
}

.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 4.4vw, 2.6rem);
  line-height: 1.16;
  letter-spacing: .006em;
  color: var(--green);
  margin: 0 0 var(--s4);
  text-wrap: balance;
}
.h2--light { color: var(--on-deep); }

.lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: var(--ink-soft);
  max-width: 56ch;
  margin-bottom: var(--s6);
}
.band--deep .lede { color: var(--on-deep-soft); }

.micro {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 42ch;
}

.rule {
  display: block;
  width: 3.25rem;
  height: 2px;
  background: var(--gold);
  margin: var(--s5) 0;
}

.link {
  display: inline-block;
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: .02em;
  color: var(--green);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--gold);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.link:hover { color: var(--green-deep); border-bottom-color: var(--green); }
.link--inline {
  border-bottom-width: 1px;
  font-weight: 500;
  font-size: inherit;
  letter-spacing: 0;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: .8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .28s var(--ease), color .28s var(--ease),
              border-color .28s var(--ease), box-shadow .28s var(--ease),
              transform .28s var(--ease);
}
.btn--primary {
  background: var(--green);
  color: var(--on-deep);
  box-shadow: var(--shadow);
}
.btn--primary:hover { background: var(--green-deep); box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); box-shadow: var(--shadow); }

.btn--ghost {
  background: transparent;
  color: var(--green);
  border-color: var(--sage-pale);
  min-height: 2.75rem;
  padding: .55rem 1.1rem;
  font-size: .8125rem;
}
.btn--ghost:hover { border-color: var(--green); background: var(--white); }

.btn--sm { min-height: 2.875rem; padding: .6rem 1.1rem; font-size: .8125rem; letter-spacing: .04em; }

/* =============================================================================
   HEADER
   ============================================================================= */
.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) clamp(1.25rem, 5vw, 3rem);
  background: rgba(248, 249, 248, .92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-head.is-stuck {
  border-bottom-color: var(--sage-pale);
  box-shadow: 0 10px 30px -26px rgba(35, 48, 43, .6);
}
.site-head__brand { display: block; line-height: 0; flex: none; }
.site-head__claim {
  display: none;                 /* desktop only, see the 64rem block */
  margin: 0;
  max-width: 34ch;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--ink-soft);
  border-left: 1px solid var(--sage-pale);
  padding-left: var(--s5);
}
.site-head__brand img { width: clamp(9.5rem, 30vw, 14.5rem); height: auto; }
.site-head__cta { white-space: nowrap; }

/* =============================================================================
   1 · HERO
   ============================================================================= */
.hero {
  position: relative;
  overflow-x: clip;
  padding: clamp(2rem, 6vw, 3.5rem) clamp(1.25rem, 5vw, 3rem) clamp(3rem, 8vw, 5.5rem);
  max-width: var(--wrap);
  margin-inline: auto;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 46% at 46% 34%, rgba(113, 130, 122, .16), rgba(113, 130, 122, 0) 68%);
  pointer-events: none;
  z-index: -1;
}

.hero__figure { margin: 0 0 var(--s6); max-width: 24rem; }
.hero__frame {
  display: block;
  border-radius: 999px 999px 4px 4px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--sage-pale);
}
.hero__figure img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 26%; }

/* Name and methods directly under the portrait, as the control does it: the face,
   then who it belongs to, then what she actually works with. */
.hero__caption { display: grid; gap: var(--s1); padding-top: var(--s4); }
.hero__caption-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: .03em;
  line-height: 1.2;
  color: var(--green);
}
/* On a 390 px screen this list runs three lines and pushes the promise past the
   fold. Every one of these four verfahren is a heading in "Wie ich arbeite", so
   the phone loses nothing by meeting them there instead. */
.hero__caption-methods { display: none; font-size: .8125rem; line-height: 1.55; color: var(--ink-soft); }
.hero__caption-role { font-size: .8125rem; font-weight: 600; color: var(--ink); }

/* In the control this promise is part of the headline. Here it stays its own
   slot, because the variant generator writes into it, so it earns its weight
   through size and ink instead of through the display face. */
.hero__question {
  font-size: clamp(1.1875rem, 3.4vw, 1.5rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--ink);
  max-width: 36ch;
  margin-bottom: var(--s5);
}
.hero__body { color: var(--ink-soft); max-width: 46ch; }
.hero__cta { margin-top: var(--s6); }
.hero__cta .btn { width: 100%; }
.hero__cta .micro { margin-top: var(--s4); }

/* -----------------------------------------------------------------------------
   Phone hero order. Meta traffic is mobile and the promise is what was clicked,
   so the headline goes first and the portrait shrinks to a compact arch beside
   its own caption. The figure and the text block are siblings, so the text
   wrapper dissolves with display:contents and its children take their own place
   in the hero grid. Nothing here applies from 640 px up: tablet and desktop keep
   the portrait-first composition.
   -------------------------------------------------------------------------- */
@media (max-width: 39.999rem) {
  /* One row-gap carries the whole vertical rhythm here. Margins on grid items do
     not collapse and fought the row sizing, so every hero child is zeroed and the
     grid spaces them. */
  .hero { display: grid; row-gap: var(--s5); padding-top: var(--s5); }
  .hero__text { display: contents; }

  .display        { order: 1; }
  .rule           { order: 2; margin: 0; }
  .hero__question { order: 3; margin: 0; }
  .hero__figure   { order: 4; }
  .hero__body     { order: 5; margin: 0; }
  .hero__cta      { order: 6; margin: 0; }

  /* compact arch, 46% of the column, name and role alongside it */
  .hero__figure {
    display: grid;
    grid-template-columns: 46% minmax(0, 1fr);
    align-items: center;
    column-gap: var(--s4);
    max-width: none;
    margin: var(--s2) 0;
  }
  .hero__caption { padding-top: 0; gap: var(--s2); }
  .hero__caption-name { font-size: 1.125rem; }
}

/* one authored moment: the hero assembles itself once, on load */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(7px);
  }
  .js .reveal.is-in {
    opacity: 1;
    transform: none;
    filter: blur(0);
    transition: opacity .9s var(--ease), transform 1.05s var(--ease), filter .9s var(--ease);
  }
  /* The portrait travels a little further than the words. Its resting state has
     to be restated: it matches .reveal.is-in on specificity and sits after it, so
     without this line the figure kept its 24px offset and 98.5% scale forever. */
  .js .hero__figure.reveal { transform: translateY(24px) scale(.985); }
  .js .hero__figure.reveal.is-in { transform: none; }
}

/* =============================================================================
   2 · IDENTITÄT
   ============================================================================= */
.ident {
  background: var(--white);
  border-block: 1px solid var(--sage-pale);
  padding-block: var(--s5);
}
/* One compact centred row, not three items pushed to the far edges of a wide
   page. Hairlines separate them; on a phone the row stacks and the hairlines
   move to the top of each item. */
.ident__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  text-align: center;
}
.ident__item { margin: 0; }
.ident__item + .ident__item { padding-top: var(--s4); border-top: 1px solid var(--sage-pale); width: 100%; }
.ident__vfp { display: flex; align-items: center; justify-content: center; gap: var(--s3); text-align: left; }
.ident__vfp img { width: 56px; height: 56px; flex: none; }
.ident__link {
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.ident__link:hover { color: var(--green-deep); border-bottom-color: var(--green); }
.ident__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: .03em;
  color: var(--green);
  margin: 0;
}
.ident__role { font-weight: 600; font-size: .9375rem; margin: 0; color: var(--ink); }
.ident__meta { font-size: .875rem; color: var(--ink-soft); margin: 0; }

/* =============================================================================
   3 · WIEDERERKENNUNG
   ============================================================================= */
.topics { margin-top: var(--s2); border-top: 1px solid var(--sage-pale); }
.topic { border-bottom: 1px solid var(--sage-pale); }

/* The four rows used to link out to her topic pages. Those are placeholders on
   staging, so each row now opens in place and ends at the one thing this page
   can actually deliver: the Kennenlerngespräch. Same disclosure mechanics as the
   FAQ, so there is one open-and-close behaviour on the page, not two. */
.topic__qa summary {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s2) var(--s4);
  padding: var(--s5) 0;
  cursor: pointer;
  list-style: none;
}
.topic__qa summary::-webkit-details-marker { display: none; }
/* The global focus ring is a heavy dark rectangle across a full-width row. Keyboard
   users still get an unmistakable indicator, just a lighter one, and a click never
   draws it. */
.topic__qa summary:focus { outline: none; }
.topic__qa summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 4px;
}
.topic__qa summary::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.topic__qa summary:hover::after,
.topic__qa summary:focus-visible::after,
.topic__qa[open] summary::after { transform: scaleX(1); }

.topic__text { display: grid; gap: var(--s2); }
.topic__title {
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 3.4vw, 1.5rem);
  letter-spacing: .02em;
  color: var(--green);
  line-height: 1.25;
  transition: color .25s var(--ease);
}
.topic__qa summary:hover .topic__title { color: var(--green-deep); }
.topic__line {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46ch;
}
.topic__mark {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  transition: transform .4s var(--ease), stroke .25s var(--ease);
}
.topic__qa[open] .topic__mark { transform: rotate(180deg); stroke: var(--green); }
.topic__qa summary:hover .topic__mark { stroke: var(--green); }

/* The animated wrapper holds exactly one child, which is what the 0fr-to-1fr
   trick needs. Padding lives on that child, so the collapsed row really is zero
   high and the copy is not a stretched grid item. That stretching is what made
   the CTA underline run the full width of the row. */
.topic__inner {
  display: grid;
  gap: var(--s5);
  padding-top: var(--s4);
  padding-bottom: var(--s7);
}
.topic__copy p {
  font-size: .9375rem;
  color: var(--ink-soft);
  max-width: 58ch;
  margin-bottom: var(--s4);
}
.topic__copy .link { font-size: .875rem; }

.topic__figure {
  margin: 0;
  max-width: 15rem;
  border-radius: 4px;
  overflow: hidden;
  background: var(--sage-pale);
  box-shadow: var(--shadow);
}
.topic__figure img { width: 100%; aspect-ratio: 1; object-fit: cover; }

@media (prefers-reduced-motion: no-preference) {
  .js .topic__body { display: grid; grid-template-rows: 1fr; }
  .js .topic__body > * { min-height: 0; }
  .js .topic__qa.is-animating .topic__body { transition: grid-template-rows .42s var(--ease); overflow: hidden; }
  .js .topic__qa.is-closing .topic__body { grid-template-rows: 0fr; }
  .js .topic__qa.is-opening .topic__body { grid-template-rows: 0fr; }
  .js .topic__qa.is-opening.is-animating .topic__body { grid-template-rows: 1fr; }
}

.reframe {
  margin-top: var(--s6);
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 3.2vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--ink);
  max-width: 34ch;
  padding-left: var(--s5);
  border-left: 2px solid var(--gold);
}

/* =============================================================================
   4 · WUNSCH
   ============================================================================= */
.wish__list { margin: 0 0 var(--s6); display: grid; gap: var(--s3); }
.wish__list li {
  position: relative;
  padding-left: var(--s5);
  font-size: clamp(1.0625rem, 2.6vw, 1.1875rem);
  line-height: 1.5;
  color: var(--on-deep);
}
.wish__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: .875rem; height: 1px;
  background: var(--gold-soft);
}
.wish__bridge {
  max-width: 48ch;
  padding-top: var(--s5);
  border-top: 1px solid rgba(215, 222, 217, .3);
}

/* =============================================================================
   5 · ARBEITSWEISE
   ============================================================================= */
.methods { display: grid; gap: 0; border-top: 1px solid var(--sage-pale); }
.method { padding: var(--s5) 0; border-bottom: 1px solid var(--sage-pale); }
.method__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.0625rem, 2.8vw, 1.25rem);
  letter-spacing: .025em;
  color: var(--green);
  margin: 0 0 var(--s2);
  line-height: 1.3;
}
.method p { font-size: .9375rem; color: var(--ink-soft); max-width: 46ch; }

.method-note { margin-top: var(--s7); display: grid; gap: var(--s5); }
.method-note__figure { margin: 0; overflow: hidden; border-radius: 3px; box-shadow: var(--shadow); }
.method-note__figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.method-note__text p { color: var(--ink-soft); margin-bottom: var(--s5); }

/* =============================================================================
   6 · PRAXISRÄUME
   Three real room photos in an asymmetric mosaic, never a row of equal cards.
   The arrival details sit inside the same block, so the room and the way to it
   are read together.
   ============================================================================= */
.rooms { display: grid; gap: var(--s5); }
.rooms__text .lede { margin-bottom: var(--s4); color: var(--ink); font-weight: 500; text-wrap: balance; }
.rooms__text p { color: var(--ink-soft); }

.rooms figure {
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
  background: var(--sage-pale);
  box-shadow: var(--shadow);
}
.rooms figure img { width: 100%; height: 100%; object-fit: cover; }
.rooms__lead { aspect-ratio: 3 / 2; margin-top: var(--s2); }
.rooms__a, .rooms__b { aspect-ratio: 3 / 2; }

.place {
  font-style: normal;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--ink-soft);
  padding-top: var(--s5);
  border-top: 1px solid var(--sage-pale);
}
.place p { margin-bottom: var(--s3); max-width: 34ch; }
.place__name { font-weight: 600; color: var(--ink); margin-bottom: var(--s1); }
.place__street { color: var(--ink); margin-bottom: var(--s4); }
.place__hours { color: var(--ink-soft); }
.place .link { margin-top: var(--s2); }

/* =============================================================================
   7 · ÜBER MIRA
   ============================================================================= */
.about { display: grid; gap: var(--s6); }
.about__figure {
  margin: 0;
  max-width: 17rem;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--sage-pale);
}
.about__figure img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.about__text p { color: var(--ink-soft); }
.about__text .link { margin-top: var(--s2); }

/* =============================================================================
   8 · QUALIFIKATION
   ============================================================================= */
.quals { display: grid; gap: var(--s6); }
.quals__list { display: grid; gap: var(--s4); }
.quals__list li {
  position: relative;
  padding-left: var(--s5);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 52ch;
}
.quals__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .68em;
  width: .75rem; height: 1px;
  background: var(--gold);
}
.quals__seal { margin: 0; }
.quals__seal img { width: 5.5rem; height: auto; opacity: .9; }

/* =============================================================================
   9 · SO LÄUFT ES
   ============================================================================= */
.steps { display: grid; gap: var(--s6); margin-top: var(--s6); }
.step { position: relative; padding-top: var(--s5); border-top: 1px solid rgba(215, 222, 217, .32); }
.step__num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--gold-soft);
  margin-bottom: var(--s3);
  font-variant-numeric: lining-nums;
}
.step__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.125rem, 3vw, 1.375rem);
  letter-spacing: .025em;
  color: var(--on-deep);
  margin: 0 0 var(--s2);
  line-height: 1.3;
}
.step p { font-size: .9375rem; max-width: 42ch; }

/* =============================================================================
   10 · FRAGEN
   ============================================================================= */
.faq { max-width: 52rem; }
.qa { border-bottom: 1px solid var(--sage-pale); }
.qa:first-of-type { border-top: 1px solid var(--sage-pale); }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 3vw, 1.25rem);
  letter-spacing: .02em;
  line-height: 1.35;
  color: var(--green);
  transition: color .25s var(--ease);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--green-deep); }
.qa__mark {
  flex: none;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .4s var(--ease), stroke .25s var(--ease);
}
.qa[open] .qa__mark { transform: rotate(180deg); stroke: var(--green); }
.qa summary:hover .qa__mark { stroke: var(--green); }

.qa__body { padding-bottom: var(--s5); }
.qa__body p { font-size: .9375rem; color: var(--ink-soft); max-width: 60ch; }

/* The fee facts, formerly a link to her Ablauf page. Two columns so the amount is
   findable without reading the row. */
.qa__fees { margin: var(--s4) 0; max-width: 34rem; }
.qa__fees li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--sage-pale);
  font-size: .9375rem;
  color: var(--ink-soft);
}
.qa__fees li span:last-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
.qa__feenote { font-size: .8125rem !important; line-height: 1.6; margin-bottom: var(--s4); }

@media (prefers-reduced-motion: no-preference) {
  .js .qa__body { display: grid; grid-template-rows: 1fr; }
  .js .qa__body > * { min-height: 0; }
  .js .qa.is-animating .qa__body { transition: grid-template-rows .42s var(--ease); overflow: hidden; }
  .js .qa.is-closing .qa__body { grid-template-rows: 0fr; }
  .js .qa.is-opening .qa__body { grid-template-rows: 0fr; }
  .js .qa.is-opening.is-animating .qa__body { grid-template-rows: 1fr; }
}

/* =============================================================================
   11 · ABSCHLUSS
   ============================================================================= */
.close { display: grid; gap: var(--s6); }
.close__text .btn { width: 100%; max-width: 24rem; }
.close__micro { margin-top: var(--s4); }

.close__address {
  padding-top: var(--s5);
  border-top: 1px solid var(--sage-pale);
  font-style: normal;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.close__address p { margin-bottom: var(--s2); }
.close__address p:first-child { font-weight: 600; color: var(--ink); }
.close__contact { display: grid; gap: var(--s1); margin-top: var(--s4); }
.close__contact a {
  color: var(--green);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color .25s var(--ease);
}
.close__contact a:hover { text-decoration-color: var(--green); }

/* =============================================================================
   FOOTER
   ============================================================================= */
.site-foot {
  background: var(--green-deep);
  color: var(--on-deep-soft);
  padding-block: var(--s8) var(--s6);
  font-size: .875rem;
  line-height: 1.75;
}
.site-foot__grid { display: grid; gap: var(--s6); }
.site-foot__brand img { width: 11rem; margin-bottom: var(--s3); }
.site-foot__brand p { color: var(--on-deep-soft); margin: 0; }
.site-foot__label {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .06em;
  color: var(--on-deep);
  margin: 0 0 var(--s2);
}
.site-foot__col p { margin: 0 0 var(--s2); }
.site-foot__col li { margin-bottom: var(--s1); }
.site-foot a {
  color: var(--on-deep-soft);
  text-decoration: underline;
  text-decoration-color: rgba(203, 182, 149, .55);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.site-foot a:hover { color: var(--on-deep); text-decoration-color: var(--gold-soft); }

.site-foot__note {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid rgba(215, 222, 217, .22);
}
.site-foot__note p { max-width: 62ch; font-size: .8125rem; line-height: 1.7; }
.site-foot__copy { margin-top: var(--s4); color: rgba(215, 222, 217, .75); }

/* =============================================================================
   STICKY MOBILE CTA
   ============================================================================= */
.stickybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) clamp(1rem, 5vw, 1.5rem);
  padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(160%) blur(12px);
  border-top: 1px solid var(--sage-pale);
  transform: translateY(110%);
  transition: transform .45s var(--ease);
}
.stickybar.is-in { transform: translateY(0); }
.stickybar__label {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.35;
  color: var(--ink-soft);
  max-width: 12rem;
}
.stickybar .btn { flex: none; }

@media (min-width: 900px) { .stickybar { display: none !important; } }

/* =============================================================================
   CONSENT BANNER
   A bottom sheet in her palette. It outranks the sticky CTA: while a visitor is
   being asked for a decision, nothing else competes at the bottom edge.
   ============================================================================= */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--white);
  border-top: 1px solid var(--sage-pale);
  box-shadow: 0 -18px 46px -30px rgba(35, 48, 43, .55);
  padding: var(--s5) clamp(1.25rem, 5vw, 3rem);
  padding-bottom: calc(var(--s5) + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%);
  transition: transform .45s var(--ease);
}
.consent.is-in { transform: translateY(0); }
.consent__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  display: grid;
  gap: var(--s4);
}
.consent__text {
  margin: 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 60ch;
}
.consent__text a {
  color: var(--green);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.consent__actions .btn { width: 100%; }
body.consent-open .stickybar { display: none !important; }
@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }

@media (min-width: 40rem) {
  .consent__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s6); }
  .consent__actions { grid-template-columns: repeat(2, minmax(11rem, 1fr)); }
}

/* a footer control that reads as a link but does a job */
.site-foot__linkbtn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--on-deep-soft);
  text-decoration: underline;
  text-decoration-color: rgba(203, 182, 149, .55);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  cursor: pointer;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.site-foot__linkbtn:hover { color: var(--on-deep); text-decoration-color: var(--gold-soft); }
@media (prefers-reduced-motion: reduce) { .stickybar { transition: none; } }

/* =============================================================================
   ≥ 640px
   ============================================================================= */
@media (min-width: 40rem) {
  .hero__cta { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
  .hero__cta .btn { width: auto; }
  .hero__cta .micro { margin-top: 0; flex: 1 1 16rem; }

  .hero__caption-methods { display: block; }

  .topic__qa summary { column-gap: var(--s6); }
  /* The picture takes its height from the text beside it rather than dictating
     the row. A fixed square left a block of dead space under the CTA whenever the
     copy was shorter than 300 px. */
  /* The picture takes its height from the text beside it rather than dictating
     the row. A fixed square left a block of dead space under the CTA whenever the
     copy was shorter than 300 px. The image is positioned out of flow so its own
     intrinsic 1:1 cannot feed back into the row height. */
  .topic__inner { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s6); align-items: stretch; }
  .topic__figure { max-width: none; position: relative; aspect-ratio: auto; min-height: 11rem; }
  .topic__figure img { position: absolute; inset: 0; width: 100%; height: 100%; }

  .rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); }
  .rooms__text, .rooms__lead, .rooms__place { grid-column: 1 / -1; }
  .rooms__a, .rooms__b { aspect-ratio: 4 / 3; }

  .quals__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
  .close__text .btn { width: auto; }
}

/* =============================================================================
   ≥ 1024px  (house rule: everything stacks below this)
   ============================================================================= */
@media (min-width: 64rem) {
  body { font-size: 1.09375rem; }

  .hero {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: clamp(3rem, 6vw, 5.5rem);
    padding-block: clamp(3.5rem, 6vw, 6rem) clamp(4rem, 8vw, 7rem);
  }
  .hero__figure { margin: 0; max-width: none; }
  .hero__text { padding-block: var(--s4); }

  /* The positioning line only appears where the header has room for it. */
  .site-head__claim { display: block; margin-right: auto; }

  /* One line, never two. Wrapping left the third item alone on a second row with
     an orphaned rule, so the row does not wrap: the three items share the width
     and their own text wraps inside them instead. */
  .ident__grid { flex-direction: row; flex-wrap: nowrap; gap: var(--s5); text-align: left; }
  .ident__item { flex: 0 1 auto; }
  .ident__item + .ident__item {
    padding-top: 0; border-top: 0;
    padding-left: var(--s5); border-left: 1px solid var(--sage-pale);
    width: auto;
  }

  .topic__qa summary { padding-block: var(--s6); grid-template-columns: minmax(0, 22rem) minmax(0, 1fr) auto; }
  .topic__text { display: contents; }
  .topic__title { grid-column: 1; grid-row: 1; }
  .topic__line  { grid-column: 2; grid-row: 1; max-width: 40ch; }
  .topic__mark  { grid-column: 3; grid-row: 1; }

  .wish { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); align-items: start; }
  .wish .h2 { grid-column: 1; }
  .wish__list { grid-column: 1; margin-bottom: 0; }
  .wish__bridge { grid-column: 2; grid-row: 1 / span 2; align-self: end; border-top: 0; padding-top: 0; padding-left: var(--s6); border-left: 1px solid rgba(215, 222, 217, .3); }

  .methods { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s7); }
  .method { padding-block: var(--s6); }
  .method:nth-child(1), .method:nth-child(2) { border-top: 0; }

  .method-note { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); align-items: center; }

  /* All three room photos are landscape, so none of them gets forced into a
     portrait slot: the statement and the arrival details share the top row, one
     wide establishing shot carries the middle, and the two closer views pair
     underneath it. */
  .rooms {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s6);
    row-gap: var(--s6);
    align-items: start;
  }
  .rooms__text  { grid-column: 1 / 8;  grid-row: 1; }
  .rooms__place { grid-column: 9 / 13; grid-row: 1; }
  .rooms__lead  { grid-column: 1 / -1; grid-row: 2; aspect-ratio: 2 / 1; margin-top: 0; }
  .rooms__a     { grid-column: 1 / 7;  grid-row: 3; aspect-ratio: 3 / 2; }
  .rooms__b     { grid-column: 7 / 13; grid-row: 3; aspect-ratio: 3 / 2; }
  .rooms__place .place { padding-top: 0; border-top: 0; padding-left: var(--s5); border-left: 2px solid var(--gold); }

  .about { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--s8); align-items: center; }
  .about__figure { max-width: none; }

  .quals { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr) auto; gap: var(--s7); align-items: start; }
  .quals__head .lede { margin-bottom: 0; }
  .quals__list { grid-template-columns: minmax(0, 1fr); }
  .quals__seal img { width: 6.5rem; }

  .close { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s8); align-items: start; }
  .close__address { padding-top: 0; border-top: 0; padding-left: var(--s6); border-left: 1px solid var(--sage-pale); }

  .site-foot__grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s7); }
}


/* ---- Booking block (Calendly, loaded on click) ---- */
.booking { grid-column: 1 / -1; margin-top: var(--s6); background: var(--white); color: var(--ink); border: 1px solid var(--sage-pale); border-radius: 12px; overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,.05); }
.booking__gate { padding: var(--s6) var(--s5); display: grid; gap: var(--s3); justify-items: start; }
.booking__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.375rem, 3.2vw, 1.75rem); color: var(--green); margin: 0; line-height: 1.2; }
.booking__note { margin: 0; color: var(--ink-soft); font-size: .9375rem; max-width: 60ch; }
.booking__alt { margin: 0; }
.booking__alt a { color: var(--green); }
.calendly-inline-widget { min-width: 320px; height: 760px; }
@media (max-width: 40rem) { .calendly-inline-widget { height: 900px; } }