/* Konzept 20 — Morgennebel, komplett
   Gezeichneter Tuschebergmorgen mit echter Tiefe. Die eine Linie ist DER WEG.
   Palette: Nebel kühl, Papierhimmel warm am Horizont, Graphit als Tusche,
   Morgenrosé sehr sparsam, Zinnober nur als Siegel und Haupt-CTA.
   Struktur: Basis · Kopf · Sektionen in Reihenfolge der Seite · Mobil. */

:root {
  --mist:        #DCE2E6;
  --mist-deep:   #A8B3BD;
  --mist-light:  #EDF0F1;
  --paper-sky:   #F5F2EA;
  --ink:         #2A2C2E;
  --ink-soft:    #383E42;
  --muted:       #4C5359;
  --rose:        #C9A184;
  --seal:        #A23528;
  --seal-deep:   #8B2C21;
  --panel:       #2C3338;
  --panel-2:     #232A2F;
  --on-panel:    #E4E9EB;
  --on-panel-dim: #AEB9BF;
  --hairline:      rgba(42, 44, 46, .20);
  --hairline-soft: rgba(42, 44, 46, .12);

  --ease:  cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --gut: clamp(1.4rem, 5vw, 3.2rem);
  --head-h: 92px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  background: var(--mist);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 108px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.74;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(162, 53, 40, .16); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--ink);
  color: var(--mist-light);
  padding: .9rem 1.4rem;
  font-size: .85rem;
  text-decoration: none;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- feste Ebenen: Szene → Weg → Vordergrund → Korn → Inhalt ---------- */

#scene, #trail, #front {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}
/* Reihenfolge: Szene ganz hinten, darüber die nahen Kämme und die Nebelfelder,
   darüber DER WEG. Die Tiefe beweist die Rückscheibe des Weges (sie liegt in der
   Szene, hinter den nahen Kämmen); die Arbeitsscheibe bleibt oben und damit
   immer lesbar, auch auf kleinen Displays. */
#scene { z-index: 0; }
#front { z-index: 1; }
#trail { z-index: 2; }

.grain {
  position: fixed; inset: 0; z-index: 3;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: .5;
}

main, footer, .head-stack, .rail, .to-top { position: relative; z-index: 4; }

/* der Pfeil sitzt nie am Wort */
.btn-primary > span, .btn-ghost > span, .nav-cta > span, .text-link > span { margin-left: .42em; }

/* ---------- Ladenmoment ----------
   Der geschlossene Nebel ist der Grund des Intros. Kreis und Marke liegen
   darauf; beim Auflösen hebt sich der Schleier, dahinter baut sich das Tal auf
   und die Linie beginnt zu schreiben. */

#intro {
  position: fixed; inset: 0; z-index: 40;
  background: linear-gradient(to bottom, #E4E9EC 0%, #DCE2E6 46%, #CBD3D9 100%);
  pointer-events: none;
  transition: opacity 1.05s var(--ease);
}
#intro.is-gone { opacity: 0; }
#intro.is-quick { transition-duration: .26s; }
#intro-ink {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
body.is-settling [data-appear] { transition-duration: .26s; }
@media (prefers-reduced-motion: reduce) { #intro { transition: opacity .4s linear; } }

/* ---------- Kopf: Navigation ---------- */

.head-stack {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  background: linear-gradient(to bottom,
    rgba(228, 233, 236, 1) 0%, rgba(228, 233, 236, .97) 58%, rgba(228, 233, 236, 0) 100%);
  padding-bottom: 1.15rem;
}
.head-stack::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.05rem var(--gut) 0;
}
.brand { display: block; line-height: 0; padding: .3rem 0; }
.brand img { display: block; width: 52px; height: 52px; }
.nav-links { display: flex; gap: 1.9rem; }
.nav-links a, .nav-cta {
  font-size: .655rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: .95rem 0;
  transition: color .4s var(--ease);
  background: none; border: 0; font-family: inherit; cursor: pointer;
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--ink); }
.nav-cta {
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: .3rem;
  align-self: center;
}
.nav-cta:hover, .nav-cta:focus-visible { border-color: var(--ink); }

/* ---------- Stationsleiste ---------- */

.rail {
  position: fixed;
  left: clamp(1.2rem, 2.2vw, 2.1rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.rail.is-on { opacity: 1; }
.rail ol { list-style: none; display: flex; flex-direction: column; gap: .95rem; }
.rail li { display: flex; align-items: center; gap: .7rem; }
.rail i {
  display: block;
  width: 12px; height: 1px;
  background: rgba(42, 44, 46, .26);
  box-shadow: 0 0 5px 2px rgba(246, 247, 244, .75);
  transition: width .7s var(--ease), background .7s var(--ease);
}
.rail span {
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 0 7px rgba(246, 247, 244, .95), 0 0 3px rgba(246, 247, 244, 1);
  opacity: 0;
  transition: opacity .7s var(--ease);
  white-space: nowrap;
}
.rail li.is-on i { width: 26px; background: var(--ink); }
.rail li.is-on span { opacity: 1; }
@media (max-width: 1280px) { .rail { display: none; } }

/* ---------- Auftritt ---------- */

[data-appear] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.05s var(--ease), transform 1.05s var(--ease);
}
[data-appear].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-appear] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Typo ---------- */

.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--gut);
}

.eyebrow {
  font-size: .655rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.eyebrow.centered { text-align: center; }
.eyebrow.small { margin-bottom: 1rem; letter-spacing: .2em; }

h1, h2, h3, .statement, .lead {
  font-family: var(--display);
  text-wrap: balance;
}
h1 {
  font-variation-settings: "opsz" 72;
  font-weight: 500;
  font-size: clamp(2.6rem, 6.4vw, 5.6rem);
  line-height: 1.04;
  letter-spacing: -.018em;
}
h1 em, h2 em { font-style: italic; font-weight: 500; }
h2 {
  font-variation-settings: "opsz" 60;
  font-weight: 500;
  font-size: clamp(1.95rem, 3.7vw, 3.15rem);
  line-height: 1.1;
  letter-spacing: -.012em;
  color: var(--ink);
}
h2.centered { text-align: center; }
h3 {
  font-variation-settings: "opsz" 28;
  font-weight: 600;
  font-size: 1.24rem;
  line-height: 1.28;
  letter-spacing: -.005em;
  margin-bottom: .5rem;
}

.text-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(42, 44, 46, .35);
  padding-bottom: .1em;
  font-size: .93rem;
  transition: border-color .4s var(--ease);
  white-space: nowrap;
}
.text-link:hover, .text-link:focus-visible { border-color: var(--ink); }
.more { margin-top: 2.4rem; font-size: .93rem; }
.section-intro { max-width: 34em; color: var(--ink-soft); margin-top: 1.3rem; }
.centered-intro { margin-inline: auto; text-align: center; }

.sec-head { max-width: 46rem; }
.centered-head { max-width: 42rem; margin-inline: auto; }
.split-head {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
}
.split-head .section-intro { margin-top: 0; }

/* Sammelknopf-Stile */
.btn-primary, .btn-ghost {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  border-radius: 2px;
  font-family: inherit;
  font-size: .93rem;
  font-weight: 500;
  letter-spacing: .015em;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary {
  background: var(--seal);
  color: #F6F1E7;
  border: 1px solid var(--seal);
  padding: .95rem 2.1rem;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.btn-primary:hover, .btn-primary:focus-visible { background: var(--seal-deep); border-color: var(--seal-deep); }
.btn-ghost {
  background: none;
  border: 1px solid rgba(42, 44, 46, .4);
  color: var(--ink);
  padding: .95rem 1.9rem;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--ink); background: rgba(255, 255, 255, .34); }
.link-quiet {
  color: var(--muted);
  font-size: .9rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: .7rem 0;
  transition: color .4s var(--ease), border-color .4s var(--ease);
  background: none; cursor: pointer; font-family: inherit;
}
.link-quiet:hover, .link-quiet:focus-visible { color: var(--ink); border-color: var(--hairline); }

/* eine wiederkehrende Gewohnheit der Seite: die Ziffer steht als Serifenzahl
   vor der Zeile, nie in einem Kreis, nie fett */
.sp-num, .ben-num, .prin-num, .diff-num, .j-num, .route-num, .pt-num, .step-num, .card-num {
  font-family: var(--display);
  font-variation-settings: "opsz" 20;
  font-weight: 500;
  color: rgba(42, 44, 46, .42);
  line-height: 1;
  display: block;
}

/* Hinweisbalken: eine Zeile Text zwischen zwei Haarlinien */
.note-bar {
  margin-top: clamp(3rem, 5vh, 4.4rem);
  padding: 1.5rem 0;
  border-top: 1px solid var(--hairline-soft);
  border-bottom: 1px solid var(--hairline-soft);
  font-size: .93rem;
  color: var(--ink-soft);
  max-width: 62rem;
}
.note-bar strong { color: var(--ink); font-weight: 500; }
.note-inline { margin-top: 2.4rem; font-size: .875rem; }

/* Bildplatten: die Fotos des Kunden, in die Tuschewelt gelegt.
   Entsättigt, multipliziert, an allen Kanten weich auslaufend, damit sie als
   Wäsche mitspielen statt als eingeklebtes Foto. */
.plate { position: relative; }
.plate img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04) brightness(1.05);
  mix-blend-mode: multiply;
  opacity: .92;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.plate-portrait { aspect-ratio: 720 / 860; }
.plate-portrait figcaption {
  position: absolute;
  left: 8%; right: 8%; bottom: 8%;
  display: flex; flex-direction: column; gap: .5rem;
  text-shadow: 0 0 10px rgba(240, 243, 240, .9), 0 0 22px rgba(240, 243, 240, .8);
}
.plate-caption {
  font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.plate-title {
  font-family: var(--display);
  font-variation-settings: "opsz" 40;
  font-style: italic;
  font-size: clamp(1.3rem, 2vw, 1.72rem);
  line-height: 1.22;
  color: var(--ink);
}
.plate-wide {
  margin: clamp(4rem, 8vh, 7rem) auto 0;
  max-width: 1360px;
  padding: 0 var(--gut);
  aspect-ratio: 1500 / 620;
}

/* ---------- 01 Tal ---------- */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 9.5rem var(--gut) 6.5rem;
  position: relative;
}
.hero-inner { max-width: 1000px; }
.hero .eyebrow { margin-bottom: 2rem; }
.hero-below { margin-top: clamp(3rem, 6.5vh, 5rem); max-width: 660px; margin-inline: auto; }
.lead {
  font-variation-settings: "opsz" 20;
  font-size: clamp(1.14rem, 1.7vw, 1.34rem);
  line-height: 1.58;
  color: var(--ink-soft);
}
.meta {
  margin-top: 1.4rem;
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--muted);
}
.meta strong { color: var(--ink); font-weight: 500; }
.hero-ctas {
  margin-top: 2.2rem;
  display: flex; align-items: center; justify-content: center;
  gap: 1.1rem; flex-wrap: wrap;
}

/* Wegtafel im Tal: der Einstieg in drei Schritten */
.signpost {
  margin-top: clamp(4rem, 9vh, 7rem);
  width: min(1100px, 100%);
  border-top: 1px solid var(--hairline-soft);
  padding-top: 1.7rem;
  text-align: left;
}
.signpost-label {
  font-size: .655rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  margin-bottom: 1.6rem;
}
.signpost-sep { width: 26px; height: 1px; background: var(--hairline); display: inline-block; }
.signpost-label em {
  font-family: var(--display);
  font-variation-settings: "opsz" 24;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.signpost-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3.4vw, 3rem); }
.signpost-list li { display: grid; grid-template-columns: 2rem 1fr; gap: .5rem; align-items: baseline; }
.signpost-list p { font-size: .875rem; line-height: 1.6; color: var(--ink-soft); }
.signpost-list strong { color: var(--ink); font-weight: 500; }
.sp-num { font-size: .95rem; }

.scroll-hint {
  position: absolute;
  bottom: 1.2rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  font-size: .58rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--muted);
  text-shadow: 0 0 7px rgba(246, 247, 244, .9);
}
.hint-line {
  width: 1px; height: 38px;
  background: linear-gradient(to bottom, rgba(42, 44, 46, .42), transparent);
  animation: hint 3.6s var(--ease) infinite;
  transform-origin: top;
}
@keyframes hint {
  0% { transform: scaleY(0); opacity: 0; }
  34% { transform: scaleY(1); opacity: 1; }
  76% { transform: scaleY(1); opacity: 0; }
  100% { transform: scaleY(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hint-line { animation: none; opacity: .5; } }

/* ---------- 02 Quelle ---------- */

.st { position: relative; }
.source { padding: 22vh 0 18vh; }
.source-head { text-align: center; }
.statement {
  font-variation-settings: "opsz" 72;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.95rem, 4.3vw, 3.6rem);
  line-height: 1.28;
  letter-spacing: -.014em;
  color: var(--ink);
  margin-top: .6rem;
}
.statement-intro {
  max-width: 40em;
  margin: 2.6rem auto 0;
  color: var(--ink-soft);
}
.source-grid {
  margin-top: clamp(5rem, 9vh, 8rem);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2.6rem, 6vw, 5.5rem);
  align-items: start;
}
.benefits { list-style: none; }
.benefits li {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: .6rem;
  padding: 1.9rem 0;
  border-top: 1px solid var(--hairline-soft);
}
.benefits li:last-child { border-bottom: 1px solid var(--hairline-soft); }
.benefits h3 { font-size: 1.16rem; }
.benefits p { font-size: .93rem; color: var(--ink-soft); }
.ben-num, .prin-num, .diff-num, .route-num, .pt-num { font-size: 1.05rem; padding-top: .3rem; }

/* ---------- 03 Sonne / Calligraphy Health ---------- */

.method { padding: 16vh 0 20vh; }
.ring-holder { display: flex; justify-content: center; }
.ring {
  width: min(660px, 84vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.ring-inner { max-width: 76%; text-align: center; }
.ring-inner h2 {
  font-variation-settings: "opsz" 72;
  font-size: clamp(1.7rem, 3.3vw, 2.9rem);
  line-height: 1.12;
}
.method-body {
  margin-top: clamp(2rem, 5vh, 4rem);
  max-width: 44rem;
}
.method-copy { color: var(--ink-soft); }
.method-copy::first-letter {
  font-family: var(--display);
  font-variation-settings: "opsz" 72;
  font-size: 3.1em;
  line-height: .8;
  float: left;
  padding: .06em .11em 0 0;
  color: var(--ink);
}
.method-ctas { margin-top: 2.2rem; display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }

.system-panel {
  margin-top: clamp(3.4rem, 7vh, 5.6rem);
  margin-left: auto;
  max-width: 30rem;
  background: linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 100%);
  color: var(--on-panel);
  padding: clamp(2rem, 3.4vw, 2.8rem);
  border-radius: 2px;
  box-shadow: 0 22px 60px -34px rgba(24, 30, 34, .7);
}
.panel-label {
  font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--on-panel-dim);
  margin-bottom: 1.4rem;
}
.system-panel h3 { color: var(--on-panel); font-size: 1.5rem; margin-bottom: 1rem; }
.system-panel p { color: var(--on-panel-dim); font-size: .93rem; margin-bottom: 1.7rem; }
.system-panel .text-link { color: var(--on-panel); border-color: rgba(228, 233, 235, .4); }
.system-panel .text-link:hover, .system-panel .text-link:focus-visible { border-color: var(--on-panel); }

.principles {
  list-style: none;
  margin-top: clamp(4rem, 8vh, 6.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.4rem);
}
.principles li { border-top: 1px solid var(--hairline); padding-top: 1.5rem; }
.principles h3 { margin-top: 1.2rem; font-size: 1.18rem; }
.principles p { font-size: .93rem; color: var(--ink-soft); }
.prin-num { padding-top: 0; }

/* ---------- 04 Pfad / Ansatz ---------- */

.approach { padding: 14vh 0 16vh; }
.approach-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(2.6rem, 7vw, 6rem);
  align-items: start;
}
.approach-intro { position: sticky; top: 22vh; }
.difference { list-style: none; }
.difference li {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: .6rem;
  padding: 2rem 0;
  border-top: 1px solid var(--hairline-soft);
}
.difference li:last-child { border-bottom: 1px solid var(--hairline-soft); }
.difference h3 { font-size: 1.2rem; }
.difference p { font-size: .93rem; color: var(--ink-soft); }

/* ---------- 05 Pfad / So wird unterrichtet ---------- */

.lesson { padding: 12vh 0 16vh; }
.journey {
  list-style: none;
  margin-top: clamp(4.5rem, 8vh, 7rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.6rem, 3vw, 2.8rem);
}
.journey li { position: relative; padding-top: 2.4rem; }
/* die Etappe hängt an einer Haarlinie mit einem Tuschepunkt */
.journey li::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px; background: var(--hairline-soft);
}
.journey li::after {
  content: '';
  position: absolute; top: -3px; left: 0;
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(42, 44, 46, .55);
}
.journey .j-num { font-size: 1rem; margin-bottom: .9rem; }
.journey h3 { font-size: 1.16rem; }
.journey p { font-size: .9rem; color: var(--ink-soft); }

/* ---------- 06 Pfad / Für wen ---------- */

.audience { padding: 12vh 0 16vh; }
.who-grid {
  margin-top: clamp(4rem, 8vh, 6.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.4rem);
}
.who-grid article { border-top: 1px solid var(--hairline); padding-top: 1.6rem; display: flex; flex-direction: column; }
.who-grid h3 { font-size: 1.24rem; margin-bottom: .8rem; }
.who-grid p { font-size: .93rem; color: var(--ink-soft); margin-bottom: 1.4rem; }
.who-grid .fit-note { margin-bottom: 0; }
.fit-note {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px dashed rgba(42, 44, 46, .22);
  font-size: .85rem !important;
  color: var(--muted) !important;
}
.fit-note strong {
  display: block;
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); font-weight: 500;
  margin-bottom: .3rem;
}

/* ---------- 07 Wege / Kursübersicht ---------- */

.courses { padding: 14vh 0 14vh; }
.cards {
  margin-top: clamp(4.5rem, 8vh, 7rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.4rem);
}
.card { padding-top: 1.9rem; border-top: 1px solid rgba(42, 44, 46, .1); }
.card-num {
  font-variation-settings: "opsz" 20;
  font-style: italic;
  font-size: 1.05rem;
  margin-bottom: 1.6rem;
}
.card p { color: var(--ink-soft); font-size: .945rem; margin-bottom: 1.5rem; }
.price-slot {
  margin-top: 3rem;
  font-size: .85rem;
  color: var(--muted);
  border-left: 2px solid var(--hairline);
  padding-left: 1rem;
}

/* ---------- 08 Wege / Format ---------- */

.format { padding: 10vh 0 14vh; }
.format-grid {
  margin-top: clamp(3.5rem, 7vh, 5.5rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.6rem, 3vw, 2.6rem);
}
.fmt {
  border: 1px solid var(--hairline-soft);
  border-radius: 2px;
  padding: clamp(1.8rem, 3vw, 2.6rem);
  background: rgba(247, 249, 248, .62);
}
.fmt h3 { font-size: 1.5rem; margin-bottom: 1rem; }
.fmt p { font-size: .93rem; color: var(--ink-soft); }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.6rem 0 1.8rem; }
.tags li {
  font-size: .655rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--hairline-soft);
  border-radius: 999px;
  padding: .4rem .8rem;
}
.fmt-deep {
  background: linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 100%);
  border-color: transparent;
  color: var(--on-panel);
  box-shadow: 0 22px 60px -34px rgba(24, 30, 34, .7);
}
.fmt-deep h3 { color: var(--on-panel); }
.fmt-deep p, .fmt-deep .eyebrow { color: var(--on-panel-dim); }
.fmt-deep .tags li { color: var(--on-panel-dim); border-color: rgba(228, 233, 235, .28); }
.fmt-deep .text-link { color: var(--on-panel); border-color: rgba(228, 233, 235, .4); }

/* ---------- 09 Wege / Kursstarts ---------- */

.starts { padding: 10vh 0 12vh; }
.starts-grid {
  margin-top: clamp(3.5rem, 7vh, 5.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 3vw, 2.6rem);
}
.starts-grid article { border-top: 1px solid var(--hairline); padding-top: 1.5rem; }
.badge {
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}
.start-date {
  font-family: var(--display);
  font-variation-settings: "opsz" 40;
  font-size: 1.85rem;
  line-height: 1.1;
  margin: 1rem 0 1.3rem;
}
.start-date span {
  display: block;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--muted);
  margin-top: .4rem;
}
.starts-grid h3 { font-size: 1.16rem; }
.starts-grid p { font-size: .9rem; color: var(--ink-soft); }

/* ---------- 10 Wege / Kursnavigator ---------- */

.navigator { padding: 10vh 0 14vh; }
.nav-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(2.6rem, 7vw, 6rem);
  align-items: start;
}
.nav-intro { position: sticky; top: 22vh; }
.routes { list-style: none; }
.routes li {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: .6rem;
  padding: 1.9rem 0;
  border-top: 1px solid var(--hairline-soft);
}
.routes li:last-child { border-bottom: 1px solid var(--hairline-soft); }
.routes h3 { font-size: 1.2rem; }
.routes p { font-size: .92rem; color: var(--ink-soft); margin-bottom: .9rem; }

/* ---------- 11 Wege / Erste 30 Tage ---------- */

.month { padding: 10vh 0 16vh; }
.month-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2.6rem, 6vw, 5rem);
  align-items: start;
}
.weeks {
  list-style: none;
  margin-top: clamp(3rem, 6vh, 4.5rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
/* die Zellen tragen ihre Linien selbst: solange eine Woche noch nicht
   aufgetaucht ist, steht dort nichts, kein leeres Kästchen */
.weeks li {
  background: rgba(243, 246, 245, .78);
  padding: 1.7rem 1.5rem;
  border-top: 1px solid var(--hairline-soft);
}
.weeks li:nth-child(odd) { border-right: 1px solid var(--hairline-soft); }
.weeks li:nth-last-child(-n+2) { border-bottom: 1px solid var(--hairline-soft); }
.wk-label {
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); display: block; margin-bottom: .9rem;
}
.weeks h3 { font-size: 1.1rem; }
.weeks p { font-size: .885rem; color: var(--ink-soft); }
.month-aside {
  background: linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 100%);
  color: var(--on-panel);
  padding: clamp(2rem, 3.4vw, 2.7rem);
  border-radius: 2px;
  box-shadow: 0 22px 60px -34px rgba(24, 30, 34, .7);
  margin-top: clamp(3rem, 6vh, 4.5rem);
}
.month-aside .eyebrow { color: var(--on-panel-dim); }
.month-aside h3 { color: var(--on-panel); font-size: 1.5rem; margin-bottom: 1rem; }
.month-aside p { color: var(--on-panel-dim); font-size: .93rem; margin-bottom: 1.8rem; }
.month-aside .btn-ghost { border-color: rgba(228, 233, 235, .45); color: var(--on-panel); }
.month-aside .btn-ghost:hover, .month-aside .btn-ghost:focus-visible {
  border-color: var(--on-panel); background: rgba(228, 233, 235, .1);
}

/* ---------- 12 Wegmarken / Krankenkasse ---------- */

.zpp { padding: 12vh 0 16vh; }
.zpp-head { max-width: 42rem; }
.zpp-steps {
  list-style: none;
  margin: clamp(4rem, 8vh, 7rem) auto 0;
  max-width: 860px;
}
/* die vier Schritte liegen abwechselnd links und rechts am Weg, jeder mit
   seinem Steinmann. Der Weg läuft zwischen ihnen hindurch und HINTER ihnen
   vorbei: die Steine liegen im Vordergrund. */
.zpp-step {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: clamp(1.2rem, 2.5vw, 2rem);
  align-items: center;
  padding: clamp(2.4rem, 5vh, 4rem) 0;
  max-width: 560px;
}
/* der Weg braucht zwischen den Schritten einen echten Korridor: er wechselt
   dort die Seite und darf dabei kein Wort schneiden */
.zpp-step:nth-child(even) {
  grid-template-columns: 1fr 96px;
  margin-left: auto;
}
.zpp-step:nth-child(even) .cairn { order: 2; }
.zpp-step:nth-child(even) .zpp-text { order: 1; }
.cairn { display: block; }
.cairn svg { width: 96px; height: auto; display: block; }
.cairn path {
  fill: rgba(52, 60, 66, .9);
  stroke: rgba(20, 24, 27, .5);
  stroke-width: .8;
}
.cairn path:nth-child(1) { fill: rgba(40, 47, 53, .92); }
.cairn path:nth-child(2) { fill: rgba(58, 67, 74, .9); }
.cairn path:nth-child(3) { fill: rgba(48, 56, 62, .9); }
.cairn path:nth-child(4) { fill: rgba(66, 76, 83, .88); }
.zpp-text .step-num { font-size: 1rem; margin-bottom: .7rem; }
.zpp-step h3 { font-size: 1.24rem; }
.zpp-step p { color: var(--ink-soft); font-size: .93rem; }

.zpp-foot {
  margin-top: clamp(4rem, 7vh, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.zpp-card {
  border: 1px solid var(--hairline-soft);
  border-radius: 2px;
  padding: clamp(1.8rem, 3vw, 2.4rem);
  background: rgba(247, 249, 248, .66);
}
.zpp-card h3 { font-size: 1.32rem; }
.zpp-card p { font-size: .89rem; color: var(--muted); margin-bottom: 1.6rem; line-height: 1.75; }
.zpp-act p { font-size: .95rem; color: var(--ink-soft); margin-bottom: 2rem; max-width: 30em; }

/* ---------- 13 Rast / Über mich ---------- */

.about { padding: 10vh 0 14vh; }
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(3rem, 7vw, 5.5rem);
  align-items: start;
}
.about-text { max-width: 36em; color: var(--ink-soft); margin-top: 1.8rem; }
.about-points { list-style: none; margin-top: clamp(2.6rem, 5vh, 4rem); }
.about-points li {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: .6rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--hairline-soft);
}
.about-points li:last-child { border-bottom: 1px solid var(--hairline-soft); }
.about-points h3 { font-size: 1.14rem; }
.about-points p { font-size: .92rem; color: var(--ink-soft); }
.about-quote {
  padding-left: 1.6rem;
  border-left: 2px solid rgba(42, 44, 46, .5);
}
.about-quote p {
  font-family: var(--display);
  font-variation-settings: "opsz" 40;
  font-style: italic;
  font-size: clamp(1.2rem, 1.85vw, 1.52rem);
  line-height: 1.45;
  color: var(--ink);
}
.about-quote footer {
  margin-top: 1.4rem;
  font-size: .78rem;
  letter-spacing: .05em;
  color: var(--ink);
}
.about-quote footer span {
  display: block;
  margin-top: .25rem;
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.about-quote .text-link { display: inline-block; margin-top: 1.6rem; font-size: .88rem; }
.creds { margin-top: clamp(2.6rem, 5vh, 3.6rem); }
.creds ul { list-style: none; }
.creds li {
  padding: .95rem 0;
  border-top: 1px solid var(--hairline-soft);
  font-size: .875rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.creds li:last-child { border-bottom: 1px solid var(--hairline-soft); }

/* ---------- 14 Rast / Stimmen ---------- */

.voices { padding: 10vh 0 12vh; }
.voice-grid {
  margin-top: clamp(3.5rem, 7vh, 5.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 3vw, 2.6rem);
}
.voice-slot {
  border: 1px dashed rgba(42, 44, 46, .26);
  border-radius: 2px;
  padding: 2rem 1.8rem;
  min-height: 190px;
  display: flex; flex-direction: column;
}
.voice-mark {
  font-family: var(--display);
  font-size: 2.4rem;
  line-height: .6;
  color: rgba(42, 44, 46, .3);
  margin-bottom: 1rem;
}
.voice-empty {
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: auto;
}
.voice-meta { font-size: .78rem; color: rgba(76, 83, 89, .7); margin-top: .5rem; }

/* ---------- 15 Gipfel / FAQ ---------- */

.faq { padding: 10vh 0 14vh; }
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(2.6rem, 7vw, 6rem);
  align-items: start;
}
.faq-intro { position: sticky; top: 20vh; }
.faq-list details {
  border-top: 1px solid var(--hairline-soft);
  padding: 0;
}
.faq-list details:last-of-type { border-bottom: 1px solid var(--hairline-soft); }
.faq-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  min-height: 44px;
  font-family: var(--display);
  font-variation-settings: "opsz" 28;
  font-size: 1.14rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: '';
  flex: none;
  width: 13px; height: 13px;
  background:
    linear-gradient(var(--ink), var(--ink)) center/13px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center/1px 13px no-repeat;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
  opacity: .55;
  transform: translateY(3px);
}
.faq-list details[open] summary::after {
  background: linear-gradient(var(--ink), var(--ink)) center/13px 1px no-repeat;
  opacity: .9;
}
.faq-list summary:hover, .faq-list summary:focus-visible { color: var(--ink); }
.faq-list details p {
  padding: 0 2.4rem 1.8rem 0;
  font-size: .93rem;
  color: var(--ink-soft);
  max-width: 40em;
}

/* ---------- 16 Gipfel / Magazin ---------- */

.magazine { padding: 10vh 0 12vh; }
.mag-grid {
  margin-top: clamp(3.5rem, 7vh, 5.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.4rem);
}
.mag-grid article { border-top: 1px solid var(--hairline); padding-top: 1.5rem; }
.mag-grid h3 { font-size: 1.18rem; margin-bottom: .7rem; }
.mag-grid p { font-size: .9rem; color: var(--ink-soft); margin-bottom: 1.4rem; }

/* ---------- 17 Gipfel / Abschluss ---------- */

.closing {
  padding: 20vh var(--gut) 16vh;
  text-align: center;
  display: flex;
  justify-content: center;
}
.closing-inner { max-width: 780px; }
.closing h2 { font-size: clamp(2.1rem, 4.4vw, 3.7rem); }
.closing .eyebrow { margin-bottom: 1.9rem; }
.closing-text { max-width: 34em; margin: 1.7rem auto 0; color: var(--ink-soft); }
.cta-row {
  margin-top: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2.4rem, 6vw, 5rem);
}
.closing-alt { margin-top: 3.4rem; font-size: .865rem; color: var(--muted); }

.seal {
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  opacity: 0;
  transform: scale(.92) rotate(-5deg);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.seal.in { opacity: 1; transform: rotate(-2.5deg); }
@media (prefers-reduced-motion: reduce) { .seal { opacity: 1; transform: rotate(-2.5deg); transition: none; } }
.seal svg { width: 70px; height: 70px; display: block; }
.seal-glyph {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif SC", serif;
  font-size: 29px;
  fill: #E7EBEC;
  text-anchor: middle;
}
.seal-caption {
  font-size: .55rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.footer {
  border-top: 1px solid var(--hairline-soft);
  padding: clamp(3rem, 6vh, 4.5rem) 0 2.5rem;
  margin-top: 6vh;
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.foot-brand img { width: 64px; height: 64px; display: block; margin-bottom: 1.2rem; }
.foot-line { font-size: .84rem; color: var(--muted); max-width: 26em; line-height: 1.7; }
.foot-head {
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 1.1rem;
}
.footer ul { list-style: none; }
.footer li a {
  display: inline-block;
  padding: .42rem 0;
  font-size: .875rem;
  color: var(--muted);
  text-decoration: none;
  transition: color .4s var(--ease);
}
.footer li a:hover, .footer li a:focus-visible { color: var(--ink); }
.foot-bottom {
  margin-top: clamp(2.5rem, 5vh, 4rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline-soft);
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--muted);
}
.foot-legal a { color: var(--muted); text-decoration: none; }
.foot-legal a:hover, .foot-legal a:focus-visible { color: var(--ink); }

/* ---------- Nach oben ---------- */

.to-top {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 21;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: rgba(238, 242, 243, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .4s var(--ease);
}
.to-top.is-on { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover, .to-top:focus-visible { border-color: var(--ink); }

/* ---------- Content-Ampel: Vorschau-Marke ---------- */

.flag-mark {
  display: inline-flex;
  align-items: baseline;
  gap: .7rem;
  margin-bottom: 1.6rem;
  padding: .45rem .9rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(240, 243, 244, .7);
}
.flag-mark b { font-weight: 500; color: var(--ink); }
.flag-mark i { font-style: normal; letter-spacing: .04em; text-transform: none; font-size: .72rem; }
.flag-inline { margin: 0 0 0 .5rem; padding: .2rem .5rem; vertical-align: middle; }

/* ---------- Anfrageformular ---------- */

.sheet {
  border: 0;
  padding: 0;
  /* der globale Reset nimmt dem Dialog sein `margin: auto`: ohne diese Zeile
     klebt das Blatt in der oberen linken Ecke */
  margin: auto;
  max-height: 90vh;
  max-width: 640px;
  width: min(640px, calc(100vw - 2rem));
  background: linear-gradient(to bottom, #F1F4F5 0%, #E7ECEE 100%);
  color: var(--ink);
  box-shadow: 0 40px 120px -50px rgba(20, 26, 30, .85);
  border-radius: 3px;
  overflow: visible;
}
.sheet::backdrop {
  background: rgba(180, 190, 197, .62);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.sheet[open] { animation: sheetIn .5s var(--ease); }
@keyframes sheetIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sheet[open] { animation: none; } }
.sheet-inner { padding: clamp(1.8rem, 4vw, 3rem); max-height: 90vh; overflow-y: auto; overscroll-behavior: contain; }
.sheet h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); margin-bottom: .7rem; }
.sheet-lead { font-size: .88rem; color: var(--ink-soft); margin-bottom: 1.6rem; max-width: 42em; }
.sheet-lead strong { font-weight: 500; color: var(--ink); }
.sheet-close-form { position: absolute; top: .5rem; right: .5rem; }
.sheet-close {
  width: 44px; height: 44px;
  border: 0; background: none;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: color .3s var(--ease);
}
.sheet-close:hover, .sheet-close:focus-visible { color: var(--ink); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { margin-bottom: .85rem; display: flex; flex-direction: column; gap: .35rem; }
.field label {
  font-size: .655rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.field input, .field select, .field textarea {
  font-family: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: .8rem .9rem;
  min-height: 46px;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea { min-height: 92px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--ink);
  background: rgba(255, 255, 255, .8);
}
.field input:user-invalid, .field select:user-invalid { border-color: var(--seal); }
.form-help { font-size: .76rem; color: var(--muted); margin: 1.1rem 0; line-height: 1.65; }
.form-status { font-size: .82rem; color: var(--ink); min-height: 1.4em; margin-bottom: .8rem; }

/* ---------- Mobil ---------- */

@media (max-width: 1020px) {
  .approach-grid, .nav-grid, .faq-grid, .month-grid, .about-grid, .source-grid {
    grid-template-columns: 1fr;
  }
  .approach-intro, .nav-intro, .faq-intro { position: static; }
  .journey { grid-template-columns: repeat(2, 1fr); gap: 2rem 2.4rem; }
  .split-head { grid-template-columns: 1fr; gap: 1.6rem; }
  .system-panel { margin-left: 0; max-width: none; }
  .plate-portrait { max-width: 460px; }
  .zpp-step, .zpp-step:nth-child(even) { max-width: none; }
}

@media (max-width: 860px) {
  body { line-height: 1.7; }
  /* eine schmale Spur am linken Rand: dort läuft der Weg, dort steht kein Wort */
  .wrap { padding-left: 2.9rem; padding-right: 1.4rem; }
  .signpost { padding-left: 1.5rem; }
  :root { --head-h: 84px; }
  .nav { padding: .75rem 1.15rem 0; }
  .nav-links { display: none; }
  .brand img { width: 44px; height: 44px; }
  .nav-cta { font-size: .6rem; letter-spacing: .14em; }

  .hero { padding-top: 5.6rem; padding-bottom: 3rem; }
  .signpost { margin-bottom: 0; }
  h1 { font-size: clamp(2.1rem, 8.4vw, 3rem); line-height: 1.08; letter-spacing: -.012em; }
  .hero .eyebrow { margin-bottom: 1.5rem; font-size: .58rem; letter-spacing: .16em; }
  .hero-below { margin-top: 3.4rem; }
  .lead { font-size: 1.05rem; line-height: 1.5; }
  .hero-ctas { gap: .8rem; flex-direction: column; align-items: stretch; }
  .hero-ctas .btn-primary, .hero-ctas .btn-ghost { justify-content: center; }
  .scroll-hint { display: none; }
  .signpost { margin-top: 3.4rem; }
  .signpost-list { grid-template-columns: 1fr; gap: 1.1rem; }
  .method-copy::first-letter { font-size: 1em; float: none; padding: 0; color: inherit; }

  .source { padding: 14vh 0 12vh; }
  .source-grid { margin-top: 3rem; gap: 3rem; }
  .benefits li { grid-template-columns: 2rem 1fr; padding: 1.5rem 0; }

  .method { padding: 10vh 0 12vh; }
  .ring { width: 88vw; }
  .ring-inner { max-width: 82%; }
  .principles { grid-template-columns: 1fr; gap: 0; margin-top: 3rem; }
  .principles li { padding: 1.6rem 0; }

  .approach, .lesson, .audience, .courses, .format, .starts, .navigator, .month, .zpp, .about, .voices, .faq, .magazine {
    padding: 9vh 0 10vh;
  }
  .difference li, .routes li, .about-points li { grid-template-columns: 2rem 1fr; padding: 1.5rem 0; }
  .journey { grid-template-columns: 1fr; gap: 0; margin-top: 3rem; }
  .journey li { padding: 1.8rem 0 1.4rem 1.6rem; }
  .journey li::before { right: auto; bottom: 0; width: 1px; height: 100%; }
  .journey li::after { top: 1.9rem; left: -3px; }
  .who-grid, .cards, .starts-grid, .voice-grid, .mag-grid, .format-grid {
    grid-template-columns: 1fr; gap: 0;
  }
  .who-grid article, .card, .starts-grid article, .mag-grid article { padding: 1.8rem 0; }
  .format-grid { gap: 1.2rem; }
  .fmt { padding: 1.6rem; }
  .voice-grid { gap: 1rem; }
  .voice-slot { min-height: 0; padding: 1.5rem; }
  .weeks { grid-template-columns: 1fr; margin-top: 2.4rem; }
  .month-aside { margin-top: 2rem; }

  /* die Steine rücken in die Wegspur: der Weg läuft an ihnen entlang, nie
     durch den Text */
  .zpp-steps { margin-left: -2.1rem; }
  .zpp-step, .zpp-step:nth-child(even) {
    grid-template-columns: 48px 1fr;
    margin-left: 0;
    gap: .9rem;
    padding: 1.5rem 0;
  }
  .zpp-step:nth-child(even) .cairn { order: 0; }
  .zpp-step:nth-child(even) .zpp-text { order: 0; }
  .cairn svg { width: 48px; }
  .zpp-foot { grid-template-columns: 1fr; gap: 2rem; }

  .about-grid { gap: 2.6rem; }
  .plate-wide { aspect-ratio: 3 / 2; margin-top: 3rem; }

  .closing { padding: 14vh 1.2rem 12vh; }
  .cta-row { flex-direction: column; gap: 2.6rem; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .foot-brand { grid-column: 1 / -1; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .sheet-inner { max-height: 84vh; }
}

@media (max-width: 420px) {
  .signpost-list li { grid-template-columns: 1.7rem 1fr; }
  .to-top { width: 44px; height: 44px; }
}