/* ==========================================================================
   HOLD SPACE — shared stylesheet
   Implements the Claude Design artboards:
     "HOLD SPACE Redesign - Rund" (2A desktop 1440 / 2B mobile 390)  -> /
     "IV Drip Bar"                (1A desktop 1440 / 1B mobile 390)  -> /ivdrip
   The two artboards are merged into one fluid layout: type scales with
   clamp() between the 390px and 1440px artboard values, layout switches at
   the --bp breakpoint (900px).
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Both CI faces are self-hosted; no third-party font requests are made.
   Optician Sans is built from the TTF (the OTF that shipped with the design
   bundle has no umlaut glyphs, which is what made Ä/Ö/Ü fall back before).
   Rowan is not on Google Fonts — the CSS API answers 400 "font family not
   found" for every axis spelling, which is why body copy rendered in Georgia
   until the real font file was supplied.                                 */

/* Rowan Regular — supplied by the client, self-hosted. 353 glyphs, full
   German coverage (umlauts, ß, „ “).
   There is deliberately no italic @font-face: no Rowan Italic file exists
   yet, and declaring one that 404s would push italic text onto Georgia while
   roman text stayed Rowan. Without it the browser obliques Rowan itself, so
   quotes stay in the CI face. Add the real italic here when it arrives. */
@font-face {
  font-family: 'Rowan';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Rowan-Regular.woff2') format('woff2'),
       url('../fonts/Rowan-Regular.otf') format('opentype');
}

@font-face {
  font-family: 'Optician Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Optician-Sans.woff2') format('woff2'),
       url('../fonts/Optician-Sans.ttf') format('truetype');
}

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* palette */
  --espresso: #3A2D28;
  --cream:    #F6EBE2;
  --stone:    #E8E2D6;
  --sand:     #DED7CA;
  --clay:     #B87856;
  --lavender: #C6B6E6;
  --white:    #FFFFFF;

  --ink-70: rgba(58, 45, 40, 0.78);
  --ink-60: rgba(58, 45, 40, 0.68);
  --ink-50: rgba(58, 45, 40, 0.55);
  --rule:   rgba(58, 45, 40, 0.18);
  --rule-soft: rgba(58, 45, 40, 0.12);

  --cream-80: rgba(246, 235, 226, 0.82);
  --cream-60: rgba(246, 235, 226, 0.62);
  --cream-50: rgba(246, 235, 226, 0.5);
  --rule-dark: rgba(246, 235, 226, 0.22);

  /* type stacks — Optician Sans and Rowan are both self-hosted.
     Rowan is NOT available from Google Fonts (the API answers 400 for every
     axis spelling), so it has to ship as a file; see the @font-face below. */
  --font-display: 'Optician Sans', 'Archivo', system-ui, sans-serif;
  --font-body: Rowan, Georgia, 'Iowan Old Style', Palatino, 'Times New Roman', serif;

  /* metrics */
  --maxw: 1440px;
  --pad: clamp(18px, 3.4vw, 48px);
  --bp: 900px;
  --r-card: 22px;

  /* The design presents the whole page as one rounded block on a stone
     ground, inset from the viewport edge. */
  --page-inset: clamp(10px, 0.4rem + 1.4vw, 36px);
  --page-radius: clamp(18px, 0.8rem + 1.2vw, 32px);
  --r-media: 18px;
  --r-pill: 999px;

  /* fluid type — clamp(mobile, …, desktop) mapped across 390px…1440px */
  --fs-hero-iv:    clamp(42px, 1.325rem + 5.333vw, 98px);
  --fs-hero-home:  clamp(30px, 1.225rem + 2.667vw, 58px);
  --fs-h2-xl:      clamp(32px, 1.256rem + 3.048vw, 64px);
  --fs-h2-lg:      clamp(32px, 1.444rem + 2.286vw, 56px);
  --fs-h2-md:      clamp(32px, 1.536rem + 1.905vw, 52px);
  --fs-statement:  clamp(34px, 1.382rem + 3.048vw, 66px);
  --fs-statement-iv: clamp(28px, 1.054rem + 2.857vw, 58px);
  --fs-pullquote:  clamp(26px, 1.300rem + 1.333vw, 40px);
  --fs-lead:       clamp(16px, 0.814rem + 0.762vw, 24px);
  --fs-h3-xl:      clamp(26px, 1.254rem + 0.762vw, 40px);
  --fs-h3-lg:      clamp(21px, 1.081rem + 0.952vw, 31px);
  --fs-h3-md:      clamp(21px, 1.165rem + 0.667vw, 28px);
  --fs-h3-sm:      clamp(19px, 1.041rem + 0.571vw, 25px);
  --fs-body:       clamp(15px, 0.881rem + 0.143vw, 16.5px);
  --fs-body-sm:    clamp(14px, 0.821rem + 0.143vw, 15.5px);
  --fs-eyebrow:    clamp(10.5px, 0.601rem + 0.143vw, 12px);
}

/* --- Reset --------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  /* Stone is the ground the rounded block sits on, not the page colour.
     The block itself is cream; see main, below. */
  background: var(--stone);
  padding: var(--page-inset);
  overflow-x: clip;
  color: var(--espresso);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Author `display` rules outrank the UA stylesheet's [hidden] rule, so the
   hidden tab panels need this to actually stay hidden. */
[hidden] { display: none !important; }

img { max-width: 100%; display: block; }
a { color: var(--clay); text-decoration: none; }
a:hover { color: var(--espresso); }
button { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.98;
  margin: 0;
}

:where(a, button, input, textarea, select, iframe, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Sprunglink zum Inhalt.
   Erstes Element im body, fuer die Maus unsichtbar, beim Tabben sichtbar.
   Ohne ihn liegen auf der Startseite rund ein Dutzend Tabstopps — Logo,
   Navigation, Sprachumschalter, Buchen, Mein Konto — vor dem Inhalt, und
   zwar auf jeder Seite neu.

   Nicht mit display:none oder visibility:hidden arbeiten: beides nimmt das
   Element aus der Tabreihenfolge, dann ist der Link gar nicht erreichbar. */
.skip-link {
  position: absolute;
  left: var(--page-inset);
  top: 0;
  z-index: 100;
  transform: translateY(-120%);
  padding: 12px 20px;
  background: var(--espresso);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 0 0 var(--r-media) var(--r-media);
  transition: transform .16s ease;
}
.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--cream);
}
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

/* --- Layout primitives --------------------------------------------------- */

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* Anchor targets clear the sticky header. */
section[id], div[id] { scroll-margin-top: clamp(58px, 3rem + 1.4vw, 80px); }

.section { padding-block: clamp(44px, 1.35rem + 5.14vw, 110px); }
.section--tight { padding-block: clamp(40px, 1.9rem + 4.0vw, 104px); }

.band--dark     { background: var(--espresso); color: var(--cream); }
.band--stone    { background: var(--stone); }
.band--lavender { background: var(--lavender); }

/* ABWEICHUNG VON DER REFERENZ, BEWUSST UND ENG BEGRENZT.
   Die gedaempften Textstufen kippen auf jeder dunklen Flaeche, nicht nur auf
   .band--dark. Ohne das steht .offer__text auf der dunklen Preiskarte in
   --ink-70, also dunkelbraun auf espresso: 1,0:1, praktisch unsichtbar.

   Hier kippen AUSSCHLIESSLICH die ink-Stufen. Die Akzentfarbe und der
   Fokusring bleiben Terracotta, genau wie in der Referenz — die Farbwahl
   ist damit unberuehrt, nur lesbarer Text ist wiederhergestellt. */
:is(.band--dark, .price--dark, .site-footer, .cta-band, .founder__body,
    .statement, .hero--iv, .tiles, .sticky-cta) {
  --ink-70: var(--cream-80);
  --ink-60: var(--cream-60);
  --ink-50: var(--cream-60);
}

.band--dark h1, .band--dark h2, .band--dark h3 { color: var(--cream); }
/* Links in the dark band are lavender, buttons are not: a button brings
   its own colours and the element selector would otherwise outrank them. */
.band--dark a:not(.btn) { color: var(--lavender); }
.band--dark a:hover { color: var(--cream); }

/* Two-column "label left / content right" section head used across the page */
.split {
  display: grid;
  gap: clamp(28px, 1rem + 4vw, 80px);
  align-items: start;
}
@media (min-width: 900px) {
  .split--85-115 { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .split--70-130 { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
  .split--60-140 { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); }
  .split--50-50  { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* --- Typographic utilities ---------------------------------------------- */

.u {
  font-family: var(--font-display);
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: clamp(14px, 0.5rem + 1vw, 22px);
}
.band--dark .eyebrow { color: var(--lavender); }

.lead { font-size: var(--fs-lead); line-height: 1.5; margin: 0 0 28px; max-width: 720px; }
.prose { font-size: var(--fs-body); line-height: 1.6; color: var(--ink-70); margin: 0; }
.band--dark .prose { color: var(--cream-80); }

.h2-xl { font-size: var(--fs-h2-xl); }
.h2-lg { font-size: var(--fs-h2-lg); }
.h2-md { font-size: var(--fs-h2-md); }

/* Headline that stays on one line per artboard on desktop, wraps on mobile */
.nb { display: none; }
@media (min-width: 900px) { .nb { display: inline; } }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: clamp(15px, 0.55rem + 1vw, 20px) clamp(22px, 0.8rem + 1.4vw, 34px);
  font-family: var(--font-display);
  font-size: clamp(12px, 0.706rem + 0.143vw, 13.5px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  /* Ohne das erbt <button class="btn"> das graue Standardfeld des Browsers.
     Bei den Ghost-Varianten stand deshalb cremefarbene Schrift auf Hellgrau,
     1,02:1 — betraf "Karte laden" und die Knoepfe der Embed-Gates. */
  background: transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--clay    { background: var(--clay); color: var(--cream); }
.btn--clay:hover    { background: var(--espresso); color: var(--cream); }
.btn--espresso { background: var(--espresso); color: var(--cream); }
.btn--espresso:hover { background: var(--clay); color: var(--cream); }
.btn--cream   { background: var(--cream); color: var(--espresso); }
.btn--cream:hover   { background: var(--espresso); color: var(--cream); }
.btn--ghost-light { border-color: rgba(246, 235, 226, 0.55); color: var(--cream); }
.btn--ghost-light:hover { background: rgba(246, 235, 226, 0.14); color: var(--cream); }
.btn--ghost-dark  { border-color: rgba(58, 45, 40, 0.35); color: var(--espresso); }
.btn--ghost-dark:hover { background: rgba(58, 45, 40, 0.06); color: var(--espresso); }
.btn--sm { padding: 12px 18px; font-size: 11.5px; letter-spacing: 0.12em; }
.btn--block { display: flex; width: 100%; }

.link-u {
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  border-bottom: 1px solid currentColor;
}

/* --- Header -------------------------------------------------------------- */

.site-header {
  position: sticky;
  /* Sticks to the top edge of the rounded block, not of the viewport. */
  top: var(--page-inset);
  border-radius: var(--page-radius) var(--page-radius) 0 0;
  z-index: 60;
  background: rgba(246, 235, 226, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-soft);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 32px);
  padding-block: clamp(12px, 0.5rem + 0.6vw, 16px);
}
.brand { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 14px); color: var(--espresso); }
.brand:hover { color: var(--espresso); }
.brand img { height: clamp(22px, 0.9rem + 0.76vw, 30px); width: auto; }
.brand span {
  font-family: var(--font-display);
  font-size: clamp(15px, 0.71rem + 0.57vw, 21px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
}

.nav {
  display: flex;
  gap: clamp(18px, 2.4vw, 34px);
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nav a { color: var(--espresso); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--clay); }
.nav a.is-accent { color: var(--clay); }
.nav a.is-accent:hover { color: var(--espresso); }

.header__actions { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 18px); }
/* Sprachwechsel. Die aktive Sprache traegt aria-current und steht dunkler da,
   die andere ist ein gewoehnlicher Link. Unter 900 px ist dieser Umschalter
   aus; dort steht .nav__locale als letzter Eintrag im ausgeklappten Menue. */
.header__locale {
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  color: var(--ink-50);
  display: flex;
  align-items: center;
  gap: 6px;
}
.header__locale a { color: var(--ink-50); text-decoration: none; }
.header__locale a:hover { color: var(--espresso); }
.header__locale a[aria-current] { color: var(--espresso); }
.nav__locale { display: none; }
@media (max-width: 899px) { .nav__locale { display: block; } }
.header__cta { padding: 13px 22px; font-size: 12.5px; letter-spacing: 0.12em; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 6px 2px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--espresso);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span + span { margin-top: 4px; }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3px) rotate(-45deg); }

@media (max-width: 899px) {
  .nav-toggle { display: block; }
  .header__locale { display: none; }
  .header__cta { padding: 11px 15px; font-size: 11px; letter-spacing: 0.1em; }
  .nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--rule-soft);
    padding: 8px var(--pad) 20px;
  }
  .nav[hidden] { display: none; }
  .nav a { padding: 14px 0; border-top: 1px solid var(--rule-soft); font-size: 13px; }
}

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

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  min-height: clamp(480px, 15rem + 34vw, 760px);
}
/* The IV hero is a flat espresso block in the design, no photograph and no
   scrim over one. Keeping the colour here rather than on .hero means the
   home hero still shows its Aufguss photo. */
.hero--iv { min-height: clamp(480px, 18rem + 26vw, 640px); background: var(--espresso); }
.hero__media, .bg-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero__scrim, .scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero__scrim {
  background: linear-gradient(180deg, rgba(58,45,40,0.45) 0%, rgba(58,45,40,0.15) 35%, rgba(58,45,40,0.82) 100%);
}
/* Lesbarkeit im Hero, ohne das Foto abzudunkeln.
   ------------------------------------------------------------------------
   Der Verlauf .hero__scrim steht bewusst auf dem Referenzwert: der Koerper
   und der helle Eindruck der Seite sollen bleiben. Ein flaechiges
   Abdunkeln war einmal da und wurde verworfen.

   Stattdessen liegt ein weicher, eng begrenzter Fleck NUR hinter dem
   Textblock. Ausserhalb von .hero__copy ist das Foto unveraendert; der
   Verlauf laeuft bis 74 % vollstaendig aus, es gibt keine sichtbare Kante.

   Gemessen wird unter den BUCHSTABEN, nicht im ganzen Textkasten: der
   Kasten einer Ueberschrift ist breiter als ihre Glyphen, und bei einem
   eng begrenzten Fleck bewertet man sonst Foto, auf dem gar keine Schrift
   liegt. Werte am hellsten Untergrundpixel unter einer Glyphe:

                  ohne Fleck        mit Fleck
     H1 (390)      2,71              4,14      Ziel war 3:1 (grosse Schrift)
     H1 (1440)     3,85              5,42
     Unterzeile    2,74 / 4,66       4,39 / 5,89
     Knopf         2,98 / 5,71       3,92 / 6,40

   Es ist die schwaechste der getesteten Fassungen, die das Ziel haelt —
   Helligkeit hatte ausdruecklich Vorrang vor dem letzten Zehntel. Die
   Unterzeile bleibt mobil mit 4,39 knapp unter 4,5; das ist so entschieden.

   Der text-shadow kommt oben drauf. Er zaehlt nach WCAG nicht in das
   Verhaeltnis hinein, macht die Kanten auf unruhigem Untergrund aber
   sichtbar ruhiger, und er kostet keine Flaeche. */
.hero--home .hero__copy { position: relative; }
.hero--home .hero__copy::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -30px -44px -22px -34px;
  pointer-events: none;
  background: radial-gradient(ellipse at 32% 46%,
    rgba(58, 45, 40, 0.45) 0%,
    rgba(58, 45, 40, 0.30) 44%,
    rgba(58, 45, 40, 0) 74%);
}
.hero--home h1,
.hero--home .hero__sub {
  text-shadow: 0 1px 12px rgba(58, 45, 40, 0.5);
}

.hero__lockup {
  position: absolute;
  z-index: 2;
  top: clamp(24px, 1rem + 4vw, 80px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(230px, 6rem + 32vw, 700px);
  height: auto;
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: 0 clamp(26px, 1rem + 3vw, 56px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 48px);
  color: var(--cream);
}
@media (max-width: 899px) {
  .hero__inner { flex-direction: column; align-items: stretch; }
  /* Mobile artboard stacks the lockup above the headline instead of
     overlaying it, so it leaves the flow here. */
  .hero--home {
    flex-direction: column;
    justify-content: space-between;
    padding-top: clamp(24px, 4vw, 40px);
  }
  .hero__lockup {
    position: relative;
    z-index: 2;
    top: auto;
    left: auto;
    transform: none;
    width: min(260px, 66vw);
    margin: 0 auto clamp(14px, 3vw, 22px);
  }
}
.hero__copy { max-width: 860px; }
.hero--home .hero__copy { max-width: 620px; }
.hero__kicker {
  font-family: var(--font-display);
  font-size: clamp(10.5px, 0.58rem + 0.24vw, 13px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: clamp(14px, 0.5rem + 1vw, 22px);
}
.hero h1 { color: var(--cream); line-height: 0.94; margin: 0 0 clamp(12px, 0.5rem + 1vw, 24px); }
.hero--iv h1 { font-size: var(--fs-hero-iv); }
.hero--home h1 { font-size: var(--fs-hero-home); }
.hero__sub {
  font-size: clamp(15px, 0.71rem + 0.57vw, 21px);
  line-height: 1.45;
  color: rgba(246, 235, 226, 0.86);
  margin: 0 0 clamp(20px, 1rem + 1.4vw, 34px);
  max-width: 660px;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 599px) {
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
}
.hero__stats {
  display: grid;
  gap: 14px;
  font-family: var(--font-display);
  color: var(--cream);
  flex: 0 0 auto;
}
@media (min-width: 900px) { .hero__stats { text-align: right; } }
@media (max-width: 899px) {
  .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 26px; }
}
.hero__stat-v { font-size: clamp(26px, 1.1rem + 2.1vw, 44px); font-weight: 700; line-height: 1; }
.hero__stat-l {
  font-size: clamp(10px, 0.58rem + 0.14vw, 11.5px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-60);
  margin-top: 6px;
}

/* --- Category tiles ------------------------------------------------------ */

.tiles { background: var(--espresso); }
.tiles__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .tiles__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile {
  display: block;
  padding: clamp(20px, 0.8rem + 1.6vw, 34px) clamp(18px, 0.8rem + 1.2vw, 30px) clamp(20px, 0.8rem + 1.2vw, 30px);
  border-right: 1px solid rgba(246, 235, 226, 0.14);
  border-bottom: 1px solid rgba(246, 235, 226, 0.14);
  color: var(--cream);
  transition: background-color .18s ease;
}
.tile:hover { background: var(--clay); color: var(--cream); }
.tile__num {
  font-family: var(--font-display);
  font-size: clamp(10px, 0.58rem + 0.14vw, 11.5px);
  letter-spacing: 0.18em;
  color: var(--cream-50);
  margin-bottom: clamp(22px, 0.5rem + 2vw, 40px);
}
.tile__name {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.06rem + 0.95vw, 30px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}
.tile__metric {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-size: clamp(11px, 0.63rem + 0.14vw, 12.5px);
  color: rgba(246, 235, 226, 0.72);
}
.tiles__mark { display: flex; justify-content: center; padding: 26px 0 4px; }
.tiles__mark img { height: 46px; width: auto; opacity: 0.9; }
@media (min-width: 900px) { .tiles__mark { display: none; } }

/* --- Pull quote / statement rule ---------------------------------------- */

.pullrule { border-top: 2px solid var(--clay); padding-top: clamp(16px, 0.6rem + 1vw, 24px); margin-bottom: clamp(22px, 1rem + 1.6vw, 36px); }
.pullrule p {
  font-family: var(--font-display);
  font-size: var(--fs-pullquote);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: pretty;
  max-width: 760px;
}
.pullrule em { font-style: normal; color: var(--clay); }

/* --- Full-bleed statement band ------------------------------------------ */

.statement {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: clamp(280px, 8rem + 26vw, 520px);
  text-align: center;
}
.statement--iv { min-height: clamp(280px, 10rem + 22vw, 560px); }
.statement .scrim { background: rgba(58, 45, 40, 0.58); }
.statement__mark { position: relative; z-index: 2; width: clamp(42px, 1.5rem + 2vw, 72px); height: auto; margin: 0 auto clamp(20px, 1rem + 1.2vw, 34px); opacity: 0.9; }
.statement p {
  position: relative;
  z-index: 2;
  margin: 0;
  padding-inline: clamp(24px, 3vw, 80px);
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--fs-statement);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--cream);
  max-width: 1080px;
}
.statement--iv p { font-size: var(--fs-statement-iv); line-height: 1.05; letter-spacing: -0.02em; max-width: 1100px; }

/* --- Fact list (the "three rules" column next to a headline) ------------- */

.facts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-display);
  font-size: clamp(12px, 0.706rem + 0.143vw, 13.5px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@media (min-width: 900px) { .facts { flex: 0 0 340px; } }
.facts > * { border-top: 1px solid rgba(58, 45, 40, 0.25); padding-top: 11px; }
.band--dark .facts > * { border-top-color: rgba(246, 235, 226, 0.3); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 40px);
  margin-bottom: clamp(24px, 1rem + 2.6vw, 52px);
  flex-wrap: wrap;
}
/* The headline shrinks rather than pushing the fact column onto its own row. */
.section-head > :first-child { flex: 1 1 380px; min-width: 0; }
.section-head > :last-child { flex: 0 1 auto; }

/* --- Partner / aggregator band ------------------------------------------ */

.partners {
  background: var(--stone);
  border-top: 1px solid rgba(58, 45, 40, 0.1);
  border-bottom: 1px solid rgba(58, 45, 40, 0.1);
}
/* Fuenf Aggregatoren passen auf dem Handy nicht in eine Zeile. Das Band
   bricht deshalb um, statt seitlich zu scrollen: unter 900 px steht das Label
   ueber der Liste, die Namen selbst bleiben ungetrennt. */
.partners__inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  padding-block: clamp(20px, 0.9rem + 1.6vw, 36px);
  flex-wrap: wrap;
}
@media (max-width: 899px) {
  .partners__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
}
.partners__label {
  font-family: var(--font-display);
  font-size: clamp(10px, 0.58rem + 0.14vw, 11.5px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-50);
  flex: 0 0 auto;
}
.partners__list { display: flex; align-items: center; gap: 10px clamp(18px, 2.4vw, 30px); flex-wrap: wrap; }
.partners__list span {
  font-family: var(--font-display);
  font-size: clamp(11.5px, 0.67rem + 0.24vw, 14px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-70);
  white-space: nowrap;
}

/* --- Session cards ------------------------------------------------------- */

.cards {
  display: grid;
  gap: clamp(14px, 0.6rem + 1.2vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
@media (min-width: 900px) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  background: var(--white);
  display: flex;
  flex-direction: column;
  border-radius: var(--r-card);
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.card:hover { box-shadow: 0 24px 50px rgba(58, 45, 40, 0.14); }
.card__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--r-media); }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__badge {
  position: absolute;
  top: clamp(12px, 1vw, 16px);
  left: clamp(12px, 1vw, 16px);
  background: var(--cream);
  color: var(--espresso);
  font-family: var(--font-display);
  font-size: clamp(10px, 0.58rem + 0.14vw, 11.5px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 11px;
}
.card__body {
  padding: clamp(18px, 0.8rem + 1vw, 28px) clamp(16px, 0.8rem + 0.9vw, 26px) clamp(20px, 0.9rem + 1vw, 30px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 0.5rem + 0.6vw, 16px);
  flex: 1;
}
.card__body h3 { font-size: var(--fs-h3-sm); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; }
.card__body p { font-size: var(--fs-body-sm); line-height: 1.55; color: var(--ink-70); margin: 0; flex: 1; }
.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: clamp(12px, 0.6rem + 0.6vw, 18px);
  border-top: 1px solid rgba(58, 45, 40, 0.14);
}
.card__price { font-family: var(--font-display); font-size: clamp(16px, 0.9rem + 0.29vw, 19px); font-weight: 700; }
.card__link {
  font-family: var(--font-display);
  font-size: clamp(10.5px, 0.6rem + 0.14vw, 12px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}

/* The IV Drip Bar promo tile that sits in the session grid */
.card--promo {
  background: var(--espresso);
  color: var(--cream);
  padding: clamp(24px, 1rem + 1.6vw, 34px) clamp(20px, 0.9rem + 1.2vw, 30px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  border-radius: var(--r-card);
  transition: background-color .18s ease;
}
.card--promo:hover { background: var(--clay); color: var(--cream); }
/* Built like the Breathwork and Mobility cards: the body sits centred in the
   free space, the foot repeats .card__foot with price left and link right.
   Only the rule colour changes, because this card is dark. */
.card--promo__body { margin-block: auto; display: flex; flex-direction: column; gap: clamp(10px, 0.5rem + 0.6vw, 14px); }
.card--promo .card__foot { border-top-color: rgba(246, 235, 226, 0.22); }
.card--promo__eyebrow {
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246, 235, 226, 0.6);
}
.card--promo__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 1.4rem + 1.14vw, 32px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 10px;
}
.card--promo p { font-size: var(--fs-body-sm); line-height: 1.55; color: rgba(246, 235, 226, 0.8); margin: 0; }
.card--promo__more { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }

/* --- Tabs (practices, days) --------------------------------------------- */

.tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: clamp(18px, 1rem + 1.6vw, 44px);
}
@media (max-width: 899px) {
  .tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 14px; }
  .tabs > * { flex: 0 0 auto; }
}
.tab {
  cursor: pointer;
  border: 1px solid rgba(58, 45, 40, 0.22);
  background: transparent;
  color: var(--espresso);
  padding: clamp(11px, 0.5rem + 0.5vw, 15px) clamp(14px, 0.6rem + 1.1vw, 26px);
  font-family: var(--font-display);
  font-size: clamp(11px, 0.63rem + 0.14vw, 12.5px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: var(--r-pill);
  transition: background-color .15s ease, color .15s ease;
}
.tab[aria-selected="true"] { background: var(--espresso); color: var(--cream); }
.tab__date { display: none; }

/* Day captions only surface in the no-JS fallback, where the tab row that
   would otherwise name the day is collapsed. */
.panel-label {
  display: none;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
  margin: 24px 0 8px;
}
@media (min-width: 900px) { .tab__date { display: inline; } .tabs--days .tab { min-width: 96px; } }
.band--dark .tab { border-color: rgba(246, 235, 226, 0.35); color: var(--cream); }
.band--dark .tab[aria-selected="true"] { background: var(--cream); color: var(--espresso); }

.practice {
  display: grid;
  gap: clamp(20px, 1rem + 3vw, 52px);
  align-items: start;
}
@media (min-width: 900px) { .practice { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); } }
.practice__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-media); }
@media (min-width: 900px) { .practice__media { aspect-ratio: 4 / 5; } }
.practice__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The ice bath photograph has its subjects in the upper half. In the wide
   4:3 box below 900px a centred crop cuts the coach's head off, so this one
   image holds its window higher. Above 900px the box is taller than the
   image, nothing is cropped vertically, and this has no effect. */
.practice__media--high img { object-position: center 18%; }
.practice h3 { font-size: var(--fs-h3-xl); line-height: 1.05; font-weight: 700; letter-spacing: -0.025em; margin-bottom: clamp(12px, 0.6rem + 0.8vw, 20px); }
.practice__desc { font-size: clamp(15px, 0.85rem + 0.29vw, 18px); line-height: 1.6; color: var(--cream-80); margin: 0 0 clamp(20px, 1rem + 1.4vw, 34px); }

/* Two or three figures, depending on the practice: room temperature is not a
   figure worth printing, so Mobility and Stretching carry only duration and
   frequency. Auto columns keep the row filled either way instead of leaving
   an empty third. */
.metrics {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 10px;
  border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
  margin-bottom: clamp(20px, 1rem + 1.4vw, 34px);
}
.metrics > div { padding-block: clamp(16px, 0.7rem + 0.8vw, 22px); }
.metrics__k {
  font-family: var(--font-display);
  font-size: clamp(9.5px, 0.55rem + 0.14vw, 11px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-50);
  margin-bottom: 8px;
}
.metrics__v { font-family: var(--font-display); font-size: clamp(17px, 0.85rem + 0.86vw, 26px); font-weight: 700; color: var(--lavender); }

.plus-list { display: flex; flex-direction: column; gap: 12px; }
.plus-list > div { display: flex; gap: 12px; font-size: var(--fs-body-sm); line-height: 1.5; color: var(--ink-70); }
.plus-list__marker { font-family: var(--font-display); color: var(--ink-60); flex: 0 0 auto; }

.sublabel {
  font-family: var(--font-display);
  font-size: clamp(10px, 0.58rem + 0.14vw, 11px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: clamp(12px, 0.6rem + 0.4vw, 16px);
}

.practice__cols { display: grid; gap: clamp(22px, 1rem + 2vw, 40px); margin-bottom: clamp(22px, 1rem + 1.4vw, 36px); }
@media (min-width: 700px) { .practice__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.practice__foot { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.evidence { font-family: var(--font-display); font-size: 12px; color: rgba(246, 235, 226, 0.55); }

/* --- Numbered principle / step list ------------------------------------- */

.steps > li { list-style: none; }
.steps {
  margin: 0;
  padding: 0;
}
.step {
  display: grid;
  gap: clamp(0px, 1vw, 28px);
  padding-block: clamp(18px, 0.8rem + 1.2vw, 30px);
  border-top: 1px solid var(--rule);
}
@media (min-width: 700px) { .step { grid-template-columns: 92px minmax(0, 1fr); } }
.step__num {
  font-family: var(--font-display);
  font-size: clamp(12px, 0.7rem + 0.29vw, 15px);
  font-weight: 700;
  color: var(--clay);
  padding-top: 6px;
  margin-bottom: 8px;
}
.step h3 { font-size: var(--fs-h3-lg); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.step p { font-size: var(--fs-body); line-height: 1.6; color: var(--ink-70); margin: 0; max-width: 660px; }

/* --- Numbers band -------------------------------------------------------- */

.numbers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 1rem + 1.2vw, 32px);
  padding-block: clamp(30px, 1rem + 3.8vw, 70px);
}
@media (min-width: 900px) { .numbers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.numbers__v {
  font-family: var(--font-display);
  font-size: clamp(30px, 1.25rem + 2.48vw, 58px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--espresso);
}
.numbers--sm .numbers__v { font-size: clamp(30px, 1.5rem + 2.1vw, 52px); }
.numbers__l {
  font-family: var(--font-display);
  font-size: clamp(9.5px, 0.55rem + 0.19vw, 11.5px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-top: clamp(8px, 0.4rem + 0.4vw, 12px);
}

/* --- Schedule ------------------------------------------------------------ */

/* Shown while the schedule still holds placeholder rows. Delete the .notice
   block in index.html together with the placeholder slots once Mindbody
   feeds the real timetable. */
.notice {
  border: 1px solid var(--clay);
  border-left-width: 4px;
  border-radius: var(--r-media);
  background: rgba(184, 120, 86, 0.08);
  padding: clamp(18px, 0.9rem + 1vw, 26px) clamp(18px, 0.9rem + 1.2vw, 30px);
  margin-bottom: clamp(18px, 1rem + 1vw, 28px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.notice__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(13px, 0.74rem + 0.19vw, 15px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clay);
}
.notice__text { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-70); max-width: 78ch; }
.notice .btn { margin-top: 4px; }


.schedule__table {
  border: 1px solid var(--rule);
  background: var(--white);
  border-radius: var(--r-card);
  overflow: hidden;
}
.slot__time { font-family: var(--font-display); font-weight: 700; }
.slot__name { font-weight: 700; letter-spacing: -0.015em; }
.slot__type {
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clay);
  margin-top: 5px;
}
.slot__coach { color: var(--ink-70); }
.slot__dur { font-family: var(--font-display); color: var(--ink-70); }
.slot__price { font-family: var(--font-display); font-weight: 700; }
.slot__seats { font-family: var(--font-display); color: var(--ink-60); }
.slot__seats.is-waitlist { color: var(--clay); }

/* Wide: the six-column table of the desktop artboard. */
@media (min-width: 1100px) {
  .schedule__head, .slot {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) 210px 170px 130px 170px;
    gap: 20px;
    align-items: center;
  }
  .schedule__head {
    padding: 16px 26px;
    background: var(--stone);
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-60);
  }
  .schedule__head-slots { text-align: right; }
  .slot { padding: 22px 26px; border-top: 1px solid var(--rule-soft); transition: background-color .15s ease; }
  .slot:hover { background: var(--cream); }
  .slot__time { font-size: 19px; }
  .slot__name { font-size: 19px; }
  .slot__type { font-size: 11.5px; }
  .slot__coach { font-size: 15.5px; }
  .slot__dur { font-size: 14px; }
  .slot__price { font-size: 16px; }
  .slot__seats { font-size: 12px; }
  .slot__book { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
}

/* Narrow: the stacked card of the mobile artboard. `display: contents` lets
   the seat count and the button sit in different grid cells. */
@media (max-width: 1099px) {
  .schedule__head { display: none; }
  .schedule__table { border: 0; background: none; border-radius: 0; overflow: visible; }
  .slot {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 8px;
    row-gap: 6px;
    background: var(--white);
    border: 1px solid rgba(58, 45, 40, 0.16);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 10px;
  }
  .slot__book { display: contents; }
  .slot__time    { grid-area: 1 / 1 / 2 / 2; font-size: 17px; }
  .slot__seats   { grid-area: 1 / 3 / 2 / 4; justify-self: end; font-size: 11px; }
  .slot__session { grid-area: 2 / 1 / 3 / 4; }
  .slot__name    { font-size: 18px; line-height: 1.15; }
  .slot__type    { font-size: 10.5px; letter-spacing: 0.1em; }
  .slot__dur     { grid-area: 3 / 1 / 4 / 2; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }
  .slot__coach   { grid-area: 3 / 2 / 4 / 4; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--font-display); }
  .slot__dur::after { content: ' ·'; }
  .slot__price   { grid-area: 4 / 1 / 5 / 2; font-size: 16px; align-self: center; margin-top: 6px; }
  .slot .btn     { grid-area: 4 / 3 / 5 / 4; justify-self: end; margin-top: 6px; }
}

/* --- Pricing ------------------------------------------------------------- */

.promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 2vw, 32px);
  background: var(--clay);
  color: var(--cream);
  padding: clamp(20px, 0.9rem + 1.2vw, 28px) clamp(20px, 0.9rem + 1.4vw, 34px);
  margin-bottom: clamp(14px, 0.6rem + 1vw, 26px);
  flex-wrap: wrap;
  border-radius: var(--r-card);
}
.promo__label {
  font-family: var(--font-display);
  font-size: clamp(10px, 0.58rem + 0.14vw, 11.5px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246, 235, 226, 0.75);
  margin-bottom: 8px;
}
/* Knopf plus eine Zeile darunter, die sagt, was nach dem Klick zu tun ist.
   Die Aktion ist eine Preisoption in Mindbody, keine eigene Seite; ohne den
   Hinweis sucht man sie dort. */
.promo__action { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.promo__hint {
  margin: 0;
  max-width: 34ch;
  font-family: var(--font-body);
  font-size: clamp(12.5px, 0.74rem + 0.1vw, 13.5px);
  line-height: 1.5;
  color: rgba(246, 235, 226, 0.85);
}
@media (min-width: 600px) { .promo__action { align-items: flex-end; text-align: right; } }
.promo__value {
  font-family: var(--font-display);
  font-size: clamp(26px, 1.4rem + 1.33vw, 40px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
@media (max-width: 599px) { .promo { flex-direction: column; align-items: stretch; } .promo .btn { width: 100%; } }

.prices { display: grid; gap: clamp(14px, 0.6rem + 1.2vw, 26px); align-items: stretch; }
@media (min-width: 900px) { .prices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.price {
  padding: clamp(24px, 1rem + 1.4vw, 38px) clamp(20px, 0.9rem + 1.2vw, 34px) clamp(22px, 1rem + 1.2vw, 34px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 0.8rem + 1vw, 24px);
  height: 100%;
  border-radius: var(--r-card);
}
.price--light { background: var(--white); color: var(--espresso); --price-rule: rgba(58, 45, 40, 0.14); }
.price--dark  { background: var(--espresso); color: var(--cream); --price-rule: rgba(246, 235, 226, 0.2); }
.price__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.price h3 { font-size: clamp(20px, 1.1rem + 0.57vw, 26px); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; max-width: 240px; }
.price__tag { font-family: var(--font-display); font-size: clamp(9.5px, 0.55rem + 0.14vw, 11px); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; white-space: nowrap; }
.price__rows { display: flex; flex-direction: column; gap: clamp(9px, 0.4rem + 0.3vw, 12px); flex: 1; }
.price__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: clamp(8px, 0.4rem + 0.3vw, 11px); border-bottom: 1px solid var(--price-rule); }
.price__row span:first-child { font-size: clamp(14px, 0.8rem + 0.14vw, 15.5px); }
.price__row span:last-child { font-family: var(--font-display); font-size: clamp(15px, 0.85rem + 0.19vw, 17px); font-weight: 700; white-space: nowrap; }
/* The two purchase blocks below the price tables: gift voucher and the
   monthly sauna pass. Fewer rows than a price card, so they set their own
   rhythm rather than reusing .price__rows. */
.prices--offers { margin-top: clamp(14px, 0.6rem + 1.2vw, 26px); }

/* Karte fuer Aggregator-Gaeste. Steht ueber die volle Breite unter den beiden
   Angebotskarten: sie verkauft nichts, sie erklaert einen Weg, und dafuer
   braucht sie die drei Schritte nebeneinander statt untereinander. */
.aggcard {
  display: grid;
  gap: clamp(18px, 0.9rem + 1.4vw, 40px);
  margin-top: clamp(14px, 0.6rem + 1.2vw, 26px);
  padding: clamp(22px, 1rem + 1.6vw, 40px);
  background: var(--white);
  border-radius: var(--r-card);
}
@media (min-width: 900px) { .aggcard { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; } }
.aggcard__body { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, 0.5rem + 0.6vw, 16px); }
.aggcard__body .eyebrow { margin-bottom: 0; }
.aggcard__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 0.5rem + 0.6vw, 14px);
}
/* Eigene Nummer statt .plus-list__marker: der gehoert ins dunkle Band und ist
   dort Creme mit 40 Prozent Deckung, auf dieser weissen Karte also unsichtbar. */
.aggcard__num {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--clay);
  flex: 0 0 1.4em;
}
.aggcard__steps li {
  display: flex;
  gap: 14px;
  font-size: clamp(14px, 0.8rem + 0.14vw, 15.5px);
  line-height: 1.5;
  color: var(--ink-70);
}
@media (min-width: 900px) { .aggcard__steps { border-left: 1px solid var(--rule); padding-left: clamp(18px, 0.9rem + 1.2vw, 32px); } }

/* Hinweiszeile unter dem Kurskalender. Fuehrt zu der Karte bei den Preisen,
   damit die Erklaerung genau einmal auf der Seite steht. */
.schedule__hint {
  margin: clamp(14px, 0.7rem + 0.8vw, 22px) 0 0;
  max-width: 76ch;
  font-size: clamp(13.5px, 0.78rem + 0.16vw, 15px);
  line-height: 1.6;
  color: var(--ink-70);
}
.schedule__hint a { color: var(--clay); text-decoration: underline; }
.offer { gap: clamp(10px, 0.5rem + 0.6vw, 14px); }
.offer .eyebrow { margin-bottom: 0; }
.offer__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.offer__price { font-family: var(--font-display); font-size: clamp(20px, 1.1rem + 0.57vw, 26px); font-weight: 700; white-space: nowrap; }
.offer__text { font-size: clamp(14px, 0.8rem + 0.14vw, 15.5px); line-height: 1.6; color: var(--ink-70); margin: 0; flex: 1; }
/* Gift card: four fixed values, each a deep link into the Mindbody shop.
   One button per value because Mindbody addresses gift cards by id, not by
   an amount passed in. */
.offer__values { display: flex; flex-wrap: wrap; gap: 8px; }
.offer__values .btn { flex: 1 1 auto; min-width: 68px; text-align: center; }
.offer__gift { align-self: flex-start; }

.price__note { font-size: clamp(13px, 0.76rem + 0.1vw, 14px); line-height: 1.5; opacity: 0.72; }

/* --- Coaches ------------------------------------------------------------- */

.rail { display: flex; gap: clamp(14px, 0.6rem + 1vw, 24px); overflow-x: auto; padding-bottom: 18px; scroll-snap-type: x proximity; }
.rail > * { scroll-snap-align: start; }
.coach { flex: 0 0 min(88vw, 420px); background: var(--white); display: flex; flex-direction: column; border-radius: var(--r-card); overflow: hidden; }
.coach__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--lavender);
  display: flex;
  align-items: center;
  justify-content: center;
}
.coach__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* Portrait and landscape originals in one 4:3 frame; biasing upwards keeps
     every head in shot without cropping each photo by hand. */
  object-position: center 20%;
}
.coach__initial { font-family: var(--font-display); font-size: clamp(52px, 2rem + 5vw, 76px); letter-spacing: 0.06em; text-transform: uppercase; color: var(--espresso); }
.coach__body { padding: clamp(20px, 0.9rem + 1vw, 26px) clamp(20px, 0.9rem + 1.2vw, 30px) clamp(24px, 1rem + 1.2vw, 34px); display: flex; flex-direction: column; gap: clamp(14px, 0.7rem + 0.8vw, 20px); flex: 1; }
/* The design sets coach names in the serif, in normal case, not as display
   caps. It reads as a person rather than a label. */
.coach__name { font-size: clamp(19px, 1.1rem + 0.29vw, 22px); font-weight: 400; font-family: var(--font-body); letter-spacing: 0; }
.coach__role { font-family: var(--font-display); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay); margin-top: 5px; }
.coach__quote { font-family: var(--font-body); font-style: italic; font-size: clamp(18px, 1rem + 0.57vw, 22px); line-height: 1.35; margin: 0; flex: 1; }
.coach__bg { font-size: clamp(13.5px, 0.79rem + 0.1vw, 14.5px); line-height: 1.55; color: rgba(58, 45, 40, 0.7); margin: 0; }

/* --- Founder ------------------------------------------------------------- */

.founder { display: grid; }
@media (min-width: 900px) { .founder { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.founder__media { position: relative; min-height: 340px; }
@media (min-width: 900px) { .founder__media { min-height: 620px; } }
.founder__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.founder__body { background: var(--espresso); color: var(--cream); padding: clamp(32px, 1.4rem + 3.4vw, 96px) clamp(18px, 0.8rem + 2.6vw, 60px); }
/* Zitat: als blockquote ausgezeichnet, mit lila Randlinie als Zitatgeste.
   margin 0 setzt den Browser-Einzug des blockquote zurueck. */
.founder__quote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(21px, 1.1rem + 0.76vw, 29px);
  line-height: 1.3;
  color: var(--lavender);
  margin: 0 0 28px;
  padding-left: clamp(16px, 0.7rem + 1.2vw, 28px);
  border-left: 2px solid var(--lavender);
}
.founder__body p + p { margin-top: 20px; }

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

.faq__item { border-top: 1px solid var(--rule); }
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-block: clamp(18px, 0.8rem + 1.2vw, 28px);
  cursor: pointer;
  list-style: none;
  /* Set like the step headings in "Unser Ansatz": display face, uppercase,
     bold. A question and a step heading do the same job on the page, so they
     should not be typeset differently. */
  font-family: var(--font-display);
  font-size: var(--fs-h3-lg);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: '+';
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--clay);
  flex: 0 0 auto;
  line-height: 1.3;
}
.faq__item[open] .faq__q::after { content: '–'; }
.faq__a { font-size: var(--fs-body); line-height: 1.6; color: var(--ink-70); margin: 0 0 clamp(18px, 0.8rem + 1.2vw, 28px); max-width: 820px; padding-right: 34px; }

/* --- Newsletter / booking band ------------------------------------------ */

.cta-band { position: relative; overflow: hidden; padding-block: clamp(44px, 1.35rem + 5.14vw, 110px); }
.cta-band .scrim { background: rgba(58, 45, 40, 0.7); }
.cta-band--booking .scrim { background: rgba(58, 45, 40, 0.75); }
/* The IV booking band carries no photo: a plain espresso field, so the
   calendar that lands here is not competing with an image behind it. */
.cta-band--solid { background: var(--espresso); }
.cta-band__inner { position: relative; z-index: 2; max-width: 860px; color: var(--cream); }
.cta-band h2 { color: var(--cream); line-height: 1; margin-bottom: 16px; }
.cta-band p { font-size: clamp(15px, 0.85rem + 0.24vw, 17.5px); line-height: 1.55; color: var(--cream-80); margin: 0 0 30px; }
.cta-band__fine { font-size: clamp(12.5px, 0.74rem + 0.1vw, 13.5px); line-height: 1.6; color: rgba(246, 235, 226, 0.78); margin: 20px 0 0; max-width: 720px; }

.signup { display: flex; gap: 12px; flex-wrap: wrap; }
.signup input[type="email"],
.signup input[type="text"]:not(.hp input) {
  flex: 1 1 260px;
  min-width: 0;
  background: rgba(246, 235, 226, 0.1);
  border: 1px solid rgba(246, 235, 226, 0.45);
  color: var(--cream);
  padding: 19px 22px;
  font-family: var(--font-display);
  font-size: 14px;
  border-radius: var(--r-pill);
}
.signup input::placeholder { color: rgba(246, 235, 226, 0.6); }
.signup button { border: none; }
/* Einwilligung: eine Zeile Fliesstext mit Haekchen, ueber die volle Breite
   des Formulars. Deshalb flex-basis 100 %, sonst setzt sie sich neben die
   Felder. */
.signup__consent {
  flex: 1 1 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 4px;
}
.signup__consent input {
  width: 20px; height: 20px; flex: 0 0 auto; margin-top: 3px;
  accent-color: var(--clay);
}
.signup__consent label {
  font-family: var(--font-body);
  font-size: clamp(12.5px, 0.72rem + 0.14vw, 13.5px);
  line-height: 1.55;
  color: rgba(246, 235, 226, 0.78);
}
.signup__consent a { color: var(--cream); text-decoration: underline; }

.signup__status { flex: 1 1 100%; margin: 6px 0 0; font-family: var(--font-display); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lavender); }
.signup__status.is-ok { color: var(--cream); }
.signup__status.is-error { color: #F0B8A0; }
.signup__status:empty { display: none; }
/* Unter 600 px steht das Formular als Spalte. Dann meint die flex-basis von
   260 px die Hoehe, nicht die Breite, und die Felder werden 260 px hoch.
   Deshalb hier zurueck auf die eigene Hoehe. */
@media (max-width: 599px) {
  .signup { flex-direction: column; }
  .signup button { width: 100%; }
  .signup input[type="email"],
  .signup input[type="text"]:not(.hp input) { flex: 0 0 auto; width: 100%; }
}

/* Newsletter-Band: der ganze Inhalt steht mittig, Ueberschrift, Text,
   Formular und Einwilligung. Nur Ausrichtung, kein Wort am Text der
   Einwilligung, der muss zeichengleich mit der gespeicherten Fassung in
   hold-space-suite bleiben. */
#newsletter .cta-band__inner { margin-inline: auto; text-align: center; }
#newsletter .signup { justify-content: center; }
#newsletter .signup input[type="email"],
#newsletter .signup input[type="text"]:not(.hp input) { text-align: center; }
#newsletter .signup__consent { justify-content: center; text-align: left; }
#newsletter .signup__consent label { max-width: 62ch; }

/* --- Footer -------------------------------------------------------------- */

.site-footer { background: var(--espresso); color: var(--cream); padding-block: clamp(44px, 1.6rem + 4vw, 80px) 40px; border-radius: 0 0 var(--page-radius) var(--page-radius); }
.footer__ctas {
  display: grid;
  gap: clamp(14px, 0.6rem + 1.2vw, 26px);
  padding-bottom: clamp(32px, 1.4rem + 3vw, 64px);
  border-bottom: 1px solid rgba(246, 235, 226, 0.2);
}
@media (min-width: 700px) { .footer__ctas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.footer__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(26px, 1.2rem + 2vw, 44px) clamp(22px, 1rem + 1.6vw, 38px);
  border-radius: 20px;
  transition: background-color .18s ease, color .18s ease;
}
.footer__cta span:first-child {
  font-family: var(--font-display);
  font-size: clamp(24px, 1.2rem + 1.9vw, 38px);
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 1;
}
.footer__cta span:last-child { font-family: var(--font-display); font-size: 26px; }
.footer__cta--primary { background: var(--clay); color: var(--cream); }
.footer__cta--primary:hover { background: var(--lavender); color: var(--espresso); }
.footer__cta--ghost { border: 1px solid rgba(246, 235, 226, 0.4); color: var(--cream); }
.footer__cta--ghost:hover { background: rgba(246, 235, 226, 0.1); color: var(--cream); }

.footer__find { display: grid; gap: clamp(24px, 1rem + 2vw, 40px); padding-top: clamp(32px, 1.4rem + 2.6vw, 56px); }
@media (min-width: 900px) { .footer__find { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.footer__label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-50);
  margin-bottom: 16px;
}
.footer__address {
  font-family: var(--font-display);
  font-size: clamp(24px, 1.2rem + 1.6vw, 34px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 16px;
}
.footer__map { width: 100%; min-height: 340px; border: 1px solid rgba(246, 235, 226, 0.25); display: block; border-radius: 20px; }

/* The Google Maps embed only loads on request: an unconditional iframe ships
   the visitor's IP to Google before any consent. */
.map-embed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 32px clamp(20px, 4vw, 40px);
  text-align: center;
  background: rgba(246, 235, 226, 0.06);
}
.map-embed__hint {
  margin: 0;
  max-width: 42ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--cream-80);
}
.map-embed__btn { cursor: pointer; }
.map-embed iframe { width: 100%; min-height: 340px; border: 0; display: block; border-radius: 20px; }

.footer__cols { display: grid; gap: clamp(24px, 1rem + 2vw, 40px); padding-block: clamp(32px, 1.4rem + 2.6vw, 56px) clamp(28px, 1.2rem + 2vw, 48px); }
@media (min-width: 600px) { .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer__cols p { font-size: 16px; line-height: 1.8; margin: 0; }
.footer__cols a { color: var(--lavender); }
.footer__cols a:hover { color: var(--cream); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 32px);
  padding-top: 28px;
  border-top: 1px solid rgba(246, 235, 226, 0.2);
  flex-wrap: wrap;
}
.footer__brand { display: flex; align-items: center; gap: 20px; }
.footer__brand img { height: 38px; width: auto; }
.footer__brand span { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; }
.footer__copy { font-family: var(--font-display); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-50); }
/* Auf den Seiten mit schlankem Footer steht die Zeile unter den Links,
   nicht dahinter: hintereinander waere es auf dem Handy eine lange
   Versalienschlange. flex-basis 100 % bricht sie um. */
.footer__bottom .footer__jahr { flex: 1 1 100%; }
@media (min-width: 600px) { .footer__bottom > .footer__jahr { flex: 0 1 auto; } }

/* --- Sticky mobile booking bar ------------------------------------------ */

.sticky-cta {
  position: sticky;
  bottom: 0;
  z-index: 50;
  display: flex;
  gap: 10px;
  padding: 12px var(--pad);
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(58, 45, 40, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.sticky-cta .btn { padding: 16px; font-size: 12px; letter-spacing: 0.12em; }
.sticky-cta .btn:first-child { flex: 1; }
.sticky-cta .btn:last-child { flex: 0 0 auto; padding-inline: 18px; }
@media (min-width: 900px) { .sticky-cta { display: none; } }

/* ==========================================================================
   IV Drip Bar specifics
   ========================================================================== */

.drips { display: grid; gap: clamp(12px, 0.6rem + 1vw, 26px); align-items: stretch; }
@media (min-width: 900px) { .drips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.drip {
  background: rgba(246, 235, 226, 0.07);
  border: 1px solid rgba(246, 235, 226, 0.2);
  padding: clamp(20px, 0.9rem + 1.4vw, 34px) clamp(20px, 0.9rem + 1vw, 30px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 0.6rem + 0.8vw, 20px);
  border-radius: var(--r-card);
}
.drip__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.drip h3 { font-size: var(--fs-h3-md); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; max-width: 240px; }
.drip__tag {
  font-family: var(--font-display);
  font-size: clamp(9.5px, 0.55rem + 0.19vw, 11px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lavender);
  text-align: right;
  flex: 0 0 auto;
}
/* Der Text waechst nicht mehr in die Luecke. Sonst rutschten die
   Inhaltsstoffe der kuerzeren Karte weit nach unten. Stattdessen haengt
   der Knopf am unteren Rand. */
.drip__text { font-size: var(--fs-body-sm); line-height: 1.55; color: rgba(246, 235, 226, 0.82); margin: 0; }
/* Inhaltsstoffe: eine Liste mit Mengen, sonst nichts. Keine Zeile darf neben
   einem Stoff stehen und sagen, wofuer er gut sei; das waere ein
   Wirkversprechen. */
.drip__agents-label {
  font-family: var(--font-display);
  font-size: clamp(10px, 0.58rem + 0.14vw, 11.5px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246, 235, 226, 0.6);
  margin: 0 0 10px;
}
.drip__agents-label + .drip__agents { margin-bottom: clamp(14px, 0.7rem + 0.6vw, 20px); }
.drip__agents {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.drip__agents li {
  font-size: clamp(12.5px, 0.74rem + 0.1vw, 13.5px);
  line-height: 1.35;
  color: rgba(246, 235, 226, 0.82);
  border: 1px solid rgba(246, 235, 226, 0.22);
  border-radius: var(--r-pill);
  padding: 5px 11px;
}
.drip__foot { margin-top: auto; padding-top: clamp(12px, 0.6rem + 0.6vw, 18px); border-top: 1px solid rgba(246, 235, 226, 0.22); }

.combine { display: grid; gap: clamp(12px, 0.6rem + 1vw, 26px); margin-top: clamp(24px, 1rem + 1.8vw, 44px); align-items: stretch; }
@media (min-width: 900px) { .combine { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.combine__media { position: relative; min-height: 240px; overflow: hidden; border-radius: var(--r-card); }
@media (min-width: 900px) { .combine__media { min-height: 320px; } }
.combine__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.combine__card {
  background: rgba(246, 235, 226, 0.07);
  border: 1px solid rgba(246, 235, 226, 0.2);
  padding: clamp(24px, 1rem + 1.4vw, 38px) clamp(20px, 0.9rem + 1.2vw, 34px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  border-radius: var(--r-card);
}
.combine__card h3 { font-size: clamp(22px, 1.2rem + 1.05vw, 32px); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; }

.portrait { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 24px; }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portrait--45 { aspect-ratio: 4 / 5; }

.practitioner { display: grid; gap: clamp(28px, 1rem + 3vw, 56px); align-items: start; }
/* Two columns, as in the design: text left, preparation notes right. */
@media (min-width: 900px) { .practitioner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* Das Portraet steht in der linken Spalte zwischen Ueberschrift und Text.
   Keine eigene Rasterspalte: mit drei Kindern haette das Raster bei 900 px
   umgebrochen und den Vorbereitungs-Hinweisen eine halbe Zeile gestohlen. */
.practitioner__portrait {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  border-radius: var(--r-card);
  margin-bottom: clamp(20px, 1rem + 1vw, 30px);
}
.practitioner__bio { font-size: clamp(15px, 0.85rem + 0.29vw, 18px); line-height: 1.6; margin: 0 0 20px; }
.practitioner__quote {
  font-family: var(--font-display);
  font-size: clamp(16px, 0.85rem + 0.57vw, 22px);
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--clay);
  margin: 0 0 28px;
  max-width: 620px;
}
.prep__item { border-top: 1px solid var(--rule); padding-block: clamp(12px, 0.6rem + 0.8vw, 20px); }
.prep__item h3 { font-size: clamp(16px, 0.85rem + 0.57vw, 22px); line-height: 1.15; letter-spacing: -0.015em; margin-bottom: 8px; text-transform: none; font-family: var(--font-body); }
.prep__item p { font-size: clamp(14px, 0.83rem + 0.19vw, 16px); line-height: 1.6; color: var(--ink-70); margin: 0; }
.disclosure { font-size: clamp(12.5px, 0.74rem + 0.1vw, 13.5px); line-height: 1.6; color: rgba(58, 45, 40, 0.65); margin: 24px 0 0; }

.note { font-size: clamp(14px, 0.83rem + 0.1vw, 15px); line-height: 1.6; color: rgba(246, 235, 226, 0.7); margin: 28px 0 0; max-width: 900px; }


/* ==========================================================================
   Legal pages (Impressum, Datenschutz)
   ========================================================================== */

.legal { max-width: 78ch; }
.legal h1 { margin-bottom: clamp(24px, 1rem + 2vw, 40px); }
.legal h2 {
  font-size: clamp(19px, 1.05rem + 0.48vw, 24px);
  letter-spacing: -0.015em;
  margin: clamp(32px, 1.4rem + 2vw, 48px) 0 clamp(10px, 0.5rem + 0.4vw, 14px);
}
.legal p { font-size: var(--fs-body); line-height: 1.7; margin: 0 0 14px; }
.legal ul { font-size: var(--fs-body); line-height: 1.7; margin: 0 0 14px; padding-left: 1.3em; }
.legal li { margin-bottom: 6px; }
.legal li::marker { color: var(--clay); }
.legal strong { font-weight: 400; box-shadow: inset 0 -0.35em 0 rgba(198, 182, 230, 0.55); }
.legal em { font-style: normal; box-shadow: inset 0 -0.35em 0 rgba(198, 182, 230, 0.55); }

/* A field only HOLD SPACE can fill in. Loud on purpose. */
.legal__gap {
  background: var(--clay);
  color: var(--cream);
  padding: 1px 8px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 0.86em;
  letter-spacing: 0.04em;
}

/* A note to whoever maintains the page, not to the visitor. */
.legal__todo {
  border-left: 3px solid var(--lavender);
  padding: 4px 0 4px 16px;
  margin: 0 0 14px;
  font-size: clamp(13.5px, 0.79rem + 0.1vw, 15px);
  color: var(--ink-60);
}

.legal__meta {
  margin-top: clamp(32px, 1.4rem + 2vw, 48px);
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-50);
}


/* --- IV booking: the Acuity calendar slot --------------------------------
   Giulia Margreiter's scheduling runs on Acuity. Until the owner ID or
   scheduling URL is in place this renders as a labelled placeholder with a
   working fallback, rather than pretending to be a calendar. */

/* The booking band is centred in the design: heading, lead and buttons all
   sit on the page's middle axis. */
.cta-band__inner--wide { max-width: 980px; margin-inline: auto; text-align: center; }
.cta-band__inner--wide .hero__actions { justify-content: center; }
.cta-band__inner--wide .cta-band__fine { margin-inline: auto; margin-top: 32px; }

.booking {
  border: 1px solid rgba(246, 235, 226, 0.4);
  border-radius: var(--r-card);
  background: rgba(246, 235, 226, 0.07);
  overflow: hidden;
}
.booking__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: clamp(12px, 0.6rem + 0.6vw, 16px) clamp(16px, 0.8rem + 1vw, 26px);
  border-bottom: 1px solid rgba(246, 235, 226, 0.25);
  font-family: var(--font-display);
  font-size: clamp(10px, 0.58rem + 0.14vw, 11.5px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.booking__label { color: var(--cream-80); }
.booking__state {
  color: var(--espresso);
  background: var(--lavender);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.booking__slot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(24px, 1.2rem + 2vw, 44px) clamp(16px, 0.8rem + 1vw, 26px);
}
.booking__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(18px, 0.95rem + 0.76vw, 26px);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  color: var(--cream);
}
.booking__hint { margin: 0; max-width: 60ch; font-size: var(--fs-body); line-height: 1.6; color: var(--cream-80); }
/* Once the embed lands it replaces .booking__slot and keeps the frame. */
.booking iframe { width: 100%; min-height: 640px; border: 0; display: block; }

/* Schedule: the timetable itself lives in Mindbody, this block is the way in. */
/* Kurskalender von Mindbody hinter einem Klick ------------------------------
   Vor dem Klick eine Karte im Hausstil, nach dem Klick das Widget. Der
   Platzhalter hat eine Mindesthoehe, damit der Abschnitt beim Laden nicht
   springt. */
.embed-gate {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  margin-bottom: clamp(16px, 0.8rem + 1vw, 24px);
  overflow: hidden;
}
.embed-gate__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 260px;
  padding: clamp(28px, 1.4rem + 2.4vw, 56px) clamp(18px, 0.9rem + 1.6vw, 40px);
  text-align: center;
}
.embed-gate__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(19px, 1rem + 0.6vw, 26px);
  color: var(--espresso);
  margin: 0;
}
.embed-gate__hint {
  margin: 0;
  max-width: 52ch;
  font-family: var(--font-body);
  font-size: clamp(13.5px, 0.78rem + 0.16vw, 15px);
  line-height: 1.6;
  color: var(--ink-70);
}
.embed-gate__hint a { color: var(--clay); text-decoration: underline; }
.embed-gate button { cursor: pointer; }

/* Schlanke Fassung fuer eine Schranke, die in einer Karte sitzt und nicht
   ueber die ganze Breite. Kein Rahmen, keine Mindesthoehe, linksbuendig. */
.embed-gate--inline {
  background: none;
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
  overflow: visible;
}
.embed-gate--inline .embed-gate__inner {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  min-height: 0;
  padding: 0;
  gap: 10px;
}
.embed-gate--inline .embed-gate__title {
  font-size: clamp(12px, 0.7rem + 0.14vw, 13px);
  letter-spacing: 0.16em;
  color: var(--ink-70);
}
.embed-gate--inline .embed-gate__hint { max-width: 46ch; }

/* --- Kontolink ----------------------------------------------------------
   Dieselbe Klickschranke wie sonst, nur so klein wie ein Textlink. healcode.js
   wird erst beim Klick geladen; danach setzt das Widget seinen eigenen Link
   ein und site.js versucht, ihn gleich zu oeffnen. Gelingt das nicht, steht
   der Link da und ein zweiter Klick erledigt es. Deshalb sieht der Knopf
   davor genauso aus wie der Link danach: der Besucher soll keinen Unterschied
   bemerken, wenn es doch zwei Klicks werden.                              */
.embed-gate--link {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
}
.embed-gate--link .embed-gate__inner {
  display: contents;
}
.account__btn,
.account__widget a {
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ink-50);
  white-space: nowrap;
}
.account__btn:hover,
.account__widget a:hover { color: var(--espresso); }

/* Im Kopf nur ab 900 px: darunter ist dort kein Platz, dort steht der
   Eintrag im ausgeklappten Menue. Genau umgekehrt wie .header__locale. */
.account--header { display: none; }
@media (min-width: 900px) { .account--header { display: inline-flex; } }
@media (min-width: 900px) { .account--nav { display: none; } }

/* Im ausgeklappten Menue sieht der Eintrag aus wie die Links daneben. Die
   Regeln dafuer stehen hier und nicht oben im Navigationsblock, weil sie
   sonst von diesen hier ueberschrieben wuerden: gleiche Spezifitaet, und
   spaeter im Stylesheet gewinnt. */
@media (max-width: 899px) {
  .account--nav { display: block; }
  .account--nav .account__btn,
  .account--nav .account__widget a {
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px 0;
    border-top: 1px solid var(--rule-soft);
    color: var(--espresso);
    font-size: 13px;
    letter-spacing: 0.12em;
  }
}

/* Im Footer in der Kontakt-Spalte, also auf dunklem Grund. */
.account--footer .account__btn,
.account--footer .account__widget a {
  color: var(--lavender);
  font-family: var(--font-body);
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
}
.account--footer .account__btn:hover,
.account--footer .account__widget a:hover { color: var(--cream); }
.account healcode-widget { display: inline; }

/* Gutscheine. Je Zeile der Betrag von uns und daneben der Link, den das
   Widget einsetzt. Die Beschriftung dieses Links kommt von Mindbody, nicht
   von hier; deshalb steht der Betrag als eigenes Element daneben und nicht
   im Knopf.

   Gestylt wird das a im Container, nicht die Klasse des Anbieters: die kann
   sich aendern, ein Link im Container bleibt ein Link im Container. */
.giftgate__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.giftgate__list li,
.giftgate__pass { display: flex; align-items: center; gap: 12px; margin: 0; flex-wrap: wrap; }
.giftgate__pass { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }
.giftgate__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(14px, 0.8rem + 0.14vw, 16px);
  color: var(--espresso);
  flex: 0 0 4.5em;
}
.giftgate__note {
  font-family: var(--font-body);
  font-size: clamp(12.5px, 0.74rem + 0.1vw, 13.5px);
  line-height: 1.5;
  color: var(--ink-50);
  flex: 1 1 100%;
}
/* Der eingesetzte Link bekommt die Optik der kleinen Knoepfe. Die Werte
   stehen absichtlich hier ausgeschrieben und nicht als @extend von .btn,
   weil es kein @extend gibt und der Anbieter eigene Regeln mitbringt.

   Gezielt auf die beiden Ziel-Container, NICHT auf .giftgate a: im
   Hinweistext steht ein Link auf die Datenschutzerklaerung, und der sah mit
   der breiten Regel mitten im Satz wie ein Knopf aus. */
.giftgate__list a,
.giftgate__pass a {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(11px, 0.64rem + 0.14vw, 12.5px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--espresso);
  color: var(--cream);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  border: 0;
  cursor: pointer;
  line-height: 1.1;
}
.giftgate__list a:hover,
.giftgate__pass a:hover { background: var(--clay); color: var(--cream); }
/* Solange das Skript nicht geladen ist, ist healcode-widget ein unbekanntes
   Element. Es bekommt hier display:inline, damit es nach dem Laden nicht
   erst noch umbricht. */
.giftgate healcode-widget { display: inline-block; }

/* Nach dem Klick. Das Widget bringt sein eigenes Markup und seine eigenen
   Klassennamen mit, die wir nicht kennen und die sich beim Anbieter aendern
   koennen. Deshalb keine Regeln auf fremde Klassen, sondern nur das, was
   sich vererbt: Schrift und Farben aus den Tokens, dazu etwas Luft und ein
   Riegel gegen seitlichen Ueberlauf auf dem Handy. Was das Widget selbst
   fest setzt, bleibt wie es ist. */
.embed-gate.is-loaded {
  padding: clamp(10px, 0.5rem + 0.8vw, 20px);
  font-family: var(--font-body);
  color: var(--espresso);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.embed-gate.is-loaded .mindbody-widget { min-width: 0; }
.embed-gate.is-loaded img { max-width: 100%; height: auto; }
.embed-gate.is-loaded a { color: var(--clay); }
.embed-gate.is-loaded table { width: 100%; border-collapse: collapse; }

/* Contact form. The only form on the site; it posts to /api/contact. */
/* Pflichtfelder. Der Stern allein traegt die Aussage nicht: Vorleser
   sprechen ihn je nach Einstellung gar nicht. Deshalb steht er aria-hidden
   daneben, die Aussage noch einmal als visually-hidden-Text im Label, und ein
   Satz ueber dem Formular erklaert ihn. */
.form__stern { color: var(--clay); margin-left: 0.15em; }
.form__pflicht-hinweis {
  font-size: clamp(12.5px, 0.74rem + 0.1vw, 13.5px);
  line-height: 1.5;
  color: var(--ink-70);
  margin: 0 0 clamp(16px, 0.8rem + 0.6vw, 22px);
}

/* Ein bemaengeltes Feld ist nicht nur ueber die Meldung erkennbar, sondern
   auch am Rahmen — nicht allein ueber Farbe (WCAG 1.4.1). */
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--espresso);
  border-width: 2px;
}

.contact { display: flex; flex-direction: column; gap: clamp(16px, 0.8rem + 0.8vw, 22px); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: var(--font-display);
  font-size: clamp(10.5px, 0.6rem + 0.14vw, 12px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-70);
}
.field input,
.field textarea {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--espresso);
  background: var(--white);
  border: 1px solid var(--rule-soft);
  border-radius: 14px;
  padding: 14px 16px;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 160px; line-height: 1.6; }
.field input:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; border-color: transparent; }

/* The consent checkbox reads as a sentence, so the label keeps body type. */
.field--check { flex-direction: row; align-items: flex-start; gap: 12px; }
.field--check input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--clay); }
.field--check label {
  font-family: var(--font-body);
  font-size: clamp(14px, 0.8rem + 0.14vw, 15.5px);
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact__status { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-70); }
.contact__status:empty { display: none; }
.contact__status.is-ok { color: var(--espresso); }
.contact__status.is-error { color: #9A3412; }

/* The rounded block is cream. Sections that carry their own colour paint
   over it; everything else would otherwise show the stone ground through. */
main { background: var(--cream); }

/* Statement band without a photograph: a flat lavender field with dark type,
   the way the IV design has it. */
.statement--flat {
  background: var(--lavender);
  min-height: 0;
  padding-block: clamp(56px, 2.5rem + 5vw, 120px);
}
.statement--flat p { color: var(--espresso); }

/* The space: a rail of small photographs of the rooms, scrollable on narrow
   screens rather than shrinking to stamps. */
.spacestrip { background: var(--cream); padding-block: clamp(20px, 1rem + 1.4vw, 34px); }
.spacestrip__head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.spacestrip__label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-50);
}
/* Sechs Bilder im Querformat. Auf dem Handy zwei Spalten, darueber drei,
   ab 900 px alle sechs nebeneinander. Kein seitliches Scrollen mehr: bei
   sechs Bildern geht sich die Reihe aus, und was man scrollen muss, sieht
   auf dem Handy niemand. */
.spacestrip__rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 0.4rem + 0.6vw, 14px);
}
@media (min-width: 600px) { .spacestrip__rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .spacestrip__rail { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* Eine Aufnahme hat ihr Motiv weit oben, der Infusionsstaender. Mit dem
   Schnitt der anderen blieben davon Wand und Schlauch uebrig. */
.spacestrip__rail img.spacestrip__hoch { object-position: center 8%; }
.spacestrip__rail img {
  width: 100%;
  /* height:auto ist noetig, sonst gewinnt das height-Attribut der Datei und
     aspect-ratio bleibt wirkungslos. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* Die Quellen sind hochkant. Der Schnitt liegt etwas ueber der Mitte. */
  object-position: center 38%;
  border-radius: 14px;
  display: block;
}

/* Without the paired photograph the card takes the full column. */
.combine__card--wide { margin-top: clamp(24px, 1rem + 1.8vw, 44px); }

/* The sticky mobile bar sticks to the block's bottom edge, not the viewport's,
   so it does not sit on the stone margin. */
.sticky-cta { bottom: var(--page-inset); border-radius: 0 0 var(--page-radius) var(--page-radius); }

/* Breakpoint variants. The two artboards differ in wording and in how many
   buttons the IV hero carries, so a few elements exist in both versions and
   only one is shown. Display is set per element type so an inline span does
   not turn a button into a block. */
.at-mobile { display: none; }
@media (max-width: 899px) {
  .at-desktop { display: none; }
  span.at-mobile { display: inline; }
  a.at-mobile, .btn.at-mobile { display: inline-flex; }
}

/* A caution that belongs with the practice, not with its benefits. */
.practice__caution {
  margin: 0 0 clamp(16px, 0.8rem + 1vw, 26px);
  padding-left: 14px;
  border-left: 2px solid var(--clay);
  font-size: clamp(14px, 0.8rem + 0.14vw, 15.5px);
  line-height: 1.55;
  color: var(--cream-80);
}


/* ===== Lesbarkeit auf dem Telefon, 23.09.2026 =========================
   Rueckmeldung aus der Nutzung: Labels, Badges und Fusszeilenlinks waren
   auf dem Telefon zu klein. Dieser Block hebt unter 900px nur Schriftgroessen
   und Tippflaechen an. Er aendert kein Layout, keine Farben und keine
   Abstaende zwischen den Abschnitten. */
@media (max-width: 900px){
  .eyebrow,
  .footer__label,
  .partners__label,
  .promo__label,
  .metrics__k,
  .numbers__l,
  .sublabel,
  .hero__stat-l,
  .card__badge,
  .price__tag{ font-size: 13px; }

  .card__link{ font-size: 15px; }
  .tab{ font-size: 13px; }
  .btn--clay.header__cta{ font-size: 13px; }

  .footer__cols a{ display: inline-block; padding-block: 7px; }
  .nav-toggle{ min-width: 44px; min-height: 44px; }
  .signup input,
  input[type="text"],
  input[type="email"],
  textarea{ min-height: 44px; }
}