/* layer: preflights */
*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}
/* layer: default */
.absolute{position:absolute;}
.relative{position:relative;}
.mx{margin-left:1rem;margin-right:1rem;}
.inline{display:inline;}
.hidden{display:none;}
.resize{resize:both;}
.b{border-width:1px;}
.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4;}
/* ───────────────────────────────────────────────────────────────────────────
   Coachlogie — Design tokens & base styles
   Mobile-first. Zen. Restrained.
   ─────────────────────────────────────────────────────────────────────────── */

/* ─── Self-hosted fonts ──────────────────────────────────────────────────── */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/static/fonts/cormorantgaramond-300_600-normal-latin.woff2")
    format("woff2");
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+0304,
    U+0308,
    U+0329,
    U+2000-206F,
    U+20AC,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/static/fonts/cormorantgaramond-300_600-normal-latin-ext.woff2")
    format("woff2");
  unicode-range:
    U+0100-02BA,
    U+02BD-02C5,
    U+02C7-02CC,
    U+02CE-02D7,
    U+02DD-02FF,
    U+0304,
    U+0308,
    U+0329,
    U+1D00-1DBF,
    U+1E00-1E9F,
    U+1EF2-1EFF,
    U+2020,
    U+20A0-20AB,
    U+20AD-20C0,
    U+2113,
    U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url("/static/fonts/cormorantgaramond-300_500-italic-latin.woff2")
    format("woff2");
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+0304,
    U+0308,
    U+0329,
    U+2000-206F,
    U+20AC,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url("/static/fonts/cormorantgaramond-300_500-italic-latin-ext.woff2")
    format("woff2");
  unicode-range:
    U+0100-02BA,
    U+02BD-02C5,
    U+02C7-02CC,
    U+02CE-02D7,
    U+02DD-02FF,
    U+0304,
    U+0308,
    U+0329,
    U+1D00-1DBF,
    U+1E00-1E9F,
    U+1EF2-1EFF,
    U+2020,
    U+20A0-20AB,
    U+20AD-20C0,
    U+2113,
    U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/static/fonts/inter-300_600-normal-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+0304,
    U+0308,
    U+0329,
    U+2000-206F,
    U+20AC,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/static/fonts/inter-300_600-normal-latin-ext.woff2")
    format("woff2");
  unicode-range:
    U+0100-02BA,
    U+02BD-02C5,
    U+02C7-02CC,
    U+02CE-02D7,
    U+02DD-02FF,
    U+0304,
    U+0308,
    U+0329,
    U+1D00-1DBF,
    U+1E00-1E9F,
    U+1EF2-1EFF,
    U+2020,
    U+20A0-20AB,
    U+20AD-20C0,
    U+2113,
    U+2C60-2C7F,
    U+A720-A7FF;
}

/* ─── Smooth cross-document page transitions ─────────────────────────────
   Native View Transitions API (Chromium 126+, Safari 18.2+). Older browsers
   fall back to standard navigation — no regression.
   Linear ease + same duration on old/new = no opacity dip = no flash mid-fade.
   Paper background on the transition wrapper kills any white-frame paint. */
/* ACHTUNG: Solange diese Zeile aktiv ist, bricht Lighthouse/PageSpeed Insights
   mit NO_FCP ab (Chrome meldet bei cross-document View Transitions kein
   Paint-Timing). Auskommentieren, wenn ein Score gemessen werden soll. */
@view-transition {
  navigation: auto;
}

::view-transition {
  background: var(--paper);
}
::view-transition-old(root) {
  animation: vt-fade-out 500ms linear both;
}
::view-transition-new(root) {
  animation: vt-fade-in 500ms linear both;
}
@keyframes vt-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes vt-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

:root {
  /* ─── 3 BRAND COLORS ──────────────────────────────────────────────────────
     1. Petrol  — H-Tags, Buttons, Links, Borders, Logo
     2. Gold    — Akzent: Eyebrows, <em>, Quote-Mark, Portrait-Ringe, Decor
     3. Text    — Body-Text (Gut leserliches Grau)
     ─────────────────────────────────────────────────────────────────────── */
  --petrol: #053447;
  --accent-deep: #c68346; /* Warm copper — Akzent (Eyebrows, em, Quote, Ringe) */
  --text: #2d2d2d;

  /* Background neutrals (kein "Brand-Color", nur Untergrund) */
  --paper: #ffffff;
  --paper-warm: #f2f2f2; /* Editorial-Alternation — neutraler Grauton für Section-Rhythmus */
  --surface: #ffffff;

  /* ─── Derived shades — Hierarchy & States aus den 3 Brand-Farben ─────── */
  --ink: #053447;
  --petrol-deep: color-mix(in srgb, var(--petrol) 75%, #000);
  /* Beide Stufen sind AA-fest gegen --paper UND --paper-warm (#f2f2f2):
     soft ≈ 6.1:1, faint ≈ 4.8:1 — faint wird für 12–14px-Text benutzt. */
  --text-soft: color-mix(in srgb, var(--text) 78%, var(--paper));
  --text-faint: color-mix(in srgb, var(--text) 71%, var(--paper));
  --rule: color-mix(in srgb, var(--text) 14%, transparent);
  --rule-soft: color-mix(in srgb, var(--text) 7%, transparent);

  /* Accent for small text — AA-safe. --accent-deep stays for display sizes.
     #c68346 schafft AA erst ab 24px, darunter greifen diese beiden Stufen. */
  --accent-text: #9c5f2a; /* auf --paper / --paper-warm */
  --accent-on-ink: #d9a877; /* auf --ink (dunkle Sections, .on-ink / .bg-ink) */

  /* Type — overridden via Tweaks */
  --font-display:
    "Cormorant Garamond",
    "Miller Display",
    "Times New Roman",
    serif;
  --font-body:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  /* Big-Screen-Step — 0 bis 1600px Viewport, waechst dann linear auf 1px bei
     2560px und bleibt dort stehen. Multiplikator fuer die zweite Stufe der
     Type-/Spacing-Scale: calc(base + var(--step-lg) * N) gibt auf sehr breiten
     Screens (1440p/4K) genau +N Pixel, darunter exakt nichts. */
  --step-lg: clamp(0px, (100vw - 1600px) * 0.00104, 1px);

  /* Type scale — fluid, 375px → 1100px, zweite Stufe 1600px → 2560px */
  --fs-micro: calc(13px + var(--step-lg) * 2);
  --fs-eyebrow: calc(14px + var(--step-lg) * 2);
  --fs-small: calc(
    clamp(0.9375rem, 0.9052rem + 0.1379vw, 1rem) + var(--step-lg) * 2
  );
  --fs-body: calc(
    clamp(1rem, 0.9354rem + 0.2759vw, 1.125rem) + var(--step-lg) * 2
  );
  --fs-lead: calc(
    clamp(1.125rem, 0.9957rem + 0.5517vw, 1.375rem) + var(--step-lg) * 3
  );
  --fs-h4: calc(
    clamp(1.375rem, 1.2457rem + 0.5517vw, 1.625rem) + var(--step-lg) * 3
  );
  --fs-h3: calc(
    clamp(1.75rem, 1.5561rem + 0.8276vw, 2.125rem) + var(--step-lg) * 5
  );
  --fs-h2: calc(
    clamp(2.25rem, 1.6034rem + 2.7586vw, 3.5rem) + var(--step-lg) * 8
  );
  --fs-h1: calc(
    clamp(3.25rem, 1.8275rem + 6.069vw, 6rem) + var(--step-lg) * 16
  );
  --fs-display: calc(
    clamp(4.5rem, 1.9138rem + 11.034vw, 9.5rem) + var(--step-lg) * 26
  );

  /* Spacing rhythm */
  --gap-xs: 8px;
  --gap-sm: 16px;
  --gap-md: 24px;
  --gap-lg: 40px;
  --gap-xl: calc(clamp(4rem, 1.8263rem + 9.275vw, 6rem) + var(--step-lg) * 12);
  --gap-xxl: calc(
    clamp(6rem, 2.7394rem + 13.913vw, 9rem) + var(--step-lg) * 18
  );
  --gap-3xl: calc(
    clamp(9rem, 5.7394rem + 13.913vw, 12rem) + var(--step-lg) * 24
  );

  /* Layout */
  --header-h: 91px;
  --maxw: calc(1280px + var(--step-lg) * 160);
  --maxw-text: 640px;
  --pad-x: clamp(1.5rem, 0.2069rem + 5.517vw, 4rem);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 700ms;
  --dur-slow: 900ms;
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */

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

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-ink :where(a, button, summary, [tabindex]):focus-visible,
.bg-ink :where(a, button):focus-visible {
  outline-color: var(--accent-on-ink);
}
html, body {
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga", "calt";
  text-rendering: optimizeLegibility;
}

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
input, textarea {
  font: inherit;
  color: inherit;
}

/* ─── Soft page fade-in ──────────────────────────────────────────────────── */
html {
  background: var(--paper);
}
body {
  opacity: 0;
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.cl-ready {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  body {
    opacity: 1;
    transition: none;
  }
}

/* ─── Type ───────────────────────────────────────────────────────────────── */

.serif {
  font-family: var(--font-display);
  font-weight: 400;
}
.sans {
  font-family: var(--font-body);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  /* Globale Regel: lange dt. Komposita (z.B. "Erstgespräch", "Augenhöhe")
     brechen an Silbengrenzen statt über den Rand zu laufen. hyphens:auto
     greift nur, wenn das Wort sonst überliefe — breite Schirme unverändert. */
  hyphens: auto;
  overflow-wrap: break-word;
}
h1 {
  font-size: var(--fs-h1);
}
h2 {
  font-size: var(--fs-h2);
  line-height: 1.08;
}
h3 {
  font-size: var(--fs-h3);
  line-height: 1.15;
}
h4 {
  font-size: var(--fs-h4);
  line-height: 1.25;
}

p {
  margin: 0;
  text-wrap: pretty;
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text);
}

/* <em> = Akzent-Gold sitewide. Hero behält eigene Farbgebung. */
em {
  font-style: italic;
  color: var(--accent-deep);
}
p em, li em, dd em, figcaption em, blockquote em {
  color: var(--accent-text);
}
.hero em, .hero-09 em {
  color: inherit;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.eyebrow.muted {
  color: var(--text-soft);
}

.on-ink {
  --accent-text: var(--accent-on-ink);
}
.bg-ink {
  --accent-text: var(--accent-on-ink);
}

.numeral {
  font-family: var(--font-display);
  font-feature-settings: "lnum", "tnum";
  font-variant-numeric: lining-nums tabular-nums;
}

/* ─── Layout ─────────────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.wrap-narrow {
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

section {
  position: relative;
}
.section-pad {
  padding-block: var(--gap-xxl);
}
.section-pad-lg {
  padding-block: var(--gap-3xl);
}

/* hairline rule */
.hr-fine {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}

/* ─── Buttons / links ────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: var(--petrol);
  color: #fff;
  border: 1px solid var(--petrol);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  transform-origin: center;
  transition: transform var(--dur) var(--ease);
}
.btn:hover {
  transform: scale(1.02);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.link .arrow {
  transition: transform var(--dur) var(--ease);
  display: inline-block;
  transform-origin: left center;
}
.link:hover .arrow {
  transform: translateX(6px) scale(1.2);
}

/* ─── Reveal-on-scroll ───────────────────────────────────────────────────── */

/* Use translateY only (no opacity) so axe-core color-contrast checks pass
   even for not-yet-revealed elements. Animation is still visually present. */
.reveal {
  transform: translateY(24px);
  transition: transform var(--dur-slow) var(--ease);
}
.reveal.in {
  transform: translateY(0);
}
.reveal[data-delay="1"] {
  transition-delay: 80ms;
}
.reveal[data-delay="2"] {
  transition-delay: 160ms;
}
.reveal[data-delay="3"] {
  transition-delay: 240ms;
}
.reveal[data-delay="4"] {
  transition-delay: 320ms;
}
.reveal[data-delay="5"] {
  transition-delay: 400ms;
}
.reveal[data-delay="6"] {
  transition-delay: 480ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ─── Header / Nav ───────────────────────────────────────────────────────── */

.cl-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--pad-x);
  background: rgba(255, 255, 255, 0.0);
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    backdrop-filter var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.cl-header.scrolled,
.cl-header.solid {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--rule);
}
.cl-header {
  color: var(--petrol);
}
.cl-header.dark {
  color: #fff;
}
.cl-header.dark.scrolled {
  color: var(--petrol);
}

.cl-logo {
  display: inline-flex;
  align-items: center;
  height: 54px;
  color: var(--petrol);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.cl-logo svg {
  height: 100%;
  width: auto;
  fill: currentColor;
}
.cl-logo:hover, .cl-logo:focus-visible {
  transform: scale(1.03);
}
@media (min-width: 720px) {
  .cl-logo {
    height: 66px;
  }
  :root {
    --header-h: 103px;
  }
}
@media (min-width: 1100px) {
  .cl-logo {
    height: calc(78px + var(--step-lg) * 22);
  }
  :root {
    --header-h: calc(115px + var(--step-lg) * 25);
  }
}
/* On dark hero headers, the logo should read against the dark bg */
.cl-header.dark:not(.scrolled) .cl-logo {
  color: #f5f1e8;
}

.cl-nav {
  display: none;
  gap: calc(32px + var(--step-lg) * 8);
  font-size: calc(14px + var(--step-lg) * 3);
  letter-spacing: 0.01em;
}
@media (min-width: 900px) {
  .cl-nav {
    display: flex;
    align-items: center;
  }
}
.cl-nav a {
  position: relative;
  display: inline-block;
  color: inherit;
  padding: 4px 0;
  opacity: 0.85;
  transition: opacity var(--dur) var(--ease);
}
.cl-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.cl-nav a:hover {
  opacity: 1;
}
.cl-nav a:hover::after,
.cl-nav a.active::after {
  transform: scaleX(1);
}
.cl-nav a.active {
  opacity: 1;
}

.cl-nav-cta {
  position: relative;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border: none;
  font-size: calc(13px + var(--step-lg) * 3);
  letter-spacing: 0.04em;
  color: inherit;
}
@media (min-width: 900px) {
  .cl-nav-cta {
    display: inline-flex;
  }
}
.cl-nav-cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.cl-nav-cta:hover::after {
  transform: scaleX(1);
}

.cl-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: inherit;
  margin-right: -10px;
}
@media (min-width: 900px) {
  .cl-burger {
    display: none;
  }
}
.cl-burger-lines {
  width: 22px;
  height: 12px;
  position: relative;
}
.cl-burger-lines span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transition:
    transform var(--dur) var(--ease),
    opacity var(--dur) var(--ease),
    top var(--dur) var(--ease);
}
.cl-burger-lines span:nth-child(1) {
  top: 2px;
}
.cl-burger-lines span:nth-child(2) {
  top: 9px;
}
.cl-burger.open .cl-burger-lines span:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}
.cl-burger.open .cl-burger-lines span:nth-child(2) {
  top: 6px;
  transform: rotate(-45deg);
}

/* Mobile menu */
.cl-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  padding: 96px var(--pad-x) var(--gap-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cl-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.cl-menu nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cl-menu a {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.cl-menu a .num {
  font-size: var(--fs-eyebrow);
  font-family: var(--font-body);
  letter-spacing: 0.18em;
  color: var(--text-faint);
}
.cl-menu .menu-foot {
  margin-top: auto;
  padding-top: var(--gap-md);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-small);
  color: var(--text-soft);
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */

.cl-footer {
  background: linear-gradient(
    180deg,
    var(--paper) 0%,
    color-mix(in srgb, var(--ink) 12%, var(--paper)) 100%
  );
  color: var(--text);
  padding: var(--gap-xl) var(--pad-x) var(--gap-lg);
  border-top: 1px solid var(--rule);
}
.cl-footer-grid {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
}
@media (min-width: 720px) {
  .cl-footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--gap-md);
  }
}
.cl-footer .cl-footer-h {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 14px;
}
.cl-footer p, .cl-footer a {
  font-size: var(--fs-body);
  line-height: 1.7;
}
.cl-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cl-footer li {
  font-size: var(--fs-body);
  line-height: 1.7;
}
.cl-footer li::before {
  content: "•";
  margin-right: 8px;
  color: var(--text-faint);
  opacity: 0.35;
}
.cl-footer a {
  position: relative;
  display: inline-block;
  color: var(--text);
}
.cl-footer a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.cl-footer a:hover::after {
  transform: scaleX(1);
}
.cl-footer-bottom {
  max-width: var(--maxw);
  margin: var(--gap-xl) auto 0;
  padding-top: var(--gap-md);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  justify-content: space-between;
  font-size: var(--fs-eyebrow);
  color: var(--text-faint);
  letter-spacing: 0.04em;
}
@media (min-width: 720px) {
  .cl-footer-bottom {
    flex-direction: row;
    align-items: center;
  }
}
.cl-footer-bottom a {
  font-size: var(--fs-eyebrow);
  color: var(--text-faint);
}

/* ─── Hero scaffold (shared) ─────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 120px var(--pad-x) var(--gap-xxl);
  overflow: hidden;
}
.hero-meta {
  position: absolute;
  bottom: var(--gap-md);
  right: var(--pad-x);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: flex;
  gap: 16px;
  align-items: center;
}
.hero-meta::before {
  content: "";
  width: 32px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

/* Six Wege overview transition strip */
.hero-into {
  position: absolute;
  bottom: var(--gap-md);
  left: var(--pad-x);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ─── Form ───────────────────────────────────────────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.field label {
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.field input, .field textarea, .field select {
  appearance: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  padding: 8px 0;
  font-size: var(--fs-body);
  color: var(--ink);
  border-radius: 0;
  font-family: var(--font-body);
  transition: border-color var(--dur) var(--ease);
  /* Felder dürfen schrumpfen: ein <select> nimmt sonst die Breite seiner
     längsten Option an und sprengt auf schmalen Schirmen die Spalte. */
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-bottom-color: var(--petrol);
}
.field textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
}
.field .err {
  font-size: var(--fs-eyebrow);
  color: #b94a4a;
  letter-spacing: 0;
  text-transform: none;
}

/* ─── Hero direction switcher (always-on chrome) ─────────────────────────── */

.cl-switcher {
  position: fixed;
  bottom: 18px;
  right: 18px;
  top: auto;
  left: auto;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 12px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.04em;
  color: var(--ink);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
@media (min-width: 900px) {
  .cl-switcher {
    bottom: 22px;
    right: 22px;
    top: auto;
    left: auto;
    padding: 8px 8px 8px 16px;
    font-size: var(--fs-eyebrow);
  }
}
.cl-switcher .lbl {
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cl-switcher select {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 4px 24px 4px 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%231f1d18' d='M0 0h10L5 6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  cursor: pointer;
  font-weight: 500;
}
.cl-switcher select:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

/* ─── Misc ───────────────────────────────────────────────────────────────── */

::selection {
  background: var(--petrol);
  color: #fff;
}

.no-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fade-mask-b {
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}

/* ─── Page hero (sub-pages) ──────────────────────────────────────────────── */
.page-hero {
  padding: clamp(128px, 16vw, 184px) 0 clamp(48px, 7vw, 88px);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  min-height: 30vh;
  display: flex;
  align-items: center;
}
.page-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  width: 100%;
  align-items: start;
}
.page-hero-left {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}
.page-hero-title {
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.page-hero-right {
  display: grid;
  gap: clamp(18px, 2.4vw, 26px);
}
.page-hero-lead {
  font-size: clamp(18px, 2vw, 22px);
  color: var(--text-soft);
  line-height: 1.6;
  max-width: 56ch;
  margin: 0;
}
@media (min-width: 900px) {
  .page-hero-grid {
    grid-template-columns: 5fr 6fr;
    gap: clamp(48px, 7vw, 96px);
  }
  .page-hero-right {
    align-self: end;
    align-content: end;
    padding-bottom: clamp(4px, 0.8vw, 12px);
  }
  .page-hero--wide .page-hero-grid {
    grid-template-columns: 7fr 5fr;
  }
}
.page-hero--wide .page-hero-title {
  font-size: var(--fs-h1);
  text-wrap: balance;
}

/* ─── Wege hero (split layout, ~30vh) ────────────────────────────────────── */
.wege-hero {
  padding: clamp(128px, 16vw, 184px) 0 clamp(48px, 7vw, 88px);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  min-height: 30vh;
  display: flex;
  align-items: center;
  /* Etwas kräftiger als die 12% der übrigen Schleier: der Hero hat wenig
     Text und viel Fläche, da darf der Farn sichtbarer stehen. Nur hier —
     `.veil--farn-wedel` trägt auch die Standorte-Section, die bleibt bei
     12%. Die Mobile-Rücknahme (×0.55) rechnet automatisch mit. */
  --veil-op: 0.2;
}
.wege-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  width: 100%;
  align-items: start;
}
.wege-hero-left {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}
.wege-hero-title {
  font-size: clamp(56px, 9vw, 112px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.wege-hero-lead {
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--text-soft);
  line-height: 1.7;
  max-width: 58ch;
  margin: 0;
}
/* Larger eyebrow teaser on sub-page heroes */
.page-hero .eyebrow,
.wege-hero .eyebrow {
  font-size: clamp(14px, 1.4vw, 16px);
  letter-spacing: 0.2em;
}
.wege-hero-right {
  display: grid;
  gap: clamp(18px, 2.4vw, 26px);
}
/* Serif bridge line — the three crisp promises */
.wege-hero-tagline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
@media (min-width: 900px) {
  .wege-hero-grid {
    grid-template-columns: 5fr 6fr;
    gap: clamp(48px, 7vw, 96px);
  }
  .wege-hero-right {
    padding-top: clamp(8px, 1.5vw, 20px);
  }
}

/* ─── Wege-Animation: sechs Methoden → der 7. Weg ────────────────────────── */
.wege-anim {
  padding: var(--gap-lg) 0 var(--gap-xxl);
  background: var(--paper);
}
.wege-anim-title {
  max-width: 24ch;
  margin: 0 auto var(--gap-lg);
  text-align: center;
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.16;
}
.wege-stage {
  position: relative;
  width: 100%;
  height: clamp(380px, 44vw, 500px);
  border: 1px solid var(--rule);
  background: var(--paper-warm);
  overflow: hidden;
  /* Bühne ist Referenz für alle Kinder: Boxen/Schrift skalieren mit cqw,
     nicht mit dem Viewport — so passt alles auf jeder Breite. */
  container-type: size;
}
/* dezente Trennlinie: links die Methoden, rechts der gebündelte Weg */
.wege-stage::before {
  content: "";
  position: absolute;
  left: 52%;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: var(--rule);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}
.wege-anim.assembled .wege-stage::before {
  opacity: 1;
}

.wbox {
  position: absolute;
  box-sizing: border-box;
  /* 26cqw → halbe Breite = 13% der Bühne < 14% (linkeste Box) ⇒ nie Überlauf.
     Untergrenze 64px greift erst < 246px Bühne (praktisch nie). */
  width: clamp(64px, 26cqw, 176px);
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.6cqw, 12px);
  padding: clamp(9px, 2.4cqw, 14px) clamp(10px, 2.6cqw, 16px);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--petrol);
  cursor: default;
  will-change: left, top, transform;
  /* sanft, aber zügig */
  transition:
    left 520ms var(--ease),
    top 520ms var(--ease),
    transform 520ms var(--ease),
    opacity 360ms var(--ease),
    box-shadow 360ms var(--ease),
    border-color 360ms var(--ease);
}
.wbox-n {
  flex: none;
  font-family: var(--font-display);
  font-feature-settings: "lnum", "tnum";
  font-variant-numeric: lining-nums tabular-nums;
  font-size: clamp(15px, 4.2cqw, 24px);
  line-height: 1;
  color: var(--accent-deep);
}
.wbox-label {
  font-family: var(--font-body);
  font-size: clamp(10px, 2.6cqw, 13px);
  line-height: 1.25;
  color: var(--text);
  /* lange Methodennamen brechen sauber statt über den Rand zu laufen:
     bevorzugt an Silbengrenzen (hyphens, lang=de), Notbruch als Fallback */
  min-width: 0;
  hyphens: auto;
  overflow-wrap: anywhere;
}

/* Aufleuchten beim Klick — kräftiger, warmer Flash */
.wbox.glow {
  animation: wbox-glow 760ms var(--ease);
}
@keyframes wbox-glow {
  0% {
    box-shadow: 0 0 0 0 transparent;
  }
  35% {
    box-shadow:
      0 0 0 2px var(--accent-deep),
      0 0 0 6px color-mix(in srgb, var(--accent-deep) 32%, transparent),
      0 0 34px 8px color-mix(in srgb, var(--accent-deep) 60%, transparent),
      0 0 72px 20px color-mix(in srgb, var(--accent-deep) 30%, transparent);
  }
  100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--accent-deep) 50%, transparent),
      0 12px 30px -14px color-mix(in srgb, var(--accent-deep) 60%, transparent);
  }
}

/* gewählte Methoden — Teil des 7. Wegs, mit warmem Schein */
.wbox.is-on {
  border-color: var(--accent-deep);
  border-left-color: var(--accent-deep);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-deep) 50%, transparent),
    0 12px 30px -14px color-mix(in srgb, var(--accent-deep) 60%, transparent);
}
/* sanft atmender Halo um die zusammengestellten Boxen */
.wbox.is-on::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  box-shadow: 0 0 26px 3px
    color-mix(in srgb, var(--accent-deep) 50%, transparent);
  opacity: 0;
  animation: wbox-pulse 2.6s var(--ease) infinite;
}
@keyframes wbox-pulse {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.7;
  }
}
/* nicht gewählte Methoden treten zurück */
.wbox.is-off {
  opacity: 0.25;
}

.wege-pills {
  margin-top: var(--gap-lg);
  display: grid;
  gap: var(--gap-sm);
  justify-items: center;
}
.wege-pills-lead {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-soft);
}
.wege-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  justify-content: center;
}
.wege-pill {
  appearance: none;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 12px 26px;
  cursor: pointer;
  transition:
    color var(--dur) var(--ease),
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
/* Kleintext: --accent-deep besteht AA erst ab 24px, deshalb --accent-text. */
.wege-pill:hover {
  border-color: var(--accent-deep);
  color: var(--accent-text);
}
/* Gewählter Knopf ist Petrol-Fläche mit Papier-Schrift, nicht Kupfer:
   Kupfer ist Akzent (Linien, Eyebrows, em) und keine Buttonfläche. Weiss
   auf #c68346 kam ausserdem nur auf 3.12:1 und fiel bei 16px durch AA —
   Papier auf Petrol liegt bei 14.6:1. */
.wege-pill.on {
  color: var(--paper);
  background: var(--petrol);
  border-color: var(--petrol);
}

@media (prefers-reduced-motion: reduce) {
  .wbox {
    transition: opacity var(--dur) var(--ease);
  }
  .wbox.is-on::after {
    animation: none;
    opacity: 0.4;
  }
}

/* ─── Pull-quote ─────────────────────────────────────────────────────────── */
.pull-quote {
  background: var(--paper-warm);
}
.pull-quote--paper {
  background: var(--paper);
}
.pull-quote-mark {
  display: block;
  color: var(--accent-text);
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 0.2;
  margin-bottom: 24px;
}
.pull-quote-text {
  margin: 0;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.25;
  font-style: italic;
  color: var(--ink);
}
.pull-quote-cite {
  display: block;
  margin-top: 28px;
  font-style: normal;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ─── Sechs Wege list ────────────────────────────────────────────────────── */
.weg-list {
  border-top: 1px solid var(--rule);
}
.weg-row {
  border-bottom: 1px solid var(--rule);
}
.weg-link {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 24px;
  padding: 28px 0;
  align-items: baseline;
  color: var(--ink);
}
.weg-body {
  min-width: 0;
}
.weg-num {
  font-size: 22px;
  color: var(--accent-deep);
  letter-spacing: 0;
  line-height: 1;
  padding-top: 8px;
}
.weg-title {
  font-size: clamp(28px, 5vw, 44px);
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  overflow-wrap: break-word;
}
.weg-sub {
  color: var(--text-soft);
  font-size: var(--fs-body);
  line-height: 1.6;
  max-width: 56ch;
  margin-top: 8px;
}
.weg-more {
  font-size: var(--fs-body);
}
.weg-arrow {
  color: var(--petrol);
  font-size: 18px;
  align-self: center;
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.weg-link:hover .weg-arrow {
  transform: translateX(8px) scale(1.3);
}
@media (min-width: 720px) {
  .weg-link {
    grid-template-columns: 88px minmax(0, 1fr) auto;
    padding: 36px 0;
    gap: 40px;
  }
  .weg-num {
    font-size: 32px;
    padding-top: 12px;
  }
  .weg-sub {
    margin-top: 12px;
    font-size: var(--fs-lead);
  }
}

/* Themen-Bubbles unter dem Sub */
.weg-themen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 14px 0 0;
  padding: 0;
}
.weg-themen-tag {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.02em;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--accent-deep) 6%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--accent-deep) 22%, transparent);
  border-radius: 999px;
  line-height: 1.4;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.weg-link:hover .weg-themen-tag {
  background: color-mix(in srgb, var(--accent-deep) 14%, var(--paper));
  border-color: color-mix(in srgb, var(--accent-deep) 38%, transparent);
  color: var(--ink);
}
@media (min-width: 720px) {
  .weg-themen {
    margin-top: 18px;
    gap: 8px 10px;
  }
  .weg-themen-tag {
    font-size: var(--fs-eyebrow);
    padding: 5px 12px;
  }
}

/* ─── Weg #7 "Dein Weg" — editorialer CTA ──────────────────────────────── */
.weg-row-final {
  border-bottom: none;
}
.weg-link-final .weg-title {
  font-style: italic;
}
.weg-link-final .weg-arrow {
  color: var(--accent-deep);
  font-size: 28px;
}
.weg-link-final:hover .weg-arrow {
  transform: translateX(12px) scale(1.2);
}
@media (min-width: 720px) {
  .weg-link-final .weg-arrow {
    font-size: 40px;
  }
}

/* ─── Leitbild ───────────────────────────────────────────────────────────── */
.leit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-xl);
  align-items: center;
}
@media (min-width: 900px) {
  .leit-grid {
    grid-template-columns: 6fr 6fr;
    gap: var(--gap-xxl);
  }
}

.leit-portrait {
  position: relative;
  text-align: center;
}
.leit-portrait-frame {
  position: relative;
  width: min(86%, 460px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.leit-portrait-circle {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 24px 60px -28px rgba(20, 30, 50, 0.18);
}
.leit-portrait-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: contrast(0.98) saturate(0.96);
}
.leit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--accent-deep);
  opacity: 0.32;
  pointer-events: none;
}
.leit-ring-1 {
  inset: 2% 6% 6% 2%;
  opacity: 0.22;
}
.leit-ring-2 {
  inset: 5%;
  opacity: 0.45;
  border-color: color-mix(in oklab, var(--accent-deep) 70%, transparent);
}
.leit-ring-3 {
  inset: 7.4%;
  opacity: 0.18;
}

.leit-name {
  margin: clamp(28px, 4vw, 44px) 0 6px;
  font-size: clamp(36px, 4.4vw, 56px);
  letter-spacing: -0.01em;
  color: var(--ink);
  font-weight: 400;
}
.leit-cap {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

@media (min-width: 900px) {
  .leit-text {
    padding-top: 24px;
  }
  .leit-portrait-frame {
    width: min(92%, 520px);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .leit-ring-1 {
    animation: leit-float-1 26s ease-in-out infinite;
    transform-origin: 50% 50%;
    will-change: transform;
  }
  .leit-ring-2 {
    animation: leit-float-2 32s ease-in-out infinite;
    transform-origin: 50% 50%;
    will-change: transform;
  }
  .leit-ring-3 {
    animation: leit-float-3 38s ease-in-out infinite;
    transform-origin: 50% 50%;
    will-change: transform;
  }
}
@keyframes leit-float-1 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-0.6%, 0.8%) rotate(0.4deg);
  }
  50% {
    transform: translate(-1.1%, -0.4%) rotate(0.8deg);
  }
  75% {
    transform: translate(-0.4%, -0.9%) rotate(0.3deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
@keyframes leit-float-2 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(0.7%, -0.5%) rotate(-0.5deg);
  }
  66% {
    transform: translate(-0.3%, 0.9%) rotate(-0.2deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
@keyframes leit-float-3 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  20% {
    transform: translate(0.5%, 0.6%) rotate(0.3deg);
  }
  50% {
    transform: translate(0.9%, -0.7%) rotate(0.6deg);
  }
  80% {
    transform: translate(-0.2%, -0.4%) rotate(0.2deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* ─── Essenz (Portrait — persönlich) ─────────────────────────────────────── */
.essenz-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-xl);
  align-items: start;
}
@media (min-width: 900px) {
  .essenz-grid {
    grid-template-columns: 5fr 7fr;
    gap: var(--gap-xxl);
  }
}

.essenz-portrait {
  position: relative;
}
@media (min-width: 900px) {
  .essenz-portrait {
    position: sticky;
    top: 140px;
  }
}
.essenz-portrait-frame {
  position: relative;
  z-index: 1;
  width: min(80%, 380px);
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  border-radius: 50% 50% 12px 12px / 40% 40% 3% 3%;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 30px 70px -34px rgba(5, 52, 71, 0.35);
}
.essenz-portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  filter: contrast(0.98) saturate(0.97);
}
.essenz-portrait::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 0;
  width: min(80%, 380px);
  aspect-ratio: 4 / 5;
  transform: translate(calc(-50% + 18px), 18px);
  border: 1px solid var(--accent-deep);
  border-radius: 50% 50% 12px 12px / 40% 40% 3% 3%;
  opacity: 0.4;
  pointer-events: none;
}

.essenz-heading {
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.essenz-label {
  margin-top: var(--gap-md);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.essenz-aspekte {
  margin-top: var(--gap-lg);
  display: grid;
  gap: var(--gap-md);
}
.essenz-aspekt-label {
  display: block;
}
.essenz-aspekt-text {
  margin-top: 10px;
  color: var(--text-soft);
  line-height: 1.72;
  max-width: 60ch;
}
.essenz-coda {
  margin-top: var(--gap-lg);
  padding-left: 22px;
  border-left: 2px solid
    color-mix(in srgb, var(--accent-deep) 55%, transparent);
  line-height: 1.72;
  color: var(--text-soft);
  max-width: 60ch;
}
.essenz-sign {
  position: relative;
  z-index: 1;
  width: min(80%, 380px);
  margin: 28px auto 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}
.essenz-sign-name {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  line-height: 1.25;
  color: var(--ink);
}
.essenz-sign-role {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text-soft);
}

/* ─── Stimmen ────────────────────────────────────────────────────────────── */
.stimmen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--gap-md);
}
@media (min-width: 720px) {
  .stimmen-grid {
    gap: var(--gap-sm);
  }
}
.stimmen-card {
  background: var(--surface);
  padding: 28px 24px;
  border-top: 2px solid var(--petrol);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.stimmen-mark {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 0.6;
  color: var(--accent-deep);
  display: block;
  height: 20px;
  opacity: 0.85;
}
.stimmen-card blockquote {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-soft);
  font-style: normal;
  overflow-wrap: break-word;
}
.stimmen-card figcaption {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  color: var(--petrol);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  margin-top: auto;
  padding-top: 4px;
  border-top: 1px solid var(--rule-soft);
}

/* ─── Kontakt ────────────────────────────────────────────────────────────── */
#form, #kalender {
  scroll-margin-top: 88px;
}

/* Formular + Kalender als Seitenanfang: kein Hero darüber, deshalb muss das
   padding-top den fixierten Header selbst freihalten. */
.kontakt-duo {
  padding-block: calc(var(--header-h) + var(--gap-lg)) var(--gap-3xl);
  background: var(--paper-warm);
}

/* Terminband über beiden Panels: eine Linie, zwei Orte nebeneinander.
   Label links, Orte rechts — ab 1000px in einer Zeile, darunter gestapelt. */
.kontakt-termine {
  margin-bottom: var(--gap-xl);
  padding-block: var(--gap-md);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-md);
}
.kontakt-termine-label {
  display: block;
}
.kontakt-termine-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
}
.kontakt-termine-list > * {
  min-width: 0;
}
.kontakt-termine-ort-name {
  margin: 0 0 6px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* Ein Tag pro Zeile: Tagesname links, Zeit rechts, Punktlinie dazwischen.
   `auto 1fr` statt zwei gleichen Spalten — die Tagesnamen sind kurz, die
   Zeit soll direkt daneben stehen und nicht am anderen Seitenrand. */
.kontakt-termine-tage {
  margin: 0;
  display: grid;
  gap: 2px;
}
.kontakt-termine-tag {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: var(--gap-xs);
}
.kontakt-termine-tag dt {
  color: var(--text);
}
.kontakt-termine-tag dd {
  margin: 0;
  color: var(--text-soft);
  font-variant-numeric: lining-nums tabular-nums;
}
/* Ab 1000px auf dieselben Spuren wie die Panels darunter: Arnegg über dem
   Formular, Frauenfeld über dem Kalender. Darunter stapeln die Panels, also
   stapelt auch das Band — ein 700px-Umbruch würde sich an nichts ausrichten. */
@media (min-width: 1000px) {
  .kontakt-termine-list {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--gap-xxl);
  }
}

/* Zwei Panels auf einer Linie. `align-items: start` statt stretch: der
   Kalender wird deutlich höher als das Formular, ein mitgestrecktes
   dunkles Panel wäre unten nur leere Fläche. */
.kontakt-duo-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--gap-xl);
}
.kontakt-duo-grid > * {
  min-width: 0;
}
@media (min-width: 1000px) {
  .kontakt-duo-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--gap-xxl);
  }
}

.kontakt-panel {
  padding: clamp(28px, 3.5vw, 48px);
}
.kontakt-panel--form {
  background: var(--ink);
  color: #f5f1e8;
}
/* Der Kalender bringt eigene helle Flächen mit — das Panel gibt ihm nur
   Grund und Kante, damit er nicht im Section-Grau schwimmt. */
.kontakt-panel--cal {
  background: var(--paper);
  border: 1px solid var(--rule);
}
.kontakt-panel-head {
  max-width: 30ch;
}
.kontakt-panel-title {
  margin-top: var(--gap-md);
  font-size: var(--fs-h2);
  line-height: 1.08;
  text-wrap: balance;
}
.kontakt-panel--form .kontakt-panel-title {
  color: #fff;
}

.kontakt-form--solo {
  margin-top: var(--gap-xl);
}
.kontakt-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.kontakt-row > * {
  min-width: 0;
}
@media (min-width: 640px) {
  .kontakt-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-lg);
  }
}

/* ─── cal.com Booker mit Standortwahl ──────────────────────────────────────
   Zuerst zwei Knöpfe, das Embed lädt erst auf Klick. Vorher hat der Bereich
   keine Höhe — die min-height sitzt deshalb am Panel, nicht am Wrapper,
   sonst klafft unter den Knöpfen ein leeres Feld, bevor jemand gewählt hat. */
.kal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs);
  margin-top: var(--gap-md);
}
.kal-tab {
  appearance: none;
  flex: 1 1 auto;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: none;
  border: 1px solid var(--rule);
  padding: 12px 20px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
/* Kleintext: --accent-deep besteht AA erst ab 24px, deshalb --accent-text. */
.kal-tab:hover {
  border-color: var(--accent-deep);
  color: var(--accent-text);
}
/* Gewählter Standort ist Petrol-Fläche mit Papier-Schrift — Kupfer bleibt
   Akzent und wird nie Buttonfläche (Kontrast: 14.6:1 statt 3.1:1). */
.kal-tab.on {
  color: var(--paper);
  background: var(--petrol);
  border-color: var(--petrol);
}
.kal-panel[hidden] { display: none; }

/* Das Widget setzt seine Höhe selbst (embed.js), die min-height verhindert
   nur das Springen des Layouts während des Ladens. */
.kal-embed {
  min-height: 560px;
  width: 100%;
  margin-top: var(--gap-lg);
  overflow: hidden;
}
.kal-noscript {
  margin-top: var(--gap-md);
  color: var(--text-soft);
}
@media (prefers-reduced-motion: reduce) {
  .kal-tab { transition: none; }
}

.kontakt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-xl);
}
/* Grid-Spalten dürfen unter ihre Inhaltsbreite schrumpfen (kein Überlauf) */
.kontakt-grid > * {
  min-width: 0;
}
@media (min-width: 900px) {
  .kontakt-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-xxl);
  }
}
.kontakt-meta {
  margin-top: var(--gap-xl);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.kontakt-meta li {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 6px 24px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-body);
}
.kontakt-meta li > a, .kontakt-meta li > span:not(.lbl) {
  overflow-wrap: anywhere;
}
.kontakt-meta li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.kontakt-meta .lbl {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-top: 3px;
}
.kontakt-meta a {
  position: relative;
  display: inline-block;
}
.kontakt-meta a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.kontakt-meta a:hover::after {
  transform: scaleX(1);
}

.kontakt-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 8px;
}
.kontakt-form .field label {
  color: rgba(255, 255, 255, 0.78);
}
.kontakt-form .field input,
.kontakt-form .field textarea,
.kontakt-form .field select {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.18);
}
.kontakt-form .field input:focus,
.kontakt-form .field textarea:focus,
.kontakt-form .field select:focus {
  border-bottom-color: var(--accent-deep);
}
.kontakt-form .field select option {
  background: var(--ink);
  color: #fff;
}
/* Sitzt im Petrol-Panel — deshalb invertiert (Paper-Fläche, Petrol-Schrift),
   sonst verschwindet die Buttonfläche im Hintergrund. */
.kontakt-submit {
  align-self: flex-start;
  margin-top: 12px;
  background: var(--paper);
  color: var(--petrol);
  border-color: var(--paper);
}
.kontakt-submit:hover {
  background: color-mix(in srgb, var(--accent-on-ink) 35%, var(--paper));
  border-color: color-mix(in srgb, var(--accent-on-ink) 35%, var(--paper));
}
/* Das Rot aus .field .err liegt auf Petrol unter 4.5:1 — auf dem dunklen
   Panel deshalb eine aufgehellte Stufe. */
.kontakt-form .field .err {
  color: #f0aaaa;
}
.kontakt-form .field [aria-invalid="true"] {
  border-bottom-color: #f0aaaa;
}
.kontakt-notice {
  margin-top: var(--gap-lg);
  padding: 14px 0 14px 18px;
  border-left: 2px solid var(--accent-on-ink);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.86);
}
.kontakt-notice a {
  border-bottom: 1px solid currentColor;
}
.kontakt-sent {
  margin-top: var(--gap-xl);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-lg);
}
.kontakt-sent p {
  max-width: 42ch;
  color: rgba(255, 255, 255, 0.86);
}
.kontakt-sent a:not(.btn) {
  border-bottom: 1px solid currentColor;
}

/* ─── Hero 09 ────────────────────────────────────────────────────────────── */
.hero-09 {
  position: relative;
  background: #0e1418;
  color: #f5f1e8;
  padding-top: 100px;
  padding-bottom: clamp(40px, 6vh, 80px);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-09-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-09-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left 60%;
  filter: contrast(1.05) saturate(0.7);
}
@media (min-width: 720px) {
  .hero-09-bg img {
    object-position: center 60%;
  }
}
.hero-09-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(14, 20, 24, 0.85) 0%,
    rgba(14, 20, 24, 0.55) 25%,
    rgba(14, 20, 24, 0) 50%
  );
}
.hero-09-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(0, 0, 0, 0.18) 100%
  );
  pointer-events: none;
}
.hero-09-content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: clamp(20px, 4vh, 60px);
}
/* Ortsangabe über dem Titel — sie trägt die Suchbegriffe, die im H1 bewusst
   fehlen ("Coaching", die beiden Orte). Bleibt bei --fs-eyebrow statt der
   früheren 18px: der Text ist rund dreimal so lang wie das vorherige
   "Silvia Zimmermann" und würde in Versalien mit 0.18em Sperrung sonst über
   die halbe Heldenfläche laufen. Weiss, weil darunter ein Foto liegt. */
.hero-09-kicker {
  margin: 0 0 var(--gap-sm);
  color: #fff;
  text-wrap: pretty;
}
/* Der Zeilenumbruch im Titel steht fest im Markup ("Coachlogie" /
   "Auf Augenhöhe."). text-wrap:balance aus der globalen h1-Regel würde die
   Zeilen sonst je nach Monitorbreite neu verteilen. */
.hero-09-content h1 {
  font-size: clamp(56px, 8vw, 120px);
  line-height: 0.95;
  text-wrap: wrap;
}

/* ─── Legal pages ────────────────────────────────────────────────────────── */
.legal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
}
.legal-block {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule);
}
.legal-block:last-child {
  border-bottom: none;
}
.legal-block h3 {
  font-size: 22px;
  margin: 0 0 14px;
  color: var(--ink);
}
.legal-block p {
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}
.legal-block a {
  position: relative;
  display: inline-block;
  color: var(--petrol);
  border-bottom: 1px solid var(--rule);
}
.legal-block a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.legal-block a:hover::after {
  transform: scaleX(1);
}

/* ─── Wege im Detail ─────────────────────────────────────────────────────── */
.weg-detail-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-xl);
}
.weg-detail {
  padding: 36px 0;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 88px;
}
.weg-detail:last-child {
  border-bottom: 1px solid var(--rule);
}
.weg-detail-cta {
  margin-top: 28px;
}
.weg-detail-head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 18px;
}
.weg-detail-title {
  font-size: clamp(26px, 3.5vw, 36px);
  margin: 0;
  font-weight: 400;
}
.weg-detail-body {
  color: var(--text-soft);
  max-width: 60ch;
  line-height: 1.7;
  font-size: var(--fs-lead);
  margin: 0 0 28px;
}
.weg-detail-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--rule-soft);
}
.weg-detail-meta > div {
  display: grid;
  gap: 4px;
}
.weg-detail-meta dt {
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.weg-detail-meta dd {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-body);
  line-height: 1.55;
}
@media (min-width: 720px) {
  .weg-detail-meta {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
  }
}

/* ─── Werdegang ──────────────────────────────────────────────────────────── */
.werdegang-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 28px 0;
}
.werdegang-when {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--accent-text);
  align-self: start;
}
.werdegang-what {
  font-size: var(--fs-h3);
  margin: 0;
  font-weight: 400;
  text-wrap: balance;
}
.werdegang-note {
  margin: 10px 0 0;
  color: var(--text-soft);
  max-width: 60ch;
  line-height: 1.65;
}
@media (min-width: 720px) {
  .werdegang-row {
    grid-template-columns: 220px 1fr;
    gap: 48px;
    padding: 40px 0;
  }
  .werdegang-body {
    position: relative;
    padding-left: 40px;
  }
  .werdegang-body::before {
    content: "";
    position: absolute;
    left: 0;
    top: -40px;
    bottom: -40px;
    width: 1px;
    background: var(--rule);
  }
  .werdegang-row:first-child .werdegang-body::before {
    top: 0.9em;
  }
  .werdegang-row:last-child .werdegang-body::before {
    bottom: auto;
    height: calc(40px + 0.9em);
  }
  .werdegang-body::after {
    content: "";
    position: absolute;
    left: -4px;
    top: 0.55em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent-text);
  }
}
.werdegang-sub {
  padding-top: var(--gap-xl);
}
.werdegang-sub-title {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 400;
  margin: 12px 0 0;
}
/* Gleiche Marke wie die Angebot-Liste (`.angebot-v2 .points`): Kupfer steht
   senkrecht neben dem Eintrag, nicht als Querstrich davor. Die Werte sind
   bewusst identisch gehalten — wer eine Liste anfasst, zieht die andere nach.
   Kein gemeinsamer Selektor, weil `.points li` als Nachfahren-Selektor auch
   die eingeklappten Beispiele trifft und dort eigens zurückgesetzt wird. */
.werdegang-facts {
  margin: 24px 0 0;
  display: grid;
  max-width: 68ch;
}
.werdegang-facts li {
  position: relative;
  padding-left: 18px;
  padding-block: 14px;
  border-top: 1px solid var(--rule-soft);
  color: var(--text-soft);
  line-height: 1.6;
}
.werdegang-facts li:first-child {
  border-top: none;
}
.werdegang-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 2px;
  background: var(--accent-deep);
}
.ausbildung-groups {
  margin-top: var(--gap-md);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-md);
}
.ausbildung-group {
  background: var(--paper-warm);
  border-top: 2px solid var(--petrol);
  padding: 32px;
}
.ausbildung-group-label {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--petrol);
  margin: 0 0 20px;
}
.ausbildung-items {
  display: grid;
  gap: 0;
}
.ausbildung-items li {
  color: var(--text);
  line-height: 1.5;
  padding: 11px 0;
}
@media (min-width: 720px) {
  .ausbildung-groups {
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-md);
    align-items: start;
  }
}

/* ─── Prinzipien ─────────────────────────────────────────────────────────── */
.prinzipien-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
}
.prinzipien-card {
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--rule);
  position: relative;
}
.prinzipien-num {
  font-size: var(--fs-eyebrow);
  color: var(--accent-deep);
  letter-spacing: 0.16em;
}
.prinzipien-title {
  margin: 12px 0 14px;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 400;
}
.prinzipien-text {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.7;
}
@media (min-width: 720px) {
  .prinzipien-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ─── Standorte ──────────────────────────────────────────────────────────── */
.orte-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
}
.orte-card {
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}
.orte-card > :not(.orte-map) {
  padding-left: 36px;
  padding-right: 36px;
}
.orte-card > .orte-canton {
  padding-top: 28px;
}
.orte-card > .link {
  padding-bottom: 32px;
}
.orte-map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--rule-soft);
  border-bottom: 1px solid var(--rule);
}
.orte-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.15) contrast(0.95);
}
/* Platzhalter statt Karte fuer Besucher ausserhalb der Schweiz — der Iframe
   entsteht erst auf Klick, siehe sections/Standorte.tsx. */
.orte-map-gate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  padding: 24px 28px;
  background: var(--rule-soft);
}
.orte-map-gate-note {
  margin: 0;
  max-width: 46ch;
  color: var(--text-soft);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.orte-map-gate .btn {
  padding: 11px 20px;
}
.orte-canton {
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--petrol);
}
.orte-label {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 400;
}
.orte-addr {
  font-style: normal;
  color: var(--text);
  line-height: 1.6;
}
.orte-note {
  margin: 0 0 8px;
  color: var(--text-soft);
  line-height: 1.65;
  flex: 1;
}
@media (min-width: 720px) {
  .orte-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-xl);
  }
}

/* ─── Erstgespräch (Schritte) ────────────────────────────────────────────── */
.erst-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
  counter-reset: erst;
}
.erst-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.erst-row:last-child {
  border-bottom: 1px solid var(--rule);
}
.erst-num {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  color: var(--accent-deep);
  padding-top: 8px;
}
.erst-title {
  margin: 0 0 10px;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 400;
}
.erst-text {
  margin: 0;
  color: var(--text-soft);
  max-width: 60ch;
  line-height: 1.7;
}

/* ─── FAQ ────────────────────────────────────────────────────────────────── */
.faq-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.faq-row {
  padding: 28px 0;
  border-top: 1px solid var(--rule);
}
.faq-row:last-child {
  border-bottom: 1px solid var(--rule);
}
.faq-q {
  margin: 0 0 10px;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 400;
  color: var(--ink);
}
.faq-a {
  margin: 0;
  color: var(--text-soft);
  max-width: 70ch;
  line-height: 1.7;
}

/* ─── Wege · Detail-Boxen (alternierend) ───────────────────────────────── */
.wege-detail {
  padding-block: var(--gap-xxl);
  background: var(--paper-warm);
}
.wd-head {
  max-width: var(--maxw-text);
  margin: 0 auto var(--gap-xl);
  text-align: center;
}
.wd-head .eyebrow {
  color: var(--accent-text);
}
.wd-head h2 {
  margin: 14px 0 0;
}

.wd-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}
.wd-card {
  position: relative;
  width: 100%;
  /* Sprungziel der Wege-Teaser auf der Startseite (/wege#weg-01 …):
     Abstand, damit die Karte nicht hinter dem fixen Header landet. */
  scroll-margin-top: calc(var(--header-h) + var(--gap-md));
  padding: clamp(28px, 4vw, 56px);
  padding-inline-start: clamp(32px, 4.5vw, 60px);
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  box-shadow: 0 30px 60px -46px
    color-mix(in srgb, var(--petrol) 55%, transparent);
}
.wd-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    var(--accent-deep),
    color-mix(in srgb, var(--accent-deep) 24%, transparent)
  );
}
.wd-num {
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1;
  color: var(--accent-deep);
  margin-bottom: var(--gap-sm);
}
.wd-title {
  margin: 0 0 var(--gap-sm);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.12;
}
.wd-subtitle {
  margin: 0 0 var(--gap-md);
  max-width: 40ch;
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  color: var(--ink);
}
.wd-text {
  margin: 0;
  max-width: 58ch;
  color: var(--text-soft);
  line-height: 1.75;
}
.wd-more {
  margin-top: var(--gap-sm);
  max-width: 58ch;
}
.wd-more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.wd-more-toggle::-webkit-details-marker {
  display: none;
}
.wd-more-toggle:hover .wd-more-label,
.wd-more-toggle:focus-visible .wd-more-label {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.wd-more [data-less] {
  display: none;
}
.wd-more[open] [data-less] {
  display: inline;
}
.wd-more[open] [data-more] {
  display: none;
}
.wd-more-chevron {
  width: 7px;
  height: 7px;
  border-inline-end: 1px solid currentColor;
  border-block-end: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 220ms ease;
}
.wd-more[open] .wd-more-chevron {
  transform: translateY(1px) rotate(-135deg);
}
.wd-more-body {
  margin-top: var(--gap-sm);
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}
/* Querverweis auf den passenden Kurs — Kupfer als Akzent, nicht Petrol */
.wd-more-link {
  align-self: flex-start;
  color: var(--accent-text);
  border-bottom-color: var(--accent-text);
}
/* Empfehlung unter der Karte — sichtbar, nicht hinter «Weiterlesen».
   Bewusst ohne .link: der Verweis laeuft im Fliesstext weiter, statt als
   eigenes Element mit kleinerer Schrift daneben zu stehen. */
.wd-tipp {
  margin-top: var(--gap-sm);
}
.wd-tipp-link {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-color: var(--accent-text);
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .wd-more-chevron {
    transition: none;
  }
}

.wd-themen {
  margin-top: var(--gap-md);
}
.wd-themen-label {
  display: block;
  margin-bottom: 12px;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.wd-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wd-pill-tag {
  padding: 6px 14px;
  font-size: var(--fs-small);
  line-height: 1.2;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--accent-deep) 7%, transparent);
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
}

@media (min-width: 860px) {
  .wd-list {
    gap: var(--gap-xl);
  }
  .wd-card {
    width: 66%;
    max-width: 820px;
  }
  .wd-card:nth-child(odd) {
    margin-inline-end: auto;
  }
  .wd-card:nth-child(even) {
    margin-inline-start: auto;
    padding-inline: clamp(28px, 4vw, 56px) clamp(32px, 4.5vw, 60px);
  }
  .wd-card:nth-child(even)::before {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
}

.wege-outro {
  padding: var(--gap-xl) 0;
  background: var(--petrol);
}
.wege-outro-head {
  text-align: center;
  margin-bottom: var(--gap-xl);
}
.wege-outro-head .eyebrow {
  color: var(--accent-text);
}
.wege-outro-head h2 {
  margin: 14px 0 0;
}
.wege-outro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
  max-width: 900px;
  margin: 0 auto;
}
.wege-outro-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(28px, 3.5vw, 44px);
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  box-shadow: 0 30px 60px -46px
    color-mix(in srgb, var(--petrol) 55%, transparent);
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.wege-outro-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 40px 70px -44px
    color-mix(in srgb, var(--petrol) 60%, transparent);
}
.wege-outro-label {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.wege-outro-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--accent-deep);
}
.wege-outro .arrow {
  display: inline-block;
  transition: transform var(--dur) var(--ease);
}
.wege-outro-card:hover .arrow {
  transform: translateX(6px);
}

@media (min-width: 720px) {
  .wege-outro-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ─── Foto-Schleier · gemeinsames Ambient-System ──────────────────────────
   Silvias eigene Fotos liegen auf mehreren Sections als Hintergrund. Damit
   daraus ein System wird und nicht zehn Einzelfälle, benutzt jede Stelle
   dieselbe Mechanik — es wechseln nur die --veil-*-Werte.

   Warum entsättigt: die Palette ist Petrol + Kupfer + Papier. Zehn grüne
   Fotos in voller Sättigung wären ein dritter Farbton und würden die
   Identität kippen. Bei saturate(.4) und ~12% Deckkraft bleiben Licht und
   Bewegung, die Farbe wird zu Papierkorn.

   Das ::before liegt mit z-index:-1 im eigenen Stacking-Context (isolation),
   also über der Sectionsfläche und unter sämtlichen Inhalten.

   Die Maske ist eine Variable, weil die Seite drei Ankerungen braucht:
   rechts (Standard), links und flächig. `mask-composite: intersect` schneidet
   die waagrechte Blende mit der senkrechten — sichtbar bleibt nur, was in
   beiden durchlässig ist. Ohne Composite-Support gilt der Default `add`, also
   die Vereinigung: das senkrechte Band ist auf mittlerer Höhe über die volle
   Breite deckend und hebt die waagrechte Blende dort auf. Der Schleier wirkt
   dann kräftiger als gewollt, verschwindet aber nicht. */
.veil {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --veil-mask:
    linear-gradient(to right, transparent, #000 52%),
    linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
}
.veil::before {
  content: "";
  position: absolute;
  top: var(--veil-top, 0);
  right: var(--veil-right, 0);
  left: var(--veil-left, auto);
  height: var(--veil-h, 1100px);
  width: var(--veil-w, min(62%, 960px));
  z-index: -1;
  background-image: var(--veil-img);
  background-repeat: no-repeat;
  background-position: var(--veil-pos, right center);
  background-size: cover;
  opacity: var(--veil-op, 0.12);
  filter: saturate(var(--veil-sat, 0.4));
  pointer-events: none;
  -webkit-mask-image: var(--veil-mask);
  mask-image: var(--veil-mask);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* Linksbündig — für Sections, deren Text rechts steht oder mittig läuft. */
.veil--left {
  --veil-right: auto;
  --veil-left: 0;
  --veil-pos: left center;
  --veil-mask:
    linear-gradient(to left, transparent, #000 52%),
    linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
}
/* Flächig — nur ein Hauch über der ganzen Sectionsbreite, radial nach
   innen ausgeblendet, damit die Mitte (wo der Text steht) ruhig bleibt. */
.veil--wide {
  --veil-w: 100%;
  --veil-h: 100%;
  --veil-pos: center 55%;
  --veil-op: 0.09;
  --veil-mask:
    radial-gradient(
    120% 90% at 78% 30%,
    #000,
    transparent 72%
  ),
    linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
/* Schmale Bänder zwischen zwei Sections vertragen keine feste Höhe. */
.veil--band {
  --veil-h: 100%;
}

/* Auf schmalen Viewports läuft der Text über die volle Breite — jeder
   seitlich verankerte Schleier landet dann unter Zeilen. Bei 12% ist das
   unkritisch, hier reicht es, ihn weiter zurückzunehmen. */
@media (max-width: 900px) {
  .veil::before {
    opacity: calc(var(--veil-op, 0.12) * 0.55);
  }
}

/* Belegung · alle Motive an einer Stelle, damit der Rhythmus über die Seiten
   hinweg sichtbar bleibt und nicht in zehn Sections auseinanderläuft.
   Die Seiten wechseln bewusst die Ankerung (rechts → links → rechts), sonst
   entsteht beim Scrollen eine Kante statt einer Bewegung.
   /angebot steht weiter unten bei .ang-bg (kräftiger, eigene Regeln). */
.veil--farn-dicht {
  --veil-img: url("/static/images/farn-dicht.webp");
}
.veil--farn-wedel {
  --veil-img: url("/static/images/farn-wedel.webp");
}
/* Die beiden Falter-Aufnahmen sind die unruhigsten im Bestand: ein kleines
   Motiv in dichtem Kraut, überall Kanten. Als Schleier brauchen sie die
   leichteste Hand — bei 12% wie die Farne würden sie schlieren statt
   Struktur zu geben. */
.veil--falter-blau {
  --veil-img: url("/static/images/schmetterling-blau.webp");
  --veil-op: 0.08;
}
.veil--falter-orange {
  --veil-img: url("/static/images/schmetterling-orange.webp");
  --veil-op: 0.08;
}
.veil--berge {
  --veil-img: url("/static/images/blume-berge.webp");
}

/* ─── Bildbausteine · die drei Stellen mit echtem <img> ───────────────────
   Alles andere ist Schleier. Hier stehen Bilder, die man ansehen soll:
   eine Skizze, eine Atempause, ein Referat. */

/* Skizzenblatt auf /wege — Silvia schreibt in ihren eigenen Texten zweimal,
   dass sie mit Stift und Papier arbeitet. Das Blatt bekommt deshalb eine
   Passepartout-Fassung statt eines randlosen Fotos: es IST ein Blatt Papier,
   und die Fassung sagt das, ohne es zu behaupten. */
.skizze-band {
  padding-block: clamp(48px, 6vw, 88px);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.skizze-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.skizze-mount {
  margin: 0;
  padding: clamp(10px, 1.2vw, 18px);
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  box-shadow: 0 30px 60px -46px
    color-mix(in srgb, var(--petrol) 55%, transparent);
}
.skizze-mount img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 45%;
}
.skizze-text {
  display: grid;
  gap: var(--gap-sm);
}
.skizze-quote {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
@media (min-width: 900px) {
  .skizze-grid {
    grid-template-columns: 7fr 5fr;
  }
}

/* Atempause auf /portrait — randlos über die volle Breite, zwischen den
   Stationen und der langen Ausbildungsliste. Kein Text darauf: das Band ist
   eine Pause, keine Folie. Motiv und Coda-Text sagen dasselbe («…tanke ich
   im Garten oder in der Natur»). */
.atempause {
  margin: clamp(48px, 6vw, 80px) 0 0;
  overflow: hidden;
}
/* Das nachfolgende .werdegang-sub bringt sein eigenes padding-top mit —
   ohne diese Zeile stünde das Band oben 80px, unten aber 80+72px frei. */
.atempause + .wrap > .werdegang-sub:first-child {
  padding-top: clamp(48px, 6vw, 80px);
}
.atempause img {
  display: block;
  width: 100%;
  height: clamp(190px, 26vw, 380px);
  object-fit: cover;
  /* 35% statt Mitte: darunter liegt nur Wiese. Erst hier sind Blüte,
     Bergkette und ein Streifen Himmel zusammen im Ausschnitt — die Weite
     ist der Punkt des Bandes, nicht das Gras. */
  object-position: center 35%;
}

/* Referatsfoto auf /kurse — solange die Seite Platzhalter ist, hält ein
   echtes Bild sie davon ab, verlassen zu wirken. */
.kurse-bild {
  margin: 0 auto var(--gap-xl);
  max-width: 720px;
}
.kurse-bild img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 38%;
  border: 1px solid var(--rule-soft);
}
.kurse-bild figcaption {
  margin-top: var(--gap-sm);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* Das Graphic Recording zum Baeume-Referat liegt auf der Programmseite auf
   einer Panelflaeche — siehe `.kurse-v1 .kurse-bild` weiter unten. Die
   Regeln hier gelten dem Referatsfoto der pausierten Coming-soon-Seite. */

/* ─── Angebot v2 (scoped unter .angebot-v2) ────────────────────────────── */
.angebot-v2 .bg-paper {
  background: var(--paper);
}
.angebot-v2 .bg-warm {
  background: var(--paper-warm);
}
.bg-ink {
  background: var(--ink);
  color: #f5f1e8;
}

/* Zweig-Hintergrundfotos · benutzen .veil (siehe oben), hier stehen nur die
   Motive und die Abweichungen.

   Diese beiden Sections behalten bewusst ihre ursprünglichen Motive —
   Wohnzimmertisch beim privaten, Sitzungszimmer beim Firmen-Zugang. Sie
   laufen deshalb auch mit den alten Werten: 45% statt 12% und ohne
   Entsättigung. Der Rest der Site zieht Fotos auf saturate(.4) zurück,
   damit die grünen Naturaufnahmen die Palette nicht kippen — diese zwei
   sind ohnehin beige bzw. gedämpft und brauchen das nicht.

   Die feste Höhe von .veil ist hier der Kern: die Section wächst um ~130px,
   wenn das «Mehr» im Firmen-Zweig aufklappt. Bei `height: 100%` wüchse die
   Bildebene mit, und weil die Höhe die `cover`-Skalierung bestimmt, zoomte
   das Foto bei jedem Klick sichtbar. Die feste Höhe entkoppelt den
   Ausschnitt von der Sectionshöhe — die Maske blendet unten ohnehin aus. */
.angebot-v2 .ang-bg--privat,
.angebot-v2 .ang-bg--firmen {
  --veil-op: 0.45;
  --veil-sat: 1;
}
/* Motiv sitzt im unteren Bilddrittel (Tasse, Buch, Tisch) — der obere Rand
   ist nur unscharfer Vorhang. */
.angebot-v2 .ang-bg--privat {
  --veil-img: url("/static/images/angebot-privat-bg.webp");
  --veil-pos: right bottom;
}
.angebot-v2 .ang-bg--firmen {
  --veil-img: url("/static/images/angebot-firmen-bg.webp");
  --veil-pos: right center;
}
/* Unter 900px klappt .ang-split auf eine Spalte, der Text läuft also über die
   volle Breite — dort landet JEDES rechtsbündige Hintergrundfoto unter Zeilen.
   Diese beiden laufen mit 22–26% deutlich kräftiger als die übrigen Schleier,
   und schmaler und blasser reicht nicht: bei 375px ragten selbst bei 46% noch
   vier Textzeilen ins Bild. Deshalb auf Mobile gar kein Foto.
   (Vorher stand hier width:78% — das war sogar BREITER als der Desktop-Wert
   min(62%, 960px), auf 375px 293px statt 232px. Genau das war der Grund für
   «Schriften nicht leserlich».) */
@media (max-width: 900px) {
  .angebot-v2 .ang-bg::before {
    display: none;
  }
}

.angebot-v2 h2.serif {
  margin-top: var(--gap-md);
  max-width: 18ch;
}
.angebot-v2 .lead {
  color: var(--text-soft);
  max-width: 52ch;
  margin-top: var(--gap-md);
}
.bg-ink .lead {
  color: #f5f1e8;
}

/* Hero enger anschliessen — die Weiche soll am Falz mitlaufen */
.angebot-v2 .page-hero {
  min-height: 0;
  padding-top: clamp(116px, 13vw, 152px);
  padding-bottom: clamp(36px, 4.5vw, 56px);
  border-bottom: none;
}

/* ─── Weiche · zwei gleichrangige Zugänge ─────────────────────────────────
   Kupfer-Bänder wie beim Angebot-Streifen (.ang-banner) — gleiche Sprache,
   gleiche Bedeutung: hier stehen die Angebote nebeneinander. */
/* Weiche — zwei Zugaenge unter dem Hero. Wie .cta bewusst UNGESCOPED:
   die Regeln lagen unter .angebot-v2 und tragen seit dem Programm-PDF
   auch /kurse (Referate / Kurse). Nicht wieder einscopen. */
.ang-fork {
  background: var(--paper-warm);
  border-block: 3px solid var(--accent-deep);
  padding-block: var(--gap-md);
}
.ang-fork-label {
  margin-bottom: var(--gap-sm);
}
.ang-fork-grid {
  display: grid;
  grid-template-columns: 1fr;
}
/* Feste Zeilen: Marker · Name · Für-wen · Fakt · Sprungmarke. Damit liegen
   Kupferlinie und «Zum Angebot» in beiden Panels exakt auf gleicher Höhe,
   auch wenn die Für-wen-Zeile unterschiedlich lang umbricht. */
.ang-path {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: var(--gap-xs);
  padding: var(--gap-md);
  margin-inline: calc(var(--gap-md) * -1);
  color: var(--ink);
  transition: background var(--dur) var(--ease);
}
.ang-path + .ang-path {
  border-top: 1px solid var(--rule);
}
.ang-path::after {
  content: "";
  position: absolute;
  left: var(--gap-md);
  right: var(--gap-md);
  bottom: 0;
  height: 2px;
  background: var(--accent-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.ang-path:hover {
  background: color-mix(in srgb, var(--accent-deep) 9%, transparent);
}
.ang-path:hover::after {
  transform: scaleX(1);
}
.ang-path-title {
  font-size: var(--fs-h3);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.ang-path-who {
  font-size: var(--fs-body);
  color: var(--text-soft);
  max-width: 34ch;
  text-wrap: balance;
}
.ang-path-fact {
  margin-top: var(--gap-xs);
  padding-top: var(--gap-sm);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.ang-path-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--gap-xs);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--accent-text);
}
.ang-path-arrow {
  transition: transform var(--dur) var(--ease);
}
.ang-path:hover .ang-path-arrow {
  transform: translateY(4px);
}
@media (min-width: 720px) {
  .ang-fork-grid {
    grid-template-columns: 1fr 1fr;
  }
  .ang-path {
    margin-inline: 0;
    padding-inline: 0 var(--gap-lg);
  }
  .ang-path::after {
    left: 0;
    right: var(--gap-lg);
  }
  .ang-path + .ang-path {
    border-top: none;
    border-left: 1px solid var(--rule);
    padding-inline: var(--gap-lg) 0;
  }
  .ang-path + .ang-path::after {
    left: var(--gap-lg);
    right: 0;
  }
  .ang-path:hover {
    background: none;
  }
}

/* Bridge-Link — Inline-Verweis mit Kupfer-Unterkante */
.angebot-v2 .bridge-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--gap-lg);
  font-weight: 500;
  color: var(--accent-text);
  border-bottom: 1px solid var(--accent-deep);
  padding-bottom: 2px;
  transition: gap var(--dur) var(--ease);
}
.angebot-v2 .bridge-link:hover {
  gap: 16px;
}

/* Zweig-Kopf — Kupferkante markiert den Beginn eines Zweigs */
.angebot-v2 .ang-sec-head {
  margin-bottom: var(--gap-xl);
  padding-top: var(--gap-md);
  border-top: 1px solid var(--accent-deep);
}
.angebot-v2 .ang-sec-head h2.serif {
  margin-top: var(--gap-sm);
}
.angebot-v2 .ang-sec-sub {
  margin-top: var(--gap-sm);
  color: var(--text-soft);
  font-size: var(--fs-body);
}

/* Zweispaltiges Section-Layout */
.angebot-v2 .ang-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-xl);
}
@media (min-width: 860px) {
  .angebot-v2 .ang-split {
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(40px, 6vw, 88px);
  }
}

/* Zielgruppen */
.angebot-v2 .ang-zielgruppen {
  list-style: none;
  padding-left: 0;
}
.angebot-v2 .ang-zielgruppen li {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--ink);
  padding-block: 10px;
  border-top: 1px solid var(--rule-soft);
}
.angebot-v2 .ang-zielgruppen li:first-child {
  border-top: none;
}

/* ─── Handlungs-Panel · schliesst jeden Zweig ab ───────────────────────────
   Links die harten Fakten (Ausgleich bzw. Telefon), rechts der nächste
   Schritt. Beide Zweige benutzen dasselbe Panel — gleicher Ort, gleiche Form. */
.angebot-v2 .ang-action {
  margin-top: var(--gap-xl);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
  padding: var(--gap-lg) var(--gap-md);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent-deep);
}
.angebot-v2 .bg-paper .ang-action {
  background: var(--paper-warm);
}
.angebot-v2 .bg-warm .ang-action {
  background: var(--paper);
}
.angebot-v2 .ang-action-side {
  align-self: start;
}
.angebot-v2 .ang-action-title {
  margin-top: var(--gap-xs);
  margin-bottom: var(--gap-md);
  max-width: 16ch;
}
.angebot-v2 .ang-action-side p {
  font-size: var(--fs-body);
  color: var(--text-soft);
  max-width: 46ch;
}
.angebot-v2 .ang-action-side p + p {
  margin-top: var(--gap-sm);
}
.angebot-v2 .ang-action-side .btn-primary {
  margin-top: var(--gap-lg);
}
.angebot-v2 .ang-action-note {
  margin-top: var(--gap-sm);
  font-size: var(--fs-body);
  color: var(--text-soft);
  max-width: 40ch;
}
@media (min-width: 860px) {
  .angebot-v2 .ang-action {
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 80px);
    padding: var(--gap-lg);
  }
}

/* Ausgleich — Preis · Leistung · Dauer.
   Die Spalten liegen auf .ang-preise, die Zeilen erben sie per subgrid —
   sonst misst jede Zeile ihr eigenes `auto` und «CHF 80» schiebt Titel und
   Dauer gegenueber «CHF 140» aus der Flucht. */
.angebot-v2 .ang-preise {
  display: grid;
  grid-template-columns: auto 1fr;
}
.angebot-v2 .ang-preis {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  gap: 4px var(--gap-md);
  padding-block: var(--gap-sm);
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.angebot-v2 .ang-preis:first-child {
  border-top: none;
  padding-top: 0;
}
.angebot-v2 .ang-preis-val {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.angebot-v2 .ang-preis-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.angebot-v2 .ang-preis-body strong {
  font-weight: 600;
  color: var(--text);
  font-size: var(--fs-body);
}
.angebot-v2 .ang-preis-body small {
  font-size: var(--fs-small);
  color: var(--text-faint);
}
/* Bewusst OHNE .numeral: das setzt --font-display, und Cormorant ist bei 16px
   in --text-soft schlecht lesbar. Die Ziffernausrichtung der rechtsbündigen
   Spalte kommt hier direkt, ohne den Schriftwechsel. */
.angebot-v2 .ang-preis-dauer {
  grid-column: 2;
  font-size: var(--fs-body);
  color: var(--text-soft);
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
@media (min-width: 560px) {
  .angebot-v2 .ang-preise {
    grid-template-columns: auto 1fr auto;
  }
  .angebot-v2 .ang-preis-dauer {
    grid-column: 3;
    text-align: right;
  }
}

/* Quick-Links */
.angebot-v2 .ang-quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm) var(--gap-lg);
  margin-top: var(--gap-lg);
  padding-top: var(--gap-md);
  border-top: 1px solid var(--rule-soft);
}
.angebot-v2 .ang-quicklinks a {
  font-size: var(--fs-body);
  color: var(--accent-text);
  position: relative;
  padding-bottom: 2px;
}
.angebot-v2 .ang-quicklinks a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.angebot-v2 .ang-quicklinks a:hover::after {
  transform: scaleX(1);
}

/* Text-Bausteine in den Sections */
.angebot-v2 .panel-lead {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--ink);
  max-width: 22ch;
  line-height: 1.22;
  letter-spacing: -0.015em;
  margin-bottom: var(--gap-lg);
}
.angebot-v2 .panel-body {
  font-size: var(--fs-body);
  color: var(--text-soft);
  max-width: 46ch;
  margin-bottom: var(--gap-lg);
}
.angebot-v2 .sub-label {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--gap-md);
  display: block;
}
/* Listen bündig zum Sub-Label — kein Browser-Einzug */
.angebot-v2 .points {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.angebot-v2 .points li {
  position: relative;
  padding-left: 18px;
  padding-block: 14px;
  border-top: 1px solid var(--rule-soft);
}
.angebot-v2 .points li:first-child {
  border-top: none;
}
/* Kupfer-Marke steht senkrecht neben dem Eintrag (Kundenwunsch statt Strich) */
.angebot-v2 .points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 2px;
  background: var(--accent-deep);
}
.angebot-v2 .points li strong {
  color: var(--text);
  font-weight: 600;
  display: block;
  font-size: var(--fs-body);
  margin-bottom: 2px;
}
.angebot-v2 .points li span {
  color: var(--text-soft);
  font-size: var(--fs-body);
}
/* Beispiele je Leistung — eingeklappt, damit die Liste scanbar bleibt.
   Toggle-Mechanik kommt von .wd-more (reines <details>, kein JS). */
.angebot-v2 .ang-more {
  margin-top: 6px;
  max-width: none;
}
.angebot-v2 .ang-more .wd-more-toggle {
  color: var(--accent-text);
}
.angebot-v2 .ang-more .wd-more-label {
  font-size: var(--fs-small);
  color: inherit;
}
.angebot-v2 .ang-examples {
  list-style: none;
  margin: 10px 0 0;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Setzt die Regeln von .points li zurueck — sonst erben die Beispiele
   Trennlinie, Innenabstand und den senkrechten Kupferbalken. */
.angebot-v2 .ang-examples li {
  padding: 0 0 0 16px;
  border-top: none;
  color: var(--text-soft);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.angebot-v2 .ang-examples li::before {
  content: "–";
  position: absolute;
  left: 0;
  top: 0;
  bottom: auto;
  width: auto;
  height: auto;
  background: none;
  color: var(--accent-text);
}

/* ─── Klientenstimmen im Zweig ─────────────────────────────────────────────
   Stehen im Zweig, nicht am Seitenende: über den Quicklinks (Privat) bzw.
   unter dem Anfrage-Button (Firmen). Bewusst leiser als eine zentrierte
   Grossaufnahme — Kupferlinie links, linksbündig im Textfluss. */
.angebot-v2 .ang-stimmen {
  margin-top: var(--gap-xl);
}
.angebot-v2 .ang-stimmen .sub-label {
  display: block;
  margin-bottom: var(--gap-md);
}

/* ─── Karussell · ab zwei Stimmen ──────────────────────────────────────────
   Elf lange Zitate untereinander liest niemand. Die Spur scrollt horizontal
   mit scroll-snap: nativ wisch- und tastaturbedienbar, das Script in
   Layout.tsx ergänzt nur Pfeile und Punkte.

   `scrollbar-width: none` versteckt die Systemleiste — die Position zeigen
   die Punkte, und eine Leiste quer unter dem Zitat wirkt wie ein Fehler. */
.angebot-v2 .ang-car-track {
  display: flex;
  gap: var(--gap-xl);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.angebot-v2 .ang-car-track::-webkit-scrollbar { display: none; }
.angebot-v2 .ang-car-track:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 6px;
}
/* Eine Stimme pro Ansicht, ab 860px zwei. `align-items: start` fehlt
   absichtlich: gleich hohe Slides halten die Bedienleiste an ihrem Platz,
   statt sie bei jedem Wechsel springen zu lassen. */
.angebot-v2 .ang-car-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}
@media (min-width: 860px) {
  .angebot-v2 .ang-car-slide {
    flex-basis: calc((100% - var(--gap-xl)) / 2);
  }
}
.angebot-v2 .ang-car-slide .ang-stimme { max-width: none; height: 100%; }

.angebot-v2 .ang-car-nav {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  margin-top: var(--gap-lg);
}
.angebot-v2 .ang-car-nav[hidden] { display: none; }
.angebot-v2 .ang-car-btn {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--ink);
  font-size: var(--fs-body);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.angebot-v2 .ang-car-btn:hover:not(:disabled) {
  border-color: var(--accent-deep);
  color: var(--accent-text);
}
.angebot-v2 .ang-car-btn:disabled { opacity: 0.3; cursor: default; }
.angebot-v2 .ang-car-dots { display: flex; gap: var(--gap-xs); }
.angebot-v2 .ang-car-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--rule);
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
}
.angebot-v2 .ang-car-dot.is-on {
  background: var(--accent-deep);
  transform: scale(1.4);
}
@media (prefers-reduced-motion: reduce) {
  .angebot-v2 .ang-car-track { scroll-behavior: auto; }
  .angebot-v2 .ang-car-btn,
  .angebot-v2 .ang-car-dot { transition: none; }
}
/* Lange Absätze in Display-Schrift wären genau die Unlesbarkeit, die auf
   dieser Seite schon einmal beanstandet wurde. Im Karussell also Inter in
   Body-Grösse; die Einzelstimme ohne Karussell bleibt gross. */
.angebot-v2 .ang-car-slide .ang-stimme blockquote p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  letter-spacing: 0;
}
/* Abstand nach oben sitzt am Wrapper, nicht an der einzelnen Figure —
   sonst addiert sich beides bei der Einzelstimme. */
.angebot-v2 .ang-stimme {
  margin: 0;
  max-width: 58ch;
  padding-left: var(--gap-md);
  border-left: 2px solid var(--accent-deep);
}
.angebot-v2 .ang-stimme blockquote {
  margin: 0;
}
.angebot-v2 .ang-stimme blockquote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
/* Haengende Anfuehrung: das Zeichen ragt in die Kupferlinie hinein, damit die
   erste Textzeile mit den folgenden fluchtet. Nur am ersten Absatz — die
   Folgeabsaetze tragen kein Zeichen und wuerden sonst nach links versetzt.
   Kein `line-height: 0`-Trick wie bei der alten Grossaufnahme; der kippt das
   Zeichen hier auf Zeile zwei. */
.angebot-v2 .ang-stimme blockquote p:first-child {
  text-indent: -0.42em;
}
.angebot-v2 .ang-stimme blockquote p + p {
  margin-top: var(--gap-sm);
}
/* Anfuehrungen umschliessen das ganze Zitat, nicht jeden Absatz. */
.angebot-v2 .ang-stimme blockquote p:first-child::before {
  content: "„";
  color: var(--accent-deep);
}
.angebot-v2 .ang-stimme blockquote p:last-child::after {
  content: "“";
  color: var(--accent-deep);
}
.angebot-v2 .ang-stimme figcaption {
  margin-top: var(--gap-sm);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.angebot-v2 .ang-stimme figcaption strong {
  color: var(--accent-text);
  font-weight: 500;
}

/* ─── .ink-photo · Waldlicht hinter den dunklen Abschlussbändern ───────────
   Die einzige Stelle, an der ein Foto als Foto auftreten darf. Überall sonst
   sind Silvias Bilder Schleier (siehe .veil). Jedes petrolfarbene Band, das
   eine Seite abschliesst und zum Kontakt führt, trägt dasselbe Waldlicht —
   ein wiederkehrender Schlussakkord, kein Effekt pro Seite. Aktuell:
   `.cta` (/angebot, /kurse, /portrait), `.wege-outro` (/wege) und der
   Kontakt-Teaser der Startseite.

   Zwei Ebenen unter dem Inhalt: ::before ist das Foto, ::after der
   Petrol-Verlauf darüber. Der Verlauf ist links praktisch deckend (dort
   steht die Überschrift) und öffnet sich nach rechts auf 62% — genau
   dorthin, wo im Bild die Sonne zwischen den Stämmen steht. Weniger
   Deckung geht nicht: an der hellsten Bildstelle liegt der Grund dann bei
   rgb(61,85,94), das trägt weisse Schrift mit 7.7:1 und den Telefonlink
   mit 5.4:1 — deshalb steht .cta-phone unten auf 0.85 statt 0.7.

   Wer das Band anfasst, muss diese Rechnung mitführen. */
.ink-photo {
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.ink-photo::before,
.ink-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.ink-photo::before {
  background: url("/static/images/wald-licht.webp") center 62% / cover
    no-repeat;
  opacity: 0.6;
}
.ink-photo::after {
  background: linear-gradient(
    100deg,
    var(--ink) 22%,
    color-mix(in srgb, var(--ink) 82%, transparent) 58%,
    color-mix(in srgb, var(--ink) 62%, transparent) 100%
  );
}
/* Die Inhalte müssen über die beiden Ebenen. `.cta .wrap` macht das schon
   selbst; für die übrigen Bänder reicht diese Regel. */
.ink-photo > .wrap {
  position: relative;
  z-index: 1;
}

.cta-mark {
  position: absolute;
  bottom: -18%;
  left: -4%;
  font-family: var(--font-display);
  font-size: clamp(240px, 36vw, 520px);
  line-height: 0.7;
  color: #fff;
  opacity: 0.035;
  font-style: italic;
  pointer-events: none;
  user-select: none;
}
.cta .wrap {
  position: relative;
  z-index: 1;
}
.cta-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-xl);
  align-items: end;
}
/* `h2.serif` statt nur `h2`: `.angebot-v2 h2.serif` (Zeile 2450) setzt
   max-width: 18ch und hat eine Klasse mehr. Solange die CTA-Regel unter
   `:is(.angebot-v2, .kurse-v1)` lag, war sie gleich spezifisch und gewann
   als spätere Regel. Ohne diesen Scope bräuchte sie sonst 18ch statt 15ch. */
.cta h2.serif {
  color: #fff;
  max-width: 15ch;
}
.cta-actions {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  align-items: flex-start;
}
/* Petrol-Fläche mit Paper-Schrift — Kupfer bleibt Akzent, wird nie Buttonfläche
   (Petrol auf Kupfer ist weder schön noch AA-fest). */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--petrol);
  color: var(--paper);
  padding: 17px 34px;
  font-weight: 500;
  transition:
    transform var(--dur) var(--ease),
    background var(--dur) var(--ease);
}
.btn-primary:hover {
  transform: translateY(-2px);
  background: var(--petrol-deep);
}
/* Auf dunklen Sections invertiert: helle Fläche, Petrol-Schrift. */
.bg-ink .btn-primary {
  background: var(--paper);
  color: var(--petrol);
}
.bg-ink .btn-primary:hover {
  background: color-mix(in srgb, var(--accent-on-ink) 35%, var(--paper));
}
/* 0.85 statt 0.7 — das Band hat jetzt ein Foto unter dem Petrol-Verlauf
   (siehe .cta oben); bei 0.7 fiele der Link an der hellsten Bildstelle
   unter 4.5:1. */
.cta-phone {
  color: rgba(245, 241, 232, 0.85);
  font-size: var(--fs-body);
}
.cta-phone strong {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: #f5f1e8;
  display: block;
  margin-top: 4px;
  letter-spacing: 0.01em;
}
@media (min-width: 820px) {
  .cta-inner {
    grid-template-columns: 1.2fr 0.8fr;
  }
  .cta-actions {
    align-items: flex-end;
    text-align: right;
  }
}

/* ─── Angebot-Banner (schlanker Streifen unter Hero) ─────────────────────── */
/* Abstände wie die Weiche (.ang-fork): Padding sitzt am Streifen selbst,
   die Reihe bleibt randlos. */
.ang-banner {
  background: var(--paper-warm);
  color: var(--petrol);
  border-block: 3px solid var(--accent-deep);
  padding-block: var(--gap-md);
}
/* `margin-block: 0`, nicht `margin: 0` — die Kurzform hat das
   `margin-inline: auto` aus `.wrap` mit ausgeknipst. Der Streifen zentrierte
   dann nicht mehr, sondern klebte am Viewport-Rand: sein Inhalt begann bei
   --pad-x statt in der Textspalte, also links neben allem anderen. */
.ang-banner-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-sm) var(--gap-md);
  margin-block: 0;
  padding-block: 0;
}
/* Titel vor den Links — Eyebrow-Sprache wie die Sub-Labels der Angebot-Seite */
.ang-banner-title {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.ang-banner-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-sm) var(--gap-md);
}
/* Schrift wie die Sprungmarke der Weiche (.ang-path-go): Body-Schnitt,
   Body-Grad, 500er-Gewicht, Kupfer-Text. */
.ang-banner-link {
  position: relative;
  color: var(--accent-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.1;
  transition: color var(--dur) var(--ease);
}
.ang-banner-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: var(--accent-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.ang-banner-link:hover {
  color: color-mix(in srgb, var(--accent-text) 80%, #000);
}
.ang-banner-link:hover::after {
  transform: scaleX(1);
}

.ang-banner-link + .ang-banner-link::before {
  content: "";
  position: absolute;
  left: calc(var(--gap-md) / -2);
  top: 0.2em;
  bottom: 0.2em;
  width: 1px;
  background: color-mix(in srgb, var(--accent-deep) 50%, transparent);
}

.ang-banner-all {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  color: var(--petrol);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.ang-banner-all .arrow {
  transition: transform var(--dur) var(--ease);
}
.ang-banner-all:hover .arrow {
  transform: translateX(6px);
}

@media (max-width: 640px) {
  .ang-banner-all {
    margin-left: 0;
  }
  .ang-banner-link + .ang-banner-link::before {
    display: none;
  }
}

/* ─── Referate und Kurse (scoped unter .kurse-v1) ────────────────────────────
   Die Seite ist ein Jahresprogramm, kein Katalog: sie traegt als einzige
   Seite der Site feste Termine, waehrend sonst alles auf Anfrage laeuft.
   Deshalb ist die Terminschiene (linke Spalte) das tragende Element und die
   Daten stehen in der Display-Schrift auf --fs-h3 — der Groesse, die sonst
   Ueberschriften vorbehalten ist. Alles andere haelt sich zurueck.

   Reihenfolge der Seite = steigende Verbindlichkeit: Abend (CHF 25) →
   Tag (CHF 260) → Prozess (CHF 2'500). Keine Tabs, keine Nummerierung: die
   fuenf Angebote sind eine Liste, keine Abfolge, und die Termine tragen die
   Information, die eine 01/02/03-Marke nur behaupten wuerde.

   Der Aufbau folgt dem Redesign aus `design/kurse/` (BRIEF.md). Vier
   Eingriffe, alle mit dem Vokabular, das /angebot schon benutzt:

     1  Kupfer-Budget   — vier Staerken, jede mit fester Bedeutung:
                          3px waagrecht = Kapitel (Weiche, Gruppenkopf),
                          2px waagrecht = Bedingung/Abschluss (geteilte
                          Eckdaten, Panelkopf, Fuss der Gruppe),
                          2px senkrecht = Termin (die Schiene),
                          Kupfer als Text = Format, Handlung, Zitatmarke.
                          Eine fuenfte Staerke macht die Sprache beliebig.
     2  Dreispaltigkeit — Termin | Substanz | Handlung. Die rechten ~35 %
                          standen vorher ueber die ganze Seitenlaenge leer.
     3  Handlungsspalte — jedes Angebot endet in einer Handlung, nicht erst
                          die Seite.
     4  Waermeverlauf   — Papier → Warm → Ink folgt der Verbindlichkeit. */

/* Durchlaessig, damit das Seitenbild (.kurse-v1::before, weiter unten)
   hindurchkommt. Ohne das laege es hinter deckendem Papier. */
.kurse-v1 .bg-paper {
  background: transparent;
}
.kurse-v1 .bg-warm {
  background: var(--paper-warm);
}
/* Kompakter Hero — das erste Angebot soll frueh sichtbar sein.
   padding-top muss den fixierten Header freihalten. */
.kurse-v1 .page-hero {
  padding-block: calc(var(--header-h) + var(--gap-md)) var(--gap-lg);
  min-height: 0;
}
/* Die Weiche liegt im Bildband. Deckend wuerde sie es nach 400px abschneiden
   — hier durchlaessig, damit das Motiv hinter ihr weiterlaeuft und erst der
   Verlauf es beendet. */
.kurse-v1 .ang-fork {
  background: color-mix(in srgb, var(--paper-warm) 72%, transparent);
}

/* ── Waermeverlauf ───────────────────────────────────────────────────────────
   Der Untergrund folgt der Verbindlichkeit: Referate auf Papier, Leitsatz
   warm, Kurse warm, Abschlussband Ink. Die zweite Seitenhaelfte ist sichtbar
   die tiefere.

   `--panel` ist der Gegenton: auf Papier liegen Panels warm, auf Warm liegen
   sie weiss — dieselbe Umkehrregel wie `.angebot-v2 .bg-warm .ang-action`. */
.kurse-v1 .prog-gruppe {
  --panel: var(--paper-warm);
  /* Ziel der Weiche — nicht unter den fixen Header springen */
  scroll-margin-top: var(--header-h);
}
.kurse-v1 .prog-gruppe--tief {
  --panel: var(--paper);
  background: var(--paper-warm);
}
.kurse-v1 .prog-gruppe:first-of-type {
  padding-top: var(--gap-lg);
}

/* ── Gruppenkopf ─────────────────────────────────────────────────────────────
   3px Kupfer wie `.angebot-v2 .ang-sec-head`: die Kante markiert den Beginn
   eines Kapitels. Ohne sie begann die Gruppe unangekuendigt im Weiss. */
.kurse-v1 .prog-kopf {
  max-width: 60ch;
  padding-top: var(--gap-md);
  border-top: 3px solid var(--accent-deep);
}
.kurse-v1 .prog-kopf h2 {
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin-top: var(--gap-sm);
}
.kurse-v1 .prog-kopf .lead {
  font-size: var(--fs-lead);
  color: var(--text-soft);
  max-width: 56ch;
  margin-top: var(--gap-md);
}

/* ── Geteilte Eckdaten ───────────────────────────────────────────────────────
   Was alle Angebote der Gruppe teilen, steht einmal darueber (die drei
   Referate laufen am selben Ort, zur selben Zeit, zum selben Preis — dreimal
   untereinander gedruckt waere das Rauschen). Welche Werte wohin gehoeren,
   rechnet `geteilteFakten()` aus den Daten aus.

   2px Kupfer oben: eine Bedingung, die fuer alles darunter gilt. Unten
   schliesst eine graue Haarlinie, damit die Leiste nicht wie ein zweites
   Kapitel wirkt. */
.kurse-v1 .prog-fakten--breit {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md) var(--gap-lg);
  margin-top: var(--gap-lg);
  padding-block: var(--gap-md);
  border-top: 2px solid var(--accent-deep);
  border-bottom: 1px solid var(--rule);
}
.kurse-v1 .prog-fakten--breit .prog-fakt {
  padding-block: 0;
  border-bottom: none;
}

/* ── Ein Angebot: Termin | Substanz | Handlung ────────────────────────────────
   +──────────+─────────────────────────────+──────────────────+
   | ▌ Mi     | Impuls-Referat              | ═══ 2px Kupfer   |
   |   06.01. | Drei Referate in Einem      | Kosten  CHF 25   |
   |   12.05. | Perspektiven im Umgang …    | Anmeldung  …     |
   |   27.10. |                             | ───────────────  |
   |     2027 | #1 Wieso ticke ich so…?!    | Platz anfragen → |
   +──────────+─────────────────────────────+──────────────────+
      180px              ~62ch                     300px

   Die Textspalte bleibt bei ~62ch — die Zeilenlaenge aendert sich also
   nicht, nur die Seite ist nicht mehr halb leer. */
.kurse-v1 .prog-liste {
  margin-top: var(--gap-lg);
  border-top: 1px solid var(--rule);
  /* Fuss der Gruppe: 2px Kupfer schliesst das Kapitel. Eine graue Linie
     waere von der naechsten nicht zu unterscheiden. */
  border-bottom: 2px solid var(--accent-deep);
}
.kurse-v1 .prog-item {
  display: grid;
  gap: var(--gap-md);
  padding-block: var(--gap-lg);
  border-bottom: 1px solid var(--rule);
  /* Direktlinks wie /kurse#zahlenkurs nicht unter den fixen Header schieben */
  scroll-margin-top: calc(var(--header-h) + var(--gap-md));
}
.kurse-v1 .prog-item:last-child {
  border-bottom: none;
}
@media (min-width: 760px) {
  .kurse-v1 .prog-item {
    grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
    column-gap: var(--gap-lg);
  }
  .kurse-v1 .prog-side {
    grid-column: 2;
  }
}
@media (min-width: 1040px) {
  .kurse-v1 .prog-item {
    grid-template-columns:
      minmax(150px, 180px) minmax(0, 1fr)
      minmax(260px, 300px);
    column-gap: var(--gap-lg);
  }
  .kurse-v1 .prog-side {
    grid-column: 3;
  }
}

/* ── Terminschiene ───────────────────────────────────────────────────────────
   Das tragende Element der Seite bekommt die senkrechte 2px-Kupfermarke —
   dieselbe Form wie `.angebot-v2 .points li::before`.

   Der Wochentag steht EINMAL ueber der Reihe, wenn alle Termine auf denselben
   Tag fallen (die Referate laufen immer mittwochs — dreimal «Mi» ist
   Rauschen). Fallen sie auseinander wie beim Zahlenkurs (Sa/Mi/Sa), steht er
   pro Datum. Dieselbe Logik, die `geteilteFakten()` fuer die Eckdaten schon
   anwendet: abgeleitet, nicht zusaetzlich gepflegt. */
.kurse-v1 .prog-when {
  position: relative;
  padding-left: var(--gap-sm);
}
.kurse-v1 .prog-when::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--accent-deep);
}
.kurse-v1 .prog-tag-alle {
  display: block;
  margin-bottom: var(--gap-xs);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.kurse-v1 .prog-termine {
  list-style: none;
  /* Ohne das behaelt die <ol> den UA-Einzug und die Daten stuenden
     eingerueckt gegen die Titel daneben. */
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm) var(--gap-lg);
}
@media (min-width: 760px) {
  .kurse-v1 .prog-termine {
    flex-direction: column;
    gap: var(--gap-sm);
  }
}
.kurse-v1 .prog-termin {
  display: flex;
  align-items: baseline;
  gap: 0.6ch;
}
.kurse-v1 .prog-tag {
  font-size: var(--fs-micro);
  color: var(--text-faint);
}
.kurse-v1 .prog-datum {
  font-family: var(--font-display);
  font-feature-settings: "lnum", "tnum";
  font-variant-numeric: lining-nums tabular-nums;
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--ink);
}
/* Der Intensiv-Workshop hat keine festen Daten. Seine ruhige Zeile ist der
   Gegenpol zu den harten Terminen darueber — deshalb kursiv gesetzt und
   nicht als Datum verkleidet. */
.kurse-v1 .prog-frei {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h4);
  line-height: 1.25;
  color: var(--text-soft);
}

/* ── Substanz-Spalte ─────────────────────────────────────────────────────────
   `kind` («Impuls-Referat», «Tageskurs», «Intensiv-Persoenlichkeits-Workshop»)
   ist die einzige Angabe, die Format vom Titel trennt, und stand vorher
   ungenutzt in den Daten. Als Kupferzeile ueber dem Titel — bewusst NICHT
   gesperrt-versal: die Seite hat mit den dt-Zeilen und den Eyebrows schon
   zwei Versalebenen, eine dritte wuerde nur noch dekorieren. */
.kurse-v1 .prog-what {
  max-width: 62ch;
}
.kurse-v1 .prog-kind {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  color: var(--accent-text);
}
.kurse-v1 .prog-titel {
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.kurse-v1 .prog-claim {
  margin-top: var(--gap-xs);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.3;
  color: var(--text-soft);
}
.kurse-v1 .prog-text {
  margin-top: var(--gap-md);
  font-size: var(--fs-body);
  color: var(--text-soft);
  max-width: 62ch;
}

/* Die drei Teile des Impuls-Referats — drei eigenstaendige Referate an einem
   Abend, also drei eigenstaendige Zeilen und keine Aufzaehlungspunkte. */
.kurse-v1 .prog-teile {
  list-style: none;
  padding-left: 0;
  margin: var(--gap-lg) 0 0;
}
.kurse-v1 .prog-teile li {
  padding-block: 14px;
  border-top: 1px solid var(--rule-soft);
  font-size: var(--fs-body);
  color: var(--text-soft);
}
.kurse-v1 .prog-teil-titel {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.2;
  color: var(--ink);
}

/* ── Handlungsspalte ─────────────────────────────────────────────────────────
   /angebot schliesst jeden Zweig mit einem Knopf ab; hier schliesst jedes
   Angebot mit einer Handlung ab — wer den CHF-2'500-Workshop gelesen hat,
   musste vorher bis zum Seitenende scrollen.

   Zwei Dichten, und die Dichte kommt aus dem Inhalt, nicht aus der Laune:

     mit eigenen Eckdaten  → volles Panel (Flaeche, Rahmen, 2px Kupferkante)
     ohne eigene Eckdaten  → nur Kupferkante und Link, keine Flaeche

   Die drei Referate teilen alle Eckdaten mit der Gruppe, haben also keine
   eigenen — sie bekommen die leichte Form. Drei identische leere Kaesten
   nebeneinander waeren eine Behauptung. Dass die teureren Angebote das
   schwerere Panel tragen, ist genau die Verbindlichkeitsstufe, nach der die
   Seite ohnehin sortiert ist. */
.kurse-v1 .prog-side {
  align-self: start;
  display: grid;
  gap: var(--gap-md);
}
.kurse-v1 .prog-side--panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--accent-deep);
  padding: var(--gap-md);
}
@media (min-width: 1040px) {
  /* Der Workshop-Eintrag ist lang; das Panel laeuft mit, statt oben
     stehenzubleiben und den Rest der Spalte leer zu lassen. */
  .kurse-v1 .prog-side {
    position: sticky;
    top: calc(var(--header-h) + var(--gap-md));
  }
}

/* Eigene Eckdaten des Angebots. Gestapelt, nicht dt links / dd rechts: die
   Spalte ist ~250px breit, und «08.30 – ca. 16.00 Uhr» in der Display-Schrift
   rechtsbuendig bricht dort auf zwei ausgefranste Zeilen. Gestapelt ist es
   ausserdem dieselbe Form wie in der breiten Leiste ueber der Gruppe — zweimal
   dasselbe Bauteil statt zweier Varianten. */
.kurse-v1 .prog-fakten {
  margin: 0;
}
.kurse-v1 .prog-fakt {
  display: grid;
  gap: 2px;
  padding-block: 11px;
  border-bottom: 1px solid var(--rule-soft);
}
.kurse-v1 .prog-fakt:first-child {
  padding-top: 0;
}
.kurse-v1 .prog-fakt dt {
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.kurse-v1 .prog-fakt dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.15;
  color: var(--ink);
}
/* Der Umfang des Workshops ist der einzige Wert, der ueber eine Zeile
   hinausgeht — in der Display-Schrift wuerde er den Preis erschlagen. */
.kurse-v1 .prog-fakt--lang dd {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-soft);
}

.kurse-v1 .prog-act {
  display: grid;
  gap: var(--gap-xs);
  justify-items: start;
}
/* Leichte Form: keine Flaeche, nur die Kupferkante */
.kurse-v1 .prog-side:not(.prog-side--panel) .prog-act {
  padding-top: var(--gap-sm);
  border-top: 2px solid var(--accent-deep);
}
/* Schwere Form: die Kante hat schon das Panel, hier trennt eine Haarlinie */
.kurse-v1 .prog-side--panel .prog-act {
  padding-top: var(--gap-md);
  border-top: 1px solid var(--rule);
}
.kurse-v1 .prog-act-label {
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.kurse-v1 .prog-act-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--accent-text);
  border-bottom: 1px solid var(--accent-deep);
  padding-bottom: 2px;
  transition: gap var(--dur) var(--ease);
}
.kurse-v1 .prog-act-link:hover {
  gap: 16px;
}

/* ── Graphic Recording im Angebot ────────────────────────────────────────────
   Das Blatt lag vorher in einem weissen Passepartout mitten in der Textspalte
   und riss dort ein Loch. Jetzt liegt es auf der Panelflaeche mit
   Kupferkante — dasselbe Bauteil wie die Eckdaten, also dieselbe Sprache.
   Weiterhin ohne Beschnitt: es ist eine Zeichnung, kein Foto. */
.kurse-v1 .kurse-bild {
  margin: var(--gap-lg) 0 0;
  padding: var(--gap-md);
  max-width: 52ch;
  background: var(--panel);
  border-top: 2px solid var(--accent-deep);
}
.kurse-v1 .kurse-bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}
.kurse-v1 .kurse-bild figcaption {
  margin-top: var(--gap-sm);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ── «Mehr lesen» ────────────────────────────────────────────────────────────
   Im PDF gelb markiert. Ein Nachtrag innerhalb eines Angebots, kein
   eingeklapptes Angebot — deshalb sitzt der Schalter unter dem Text und
   nicht am Titel. */
.kurse-v1 .prog-mehr {
  margin-top: var(--gap-lg);
  padding-top: var(--gap-md);
  border-top: 1px solid var(--rule);
}
.kurse-v1 .prog-mehr-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--gap-md);
  align-items: start;
  cursor: pointer;
  list-style: none;
}
.kurse-v1 .prog-mehr-summary::-webkit-details-marker {
  display: none;
}
.kurse-v1 .prog-mehr-titel {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.kurse-v1 .prog-mehr-schalter {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding-top: 4px;
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent-text);
}
.kurse-v1 .prog-mehr-kreuz {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}
.kurse-v1 .prog-mehr-kreuz::before,
.kurse-v1 .prog-mehr-kreuz::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}
.kurse-v1 .prog-mehr-kreuz::after {
  transform: rotate(90deg);
}
.kurse-v1 .prog-mehr[open] .prog-mehr-kreuz::after {
  transform: rotate(0deg);
}
.kurse-v1 .prog-mehr-zu {
  display: none;
}
.kurse-v1 .prog-mehr[open] .prog-mehr-auf {
  display: none;
}
.kurse-v1 .prog-mehr[open] .prog-mehr-zu {
  display: inline;
}
.kurse-v1 .prog-mehr[open] .prog-mehr-schalter {
  color: var(--text-faint);
}
.kurse-v1 .prog-mehr-body {
  padding-top: var(--gap-xs);
  animation: prog-unfold var(--dur) var(--ease);
}
@keyframes prog-unfold {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kurse-v1 .prog-mehr-body {
    animation: none;
  }
}
.kurse-v1 .prog-mehr-outro {
  margin-top: var(--gap-md);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h4);
  line-height: 1.25;
  color: var(--ink);
}
@media (max-width: 559px) {
  .kurse-v1 .prog-mehr-auf,
  .kurse-v1 .prog-mehr-zu {
    display: none;
  }
  .kurse-v1 .prog-mehr[open] .prog-mehr-zu {
    display: none;
  }
}

/* ── Zitate ──────────────────────────────────────────────────────────────────
   Zwei Stueck, bewusst verschieden behandelt. Der Leitsatz ist das Scharnier
   zwischen den beiden Verbindlichkeitsstufen und steht mittig auf eigenem
   Grund; das Schlusszitat ist eine Coda zum Workshop und laeuft linksbuendig
   in dessen Spalte mit. Zwei gleich gesetzte Zitate hintereinander lesen
   sich wie ein Versehen.

   Der kurze Strich ueber dem Leitsatz ist die einzige Stelle der Seite, an
   der Kupfer markiert statt strukturiert — deshalb ist es genau ein Strich. */
.kurse-v1 .prog-leitsatz {
  padding-block: var(--gap-xl);
}
.kurse-v1 .prog-leitsatz figure {
  max-width: 60ch;
  margin: 0 auto;
  text-align: center;
}
.kurse-v1 .prog-leitsatz figure::before {
  content: "";
  display: block;
  width: 72px;
  height: 2px;
  margin: 0 auto var(--gap-lg);
  background: var(--accent-deep);
}
.kurse-v1 .prog-leitsatz blockquote {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-style: italic;
  line-height: 1.22;
  color: var(--ink);
  text-wrap: balance;
}
.kurse-v1 .prog-leitsatz figcaption,
.kurse-v1 .prog-coda figcaption {
  margin-top: var(--gap-md);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.kurse-v1 .prog-coda {
  margin-top: var(--gap-lg);
  max-width: 52ch;
  padding-left: var(--gap-md);
  border-left: 2px solid var(--accent-deep);
}
.kurse-v1 .prog-coda blockquote {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-style: italic;
  line-height: 1.3;
  color: var(--ink);
}
.kurse-v1 .prog-coda figcaption {
  margin-top: var(--gap-sm);
}

/* ── Seitenbild ──────────────────────────────────────────────────────────────
   «Auf zu neuen Ufern» — der Bug eines Boots mit offenem Horizont, also genau
   der Satz, der ueber dem Hero steht.

   Oben in der Seite verankert und nach unten ausgeblendet, NICHT fixiert
   ueber dem ganzen Viewport. Drei Gruende:
   - Ein fixiertes Vollbild steht beim Scrollen still, waehrend der Text
     darueber laeuft. Jede Zeile bekommt einen anderen Untergrund, und die
     dunkle Bordwand wandert irgendwann unter die Schrift.
   - Es lag damit auch hinter dem Footer, der zu allen anderen Seiten
     identisch bleiben soll. `.kurse-v1` umfasst den Footer nicht — als
     absolutes Kind endet das Bild zuverlaessig davor.
   - `background-size: cover` auf einer 6000px hohen Flaeche zoomt das Motiv
     ins Unkenntliche. Ueber ein Band von knapp einer Bildschirmhoehe steht
     es in seinen eigenen Proportionen.

   Der Verlauf haelt die volle Deckkraft nur oben, wo hinter dem Hero Himmel
   und Wasser liegen; ab der Haelfte laeuft er aus, sodass die langen
   Fliesstexte weiter unten auf reinem Papier stehen. */
.kurse-v1 {
  position: relative;
  isolation: isolate;
}
.kurse-v1::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(520px, 76vh, 880px);
  z-index: -1;
  background: url("/static/images/neue-ufer.webp") center 62% / cover no-repeat;
  opacity: 0.32;
  filter: saturate(0.55) brightness(1.14);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 46%,
    transparent 100%
  );
  mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 100%);
}
/* Schmale Viewports: der Text laeuft ueber die volle Breite, das Motiv also
   direkt unter den Zeilen — dort weiter zurueckgenommen. */
@media (max-width: 900px) {
  .kurse-v1::before {
    opacity: 0.2;
  }
}