/* =====================================================================
   VEBT · Designsystem v4 (Redesign 31.10.2026)
   Markenfarben aus dem Logo: Mint #6CBE99, Beere #A3195B, Gold #D4A114, Anthrazit #353533.
   Grundlage: Frederiks Vorlage „v2-organic“ (Creme, weiche Blob-Flächen, organisches Hero-Foto, Karten mit Foto,
   Zahlenleiste, Schritt-Kreise mit Linie, grüner Abschluss) – erwachsen weiterentwickelt in VEBT-Farben:
   Mint dunkel = Handlung, Beere = Akzent, Gold = Abschluss-Knopf, feste Modulfarben (--m1 … --m5).
   Bewegung wie in der Vorlage: sanftes Einblenden, leichter Bildzoom, Zahlen zählen, Lernweg-Linie. Nicht mehr.
   ===================================================================== */

@font-face { font-family: "Roboto"; src: url("/assets/fonts/roboto-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/assets/fonts/roboto-latin-wght-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Serif"; src: url("/assets/fonts/roboto-serif-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Serif"; src: url("/assets/fonts/roboto-serif-latin-wght-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }


:root {
  /* Marke */
  --mint: #6cbe99;
  --mint-deep: #23704f;      /* Mint für Text auf Hell (Kontrast AA) */
  --mint-soft: #e6f1e9;
  --berry: #a3195b;
  --berry-dark: #82124a;
  --berry-soft: #f9e6ef;
  --gold: #d4a114;
  --gold-deep: #7d5f06;      /* Gold für Text auf Hell */
  --gold-soft: #fbf2d6;
  --anthrazit: #353533;
  --highlight: #fff86b;      /* nur für Markierungen */

  /* Flächen & Text */
  --paper: #f4efe7;
  --paper-2: #efe9df;
  --white: #fffcf7;
  --ink: #353533;
  --ink-soft: #62625e;
  --line: rgba(53, 53, 51, .12);

  /* alte Namen (Formulare, Admin-Vorschau, Artikel) zeigen auf die Marke */
  --green: var(--mint); --green-deep: var(--mint-deep); --green-soft: var(--mint-soft);
  --card: var(--white); --sand: var(--gold-soft);

  --font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-serif: "Roboto Serif", Georgia, "Times New Roman", serif;

  --r-sm: 12px; --r: 20px; --r-lg: 24px; --r-pill: 999px;
  --organic-1: 30% 70% 60% 40% / 50% 40% 60% 50%;
  --organic-2: 40% 60% 55% 45% / 50% 40% 60% 50%;
  --organic-3: 60% 40% 45% 55% / 40% 60% 40% 60%;
  /* Modulfarben (feste Farbcodierung der 5 Module) */
  --m1: #6cbe99; --m2: #a3195b; --m3: #d4a114; --m4: #353533; --m5: #2f8f6a;
  --shadow-sm: 0 6px 24px rgba(0, 0, 0, .05);
  --shadow: 0 8px 32px rgba(0, 0, 0, .06);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .10);
  --wrap: 1160px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --header-h: 78px;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.7; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
html { overflow-x: clip; }
img, svg { max-width: 100%; display: block; }
picture { display: contents; }
a { color: var(--mint-deep); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--berry); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--highlight); color: var(--ink); }
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: 1.14; letter-spacing: -.01em; margin: 0 0 .5em; color: var(--ink); overflow-wrap: break-word; hyphens: manual; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); }
h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 1.6vw, 1.4rem); }
p { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.2em; }
strong { font-weight: 650; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 300; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); }
.skip:focus { top: 12px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 820px; }
.icon { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- Typo-Bausteine ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: .6em; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--berry); margin: 0 0 1rem; }
.lead { font-size: clamp(1.1rem, 1.5vw, 1.27rem); color: var(--ink-soft); max-width: 50ch; }
.mark { background: linear-gradient(transparent 60%, rgba(212, 161, 20, .35) 60%); padding: 0 .08em; }
.accent { color: var(--mint-deep); }
.accent--berry { color: var(--berry); }
.accent--mint { color: var(--mint-deep); }
.muted { color: var(--ink-soft); }
.small { font-size: .9rem; }
.center { text-align: center; }
.center .lead, .center.lead { margin-left: auto; margin-right: auto; }
.center-actions { justify-content: center; margin-top: 36px; }

/* Hervorhebung eines Schlüsselworts: nur Farbe, keine Effekte */
.squiggle { white-space: nowrap; }


/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding: 1em 2em; border-radius: var(--r-pill); font-family: var(--font-sans); font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s, color .3s, border-color .3s; }
.btn .icon { transition: transform .35s var(--ease); }
.btn:hover .icon:last-child { transform: translateX(4px); }
.btn--primary { background: var(--mint-deep); color: #fff; box-shadow: 0 8px 24px rgba(35, 112, 79, .25); }
.btn--primary:hover { background: #1b5c40; color: #fff; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(35, 112, 79, .32); }
.btn--secondary { background: transparent; color: var(--mint-deep); border-color: var(--mint); }
.btn--secondary:hover { background: var(--mint-deep); color: #fff; border-color: var(--mint-deep); transform: translateY(-2px); }
.btn--mint { background: var(--mint); color: var(--ink); box-shadow: 0 10px 26px rgba(108, 190, 153, .35); }
.btn--mint:hover { background: #5fb08b; color: var(--ink); transform: translateY(-2px); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: #e2b231; color: var(--ink); transform: translateY(-2px); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { color: var(--berry); transform: translateY(-2px); }
.btn--ghost { padding-left: 0; padding-right: 0; color: var(--mint-deep); border: 0; background: none; }
.btn--ghost:hover { color: var(--berry); }
.btn--sm { padding: .66em 1.2em; font-size: .92rem; }
.btn--block { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(244, 239, 231, .92); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid rgba(108, 190, 153, .16); transition: box-shadow .3s; }
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 6px 24px rgba(53, 53, 51, .06); }
.site-header__inner { display: flex; align-items: center; gap: 22px; height: var(--header-h); transition: height .35s var(--ease); }
.site-header.is-scrolled .site-header__inner { height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand__logo { height: 42px; width: auto; transition: height .35s var(--ease), transform .5s var(--ease); }
.site-header.is-scrolled .brand__logo { height: 34px; }
.brand__text { font-size: .72rem; line-height: 1.25; color: var(--ink-soft); max-width: 150px; padding-left: 12px; border-left: 1px solid var(--line); }
.nav__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__list a { position: relative; display: block; padding: 8px 11px; white-space: nowrap; font-size: .93rem; font-weight: 500; color: var(--ink); text-decoration: none; }
.nav__list a::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--mint); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav__list a:hover { color: var(--mint-deep); }
.nav__list a:hover::after, .nav__list a[aria-current="page"]::after { transform: scaleX(1); }
.nav__list a[aria-current="page"] { color: var(--mint-deep); }
.site-header__cta { display: flex; align-items: center; gap: 10px; }
.menu-toggle { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }
.menu-toggle .icon { width: 22px; height: 22px; }
.mobile-nav { padding: 8px 24px 28px; border-top: 1px solid var(--line); background: var(--paper); }
.mobile-nav ul { list-style: none; margin: 0 0 18px; padding: 0; }
.mobile-nav a:not(.btn) { display: block; padding: 12px 0; font-family: var(--font-serif); font-size: 1.3rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }

/* ---------- Abschnitte ---------- */
.section { position: relative; overflow: clip; padding: clamp(64px, 8vw, 110px) 0; }
/* Keine harten Kanten (Frederik 04.11.): helle Flächen laufen oben und unten weich in den Seitengrund aus,
   dunkle Flächen (Anthrazit, Beere) stehen als abgerundete Insel mit etwas Rand statt als harte Vollbreite. */
.section--white, .section--paper2, .section--tint, .section--mint, .section--gold { --fade: clamp(48px, 6vw, 100px); background: linear-gradient(180deg, var(--paper) 0, var(--sec) var(--fade), var(--sec) calc(100% - var(--fade)), var(--paper) 100%); }
.section--ink, .section--dark, .section--berry { margin: clamp(16px, 2vw, 28px) clamp(8px, 1.6vw, 24px); border-radius: clamp(24px, 3vw, 40px); }
.section--tight { padding: clamp(48px, 6vw, 76px) 0; }
.section--white { --sec: var(--white); }
.section--paper2 { --sec: var(--paper-2); }
.section--tint, .section--mint { --sec: var(--mint-soft); }
.section--gold { --sec: var(--gold-soft); }
.section--ink, .section--dark { background-color: var(--anthrazit); color: #ecebe7; }
.section--ink h2, .section--ink h3, .section--dark h2, .section--dark h3 { color: #fff; }
.section--ink .lead, .section--ink .muted, .section--dark .lead, .section--dark .muted { color: rgba(236, 235, 231, .78); }
.section--ink .eyebrow, .section--dark .eyebrow { color: var(--mint); }
.section--ink a:not(.btn) { color: var(--mint); }
.section--berry { background-color: var(--berry); color: #fff; }
.section--berry h2, .section--berry h3 { color: #fff; }
.section--berry .lead, .section--berry .muted { color: rgba(255, 255, 255, .86); }
.section--berry .eyebrow { color: var(--gold-soft); }
.section__head { max-width: 720px; margin: 0 auto clamp(40px, 5vw, 56px); text-align: center; }
.section__head .lead { margin-left: auto; margin-right: auto; }
.section__head--left { margin-left: 0; text-align: left; }
.section__head--left .lead { margin-left: 0; }
.blob { position: absolute; z-index: 0; pointer-events: none; opacity: .11; border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
.blob--mint { background: var(--mint); } .blob--gold { background: var(--gold); } .blob--berry { background: var(--berry); opacity: .06; }
.blob--tr { width: 500px; height: 500px; top: -120px; right: -160px; }
.blob--bl { width: 380px; height: 380px; bottom: -100px; left: -140px; border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%; }
.blob--ml { width: 320px; height: 320px; top: 40%; left: -140px; border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%; }
.blob--br { width: 420px; height: 420px; bottom: -120px; right: -100px; border-radius: 50% 60% 40% 70% / 60% 40% 50% 50%; }
.hero > .wrap, .section > .wrap { position: relative; z-index: 1; }
.section__head.center { margin-left: auto; margin-right: auto; }
.section > .wrap { position: relative; z-index: 1; }
/* ---------- Hero ---------- */
.hero { position: relative; overflow: clip; padding: clamp(48px, 7vw, 100px) 0 clamp(56px, 7vw, 90px); }
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.hero h1 { margin-bottom: .42em; }
.hero h1 .line { display: block; }
.hero .lead { margin-bottom: 2rem; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 30px 0 0; padding: 0; list-style: none; font-size: .93rem; color: var(--ink-soft); }
.hero__meta li { display: inline-flex; align-items: center; gap: 8px; }
.hero__meta .icon { color: var(--mint-deep); }
.hero--sub { padding-bottom: clamp(56px, 7vw, 96px); }
.hero--sub h1 { font-size: clamp(2.2rem, 4vw, 3.3rem); }

/* Foto im Hero: ruhiges Rechteck mit sanften Ecken, kleiner Faktenkasten */
.hero-photo { position: relative; margin: 0; }
.hero-photo__img { aspect-ratio: 4 / 3.4; border-radius: var(--organic-1); overflow: hidden; background: var(--mint-soft); box-shadow: var(--shadow-lg); }
.hero-photo__img img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo__img--top img { object-position: 50% 18%; }
.hero-photo__fact { position: absolute; left: -12px; bottom: -6px; display: flex; gap: 12px; align-items: center; padding: 14px 18px; background: var(--white); border-radius: var(--r); box-shadow: var(--shadow); font-size: .88rem; line-height: 1.3; max-width: 260px; }
.hero-photo__fact strong { display: block; font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; color: var(--ink); }
.hero-photo__fact .icon { width: 26px; height: 26px; color: var(--berry); }
.hero-photo__accent { display: none; }

/* ---------- Zahlenleiste (Vorlage „Trust“) ---------- */
.trust { background: linear-gradient(180deg, var(--paper), var(--white) 30%, var(--white) 70%, var(--paper)); padding: clamp(40px, 5vw, 60px) 0; }
.stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px clamp(40px, 7vw, 90px); }
.stat { text-align: center; }
.stat__num { font-family: var(--font-serif); font-size: clamp(2.2rem, 3.6vw, 2.8rem); font-weight: 700; color: var(--mint-deep); line-height: 1; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.stat:nth-child(2) .stat__num { color: var(--berry); } .stat:nth-child(3) .stat__num { color: var(--gold-deep); } .stat:nth-child(4) .stat__num { color: var(--ink); }
.stat__label { font-size: .95rem; font-weight: 600; color: var(--ink-soft); max-width: 22ch; margin: 0 auto; }
.trust__note { text-align: center; margin: 22px 0 0; }

/* ---------- Karten mit Foto oben (Vorlage „service-card“) ---------- */
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 0; padding: 0; list-style: none; }
.steps3 > li { background: var(--white); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); transition: transform .4s ease, box-shadow .4s ease; }
.steps3 > li:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0, 0, 0, .1); }
.steps3__img { height: 210px; overflow: hidden; background: var(--mint-soft); }
.steps3__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.steps3 > li:hover .steps3__img img { transform: scale(1.05); }
.steps3 h3 { display: flex; align-items: center; gap: 12px; padding: 26px 28px 0; font-size: 1.4rem; }
.steps3 p { color: var(--ink-soft); padding: 0 28px 28px; margin: 0; }
.num { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; font-family: var(--font-sans); font-size: .95rem; font-weight: 700; background: var(--ink); color: #fff; }
.num--1 { background: var(--m1); color: var(--ink); } .num--2 { background: var(--m2); } .num--3 { background: var(--m3); color: var(--ink); } .num--4 { background: var(--m4); } .num--5 { background: var(--m5); }

/* ---------- Vergleich ---------- */
.worlds { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); }
.worlds__side { padding: clamp(28px, 3vw, 40px); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow); }
.worlds__side--vebt { background: linear-gradient(135deg, var(--mint-deep), #1b5c40); color: #eef6f1; }
.worlds__side--vebt h3 { color: #fff; }
.worlds__side h3 { font-size: 1.3rem; }
.worlds__side ul { list-style: none; padding: 0; margin: 0; }
.worlds__side li { padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.worlds__side li:last-child { border-bottom: 0; }
.worlds__side--vebt li { color: #ecebe7; border-color: rgba(255, 255, 255, .12); }
.worlds__bridge { display: none; }
.worlds__mark { display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; color: var(--ink-soft); }
.worlds__side--vebt .worlds__mark { color: var(--gold-soft); }

/* ---------- Lernweg (Module) – die eine Linie, die sich beim Scrollen zeichnet ---------- */
.journey { position: relative; }
.journey__line { position: absolute; left: 0; right: 0; top: 26px; height: 24px; width: 100%; z-index: 0; overflow: visible; }
.journey__line path { fill: none; stroke: var(--mint); stroke-opacity: .6; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: var(--len, 1600); stroke-dashoffset: calc(var(--len, 1600) * (1 - var(--progress, 0))); }
.journey__steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; margin: 0; padding: 0; list-style: none; }
.journey__dot { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 20px; border-radius: 50%; background: var(--m1); color: var(--ink); font-family: var(--font-serif); font-weight: 700; font-size: 1.6rem; border: 5px solid var(--paper); box-shadow: 0 8px 24px rgba(0, 0, 0, .1); }
.journey__step:nth-child(2) .journey__dot { background: var(--m2); color: #fff; }
.journey__step:nth-child(3) .journey__dot { background: var(--m3); }
.journey__step:nth-child(4) .journey__dot { background: var(--m4); color: #fff; }
.journey__step:nth-child(5) .journey__dot { background: var(--m5); color: #fff; }
.journey__step h3 { font-size: 1.08rem; margin-bottom: .35em; }
.journey__step p { font-size: .94rem; color: var(--ink-soft); margin-bottom: .4em; }
.journey__date { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.journey + .actions { margin-top: 40px; }

/* ---------- Nummerierte Liste senkrecht (Module, Ablauf) ---------- */
.timeline { margin: 0 auto; padding: 0; list-style: none; max-width: 860px; }
.timeline__item { display: grid; grid-template-columns: 52px 1fr; gap: 24px; padding: 28px 0; border-top: 1px solid var(--line); }
.timeline__item:first-child { border-top: 0; padding-top: 0; }
.timeline__dot { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 700; }
.timeline--modules .timeline__item:nth-child(1) .timeline__dot { background: var(--m1); color: var(--ink); }
.timeline--modules .timeline__item:nth-child(2) .timeline__dot { background: var(--m2); }
.timeline--modules .timeline__item:nth-child(3) .timeline__dot { background: var(--m3); color: var(--ink); }
.timeline--modules .timeline__item:nth-child(4) .timeline__dot { background: var(--m4); }
.timeline--modules .timeline__item:nth-child(5) .timeline__dot { background: var(--m5); }
.timeline__body h3 { margin-bottom: .3em; }
.timeline__body p { color: var(--ink-soft); margin-bottom: .5em; }
.timeline__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.timeline__result { font-size: .95rem; color: var(--ink); }
.timeline__media { margin-top: 18px; max-width: 520px; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; }
.timeline__media img { width: 100%; height: 100%; object-fit: cover; }
.section--ink .timeline__item { border-color: rgba(255, 255, 255, .12); }
.section--ink .timeline__dot { background: var(--mint); color: var(--ink); }
.section--ink .timeline__body p { color: rgba(236, 235, 231, .78); }

/* ---------- Bild-Text-Reihen ---------- */
.stack { display: grid; gap: clamp(48px, 6vw, 80px); }
.stack__card { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.stack__card:nth-child(even) .stack__media { order: -1; }
.stack__body h3 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); }
.stack__body p { color: var(--ink-soft); }
.stack__body .stack__num { font-family: var(--font-serif); font-size: 2.6rem; line-height: 1; font-weight: 600; color: var(--berry); margin-bottom: 12px; }
.stack__media { aspect-ratio: 3 / 2; border-radius: var(--r-lg); overflow: hidden; }
.stack__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Bilder ---------- */
.unveil { overflow: hidden; border-radius: var(--r-lg); position: relative; margin: 0; background: var(--paper-2); }
.unveil img { width: 100%; height: 100%; object-fit: cover; display: block; }
.unveil--wide { aspect-ratio: 21 / 9; }
.unveil--tall { aspect-ratio: 4 / 5; }
.unveil--square { aspect-ratio: 1; }

/* ---------- Vorteile als ruhige Liste ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(30px, 4vw, 56px); }
.features--2 { grid-template-columns: repeat(2, 1fr); }
.features--4 { grid-template-columns: repeat(4, 1fr); }
.feature { padding: 0; }
.feature__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--mint-soft); color: var(--mint-deep); margin-bottom: 16px; }
.feature:nth-child(3n+2) .feature__icon { background: var(--berry-soft); color: var(--berry); } .feature:nth-child(3n) .feature__icon { background: var(--gold-soft); color: var(--gold-deep); }
.section--mint .feature__icon { background: var(--white); }
.feature__icon .icon { width: 28px; height: 28px; }
.feature h3 { font-size: 1.25rem; }
.feature p, .feature li { color: var(--ink-soft); }
.feature ul { padding-left: 1.1em; margin: 0; }
.feature li { margin-bottom: 6px; }
.section--ink .feature p, .section--ink .feature li { color: rgba(236, 235, 231, .78); }
.section--ink .feature__icon { background: rgba(255, 255, 255, .08); color: var(--mint); }

/* ---------- Irrtum → Wirklichkeit ---------- */
.myths { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(26px, 4vw, 48px) clamp(30px, 5vw, 64px); }
.myth { padding-top: 22px; border-top: 1px solid var(--line); }
.myth__wrong { font-family: var(--font-serif); font-size: 1.18rem; color: var(--ink-soft); text-decoration: line-through; text-decoration-color: rgba(163, 25, 91, .6); text-decoration-thickness: 1.5px; }
.myth__right { margin-top: 10px; }

/* ---------- Portraits ---------- */
.duo-portraits { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.duo-portraits figure { margin: 0; }
.duo-portraits .unveil { aspect-ratio: 3 / 4; border-radius: var(--organic-2); box-shadow: var(--shadow-lg); }
.duo-portraits figure:nth-child(2) .unveil { border-radius: var(--organic-3); }
.duo-portraits figcaption { margin-top: 14px; }
.duo-portraits figcaption strong { display: block; font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; }
.duo-portraits figcaption span { color: var(--ink-soft); font-size: .92rem; }
.person { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.person + .person { margin-top: clamp(56px, 8vw, 96px); }
.person--rev > :first-child { order: 2; }
.person__photo { aspect-ratio: 3 / 4; border-radius: var(--organic-2); overflow: hidden; margin: 0; box-shadow: var(--shadow-lg); }
.person--rev .person__photo { border-radius: var(--organic-3); }
.person__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Medien neben Text ---------- */
.split-media { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: center; }
.split-media--rev > :first-child { order: 2; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.duo--rev > :first-child { order: 2; }


/* ---------- Karten (nur noch dort, wo sie Sinn haben) ---------- */
.grid { display: grid; gap: clamp(18px, 2.4vw, 30px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.card { position: relative; background: var(--white); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 36px); box-shadow: var(--shadow-sm); transition: transform .45s var(--ease), box-shadow .45s var(--ease); overflow: hidden; }
.card--hover:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0, 0, 0, .1); }
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }
.card__icon { display: inline-grid; place-items: center; width: 54px; height: 54px; margin-bottom: 18px; border-radius: 50%; background: var(--mint-soft); color: var(--mint-deep); }
.card__icon .icon { width: 26px; height: 26px; }
.card__link { display: inline-flex; align-items: center; gap: .4em; margin-top: 14px; font-weight: 600; text-decoration: none; color: var(--berry); }
.card__link::after { content: ""; position: absolute; inset: 0; }
.card--plain { background: transparent; box-shadow: none; padding: 0; }
.card--mint { background: var(--mint-soft); box-shadow: none; }
.card--module { background: transparent; box-shadow: none; padding: 0; }
.tag { display: inline-block; padding: .3em .9em; border-radius: var(--r-pill); background: var(--mint-soft); color: var(--mint-deep); font-size: .8rem; font-weight: 600; letter-spacing: .02em; }
.tag--gold { background: var(--gold-soft); color: var(--gold-deep); }
.tag--berry { background: var(--berry-soft); color: var(--berry); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }

/* Zielgruppen-Weiche mit Foto */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 36px); }
.path-card { position: relative; display: flex; flex-direction: column; border-radius: 34px; overflow: hidden; background: var(--white); text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.path-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0, 0, 0, .1); color: var(--ink); }
.path-card__media { aspect-ratio: 16 / 9; overflow: hidden; }
.path-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.path-card:hover .path-card__media img { transform: scale(1.05); }
.path-card__body { position: relative; display: flex; flex-direction: column; flex: 1; padding: clamp(26px, 3.4vw, 42px); }
.path-card ul { margin: 6px 0 24px; padding: 0; list-style: none; }
.path-card li { display: flex; gap: 10px; margin-bottom: 8px; color: var(--ink-soft); }
.path-card li .icon { color: var(--mint-deep); margin-top: .3em; }
.path-card li .icon { color: var(--mint-deep); }
.path-card .btn { margin-top: auto; align-self: flex-start; }

/* ---------- Kurskarten ---------- */
.course { display: grid; grid-template-columns: 1fr auto; gap: 24px 32px; align-items: center; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-sm); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.course + .course { margin-top: 18px; }
.course h3 { margin-bottom: .2em; }
.course__facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 10px 0 0; padding: 0; list-style: none; font-size: .94rem; color: var(--ink-soft); }
.course__facts li { display: inline-flex; align-items: center; gap: 7px; }
.course__facts .icon { color: var(--mint-deep); }
.course__side { text-align: right; }
.course__price { font-family: var(--font-serif); font-size: 1.7rem; font-weight: 600; color: var(--ink); margin-bottom: 0; }
.seats { display: flex; align-items: center; gap: 8px; justify-content: flex-end; font-size: .88rem; color: var(--ink-soft); margin: 6px 0 12px; }
.seats__bar { width: 100px; height: 8px; border-radius: 9px; background: var(--paper-2); overflow: hidden; }
.seats__bar i { display: block; height: 100%; width: 0; background: var(--mint-deep); border-radius: 9px; }
.seats__bar i { width: var(--fill, 0%); }
.modules { margin: 0; padding: 0; list-style: none; }
.modules li { display: grid; grid-template-columns: 52px 1fr auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.modules li:last-child { border-bottom: 0; }
.modules__no { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--mint); color: var(--ink); font-family: var(--font-serif); font-weight: 650; }
.modules__date { font-size: .92rem; color: var(--ink-soft); white-space: nowrap; }
.modules--calc li { grid-template-columns: 1fr auto; gap: 12px; }
.modules--calc li > span:first-child:empty { display: none; }

/* Rechenbeispiel */
.calc { position: relative; padding: clamp(26px, 3.4vw, 40px); border-radius: 34px; background: var(--white); box-shadow: var(--shadow); }
.calc__row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px dashed var(--line); }
.calc__row strong { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600; white-space: nowrap; }
.calc__row--minus strong { color: var(--mint-deep); }
.calc__row--total { border: 0; padding-top: 20px; }
.calc__row--total strong { font-size: clamp(2rem, 4vw, 2.8rem); color: var(--berry); }

/* ---------- Zitat ---------- */
.quote { position: relative; max-width: 900px; margin: 0 auto; text-align: center; }
.quote blockquote { margin: 0; font-family: var(--font-serif); font-size: clamp(1.4rem, 2.6vw, 2.05rem); line-height: 1.42; font-weight: 450; font-style: italic; }
.quote blockquote::before { content: "\201E"; display: block; font-size: 4rem; line-height: .4; color: var(--mint); opacity: .5; margin-bottom: 16px; font-style: normal; }
.quote figcaption { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; font-weight: 700; color: var(--mint-deep); }
.quote figcaption img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.section--quote { --sec: var(--mint-soft); }

/* ---------- Häkchenliste ---------- */
.checklist { margin: 0 0 1.2em; padding: 0; list-style: none; }
.checklist li { position: relative; padding-left: 34px; margin-bottom: 12px; }
.checklist li::before { content: ""; position: absolute; left: 0; top: .32em; width: 22px; height: 22px; border-radius: 50%; background: var(--mint-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323704f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.checklist--neutral li::before { background: var(--paper-2); width: 10px; height: 10px; left: 6px; top: .65em; }
.section--ink .checklist li::before, .section--berry .checklist li::before { background-color: rgba(255, 255, 255, .9); }
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.facts li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 99px; background: var(--white); box-shadow: var(--shadow-sm); font-size: .93rem; }
.facts .icon { color: var(--berry); }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; list-style: none; cursor: pointer; padding: 22px 52px 22px 0; font-family: var(--font-serif); font-size: 1.18rem; font-weight: 600; transition: color .3s; }
.faq summary:hover { color: var(--berry); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; border: 1px solid var(--line); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23353533' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__body { padding: 0 0 22px; color: var(--ink-soft); }

/* ---------- Abschluss-CTA ---------- */
.cta-band { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: clamp(44px, 6vw, 76px); background: linear-gradient(135deg, var(--mint-deep), #1b5c40); color: #fff; display: grid; grid-template-columns: 1.3fr .7fr; gap: 32px; align-items: center; }
.cta-band h2 { color: #fff; margin-bottom: .3em; }
.cta-band p { color: rgba(255, 255, 255, .78); margin: 0; }
.cta-band .actions { justify-content: flex-end; }
.cta-band > * { position: relative; }
.cta-band::before, .cta-band::after { content: ""; position: absolute; border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; background: rgba(255, 255, 255, .08); }
.cta-band::before { width: 300px; height: 300px; top: -90px; right: -60px; }
.cta-band::after { width: 220px; height: 220px; bottom: -70px; left: -40px; border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%; background: rgba(255, 255, 255, .06); }
.cta-band > * { position: relative; }
.cta-band .btn--primary { background: var(--gold); color: var(--ink); box-shadow: 0 8px 24px rgba(0, 0, 0, .15); }
.cta-band .btn--primary:hover { background: #e0b12e; color: var(--ink); }

/* ---------- Sales-Treppe: vier ruhige Schritte ---------- */
.stairs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stairs__line { display: none; }
.stair { display: flex; flex-direction: column; padding: 28px 24px; border-radius: var(--r-lg); background: var(--white); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .4s ease, box-shadow .4s ease; }
.stair:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0, 0, 0, .08); color: var(--ink); }
.stair__no { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--mint-soft); font-weight: 700; font-size: .92rem; color: var(--ink); }
.stair:nth-of-type(4) { background: linear-gradient(135deg, var(--mint-deep), #1b5c40); color: #fff; }
.stair:nth-of-type(4) h3 { color: #fff; }
.stair:nth-of-type(4) .stair__no { background: var(--gold); color: var(--ink); }
.stair__step { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 18px 0 8px; display: block; }
.stair:nth-of-type(4) .stair__step { color: var(--gold-soft); }
.stair h3 { font-size: 1.18rem; margin-bottom: .3em; }
.stair p { font-size: .92rem; color: inherit; opacity: .8; margin: 0; }


/* ---------- Lead-Magnet ---------- */
.magnet { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.magnet__cover { position: relative; aspect-ratio: 3 / 4; max-width: 340px; margin: 0 auto; width: 100%; }
.magnet__paper { position: absolute; inset: 0; border-radius: 16px; background: var(--white); box-shadow: var(--shadow-lg); padding: 30px 26px; display: flex; flex-direction: column; transform: rotate(-3deg); transition: transform .6s var(--ease); }
.magnet__paper--back { background: var(--paper-2); transform: rotate(5deg) translate(16px, 10px); box-shadow: var(--shadow); }
.magnet__cover:hover .magnet__paper:not(.magnet__paper--back) { transform: rotate(-1deg) translateY(-8px); }
.magnet__paper .eyebrow { font-size: .66rem; }
.magnet__paper h3 { font-size: 1.45rem; }
.magnet__paper svg { margin-top: auto; width: 100%; height: auto; }

/* ---------- Formulare ---------- */
.form-card { background: var(--white); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 44px); box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--wide, .choice, .check, .form-grid > .alert, .form-grid > .form-submit, .form-grid > .form-note, .form-grid > h3 { grid-column: 1 / -1; }
.field label, .choice legend { font-size: .9rem; font-weight: 600; color: var(--ink); }
.req { color: var(--berry); }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); border: 1.5px solid transparent; border-radius: 14px; padding: 13px 15px; transition: border-color .25s, background-color .25s, box-shadow .25s; }
.field textarea { resize: vertical; min-height: 110px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(35, 112, 79, .25); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--mint-deep); background: #fff; box-shadow: 0 0 0 4px rgba(108, 190, 153, .25); }
.field--error input, .field--error select, .field--error textarea { border-color: var(--berry); background: #fff7fa; }
.field__error { margin: 0; font-size: .86rem; color: var(--berry); font-weight: 500; }
.choice { border: 0; margin: 0; padding: 0; }
.choice legend { margin-bottom: 10px; padding: 0; }
.choice__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.choice__item { position: relative; display: block; cursor: pointer; }
.choice__item input { position: absolute; opacity: 0; }
.choice__item span { display: block; height: 100%; padding: 14px 16px; border-radius: 14px; background: var(--paper); border: 1.5px solid transparent; transition: border-color .25s, background-color .25s, transform .25s; }
.choice__item:hover span { transform: translateY(-2px); }
.choice__item strong { display: block; font-size: .98rem; }
.choice__item small { display: block; margin-top: 3px; color: var(--ink-soft); font-size: .84rem; line-height: 1.4; }
.choice__item input:checked + span { border-color: var(--mint-deep); background: var(--mint-soft); }
.choice__item input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.check label { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; color: var(--ink-soft); cursor: pointer; line-height: 1.5; }
.check input { width: 24px; height: 24px; margin-top: 0; flex: none; accent-color: var(--mint-deep); }
.form-submit { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 6px; }
.form-note { font-size: .84rem; color: var(--ink-soft); margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alert { padding: 14px 18px; border-radius: 14px; font-size: .95rem; }
.alert--error { background: #fbe8ef; color: #7d1145; }
.alert--info { background: var(--gold-soft); color: #5d4706; }
.alert--ok { background: var(--mint-soft); color: var(--mint-deep); }
[data-show-when] { display: none; }
[data-show-when].is-shown { display: block; }
.form-grid > div[data-show-when].is-shown { display: contents; }

/* ---------- Wissen ---------- */
.kb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.kb-card { display: flex; flex-direction: column; padding: 0; }
.kb-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--mint-soft); }
.kb-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.kb-card:hover .kb-card__media img { transform: scale(1.05); }
.kb-card__body { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 26px; }
.kb-card h3, .kb-card__title { font-size: 1.22rem; }
.kb-card .muted { font-size: .95rem; }
.kb-card__meta { margin-top: auto; padding-top: 14px; font-size: .84rem; color: var(--ink-soft); }
.kb-card .tag { align-self: flex-start; margin-bottom: 12px; }
.kb-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.kb-filter button { font: inherit; font-size: .9rem; padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer; transition: all .25s; }
.kb-filter button[aria-pressed="true"], .kb-filter button:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.article { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(32px, 5vw, 64px); align-items: start; }
.article__body { font-size: 1.08rem; }
.article__body h2 { font-size: clamp(1.5rem, 2.4vw, 1.95rem); margin-top: 1.8em; }
.article__body h3 { margin-top: 1.4em; }
.article__body ul, .article__body ol { margin-bottom: 1.2em; }
.article__body li { margin-bottom: .45em; }
.article__body blockquote { margin: 1.6em 0; padding: 18px 24px; border-left: 3px solid var(--berry); background: var(--white); border-radius: 0 var(--r) var(--r) 0; font-family: var(--font-serif); font-size: 1.15rem; font-style: italic; }
.article__body table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .96rem; background: var(--white); border-radius: var(--r); overflow: hidden; }
.article__body th, .article__body td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.article__body th { background: var(--mint-soft); color: var(--mint-deep); font-weight: 600; }
.article__lead { font-size: 1.2rem; color: var(--ink); }
.definition { margin: 0 0 2em; padding: 22px 26px; border-radius: var(--r-lg); background: var(--gold-soft); font-size: 1.08rem; }
.definition strong { color: var(--ink); }
.keypoints { padding: 24px 28px; border-radius: var(--r-lg); background: var(--mint-soft); margin: 0 0 2em; }
.keypoints h2 { font-size: 1.05rem !important; margin: 0 0 10px !important; font-family: var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--mint-deep); }
.keypoints ul { margin: 0; }
.sources { margin-top: 2.4em; padding-top: 1.4em; border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-soft); }
.sources h2 { font-size: 1.1rem !important; margin-top: 0 !important; }
.toc { position: sticky; top: calc(var(--header-h) + 24px); padding: 24px; border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-sm); font-size: .92rem; }
.toc p { font-weight: 700; margin-bottom: 10px; }
.toc ol { margin: 0; padding-left: 1.1em; }
.toc li { margin-bottom: 6px; }
.toc a:not(.btn) { color: var(--ink-soft); text-decoration: none; transition: color .2s; }
.toc a:not(.btn):hover, .toc a.is-current { color: var(--berry); font-weight: 600; }
.toc .btn { margin-top: 16px; width: 100%; }
.sources ul { padding-left: 1.1em; margin: 0; } .sources li { margin-bottom: 4px; }
.breadcrumbs { font-size: .86rem; color: var(--ink-soft); margin-bottom: 18px; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
.breadcrumbs a { color: var(--ink-soft); }
.author-box { display: flex; gap: 18px; align-items: center; padding: 22px; margin-top: 2.6em; border-radius: var(--r-lg); background: var(--paper-2); font-size: .95rem; }
.author-box__avatars { display: flex; flex: none; }
.author-box__avatars span, .author-box__avatars img { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--berry); color: #fff; font-weight: 700; border: 3px solid var(--paper-2); object-fit: cover; }
.author-box__avatars > * + * { margin-left: -14px; }
.author-box__avatars span + span { background: var(--mint); color: var(--ink); }
.article-hero { margin: 0 0 2em; aspect-ratio: 21 / 9; border-radius: var(--r-lg); overflow: hidden; }
.article-hero img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Prosa ---------- */
.prose { max-width: 760px; }
.prose h2 { font-size: 1.5rem; margin-top: 1.8em; }
.placeholder { padding: 14px 18px; border-radius: 14px; background: var(--gold-soft); color: #5d4706; font-size: .95rem; }

/* ---------- Footer ---------- */
.site-footer { position: relative; margin-top: clamp(40px, 6vw, 80px); background: var(--anthrazit); color: rgba(236, 235, 231, .75); padding: 72px 0 28px; font-size: .95rem; }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.site-footer__logo { display: inline-block; padding: 12px 16px; border-radius: 18px; background: var(--paper); margin-bottom: 18px; }
.site-footer__logo img { height: 40px; width: auto; }
.site-footer__brand { font-family: var(--font-serif); font-size: 1.6rem; color: #fff; letter-spacing: .05em; margin-bottom: 8px; }
.site-footer__title { font-weight: 700; color: #fff; margin-bottom: 12px; font-size: .86rem; letter-spacing: .1em; text-transform: uppercase; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: rgba(236, 235, 231, .75); text-decoration: none; transition: color .2s; }
.site-footer a:hover { color: var(--mint); }
.site-footer__contact a { display: inline-flex; align-items: center; gap: 8px; color: #fff; }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 22px; font-size: .86rem; }
.site-footer__legal p { margin: 0; }
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: 18px; }

/* ---------- Danke / Status ---------- */
.status { text-align: center; max-width: 640px; margin: 0 auto; }
.status__icon { display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto 26px; border-radius: 50%; background: var(--mint-soft); color: var(--mint-deep); }
.status__icon .icon { width: 40px; height: 40px; }
.status .actions { justify-content: center; }
.status .lead, .status .steps-mini { margin-left: auto; margin-right: auto; }
.status .steps-mini { max-width: 50ch; }
.status .actions + .actions { margin-top: 14px; }
.steps-mini { display: grid; gap: 14px; margin: 30px 0; padding: 0; list-style: none; text-align: left; counter-reset: s; }
.steps-mini li { position: relative; padding: 4px 0 4px 52px; counter-increment: s; }
.steps-mini li::before { content: counter(s); position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 700; font-size: .9rem; }

/* ---------- Mobile Sticky-CTA ---------- */
.sticky-cta { position: fixed; left: 12px; right: 84px; bottom: 12px; z-index: 140; display: none; }
.sticky-cta .btn { width: 100%; box-shadow: 0 10px 26px rgba(53, 53, 51, .25); }

/* ---------- Bewegung: nur dezentes Einblenden ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .7s ease, transform .7s ease; transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.draw path { stroke-dasharray: 600; stroke-dashoffset: 600; }
.is-visible .draw path, .draw.is-visible path { animation: draw 2s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .journey__line path, .draw path { stroke-dashoffset: 0 !important; }
  @view-transition { navigation: none; }
}


/* ---------- Startseite: Bewegung „erwachsen“ (Auftrag 31.10. abends: modernisieren, schicke Animationen) ----------
   Erlaubt: Zeilen steigen auf, Foto setzt sich, Balken füllen sich, Wörter werden beim Lesen kräftig,
   Linien zeichnen sich, Bild-Wischer (rechteckig), leichte Tiefe beim Scrollen, gestapelte Karten.
   Nicht: Kringel, Laufband, Wortwechsel, Kreis-Reveals, Wellen, Endlos-Animationen. */
.rw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.rw > span { display: inline-block; transform: translateY(110%); animation: rise-up .9s var(--ease-out) forwards; }
.rw:nth-child(2) > span { animation-delay: .07s; } .rw:nth-child(3) > span { animation-delay: .14s; } .rw:nth-child(4) > span { animation-delay: .21s; }
.rw:nth-child(5) > span { animation-delay: .3s; } .rw:nth-child(6) > span { animation-delay: .38s; }
.rise { opacity: 0; transform: translateY(18px); animation: fade-up .9s var(--ease-out) forwards; }
.rise--1 { animation-delay: 0s; } .rise--3 { animation-delay: .45s; } .rise--4 { animation-delay: .6s; } .rise--5 { animation-delay: .75s; }
@keyframes rise-up { to { transform: none; } }
@keyframes fade-up { to { opacity: 1; transform: none; } }
.hero--home .hero-photo__img img { animation: settle 1.8s var(--ease-out) both; }
.hero--home .hero-photo__fact { opacity: 0; animation: fact-in .9s var(--ease-out) .9s forwards; }
@keyframes settle { from { transform: scale(1.14); } to { transform: none; } }
@keyframes fact-in { from { opacity: 0; transform: translate(-18px, 10px); } to { opacity: 1; transform: none; } }
.blob[data-depth] { transform: translate3d(0, calc(var(--depth, 0) * 1px), 0); will-change: transform; }

/* Die Lücke: drei Wege im Vergleich, Balken füllen sich */
.gapchart { display: grid; grid-template-columns: 1fr 1fr 1.12fr; gap: clamp(18px, 2.4vw, 28px); align-items: center; }
.gapchart__col { padding: clamp(26px, 3vw, 36px); border-radius: var(--r-lg); background: var(--paper); }
.gapchart__col h3 { font-size: 1.2rem; margin-bottom: 18px; }
.gapchart__mark { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.gapchart__col ul { list-style: none; padding: 0; margin: 20px 0 0; font-size: .93rem; color: var(--ink-soft); }
.gapchart__col li { padding: 9px 0; border-top: 1px solid var(--line); }
.gapchart__col--vebt { padding-block: clamp(34px, 4vw, 48px); background: linear-gradient(140deg, var(--mint-deep), #1b5c40); color: #eef6f1; box-shadow: 0 24px 60px rgba(27, 92, 64, .28); }
.gapchart__col--vebt h3 { color: #fff; font-size: 1.32rem; }
.gapchart__col--vebt .gapchart__mark { color: var(--gold-soft); }
.gapchart__col--vebt ul { color: #e4efe8; }
.gapchart__col--vebt li { border-color: rgba(255, 255, 255, .14); }
.meters { display: grid; gap: 12px; margin: 0; }
.meter dt { font-size: .8rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; }
.meter dd { margin: 0; height: 8px; border-radius: 99px; background: rgba(53, 53, 51, .09); overflow: hidden; }
.meter__bar { display: block; height: 100%; width: var(--fill, 0%); border-radius: inherit; background: rgba(53, 53, 51, .38); transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease-out); }
.meter:nth-child(2) .meter__bar { transition-delay: .15s; } .meter:nth-child(3) .meter__bar { transition-delay: .3s; }
.is-visible .meter__bar, html:not(.js) .meter__bar { transform: none; }
.gapchart__col--vebt dt { color: #cfe6da; }
.gapchart__col--vebt dd { background: rgba(255, 255, 255, .14); }
.gapchart__col--vebt .meter__bar { background: linear-gradient(90deg, var(--mint), var(--gold)); }

/* Was meint erlebnisorientiert: Satz wird beim Lesen kräftig */
.statement { font-family: var(--font-serif); font-size: clamp(1.45rem, 2.8vw, 2.25rem); line-height: 1.35; font-weight: 500; max-width: 30em; margin: 0 0 clamp(48px, 6vw, 72px); color: var(--ink); }
.js .statement .w { opacity: .2; transition: opacity .35s ease; }
.js .statement .w.is-on { opacity: 1; }
.cycle__rail { position: relative; height: 18px; margin: 0 0 22px; }
.cycle__rail::before, .cycle__fill { content: ""; position: absolute; top: 8px; height: 2px; left: calc((100% - 64px) / 6); right: calc((100% - 64px) / 6); background: var(--line); }
.cycle__fill { background: var(--mint-deep); transform: scaleX(var(--progress, 0)); transform-origin: left; }
.cycle__rail i { position: absolute; top: 0; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line); transition: background .4s, border-color .4s, transform .4s var(--ease-out); }
.cycle__rail i:nth-of-type(1) { left: calc((100% - 64px) / 6); } .cycle__rail i:nth-of-type(2) { left: 50%; } .cycle__rail i:nth-of-type(3) { left: calc(100% - (100% - 64px) / 6); }
.cycle__rail i.is-on { transform: scale(1.15); }
.cycle__rail i.is-on:nth-of-type(1) { background: var(--m1); border-color: var(--m1); }
.cycle__rail i.is-on:nth-of-type(2) { background: var(--m2); border-color: var(--m2); }
.cycle__rail i.is-on:nth-of-type(3) { background: var(--m3); border-color: var(--m3); }
.js .img-wipe img { clip-path: inset(100% 0 0 0); transform: scale(1.18); transition: clip-path 1.1s var(--ease-out), transform 1.5s var(--ease-out); }
.js .is-visible .img-wipe img { clip-path: inset(0); transform: none; }
.js .steps3 > li.is-visible:hover .steps3__img img { transform: scale(1.05); transition-duration: .5s; }

/* Warum gerade jetzt: Häkchen und Foto mit Tiefe */
.ticks { list-style: none; padding: 0; margin: 4px 0 30px; display: grid; gap: 14px; }
.ticks li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; color: #ecebe7; }
.ticks .icon { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: rgba(108, 190, 153, .18); color: var(--mint); }
.drift { overflow: hidden; }
.drift img { transform: translate3d(0, calc(var(--drift, 0) * 1px), 0) scale(1.12); will-change: transform; }

/* Warum VEBT: Karten stapeln sich beim Scrollen */
@media (min-width: 921px) {
  .stack--pile { gap: 28px; }
  .stack--pile .stack__card { position: sticky; top: calc(var(--header-h) + 20px + var(--i, 0) * 18px); padding: clamp(28px, 3vw, 44px); border-radius: 28px; background: var(--paper); box-shadow: 0 -6px 30px rgba(0, 0, 0, .05), var(--shadow); transform: scale(var(--shrink, 1)); transform-origin: 50% 0; }
  .stack--pile .stack__media { aspect-ratio: 16 / 10; }
}

@media (max-width: 920px) {
  .gapchart { grid-template-columns: minmax(0, 1fr); }
  .cycle__rail { display: none; }
  .drift img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rise, .rw > span, .hero--home .hero-photo__fact { opacity: 1 !important; transform: none !important; animation: none !important; }
  .meter__bar, .js .img-wipe img { transform: none !important; clip-path: none !important; }
  .js .statement .w { opacity: 1 !important; }
  .drift img, .blob[data-depth] { transform: none !important; }
  .stack--pile .stack__card { transform: none !important; }
}

/* ---------- Responsiv ---------- */
@media (max-width: 1180px) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
  .hero__grid, .duo, .magnet, .article, .cta-band, .split, .worlds, .features, .features--2, .split-media, .stack__card, .person, .myths, .steps3 { grid-template-columns: minmax(0, 1fr); }
  .features--4 { grid-template-columns: 1fr 1fr; }
  .duo--rev > :first-child, .split-media--rev > :first-child, .person--rev > :first-child, .stack__card:nth-child(even) .stack__media { order: 0; }
  .grid--3, .kb-grid, .grid--4, .stairs { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .journey__steps { grid-template-columns: 1fr; gap: 22px; }
  .journey__step { display: grid; grid-template-columns: 56px 1fr; gap: 18px; }
  .journey__dot { margin: 0; }
  .journey__line { display: none; }
  .toc { position: static; }
  .cta-band .actions { justify-content: flex-start; }
  .hero-photo { max-width: 520px; margin: 10px auto 0; width: 100%; }
  .hero-photo__fact { left: 12px; }
  .person__photo { max-width: 380px; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  h1, h2, h3 { hyphens: auto; }
  h1, .hero--sub h1 { font-size: clamp(2rem, 9vw, 2.5rem); }
  .site-header__cta .btn { display: none; }
  .brand__logo { height: 36px; }
  .grid--2, .grid--3, .kb-grid, .grid--4, .form-grid, .stairs, .features--4 { grid-template-columns: 1fr; }
  .course { grid-template-columns: 1fr; }
  .course__side { text-align: left; }
  .seats { justify-content: flex-start; }
  .modules li { grid-template-columns: 44px 1fr; }
  .modules__date { grid-column: 2; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .duo-portraits { gap: 14px; }
  .stat__num { font-size: 2.1rem; }
  .timeline__item { grid-template-columns: 42px 1fr; gap: 16px; }
  .sticky-cta.is-shown { display: block; }
}
@media print {
  .site-header, .site-footer, .btn, .toc, .chat, .consent, .sticky-cta { display: none !important; }
  body { background: #fff; }
  .vebt-rights--print { display: block !important; }
}
/* Dokumentschutz (06.11.2026): Rechte-Hinweis nur im Druck, unsichtbarer Vermerk (assets/js/doc-protect.js, beim Drucken) */
.vebt-rights--print { display: none; max-width: 760px; margin: 32px auto 0; padding: 10px 24px 0; border-top: 1px solid var(--line); font-size: .74rem; line-height: 1.45; color: var(--ink-soft); }
.vebt-rights--print a { color: inherit; }
.vebt-wm { color: transparent !important; font-size: .1px !important; line-height: 0 !important; letter-spacing: 0 !important; word-spacing: 0 !important; }


/* ---------- Website-Chat ---------- */
.chat { position: fixed; right: 20px; bottom: 20px; z-index: 150; }
.chat__toggle { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border: 0; border-radius: var(--r-pill); background: var(--anthrazit); color: #fff; font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; box-shadow: 0 14px 32px rgba(53, 53, 51, .3); transition: transform .3s var(--ease), box-shadow .3s; }
.chat__toggle:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(53, 53, 51, .36); }
.chat__toggle .icon { width: 22px; height: 22px; color: var(--mint); }
.chat.is-open .chat__toggle { display: none; }
.chat__panel { width: min(380px, calc(100vw - 32px)); max-height: min(620px, calc(100vh - 40px)); display: flex; flex-direction: column; background: var(--white); border-radius: 24px; box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid var(--line); animation: chat-in .35s var(--ease); }
@keyframes chat-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.chat__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--anthrazit); color: #fff; }
.chat__head small { display: block; opacity: .8; font-size: .8rem; }
.chat__avatars { display: flex; }
.chat__avatars span, .chat__avatars img { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--berry); font-weight: 700; font-size: .85rem; border: 2px solid var(--anthrazit); object-fit: cover; }
.chat__avatars > * + * { margin-left: -10px; }
.chat__avatars span + span { background: var(--mint); color: var(--ink); }
.chat__close { margin-left: auto; background: transparent; border: 0; color: #fff; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; }
.chat__close:hover { background: rgba(255, 255, 255, .12); }
.chat__log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); min-height: 160px; }
.chat__msg { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: .93rem; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.chat__msg--bot, .chat__msg--team { align-self: flex-start; background: var(--white); border-bottom-left-radius: 4px; box-shadow: var(--shadow-sm); }
.chat__msg--team { border-left: 3px solid var(--berry); }
.chat__msg--visitor { align-self: flex-end; background: var(--mint-deep); color: #fff; border-bottom-right-radius: 4px; }
.chat__msg small { display: block; font-size: .74rem; opacity: .7; margin-bottom: 2px; font-weight: 600; }
.chat__msg a { color: inherit; }
.chat__quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 0; background: var(--paper); }
.chat__quick button { font: inherit; font-size: .82rem; padding: 7px 12px; border-radius: var(--r-pill); border: 1px solid rgba(35, 112, 79, .3); background: #fff; color: var(--mint-deep); cursor: pointer; text-align: left; }
.chat__quick button:hover { background: var(--mint-soft); }
.chat__form { padding: 12px 14px 14px; border-top: 1px solid var(--line); display: grid; gap: 8px; background: var(--white); }
.chat__form textarea, .chat__form input { width: 100%; font: inherit; font-size: .93rem; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--paper); resize: none; }
.chat__form textarea:focus, .chat__form input:focus { outline: 0; border-color: var(--mint-deep); background: #fff; }
.chat__contact { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chat__form .btn { justify-self: end; }
.chat__note { margin: 0; font-size: .72rem; color: var(--ink-soft); line-height: 1.4; }
.chat__error { color: var(--berry); font-size: .85rem; }
.chat__panel[hidden], .mobile-nav[hidden] { display: none !important; }
@media (max-width: 640px) { .chat { right: 12px; bottom: 12px; } .chat__toggle span { display: none; } .chat__toggle { padding: 15px; } .chat__contact { grid-template-columns: 1fr; } }

/* ---------- Cookie-Banner ---------- */
.consent { position: fixed; left: 20px; bottom: 20px; z-index: 300; width: min(440px, calc(100vw - 40px)); animation: chat-in .4s var(--ease); }
.consent__card { background: var(--white); border-radius: 26px; padding: 24px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); position: relative; overflow: hidden; }
.consent__title { position: relative; font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; margin: 0 0 8px; color: var(--ink); }
.consent__text { position: relative; font-size: .92rem; color: var(--ink-soft); margin: 0 0 14px; line-height: 1.55; }
.consent__details { display: grid; gap: 10px; margin-bottom: 14px; }
.consent__details[hidden] { display: none; }
.consent__row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--paper); cursor: pointer; font-size: .9rem; }
.consent__row input { width: 24px; height: 24px; margin-top: 0; accent-color: var(--mint-deep); flex: none; }
.consent__row small { display: block; color: var(--ink-soft); font-size: .8rem; line-height: 1.4; margin-top: 2px; }
.consent__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.consent__link { background: none; border: 0; font: inherit; font-size: .88rem; color: var(--mint-deep); text-decoration: underline; cursor: pointer; padding: 6px 4px; }
@media (max-width: 640px) { .consent { left: 12px; right: 12px; bottom: 12px; width: auto; } .consent__actions .btn { flex: 1; } }
@media print { .consent { display: none; } }
.calc .eyebrow { margin-bottom: .4rem; }
.calc > p:last-child { margin: 14px 0 0; }
.tag--m1 { background: rgba(108, 190, 153, .2); color: var(--mint-deep); }
.tag--m2 { background: var(--berry-soft); color: var(--berry); }
.tag--m3 { background: var(--gold-soft); color: var(--gold-deep); }
.tag--m4 { background: rgba(53, 53, 51, .1); color: var(--ink); }
.tag--m5 { background: rgba(47, 143, 106, .14); color: #1f6b4e; }
.section--ink .accent--mint { color: var(--mint); }
.split-media .quote { text-align: left; margin: 0; }
.split-media .quote blockquote { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.split-media .quote blockquote::before { margin-left: 0; }

/* ---------- Einblicke: Fotos in organischen Formen (Vorlage „gallery“) ---------- */
.gallery-organic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.gallery-organic figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--organic-1); box-shadow: 0 12px 36px rgba(0, 0, 0, .08); transition: transform .5s ease, box-shadow .5s ease; background: var(--mint-soft); }
.gallery-organic figure:nth-child(2) { border-radius: var(--organic-3); }
.gallery-organic figure:nth-child(3) { border-radius: 45% 55% 65% 35% / 50% 45% 55% 50%; }
.gallery-organic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.gallery-organic figure:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(0, 0, 0, .12); }
.gallery-organic figure:hover img { transform: scale(1.06); }
@media (max-width: 920px) { .gallery-organic { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } .gallery-organic figure, .gallery-organic figure:nth-child(n) { border-radius: var(--r-lg); } .blob--tr { width: 280px; height: 280px; } }

/* =====================================================================
   v5 · „Erlebnis trifft Business“ (02.11.2026)
   Zwei-Welten-Hero, Landkarte der Wege, Kreis „Was dich rund macht“, Förder-Torte, Skizzen, heller Footer.
   ===================================================================== */

/* ---------- Skizzen (Bikablo-Stil) ---------- */
.sketch { width: 44px; height: 44px; flex: 0 0 auto; fill: none; stroke: var(--anthrazit); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sketch .sk-fill { stroke: none; fill: var(--mint); opacity: .45; transform: translate(3px, 3px); }
.sketch--berry .sk-fill { fill: var(--berry); opacity: .28; }
.sketch--gold .sk-fill { fill: var(--gold); opacity: .4; }

/* ---------- Hero: zwei Welten ---------- */
.hero--worlds { padding: clamp(36px, 6vw, 72px) 0 clamp(40px, 6vw, 80px); background: var(--paper); }
.worlds-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.worlds-hero h1 { font-size: clamp(2.4rem, 4.6vw, 4rem); }
.worlds { --split: 50%; position: relative; margin: 0; aspect-ratio: 5 / 4; border-radius: 28px; overflow: hidden; background: var(--paper-2); box-shadow: var(--shadow-lg); touch-action: pan-y; }
.worlds__pane { position: absolute; inset: 0; }
.worlds__pane img { width: 100%; height: 100%; object-fit: cover; display: block; }
.worlds__pane--a img { object-position: 30% 50%; }
.worlds__pane--b { clip-path: inset(0 0 0 var(--split)); }
.worlds__line { position: absolute; top: 0; bottom: 0; left: var(--split); width: 2px; margin-left: -1px; background: var(--white); pointer-events: none; }
.worlds__knob { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--white); color: var(--berry); display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.worlds__knob .icon { width: 20px; height: 20px; }
.worlds__knob::before { content: ""; position: absolute; width: 8px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateX(-9px) rotate(45deg); }
.worlds__knob .icon { transform: translateX(5px); }
.worlds__tag { position: absolute; top: 18px; padding: 7px 14px; border-radius: var(--r-pill); font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: rgba(255, 252, 247, .92); color: var(--ink); transition: opacity .3s; }
.worlds__tag--a { left: 18px; }
.worlds__tag--b { right: 18px; }
.worlds__tag--a::before, .worlds__tag--b::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.worlds__tag--a::before { background: var(--mint); }
.worlds__tag--b::before { background: var(--berry); }
.worlds { cursor: ew-resize; }
.worlds__range { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; margin: 0; }
.worlds__range:focus-visible + .worlds__fact { outline: 3px solid var(--mint); }
.worlds__fact { position: absolute; left: 18px; right: 18px; bottom: 18px; max-width: 360px; padding: 12px 16px; border-radius: 16px; background: rgba(255, 252, 247, .94); font-size: .9rem; color: var(--ink-soft); pointer-events: none; }
.worlds__fact strong { font-family: var(--font-serif); font-size: 1.25rem; color: var(--berry); margin-right: 4px; }
@media (max-width: 900px) { .worlds-hero { grid-template-columns: 1fr; } .worlds { aspect-ratio: 4 / 3; } }

/* ---------- Landkarte der Wege ---------- */
.waymap-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.waymap__list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 4px; }
.waymap__item { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.waymap__item h3 { font-size: 1.08rem; margin: 0 0 4px; }
.waymap__item p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.waymap__dot { width: 14px; height: 14px; margin-top: 5px; border-radius: 50%; background: #b9b6ae; }
.waymap__item--b .waymap__dot { background: #d8d3c8; }
.waymap__item--v .waymap__dot { background: var(--berry); box-shadow: 0 0 0 5px var(--berry-soft); }
.waymap { margin: 0; }
.waymap svg { width: 100%; height: auto; display: block; overflow: visible; }
.waymap__grid path { fill: none; stroke: var(--anthrazit); stroke-width: 1.5; }
.waymap__grid .waymap__minor { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 6; }
.waymap__axis { font-size: 13px; fill: var(--ink-soft); font-family: var(--font-sans); }
.waymap__zone { fill: var(--mint-soft); stroke: var(--mint); stroke-width: 1.5; stroke-dasharray: 6 6; }
.waymap__zone-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; fill: var(--mint-deep); font-family: var(--font-sans); font-weight: 600; }
.waymap__thread { fill: none; stroke: var(--berry); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.waymap__pt circle { stroke: var(--white); stroke-width: 3; }
.waymap__pt--a circle { fill: #b9b6ae; }
.waymap__pt--b circle { fill: #d8d3c8; }
.waymap__pt--v circle { fill: var(--berry); }
.waymap__pt text { font-size: 14px; fill: var(--ink); font-family: var(--font-sans); font-weight: 500; }
.waymap__pt .waymap__vebt { fill: #fff; font-family: var(--font-serif); font-size: 16px; font-weight: 600; letter-spacing: .04em; }
.js .waymap__pt, .js .waymap__zone, .js .waymap__zone-label { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transform-box: fill-box; }
.js .waymap.is-on .waymap__pt--b { opacity: 1; transform: none; transition-delay: .1s; }
.js .waymap.is-on .waymap__pt--a { opacity: 1; transform: none; transition-delay: .35s; }
.js .waymap.is-on .waymap__zone, .js .waymap.is-on .waymap__zone-label { opacity: 1; transform: none; transition-delay: .7s; }
.js .waymap.is-on .waymap__thread { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease) .9s; }
.js .waymap.is-on .waymap__pt--v { opacity: 1; transform: none; transition-delay: 2.3s; transition-duration: .7s; }
.js .waymap__pt--v { transform: scale(.4); transform-origin: center; }
.waymap figcaption { margin-top: 10px; }
@media (max-width: 900px) { .waymap-grid { grid-template-columns: 1fr; } }

/* ---------- Kreis „Was dich rund macht“ ---------- */
.round { --sec: var(--paper-2); --fade: clamp(48px, 6vw, 100px); background: linear-gradient(180deg, var(--paper) 0, var(--sec) var(--fade), var(--sec) calc(100% - var(--fade)), var(--paper) 100%); }
.round__intro { max-width: 760px; }
.round__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.round__chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 10px; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: var(--white); color: var(--ink); font: inherit; font-weight: 500; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.round__chip .sketch { width: 34px; height: 34px; }
.round__chip .sketch .sk-fill { opacity: .18; }
.round__chip:hover { transform: translateY(-2px); border-color: var(--mint); }
.round__chip[aria-pressed="true"] { border-color: var(--mint-deep); background: var(--mint-soft); }
.round__chip[aria-pressed="true"] .sketch .sk-fill { opacity: .6; }
.round__chip[aria-pressed="true"]::after { content: ""; width: 7px; height: 12px; margin-left: 2px; border-right: 2px solid var(--mint-deep); border-bottom: 2px solid var(--mint-deep); transform: rotate(45deg) translateY(-2px); }
.round__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); margin-top: clamp(32px, 5vw, 56px); }
.round__visual { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
.round__visual svg { width: 100%; max-width: 460px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.round__track { fill: none; stroke: var(--line); stroke-width: 1; }
.round__seg path { fill: var(--white); stroke: rgba(53, 53, 51, .22); stroke-width: 1.2; stroke-dasharray: 4 5; transition: fill .5s var(--ease-out), stroke .5s; }
.round__seg .round__icon { fill: none; stroke: var(--anthrazit); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .35; transition: opacity .4s; }
.round__seg .round__icon .sk-fill { display: none; }
.round__seg.is-on path { stroke-dasharray: none; stroke: var(--white); stroke-width: 2; }
.round__seg.is-on .round__icon { opacity: 1; }
.round__seg--own.is-on path { fill: var(--mint); }
.round__seg--vebt.is-on path { fill: var(--berry); }
.round__seg--vebt.is-on .round__icon { stroke: #fff; }
.round__seg.is-pop { animation: round-pop .5s var(--ease-out); transform-origin: 0 0; }
@keyframes round-pop { 40% { transform: scale(1.04); } }
.round__core { fill: var(--white); }
.round__count { font-family: var(--font-serif); font-size: 34px; font-weight: 600; fill: var(--ink); }
.round__label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; fill: var(--ink-soft); font-family: var(--font-sans); }
.round__arc { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .7s var(--ease), stroke-width .4s; }
/* Jedes Teil bekommt seinen eigenen Bogen: die Linie wächst genau an der Stelle, die dazukommt, nichts springt zurück (Frederik 04.11.) */
.round__seg.is-on .round__arc { stroke-dashoffset: 0; }
.round.is-complete .round__count { font-size: 22px; }
.round.is-full .round__arc { stroke-width: 5; }
.round__done-text { max-width: 620px; margin: -6px auto 20px; color: var(--ink-soft); }
.round.is-complete .round__count { fill: var(--berry); }
.round__legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; margin-top: 14px; font-size: .88rem; color: var(--ink-soft); }
.round__key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: -8px; }
.round__key--own { background: var(--mint); }
.round__key--vebt { background: var(--berry); }
.round__steps { list-style: none; margin: 0; padding: 12vh 0 18vh; display: grid; gap: 22vh; }
.round__step { display: grid; grid-template-columns: 56px 1fr; gap: 18px; opacity: .35; transition: opacity .5s; }
.round__step .sketch { width: 56px; height: 56px; }
.round__step small { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--berry); font-weight: 600; }
.round__step h3 { margin: 2px 0 6px; font-size: 1.35rem; }
.round__step p { margin: 0; color: var(--ink-soft); }
.round__step.is-active, .round__step.is-done { opacity: 1; }
.round__done { text-align: center; padding-top: 24px; }
/* Nur der Text wartet gedimmt auf den vollen Kreis; die Knöpfe sind immer voll lesbar und klickbar (Kontrast, 07.11.) */
.round__done > :not(.actions) { opacity: .4; transition: opacity .6s; }
.round.is-complete .round__done > * { opacity: 1; }
.round__done-title { font-family: var(--font-serif); font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 18px; }
.round__done .actions { justify-content: center; }
@media (max-width: 860px) {
  .round__layout { grid-template-columns: 1fr; }
  .round__visual { top: calc(var(--header-h) + 8px); z-index: 2; background: var(--paper-2); padding: 8px 0; }
  .round__visual svg { max-width: 240px; }
  .round__legend { font-size: .8rem; margin-top: 6px; }
  .round__steps { padding: 4vh 0 10vh; gap: 12vh; }
}
@media (prefers-reduced-motion: reduce) { .round__steps { gap: 28px; padding: 0; } .round__step { opacity: 1; } .round__visual { position: static; } }

/* ---------- Förderung: zehn Teile à 500 € ---------- */
.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 10px 0 10px; }
.tile { perspective: 600px; aspect-ratio: 1 / 1; }
.tile__in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms); }
.tile__front, .tile__back { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; font-size: .8rem; font-weight: 600; text-align: center; }
.tile__front { background: var(--paper); color: var(--ink); border: 1px solid var(--line); font-family: var(--font-serif); font-size: .95rem; }
.tile__back { background: var(--mint); color: #fff; transform: rotateY(180deg); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.tile--mine .tile__back { background: var(--berry); font-family: var(--font-serif); font-size: 1rem; letter-spacing: 0; text-transform: none; }
.tiles.is-on .tile__in { transform: rotateY(180deg); }
.tiles.is-on .tile--mine .tile__in { transform: rotateY(180deg) translateY(-6px); box-shadow: 0 10px 22px rgba(163, 25, 91, .25); border-radius: 12px; }
.tiles__caption { margin: 0 0 14px; font-size: .9rem; color: var(--ink-soft); }
.tiles__caption strong { color: var(--mint-deep); font-family: var(--font-serif); font-size: 1.1rem; }
.tiles__key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; }
.tiles__key--fund { background: var(--mint); }
.tiles__key--mine { background: var(--berry); }
@media (prefers-reduced-motion: reduce) { .tile__in { transition: none; } }

/* ---------- Förderung: offizielle Unterlagen ---------- */
.official__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 3vw, 40px); align-items: start; margin-bottom: 18px; }
.official__video { position: relative; display: flex; align-items: flex-end; min-height: 280px; padding: 24px; border-radius: var(--r-lg); color: #fff; text-decoration: none; overflow: hidden; background: linear-gradient(135deg, var(--anthrazit), #24493a); }
.official__video::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(108, 190, 153, .45), transparent 55%); }
.official__play { position: absolute; top: 24px; right: 24px; width: 64px; height: 64px; border-radius: 50%; background: var(--white); display: grid; place-items: center; transition: transform .3s var(--ease-out); }
.official__play svg { width: 28px; height: 28px; fill: var(--berry); margin-left: 4px; }
.official__video:hover .official__play { transform: scale(1.08); }
.official__video-text { position: relative; display: grid; gap: 4px; }
.official__video-text small { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.official__video-text strong { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 500; }
.official__video-text span { font-size: .85rem; opacity: .8; }
.official__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.official__list li { border-bottom: 1px solid var(--line); }
.official__list a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 4px; color: var(--ink); text-decoration: none; }
.official__list a:hover strong { color: var(--berry); }
.official__list span { display: grid; gap: 2px; }
.official__list strong { font-weight: 600; transition: color .2s; }
.official__list small { color: var(--ink-soft); }
.official__list .icon { flex: 0 0 auto; color: var(--berry); }
@media (max-width: 860px) { .official__grid { grid-template-columns: 1fr; } .official__video { min-height: 200px; } }

/* ---------- Footer hell ---------- */
.site-footer { background: var(--white); color: var(--ink-soft); border-top: 1px solid var(--line); }
.site-footer::before { content: ""; position: absolute; top: -1px; left: 0; width: min(320px, 40%); height: 3px; background: linear-gradient(90deg, var(--mint), var(--berry) 60%, var(--gold)); }
.site-footer__grid { border-bottom-color: var(--line); }
.site-footer__logo { padding: 0; background: none; border-radius: 0; }
.site-footer__logo img { height: 64px; }
.site-footer__title { color: var(--ink); }
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--berry); }
.site-footer__contact a { color: var(--ink); }
.site-footer__legal { color: var(--ink-soft); }

/* =====================================================================
   v6 · Weiterbildung, Termine, Kursseite (02.11.2026, Schritt 3)
   Steckbrief-Raster, Faden-Zeitstrahl, Gleichung, „Danach kannst du …“, Drei-Spalten-Raster,
   Anmeldeweg als Linie, Ticket mit Stuhlkreis, Jahresleiste, Kalenderstreifen, Anmeldung in 3 Schritten.
   ===================================================================== */
.rise--2 { animation-delay: .25s; }
/* Oliver 06.11.: Abschnittsüberschriften wie auf der Startseite (Beere, ohne Nummer, ohne Strich) */
.section__no { display: flex; }
.section__head:has(.section__no) { text-align: left; margin-left: 0; margin-right: 0; }
.section__head:has(.section__no) .lead { margin-left: 0; }

.hero--plain { position: relative; padding: clamp(28px, 5vw, 56px) 0 clamp(36px, 5vw, 64px); background: var(--paper); }
.thread-draw { fill: none; stroke: var(--berry); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: thread-in 2.2s var(--ease) .5s forwards; }
@keyframes thread-in { to { stroke-dashoffset: 0; } }

/* ---------- Weiterbildung: Hero + Steckbrief ---------- */
.wb-hero__title { font-size: clamp(2.2rem, 5.6vw, 4.8rem); line-height: 1.04; max-width: 20ch; margin-bottom: 0; }
.wb-hero__thread { display: block; width: 100%; height: 34px; margin: 10px 0 18px; overflow: visible; }
.wb-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 48px; align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.wb-hero__grid .lead { margin: 0; }
.wb-hero__grid .actions { justify-content: flex-end; }
.factsheet { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0; border-top: 1.5px solid var(--anthrazit); }
.factsheet__cell { padding: 14px 18px 16px 0; border-bottom: 1px solid var(--line); }
.factsheet__cell + .factsheet__cell { padding-left: 18px; border-left: 1px solid var(--line); }
.factsheet dt { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.factsheet dd { margin: 0; font-family: var(--font-serif); font-size: 1.35rem; font-weight: 500; color: var(--ink); line-height: 1.2; }
.factsheet dd small { display: block; margin-top: 4px; font-family: var(--font-sans); font-size: .82rem; font-weight: 400; color: var(--ink-soft); }
@media (max-width: 860px) {
  .wb-hero__grid { grid-template-columns: 1fr; }
  .wb-hero__grid .actions { justify-content: flex-start; }
  .factsheet { grid-template-columns: 1fr 1fr; }
  .factsheet__cell, .factsheet__cell + .factsheet__cell { padding: 12px 12px 14px 0; border-left: 0; }
  .factsheet__cell:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
}

/* ---------- Faden-Zeitstrahl (Module) ---------- */
.thread { --p: 0; position: relative; list-style: none; margin: clamp(24px, 4vw, 48px) 0 0; padding: 0 0 0 64px; }
.thread::before, .thread::after { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; }
.thread::before { background: var(--line); }
.thread::after { background: var(--berry); transform-origin: top; transform: scaleY(var(--p)); }
.thread__item { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 20px 40px; align-items: center; padding: 28px 0 40px; }
.thread__item:nth-child(even) { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.thread__item:nth-child(even) .thread__body { order: 2; }
.thread__knot { position: absolute; left: -64px; top: 28px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--white); border: 2px solid var(--line); font-family: var(--font-serif); font-weight: 600; color: var(--ink-soft); transition: background .4s, border-color .4s, color .4s, transform .4s var(--ease-out); }
.thread__meta { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px; font-weight: 600; }
.thread__body h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: .4em; }
.thread__body > p { color: var(--ink-soft); }
.thread__result { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--line); color: var(--ink) !important; font-size: .98rem; }
.thread__result span { display: block; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--berry); font-weight: 600; margin-bottom: 4px; }
.thread__media { margin: 0; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; }
.thread__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out), filter .6s; }
.js .thread__item { opacity: .45; transition: opacity .5s; }
.js .thread__item .thread__media img { filter: grayscale(.6); transform: scale(1.04); }
.js .thread__item.is-active, .js .thread__item.is-done { opacity: 1; }
.js .thread__item.is-active .thread__media img { filter: none; transform: none; }
.thread__item.is-done .thread__knot { background: var(--berry); border-color: var(--berry); color: #fff; }
.thread__item.is-active .thread__knot { background: var(--berry); border-color: var(--berry); color: #fff; transform: scale(1.12); box-shadow: 0 0 0 6px var(--berry-soft); }
@media (max-width: 760px) {
  .thread { padding-left: 52px; }
  .thread::before, .thread::after { left: 17px; }
  .thread__knot { left: -52px; width: 36px; height: 36px; top: 24px; }
  .thread__item, .thread__item:nth-child(even) { grid-template-columns: 1fr; padding-bottom: 24px; }
  .thread__item:nth-child(even) .thread__body { order: 0; }
  .thread__media { max-width: 360px; aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) { .js .thread__item { opacity: 1; } .js .thread__item .thread__media img { filter: none; transform: none; } }

/* ---------- Gleichung systemisch + erlebnisorientiert ---------- */
.equation-section { --sec: var(--paper-2); --fade: clamp(48px, 6vw, 100px); background: linear-gradient(180deg, var(--paper) 0, var(--sec) var(--fade), var(--sec) calc(100% - var(--fade)), var(--paper) 100%); }
.equation-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.equation { margin: 0; }
.equation svg { width: 100%; max-width: 520px; height: auto; display: block; overflow: visible; }
.equation__c { transform-box: fill-box; transform-origin: center; transition: transform 1.4s var(--ease-out); mix-blend-mode: multiply; }
.equation__c--a { fill: rgba(108, 190, 153, .55); stroke: var(--mint-deep); stroke-width: 1.5; }
.equation__c--b { fill: rgba(163, 25, 91, .28); stroke: var(--berry); stroke-width: 1.5; }
.equation__t { font-family: var(--font-serif); font-size: 17px; font-weight: 500; fill: var(--ink); transition: transform 1.4s var(--ease-out); transform-box: fill-box; }
.equation__mid { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; fill: var(--berry-dark); opacity: 0; transition: opacity .6s 1.1s; }
.equation__op { font-size: 13px; fill: var(--ink-soft); font-family: var(--font-sans); }
.js .equation__c--a, .js .equation__t--a { transform: translateX(-46px); }
.js .equation__c--b, .js .equation__t--b { transform: translateX(46px); }
.js .equation.is-on .equation__c, .js .equation.is-on .equation__t { transform: none; }
.js .equation.is-on .equation__mid, .no-js .equation__mid { opacity: 1; }
.equation__defs { margin: 22px 0 0; display: grid; gap: 18px; }
.equation__defs dt { font-family: var(--font-serif); font-size: 1.2rem; display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.equation__defs dd { margin: 0; color: var(--ink-soft); }
.equation__key { width: 14px; height: 14px; border-radius: 50%; }
.equation__key--a { background: var(--mint); }
.equation__key--b { background: var(--berry); }
@media (max-width: 860px) { .equation-grid { grid-template-columns: 1fr; } .equation { order: 2; } }
@media (prefers-reduced-motion: reduce) { .js .equation .equation__c, .js .equation .equation__t { transform: none; } .js .equation .equation__mid { opacity: 1; } }

/* ---------- Danach kannst du … ---------- */
.can__list { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--line); }
.can__item { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.can__no { font-family: var(--font-serif); font-size: 1rem; color: var(--berry); }
.can__text { font-family: var(--font-serif); font-size: clamp(1.25rem, 2.6vw, 2rem); line-height: 1.25; color: var(--ink); }
.can__pre { color: var(--ink-soft); }

/* ---------- Drei-Spalten-Raster ohne Symbole ---------- */
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.5px solid var(--anthrazit); }
.cols3__col { padding: 22px 26px 8px 0; }
.cols3__col + .cols3__col { padding-left: 26px; border-left: 1px solid var(--line); }
.cols3__col h3 { font-size: 1.15rem; margin-bottom: 12px; }
.cols3__col ul { list-style: none; margin: 0; padding: 0; }
.cols3__col li { padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.cols3__col--not li { color: var(--ink-soft); }
.cols3__col--not del { text-decoration-color: rgba(163, 25, 91, .55); text-decoration-thickness: 1.5px; }
@media (max-width: 860px) { .cols3 { grid-template-columns: 1fr; } .cols3__col, .cols3__col + .cols3__col { padding: 20px 0 6px; border-left: 0; } .cols3__col + .cols3__col { border-top: 1px solid var(--line); } }

/* ---------- Mehrwert + Anmeldeweg (dunkel) ---------- */
.worth { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.worth__list { list-style: none; margin: 0; padding: 0; counter-reset: w; }
.worth__list li { counter-increment: w; display: grid; grid-template-columns: 40px 1fr; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); color: #ecebe7; font-size: 1.05rem; }
.worth__list li::before { content: "0" counter(w); font-family: var(--font-serif); color: var(--mint); }
.signup { margin-top: clamp(40px, 6vw, 72px); }
.signup__line { --p: 0; position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.signup__line::before, .signup__line::after { content: ""; position: absolute; top: 21px; left: 22px; right: calc(25% - 40px); height: 2px; }
.signup__line::before { background: rgba(255, 255, 255, .16); }
.signup__line::after { background: var(--mint); transform-origin: left; transform: scaleX(var(--p)); transition: transform 1.6s var(--ease); }
.signup.is-on .signup__line { --p: 1; }
.signup__knot { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--anthrazit); border: 2px solid var(--mint); color: #fff; font-family: var(--font-serif); margin-bottom: 16px; }
.signup__step h3 { font-size: 1.1rem; margin-bottom: 6px; }
.signup__step p { color: rgba(236, 235, 231, .78); font-size: .95rem; margin: 0; }
@media (max-width: 860px) {
  .worth { grid-template-columns: 1fr; }
  .signup__line { grid-template-columns: 1fr; gap: 18px; }
  .signup__line::before, .signup__line::after { top: 22px; bottom: 22px; left: 21px; right: auto; width: 2px; height: auto; transform-origin: top; transform: scaleY(var(--p)); }
  .signup__step { display: grid; grid-template-columns: 60px 1fr; }
  .signup__knot { grid-row: span 2; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .signup__line { --p: 1; } }

/* ---------- Ticket mit Stuhlkreis ---------- */
.ticket { display: grid; grid-template-columns: minmax(0, 1fr) auto; background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); position: relative; }
.ticket + .ticket { margin-top: 20px; }
.ticket__main { padding: clamp(22px, 3vw, 34px); min-width: 0; }
.ticket__code { font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px; }
.ticket__flag { margin-left: 8px; padding: .2em .7em; border-radius: var(--r-pill); background: var(--gold-soft); color: var(--gold-deep); letter-spacing: .04em; text-transform: none; }
.ticket__range { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: 6px; }
.ticket__facts { color: var(--ink-soft); font-size: .95rem; margin: 0 0 16px; }
.ticket__mods { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ticket__mod { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 10px; background: var(--paper); font-size: .85rem; font-variant-numeric: tabular-nums; }
.ticket__mod span { display: grid; place-items: center; min-width: 30px; height: 24px; border-radius: 7px; color: #fff; font-size: .74rem; font-weight: 600; background: var(--m1); }
.ticket__mod--1 span { color: var(--ink); }
.ticket__mod--2 span { background: var(--m2); } .ticket__mod--3 span { background: var(--m3); color: var(--ink); } .ticket__mod--4 span { background: var(--m4); } .ticket__mod--5 span { background: var(--m5); }
.ticket__stub { display: grid; grid-template-columns: auto auto; gap: 18px; align-items: center; padding: 22px clamp(20px, 3vw, 32px); border-left: 2px dashed var(--line); position: relative; }
.ticket__stub::before, .ticket__stub::after { content: ""; position: absolute; left: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); }
.ticket__stub::before { top: -11px; } .ticket__stub::after { bottom: -11px; }
.section--white .ticket { background: var(--paper); box-shadow: none; border: 1px solid var(--line); }
.section--white .ticket__stub::before, .section--white .ticket__stub::after { background: var(--white); }
.section--white .ticket__mod { background: var(--white); }
.ticket__buy { display: grid; gap: 10px; justify-items: start; }
.ticket__price { font-family: var(--font-serif); font-size: 1.7rem; margin: 0; }
@media (max-width: 860px) {
  .ticket { grid-template-columns: 1fr; }
  .ticket__stub { border-left: 0; border-top: 2px dashed var(--line); }
  .ticket__stub::before, .ticket__stub::after { top: -12px; bottom: auto; }
  .ticket__stub::before { left: -11px; } .ticket__stub::after { left: auto; right: -11px; }
}

.chairs { margin: 0; text-align: center; }
.chairs svg { width: 220px; max-width: 100%; height: auto; display: block; margin: 0 auto; overflow: visible; }
.chairs--small svg { width: 116px; }
.chairs__floor { fill: var(--paper-2); }
.section--white .chairs__floor, .ticket .chairs__floor { fill: var(--mint-soft); }
.chairs__chair rect { fill: var(--white); stroke: var(--anthrazit); stroke-width: 1.4; transition: fill .4s var(--ease-out), stroke .4s; transition-delay: calc(var(--i, 0) * 60ms); }
.chairs__chair path { fill: none; stroke: var(--anthrazit); stroke-width: 2.2; stroke-linecap: round; }
.chairs.is-on .chairs__chair.is-taken rect, .no-js .chairs__chair.is-taken rect { fill: var(--berry); stroke: var(--berry); }
.chairs.is-on .chairs__chair:not(.is-taken) rect { fill: var(--white); }
.chairs__num { font-family: var(--font-serif); font-size: 22px; font-weight: 600; fill: var(--mint-deep); }
.chairs__lbl { font-family: var(--font-sans); font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase; fill: var(--ink-soft); }
.chairs__lbl--status { font-size: 9px; fill: var(--berry); }
.chairs__cap { margin-top: 10px; font-size: .88rem; color: var(--ink-soft); }

/* ---------- Jahresleiste ---------- */
.yearbar { position: relative; margin-top: clamp(28px, 4vw, 44px); padding-top: 4px; }
.yearbar__months { list-style: none; margin: 0; padding: 0; position: relative; height: 30px; border-bottom: 1.5px solid var(--anthrazit); }
.yearbar__month { position: absolute; left: var(--x, 0); bottom: 0; height: 10px; border-left: 1px solid var(--anthrazit); }
.yearbar__month span { position: absolute; bottom: 14px; left: -1px; font-size: .74rem; color: var(--ink-soft); white-space: nowrap; }
.yearbar__month.is-year { height: 18px; border-left-width: 2px; }
.yearbar__month.is-year span { color: var(--ink); font-weight: 600; }
.yearbar__track { position: relative; min-height: 70px; }
.yearbar__run { position: absolute; top: 14px; left: var(--x, 0); width: var(--w, 10%); min-width: 14px; text-decoration: none; color: var(--ink); }
.yearbar__bar { position: relative; display: block; height: 14px; border-radius: 7px; background: var(--berry); transform-origin: left; }
.js .yearbar__bar { transform: scaleX(0); transition: transform 1s var(--ease-out) .3s; }
.js .yearbar.is-on .yearbar__bar { transform: none; }
.yearbar__bar i { position: absolute; top: 3px; left: var(--x, 0); width: 8px; height: 8px; margin-left: 2px; border-radius: 50%; background: var(--white); }
.yearbar__run.is-closed .yearbar__bar { background: #b9b6ae; }
.yearbar__label { display: block; margin-top: 8px; font-size: .85rem; font-weight: 600; white-space: nowrap; }
.yearbar__run:hover .yearbar__label { color: var(--berry); }
.yearbar__today { position: absolute; top: -10px; bottom: 10px; left: var(--x, 0); border-left: 2px dotted var(--mint-deep); }
.yearbar__today span { position: absolute; top: 34px; left: 6px; font-size: .72rem; color: var(--mint-deep); text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 640px) { .yearbar__month:nth-child(even) span { display: none; } .yearbar__label { font-size: .78rem; } }
@media (prefers-reduced-motion: reduce) { .js .yearbar__bar { transform: none; } }
.dates-hero__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 16px 48px; align-items: end; }
.dates-hero__head h1 { margin-bottom: 0; }
.dates-hero__head .lead { margin: 0; }
@media (max-width: 860px) { .dates-hero__head { grid-template-columns: 1fr; } }
.dates-inhouse { display: grid; grid-template-columns: auto 1fr auto; gap: 12px 28px; align-items: center; margin-top: 32px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dates-inhouse .section__no, .dates-inhouse p { margin: 0; }
@media (max-width: 860px) { .dates-inhouse { grid-template-columns: 1fr; } .dates-inhouse .btn { justify-self: start; } }

/* ---------- Termin vormerken ---------- */
.notify { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px 48px; align-items: center; margin-top: 28px; padding: clamp(22px, 3vw, 34px); border-radius: var(--r-lg); border: 1.5px dashed var(--mint); background: var(--mint-soft); }
.notify h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.notify__text .muted { margin: 0; }
.notify__form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; align-items: end; }
.notify__form .check { grid-column: 1 / -1; }
.notify__form .btn { justify-self: start; }
@media (max-width: 860px) { .notify, .notify__form { grid-template-columns: 1fr; } }

/* ---------- Kursseite: Hero + Kalenderstreifen ---------- */
.course-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 56px; align-items: center; }
.course-hero__title { font-size: clamp(2rem, 5vw, 3.8rem); }
.course-hero__price { color: var(--ink-soft); margin: 0 0 22px; }
.course-hero__price strong { font-family: var(--font-serif); font-size: 1.7rem; color: var(--ink); font-weight: 500; margin-right: 10px; }
@media (max-width: 760px) { .course-hero__grid { grid-template-columns: 1fr; } .course-hero__grid .chairs svg { width: 180px; } }
.strip { margin-top: clamp(28px, 4vw, 48px); }
.strip__axis { position: relative; height: 54px; border-bottom: 1.5px solid var(--anthrazit); }
.strip__ticks i { position: absolute; left: var(--x, 0); bottom: 0; height: 8px; border-left: 1px solid rgba(53, 53, 51, .35); }
.strip__block { position: absolute; bottom: 6px; left: var(--x, 0); width: var(--w, 4%); min-width: 26px; height: 38px; border-radius: 8px; background: var(--m1); display: grid; place-items: center; color: #fff; font-weight: 600; font-size: .85rem; transform-origin: bottom; }
.js .strip__block { transform: scaleY(0); transition: transform .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 140ms + .2s); }
.js .strip.is-on .strip__block { transform: none; }
.strip__block--1 { color: var(--ink); } .strip__block--2 { background: var(--m2); } .strip__block--3 { background: var(--m3); color: var(--ink); } .strip__block--4 { background: var(--m4); } .strip__block--5 { background: var(--m5); }
.strip__block--4 { border-radius: 8px 0 0 8px; } .strip__block--5 { border-radius: 0 8px 8px 0; }
.strip__span { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0 18px; font-size: .8rem; color: var(--ink-soft); }
.strip__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.strip__item { display: grid; gap: 4px; align-content: start; padding: 14px 14px 14px 0; border-bottom: 1px solid var(--line); }
.strip__item + .strip__item { padding-left: 14px; border-left: 1px solid var(--line); }
.strip__no { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--berry); }
.strip__item strong { font-variant-numeric: tabular-nums; font-weight: 600; }
.strip__title { font-size: .9rem; color: var(--ink-soft); }
@media (max-width: 860px) { .strip__list { grid-template-columns: 1fr; } .strip__item, .strip__item + .strip__item { padding: 12px 0; border-left: 0; grid-template-columns: 1fr; } .strip__span span:nth-child(2) { text-align: center; } }
@media (max-width: 640px) { .strip__block { min-width: 0; font-size: .68rem; border-radius: 5px; } }
@media (prefers-reduced-motion: reduce) { .js .strip__block { transform: none; } }

/* ---------- Anmeldung in 3 Schritten ---------- */
.steps__title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 18px; }
.steps__nav { --p: 0; list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.steps__nav::before, .steps__nav::after { content: ""; position: absolute; top: 15px; left: 16px; right: calc(33.33% - 16px); height: 2px; }
.steps__nav::before { background: var(--line); }
.steps__nav::after { background: var(--berry); transform-origin: left; transform: scaleX(var(--p)); transition: transform .6s var(--ease-out); }
.steps__dot { position: relative; z-index: 1; display: grid; gap: 6px; justify-items: start; font-size: .84rem; color: var(--ink-soft); }
.steps__dot span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--white); border: 2px solid var(--line); font-weight: 600; color: var(--ink-soft); transition: background .3s, border-color .3s, color .3s; }
.steps__dot.is-current { color: var(--ink); font-weight: 500; }
.steps__dot.is-current span, .steps__dot.is-done span { background: var(--berry); border-color: var(--berry); color: #fff; }
.no-js .steps__nav { display: none; }
.js [data-steps] .steps__panel:not(.is-current) { display: none; }
.steps__panel + .steps__panel { margin-top: 0; }
.no-js .steps__panel + .steps__panel { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.no-js .steps__actions { display: none; }
.steps__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: flex-end; margin-top: 6px; }
.form-submit .btn--ghost { margin-right: auto; }
.steps__actions .btn--ghost { margin-right: auto; }
.steps__summary { grid-column: 1 / -1; margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--paper); font-size: .92rem; color: var(--ink-soft); }
.steps__summary strong { color: var(--ink); font-weight: 600; }
.steps .form-note.alert p { margin: 0; }
.notes { margin: 28px 0 0; border-top: 1px solid var(--line); }
.notes__row { display: grid; grid-template-columns: 180px 1fr; gap: 6px 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.notes dt { font-weight: 600; }
.notes dd { margin: 0; color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 640px) { .notes__row { grid-template-columns: 1fr; } .steps__dot { font-size: .75rem; } }

/* ---------- Seminarmarkt-Siegel ---------- */
.seminarmarkt { display: inline-block; line-height: 0; border-radius: 4px; overflow: hidden; transition: transform .3s var(--ease-out), box-shadow .3s; }
.seminarmarkt img { width: 150px; height: auto; }
.seminarmarkt:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.seminarmarkt--footer { margin-top: 10px; }
.seminarmarkt--footer img { width: 132px; }
.wb-dates-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 24px; }
.wb-dates-foot a:not(.seminarmarkt) { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.wb-dates-foot__sm { display: inline-flex; align-items: center; gap: 12px; }
.wb-dates-foot__sm img { width: 120px; }

/* ---------- Über uns ---------- */
.about-hero__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px 56px; align-items: center; }
.about-hero__head h1 { margin-bottom: 0; }
.about-hero__head .lead { margin: 18px 0 0; }
.about-hero__photo { aspect-ratio: 4 / 3; max-height: 420px; }
.about-hero__photo img { object-position: 50% 35%; }
@media (max-width: 860px) { .about-hero__head { grid-template-columns: 1fr; } .about-hero__photo { aspect-ratio: 3 / 2; max-width: 560px; } }
.about-why__statement { font-family: var(--font-serif); font-size: clamp(1.4rem, 2.8vw, 2.1rem); line-height: 1.3; max-width: 44ch; color: var(--ink); margin: 0 0 clamp(28px, 4vw, 48px); }
.about-why__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1.5px solid var(--anthrazit); }
.about-why__facts > div { padding: 18px 24px 4px 0; }
.about-why__facts > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.about-why__facts dt { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--berry); font-weight: 600; margin-bottom: 8px; }
.about-why__facts dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 860px) { .about-why__facts { grid-template-columns: 1fr; } .about-why__facts > div, .about-why__facts > div + div { padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--line); } }
.profile { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.profile + .profile { margin-top: clamp(56px, 8vw, 104px); }
.profile--rev { grid-template-columns: minmax(0, 1fr) 240px; }
.profile .person__photo { aspect-ratio: 4 / 5; max-width: 240px; }
.profile--rev .person__photo { order: 2; }
.profile .person__photo { position: sticky; top: calc(var(--header-h) + 24px); }
.profile__role { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin: 0 0 6px; }
.profile__name { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 14px; }
.profile__lead { font-family: var(--font-serif); font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.4; color: var(--ink); }
.profile__body > p:not(.profile__lead):not(.profile__role) { color: var(--ink-soft); }
.profile__quals { margin: 22px 0 18px; border-top: 1px solid var(--line); }
.profile__quals summary { cursor: pointer; padding: 14px 0 8px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--berry); font-weight: 600; list-style: none; }
.profile__quals summary::-webkit-details-marker { display: none; }
.profile__quals ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; }
.profile__quals li { break-inside: avoid; padding: 8px 0 8px 18px; position: relative; font-size: .95rem; border-bottom: 1px solid var(--line); }
.profile__quals li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 8px; height: 1.5px; background: var(--mint-deep); }
.profile__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
@media (max-width: 860px) {
  .profile, .profile--rev { grid-template-columns: 1fr; }
  .profile--rev .person__photo { order: 0; }
  .profile .person__photo { position: static; max-width: 180px; }
  .profile__quals ul { columns: 1; }
}
.stance { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.stance li { padding: 22px 0; border-top: 1px solid var(--line); font-family: var(--font-serif); font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.35; color: var(--ink-soft); }
.stance strong { color: var(--ink); font-weight: 500; }
@media (max-width: 760px) { .stance { grid-template-columns: 1fr; } }
.about-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px 64px; align-items: start; }
.about-contact__list { margin: 0; border-top: 1.5px solid var(--anthrazit); }
.about-contact__list > div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.about-contact__list dt { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.about-contact__list dd { margin: 0; }
@media (max-width: 860px) { .about-contact { grid-template-columns: 1fr; } .about-contact__list > div { grid-template-columns: 1fr; gap: 4px; } }

/* =====================================================================
   v7 · Bilder: ruhig, gerade, ohne Rahmen – Bewegung statt Deko (02.11. abends)
   Fotos mit kleinen Ecken, ohne Schatten. Beim Erscheinen zieht ein Vorhang in Markenfarbe nach oben weg,
   das Foto setzt sich leicht (Zoom 1.1 → 1). Auf Handy/iPad begrenzte Höhen, damit kein Bild den Bildschirm füllt.
   ===================================================================== */
:root { --r-photo: 10px; --organic-1: var(--r-photo); --organic-2: var(--r-photo); --organic-3: var(--r-photo); }
.ph { position: relative; overflow: hidden; border-radius: var(--r-photo) !important; box-shadow: none !important; background: var(--paper-2); isolation: isolate; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph::after { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--ph-curtain, var(--mint)); transform: scaleY(0); transform-origin: top; pointer-events: none; }
.js .ph:not(.is-in)::after { transform: scaleY(1); }
.js .ph img { transform: scale(1.1); transition: transform 1.6s var(--ease-out) .15s; }
.js .ph.is-in img { transform: scale(1); }
.js .ph.is-in::after { transition: transform .9s var(--ease) ; }
.ph--berry { --ph-curtain: var(--berry); } .ph--gold { --ph-curtain: var(--gold); } .ph--ink { --ph-curtain: var(--anthrazit); }
.section--ink .ph { --ph-curtain: var(--mint-deep); }
.gallery-organic figure.ph:hover img, .thread__media.ph:hover img { transform: scale(1.04); transition-duration: .8s; }
@media (prefers-reduced-motion: reduce) { .js .ph::after { display: none; } .js .ph img { transform: none; transition: none; } }
.hero-photo__fact { border-radius: var(--r-photo); }
.blob { display: none; }
@media (max-width: 1000px) {
  .stack__media, .split-media .unveil, .unveil--tall, .hero-photo__img, .thread__media, .timeline__media { aspect-ratio: 3 / 2 !important; max-height: 58vh; height: auto; }
  .split-media .unveil, .stack__media { max-width: 640px; }
  .person__photo { max-width: 280px; }
}
@media (max-width: 600px) { .stack__media, .split-media .unveil, .unveil--tall, .hero-photo__img { aspect-ratio: 4 / 3 !important; } }

/* ---------- Start-Hero: zwei Schuhe, Faden entlang der Wurzel (statt Schieberegler) ---------- */
.shoes { position: relative; margin: 0; }
.shoes__photo { aspect-ratio: 1184 / 864; }
.shoes__thread { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; border-radius: var(--r-photo); }
.shoes__thread path { fill: none; stroke: var(--mint); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.shoes__thread .shoes__branch { stroke-width: 5; opacity: .85; }
.shoes.is-on .shoes__root { stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s var(--ease) .9s; }
.shoes.is-on .shoes__branch { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease) 2.2s; }
.shoes__tag { position: absolute; z-index: 4; top: 18px; padding: 7px 14px; border-radius: var(--r-pill); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: rgba(255, 252, 247, .94); color: var(--ink); opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.shoes__tag::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.shoes__tag--a { left: 18px; } .shoes__tag--a::before { background: var(--berry); }
.shoes__tag--b { right: 18px; } .shoes__tag--b::before { background: var(--mint); }
.shoes.is-on .shoes__tag { opacity: 1; transform: none; transition-delay: .9s; }
.shoes.is-on .shoes__tag--b { transition-delay: 1.1s; }
.shoes__fact { position: absolute; z-index: 4; left: 18px; right: 18px; bottom: 18px; max-width: 340px; padding: 12px 16px; border-radius: var(--r-photo); background: rgba(255, 252, 247, .95); font-size: .9rem; color: var(--ink-soft); }
.shoes__fact strong { font-family: var(--font-serif); font-size: 1.25rem; color: var(--berry); margin-right: 4px; }
.no-js .shoes__thread path { stroke-dashoffset: 0; } .no-js .shoes__tag { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .shoes__thread path { stroke-dashoffset: 0 !important; } .shoes__tag { opacity: 1; transform: none; } }
@media (max-width: 600px) { .shoes__fact { font-size: .8rem; padding: 8px 12px; left: 10px; bottom: 10px; } .shoes__tag { top: 10px; font-size: .7rem; } .shoes__tag--a { left: 10px; } .shoes__tag--b { right: 10px; } }

/* ---------- Startseite: Lernweg als Faden mit Knoten (ersetzt .journey) ---------- */
.lane-wrap { --p: 0; position: relative; }
.lane { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.lane::before, .lane::after { content: ""; position: absolute; top: 21px; left: 22px; right: calc(20% - 44px); height: 2px; }
.lane::before { background: var(--line); }
.lane::after { background: var(--berry); transform-origin: left; transform: scaleX(0); transition: transform 1.8s var(--ease); }
.lane-wrap.is-on .lane::after { transform: none; }
.lane-wrap.is-on .lane-wrap.is-on .lane__step { position: relative; }
.lane__knot { position: relative; z-index: 1; overflow: visible; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--paper-2); border: 2px solid var(--line); font-family: var(--font-serif); font-weight: 600; color: var(--ink-soft); margin-bottom: 18px; transition: background .4s, border-color .4s, color .4s, transform .5s var(--ease-out); transition-delay: calc(var(--k, 0) * 380ms + .2s); }
.lane-wrap.is-on .lane__knot { background: var(--berry); border-color: var(--berry); color: #fff; }
.lane-wrap.is-on .lane__step--4 .lane__knot, .lane-wrap.is-on .lane__step--5 .lane__knot { background: var(--anthrazit); border-color: var(--anthrazit); }
.lane__step:hover .lane__knot { transform: scale(1.1); }
.lane__meta { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin: 0 0 6px; }
.lane__step h3 { font-size: 1.08rem; margin-bottom: .35em; }
.lane__step > p:last-child { font-size: .94rem; color: var(--ink-soft); margin: 0; }
.lane-wrap + .actions { margin-top: 40px; }
@media (max-width: 900px) {
  .lane { grid-template-columns: 1fr; gap: 22px; padding-left: 62px; }
  .lane::before, .lane::after { top: 22px; bottom: 22px; left: 21px; right: auto; width: 2px; height: auto; }
  .lane::after { transform-origin: top; transform: scaleY(0); }
  .lane__knot { position: absolute; left: -62px; top: 0; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .lane::after { transform: none !important; transition: none; } .lane__knot { transition: none; } }

/* ---------- Weiterbildung: zwei Fäden werden ein Seil (ersetzt Venn-Diagramm) ---------- */
.braid-section { --sec: var(--paper-2); --fade: clamp(48px, 6vw, 100px); background: linear-gradient(180deg, var(--paper) 0, var(--sec) var(--fade), var(--sec) calc(100% - var(--fade)), var(--paper) 100%); }
.braid { margin: 0 0 clamp(24px, 4vw, 44px); }
.braid__svg { width: 100%; height: auto; display: block; overflow: visible; }
.braid__s { fill: none; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.braid__s--a { stroke: var(--mint); }
.braid__s--b { stroke: var(--berry); mix-blend-mode: multiply; }
.braid__start--a { fill: var(--mint); } .braid__start--b { fill: var(--berry); }
.braid__knot circle { fill: var(--anthrazit); }
.braid__knot path { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.braid__knot { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .6s var(--ease-out) 2.3s; }
.braid.is-on .braid__s { stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s var(--ease); }
.braid.is-on .braid__s--b { transition-delay: .15s; }
.braid.is-on .braid__knot { transform: scale(1); }
.no-js .braid__s { stroke-dashoffset: 0; } .no-js .braid__knot { transform: none; }
.braid__defs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1.5px solid var(--anthrazit); }
.braid__defs > div { padding: 18px 24px 4px 0; }
.braid__defs > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.braid__defs dt { font-family: var(--font-serif); font-size: 1.2rem; display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.braid__defs dd { margin: 0; color: var(--ink-soft); }
.braid__key { width: 22px; height: 5px; border-radius: 3px; }
.braid__key--a { background: var(--mint); } .braid__key--b { background: var(--berry); }
.braid__key--c { width: 14px; height: 14px; border-radius: 50%; background: var(--anthrazit); }
@media (max-width: 860px) { .braid__defs { grid-template-columns: 1fr; } .braid__defs > div, .braid__defs > div + div { padding: 14px 0; border-left: 0; border-bottom: 1px solid var(--line); } .braid__s { stroke-width: 10; } }
@media (prefers-reduced-motion: reduce) { .braid__s { stroke-dashoffset: 0 !important; } .braid__knot { transform: none !important; } }

/* ---------- Förderung: Beleg statt Kacheln ---------- */
.receipt { position: relative; padding: clamp(22px, 3vw, 34px); background: var(--white); border-radius: var(--r-photo); box-shadow: var(--shadow); font-variant-numeric: tabular-nums;
  -webkit-mask: radial-gradient(circle 7px at 50% 0, transparent 6.5px, #000 7px) 0 0 / 22px 100% repeat-x; mask: radial-gradient(circle 7px at 50% 0, transparent 6.5px, #000 7px) 0 0 / 22px 100% repeat-x; padding-top: clamp(28px, 3vw, 40px); }
.receipt__head { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.receipt__head span:first-child { color: var(--berry); }
.receipt__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; }
.receipt__row strong { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 600; white-space: nowrap; }
.receipt__row--minus { color: var(--mint-deep); }
.receipt__row--minus span:first-child { font-size: .95rem; }
.receipt__row--total { margin-top: 6px; padding-top: 14px; border-top: 3px double var(--anthrazit); }
.receipt__row--total span:first-child { font-weight: 600; }
.receipt__row--total strong { font-size: clamp(2rem, 4vw, 2.6rem); color: var(--berry); }
.receipt__bar { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin: 6px 0 8px; }
.receipt__seg { height: 16px; border-radius: 4px; background: var(--paper-2); position: relative; overflow: hidden; }
.receipt__seg::after { content: ""; position: absolute; inset: 0; background: var(--mint); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); transition-delay: calc(var(--i, 0) * 140ms + .3s); }
.receipt__seg--mine::after { background: var(--berry); }
.receipt.is-on .receipt__seg::after { transform: none; }
.receipt__legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 0 0 8px; font-size: .82rem; color: var(--ink-soft); }
.receipt__key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.receipt__key--fund { background: var(--mint); } .receipt__key--mine { background: var(--berry); }
.receipt__stamp { position: absolute; right: clamp(16px, 3vw, 30px); top: clamp(18px, 2.4vw, 26px); padding: 8px 14px; border: 3px solid var(--mint-deep); border-radius: 8px; color: var(--mint-deep); font-weight: 700; letter-spacing: .14em; font-size: .9rem; line-height: 1.1; text-align: center; transform: rotate(-9deg) scale(1.6); opacity: 0; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), opacity .2s; mix-blend-mode: multiply; }
.receipt__stamp small { font-size: .62rem; letter-spacing: .2em; font-weight: 600; }
.receipt.is-done .receipt__stamp { opacity: .85; transform: rotate(-9deg) scale(1); }
.receipt__note { margin: 14px 0 0; font-size: .82rem; color: var(--ink-soft); }
.no-js .receipt__seg::after { transform: none; } .no-js .receipt__stamp { opacity: .85; transform: rotate(-9deg); }
@media (prefers-reduced-motion: reduce) { .receipt__seg::after { transform: none !important; transition: none; } .receipt__stamp { opacity: .85; transform: rotate(-9deg); transition: none; } }
@media (max-width: 480px) { .receipt__stamp { font-size: .72rem; padding: 6px 10px; } }

.split-media .unveil, .unveil--tall { max-height: 620px; }

/* Chat-Knopf: auf Handy/iPad nur rund, auf dem Desktop nach dem ersten Scrollen eingeklappt (Text beim Überfahren) */
.chat__toggle span { display: inline-block; max-width: 14em; overflow: hidden; white-space: nowrap; transition: max-width .4s var(--ease), opacity .3s; }
.chat--compact .chat__toggle { padding: 15px; gap: 0; }
.chat--compact .chat__toggle span { max-width: 0; opacity: 0; }
.chat--compact .chat__toggle:hover, .chat--compact .chat__toggle:focus-visible { padding: 14px 20px; gap: 10px; }
.chat--compact .chat__toggle:hover span, .chat--compact .chat__toggle:focus-visible span { max-width: 14em; opacity: 1; }
@media (max-width: 1000px) { .chat__toggle span { display: none; } .chat__toggle { padding: 14px; } .chat { right: 14px; bottom: 14px; } }
@media (max-width: 1000px) { .shoes { max-width: 600px; margin: 0 auto; width: 100%; } }
.stack__media, .split-media > figure, .split-media .unveil, .unveil--tall { max-height: 540px; }
.stack__media img, .split-media > figure img { height: 100%; }
.ph picture, .stack__media picture, .split-media > figure picture { display: block; height: 100%; }

/* =====================================================================
   v8 · Der „Übersetzer“: Übung → Debriefing → Unternehmen
   Farbweg von Erlebnis (Mint, hell) über Reflexion (weiß, Beere) zu Business (Anthrazit).
   ===================================================================== */
.tr { background: var(--white); }
.tr__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 12px 48px; align-items: end; margin-bottom: clamp(24px, 3vw, 36px); }
.tr__head h2 { margin: 0; }
.tr__head .lead { margin: 0; }
.tr__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1.5px solid var(--anthrazit); margin-bottom: 18px; }
.tr__tab { display: grid; gap: 2px; text-align: left; padding: 14px 16px 14px 0; border: 0; border-bottom: 3px solid transparent; background: none; font: inherit; color: var(--ink-soft); cursor: pointer; transition: color .2s, border-color .3s; }
.tr__tab + .tr__tab { padding-left: 16px; border-left: 1px solid var(--line); }
.tr__tab span { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; color: inherit; }
.tr__tab small { font-size: .82rem; }
.tr__tab:hover { color: var(--ink); }
.tr__tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--berry); }
.tr__tab:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }
.js .tr__panel:not(.is-active) { display: none; }
.no-js .tr__panel + .tr__panel { margin-top: 24px; }
.tr__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.tr__step { position: relative; padding: clamp(20px, 2.6vw, 30px); display: grid; align-content: start; gap: 10px; }
.tr__step h3 { margin: 0; font-size: 1.25rem; }
.tr__step p { margin: 0; }
.tr__step--a { background: var(--mint-soft); border-radius: var(--r-photo) 0 0 var(--r-photo); }
.tr__step--b { background: var(--paper); }
.tr__step--c { background: var(--anthrazit); color: #ecebe7; border-radius: 0 var(--r-photo) var(--r-photo) 0; }
.tr__step--c h3 { color: #fff; }
.tr__step + .tr__step::before { content: ""; position: absolute; z-index: 2; left: -13px; top: 34px; width: 26px; height: 26px; border-radius: 50%; background: var(--white); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.tr__step + .tr__step::after { content: ""; position: absolute; z-index: 3; left: -5px; top: 43px; width: 7px; height: 7px; border-top: 2px solid var(--berry); border-right: 2px solid var(--berry); transform: rotate(45deg); }
.tr__label { display: flex; align-items: center; gap: 10px; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--mint-deep); }
.tr__label span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--mint-deep); color: #fff; letter-spacing: 0; font-size: .78rem; }
.tr__step--b .tr__label { color: var(--berry); } .tr__step--b .tr__label span { background: var(--berry); }
.tr__step--c .tr__label { color: var(--mint); } .tr__step--c .tr__label span { background: var(--mint); color: var(--anthrazit); }
.tr__seen { font-size: .92rem; color: var(--ink-soft); padding-top: 10px; border-top: 1px dashed rgba(35, 112, 79, .35); }
.tr__seen strong { color: var(--ink); font-weight: 600; }
.tr__step--b blockquote { margin: 4px 0 0; font-family: var(--font-serif); font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.3; color: var(--ink); }
.tr__step--b blockquote::before { content: "„"; color: var(--berry); }
.tr__step--b blockquote::after { content: "“"; color: var(--berry); }
.tr__hint { font-size: .88rem; color: var(--ink-soft); }
.tr__step--c p { color: rgba(236, 235, 231, .82); }
.tr__monday { padding-top: 10px; border-top: 1px dashed rgba(255, 255, 255, .25); color: #fff !important; }
.tr__monday strong { color: var(--mint); font-weight: 600; }
.tr__foot { margin: 16px 0 0; }
.js .tr__panel.is-active .tr__step { animation: tr-in .5s var(--ease-out) both; }
.js .tr__panel.is-active .tr__step--b { animation-delay: .12s; }
.js .tr__panel.is-active .tr__step--c { animation-delay: .24s; }
@keyframes tr-in { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 900px) {
  .tr__head { grid-template-columns: 1fr; }
  .tr__tabs { grid-template-columns: 1fr 1fr; }
  .tr__tab:nth-child(3) { padding-left: 0; border-left: 0; }
  .tr__tab:nth-child(n+3) { border-top: 1px solid var(--line); }
  .tr__steps { grid-template-columns: 1fr; }
  .tr__step--a { border-radius: var(--r-photo) var(--r-photo) 0 0; }
  .tr__step--c { border-radius: 0 0 var(--r-photo) var(--r-photo); }
  .tr__step + .tr__step::before { left: 50%; top: -13px; margin-left: -13px; }
  .tr__step + .tr__step::after { left: 50%; top: -6px; margin-left: -4px; transform: rotate(135deg); }
}
@media (prefers-reduced-motion: reduce) { .js .tr__panel.is-active .tr__step { animation: none; } }

/* =====================================================================
   v8 · 02.11.2026 spät: ein Bilderrahmen für alle Fotos, kompakter Fuß mit Netzwerk, kleiner Chat-Knopf
   Rahmen: helles Passepartout (6 px), gleiche Ecken (18/12 px), feine Linie, weicher Schatten.
   Einblendung: Bild zieht sich ruhig aus der Mitte auf (clip-path), Foto setzt sich leicht. Kein Farbvorhang mehr.
   ===================================================================== */
:root { --r-photo: 18px; }
.ph, .frame { position: relative; overflow: hidden; padding: 6px; background: var(--white) !important; border: 1px solid var(--line); border-radius: 18px !important;
  box-shadow: 0 1px 0 rgba(53, 53, 51, .04), 0 22px 44px -30px rgba(53, 53, 51, .35) !important; isolation: isolate; }
.ph picture, .frame picture { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 12px; }
.ph img, .frame img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 12px; }
.ph::after { display: none !important; }
.js .ph, .js .frame { transition: clip-path 1.4s cubic-bezier(.16, 1, .3, 1), opacity 1s ease; }
.js .ph:not(.is-in), .js .frame:not(.is-in) { clip-path: inset(7% 7% 7% 7% round 18px); opacity: 0; }
.js .ph.is-in, .js .frame.is-in { clip-path: inset(0 round 18px); opacity: 1; }
.js .ph img, .js .frame img { transform: scale(1.08); transition: transform 2s cubic-bezier(.16, 1, .3, 1) .1s; }
.js .ph.is-in img, .js .frame.is-in img { transform: scale(1); }
a:hover .ph.is-in img, .ph.is-in:hover img { transform: scale(1.03); transition-duration: 1s; }
@media (prefers-reduced-motion: reduce) { .js .ph, .js .frame { clip-path: none !important; opacity: 1 !important; transition: none; } .js .ph img, .js .frame img { transform: none !important; transition: none; } }

/* Chat: immer kleiner runder Knopf, Text nur beim Darüberfahren */
.chat__toggle { padding: 15px; gap: 0; }
.chat__toggle span { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width .35s ease, opacity .25s ease; }
@media (hover: hover) { .chat__toggle:hover, .chat__toggle:focus-visible { padding: 14px 20px; gap: 10px; } .chat__toggle:hover span, .chat__toggle:focus-visible span { max-width: 14em; opacity: 1; } }

/* Fuß: kompakt, drei kurze Spalten, Netzwerk */
.site-footer--v8 { margin-top: 0; padding: 52px 0 22px; background: var(--white); color: var(--ink-soft); font-size: .92rem; border-top: 1px solid var(--line); }
.site-footer--v8::before { width: 100%; height: 3px; background: linear-gradient(90deg, var(--mint) 0 33%, var(--berry) 33% 66%, var(--gold) 66%); }
.site-footer--v8 .site-footer__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 48px; padding-bottom: 34px; }
.site-footer--v8 .site-footer__logo { display: inline-block; margin: 0 0 14px; padding: 0; background: none; }
.site-footer--v8 .site-footer__logo img { height: 46px; width: auto; display: block; }
.site-footer--v8 .site-footer__about p { margin: 0 0 12px; max-width: 34ch; }
.site-footer--v8 .site-footer__contact { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.site-footer--v8 .site-footer__contact a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; }
.site-footer--v8 .site-footer__contact .icon { width: 18px; height: 18px; color: var(--mint-deep); }
.site-footer--v8 .site-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.site-footer--v8 .site-footer__title { margin: 0 0 12px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.site-footer--v8 li { margin-bottom: 7px; }
.site-footer--v8 a { color: var(--ink-soft); text-decoration: none; }
.site-footer--v8 a:hover { color: var(--berry); }
.site-footer__net { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-top: 22px; padding-bottom: 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.site-footer__net .site-footer__title { margin: 0; }
.site-footer__net ul { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; list-style: none; margin: 0; padding: 0; }
.site-footer__net li { margin: 0; }
.site-footer__net li a { display: block; padding: 9px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); transition: border-color .3s, transform .3s; }
.site-footer__net li a:hover { border-color: var(--mint); transform: translateY(-2px); }
.site-footer__net strong { display: block; font-family: var(--font-serif); font-weight: 600; color: var(--ink); font-size: 1rem; line-height: 1.2; }
.site-footer__net small { display: block; font-size: .78rem; color: var(--ink-soft); }
.site-footer__net .site-footer__badge a { padding: 0; border: 0; background: none; border-radius: 6px; overflow: hidden; }
.site-footer__net .site-footer__badge img { height: 54px; width: auto; display: block; }
.site-footer--v8 .site-footer__legal { padding-top: 18px; font-size: .8rem; }
.site-footer--v8 .site-footer__legal ul { gap: 16px; }
@media (max-width: 900px) { .site-footer--v8 .site-footer__top { grid-template-columns: minmax(0, 1fr); gap: 30px; } }
@media (max-width: 520px) { .site-footer--v8 .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer__net { flex-direction: column; align-items: flex-start; } }

/* Netzwerk-Logos im Fuß (04.11.): Logo statt Text, gleiche Höhe, ruhige Kachel */
.site-footer__net .site-footer__partner a { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 18px; min-width: 150px; }
.site-footer__net .net-logo { display: block; height: 28px; width: auto; }
.site-footer__net .net-wordmark { display: block; height: 28px; line-height: 28px; font-family: var(--font-serif); font-size: 1.3rem; letter-spacing: .01em; color: var(--ink); }

/* Förder-Vorcheck als Klick-Strecke (04.11.) */
.vcheck-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 70px); align-items: start; }
.vcheck { position: relative; }
.vcheck__dots { display: none; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; }
.vcheck__dots li { width: 34px; height: 6px; border-radius: 3px; background: var(--paper); transition: background-color .3s; }
.vcheck__dots li.is-done { background: var(--mint); }
.vcheck__dots li.is-current { background: var(--berry); }
.vcheck__count { display: none; margin: 0 0 6px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.vcheck__step { margin-bottom: 18px; }
.vcheck__step legend { font-family: var(--font-serif); font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.25; }
.vcheck__back { display: none; margin-top: 12px; border: 0; background: none; color: var(--ink-soft); font: inherit; font-size: .9rem; cursor: pointer; padding: 4px 0; }
.vcheck__back .icon { transform: rotate(180deg); }
.vcheck__result { padding: 22px; border-radius: 16px; background: var(--mint-soft); margin-bottom: 18px; }
.vcheck__result[data-tone="maybe"] { background: var(--gold-soft, #fbf2d6); }
.vcheck__result[data-tone="no"] { background: var(--berry-soft, #f9e6ef); }
.vcheck__verdict { margin: 0 0 6px; font-family: var(--font-serif); font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.vcheck.is-js .vcheck__dots { display: flex; }
.vcheck.is-js .vcheck__count, .vcheck.is-js .vcheck__back { display: block; }
.vcheck.is-js .vcheck__step { display: none; }
.vcheck.is-js .vcheck__step.is-current { display: block; animation: vcheck-in .35s ease both; }
.vcheck.is-js .vcheck__contact { display: none; }
.vcheck.is-js .vcheck__contact.is-open { display: grid; animation: vcheck-in .35s ease both; }
.vcheck.is-js .vcheck__nojs { display: none; }
@keyframes vcheck-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vcheck.is-js .vcheck__step.is-current, .vcheck.is-js .vcheck__contact.is-open { animation: none; } }
@media (max-width: 820px) { .vcheck-wrap { grid-template-columns: minmax(0, 1fr); } }

/* Interne Sammelseite „Elemente“ (04.11., nur Testseite) */
.elem-index { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 22px 0 0; padding: 0; counter-reset: e; }
.elem-index li { counter-increment: e; }
.elem-index a { display: inline-flex; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--card, #fffcf7); border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: .9rem; }
.elem-index a::before { content: counter(e, decimal-leading-zero); color: var(--berry); }
.elem { border-top: 1px dashed var(--line); }
.elem-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 26px; }
.elem-no { margin: 0; font-family: var(--font-serif); font-size: 2.4rem; line-height: 1; color: var(--berry); }
.elem-head h2 { margin: 0 0 10px; }
.elem-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.elem-facts div { padding: 10px 14px; border-radius: 12px; background: var(--paper); }
.elem-facts dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.elem-facts dd { margin: 2px 0 0; font-size: .92rem; }
.elem-stage { max-width: 980px; }
.elem-stage > figure { margin: 0 auto; }
@media (max-width: 760px) { .elem-facts { grid-template-columns: minmax(0, 1fr); } }
.elem .lane-wrap { position: relative; }
.elem .lane__profile { display: block; width: 100%; height: 150px; margin-bottom: 10px; }
.elem .lane__ridge { fill: var(--mint-soft); }
.elem .lane__path { fill: none; stroke: var(--berry); stroke-width: 2; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.elem .lane__flag { width: 14px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.elem-stage .shoes, .elem-stage .worlds { max-width: 860px; margin-left: auto; margin-right: auto; }
.elem-stage .shoes { aspect-ratio: 4 / 3; height: auto; }
.elem-stage .shoes { position: relative; inset: auto; width: 100%; max-width: 860px; min-height: 0; }
.elem-stage .shoes__photo, .elem-stage .shoes__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Interaktiv (04.11.) ---------- */
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .grid--5 { grid-template-columns: minmax(0, 1fr); } }
.card--rplan { background: var(--mint-soft); }

/* Modul-Wegweiser */
.guide { --p: 0; }
.guide__track { position: relative; display: none; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: 26px; }
.guide__track::before, .guide__track::after { content: ""; position: absolute; left: 8%; right: 8%; top: 22px; height: 3px; border-radius: 2px; background: var(--paper); }
.guide__track::after { right: auto; width: calc(84% * var(--p)); background: var(--mint); transition: width .5s ease; }
.guide__tab { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 0; background: none; font: inherit; color: var(--ink-soft); cursor: pointer; padding: 0 0 4px; }
.guide__knot { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--card, #fff); border: 2px solid var(--line); font-family: var(--font-serif); font-size: 1.15rem; color: var(--ink); transition: background-color .3s, border-color .3s, transform .3s, color .3s; }
.guide__knot .icon { width: 20px; height: 20px; }
.guide__tab.is-done .guide__knot { border-color: var(--mint); background: var(--mint-soft); }
.guide__tab[aria-selected="true"] .guide__knot { background: var(--berry); border-color: var(--berry); color: #fff; transform: scale(1.08); }
.guide__tab[aria-selected="true"] .guide__label { color: var(--ink); }
.guide__label { font-size: .85rem; }
.guide__panel { padding: 22px 24px; border-radius: 18px; background: var(--paper); margin-bottom: 14px; }
.guide__panel h3 { margin: 4px 0 10px; font-family: var(--font-serif); font-size: clamp(1.2rem, 2vw, 1.5rem); }
.guide__meta { margin: 0; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--berry); }
.guide__after { font-size: 1.08rem; margin: 0 0 10px; }
.guide__after span { display: block; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mint-deep); margin-bottom: 2px; }
.guide__list { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; }
.guide__panel--end { background: var(--mint-soft); }
.guide.is-js .guide__track { display: grid; }
.guide.is-js .guide__panel { display: none; margin: 0; }
.guide.is-js .guide__panel.is-active { display: block; animation: vcheck-in .35s ease both; }
@media (max-width: 640px) { .guide__label { font-size: .72rem; } .guide__knot { width: 38px; height: 38px; } .guide__track::before, .guide__track::after { top: 18px; } }

/* Kostenrechner */
.calc2-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 70px); align-items: start; }
.calc2 .choice__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.calc2__rates { margin-top: 14px; max-width: 220px; }
.calc2__rates[hidden] { display: none; }
.calc2__out { margin: 20px 0 6px; padding: 20px 22px; border-radius: 16px; background: var(--paper); }
.calc2__label { margin: 0; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.calc2__big { margin: 2px 0 6px; font-family: var(--font-serif); font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.05; color: var(--berry); font-variant-numeric: tabular-nums; }
.calc2__note { margin: 0; color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 820px) { .calc2-wrap { grid-template-columns: minmax(0, 1fr); } }

/* Termin-Finder */
.finder { margin-top: 28px; padding: 20px 22px; border-radius: 18px; background: var(--card, #fffcf7); border: 1px solid var(--line); }
.finder__q { margin: 0 0 12px; font-family: var(--font-serif); font-size: 1.2rem; }
.finder__months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.finder__month { position: relative; display: flex; flex-direction: column; align-items: center; padding: 10px 2px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--paper); font: inherit; cursor: pointer; transition: border-color .25s, background-color .25s, transform .25s; }
.finder__month span { font-size: .95rem; } .finder__month small { font-size: .7rem; color: var(--ink-soft); }
.finder__month.has-course::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--mint-deep); }
.finder__month:hover { transform: translateY(-2px); }
.finder__month.is-on { border-color: var(--berry); background: var(--berry-soft); }
.finder__out { margin-top: 14px; display: grid; gap: 8px; }
.finder__hint, .finder__none { margin: 0; color: var(--ink-soft); }
.finder__hit { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; padding: 14px 16px; border-radius: 14px; background: var(--mint-soft); text-decoration: none; color: var(--ink); }
.finder__hit strong { font-family: var(--font-serif); font-size: 1.1rem; }
.finder__seats { margin-left: auto; color: var(--mint-deep); font-weight: 600; }
.finder__hit[hidden], .finder__none[hidden], .finder__hint[hidden] { display: none; }
@media (max-width: 760px) { .finder__months { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Übungs-Finder */
.quiz__hit { padding: 20px 22px; border-radius: 16px; background: var(--mint-soft); }
.quiz__hit h3 { margin: 2px 0 8px; font-family: var(--font-serif); font-size: 1.5rem; }
.quiz__q span, .quiz__m span { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--berry); }
.quiz.is-js [data-quiz-step] { display: none; }
.quiz.is-js [data-quiz-step].is-current { display: block; animation: vcheck-in .35s ease both; }
.quiz.is-js .vcheck__count { display: block; }
.quiz__hit[hidden], .quiz__size[hidden], .quiz [data-quiz-actions][hidden] { display: none; }

/* Routenplaner (vorher „Lotse“) */
.rplan-section { background: var(--paper); }
.rplan-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 70px); align-items: start; }
.rplan { padding: 22px; border-radius: 20px; background: var(--card, #fffcf7); box-shadow: 0 10px 34px rgba(53, 53, 51, .07); }
.rplan__log { display: flex; flex-direction: column; gap: 10px; min-height: 120px; max-height: 460px; overflow-y: auto; padding: 4px; }
.rplan__msg { margin: 0; max-width: 88%; padding: 11px 15px; border-radius: 16px; line-height: 1.5; }
.rplan__msg--bot { align-self: flex-start; background: var(--paper); border-bottom-left-radius: 4px; }
.rplan__msg--me { align-self: flex-end; background: var(--mint-deep); color: #fff; border-bottom-right-radius: 4px; }
.rplan__typing { letter-spacing: .2em; color: var(--ink-soft); }
.rplan__links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rplan__links a { padding: 5px 12px; border-radius: 999px; background: var(--card, #fff); border: 1px solid var(--line); text-decoration: none; font-size: .9rem; }
.rplan__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rplan__chip { padding: 9px 15px; border-radius: 999px; border: 1.5px solid var(--mint); background: none; font: inherit; color: var(--mint-deep); cursor: pointer; transition: background-color .25s, transform .25s; }
.rplan__chip:hover { background: var(--mint-soft); transform: translateY(-1px); }
.rplan__brief { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.rplan__brief[hidden] { display: none; }
.rplan__brief-title { margin: 0; font-family: var(--font-serif); font-size: 1.15rem; }
.chat__rplan { display: inline-flex; align-items: center; gap: 6px; margin: 4px 14px 0; font-size: .88rem; color: var(--mint-deep); }
@media (max-width: 820px) { .rplan-wrap { grid-template-columns: minmax(0, 1fr); } }
.elem-new__title { margin: 28px 0 10px; font-size: 1.25rem; }
.elem-new { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.elem-new a { display: block; height: 100%; padding: 14px 16px; border-radius: 14px; background: var(--mint-soft); text-decoration: none; color: var(--ink); transition: transform .25s; }
.elem-new a:hover { transform: translateY(-2px); }
.elem-new strong { display: block; font-family: var(--font-serif); font-size: 1.05rem; }
.elem-new span { display: block; font-size: .88rem; color: var(--ink-soft); }

.site-footer__net .site-footer__partner a { min-width: 0; padding: 14px 20px; }
.site-footer__net .net-logo { height: 32px; }
.site-footer__legal { padding-right: 96px; }
@media (max-width: 640px) { .site-footer__legal { padding-right: 16px; padding-bottom: 84px; } }

/* ---------- Rechtsseiten (04.11. spät): Reiter, Inhaltsverzeichnis, Abschnitte als ruhige Karten ---------- */
.legal-hero { padding-bottom: clamp(28px, 4vw, 44px); }
.legal-hero .lead { max-width: 60ch; }
.legal-hero__stand { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 6px 14px; border-radius: var(--r-pill); background: var(--white); border: 1px solid var(--line); font-size: .86rem; color: var(--ink-soft); }
.legal-hero__stand .icon { width: 16px; height: 16px; color: var(--mint-deep); }
.legal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.legal-tabs a { padding: 9px 18px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--white); color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem; transition: border-color .2s, background .2s, color .2s; }
.legal-tabs a:hover { border-color: var(--mint); }
.legal-tabs a[aria-current="page"] { background: var(--anthrazit); border-color: var(--anthrazit); color: #fff; }
.legal { padding-top: 12px; }
.legal__grid { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.legal--cards .legal__grid, .legal__grid:not(:has(.legal__toc)) { grid-template-columns: minmax(0, 1fr); }
.legal__toc { position: sticky; top: calc(var(--header-h) + 20px); max-height: calc(100vh - var(--header-h) - 40px); overflow: auto; padding: 20px 20px 18px; border-radius: 20px; background: var(--white); border: 1px solid var(--line); font-size: .9rem; }
.legal__toc-title { margin: 0 0 10px; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--berry); }
.legal__toc ol { margin: 0; padding: 0 0 0 1.4em; }
.legal__toc li { margin: 0 0 6px; line-height: 1.35; color: var(--ink-soft); }
.legal__toc a { color: var(--ink); text-decoration: none; }
.legal__toc a:hover, .legal__toc a.is-active { color: var(--berry); }
.legal__toc-contact { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-soft); }
.legal__body { display: grid; gap: 16px; min-width: 0; }
.legal--cards .legal__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.legal__meta { padding: 0 4px; color: var(--ink-soft); font-size: .95rem; }
.legal--cards .legal__meta { grid-column: 1 / -1; }
.legal__meta p { margin: 0 0 4px; }
.legal__sec { padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.8vw, 34px); border-radius: 20px; background: var(--white); border: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 20px); overflow-wrap: anywhere; }
.legal__sec h2 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 .7em; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.3; }
.legal__no { flex: 0 0 auto; display: inline-grid; place-items: center; min-width: 34px; height: 30px; padding: 0 8px; border-radius: 10px; background: var(--mint-soft); color: var(--mint-deep); font-family: var(--font-sans); font-size: .85rem; font-weight: 600; }
.legal__text { color: var(--ink-soft); font-size: .98rem; }
.legal__text p { margin: 0 0 .7em; }
.legal__text p:last-child, .legal__text ul:last-child { margin-bottom: 0; }
.legal__text h3 { margin: 1.1em 0 .4em; font-size: 1.02rem; font-family: var(--font-sans); font-weight: 600; color: var(--ink); }
.legal__text ul { margin: 0 0 .8em; padding: 0; list-style: none; }
.legal__text li { position: relative; padding-left: 20px; margin-bottom: 6px; }
.legal__text li::before { content: ""; position: absolute; left: 0; top: .72em; width: 9px; height: 2px; background: var(--mint-deep); }
.legal__text a { color: var(--mint-deep); }
.legal__more { margin: 8px 0 0; }
@media (max-width: 900px) {
  .legal__grid { grid-template-columns: minmax(0, 1fr); }
  .legal__toc { position: static; max-height: none; }
  .legal--cards .legal__body { grid-template-columns: minmax(0, 1fr); }
}
.legal__text li.sub { margin-left: 22px; font-size: .95rem; }
.legal__text li.sub::before { width: 5px; height: 5px; border-radius: 50%; top: .66em; background: var(--mint); }
/* Kontakt oben sichtbar (04.11.); bei mittlerer Breite nur als Symbol */
.site-header__contact { padding: 0; width: 44px; height: 44px; }
.site-header__contact .icon { width: 18px; height: 18px; }
.site-header__contact[aria-current="page"] { background: var(--mint-deep); color: #fff; border-color: var(--mint-deep); }
/* Routenplaner mit KI: Eingabezeile unter dem Gespräch */
.rplan__ask { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; margin-top: 12px; }
.rplan__ask textarea { width: 100%; min-height: 46px; max-height: 160px; resize: vertical; padding: 11px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--white); font: inherit; color: var(--ink); }
.rplan__ask textarea:focus { outline: none; border-color: var(--mint-deep); }
.rplan__ask .btn { width: 46px; height: 46px; padding: 0; }
.rplan__ai-note { grid-column: 1 / -1; margin: 2px 0 0; font-size: .8rem; color: var(--ink-soft); }
.portal-badge { display: inline-flex; align-items: center; height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: .85rem; font-weight: 500; text-decoration: none; }
.portal-badge img { height: 32px; width: auto; }
/* Kopfleiste (05.11., Frederik: Logo UND Schriftzug immer sichtbar): breiter als der Inhalt, Menü rückt bei wenig Platz enger */
.site-header .site-header__inner { max-width: 1440px; gap: 18px; }
.site-header .brand { flex: 0 0 auto; }
.site-header .brand__text { display: block; max-width: 142px; font-size: .7rem; }
.site-header .nav { margin-left: clamp(12px, 2.4vw, 48px); }
@media (max-width: 1420px) { .site-header .nav__list a { padding: 8px 8px; font-size: .9rem; } .site-header .nav__list a::after { left: 8px; right: 8px; } }
@media (max-width: 1300px) { .site-header .nav__list a { padding: 8px 6px; font-size: .86rem; } .site-header .brand__text { max-width: 124px; font-size: .66rem; } }
@media (max-width: 640px) { .site-header .brand__text { max-width: 128px; font-size: .64rem; padding-left: 10px; } }

/* ---------- Kontakt: Wegweiser mit vier Wanderwegen (05.11.) ---------- */
.ways { --c: var(--mint-deep); text-align: center; }
.ways__eyebrow { margin-bottom: 4px; }
.ways__title { margin: 0 0 18px; }
.ways__sign { display: block; width: min(440px, 92%); height: auto; margin: 0 auto; overflow: visible; }
.ways__ground { fill: rgba(53, 53, 51, .08); }
.ways__post { fill: #6b5a48; }
.ways__cap { fill: #5a4b3c; }
.ways__arm { cursor: pointer; }
.ways__arm-in { transform-box: fill-box; transition: opacity .35s var(--ease), transform .45s var(--ease-out); }
.ways__arm--mint .ways__arm-in { transform-origin: 100% 50%; }
.ways__arm--gold .ways__arm-in { transform-origin: 100% 50%; }
.ways__arm--berry .ways__arm-in, .ways__arm--ink .ways__arm-in { transform-origin: 0 50%; }
.ways__board { fill: var(--white); stroke: #6b5a48; stroke-width: 2.5; transition: fill .35s var(--ease); }
.ways__label { font-family: var(--font-serif); font-size: 16px; fill: var(--ink); transition: fill .35s var(--ease); }
.ways__mark { stroke: #fff; stroke-width: 2; }
.ways__arm--mint .ways__mark { fill: var(--mint); }
.ways__arm--gold .ways__mark { fill: var(--gold); }
.ways__arm--berry .ways__mark { fill: var(--berry); }
.ways__arm--ink .ways__mark { fill: var(--anthrazit); }
.ways.has-pick .ways__arm-in { opacity: .42; }
.ways.has-pick .ways__arm.is-on .ways__arm-in { opacity: 1; animation: ways-nudge .6s var(--ease-out); }
.ways__arm--mint.is-on .ways__board { fill: var(--mint); }
.ways__arm--gold.is-on .ways__board { fill: var(--gold); }
.ways__arm--berry.is-on .ways__board { fill: var(--berry); }
.ways__arm--ink.is-on .ways__board { fill: var(--anthrazit); }
.ways__arm--berry.is-on .ways__label, .ways__arm--ink.is-on .ways__label { fill: #fff; }
.ways__arm.is-on .ways__mark { stroke: var(--white); }
@keyframes ways-nudge { 0% { transform: none; } 35% { transform: scaleX(1.06); } 100% { transform: none; } }
.ways__trails { display: block; width: 100%; height: auto; margin-top: -6px; overflow: visible; }
.ways__trail { fill: none; stroke: #d8ccb8; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1 13; }
.ways__trail-on { fill: none; stroke-width: 7; stroke-linecap: butt; stroke-dasharray: 1 2; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .9s var(--ease-out), opacity .3s; }
.ways__trail-on.is-on { stroke-dashoffset: 0; opacity: 1; }
.ways__trail-on--mint { stroke: var(--mint); }
.ways__trail-on--gold { stroke: var(--gold); }
.ways__trail-on--berry { stroke: var(--berry); }
.ways__trail-on--ink { stroke: var(--anthrazit); }
.ways__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.way { --wc: var(--mint); --wt: var(--mint-deep); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 14px 18px; color: var(--ink); text-decoration: none; border-radius: var(--r); transition: transform .35s var(--ease); }
.way--gold { --wc: var(--gold); --wt: var(--gold-deep); }
.way--berry { --wc: var(--berry); --wt: var(--berry); }
.way--ink { --wc: var(--anthrazit); --wt: var(--anthrazit); }
.way__icon { display: grid; place-items: center; width: 116px; height: 116px; margin-bottom: 10px; border-radius: 50%; background: var(--white); border: 3px solid var(--wc); color: var(--wt); box-shadow: 0 0 0 8px var(--paper), var(--shadow); transition: background .35s var(--ease), color .35s var(--ease), transform .45s var(--ease-out); }
.way__icon svg { width: 56px; height: 56px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.way__sub { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wt); font-weight: 500; }
.way__title { margin: 0; font-size: 1.45rem; }
.way__text { max-width: 250px; font-size: .95rem; line-height: 1.5; color: var(--ink-soft); }
.way__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: .55em 1.1em; border-radius: var(--r-pill); border: 1.5px solid var(--wc); color: var(--wt); font-weight: 500; font-size: .93rem; transition: background .3s var(--ease), color .3s var(--ease); }
.way__cta .icon { width: 16px; height: 16px; }
.way.is-on .way__icon, .way:hover .way__icon, .way:focus-visible .way__icon { background: var(--wc); color: #fff; transform: translateY(-6px) scale(1.04); }
.way--gold.is-on .way__icon, .way--gold:hover .way__icon { color: var(--ink); }
.way.is-on .way__cta, .way:hover .way__cta, .way:focus-visible .way__cta { background: var(--wc); color: #fff; }
.way--gold.is-on .way__cta, .way--gold:hover .way__cta { color: var(--ink); }
.way:focus-visible { outline: 2px solid var(--wc); outline-offset: 4px; }
@media (max-width: 860px) {
  .ways__trails { display: none; }
  .ways__sign { width: min(300px, 80%); margin-bottom: 18px; }
  .ways__grid { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .way__icon { width: 92px; height: 92px; }
  .way__icon svg { width: 44px; height: 44px; }
}
@media (max-width: 460px) { .ways__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ways__trail-on, .ways__arm-in, .way__icon { transition: none; animation: none !important; } }

/* ---------- Kompaktere Proportionen (Frederik 05.11. 15:14: Boxen, Abschnitte und Symbole waren zu groß) ---------- */
h1 { font-size: clamp(2rem, 3.4vw, 2.9rem); }
h2 { font-size: clamp(1.55rem, 2.3vw, 2.05rem); }
h3 { font-size: clamp(1.1rem, 1.35vw, 1.25rem); }
.section { padding: clamp(48px, 6vw, 84px) 0; }
.section--tight { padding: clamp(36px, 4.5vw, 60px) 0; }
/* „Danach kannst du …“ */
.can__item { grid-template-columns: 40px 1fr; padding: 12px 0; }
.can__text { font-size: clamp(1.05rem, 1.6vw, 1.32rem); }
/* Kreis „Was dich rund macht“ */
.round__chip { padding: 6px 14px 6px 8px; font-size: .9rem; }
.round__chip .sketch { width: 26px; height: 26px; }
.round__visual svg { max-width: 360px; }
.round__steps { padding: 6vh 0 10vh; gap: 11vh; }
.round__step { grid-template-columns: 42px 1fr; gap: 14px; }
.round__step .sketch { width: 42px; height: 42px; }
.round__step h3 { font-size: 1.15rem; }
.round__done-title { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
/* Kontakt: Wegweiser und Wege */
.ways__sign { width: min(300px, 72%); }
.ways__trails { max-width: 820px; margin: -6px auto 0; }
.ways__grid { max-width: 880px; margin: 0 auto; }
.way__icon { width: 80px; height: 80px; margin-bottom: 6px; box-shadow: 0 0 0 6px var(--paper), var(--shadow); }
.way__icon svg { width: 36px; height: 36px; }
.way__title { font-size: 1.2rem; }
.way__text { font-size: .9rem; }
@media (max-width: 860px) { .ways__sign { width: min(240px, 70%); } .way__icon { width: 68px; height: 68px; } .way__icon svg { width: 30px; height: 30px; } }
/* Kopfleiste: Logo und Menü rücken zur Mitte, Luft an den Rändern, normale Lücke dazwischen */
.site-header .site-header__inner { max-width: 1260px; padding: 0 clamp(20px, 3vw, 44px); }
.site-header .brand { margin-right: 0; }
.site-header .nav { margin-left: auto; }
/* Kontakt: Kopf im Wegweiser-Abschnitt (05.11. abends, eigene Hero-Sektion entfällt) */
.ways-section--top { padding-top: clamp(28px, 3.5vw, 48px); }
.ways-section--top .breadcrumbs ol { justify-content: center; }
.ways-section--top .ways__title { font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin: 0 0 10px; }
.ways__lead { max-width: 560px; margin: 0 auto 22px; color: var(--ink-soft); font-size: 1.05rem; }
/* Kopf schrumpft, ohne die Seite zu verschieben (06.11.: Menü zitterte, weil der Inhalt beim Schrumpfen um 14 px nach oben sprang) */
.site-header.is-scrolled { margin-bottom: calc(var(--header-h) - 64px); }
.site-header { transition: box-shadow .3s, margin-bottom .3s var(--ease); }
.site-header__inner { transition: height .3s var(--ease); }

/* Galerie „Einblicke“ (Oliver 06.11.): als Bildergalerie erkennbar, jedes Bild mit Unterschrift */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gallery__item { margin: 0; position: relative; overflow: hidden; border-radius: 18px; background: var(--mint-soft); aspect-ratio: 4 / 3; box-shadow: 0 10px 28px rgba(0, 0, 0, .07); }
.gallery__item--1 { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.gallery__item picture, .gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery__item figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 252, 247, .94); font-size: .86rem; line-height: 1.35; color: var(--ink-soft); }
.gallery__item figcaption strong { display: block; font-weight: 500; color: var(--ink); }
@media (max-width: 820px) { .gallery { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .gallery__item--1 { grid-row: auto; aspect-ratio: 4 / 3; } }
@media (max-width: 520px) { .gallery { grid-template-columns: minmax(0, 1fr); } .gallery__item--1 { grid-column: auto; } }

/* Rad „Was dich rund macht“ (Oliver 06.11.): ohne Zusatzränder. Segmente mit ruhiger Fuge statt Strichellinie, kein Außenbogen. */
.round__seg path:not(.round__arc) { stroke: #f4efe6; stroke-width: 2; stroke-dasharray: none; }
.round__seg:not(.is-on) path:not(.round__arc) { fill: #fbf8f2; }
.round__seg .round__arc, .round.is-full .round__arc { display: none; }
.round__track { display: none; }

/* Gratis-Cover je Material unterscheidbar (Oliver 06.11.): Farbband, Tönung, eigene Symbole aus der Bibliothek */
.magnet__cover { --mc-accent: #1F6B4C; --mc-tint: #DDF0E6; }
.magnet__cover--beere { --mc-accent: #A3195B; --mc-tint: #F5DCE7; }
.magnet__cover--gold { --mc-accent: #7A5A06; --mc-tint: #F8EBC4; }
.magnet__cover--tief { --mc-accent: #1F6B4C; --mc-tint: #E3EEE8; }
.magnet__cover .magnet__paper:not(.magnet__paper--back) { overflow: hidden; background: linear-gradient(180deg, #fff 55%, var(--mc-tint)); }
.magnet__cover .magnet__paper--back { background: var(--mc-tint); }
.magnet__band { position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--mc-accent); }
.magnet__cover .eyebrow { color: var(--mc-accent); }
.magnet__symbols { margin-top: auto; display: flex; align-items: flex-end; gap: 10px; }
.magnet__symbols svg { width: auto; flex: none; }
/* Gratis-Übersicht: farbiges Band und Symbol je Karte */
.path-card[class*="path-card--m-"] { border-top: 6px solid var(--mc-accent, #1F6B4C); }
.path-card--m-beere { --mc-accent: #A3195B; } .path-card--m-gold { --mc-accent: #D4A114; } .path-card--m-mint { --mc-accent: #6CBE99; } .path-card--m-tief { --mc-accent: #1F6B4C; }
.path-card__sym { position: absolute; top: 14px; right: 14px; z-index: 2; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .12)); }
.path-card__media { position: relative; }

/* Stuhlkreis-Legende (Oliver 06.11.: Färben sich die Stühle? Ja: jede Reservierung/Buchung färbt einen Stuhl Beere) */
.chairs__key { margin: 6px 0 0; display: flex; justify-content: center; align-items: center; gap: 5px; font-size: .74rem; color: var(--ink-soft); }
.chairs__key i { display: inline-block; width: 10px; height: 9px; border-radius: 2.5px; border: 1.3px solid var(--anthrazit); background: var(--white); margin-left: 4px; }
.chairs__key i.is-taken { background: var(--berry); border-color: var(--berry); }

/* Handy (06.11.): Menü-Knopf rechtsbündig (stand mitten in der Kopfzeile) */
.site-header__cta { margin-left: auto; }

/* Fuß unten sauber (Frederik 10.11.): Trennlinien bündig mit dem Inhalt, Rechtszeile in einer Reihe
   (Hinweis links, Rechtsseiten rechts), genug Luft nach unten. */
.site-footer__net, .site-footer--v8 .site-footer__legal { border-top: 0; border-bottom: 0; background: linear-gradient(var(--line), var(--line)) center top / calc(100% - 48px) 1px no-repeat; }
.site-footer--v8 { padding-bottom: 0; }
.site-footer--v8 .site-footer__legal { display: flex; flex-wrap: nowrap; align-items: baseline; justify-content: space-between; gap: 10px 32px; padding-top: 20px; padding-bottom: 28px; line-height: 1.6; }
.site-footer--v8 .site-footer__legal p { flex: 1 1 auto; min-width: 0; max-width: 72ch; }
.site-footer--v8 .site-footer__legal ul { flex: none; gap: 6px 18px; margin: 0; }
.site-footer--v8 .site-footer__legal li { margin: 0; }
@media (max-width: 900px) {
  .site-footer--v8 .site-footer__legal { flex-direction: column; align-items: flex-start; }
}
.site-footer--v8 .site-footer__legal p span { display: block; }
/* Platz für den Chat-Knopf nur, wenn der Chat eingeschaltet ist (VebtContent::CHAT_ENABLED) */
.site-footer--v8 .site-footer__legal { padding-right: 24px; }
body:has(.chat) .site-footer--v8 .site-footer__legal { padding-right: 96px; }
@media (max-width: 640px) { body:has(.chat) .site-footer--v8 .site-footer__legal { padding-right: 24px; padding-bottom: 96px; } }
.actions--center { justify-content: center; margin-top: 28px; }