/* =========================================================================
   Mit Ruhe zur Kraft — Konzept 8, rebuilt.
   The palette, the surface rhythm, the card language and the type sizes are
   the client's own, lifted from his Konzept-8 file. What changed is craft:
   anchor offsets, focus states, touch targets, font loading, responsive
   behaviour between 900 and 1200px, and five contrast values that missed AA.
   Every such change is listed in CONCEPT.md.
   ========================================================================= */

@font-face {
  font-family: 'InterVar';
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'InterVar';
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- his colours, verbatim from the Konzept-8 "Konzept 7" token block --- */
  --ink: #163C32;
  --ink-900: #0A2821;
  --ink-800: #10342A;
  --pine: #2B5A49;
  --sage: #70836F;
  --sage-100: #E6EDE3;
  --cream: #FCFAF5;
  --sand: #F3EFE6;
  --gold: #B9883D;
  --gold-100: #E6C979;
  --muted: #506259;
  --lead: #56685E;
  --line: rgba(22, 60, 50, .14);
  --shadow: 0 18px 46px rgba(11, 43, 35, .10);
  --radius: 22px;
  --radius-sm: 14px;
  --container: 1180px;

  /* --- two values nudged for WCAG AA, smallest step that reaches 4.5:1 ---
     --sage was used as small bold label text at 11px on four backgrounds and
     reached only 3.4-4.0:1; --sage-text is the same hue, darkened until the
     worst of those four (on --sage-100) clears 4.5:1. The decorative --sage
     above is untouched and still used for non-text purposes.
     --gold-text was 4.42:1 on --sage-100; #886129 clears it everywhere.   */
  --sage-text: #5E6E5E;
  --gold-text: #886129;

  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --sans: 'InterVar', Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --header-h: 82px;
}

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

html {
  scroll-behavior: smooth;
  /* his sticky header used to swallow the top of every anchored section */
  scroll-padding-top: calc(var(--header-h) + 18px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0; min-width: 0; overflow-x: hidden;
  color: var(--ink); background: var(--cream);
  font-family: var(--sans); font-size: 1rem; line-height: 1.56;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* a focus ring that survives both his light paper and his dark green */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
.section--dark :focus-visible, .journey :focus-visible,
.site-header :focus-visible, .footer :focus-visible,
.testimonial-section :focus-visible { outline-color: var(--gold-100); }

.container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }

.skip-link {
  position: absolute; left: 14px; top: -60px; z-index: 100;
  padding: 12px 16px; color: #fff; background: var(--ink); border-radius: 8px;
  font-size: .9rem; font-weight: 700;
}
.skip-link:focus { top: 14px; }

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------- utility bar */
.utility {
  background: var(--sage-100); color: #385548;
  border-bottom: 1px solid rgba(22, 60, 50, .08);
  font-size: .74rem;
}
.utility__inner {
  min-height: 36px; display: flex; align-items: center;
  justify-content: space-between; gap: 20px;
}
.utility strong { color: var(--gold-text); font-weight: 780; }

/* -------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 40, 33, .98);
  border-bottom: 1px solid rgba(230, 237, 227, .14);
  box-shadow: 0 7px 22px rgba(5, 26, 20, .12);
  backdrop-filter: blur(14px);
}
.site-header__inner {
  min-height: var(--header-h); display: flex; align-items: center;
  justify-content: space-between; gap: 24px;
}

/* His mark keeps its face: script inside the ring, on his dark ground.
   At this size the artwork is the optically adjusted cut (logo-small.svg),
   whose strokes are dilated a hair so the hairline and the lettering survive
   the downscale. See CONCEPT.md. */
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; line-height: 0; }
.brand img { width: 62px; height: 60px; object-fit: contain; }

.site-nav { display: flex; align-items: center; justify-content: center; gap: 20px; min-width: 0; }
.site-nav a {
  position: relative; display: inline-flex; align-items: center;
  min-height: 44px; padding: 4px 0;
  color: #ECF2EC; font-size: .87rem; font-weight: 700; white-space: nowrap;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 9px; width: 0; height: 1px;
  background: var(--gold-100); transition: width .2s ease;
}
.site-nav a:hover { color: var(--gold-100); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { width: 100%; }

/* the in-menu CTA exists only for the collapsed menu */
.site-nav .nav-cta { display: none; }

.menu-toggle {
  display: none; width: 46px; height: 46px; padding: 0; border: 0;
  color: #F5F8F4; background: transparent; cursor: pointer;
}
.menu-toggle svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.9; }

/* --------------------------------------------------------------- button */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 12px 18px;
  border: 1px solid transparent; border-radius: 9px;
  font-size: .86rem; font-weight: 800; line-height: 1.2; cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn .arw { transition: transform .18s ease; }
.btn:hover .arw { transform: translateX(3px); }
.btn--gold { background: var(--gold); color: #142E25; box-shadow: 0 10px 22px rgba(185, 136, 61, .20); }
.btn--gold:hover { background: var(--gold-100); }
.btn--dark { background: var(--ink); color: #fff; box-shadow: 0 10px 22px rgba(18, 53, 43, .16); }
.btn--dark:hover { background: var(--pine); }
.btn--outline-dark { background: transparent; color: #1B4236; border-color: #2C5748; }
.btn--outline-dark:hover { background: #E8EEE6; }
.btn--outline-light { background: transparent; color: #F2F7F2; border-color: rgba(241, 247, 241, .76); }
.btn--outline-light:hover { background: rgba(255, 255, 255, .11); }
.header-cta { flex: 0 0 auto; box-shadow: 0 8px 18px rgba(0, 0, 0, .18); }

/* ----------------------------------------------------------------- hero */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: #11372D; color: #fff;
}
.hero__image {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; opacity: .61;
  filter: saturate(.78) contrast(.97) brightness(.9);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10, 40, 33, .99) 0%, rgba(13, 48, 39, .95) 43%,
    rgba(17, 55, 45, .72) 68%, rgba(17, 55, 45, .32) 100%);
}
/* his quarter-ring at the lower left. The page thread is born here. */
.hero::after {
  content: ""; position: absolute; z-index: -1;
  width: 470px; aspect-ratio: 1; left: -245px; bottom: -287px;
  border: 1px solid rgba(230, 201, 121, .34); border-radius: 50%;
  box-shadow: inset 0 0 0 38px rgba(230, 201, 121, .045);
}
.hero__inner {
  min-height: 610px; display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .62fr);
  align-items: center; gap: 72px; padding: 78px 0 84px;
}
.kicker, .eyebrow {
  margin: 0 0 13px; font-size: .71rem; letter-spacing: .15em;
  text-transform: uppercase; font-weight: 820;
}
.kicker { color: var(--gold-100); }
.eyebrow { color: var(--sage-text); }
.section--dark .eyebrow, .journey .eyebrow, .testimonial-section .eyebrow { color: var(--gold-100); }

.hero h1 {
  max-width: 740px; margin: 0 0 20px; color: #fff; font-family: var(--serif);
  font-size: clamp(3.35rem, 5.5vw, 5.7rem); font-weight: 500;
  letter-spacing: -.056em; line-height: .92;
}
.hero h1 span { color: var(--gold-100); }
.hero__lead { max-width: 640px; margin: 0 0 14px; color: #D9E5DA; font-size: 1.06rem; line-height: 1.72; }
.hero__meta { max-width: 640px; margin: 0 0 29px; color: #D9E5DA; font-size: 1.06rem; }
.hero__meta strong { color: var(--gold-100); font-weight: 780; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-aside {
  width: 100%; max-width: 370px; justify-self: end; overflow: hidden;
  border: 1px solid rgba(230, 201, 121, .30); border-radius: var(--radius);
  background: rgba(8, 35, 28, .75); box-shadow: 0 21px 44px rgba(0, 0, 0, .21);
  backdrop-filter: blur(10px);
}
.hero-aside__top { padding: 25px 25px 22px; }
.hero-aside__label {
  margin: 0 0 11px; color: var(--gold-100); font-size: .69rem;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 820;
}
.hero-aside h2 {
  margin: 0; color: #fff; font-family: var(--serif); font-size: 2.05rem;
  font-weight: 500; letter-spacing: -.035em; line-height: 1.02;
}
.hero-aside__list { list-style: none; display: grid; gap: 0; padding: 0; margin: 0; }
.hero-aside__list li {
  display: grid; grid-template-columns: 23px minmax(0, 1fr); gap: 10px;
  padding: 15px 25px; border-top: 1px solid rgba(255, 255, 255, .12);
  color: #E1EBE2; font-size: .86rem; line-height: 1.47;
}
.hero-aside__list b { color: var(--gold-100); font-weight: 800; }
.hero-aside__list strong { color: #fff; font-weight: 750; }

/* ------------------------------------------------------------- sections */
.section { padding: 96px 0; position: relative; }
.section--sand { background: var(--sand); }
.section--sage { background: var(--sage-100); }
.section--cream { background: var(--cream); }
.section--dark { background: linear-gradient(135deg, #143E33 0%, #0D2F26 100%); color: #fff; }

.section-title {
  max-width: 760px; margin: 0 0 15px; color: #173F34; font-family: var(--serif);
  font-size: clamp(2.55rem, 4.15vw, 4.2rem); font-weight: 500;
  letter-spacing: -.042em; line-height: 1.02;
}
.section--dark .section-title, .journey .section-title,
.testimonial-section .section-title { color: #F7FAF6; }
.section-lead { max-width: 725px; margin: 0; color: var(--lead); font-size: 1.02rem; line-height: 1.7; }
.section--dark .section-lead, .journey .section-lead,
.testimonial-section .section-lead { color: #D9E6DC; }
.section-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 42px; margin-bottom: 37px;
}
.section-head .section-lead { max-width: 460px; }

/* --------------------------------------------------- Calligraphy Health */
.calligraphy {
  background: linear-gradient(120deg, #FCFAF4 0%, #F5F2E9 57%, #E6EDE3 100%);
  border-top: 1px solid rgba(22, 60, 50, .05);
  border-bottom: 1px solid rgba(22, 60, 50, .05);
}
.calligraphy__grid {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(355px, .82fr);
  gap: 52px; align-items: stretch;
}
.calligraphy__content { align-self: center; }
.calligraphy__title {
  margin: 0 0 17px; color: #173F34; font-family: var(--serif);
  font-size: clamp(2.9rem, 4.7vw, 4.75rem); font-weight: 500;
  letter-spacing: -.047em; line-height: .98;
}
.calligraphy__title span { color: var(--gold-text); }
.calligraphy__copy { max-width: 710px; margin: 0; color: var(--muted); font-size: 1.03rem; line-height: 1.72; }
.calligraphy__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.system-panel {
  min-width: 0; position: relative; overflow: hidden; display: flex;
  flex-direction: column; justify-content: space-between; padding: 33px;
  border-radius: var(--radius); border-left: 4px solid var(--gold);
  background: linear-gradient(150deg, #173E33 0%, #0D2E25 100%);
  color: #fff; box-shadow: 0 20px 48px rgba(11, 43, 35, .16);
}
.system-panel::after {
  content: ""; position: absolute; right: -93px; bottom: -112px; width: 280px;
  aspect-ratio: 1; border: 1px solid rgba(230, 201, 121, .32); border-radius: 50%;
  box-shadow: inset 0 0 0 28px rgba(230, 201, 121, .045);
}
.system-panel > * { position: relative; z-index: 1; }
.system-panel__label {
  color: var(--gold-100); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 820;
}
.system-panel h3 {
  margin: 7px 0 18px; color: #fff; font-family: var(--serif); font-size: 2.25rem;
  font-weight: 500; letter-spacing: -.04em; line-height: 1.02;
}
.system-panel__copy { color: #D9E6DB; font-size: .92rem; line-height: 1.62; }
.system-panel__link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  margin-top: 15px; color: var(--gold-100); font-size: .84rem; font-weight: 800;
}
.system-panel__link:hover { text-decoration: underline; text-underline-offset: 4px; }

.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 38px; }
.principle {
  min-width: 0; min-height: 188px; padding: 24px 22px;
  border: 1px solid rgba(22, 60, 50, .12); border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .84); box-shadow: 0 6px 18px rgba(22, 60, 50, .04);
}
.principle__number {
  display: block; margin-bottom: 14px; color: var(--gold-text);
  font-family: var(--serif); font-size: 2.1rem; font-weight: 500; line-height: 1;
}
.principle h3 { margin: 0 0 8px; color: var(--ink); font-size: 1rem; line-height: 1.25; }
.principle p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.55; }

.audience-note {
  margin-top: 20px; padding: 14px 17px; border-left: 3px solid var(--gold);
  background: rgba(255, 255, 255, .64); color: #40584C; font-size: .86rem; line-height: 1.55;
}
.audience-note strong { color: #173F34; }

/* ------------------------------------------------------ Warum / benefits */
.practice-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(355px, .87fr);
  gap: 64px; align-items: center;
}
.benefits { display: grid; gap: 16px; margin-top: 29px; }
.benefit { display: grid; grid-template-columns: 43px minmax(0, 1fr); gap: 14px; }
.benefit__count {
  display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%;
  background: #EAF0E7; color: var(--gold-text); border: 1px solid rgba(22, 60, 50, .12);
  font-size: .84rem; font-weight: 820;
}
.benefit h3 { margin: 0 0 4px; color: #173F34; font-size: 1rem; line-height: 1.25; }
.benefit p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }

.visual-card {
  position: relative; min-height: 500px; overflow: hidden;
  border-radius: var(--radius); background: #173F34;
  box-shadow: 0 19px 40px rgba(22, 60, 50, .13);
}
.visual-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visual-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 48, 39, .08), rgba(11, 43, 35, .82) 88%);
}
.visual-card__caption { position: absolute; z-index: 1; left: 28px; right: 28px; bottom: 26px; }
.visual-card__caption p { margin: 0; color: #D9E7DA; font-size: .82rem; }
.visual-card__caption h3 {
  margin: 4px 0 0; color: #fff; font-family: var(--serif); font-size: 2.05rem;
  font-weight: 500; letter-spacing: -.033em; line-height: 1.03;
}

/* ------------------------------------------------------------- Für wen  */
.audience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.audience-card {
  min-width: 0; min-height: 310px; display: flex; flex-direction: column; padding: 29px;
  border: 1px solid rgba(22, 60, 50, .12); border-radius: var(--radius);
  background: #fff; box-shadow: 0 8px 23px rgba(22, 60, 50, .055);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.audience-card:hover { border-color: rgba(185, 136, 61, .56); box-shadow: 0 17px 36px rgba(22, 60, 50, .11); }
.audience-card__eyebrow {
  margin: 0 0 14px; color: var(--sage-text); font-size: .7rem;
  letter-spacing: .13em; text-transform: uppercase; font-weight: 820;
}
.audience-card h3 {
  margin: 0 0 10px; color: #173F34; font-family: var(--serif); font-size: 1.88rem;
  font-weight: 500; letter-spacing: -.03em; line-height: 1.06;
}
.audience-card p { margin: 0 0 18px; color: var(--muted); font-size: .91rem; line-height: 1.6; }
.audience-card__fit {
  margin-top: auto; padding-top: 15px; border-top: 1px solid var(--line);
  color: #365748; font-size: .82rem; line-height: 1.47;
}
.audience-card__fit b { display: block; margin-bottom: 4px; color: var(--ink); font-size: .8rem; }

/* --------------------------------------------------------- Ansatz rows  */
.difference-grid {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 56px; align-items: start;
}
.difference-intro { position: sticky; top: calc(var(--header-h) + 24px); }
.difference-list { display: grid; gap: 0; }
.difference-row {
  display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 20px;
  padding: 26px 0; border-top: 1px solid var(--line);
}
.difference-row:last-child { border-bottom: 1px solid var(--line); }
.difference-row__number {
  color: var(--gold-text); font-family: var(--serif); font-size: 1.6rem;
  font-weight: 500; line-height: 1.1;
}
.difference-row h3 { margin: 0 0 7px; color: #173F34; font-size: 1.06rem; line-height: 1.3; }
.difference-row p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.6; }

/* ------------------------------------------------------ journey (Ablauf) */
.journey { background: linear-gradient(135deg, #143E33 0%, #0D2F26 100%); color: #fff; }
.journey__head { display: flex; align-items: end; justify-content: space-between; gap: 42px; margin-bottom: 37px; }
.journey__head .section-lead { max-width: 500px; }
.journey-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.journey-grid::before {
  content: ""; position: absolute; left: 4.2%; right: 4.2%; top: 28px; height: 1px;
  background: rgba(230, 201, 121, .36);
}
.journey-step { min-width: 0; position: relative; padding: 0 22px 0 0; }
.journey-step:not(:first-child) { padding-left: 22px; }
.journey-step__dot {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 57px; height: 57px; margin-bottom: 21px;
  border: 1px solid rgba(230, 201, 121, .62); border-radius: 50%;
  background: #12372D; color: var(--gold-100); font-family: var(--serif); font-size: 1.6rem;
}
.journey-step h3 { margin: 0 0 7px; color: #fff; font-size: 1.03rem; line-height: 1.25; }
.journey-step p { margin: 0; color: #D4E0D7; font-size: .86rem; line-height: 1.55; }

.truth-strip {
  margin-top: 34px; padding: 16px 18px;
  border: 1px solid rgba(230, 201, 121, .28); border-radius: var(--radius-sm);
  color: #E1EBE3; background: rgba(255, 255, 255, .07); font-size: .85rem; line-height: 1.55;
}
.truth-strip b { color: var(--gold-100); }

/* -------------------------------------------------------- Kursübersicht */
.course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.course-card {
  min-width: 0; display: flex; flex-direction: column; min-height: 342px; padding: 27px;
  border: 1px solid rgba(22, 60, 50, .12); border-radius: var(--radius);
  background: #fff; box-shadow: 0 8px 23px rgba(22, 60, 50, .055);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.course-card:hover {
  transform: translateY(-4px);
  border-color: rgba(185, 136, 61, .56); box-shadow: 0 17px 36px rgba(22, 60, 50, .11);
}
.icon-box {
  display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 20px;
  border-radius: 14px; color: #1D4A3D; background: #E3EBE1;
  border: 1px solid rgba(22, 60, 50, .09);
}
.icon-box svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.course-card h3 {
  margin: 0 0 9px; color: #173F34; font-family: var(--serif); font-size: 1.72rem;
  font-weight: 500; letter-spacing: -.028em; line-height: 1.07;
}
.course-card p { margin: 0 0 18px; color: var(--muted); font-size: .91rem; line-height: 1.58; }

.text-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  margin-top: auto; color: var(--ink); font-size: .85rem; font-weight: 820;
}
.text-link .arw { color: var(--gold-text); transition: transform .18s ease; }
.text-link:hover .arw { transform: translateX(3px); }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ------------------------------------------------------- format compare */
.format-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.format-card {
  min-width: 0; display: flex; flex-direction: column; min-height: 340px; padding: 32px;
  border: 1px solid rgba(22, 60, 50, .12); border-radius: var(--radius);
  background: #FFFDF9; box-shadow: 0 8px 23px rgba(22, 60, 50, .055);
}
.format-card--dark {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(150deg, #173F34 0%, #0D2E25 100%); border-color: #173F34;
}
.format-card--dark::after {
  content: ""; position: absolute; right: -115px; bottom: -134px; width: 275px;
  aspect-ratio: 1; border: 1px solid rgba(230, 201, 121, .31); border-radius: 50%;
  box-shadow: inset 0 0 0 27px rgba(230, 201, 121, .045);
}
.format-card > * { position: relative; z-index: 1; }
.format-card__kicker {
  margin: 0 0 15px; color: var(--sage-text); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 820;
}
.format-card--dark .format-card__kicker { color: var(--gold-100); }
.format-card h3 {
  margin: 0 0 11px; color: #173F34; font-family: var(--serif); font-size: 2.15rem;
  font-weight: 500; letter-spacing: -.037em; line-height: 1.02;
}
.format-card--dark h3 { color: #fff; }
.format-card__copy { margin: 0 0 18px; color: var(--muted); font-size: .92rem; line-height: 1.6; }
.format-card--dark .format-card__copy { color: #D7E4D9; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; margin-bottom: 21px; }
.tag { padding: 7px 10px; border-radius: 999px; color: #2D5143; background: #E4ECE1; font-size: .75rem; font-weight: 760; }
.format-card--dark .tag { color: #E8F0E9; background: rgba(255, 255, 255, .12); }
.format-card .btn { align-self: flex-start; }

/* -------------------------------------------------------- Kursnavigator */
.navigator-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 50px; align-items: start; }
.navigator-intro { position: sticky; top: calc(var(--header-h) + 24px); }
.navigator-intro .section-lead { max-width: 480px; }
.route-list { display: grid; gap: 14px; }
.route {
  min-width: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center; gap: 18px; padding: 23px;
  border: 1px solid rgba(22, 60, 50, .12); border-radius: var(--radius-sm);
  background: #fff; box-shadow: 0 8px 23px rgba(22, 60, 50, .055);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.route:hover { transform: translateY(-2px); border-color: rgba(185, 136, 61, .56); box-shadow: 0 14px 32px rgba(22, 60, 50, .09); }
.route__number {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
  color: var(--gold-100); background: var(--ink); font-family: var(--serif); font-size: 1.45rem;
}
.route h3 { margin: 0 0 5px; color: #173F34; font-family: var(--serif); font-size: 1.38rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.route p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.52; }
.route__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); font-size: .83rem; font-weight: 820; white-space: nowrap; }
.route__link .arw { color: var(--gold-text); }
.route__link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ------------------------------------------------------------ Kursstarts */
.course-starts {
  background: linear-gradient(135deg, #FCFAF5 0%, #F3EFE6 100%);
  border-top: 1px solid rgba(22, 60, 50, .06); border-bottom: 1px solid rgba(22, 60, 50, .06);
}
.editor-note {
  display: flex; align-items: flex-start; gap: 11px; margin: 0 0 26px; padding: 12px 14px;
  border: 1px solid rgba(185, 136, 61, .38); border-radius: 12px;
  background: #FFF8E7; color: #5C4825; font-size: .82rem; line-height: 1.5;
}
.editor-note__flag {
  flex: 0 0 auto; display: inline-grid; place-items: center; min-width: 59px; height: 22px;
  padding: 0 7px; border-radius: 999px; background: var(--gold); color: #fff;
  font-size: .63rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase;
}
.start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.start-card {
  position: relative; min-width: 0; min-height: 322px; display: flex; flex-direction: column;
  padding: 27px; border: 1px solid rgba(22, 60, 50, .13); border-radius: var(--radius);
  background: #FFFDF9; box-shadow: 0 10px 25px rgba(22, 60, 50, .06);
}
.start-card__badge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 9px; border-radius: 999px; background: var(--sage-100);
  color: #315344; font-size: .71rem; font-weight: 780;
}
.start-card__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.start-card__date {
  margin: 20px 0 7px; color: var(--gold-text); font-family: var(--serif);
  font-size: 2.25rem; font-weight: 500; letter-spacing: -.04em; line-height: 1;
}
.start-card__date small {
  display: block; margin-top: 6px; color: var(--sage-text); font-family: var(--sans);
  font-size: .75rem; font-weight: 760; letter-spacing: .04em; text-transform: uppercase;
}
.start-card h3 {
  margin: 12px 0 8px; color: var(--ink); font-family: var(--serif); font-size: 1.5rem;
  font-weight: 500; letter-spacing: -.025em; line-height: 1.08;
}
.start-card p { margin: 0 0 16px; color: var(--muted); font-size: .89rem; line-height: 1.55; }
.start-card__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; margin-bottom: 18px; }

/* ------------------------------------------------ Krankenkasse + weave  */
.zpp-top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .8fr);
  gap: 56px; align-items: center;
}
.zpp-card {
  min-width: 0; padding: 33px; border: 1px solid rgba(230, 201, 121, .29);
  border-radius: var(--radius); background: rgba(5, 29, 22, .22);
}
.zpp-card h3 { margin: 0 0 13px; color: #fff; font-family: var(--serif); font-size: 2.25rem; font-weight: 500; letter-spacing: -.035em; line-height: 1.04; }
.zpp-card p { margin: 0; color: #D9E5DC; font-size: .93rem; line-height: 1.63; }
.zpp-card__rule { height: 1px; margin: 22px 0; background: rgba(255, 255, 255, .18); }
.zpp-card__points { display: grid; gap: 10px; padding: 0; margin: 0 0 22px; list-style: none; }
.zpp-card__points li { display: grid; grid-template-columns: 19px minmax(0, 1fr); gap: 9px; color: #E1EBE3; font-size: .84rem; line-height: 1.48; }
.zpp-card__points span { color: var(--gold-100); }

/* the stone-step weave: his four ZPP steps as stepping stones, alternating
   across the page thread. Stones and the thread itself are drawn by
   js/thread.js into the page-wide overlay, so it is one continuous line. */
.weave { position: relative; margin-top: 64px; }
.weave__steps { display: grid; gap: 0; }
.weave-step {
  position: relative; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1fr);
  min-height: 200px;
}
.weave-step__body { max-width: 44ch; }
.weave-step:nth-child(odd) .weave-step__body { grid-column: 1; text-align: right; justify-self: end; }
.weave-step:nth-child(even) .weave-step__body { grid-column: 3; }
.weave-step__slot { grid-column: 2; justify-self: center; align-self: center; width: 190px; height: 100%; }
.weave-step__number {
  display: block; margin-bottom: 9px; color: var(--gold-100);
  font-family: var(--serif); font-size: 1.6rem; font-weight: 500; line-height: 1;
}
.weave-step h3 { margin: 0 0 6px; color: #fff; font-size: 1.06rem; line-height: 1.3; }
.weave-step p { margin: 0; color: #D2DFD5; font-size: .88rem; line-height: 1.55; }
.zpp-cta { margin-top: 46px; display: flex; justify-content: center; }

/* ---------------------------------------------------------- erste 30 Tage */
.month-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .74fr); gap: 56px; align-items: start; }
.month-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.month-cell { min-width: 0; padding-top: 17px; border-top: 2px solid var(--gold); }
.month-cell__week {
  display: block; margin-bottom: 9px; color: var(--sage-text); font-size: .7rem;
  letter-spacing: .13em; text-transform: uppercase; font-weight: 820;
}
.month-cell h3 { margin: 0 0 6px; color: #173F34; font-size: 1rem; line-height: 1.25; }
.month-cell p { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.52; }
.month-aside {
  position: relative; overflow: hidden; padding: 33px; border-radius: var(--radius);
  background: linear-gradient(150deg, #173E33 0%, #0D2E25 100%); color: #fff;
  box-shadow: 0 20px 48px rgba(11, 43, 35, .16);
}
.month-aside::after {
  content: ""; position: absolute; right: -100px; top: -120px; width: 260px; aspect-ratio: 1;
  border: 1px solid rgba(230, 201, 121, .32); border-radius: 50%;
  box-shadow: inset 0 0 0 26px rgba(230, 201, 121, .045);
}
.month-aside > * { position: relative; z-index: 1; }
.month-aside__eyebrow { margin: 0 0 10px; color: var(--gold-100); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 820; }
.month-aside h3 { margin: 0 0 13px; color: #fff; font-family: var(--serif); font-size: 2.05rem; font-weight: 500; letter-spacing: -.035em; line-height: 1.04; }
.month-aside p { margin: 0 0 22px; color: #D9E5DC; font-size: .92rem; line-height: 1.62; }

/* ------------------------------------------------------------ über mich */
.about { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(330px, .78fr); gap: 64px; align-items: start; }
.about-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 29px; }
.about-point { min-width: 0; padding-top: 18px; border-top: 2px solid var(--gold); }
.about-point__number { display: block; margin-bottom: 10px; color: var(--gold-text); font-family: var(--serif); font-size: 1.55rem; font-weight: 500; line-height: 1; }
.about-point h3 { margin: 0 0 7px; color: #173F34; font-size: .98rem; }
.about-point p { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.52; }

.quote-card {
  position: relative; overflow: hidden; padding: 35px;
  border: 1px solid rgba(22, 60, 50, .12); border-radius: var(--radius);
  background: #FFFDF9; box-shadow: 0 12px 30px rgba(22, 60, 50, .08);
}
.quote-card::after {
  content: ""; position: absolute; right: -78px; top: -88px; width: 210px; aspect-ratio: 1;
  border: 1px solid rgba(185, 136, 61, .44); border-radius: 50%;
}
.quote-card > * { position: relative; z-index: 1; }
.quote-card__mark { display: block; color: var(--gold-text); font-family: var(--serif); font-size: 5rem; line-height: .55; }
.quote-card blockquote {
  margin: 18px 0 19px; color: var(--ink); font-family: var(--serif); font-size: 1.68rem;
  font-weight: 500; letter-spacing: -.023em; line-height: 1.16;
}
.quote-card__attrib { margin: 0 0 20px; color: var(--muted); font-size: .88rem; line-height: 1.55; }

/* ------------------------------------------------------------- Stimmen  */
.testimonial-section { background: linear-gradient(135deg, #143E33 0%, #0D2F26 100%); color: #fff; }
.testimonial-section .editor-note { background: rgba(255, 248, 231, .95); }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
/* placeholder slots: the house rule is real voices only, so these stay
   visibly empty until Yasar supplies approved quotes */
.voice-slot {
  min-width: 0; min-height: 250px; display: flex; flex-direction: column;
  padding: 27px; border: 1px dashed rgba(230, 201, 121, .42); border-radius: var(--radius);
  background: rgba(255, 255, 255, .045);
}
.voice-slot__label {
  align-self: flex-start; padding: 5px 10px; border-radius: 999px;
  background: rgba(230, 201, 121, .16); color: var(--gold-100);
  font-size: .66rem; font-weight: 820; letter-spacing: .1em; text-transform: uppercase;
}
.voice-slot__rules { display: grid; gap: 12px; margin: 26px 0 auto; }
.voice-slot__rules span { display: block; height: 1px; background: rgba(230, 201, 121, .22); }
.voice-slot__rules span:nth-child(2) { width: 86%; }
.voice-slot__rules span:nth-child(3) { width: 62%; }
.voice-slot__foot { margin: 24px 0 0; color: #BCCFC1; font-size: .8rem; line-height: 1.5; }
.testimonial-note { margin: 30px 0 0; color: #CBDACE; font-size: .86rem; line-height: 1.6; max-width: 780px; }

/* ----------------------------------------------------------------- FAQ  */
.faq-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 60px; align-items: start; }
.faq-note {
  padding: 26px; border-left: 3px solid var(--gold); background: var(--sage-100);
  color: #3E594A; font-size: .9rem; line-height: 1.62;
}
.faq-note strong { color: var(--ink); }
.faq-list { display: grid; gap: 11px; }
.faq-list details {
  overflow: hidden; border: 1px solid rgba(22, 60, 50, .12); border-radius: var(--radius-sm);
  background: #FFFDF9; box-shadow: 0 8px 23px rgba(22, 60, 50, .055);
}
.faq-list summary {
  position: relative; padding: 19px 54px 19px 20px; min-height: 44px;
  color: var(--ink); font-size: .96rem; font-weight: 780; cursor: pointer; list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 13px; height: 13px;
  margin-top: -6px;
  background:
    linear-gradient(var(--gold-text), var(--gold-text)) center/13px 1.6px no-repeat,
    linear-gradient(var(--gold-text), var(--gold-text)) center/1.6px 13px no-repeat;
  transition: transform .2s ease;
}
.faq-list details[open] summary::after {
  background: linear-gradient(var(--gold-text), var(--gold-text)) center/13px 1.6px no-repeat;
  transform: rotate(180deg);
}
.faq-list details p { margin: 0; padding: 0 20px 19px; color: var(--muted); font-size: .9rem; line-height: 1.62; }

/* -------------------------------------------------------------- Magazin */
.magazine-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.article-card {
  min-width: 0; min-height: 265px; display: flex; flex-direction: column; padding: 27px;
  border: 1px solid rgba(22, 60, 50, .12); border-radius: var(--radius);
  background: rgba(255, 255, 255, .86); box-shadow: 0 8px 23px rgba(22, 60, 50, .055);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.article-card:hover { transform: translateY(-3px); border-color: rgba(185, 136, 61, .5); box-shadow: 0 15px 32px rgba(22, 60, 50, .1); }
.article-card__type { margin: 0 0 15px; color: var(--sage-text); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 820; }
.article-card h3 { margin: 0 0 11px; color: #173F34; font-family: var(--serif); font-size: 1.64rem; font-weight: 500; line-height: 1.1; letter-spacing: -.025em; }
.article-card p { margin: 0 0 17px; color: var(--muted); font-size: .88rem; line-height: 1.55; }

/* ----------------------------------------------------------- closing CTA */
.cta { padding: 96px 0; background: var(--sage-100); position: relative; }
.cta__box {
  position: relative; overflow: hidden; display: flex; align-items: center;
  justify-content: space-between; gap: 32px; padding: 52px 58px;
  border-radius: var(--radius); color: #fff;
  background: linear-gradient(145deg, #173F34 0%, #0D2F26 100%);
  border: 1px solid rgba(230, 201, 121, .16); box-shadow: var(--shadow);
}
.cta__box::after {
  content: ""; position: absolute; right: -130px; top: -172px; width: 350px; aspect-ratio: 1;
  border: 1px solid rgba(230, 201, 121, .38); border-radius: 50%;
  box-shadow: inset 0 0 0 30px rgba(230, 201, 121, .045);
}
.cta__copy { position: relative; z-index: 1; }
.cta__copy .eyebrow { color: var(--gold-100); }
.cta h2 {
  margin: 0 0 8px; color: #fff; font-family: var(--serif);
  font-size: clamp(2.35rem, 3.85vw, 3.75rem); font-weight: 500; letter-spacing: -.045em; line-height: 1;
}
.cta p { max-width: 630px; margin: 0; color: #D6E2D8; font-size: 1rem; }
.cta .btn { position: relative; z-index: 1; flex: 0 0 auto; }

/* -------------------------------------------------------------- footer  */
.footer { padding: 59px 0 22px; color: #C2D0C5; background: #0B2921; position: relative; }
.footer__grid { display: grid; grid-template-columns: 1.5fr .9fr 1fr 1fr; gap: 42px; }
.footer__brand img { width: 78px; height: 76px; object-fit: contain; margin-bottom: 13px; }
.footer p { color: #BDCBBF; font-size: .86rem; line-height: 1.55; margin: 0; }
.footer h3 { margin: 0 0 10px; color: var(--gold-100); font-size: .71rem; letter-spacing: .14em; text-transform: uppercase; }
.footer ul { display: grid; gap: 2px; padding: 0; margin: 0; list-style: none; }
.footer li a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: #BDCBBF; font-size: .86rem; line-height: 1.4;
}
.footer li a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer__bottom {
  display: flex; justify-content: space-between; gap: 14px; margin-top: 42px;
  padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14);
  color: #91A999; font-size: .75rem;
}
.footer__bottom a { min-height: 44px; display: inline-flex; align-items: center; }
.footer__bottom a:hover { color: #fff; }

/* ---------------------------------------------------------- floating UI */
.to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 40; display: grid; place-items: center;
  width: 46px; height: 46px; border: 0; border-radius: 50%;
  color: var(--ink-900); background: var(--gold); box-shadow: 0 10px 25px rgba(18, 53, 43, .2);
  cursor: pointer; opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease, background-color .18s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--gold-100); }
.to-top svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ============================================================== the line
   One line accompanies the whole page, and it is drawn rather than placed:
   black tusche, scrubbed by the scroll, with the wet tip visible at the
   front. Material and routing live in js/tusche.js and js/thread.js.
   Gold is not touched: it stays the intro ring, the logo and these stones. */
.thread {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 3; overflow: visible;
}
.thread__stone-fill { fill: rgba(233, 240, 231, .055); stroke: rgba(230, 201, 121, .30); stroke-width: 1; }
.thread__stone-ring { fill: none; stroke: rgba(230, 201, 121, .17); stroke-width: 1; }

/* the travelling ink, one viewport-sized canvas over his surfaces */
.ink {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 4;
}

/* the one poster gesture: the ink goes BEHIND his headline, so it needs its
   own canvas inside that section, under the type but over the ground */
.ink-poster > .container { position: relative; z-index: 1; }
.ink-back { position: absolute; left: 0; width: 100%; pointer-events: none; z-index: 0; }

/* the knocked-out copy of the headline. The inked half and the paper half
   are cut against each other, so every glyph is painted exactly once and the
   type is never dark on dark while the gesture is still arriving. */
.ink-src { position: relative; }
.ink-knock {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  clip-path: inset(0 100% 0 0);
}
.ink-knock .eyebrow { color: var(--gold-100); }
.ink-knock .section-title { color: #F7FAF6; }

/* the line is measured against the settled layout, not against a section
   that is still sliding in */
.ink-measure [data-reveal] { transform: none !important; transition: none !important; }

/* ================================================================= intro */
.intro {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: #0A2821;
}
.intro[hidden] { display: none; }
.intro__stage { width: min(66vmin, 460px); aspect-ratio: 530 / 513; }
.intro__stage svg { width: 100%; height: 100%; display: block; overflow: visible; }
.intro__skip {
  position: absolute; right: 22px; bottom: 20px; min-height: 44px; padding: 10px 16px;
  border: 1px solid rgba(230, 201, 121, .4); border-radius: 999px;
  background: transparent; color: #D9E5DA; font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; cursor: pointer; opacity: .8;
  transition: opacity .2s ease, border-color .2s ease;
}
.intro__skip:hover { opacity: 1; border-color: var(--gold-100); color: var(--gold-100); }
.intro.is-leaving { transition: opacity .7s ease; opacity: 0; }
body.intro-open { overflow: hidden; }

/* ------------------------------------------------------------- reveals  */
[data-reveal] { opacity: 0; transform: translateY(18px); }
[data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
}

/* ============================================================ responsive */
@media (max-width: 1180px) {
  .site-nav { gap: 15px; }
  .site-nav a { font-size: .83rem; }
  .hero__inner { gap: 44px; }
  .calligraphy__grid, .practice-grid, .zpp-top, .about, .difference-grid { gap: 42px; }
}

/* His header carried nine nav items plus a CTA. Below ~1080px they crowded
   into each other long before his 900px hamburger breakpoint, so the menu
   now collapses earlier. Nothing about the design changes, it just stops
   colliding. */
@media (max-width: 1080px) {
  .header-cta { display: none; }
  .menu-toggle { display: grid; place-items: center; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 10px 24px 20px; background: #0D2F26;
    border-bottom: 1px solid rgba(230, 237, 227, .14);
    box-shadow: 0 16px 30px rgba(7, 28, 22, .28);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { font-size: .93rem; padding: 4px 0; }
  .site-nav a::after { display: none; }
  .site-nav .nav-cta { display: block; margin-top: 12px; }
  .site-nav .nav-cta .btn { width: 100%; }
}

@media (max-width: 960px) {
  :root { --header-h: 73px; }
  .hero__inner { min-height: 0; grid-template-columns: 1fr; padding: 66px 0 60px; }
  .hero__image { opacity: .5; }
  .hero::before {
    background: linear-gradient(180deg, rgba(9, 34, 27, .98) 0%, rgba(9, 34, 27, .92) 70%, rgba(9, 34, 27, .86) 100%);
  }
  .hero-aside { justify-self: start; max-width: 560px; }
  .calligraphy__grid, .practice-grid, .zpp-top, .about, .difference-grid,
  .navigator-grid, .faq-grid, .month-grid { grid-template-columns: 1fr; gap: 40px; }
  .difference-intro, .navigator-intro { position: static; }
  .audience-grid, .magazine-grid, .testimonial-grid, .course-grid, .start-grid { grid-template-columns: 1fr 1fr; }
  .journey-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 0; }
  .journey-grid::before { display: none; }
  .journey-step { padding-right: 18px; }
  .journey-step:not(:first-child) { padding-left: 0; }
  .journey-step:nth-child(even) { padding-left: 18px; }
  .visual-card { min-height: 390px; }
  .month-timeline { grid-template-columns: 1fr 1fr; gap: 18px 14px; }
  .footer__grid { grid-template-columns: 1.35fr 1fr 1fr; }
  .footer__grid > :last-child { grid-column: span 3; }

  /* the weave collapses to a single lane with the stones on the left */
  .weave-step { grid-template-columns: 96px minmax(0, 1fr); min-height: 176px; column-gap: 18px; }
  .weave-step__slot { grid-column: 1; grid-row: 1; width: 96px; }
  .weave-step:nth-child(odd) .weave-step__body,
  .weave-step:nth-child(even) .weave-step__body {
    grid-column: 2; grid-row: 1; text-align: left; justify-self: start;
  }
}

@media (max-width: 640px) {
  .container { width: min(100% - 32px, var(--container)); }
  .utility__inner { min-height: 33px; justify-content: center; }
  .utility__inner span:last-child { display: none; }
  .hero__inner { padding: 52px 0 48px; gap: 38px; }
  .hero h1 { font-size: 3.05rem; }
  .hero__lead, .hero__meta { font-size: 1rem; }
  .hero-aside__top { padding: 20px 20px 18px; }
  .hero-aside__list li { padding: 13px 20px; }
  .section { padding: 70px 0; }
  .section-head, .journey__head { display: block; margin-bottom: 28px; }
  .section-head .section-lead, .journey__head .section-lead { max-width: 700px; }
  .section-title { font-size: 2.6rem; }
  .calligraphy__title { font-size: 2.85rem; }
  .principles, .course-grid, .format-grid, .about-points, .audience-grid,
  .magazine-grid, .testimonial-grid, .start-grid, .journey-grid { grid-template-columns: 1fr; }
  .journey-grid { gap: 22px; }
  .journey-step, .journey-step:not(:first-child), .journey-step:nth-child(even) { padding: 0; }
  .journey-step__dot { margin-bottom: 13px; }
  .principle, .course-card, .audience-card, .article-card, .start-card, .voice-slot { min-height: 0; }
  .course-card, .audience-card, .article-card, .start-card, .voice-slot { padding: 24px; }
  .visual-card { min-height: 325px; }
  .month-timeline { grid-template-columns: 1fr; gap: 16px; }
  .route { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 19px; }
  .route__link { grid-column: 2; }
  .zpp-card, .system-panel, .quote-card, .month-aside { padding: 27px 24px; }
  .faq-note { padding: 22px; }
  .weave-step { grid-template-columns: 72px minmax(0, 1fr); min-height: 158px; column-gap: 14px; }
  .weave-step__slot { width: 72px; }
  .cta { padding: 70px 0; }
  .cta__box { display: block; padding: 35px 26px; }
  .cta .btn { margin-top: 24px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .footer__grid > :first-child, .footer__grid > :last-child { grid-column: span 2; }
  .footer__bottom { flex-direction: column; }
  .to-top { right: 14px; bottom: 14px; }
}

@media (max-width: 400px) {
  .hero h1 { font-size: 2.72rem; }
  .section-title { font-size: 2.3rem; }
  .calligraphy__title { font-size: 2.5rem; }
  .hero__actions { display: grid; }
  .hero__actions .btn { width: 100%; }
  .cta__box { padding: 30px 22px; }
}

/* -------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .btn:hover, .course-card:hover, .audience-card:hover, .route:hover, .article-card:hover { transform: none; }
  /* the line is composed, not drawn: the poster gesture and its knockout are
     simply there, in their finished state */
  .ink-knock { clip-path: none; }
}