/* 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;}
.sticky{position:sticky;}
.mx{margin-left:1rem;margin-right:1rem;}
.inline{display:inline;}
.block{display:block;}
.hidden{display:none;}
.resize{resize:both;}
.b{border-width:1px;}
.px{padding-left:1rem;padding-right:1rem;}
.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);
}

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

/* ─── 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. */
.angebot-v2 .ang-fork {
  background: var(--paper-warm);
  border-block: 3px solid var(--accent-deep);
  padding-block: var(--gap-md);
}
.angebot-v2 .ang-fork-label {
  margin-bottom: var(--gap-sm);
}
.angebot-v2 .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. */
.angebot-v2 .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);
}
.angebot-v2 .ang-path + .ang-path {
  border-top: 1px solid var(--rule);
}
.angebot-v2 .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);
}
.angebot-v2 .ang-path:hover {
  background: color-mix(in srgb, var(--accent-deep) 9%, transparent);
}
.angebot-v2 .ang-path:hover::after {
  transform: scaleX(1);
}
.angebot-v2 .ang-path-title {
  font-size: var(--fs-h3);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.angebot-v2 .ang-path-who {
  font-size: var(--fs-body);
  color: var(--text-soft);
  max-width: 34ch;
  text-wrap: balance;
}
.angebot-v2 .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);
}
.angebot-v2 .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);
}
.angebot-v2 .ang-path-arrow {
  transition: transform var(--dur) var(--ease);
}
.angebot-v2 .ang-path:hover .ang-path-arrow {
  transform: translateY(4px);
}
@media (min-width: 720px) {
  .angebot-v2 .ang-fork-grid {
    grid-template-columns: 1fr 1fr;
  }
  .angebot-v2 .ang-path {
    margin-inline: 0;
    padding-inline: 0 var(--gap-lg);
  }
  .angebot-v2 .ang-path::after {
    left: 0;
    right: var(--gap-lg);
  }
  .angebot-v2 .ang-path + .ang-path {
    border-top: none;
    border-left: 1px solid var(--rule);
    padding-inline: var(--gap-lg) 0;
  }
  .angebot-v2 .ang-path + .ang-path::after {
    left: var(--gap-lg);
    right: 0;
  }
  .angebot-v2 .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;
  }
}

/* ─── Kurse & Referate (scoped unter .kurse-v1) ──────────────────────────── */
.kurse-v1 .bg-paper {
  background: var(--paper);
}
.kurse-v1 .bg-warm {
  background: var(--paper-warm);
}
.kurse-v1 h2.serif {
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin-top: var(--gap-sm);
}
.kurse-v1 .lead {
  font-size: var(--fs-lead);
  color: var(--text-soft);
  max-width: 56ch;
  margin-top: var(--gap-md);
}

/* Leitsatz */
/* Kompakter Hero — die Tab-Leiste soll ohne Scrollen 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;
}
.kurse-v1 #formate {
  padding-top: var(--gap-lg);
}

/* Leitsatz-Band: flach gehalten (UA-Margins von figure/blockquote raus) */
.kurse-v1 .kp-quote-band {
  padding-block: var(--gap-md);
}
.kurse-v1 .kp-quote {
  max-width: 62ch;
  margin: 0 auto;
  text-align: center;
  padding-block: var(--gap-md);
  border-top: 1px solid var(--accent-deep);
  border-bottom: 1px solid var(--accent-deep);
}
.kurse-v1 .kp-quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-style: italic;
  color: var(--ink);
  line-height: 1.22;
  text-wrap: balance;
}
.kurse-v1 .kp-quote figcaption {
  margin-top: var(--gap-md);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Sub-Nav — Tabs über :target, damit /kurse#referate direkt verlinkbar bleibt */
/* --subnav-h: Hoehe der Tab-Leiste inkl. Abstand, fuer scroll-margin der Panels */
.kurse-v1 .kp-tabs {
  margin-top: var(--gap-md);
  --subnav-h: 280px;
}
.kurse-v1 .tabs-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: var(--gap-xl);
}
.kurse-v1 .tab-label {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  padding: var(--gap-sm) var(--gap-md) var(--gap-sm) 0;
  position: relative;
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.kurse-v1 .tab-label:nth-child(2n) {
  border-right: none;
  padding-left: var(--gap-md);
}
.kurse-v1 .tab-label:nth-child(n+3) {
  border-bottom: none;
  padding-top: var(--gap-md);
}
.kurse-v1 .tab-num {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-style: italic;
  color: var(--text-faint);
  transition: color var(--dur) var(--ease);
}
.kurse-v1 .tab-title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--text-faint);
  letter-spacing: -0.015em;
  line-height: 1.05;
  transition: color var(--dur) var(--ease);
}
.kurse-v1 .tab-sub {
  display: none;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color var(--dur) var(--ease);
}
.kurse-v1 .tab-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--accent-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.kurse-v1 .tab-label:hover .tab-title {
  color: var(--text-soft);
}
@media (min-width: 860px) {
  /* Ab hier ist die Leiste flach genug, um mitzulaufen */
  .kurse-v1 .kp-tabs {
    --subnav-h: 200px;
  }
  .kurse-v1 .tabs-nav {
    grid-template-columns: repeat(4, 1fr);
    position: sticky;
    top: var(--header-h);
    z-index: 5;
  }
  .kurse-v1 .tab-label,
  .kurse-v1 .tab-label:nth-child(2n),
  .kurse-v1 .tab-label:nth-child(n+3) {
    padding: var(--gap-md) var(--gap-sm);
    border-bottom: none;
    border-right: 1px solid var(--rule-soft);
  }
  .kurse-v1 .tab-label:last-child {
    border-right: none;
  }
  .kurse-v1 .tab-sub {
    display: block;
  }
}

/* Aktiver Tab — erster Tab, solange kein Panel adressiert ist */
:is(
  .kurse-v1 .kp-tabs:not(:has(.tab-panel:target)) .tab-label:first-child,
  .kurse-v1 .kp-tabs:has(#themen-kurse:target) .tab-label[href="#themen-kurse"],
  .kurse-v1 .kp-tabs:has(#referate:target) .tab-label[href="#referate"],
  .kurse-v1
    .kp-tabs:has(#firmen-workshops:target)
    .tab-label[href="#firmen-workshops"],
  .kurse-v1
    .kp-tabs:has(#praxis-vertiefung:target)
    .tab-label[href="#praxis-vertiefung"]
)
  .tab-title {
  color: var(--ink);
}
:is(
  .kurse-v1 .kp-tabs:not(:has(.tab-panel:target)) .tab-label:first-child,
  .kurse-v1 .kp-tabs:has(#themen-kurse:target) .tab-label[href="#themen-kurse"],
  .kurse-v1 .kp-tabs:has(#referate:target) .tab-label[href="#referate"],
  .kurse-v1
    .kp-tabs:has(#firmen-workshops:target)
    .tab-label[href="#firmen-workshops"],
  .kurse-v1
    .kp-tabs:has(#praxis-vertiefung:target)
    .tab-label[href="#praxis-vertiefung"]
)
  .tab-num {
  color: var(--accent-text);
}
:is(
  .kurse-v1 .kp-tabs:not(:has(.tab-panel:target)) .tab-label:first-child,
  .kurse-v1 .kp-tabs:has(#themen-kurse:target) .tab-label[href="#themen-kurse"],
  .kurse-v1 .kp-tabs:has(#referate:target) .tab-label[href="#referate"],
  .kurse-v1
    .kp-tabs:has(#firmen-workshops:target)
    .tab-label[href="#firmen-workshops"],
  .kurse-v1
    .kp-tabs:has(#praxis-vertiefung:target)
    .tab-label[href="#praxis-vertiefung"]
)
  .tab-sub {
  color: var(--text-soft);
}
:is(
  .kurse-v1 .kp-tabs:not(:has(.tab-panel:target)) .tab-label:first-child,
  .kurse-v1 .kp-tabs:has(#themen-kurse:target) .tab-label[href="#themen-kurse"],
  .kurse-v1 .kp-tabs:has(#referate:target) .tab-label[href="#referate"],
  .kurse-v1
    .kp-tabs:has(#firmen-workshops:target)
    .tab-label[href="#firmen-workshops"],
  .kurse-v1
    .kp-tabs:has(#praxis-vertiefung:target)
    .tab-label[href="#praxis-vertiefung"]
)::after {
  transform: scaleX(1);
}

/* Panels */
.kurse-v1 .tab-panel {
  display: none;
  scroll-margin-top: calc(var(--header-h) + var(--subnav-h));
}
.kurse-v1 .tab-panel:target {
  display: block;
}
.kurse-v1 .panels:not(:has(.tab-panel:target)) .tab-panel:first-child {
  display: block;
}
.kurse-v1 .tab-panel:target,
.kurse-v1 .panels:not(:has(.tab-panel:target)) .tab-panel:first-child {
  animation: kp-unfold var(--dur) var(--ease);
}
@supports not selector(:has(*)) {
  .kurse-v1 .tab-panel {
    display: block;
  }
  .kurse-v1 .tabs-nav {
    position: static;
  }
}

/* Panel-Intro */
.kurse-v1 .kp-intro {
  max-width: 62ch;
}

/* Einträge — «Hier aufklappen» */
.kurse-v1 .kp-list {
  margin-top: var(--gap-lg);
}
.kurse-v1 .kp-item {
  display: block;
  border-top: 1px solid var(--rule);
  padding-block: var(--gap-md);
  /* Direktlinks wie /kurse#zahlenlehre nicht unter den fixen Header schieben */
  scroll-margin-top: calc(var(--header-h) + var(--gap-md));
}
.kurse-v1 .kp-item:last-child {
  border-bottom: 1px solid var(--rule);
}
.kurse-v1 .kp-title {
  display: block;
  font-size: var(--fs-h4);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.kurse-v1 .kp-sub {
  display: block;
  margin-top: var(--gap-xs);
  font-size: var(--fs-body);
  font-style: italic;
  color: var(--text-soft);
  max-width: 52ch;
}

/* Summary-Zeile */
.kurse-v1 .kp-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--gap-md);
  align-items: start;
  cursor: pointer;
  list-style: none;
}
.kurse-v1 .kp-summary .kp-title {
  grid-area: 1 / 1;
}
.kurse-v1 .kp-summary .kp-toggle {
  grid-area: 1 / 2;
}
.kurse-v1 .kp-summary .kp-sub {
  grid-area: 2 / 1;
}
.kurse-v1 .kp-summary::-webkit-details-marker {
  display: none;
}
.kurse-v1 .kp-toggle {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  color: var(--accent-text);
  white-space: nowrap;
  padding-top: 4px;
}
.kurse-v1 .kp-toggle-txt {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.kurse-v1 .kp-plus {
  position: relative;
  width: 18px;
  height: 18px;
  flex: none;
}
.kurse-v1 .kp-plus::before,
.kurse-v1 .kp-plus::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}
.kurse-v1 .kp-plus::after {
  transform: rotate(90deg);
}
.kurse-v1 .kp-item--fold[open] .kp-plus::after {
  transform: rotate(0deg);
}
.kurse-v1 .kp-toggle-close {
  display: none;
}
.kurse-v1 .kp-item--fold[open] .kp-toggle-open {
  display: none;
}
.kurse-v1 .kp-item--fold[open] .kp-toggle-close {
  display: inline;
}
.kurse-v1 .kp-item--fold[open] .kp-toggle-txt {
  color: var(--text-faint);
}
.kurse-v1 .kp-item--fold[open] .kp-title {
  color: var(--accent-text);
}
@media (max-width: 559px) {
  .kurse-v1 .kp-toggle-txt {
    display: none;
  }
}

/* Aufgeklappter Inhalt */
.kurse-v1 .kp-body {
  max-width: 62ch;
}
.kurse-v1 .kp-item--fold .kp-body {
  padding-top: var(--gap-md);
  animation: kp-unfold var(--dur) var(--ease);
}
@keyframes kp-unfold {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.kurse-v1 .kp-item:not(.kp-item--fold) .kp-body {
  padding-top: var(--gap-md);
}
.kurse-v1 .kp-text {
  color: var(--text-soft);
  font-size: var(--fs-body);
}
.kurse-v1 .sub-label {
  display: block;
  margin-top: var(--gap-lg);
  margin-bottom: var(--gap-sm);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.kurse-v1 .kp-points {
  list-style: none;
}
.kurse-v1 .kp-points li {
  position: relative;
  padding-left: 30px;
  padding-block: 10px;
  border-top: 1px solid var(--rule-soft);
  color: var(--text-soft);
  font-size: var(--fs-body);
}
.kurse-v1 .kp-points li:first-child {
  border-top: none;
}
.kurse-v1 .kp-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  width: 18px;
  height: 2px;
  background: var(--accent-deep);
}

/* Ausgleich / Eckdaten */
.kurse-v1 .kp-rows {
  margin-top: var(--gap-lg);
  border-top: 1px solid var(--rule);
}
.kurse-v1 .kp-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gap-md);
  padding-block: 11px;
  border-bottom: 1px solid var(--rule-soft);
}
.kurse-v1 .kp-row dt {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.kurse-v1 .kp-row dd {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--ink);
  text-align: right;
}
.kurse-v1 .kp-note,
.kurse-v1 .kp-groupnote {
  margin-top: var(--gap-md);
  font-size: var(--fs-eyebrow);
  line-height: 1.6;
  color: var(--text-faint);
  max-width: 62ch;
}
.kurse-v1 .kp-groupnote {
  margin-top: var(--gap-lg);
  font-style: italic;
}