/* -----------------------------------------------------------------------
   Custom font-face declarations
   Files live in /public/fonts and are copied as-is by Vite (no bundling).
   ----------------------------------------------------------------------- */

/* Lemon Milk - accent / UI typeface
   woff2 first (~60% smaller, what every current browser uses) with the
   original file kept as a fallback format for anything that can't. */
@font-face {
  font-family: 'Lemon Milk';
  src: url('/fonts/LemonMilk-Light.woff2') format('woff2'),
       url('/fonts/LemonMilk-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lemon Milk';
  src: url('/fonts/LemonMilk-Medium.woff2') format('woff2'),
       url('/fonts/LemonMilk-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lemon Milk';
  src: url('/fonts/LemonMilk-MediumItalic.woff2') format('woff2'),
       url('/fonts/LemonMilk-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* Playfair Display - display / headline typeface */
@font-face {
  font-family: 'Playfair Display';
  src: url('/fonts/PlayfairDisplay-Regular.woff2') format('woff2'),
       url('/fonts/PlayfairDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('/fonts/PlayfairDisplay-Italic.woff2') format('woff2'),
       url('/fonts/PlayfairDisplay-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('/fonts/PlayfairDisplay-Bold.woff2') format('woff2'),
       url('/fonts/PlayfairDisplay-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('/fonts/PlayfairDisplay-BoldItalic.woff2') format('woff2'),
       url('/fonts/PlayfairDisplay-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Minion Pro - body copy typeface */
@font-face {
  font-family: 'Minion Pro';
  src: url('/fonts/MinionPro-Regular.woff2') format('woff2'),
       url('/fonts/MinionPro-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Minion Pro';
  src: url('/fonts/MinionPro-Semibold.woff2') format('woff2'),
       url('/fonts/MinionPro-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* -----------------------------------------------------------------------
   Design tokens - sourced from Redvell_Design-Elemente.pdf ("Farbwelt")
   ----------------------------------------------------------------------- */
:root {
  /* Terracotta - primary brand color
     Values below were darkened from the original design (kept as comments)
     to clear WCAG AA color-contrast failures found by an axe-core audit —
     white text on the original shades landed between 2.3:1 and 3.7:1
     against a required 4.5:1 (or 3:1 for large/bold text). Hue/saturation
     preserved, only lightness reduced, so the palette reads the same,
     just a shade richer/deeper. */
  --color-brand: #C0836E; /* was #bd7664 */
  --color-brand-dark: #966554; /* was #a25f4f — kept darker than the new --color-brand/--color-terracotta so hover states still darken, not lighten */
  --color-brand-light: #986334; /* was #cd9b6e */

  /* Terracotta CTA - the shade actually filling most solid buttons/badges/
     the "Jetzt starten" band; a distinct, more muted tone from --color-brand
     above, not a typo of it (kept separate on purpose).
     Restored to the original brand values (#c0836e / #cfa37c) at the
     client's request, prioritizing brand color over the contrast fix —
     white text on these again fails WCAG AA (see the color-contrast
     audit notes above/git history if this needs revisiting). */
  --color-terracotta: #c0836e;
  --color-terracotta-light: #cfa37c;

  /* Sage - secondary accent. Also restored toward the original brand
     value (client-provided #658e7a, not quite the old #5f8f72) —
     same contrast tradeoff as terracotta above. */
  --color-sage: #658e7a;
  --color-sage-dark: #365444; /* was #4c7660 — kept darker than the new --color-sage for correct hover direction */
  --color-sage-light: #dde4dc;
  --color-sage-pale: #cad3cc;
  --color-sage-faded: #88a595; /* restored — pixel-matched against the design PDF's testimonial author names */

  /* Dusty blue - "cold" accent */
  --color-frost: #9db9c4;
  --color-frost-dark: #587b89; /* was #7fa0ad */
  --color-frost-light: #e1e8eb;

  /* Warm gold - "Regulate" station */
  --color-amber: #946c2e; /* was #cda25e */
  --color-amber-light: #ede1c8;

  /* Teal - Contact section and Datenschutz modal accent.
     Restored to the original brand value (#72a6a0) — same contrast
     tradeoff as terracotta/sage above. */
  --color-teal: #72a6a0;
  --color-teal-dark: #385653; /* was #5a8a84 — kept darker than the new --color-teal for correct hover direction */
  --color-teal-light: #d2dedc;
  --color-teal-pale: #b5cbc8;

  --color-ink: #282424;
  --color-ink-soft: #5c5551;
  --color-slate: #3b3e41;

  --color-surface: #ffffff;
  --color-surface-sand: #e6e1d7;
  --color-surface-muted: #f5f3ee;
  --color-tan: #ddceb3; /* was #b0a38b, lightened at the client's request */

  --font-display: 'Playfair Display', serif;
  --font-body: 'Minion Pro', serif;
  --font-accent: 'Lemon Milk', sans-serif;
  --font-fallback: Arial, sans-serif;

  --radius-card: 0.675rem;
  --radius-pill: 0.225rem;

  --space-gutter: 1.35rem;
  --space-section: 5.4rem;

  --container-max: 72rem;
  --container-max-lg: 57.6rem;
  --container-max-md: 43.2rem;

  --focus-ring-color: var(--color-brand-dark);

  --transition-fast: 0.2s ease;
}

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

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-body), var(--font-fallback);
  color: var(--color-ink);
  background: var(--color-surface);
}

/* Applied while the Datenschutz <dialog> or the mobile nav is open, so
   the page behind it can't be scrolled with the wheel/keyboard/touch.
   Locked on <html> (not just <body>): html already sets
   overflow-x:hidden above, which stops the browser from propagating
   body's overflow to the viewport, so html itself is the actual
   scrolling box here. */
html.no-scroll,
html.no-scroll body {
  overflow: hidden;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

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

ul,
ol {
  list-style: none;
  padding: 0;
}

table {
  border-collapse: collapse;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display), serif;
  font-weight: 400;
  line-height: 1.15;
}

/* Visible, high-contrast focus state for keyboard navigation (WCAG 2.1 AA) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* #main-content only takes tabindex="-1" so the skip link can move focus
   there; it's a whole-page landmark, not a control, so a 2px box drawn
   around the entire page (and left running down both edges while
   scrolling) isn't a meaningful focus ring — the scroll jump itself is
   the visible cue. */
#main-content:focus-visible {
  outline: none;
}

/* -----------------------------------------------------------------------
   Layout primitives
   ----------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

.container--lg {
  max-width: var(--container-max-lg);
}

.container--md {
  max-width: var(--container-max-md);
}

.section-padding {
  padding-block: var(--space-section);
}

.hidden {
  display: none !important;
}

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

/* Visually hides content while keeping it available to screen readers,
   restoring it on focus (skip link) */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed;
  top: 0.45rem;
  left: 0.45rem;
  z-index: 50;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--color-brand);
  color: #fff;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-card);
}

/* Back-to-top button - same colors/shape as the skip link above, but
   appears on scroll instead of on focus. Hidden with visibility (not just
   opacity) so it's out of the tab order and unclickable while off-screen. */
.back-to-top {
  position: fixed;
  right: 1.35rem;
  bottom: 1.35rem;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand);
  color: #fff;
  padding: 0.675rem;
  border-radius: var(--radius-card);
  box-shadow: 0 0.45rem 0.9rem rgb(40 36 36 / 20%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.45rem);
  transition: opacity var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--color-brand-dark);
}

.back-to-top svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* -----------------------------------------------------------------------
   Buttons
   ----------------------------------------------------------------------- */
/* Base - shared by every filled button variant below */
.btn {
  display: inline-flex;
  align-items: center;
  border-radius: 1rem;
  font-family: var(--font-accent), var(--font-fallback);
  font-size: 0.7875rem;
  letter-spacing: 0.02em;
  padding: 0.275rem 1rem;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
  font-weight: 300;
}

/* Size modifier */
.btn--sm {
  font-size: 0.675rem;
  padding: 0.2rem 0.6rem;
}

/* Color variants - each paired with its own :hover directly below it */
.btn--brand-light {
  background: var(--color-sage);
  color: #fff;
}

.btn--brand-light:hover {
  background: var(--color-brand);
}

.btn--brand {
  background: var(--color-terracotta);
  color: #fff;
}

.btn--brand:hover {
  background: var(--color-brand-dark);
}

.btn--brand-outline {
  background: #fff;
  color: var(--color-terracotta-light);
}

.btn--brand-outline:hover {
  background: var(--color-brand);
  color: #fff;
}

.btn--sage {
  background: var(--color-sage);
  color: #fff;
}

.btn--sage:hover {
  background: var(--color-sage-dark);
}

.btn--white {
  background: #fff;
  /* --color-terracotta, not --color-brand — pixel-matched against the
     client's design PDF ("JETZT MEINEN PLATZ SICHERN" in the CTA band). */
  color: var(--color-terracotta);
}

.btn--white:hover {
  background: var(--color-surface-sand);
}

/* Hero CTA - pill-shaped, same fill as .btn--brand but its own radius/padding */
.btn--hero-cta {
  background: var(--color-terracotta);
  color: #fff;
  font-weight: 300;
  padding: 0.2rem 1.4rem;
  border-radius: 999px;
}

.btn--hero-cta:hover {
  background: var(--color-brand-dark);
}

/* Link-styled CTAs - text links dressed up as calls to action, not filled buttons */
.link-cta {
  font-family: var(--font-accent), var(--font-fallback);
  font-weight: 300;
  font-size: 0.7875rem;
  letter-spacing: 0.06em;
  color: var(--color-brand);
  transition: color var(--transition-fast);
}

.link-cta:hover {
  color: var(--color-brand-dark);
}

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

.link-underline span {
  font-weight: 600;
}

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

/* -----------------------------------------------------------------------
   Badges (small uppercase eyebrow pills)
   ----------------------------------------------------------------------- */
.badge {
  display: inline-block;
  color: #fff;
  font-family: var(--font-accent), var(--font-fallback);
  font-weight: 300;
  font-size: 0.675rem;
  letter-spacing: 0.1em;
  padding: 0.225rem 0.675rem;
}

.badge--brand {
  background: var(--color-terracotta);
}

.badge--frost {
  background: var(--color-frost);
  /* White text, matching the design PDF's "FAQ" badge — this reintroduces
     the ~2:1 contrast failure that a dark-text override used to avoid;
     see git history if that needs revisiting. */
}

.badge--sage {
  background: var(--color-sage);
}

/* -----------------------------------------------------------------------
   Social icon buttons
   ----------------------------------------------------------------------- */
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* 1.5rem = 24px, the WCAG/Lighthouse minimum tap target size (was
     1.35rem/21.6px). */
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  color: #C0836E;
  background: var(--color-surface-sand);
  transition: background-color var(--transition-fast);
}

.social-icon:hover {
  color: #fff;
  background: var(--color-brand-light);
}

.social-icon svg {
  width: 0.9rem;
  height: 0.9rem;
}

.social-icon--on-dark {
  background: rgb(255 255 255 / 10%);
}

.social-icon--on-dark:hover {
  background: rgb(255 255 255 / 20%);
}

.social-icon--on-light {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-teal-light);
  background: var(--color-surface);
}

.social-icon--on-light:hover {
  color: #fff;
  background: var(--color-teal);
}

.social-icon--on-light svg {
  width: 1.6rem;
  height: 1.6rem;
}

/* =========================================================================
   Site header
   ========================================================================= */
/* z-index: backdrop-filter alone silently creates a stacking context at
   an *effective* z-index of 0, without one of its own. Without this,
   .mobile-nav's z-index only wins against .site-header's siblings —
   it's still compared as a whole against page content, and things like
   .hero__content (z-index: 2) or .persona-strip (z-index: 10000) would
   paint above the entire header, dropdown included. */
.site-header {
  position: relative;
  z-index: 10001;
  background: rgb(255 255 255 / 95%);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgb(40 36 36 / 10%);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* padding-block (not the padding shorthand): the element is also
     .container, which sets padding-inline for the side gutters — a plain
     `padding: 2.25rem 0` would zero that back out on every axis it
     doesn't mention. */
  padding-block: 2.25rem;
}

.site-header__logo {
  position: relative;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}

/* Decorative ripple-quarter mark from the brand PDF, sitting up and to
   the right of the wordmark — the SVG's own internal opacity/blend-mode
   styling (soft, translucent tan) carries through when used as an <img>. */
.site-header__logo-icon {
  position: absolute;
     width: 3.5rem;
    height: 3.5rem;
    top: -1.8rem;
    right: -2.1rem;
  pointer-events: none;
}

/* In the footer, .site-footer__brand-sub sits right next to this same
   <a> (not stacked underneath, like the header's own sub-line), so the
   header's rightward offset would run straight into that neighboring
   text — pull it in tighter here instead. */
.site-footer__brand .site-header__logo-icon {
  top: -0.75rem;
  right: -0.15rem;
  width: 1.8rem;
  height: 1.8rem;
}

.site-header__logo-mark {
  font-family: var(--font-accent), var(--font-fallback);
  font-weight: 300;
  font-size: 1.8rem;
  letter-spacing: 0.5em;
}

.site-header__logo-sub {
  font-family: var(--font-accent), var(--font-fallback);
  font-size: 0.54rem;
  font-weight: 300;
  letter-spacing: 0.4em;
}

.site-header__nav {
  display: none;
}

.site-header__nav ul {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  font-family: var(--font-accent), var(--font-fallback);
  font-size: 1.08rem;
  font-weight: 300;
  letter-spacing: 0.02em;
}

.site-header__nav a:hover {
  color: var(--color-brand);
}

.site-header__actions {
  display: none;
}

.site-header__actions .btn,
.mobile-nav__cta .btn {
  background: var(--color-terracotta-light);
}

.site-header__actions .btn:hover,
.mobile-nav__cta .btn:hover {
  background: var(--color-terracotta);
}

.site-header__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem;
  border-radius: var(--radius-card);
}

.site-header__burger svg {
  width: 1.35rem;
  height: 1.35rem;
}

.site-header__burger-line {
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}

.site-header__burger[aria-expanded="true"] .site-header__burger-line--top {
  transform: translateY(6px) rotate(45deg);
}

.site-header__burger[aria-expanded="true"] .site-header__burger-line--mid {
  opacity: 0;
}

.site-header__burger[aria-expanded="true"] .site-header__burger-line--bottom {
  transform: translateY(-6px) rotate(-45deg);
}

.site-header__social {
  display: none;
  justify-content: flex-end;
  gap: 0.675rem;
  padding-bottom: 0.675rem;
  margin-top: -0.225rem;
}

/* position:absolute so opening the menu overlays the page instead of
   pushing .mobile-nav's own height into the document flow (which was
   shoving <main> downward every time it opened). .site-header is the
   position:relative anchor it's placed against, and now that .site-header
   has its own z-index (see above), this only needs to clear its own
   siblings within the header. */
.mobile-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  max-height: calc(100vh - 100%);
  overflow-y: auto;
  border-top: 1px solid rgb(40 36 36 / 10%);
  background: var(--color-surface);
  box-shadow: 0 0.9rem 1.35rem rgb(40 36 36 / 15%);
}

.mobile-nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.225rem;
  padding: 0.9rem var(--space-gutter);
  font-family: var(--font-accent), var(--font-fallback);
  font-size: 0.7875rem;
}

.mobile-nav__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 0.45rem;
}

.mobile-nav__social {
  display: flex;
  justify-content: center;
  gap: 0.675rem;
  padding-bottom: 0.9rem;
}

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
  position: relative;
  /* image-set() picks the WebP (~40% smaller) when supported, falling
     back to the JPEG otherwise — this is the site's LCP image, see the
     matching <link rel="preload"> in index.html's <head>. */
  background-image: linear-gradient(100deg, var(--color-surface-sand) 0%, rgb(228 225 218 / 35%) 100%), image-set(url(/Foto/adobestock-447421284.webp) type("image/webp"), url(/Foto/adobestock-447421284.jpg) type("image/jpeg"));
  background-size: 100% 100%, 190% 100%;
  background-position: 0 0, left center;
  background-repeat: no-repeat;
}

/* Clips the body layer to exactly .hero's own box, so it can't bleed into
   the persona strip below (the tip lives outside this, unclipped) */
.hero__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

/* Shared positioning so both ripple layers line up pixel-for-pixel.
   .hero is full-bleed (its box = the viewport), but .site-header__bar's
   content is a centered .container capped at --container-max — past
   that width the container stops growing while a plain "right: 13.5rem"
   here would keep tracking the true viewport edge, closing the gap and
   eventually sliding the ripple into the header's social icons. The
   extra max() term keeps the same 13.5rem clearance from the container's
   edge instead once the viewport is wider than it, so the gap no longer
   shrinks past that width. */
.hero-ripple-top,
.hero-ripple-body {
  display: none;
  pointer-events: none;
  position: absolute;
  right: max(13.5rem, calc((100% - var(--container-max)) / 2 + 13.5rem));
  top: -3.6rem;
  width: 40.5rem;
  height: 40.5rem;
}

/* Opaque tip: lives directly in .hero (outside .hero__frame), so it's free
   to poke up over the header's white background. Self-clipped to just the
   sliver that should be visible above .hero's top edge. z-index has to
   beat .site-header's own 10001 (needed for the mobile nav dropdown to
   stack correctly) or the header's opaque background paints over this
   sliver instead of letting it poke through. */
.hero-ripple-top {
  z-index: 10002;
  clip-path: inset(0 0 calc(100% - 3.6rem) 0);
}

/* Translucent body: sits inside .hero__frame, which clips it to .hero's
   box top/bottom/sides so it can't spill into the next section */
.hero-ripple-body {
  opacity: 0.30;
  filter: brightness(1.35);
}

.hero__content {
  position: relative;
  z-index: 2;
  padding-top: 2.7rem;
  padding-bottom: 2.7rem;
}

.hero__eyebrow {
  font-family: var(--font-display), serif;
  font-style: normal;
  font-size: 1.35rem;
  color: var(--color-ink);
}

.hero__title {
  font-family: var(--font-accent), var(--font-fallback);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 2.025rem;
  line-height: 1.15;
  color: #C0836E;
  margin-top: 0.45rem;
  max-width: 43.2rem;
}

.hero__subcopy {
  margin-top: 1.8rem;
  font-family: var(--font-display), serif;
  font-size: 1.0125rem;
  color: var(--color-ink-soft);
}

.hero__subcopy p + p {
  margin-top: 0.225rem;
}

.hero__actions {
  margin-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.35rem;
}

/* Persona strip: three archetypes, each photo paired with a solid-color
   caption panel (not overlaid text) */
.persona-strip {
  position: relative;
  z-index: 10000;
  display: flex;
  flex-direction: column;
}

.persona-strip__photo {
  position: relative;
  min-height: 16.2rem;
}

.persona-strip__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.persona-strip__caption {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 1.8rem;
  color: #fff;
}

.persona-strip__caption h2 {
  font-family: var(--font-accent), var(--font-fallback);
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.3;
}

.persona-strip__caption p {
  font-family: var(--font-display), serif;
  font-style: italic;
  font-size: 0.7875rem;
  margin-top: 0.675rem;
  line-height: 1.4;
}

.persona-strip__caption--brand {
  background: var(--color-terracotta-light);
}

.persona-strip__caption--frost {
  color: var(--color-slate);
  background: var(--color-frost);
  justify-content: flex-end;
}

.persona-strip__caption--sage {
  background: var(--color-sage);
  text-align: end;
}

/* =========================================================================
   Routine intro ("Der erste Recovery Circle seiner Art")
   ========================================================================= */
.routine-intro {
  position: relative;
  z-index: -2;

  background: var(--color-frost-light);

}

.routine-intro__grid {
  display: grid;
  justify-items: center;
  gap: 1.3rem;
  text-align: center;
}

.routine-intro__heading {
  font-family: var(--font-accent), var(--font-fallback);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 2.025rem;
  line-height: 1.15;
  color: var(--color-terracotta);
}

.routine-intro__lede {
  font-family: var(--font-display), serif;
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--color-ink);
}

.routine-intro__body {
  color: var(--color-ink-soft);
  max-width: 65ch;
  text-align: justify;
  font-size: 1rem;
}

.routine-intro__closing {
  font-family: var(--font-display), serif;
  font-weight: 300;
    font-size: 1rem;
  color: var(--color-ink-soft);
}

/* =========================================================================
   Feeling / Stations ("Das ist das Gefühl danach")
   ========================================================================= */
.feeling {
  position: relative;
  padding-block: 2rem;
}

/* Decorative ripple bleeding in from the left edge, poking slightly above
   the section's top edge (into the matching frost-light section above) */
.feeling__ripple {
  display: none;
  pointer-events: none;
  position: absolute;
  z-index: -1;
  left: -10.8rem;
  top: -3.6rem;
  width: 37.8rem;
  height: 37.8rem;
  opacity: 0.75;
}

.feeling__kicker {
  font-family: var(--font-display), serif;
  font-size: 1.35rem;
  text-align: end;
  color: var(--color-ink);
}

.feeling__heading {
  font-family: var(--font-accent), var(--font-fallback);
  text-transform: uppercase;
  font-size: 1.6875rem;
  text-align: end;
  color: var(--color-sage);
  margin-top: 0.45rem;
      font-weight: 300;
    letter-spacing: 0.26rem;
}

.feeling__body {
  margin-top: 1.35rem;
  text-align: end;
  color: var(--color-ink-soft);
  max-width: 43.2rem;
  margin-left: auto;
  margin-bottom: 2rem;
}

.stations {
  display: grid;
  gap: 2.25rem;
  align-items: start;
}

.station--one   { grid-column: 1; }
.station--two   { grid-column: 2; }
.station-group-double { grid-column: 3; } 

.station {
  display: flex;
  flex-direction: column;
}

.station__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-width: 162px;
  margin-bottom: 2.25rem;
}

.station__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.station__img--one-sharp {
  border-radius: 27px;
}

.station--one .station__badge,
.station--two .station__badge {
  position: absolute;
  bottom: 0;
  transform: translateY(30%);
  right: -7rem;;
}


.station-group-double {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.station-group-double__visual {
  position: relative;
  width: 162px;
  aspect-ratio: 3 / 4;
  margin-bottom: 1.7rem;
}

.station-group-double__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 27px;
  transform: scaleX(-1);
}


.station-group-double__visual .station__badge {
  position: absolute;
  bottom: 0;
}

.badge--left {
  right: 50%;
  transform: translate(-9px, 30%) !important;
}

.badge--right {
  left: 50%;
  transform: translate(9px, 30%) !important;
}

.station-group-double__content {
  display: flex;
  justify-content: space-between;
  width: 360px;
  gap: 2.7rem;
  margin-top: 0.45rem;
}

.content--left,
.content--right {
  text-align: left;
  flex: 1;
}

.station-group-double__content .station__content {
  padding-left: 1rem;
}

/* Footprint trail: hidden by default (only the mobile slider media
   query below turns it on); a row of small marks fading in and out
   left-to-right on a loop, standing in for pagination dots to hint that
   the slide auto-advances. */
.stations__trail {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 0.675rem;
  margin-top: 1.8rem;
}

.stations__trail span {
  width: 0.5rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--color-sage);
  opacity: 0;
  /* Duration matches the JS ADVANCE_MS (4500ms) auto-advance interval in
     initStationsSlider(), so one footstep cycle finishes right as the
     slide changes. */
  animation: stations-trail-fade 4.5s ease-in-out infinite;
}

.stations__trail span:nth-child(odd) {
  transform: translateY(0.2rem) rotate(-8deg);
}

.stations__trail span:nth-child(even) {
  transform: translateY(-0.2rem) rotate(8deg);
}

.stations__trail span:nth-child(1) { animation-delay: 0s; }
.stations__trail span:nth-child(2) { animation-delay: 0.33s; }
.stations__trail span:nth-child(3) { animation-delay: 0.66s; }
.stations__trail span:nth-child(4) { animation-delay: 0.99s; }
.stations__trail span:nth-child(5) { animation-delay: 1.32s; }

.station__content.content--right {
  padding-left: 1.5rem;
}

.station__badge {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.8rem 1.44rem 0.1rem 0.5rem;
  width: 12rem;
  border-radius: 18px;
  white-space: nowrap;
  z-index: 2;
}

/* Pixel-matched against the client's design PDF: each of these 4 station
   colors turned out to be one of the core named tokens already used
   elsewhere on the page (terracotta/terracotta-light/frost/teal), not
   the brand/amber/sage-named variants that had drifted in here. */
.station__badge--frost { background-color: var(--color-frost); }
.station__badge--brand { background-color: var(--color-terracotta); }
.station__badge--amber { background-color: var(--color-terracotta-light); }
.station__badge--sage  { background-color: var(--color-teal); }

.station__index {
  font-family: var(--font-display);
  font-size: 1.44rem;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.9);
}

.station__name {
  font-family: var(--font-display);
  font-size: 1.17rem;
  font-weight: normal;
  color: #fff;
}

.station__content {
  padding-left: 7.5rem;
}

.station__german {
  font-family: var(--font-display);
  font-size: 1.62rem;
  font-weight: bold;
  margin-bottom: 0.36rem;
}

.station__german--frost { color: var(--color-frost); }
.station__german--brand { color: var(--color-terracotta); }
.station__german--amber { color: var(--color-terracotta-light); }
.station__german--sage  { color: var(--color-teal); }

.station__desc {
  font-size: 0.81rem;
  line-height: 1.45;
  color: var(--color-ink-soft);
}


.founding-teaser {
  background: var(--color-amber-light);
  padding-block: 2.6rem;

}

.founding-teaser__inner {
  margin-inline: auto;
  text-align: center;
}

.founding-teaser p {
  margin-bottom: 1.35rem;
  font-family: var(--font-display), serif;
  font-size: 2.125rem;
  color: var(--color-ink);
}

/* =========================================================================
   Founding members
   ========================================================================= */
.founding__grid {
  margin-top: 1.8rem;
  display: grid;
  gap: 2.7rem;
}

.founding-members__section{
  padding-block: 2rem;
}

.founding__heading {
  font-family: var(--font-accent), var(--font-fallback);
  text-transform: uppercase;
  font-weight: 300;
  font-size: 1.6875rem;
  color: #C0836E;
  line-height: 1.15;
}

.founding__lede {
  margin-top: 1.35rem;
  color: var(--color-ink);
  max-width: 65ch;
  font-size: 1.5rem;
    font-weight: 600;
}

.founding__body {
  color: var(--color-ink);
}

.founding__body p + p {
  margin-top: 0.9rem;
}

.founding__grid .btn {
  margin-top: 1.35rem;
}

/* Testimonials */
.testimonials {
  background: var(--color-sage-light);
  padding-block: 2rem;
}

.testimonials__body {
  display: grid;
  gap: 2.25rem;
}

.testimonials__heading {
  font-family: var(--font-display), serif;
  font-size: 1.35rem;
  color: var(--color-ink);
  max-width: 25.2rem;
}

/* Mobile (base): stacks in DOM order — slider, then dots, then the
   empty card as its own full-width block. Tablet/desktop rearranges
   this into a row via order/flex-basis, see min-width: 768px below. */
.testimonials__grid {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  /* Flex/grid items default to min-width: auto, which refuses to shrink
     below their content's intrinsic size. .testimonial-card's percentage
     flex-basis can't be resolved while sizing an ancestor grid track
     (.testimonials__body has no explicit column, so it sizes to content),
     so it falls back to each card's full unwrapped text width — without
     this, that inflated width pushed .testimonials__grid (and the whole
     page) wider than the viewport instead of just scrolling internally. */
  min-width: 0;
}

/* The actual horizontal scroll-snap slider, at every breakpoint — one
   card fills the track with a small peek of the next, see
   .testimonial-card below. .testimonial-card--empty is a sibling, never
   part of this scrollable set. */
.testimonials__slider {
  display: flex;
  gap: 1.35rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
}

.testimonials__slider::-webkit-scrollbar {
  display: none;
}

.testimonial-card {
  background: #ffffff85;
  border-radius: var(--radius-card);
  padding: 1.575rem 0.575rem;
  /* min-height, not height: at tablet widths the quote wraps onto more
     lines than fit in a fixed 15rem box, and the text was spilling past
     the card's rounded edge instead of the card growing to fit it. */
  min-height: 15rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Percentage, not a fixed rem width: one card fills the track with a
     small peek of the next at every breakpoint, desktop included —
     scales with the container instead of fitting more cards side by
     side as the viewport grows. */
  flex: 0 0 85%;
  scroll-snap-align: start;
}

.testimonial-card blockquote {
  font-family: var(--font-display), serif;
  font-style: italic;
  color: var(--color-ink-soft);
}

.testimonial-card__name {
  font-family: var(--font-display), serif;
  color: var(--color-sage-faded);
}

.testimonial-card__meta {
  font-size: 0.7875rem;
  color: var(--color-ink-soft);
}

.testimonial-card--empty {
  border-radius: var(--radius-card);
  border: 1px solid var(--color-sage);
  padding: 1.575rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.9rem;
}

.testimonial-card--empty p {
  font-family: var(--font-display), serif;
  font-weight: 700;
  font-style: italic;
  color: var(--color-sage);
}

/* Full-bleed "Jetzt starten" CTA */
.cta-band {
  background: var(--color-terracotta);
}

.cta-band__inner {
  max-width: 43.2rem;
  margin-inline: auto;
  padding-block: 4.5rem;
  text-align: center;
  color: #fff;
}

.cta-band__kicker {
  font-family: var(--font-accent), var(--font-fallback);
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  font-weight: 300;
}

.cta-band__headline {
  font-family: var(--font-display), serif;
  font-size: 2.7rem;
  margin-top: 0.9rem;
  line-height: 3.5rem;
}

.cta-band__headline em {
  font-style: italic;
  font-weight: 600;
}

.cta-band__body {
  margin-top: 1.8rem;
  max-width: 25.2rem;
  margin-inline: auto;
}

.cta-band__actions {
  margin-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.cta-band__actions span {
  font-family: var(--font-accent), var(--font-fallback);
  text-transform: uppercase;
  font-size: 1.7875rem;
}

/* =========================================================================
   FAQ
   ========================================================================= */
.faq {
  background: var(--color-frost-light);
}

.faq-padding{
  padding-block: 3rem;
}

.faq__heading {
  font-family: var(--font-display), serif;
  font-size: 1.6875rem;
  color: var(--color-ink);
  margin-top: 1.35rem;
}

.faq-slider {
  /* Nudge left just enough that the card padding cancels out and its
     question text lines up with the heading above; extend right all the
     way to the viewport edge (independent of container--lg's max-width)
     so the peeking card is cut off by the screen, not the column. */
  margin-left: calc(-1 * var(--space-gutter));
  margin-right: calc(50% - 50vw);
  margin-top: 2.25rem;
}

.faq-track {
  display: flex;
  gap: 1.35rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  padding-right: var(--space-gutter);
  padding-bottom: 0.45rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.faq-track::-webkit-scrollbar {
  display: none;
}

.faq-card {
  flex: 0 0 85%;
  scroll-snap-align: start;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  padding: 1.35rem;
}

.faq-card__question {
  font-family: var(--font-accent), var(--font-fallback);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.8438rem;
  line-height: 1.4;
  color: var(--color-ink);
}

.faq-card__answer {
  margin-top: 0.675rem;
  color: var(--color-ink-soft);
}

/* Generic slider dots — shared by every scroll-snap dot-slider (FAQ,
   testimonials, membership plans). Only the track/dots element IDs
   differ per instance; the look is the same everywhere. */
.slider-dots {
  display: flex;
  justify-content: center;
  margin-top: 1.575rem;
}

/* Visible dot stays small (0.5625rem); the button itself is padded out to
   a 1.5rem (24px) tap target — the WCAG/Lighthouse minimum — via a
   centered ::before, so the tap area grows without the dot row looking
   chunkier. */
.slider-dots__dot {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
}

.slider-dots__dot::before {
  content: '';
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 50%;
  background: var(--color-frost-dark);
  opacity: 0.4;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.slider-dots__dot.is-active::before {
  opacity: 1;
  transform: scale(1.15);
}

/* =========================================================================
   Membership
   ========================================================================= */
.membership__container{
  padding-block: 3rem;
  padding-inline: 5rem;
}

   .membership__lede {
  font-family: var(--font-display), serif;
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--color-ink);
  margin-top: 1.35rem;
}

.membership__heading {
  font-family: var(--font-accent), var(--font-fallback);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 2rem;
  letter-spacing: 0.2rem;
  color: var(--color-sage);
  margin-top: 0.225rem;
}

.plan-grid {
  margin-top: 2.25rem;
  display: grid;
  gap: 5rem;
}

/* Dots only make sense while .plan-grid is a mobile slider (see the
   max-width: 767px block below); tablet/desktop stack or grid every
   card at once, so there's nothing to page through. */
#plan-dots {
  display: none;
}

.plan-card {
  position: relative;
  border-radius: var(--radius-card);
  background: var(--color-sage-pale);
  padding: 1.2rem 0.8rem;
  display: flex;
  flex-direction: column;
}

.plan-card--highlight {
  background: var(--color-sage);
  color: #fff;
}

.plan-card__icons {
  position: absolute;
  top: 1.2rem;
  right: 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  color: rgb(95 143 114 / 55%);
}

.plan-card__icon {
  fill: var(--color-sage-pale);
  width: 2.5rem;
  height: 2.5rem;
}

.plan-card__icon--highlight{
  fill: var(--color-sage)
}


.plan-card__tier {
  font-family: var(--font-accent), var(--font-fallback);
  text-transform: uppercase;
  font-size: 0.7875rem;
  font-weight: 300;
  color: var(--color-sage);
}

.plan-card--highlight .plan-card__tier {
  color: rgb(255 255 255 / 85%);
}

.plan-card__name {
  font-family: var(--font-display), serif;
  font-size: 2rem;
  font-weight: 300;
  color: #000;
  margin-top: 0.225rem;
}

.plan-card--highlight .plan-card__name {
  color: #fff;
}

.plan-card__price {
  margin-top: 0.9rem;
}

.plan-card__price .amount {
  font-family: var(--font-accent), var(--font-fallback);
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--color-ink);
}

.plan-card--highlight .plan-card__price .amount {
  color: #fff;
}

.plan-card__price .unit {
  color: #000;
}

.plan-card--highlight .plan-card__price .unit {
  /* Bumped from 80% to 85% opacity — 80% landed just under 4.5:1 against
     the new (darker) --color-sage background. */
  color: rgb(255 255 255 / 85%);
}

.plan-card p.plan-card__detail {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  color: #000000af;
  font-weight: 600;
}

.plan-card--highlight p.plan-card__detail {
  color: rgb(255 255 255 / 85%);
}

.plan-card--highlight p.plan-card__note {
  color: rgb(255 255 255 / 85%);
}

.membership__banner {
  display: block;
  margin-top: 1.8rem;
  border-radius: 999px;
  background: var(--color-sage);
  color: #fff;
  text-align: center;
  padding: 0.3rem 1.35rem;
  font-family: var(--font-accent), var(--font-fallback);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 0.7875rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.membership__banner strong {
  font-weight: 500;
}

.membership__banner:hover {
  background: var(--color-sage-dark);
}

/* =========================================================================
   Contact
   ========================================================================= */
.contact {
  background: var(--color-teal-light);
  overflow-x: hidden;

  margin-bottom: 3rem;
}

.contact__grid {
  display: grid;
  gap: 2.7rem;
  padding-block: 2rem;
}
.contact__col-left{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: 1rem 4rem;
}
.contact__col-right {
  display: flex;
  flex-direction: column;
}

.contact__meta {
  align-self: flex-end;
  text-align: right;
}

.contact__intro {
  font-family: var(--font-display), serif;
  font-size: 2rem;
  color: var(--color-teal);
}

.contact__phone {
  margin-top: 0.225rem;
  font-family: var(--font-display), serif;
  color: #000;
  
}
.contact__phone a{
text-decoration: none;
}

.contact__step {
  font-size: 3rem;
    letter-spacing: -0.1rem;
    margin-bottom: 1rem;
  font-family: var(--font-display), serif;
  color: var(--color-ink);
}

.contact__heading {
  font-family: var(--font-accent), var(--font-fallback);
  text-transform: uppercase;
  font-size: 2.025rem;
  color: var(--color-teal);
  margin-top: 0.675rem;
  line-height: 1.15;
  font-weight: 300;
}

.contact__social {
  display: flex;
  gap: 0.675rem;
  margin-top: 1.8rem;
}

.contact-form {
  margin-top: 1.8rem;
  display: flex;
  flex-direction: column;
  /* Extra room below the checkbox row for its floating error message,
     same reasoning as .contact-form__panel's gap. */
  gap: 1.575rem;
}

.contact-form__panel {
  position: relative;
  z-index: 0;
  border-radius: var(--radius-card);
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  /* Extra room vs. a plain field stack: the error message below each
     pill floats over this gap instead of pushing later fields down, so
     it needs enough clearance not to overlap the next input. */
  gap: 1.575rem;
}

.contact-form__panel > div {
  position: relative;
}

/* The panel's own box keeps the form's width/position unchanged; this
   pseudo-element carries the background and bleeds past it to the right
   all the way to the viewport edge (html has overflow-x:hidden, so the
   overshoot past 100vw is simply clipped, no horizontal scrollbar). */
.contact-form__panel::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  background: var(--color-teal-pale);
  border-radius: 2rem 0 0 2rem;
  z-index: -1;
}

.form-field__label {
  display: block;
  font-family: var(--font-accent), var(--font-fallback);
  text-transform: uppercase;
  font-size: 0.675rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.45rem;
}

.form-field__input {
  width: 100%;
  border-radius: 999px;
  border: none;
  padding: 0.9rem 1.35rem;
  background: var(--color-frost-light);
  font-size: 0.8438rem;
}

.form-field__input::placeholder {
  font-family: var(--font-accent), var(--font-fallback);
  text-transform: uppercase;
  font-size: 0.675rem;
  letter-spacing: 0.02em;
  color: var(--color-ink-soft);
  opacity: 0.5;
}

.form-field__error {
  margin-top: 0.225rem;
  margin-left: 1.35rem;
  font-size: 0.7875rem;
  color: var(--color-brand-dark);
}

/* Inside the pill panel, errors float below their field instead of
   pushing the rest of the form down: absolutely positioned, and always
   present in the layout (never display:none) so opacity/transform can
   transition smoothly in both directions. */
.contact-form__panel .form-field__error {
  position: absolute;
  top: 105%;
  left: 1.35rem;
  right: 1.35rem;
  margin-top: 0.35rem;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: translateY(-0.3rem);
  opacity: 1;
}

.contact-form__panel .form-field__error.hidden {
  display: block !important;
  opacity: 0;
  transform: translateY(-0.55rem);
  pointer-events: none;
}

.form-field--checkbox {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.675rem;
  padding-inline: 1.5rem;
}

.form-field--checkbox label {
  font-size: 0.7875rem;
  color: var(--color-ink-soft);
}

.form-field--checkbox label button {
  display: inline;
  padding: 0;
  font: inherit;
  vertical-align: baseline;
}

/* Custom checkbox: the real input sits invisibly on top of the drawn box
   (same size/position) so clicks, focus and keyboard toggling all work
   natively; .checkbox-box is purely decorative. */
.checkbox-visual {
  position: relative;
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
}

.checkbox-native {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.checkbox-box {
  position: absolute;
  inset: 0;
  border: 2px solid var(--color-teal);
  border-radius: 0.25rem;
  background: var(--color-frost-light);
  pointer-events: none;
}

.checkbox-box::after {
  content: '';
  position: absolute;
  display: none;
  left: 50%;
  top: 45%;
  width: 0.28rem;
  height: 0.52rem;
  border: solid var(--color-sage);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.checkbox-native:checked + .checkbox-box::after {
  display: block;
}

.checkbox-native:focus-visible + .checkbox-box {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* Same floating treatment as the pill-field errors: overlays below the
   checkbox row instead of pushing the submit button down. Left offset
   matches checkbox width + gap so the message starts under the label
   text, not under the checkbox itself. */
.form-field--checkbox .form-field__error {
  position: absolute;
  top: 100%;
  left: 1.8rem;
  right: 0;
  margin-top: 0.35rem;
  margin-left: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: translateY(-0.3rem);
  opacity: 1;
}

.form-field--checkbox .form-field__error.hidden {
  display: block !important;
  opacity: 0;
  transform: translateY(-0.55rem);
  pointer-events: none;
}

.contact-form__submit {
  display: flex;
  justify-content: center;
  width: 100%;
  border-radius: 999px;
  padding: 0.9rem 1.35rem;
  font-size: 0.7875rem;
  background: var(--color-teal);
  margin: 0 auto;
    max-width: 92%;
    color: #fff;
}
.contact-form__submit:hover{
  background: var(--color-teal-dark);
}
.contact-form__note {
      padding-inline: 1.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #000;
}

/* =========================================================================
   Datenschutz modal
   ========================================================================= */
.modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(90vw, 40rem);
  max-height: min(85vh, 40rem);
  padding: 0;
  border: none;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  flex-direction: column;
  overflow: hidden;
  z-index: 1000;
}

/* Author styles beat the UA stylesheet regardless of specificity, so an
   unconditional `display` here would override the browser's own
   `dialog:not([open]) { display: none }` and keep it visible even when
   closed — scope it to [open] instead. */
.modal[open] {
  display: flex;
}

.modal::backdrop {
  background: rgb(40 36 36 / 55%);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 1.35rem 1.35rem 0.9rem;
  border-bottom: 1px solid rgb(40 36 36 / 10%);
}

.modal__title {
  font-family: var(--font-display), serif;
  font-size: 1.35rem;
  color: var(--color-ink);
}

.modal__close {
  flex-shrink: 0;
  color: var(--color-ink-soft);
  padding: 0.225rem;
  transition: color var(--transition-fast);
}

.modal__close:hover {
  color: var(--color-teal);
}

.modal__close svg {
  width: 1.125rem;
  height: 1.125rem;
}

.modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 1.35rem;
}

.modal__loading {
  color: var(--color-ink-soft);
}

.modal__body .legal-article {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* The modal already has its own header with the same title. */
.modal__body .legal-article__title,
.modal__body .legal-article__intro {
  display: none;
}

.modal__footer {
  padding: 1.125rem 1.35rem;
  border-top: 1px solid rgb(40 36 36 / 10%);
  display: flex;
  justify-content: flex-end;
}

.modal__footer button{
  background: var(--color-teal);
}

.modal__footer button:hover{
  background: var(--color-teal-dark);
}

/* =========================================================================
   Site footer
   ========================================================================= */
.site-footer {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(100deg, var(--color-surface-sand) 0%, rgb(213 203 184 / 35%) 100%), image-set(url(/Foto/adobestock-447421284.webp) type("image/webp"), url(/Foto/adobestock-447421284.jpg) type("image/jpeg"));
  background-position: 0 0, left center;
  background-size: 100% 100%, 160% 100%;
  background-repeat: no-repeat;
  color: var(--color-ink);
}

/* Same abstract ripple/circle motif as the hero background, mirrored to
   sit quietly on the right instead of competing with the brand mark. */
.site-footer__ripple {
  position: absolute;
  right: -7.2rem;
  top: 50%;
  transform: translateY(-50%) scaleX(-1);
  width: 27rem;
  height: 27rem;
  opacity: 0.4;
  pointer-events: none;
}

.site-footer__inner {
  position: relative;
  z-index: 1;
  padding-block: 2.25rem;
}

.site-footer__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.35rem;
}

.site-footer__brand {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
}

.site-footer__brand-mark {
  font-family: var(--font-accent), var(--font-fallback);
  font-weight: 300;
  font-size: 1.8rem;
  letter-spacing: 0.5em;
}

.site-footer__brand-sub {
font-family: var(--font-accent), var(--font-fallback);
    font-size: 0.6075rem;
    letter-spacing: 0.15em;
    color: var(--color-ink-soft);
    align-self: flex-start;
    padding-top: 0.5rem;
}

.site-footer__nav ul {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  font-size: 0.7875rem;
  color: var(--color-ink-soft);
}

.site-footer__nav a:hover {
  color: var(--color-ink);
}


/* =========================================================================
   Legal pages (Impressum, Cookie-Richtlinie, Datenschutz)
   ========================================================================= */
.legal-article {
  max-width: var(--container-max-md);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
  padding-block: var(--space-section);
}

.legal-article__title {
  font-family: var(--font-display), serif;
  font-size: 2.025rem;
  margin-bottom: 1.8rem;
}

.legal-article__intro {
  color: var(--color-ink-soft);
  margin-bottom: 1.8rem;
}

.legal-article section,
.legal-article > ol > li {
  margin-top: 1.8rem;
}

.legal-article section:first-of-type,
.legal-article > ol > li:first-child {
  margin-top: 0;
}

.legal-article h2 {
  font-family: var(--font-accent), var(--font-fallback);
  text-transform: uppercase;
  font-size: 1.125rem;
  margin-bottom: 0.675rem;
}

.legal-article p {
  color: var(--color-ink-soft);
}

.legal-article p + p {
  margin-top: 0.675rem;
}

.legal-article ul {
  color: var(--color-ink-soft);
  list-style: disc;
  padding-left: 1.125rem;
  margin-top: 0.45rem;
}

.legal-article ul li + li {
  margin-top: 0.225rem;
}

.legal-article ol {
  list-style: none;
}

.legal-article__table-wrap {
  overflow-x: auto;
}

.legal-article table {
  width: 100%;
  text-align: left;
  font-size: 0.7875rem;
}

.legal-article th {
  padding: 0.45rem 0.9rem 0.45rem 0;
  border-bottom: 1px solid rgb(40 36 36 / 20%);
}

.legal-article td {
  padding: 0.45rem 0.9rem 0.45rem 0;
  border-bottom: 1px solid rgb(40 36 36 / 10%);
}

/* =========================================================================
   Media queries
   All @media blocks live here, after the base styles, in the same order
   they originally appeared inline. Keeping them together makes the
   responsive rules easy to audit without hunting through every section.
   ========================================================================= */

/* Respect reduced-motion user preference */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Site header */
@media (min-width: 768px) {
  .site-header__nav,
  .site-header__actions,
  .site-header__social {
    display: flex;
  }

  .site-header__burger,
  .mobile-nav {
    display: none;
  }
}

/* Tablet: logo + nav share the top row; the CTA button and social links
   wrap onto their own row underneath, right-aligned so they sit under
   the nav rather than under the logo. */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header__bar {
    flex-wrap: wrap;
    row-gap: 0.9rem;
  }

  .site-header__actions {
    flex: 1 0 100%;
    align-items: center;
    justify-content: flex-end;
    gap: 1.35rem;
  }

  .site-header__social {
    padding-bottom: 0;
    margin-top: 0;
  }
}

/* Desktop: button stays inline with logo/nav on the top row; social
   icons get their own row underneath, centered under the full bar. */
@media (min-width: 1024px) {
  .site-header__actions {
    position: relative;
  }

  .site-header__social {
    position: absolute;
    bottom: -2.7rem;
    left: 0;
    right: 0;
    justify-content: center;
  }
}

/* Hero */
@media (min-width: 768px) {
  .hero{
    background-size: 100% 100%, 125% 100%;
  }
  .hero-ripple-top,
  .hero-ripple-body {
    display: block;
  }

  .hero__content {
    padding-top: 2.7rem;
    padding-bottom: 2.7rem;
  }

  .hero__title {
    font-size: 3.375rem;
  }
}

/* Persona strip */
@media (min-width: 768px) {
  .persona-strip {
    flex-direction: row;
    height: 18rem;
  }

  .persona-strip__photo {
    min-height: 0;
    flex: 2 1 0%;
  }

  .persona-strip__caption {
    flex: 1 1 0%;
  }

  .persona-strip__caption h2 {
    font-size: 1.0125rem;
  }

  .persona-strip__caption p {
    font-size: 0.9rem;
  }
}

/* Routine intro */
@media (min-width: 768px) {
  .routine-intro__heading {
    font-size: 3.375rem;
  }
}

/* Feeling / Stations
   The single station--one/two badges float out to the right by 7rem in
   the desktop rules above — that only has room to breathe because of the
   wide 1fr third column desktop reserves next to them. Below 1024px there
   is no such column, so both mobile and tablet need them back in normal
   flow (and the station__content indent that was compensating for that
   float needs to go with it).

   .station__visual is unwrapped the same way as .station-group-double__visual
   below: its own box is locked to a 3:4 aspect-ratio, so a badge dropped
   inside it as a static, in-flow child would render past that fixed
   height and overlap .station__content, which is positioned right after
   assuming the visual's nominal (unexpanded) height. */

   @media (max-width: 1023px) {
  .station__visual {
    display: contents;
  }

  .station__img {
    width: 100%;
    height: auto;
    max-width: 162px;
    aspect-ratio: 3 / 4;
    margin-bottom: 0.9rem;
  }

  .station--one .station__badge,
  .station--two .station__badge,
  .station--four .station__badge {
    position: static;
    transform: none;
    margin-bottom: 0.9rem;
  }

  .station__content {
    padding-left: 0;
  }
}

/* Mobile: one station per screen, auto-advancing horizontally instead of
   one long vertical stack. All three slides are direct flex children of
   the same row, so by default flex cross-axis stretch already gives them
   identical heights — nothing needs to be measured in JS to stop the
   layout from jumping height when the slide changes. */
@media (max-width: 767px) {
  .stations {
    display: flex;
    /* Overrides the desktop grid rule's align-items: start — stretch is
       what makes all three slides land on the same height for free,
       instead of each sizing to its own (very different) content. */
    align-items: stretch;
    /* Overrides the desktop grid rule's 2.25rem gap — each slide is
       flex: 0 0 100% (full-width), so any gap here would throw off the
       `index * clientWidth` math the slider JS uses for both scrollTo
       targets and detecting when it's landed on a clone. */
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .stations::-webkit-scrollbar {
    display: none;
  }

  .station,
  .station-group-double {
    flex: 0 0 100%;
    scroll-snap-align: start;
    /* flex-start, not center: content height differs slightly slide to
       slide (different text lengths), and centering it within the
       shared stretched height made each slide's image start at a
       different Y — top-aligning keeps every image flush with the
       others regardless of how much text sits below it. */
    justify-content: flex-start;
  }

  .station {
    align-items: center;
    max-width: none;
  }

  .station-group-double {
    max-width: none;
    width: 100%;
  }

  /* Unwraps the visual's own box so the image and the two badges inside
     it become direct flex children of .station-group-double (a flex
     column) instead of stacking inside a box whose height is still
     locked to the old 3:4 aspect-ratio — without this, the badges render
     past that fixed height and overlap the content below. */
  .station-group-double__visual {
    display: contents;
  }

  .station-group-double__img {
    width: 100%;
    height: auto;
    max-width: 162px;
    aspect-ratio: 3 / 4;
    border-radius: 27px;
    margin-bottom: 0.9rem;
  }

  .station-group-double__content .station__content {
    padding-left: 4.5rem;
    margin-top: 0.9rem;
  }

  /* Specificity has to match (or beat) the base rule
     ".station-group-double__visual .station__badge" (two classes) —
     ".badge--left, .badge--right" alone is weaker and silently lost this
     fight, leaving position: absolute in place. That's a problem here
     specifically because .station-group-double__visual just became
     display: contents above: with no box left to be its containing
     block, the badge fell back to positioning against .feeling (the
     nearest ancestor that still has position: relative), landing
     wherever .feeling's own bottom-left corner happened to be. */
  /* order values below interleave badge/text/badge/text (instead of the
     DOM's natural img+badge+badge, then text+text) once .visual and
     .content are both unwrapped into .station-group-double's own flex
     column via display: contents. */
  .station-group-double__img {
    order: 1;
  }

  .station-group-double__visual .badge--left,
  .station-group-double__visual .badge--right {
    position: static;
    transform: none;
    margin: 0 auto 0.9rem;
  }

  .station-group-double__visual .badge--left {
    order: 2;
  }

  .station-group-double__visual .badge--right {
    order: 4;
  }

  .station-group-double__content {
    display: contents;
    text-align: center;
  }

  .content--left,
  .content--right {
    flex: 0 0 auto;
    margin-bottom: 1.35rem;
  }

  .content--left {
    order: 3;
  }

  .content--right {
    order: 5;
    margin-bottom: 0;
  }

  /* 04/Release has its own dedicated .station--four slide (see below), so
     it no longer also appears bundled into this one. */
  .station-group-double__visual .badge--right,
  .station-group-double__content .content--right {
    display: none;
  }

  .stations__trail {
    display: flex;
  }
}

@keyframes stations-trail-fade {
  0%, 100% { opacity: 0; }
  20%, 45% { opacity: 1; }
  75% { opacity: 0; }
}

/* Tablet: station--one/two side by side on their own row, with
   station-group-double centered on a full-width row underneath. The
   double station itself keeps its desktop presentation (162px visual,
   small badge--left/right offsets, side-by-side content) — at this width
   it always gets a dedicated row to do that in, so nothing overflows. */
@media (min-width: 768px) and (max-width: 1023px) {
  .stations {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2.7rem;
  }

  .station--one,
  .station--two {
    align-items: center;
    flex: 0 1 252px;
  }

  .station-group-double {
    flex: 1 0 100%;
  }
}

@media (min-width: 768px) {
  .feeling__ripple {
    display: block;
  }

  .feeling__heading {
    font-size: 2.025rem;
  }

  /* 04/Release rejoins station-group-double (03+04 combined) at tablet
     and desktop — the standalone mobile-only slide is not needed. */
  .station--four {
    display: none;
  }

  /* initStationsSlider() (js/main.js) always appends a clone of slide 1
     to power the mobile-only forward-looping auto-advance — without this
     it would otherwise show up as a real, visible 4th/5th grid or
     flex-wrap item here. */
  .stations__loop-clone {
    display: none;
  }
}

/* Founding members */
@media (min-width: 768px) {
  .founding__grid {
    grid-template-columns: 1fr 1fr;
  }

  .founding__heading {
    font-size: 2.025rem;
  }
}

/* Testimonials
   Tablet keeps the heading as its own full-width row above the card
   slider (also full width) — splitting into the desktop's two side-by-side
   columns at this width squeezed the cards into too little room. Only
   at 1024px+ is there enough space for heading + cards side by side.

   The slider/empty-card arrangement also changes here: mobile stacks
   them (slider, dots, empty card) in DOM order via the base rules above;
   at this width a 2-column/2-row grid takes over instead — slider and
   dots share the left column (stacked, so the dots land centered under
   the slider itself, not the whole row), while .testimonial-card--empty
   spans both rows in the right column, always fully visible and never
   scrolled. Grid (not flex-wrap) specifically because explicit column
   sizes (1fr / 16rem) sidestep the unresolvable-percentage-flex-basis
   problem flex-wrap's line-breaking hit here before — no intrinsic
   content size ever needs computing. */
@media (min-width: 768px) {
  .testimonials__heading {
    font-size: 1.6875rem;
  }

  .testimonials__grid {
    display: grid;
    grid-template-columns: 1fr 16rem;
    grid-template-rows: auto auto;
    column-gap: 1.35rem;
    row-gap: 1.35rem;
  }

  .testimonials__slider {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  #testimonials-dots {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
  }

  .testimonial-card--empty {
    grid-column: 2;
    /* Row 1 only, not 1 / 3 — spanning into the dots' row made this
       taller than the card it sits beside. Grid's default stretch then
       matches it to exactly row 1's height, i.e. the card's own height. */
    grid-row: 1;
  }

  /* No peek at tablet/desktop — one full card at a time. */
  .testimonial-card {
    flex: 0 0 100%;
  }
}

@media (min-width: 1024px) {
  .testimonials__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.35fr);
    align-items: start;
    gap: 2.7rem;
  }

  /* Desktop only (tablet keeps the 768px rule's single full-width card):
     two cards fit side by side at once instead of one-at-a-time. */
  .testimonial-card {
    flex: 0 0 calc(50% - 0.675rem);
  }
}

/* CTA band */
@media (min-width: 768px) {
  .cta-band__headline {
    font-size: 3.375rem;
  }
}

/* FAQ */
@media (min-width: 640px) {
  .faq-card {
    flex-basis: 46%;
  }
}

@media (min-width: 768px) {
  .faq__heading {
    font-size: 2.025rem;
  }

  .faq-card {
    flex-basis: 43%;
  }
}

/* Membership — mobile: the fixed 5rem side padding left barely any room
   for the cards themselves, and the plan grid becomes a one-card-peeking-
   the-next scroll-snap slider (manual only, with dots), same pattern as
   testimonials above. */
@media (max-width: 767px) {
  .membership__container {
    padding-inline: var(--space-gutter);
  }

  .plan-grid {
    display: flex;
    gap: 1.35rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .plan-grid::-webkit-scrollbar {
    display: none;
  }

  .plan-card {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  #plan-dots {
    display: flex;
  }

  .membership__lede {
    font-size: 1.575rem;
  }

  .plan-card__name {
    font-size: 1.755rem;
  }

  .plan-card__tier {
    font-size: 0.7rem;
  }

  .plan-card__price .amount {
    font-size: 2.1rem;
  }

  .plan-card p.plan-card__detail {
    font-size: 0.8rem;
  }

  .membership__banner {
    font-size: 0.3875rem;
  }
}

/* Membership
   Plan cards stay stacked through tablet — 2 columns only from 1024px
   up, where each card actually has room to breathe. */
@media (min-width: 768px) {
  .membership__heading {
    font-size: 2.025rem;
  }
}

@media (min-width: 1024px) {
  .plan-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Contact */
@media (min-width: 768px) {
  .contact__grid {
    grid-template-columns: 1fr 1fr;
  }

  .contact__heading {
   font-size: 3.5rem;
  }
}

/* Site footer */
@media (min-width: 768px) {
  .site-footer{
    background-size: 100% 100%, 135% auto;
  }
  .site-footer__row {
    flex-direction: row;
  }

}