/* =========================================================================
   styles.css  --  Struktur und Komponenten.
   Liest ausschliesslich Tokens aus theme.css. Farben und Schriftnamen
   stehen hier bewusst nirgends direkt.
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Der Grund wandert auf html, damit body durchsichtig sein kann und die
   Karte darunter sichtbar wird. */
html { background-color: var(--paper); }

body {
  margin: 0;
  background-color: transparent;
  position: relative;
  /* haelt die beiden Kartenebenen mit negativem z-index im Element,
     ohne dass die Kinder eine z-index-Angabe brauchen */
  isolation: isolate;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-0);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Browser geben figure standardmaessig 40px Seitenrand. Das staucht die
   Bildstrecke, deshalb hier zuruecksetzen. */
figure, blockquote { margin: 0; }

a { color: var(--green-700); }

::selection { background: var(--green-100); color: var(--green-900); }

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

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}


/* -------------------------------------------------------------------------
   1b  Gruen-Karte im Hintergrund

   Zwei Ebenen auf EINEM Element, damit die Zeichnung ueber alle Abschnitte
   durchlaeuft. Die deckenden Baender (.section--band, .section--tint) legen
   sich darueber und blenden sie dort von selbst aus. Sichtbar ist die Karte
   also genau dort, wo der Hintergrund weiss ist.
   ------------------------------------------------------------------------- */
body::before,
body::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--pattern-line);
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
}

/* Ebene 1: flaechig, auf der Staerke, die auch unter Text zulaessig ist. */
body::before {
  -webkit-mask-image: var(--kontur);
          mask-image: var(--kontur);
  -webkit-mask-size: var(--kontur-size);
          mask-size: var(--kontur-size);
}

/* Ebene 2: nur in den Aussenraendern, wo nie Text steht. Verdoppelt die
   Zeichnung dort, ohne die Lesespalte zu beruehren. */
body::after {
  -webkit-mask-image: var(--kontur), linear-gradient(to right,
    #000 0 11%, transparent 29%, transparent 71%, #000 89% 100%);
          mask-image: var(--kontur), linear-gradient(to right,
    #000 0 11%, transparent 29%, transparent 71%, #000 89% 100%);
  -webkit-mask-size: var(--kontur-size), 100% 100%;
          mask-size: var(--kontur-size), 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
          mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* Im Fussbereich dieselbe Kachel, nur hell auf dunkel. */
.footer { position: relative; isolation: isolate; }
.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--pattern-line-dark);
  -webkit-mask-image: var(--kontur);
          mask-image: var(--kontur);
  -webkit-mask-size: var(--kontur-size);
          mask-size: var(--kontur-size);
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
}

/* Auf schmalen Displays zerfaellt die grosse Kachel in einzelne Boegen und
   liest sich nicht mehr als Karte. Deshalb kleiner. */
@media (max-width: 640px) {
  body::before,
  body::after,
  .footer::before {
    -webkit-mask-size: 560px 473px;
            mask-size: 560px 473px;
  }
  body::after {
    -webkit-mask-size: 560px 473px, 100% 100%;
            mask-size: 560px 473px, 100% 100%;
  }
}

/* -------------------------------------------------------------------------
   2  Hilfsklassen
   ------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.measure { max-width: var(--measure); }

.section {
  padding-block: var(--section);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.section--band {
  background-color: var(--paper-2);
  border-block: 1px solid var(--line);
}
.section--tint {
  background-color: var(--green-50);
  border-block: 1px solid var(--green-100);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  font-size: var(--t--2);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 200;
  background: var(--green-700);
  color: var(--paper);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius);
  font-size: var(--t--1);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s var(--ease);
}
.skip-link:focus { top: 0.75rem; }

/* -------------------------------------------------------------------------
   3  Lesefortschritt
   ------------------------------------------------------------------------- */
.progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  z-index: 120;
  background: transparent;
  pointer-events: none;
}
.progress__bar {
  height: 100%;
  width: 100%;
  background: var(--green-700);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* -------------------------------------------------------------------------
   4  Kopfbereich
   ------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(16, 38, 26, 0.02);
}
.header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 3vw, 1.5rem);
}

/* Auf schmalen Schirmen sitzt der Aufruf im Menu, nicht in der Kopfzeile.
   Sonst schiebt er den Inhalt aus dem Bild (Ueberlauf bei 320px).
   Zwei Klassen, weil .btn weiter unten steht und sonst gewinnt. */
.header__tools .header__cta { display: none; }
@media (min-width: 62rem) {
  .header__tools .header__cta { display: inline-flex; }
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--ink);
  margin-inline-end: auto;
  /* WCAG 2.2 Zielgroesse: mindestens 24px hoch antippbar. */
  padding-block: 0.4rem;
}
.brand__name {
  font-family: var(--font-display);
  /* Fluid, damit die Kopfzeile auch bei 320px Breite nicht ueberlaeuft. */
  font-size: clamp(1.05rem, 0.72rem + 1.6vw, 1.32rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}
.brand__sub {
  font-size: var(--t--2);
  font-weight: 600;
  letter-spacing: clamp(0.1em, 0.35vw, 0.22em);
  text-transform: uppercase;
  color: var(--sand-ink);
  line-height: 1;
}
.brand:hover .brand__name { color: var(--green-700); }

.nav { display: none; }
.nav__list {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  position: relative;
  font-size: var(--t--1);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  padding-block: 0.4rem;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0.1rem;
  height: 1px;
  background: var(--green-700);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.22s var(--ease);
}
.nav__link:hover::after,
.nav__link.is-current::after { transform: scaleX(1); }
.nav__link.is-current { color: var(--green-700); }

.header__tools {
  display: flex;
  align-items: center;
  gap: clamp(0.45rem, 2vw, 0.85rem);
  flex: none;
}

.lang {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t--2);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: 0.4rem clamp(0.4rem, 1.5vw, 0.55rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  flex: none;
}
.lang:hover { color: var(--green-700); border-color: var(--line-strong); }

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.6rem; height: 2.6rem;
  padding: 0 0.55rem;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.burger span {
  display: block;
  height: 1px;
  background: var(--ink);
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobiles Menu */
.menu {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.menu.is-open { display: block; }
.menu__list {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0 1.5rem;
}
.menu__list li + li { border-top: 1px solid var(--line); }
.menu__link {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.95rem 0;
  font-family: var(--font-display);
  font-size: var(--t-1);
  color: var(--ink);
  text-decoration: none;
}
.menu__num {
  font-size: var(--t--2);
  font-family: var(--font-text);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--sand-ink);
}
.menu__cta { margin-top: 1.25rem; }

@media (min-width: 62rem) {
  .nav { display: block; }
  .burger { display: none; }
  .menu { display: none !important; }
}

/* -------------------------------------------------------------------------
   5  Buttons und Textlinks
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.82rem 1.5rem;
  border: 1px solid var(--green-700);
  border-radius: var(--radius);
  background: var(--green-700);
  color: var(--paper);
  font-family: var(--font-text);
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.btn:hover { background: var(--green-800); border-color: var(--green-800); }
.btn .icon { width: 1rem; height: 1rem; }

.btn--ghost {
  background: transparent;
  color: var(--green-700);
  border-color: var(--line-strong);
}
.btn--ghost:hover {
  background: var(--green-50);
  color: var(--green-800);
  border-color: var(--green-400);
}

.btn--sm { padding: 0.55rem 1rem; font-size: var(--t--2); }
.btn--wide { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--t--1);
  font-weight: 600;
  color: var(--green-700);
  text-decoration: none;
  border-bottom: 1px solid var(--green-100);
  padding-bottom: 2px;
}
.link-arrow:hover { border-bottom-color: var(--green-700); }
.link-arrow .icon { width: 0.95rem; height: 0.95rem; transition: transform 0.18s var(--ease); }
.link-arrow:hover .icon { transform: translateX(3px); }

.icon { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* -------------------------------------------------------------------------
   6  Hero
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem);
  scroll-margin-top: var(--header-h);
}

.hero > .wrap { position: relative; z-index: 1; }
.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .hero__grid { grid-template-columns: 1.15fr 0.85fr; }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}
.hero__eyebrow::before {
  content: '';
  width: 2.5rem;
  height: 1px;
  background: var(--sand);
}

.hero__title {
  /* Etwas kleiner als --t-4, damit "Es gibt nicht den einen" auf eine Zeile
     passt und der Umbruch dem Satzbau folgt statt der Spaltenbreite. */
  font-size: clamp(2.35rem, 1.35rem + 3.3vw, 3.85rem);
  line-height: 1.06;
  margin-bottom: 1.5rem;
  text-wrap: pretty;
}
.hero__title em {
  font-style: italic;
  font-weight: 400;
}
.hero__title .hero__accent {
  display: block;
  color: var(--green-700);
}

.hero__lead {
  font-size: var(--t-1);
  line-height: 1.6;
  color: var(--muted);
  max-width: 34rem;
  margin-bottom: 2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.4rem;
}

/* Bild mit versetztem Haarlinien-Rahmen. Der Rahmen ist das Detail.
   Erst ab der zweispaltigen Ansicht, darunter waere er nur Unruhe. */
.hero__media { position: relative; }
@media (min-width: 60rem) {
  .hero__media::before {
    content: '';
    position: absolute;
    inset: 1.1rem -1.1rem -1.1rem 1.1rem;
    border: 1px solid var(--sand);
    pointer-events: none;
  }
}
.hero__img {
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  background: var(--paper-2);
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.facts__item {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 1.35rem 0 0.2rem;
  font-size: var(--t-0);
  color: var(--ink);
}
.facts__mark {
  flex: none;
  width: 0.7rem;
  height: 1px;
  background: var(--green-400);
  transform: translateY(-0.35em);
}
@media (min-width: 46rem) {
  .facts__item + .facts__item {
    padding-inline-start: 1.75rem;
    border-inline-start: 1px solid var(--line);
  }
}
@media (max-width: 45.99rem) {
  .facts__item + .facts__item { border-top: 1px solid var(--line); }
}

/* -------------------------------------------------------------------------
   7  Kapitelkopf
   ------------------------------------------------------------------------- */
.chapter { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

.chapter__meta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.4rem;
}
.chapter__num {
  font-family: var(--font-display);
  font-size: var(--t-1);
  font-weight: 500;
  color: var(--sand-ink);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.chapter__rule {
  flex: 0 0 3.5rem;
  height: 1px;
  background: var(--sand);
}
.chapter__kicker {
  font-size: var(--t--2);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.chapter__title {
  font-size: var(--t-3);
  max-width: 22ch;
  margin-bottom: 1.1rem;
}
.chapter__intro {
  font-size: var(--t-1);
  line-height: 1.6;
  color: var(--muted);
  max-width: var(--measure);
}

/* -------------------------------------------------------------------------
   8  Haltung: Prinzipien und Zitat
   ------------------------------------------------------------------------- */
.principles {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 54rem) {
  .principles { grid-template-columns: repeat(3, 1fr); }
}
.principle {
  padding: 2rem 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 54rem) {
  .principle { padding: 2.2rem 2rem 2.4rem 0; border-bottom: 0; }
  .principle + .principle { padding-inline-start: 2.5rem; border-inline-start: 1px solid var(--line); }
}
.principle__title {
  font-size: var(--t-1);
  margin-bottom: 0.7rem;
}
.principle__text {
  color: var(--muted);
  font-size: var(--t-0);
}

.pullquote {
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  max-width: 46rem;
  text-align: center;
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line);
}
.pullquote__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-2);
  line-height: 1.4;
  color: var(--green-800);
  margin: 0 0 1.2rem;
  text-wrap: pretty;
}
.pullquote__cite {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--t--2);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-style: normal;
}
.pullquote__cite::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: var(--sand);
}

/* -------------------------------------------------------------------------
   9  Coaching
   ------------------------------------------------------------------------- */
.cards {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 44rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 76rem) { .cards { grid-template-columns: repeat(4, 1fr); } }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  padding: clamp(1.6rem, 3vw, 2rem);
  transition: background-color 0.2s var(--ease);
}
.card:hover { background: var(--green-50); }

.card__title {
  font-size: var(--t-1);
  margin-bottom: 0.5rem;
  padding-inline-end: 4.5rem;
}
.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: var(--t--1);
  color: var(--muted);
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.card__price {
  font-family: var(--font-display);
  font-size: var(--t-1);
  color: var(--green-700);
  line-height: 1;
}
.card__sep { color: var(--line-strong); }
.card__text {
  font-size: var(--t--1);
  color: var(--muted);
  margin-bottom: 1.2rem;
}
.card__features {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
  font-size: var(--t--1);
}
.card__features li {
  position: relative;
  padding-inline-start: 1.15rem;
  padding-block: 0.28rem;
}
.card__features li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.85em;
  width: 0.45rem;
  height: 1px;
  background: var(--green-400);
}

.note {
  margin-top: 1.75rem;
  font-size: var(--t--1);
  color: var(--muted);
}
.section__actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* Entwurfs-Markierung, nur solange SHOW_DRAFTS=1 */
.draft-badge {
  position: absolute;
  top: 0.9rem;
  inset-inline-end: 0.9rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand-ink);
  background: var(--paper);
  border: 1px dashed var(--sand);
  border-radius: var(--radius);
  padding: 0.2rem 0.45rem;
  line-height: 1.4;
}
.draft-badge--inline {
  position: static;
  display: inline-block;
  margin-inline-start: 0.75rem;
  vertical-align: 0.35em;
}

/* -------------------------------------------------------------------------
   10  Ablauf
   ------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: 0;
  counter-reset: step;
}
@media (min-width: 54rem) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }

.step {
  padding-block: 1.9rem;
  border-top: 1px solid var(--line);
}
.step__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-2);
  color: var(--green-600);
  line-height: 1;
  margin-bottom: 0.9rem;
  letter-spacing: 0.06em;
}
.step__title {
  font-size: var(--t-1);
  margin-bottom: 0.6rem;
}
.step__text { color: var(--muted); font-size: var(--t-0); }

/* -------------------------------------------------------------------------
   11  Ueber mich
   ------------------------------------------------------------------------- */
.about__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 62rem) {
  .about__grid { grid-template-columns: 0.8fr 1.2fr; }
  .about__media { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.about__img {
  width: 100%;
  border-radius: var(--radius);
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.about__text { max-width: var(--measure); }
.about__text p { font-size: var(--t-0); line-height: 1.75; }
.about__text p:first-child {
  font-family: var(--font-display);
  font-size: var(--t-2);
  line-height: 1.3;
  color: var(--green-800);
  margin-bottom: 1.4rem;
}

/* -------------------------------------------------------------------------
   12  Eindruecke
   ------------------------------------------------------------------------- */
.gallery {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
@media (min-width: 52rem) {
  .gallery { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .gallery__item--tall { margin-top: 2.5rem; }
}
.gallery__img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.gallery__caption {
  margin-top: 0.6rem;
  font-size: var(--t--2);
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* -------------------------------------------------------------------------
   13  Fragen
   ------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); max-width: 52rem; }
.faq__item { border-bottom: 1px solid var(--line); }

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--t-1);
  color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--green-700); }

.faq__sign {
  position: relative;
  flex: none;
  width: 0.9rem; height: 0.9rem;
  margin-top: 0.45rem;
}
.faq__sign::before, .faq__sign::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 100%; height: 1px;
  background: var(--green-700);
  transition: transform 0.22s var(--ease);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item[open] .faq__sign::after { transform: rotate(0deg); }

.faq__a {
  padding-bottom: 1.5rem;
  max-width: var(--measure);
  color: var(--muted);
  font-size: var(--t-0);
}

/* -------------------------------------------------------------------------
   14  Kontakt und Formular
   ------------------------------------------------------------------------- */
.contact__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 58rem) { .contact__grid { grid-template-columns: 0.85fr 1.15fr; } }

.contact__info { font-size: var(--t-0); }
.info-row {
  display: flex;
  gap: 0.9rem;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--line);
}
.info-row:first-child { border-top: 1px solid var(--line); }
.info-row .icon { margin-top: 0.28rem; color: var(--green-600); }
.info-row b {
  display: block;
  font-size: var(--t--2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.15rem;
}
.info-row a { color: var(--green-700); text-decoration: none; border-bottom: 1px solid var(--green-100); }
.info-row a:hover { border-bottom-color: var(--green-700); }

.form { display: grid; gap: 1.15rem; }
.form__row { display: grid; gap: 1.15rem; }
@media (min-width: 34rem) { .form__row { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 0.4rem; }
.field label {
  font-size: var(--t--2);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.field label .opt { text-transform: none; letter-spacing: 0; font-weight: 400; }

.field input,
.field textarea {
  width: 100%;
  font-family: var(--font-text);
  font-size: var(--t-0);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.72rem 0.85rem;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.field textarea { min-height: 9.5rem; resize: vertical; line-height: 1.6; }
.field input:hover, .field textarea:hover { border-color: var(--green-400); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--green-700);
  box-shadow: var(--ring);
}
.field__hint { font-size: var(--t--2); color: var(--muted); }

/* Honeypot: fuer Menschen unsichtbar, fuer Bots ein Koeder. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__note { font-size: var(--t--2); color: var(--muted); }
/* Innenabstand vergroessert die antippbare Flaeche, ohne die Zeile zu verschieben. */
.form__note a { color: var(--green-700); padding-block: 0.3rem; }

.alert {
  border: 1px solid var(--sand);
  border-inline-start: 3px solid var(--sand-ink);
  background: var(--paper-2);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
}
.alert__title {
  font-family: var(--font-display);
  font-size: var(--t-1);
  margin-bottom: 0.4rem;
}
.alert ul { margin: 0; padding-inline-start: 1.15rem; font-size: var(--t--1); color: var(--muted); }

/* -------------------------------------------------------------------------
   15  Fussbereich
   ------------------------------------------------------------------------- */
.footer {
  background-color: var(--green-900);
  color: var(--green-100);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.footer a { color: var(--green-100); text-decoration: none; }
.footer a:hover { color: var(--paper); }
.footer :focus-visible { outline-color: var(--green-100); }

.footer__grid {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
@media (min-width: 52rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } }

.footer__brand .brand__name { color: var(--paper); font-size: 1.45rem; }
.footer__brand .brand__sub { color: var(--sand); }
.footer__tagline {
  margin-top: 1rem;
  max-width: 24rem;
  font-family: var(--font-display);
  font-size: var(--t-1);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}

.footer__title {
  font-size: var(--t--2);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 1rem;
}
.footer__list { list-style: none; margin: 0; padding: 0; font-size: var(--t--1); }
/* Die Flaeche gehoert an den Link, nicht an das Listenelement, sonst bleibt
   das antippbare Ziel unter 24px (WCAG 2.2 Zielgroesse). */
.footer__list a { display: inline-block; padding-block: 0.35rem; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  font-size: var(--t--2);
  color: rgba(255, 255, 255, 0.62);
}
.footer__bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.footer__bottom nav a { display: inline-block; padding-block: 0.35rem; }

/* Signatur der Agentur, ganz unten und bewusst leise. */
.credits {
  margin: 0;
  padding-top: 1.75rem;
  text-align: center;
  font-size: var(--t--2);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.62);
}
/* Eine Zeile, zentriert. Auf schmalen Displays bricht sie am Trennpunkt
   um, statt mitten im Satz. */
.credits a {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.15rem 0.55rem;
  padding-block: 0.3rem;
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.credits__sep { color: var(--sand); opacity: 0.7; }
.credits a:hover { color: var(--sand); }
.credits svg {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.13em;
  fill: var(--sand);
  stroke: none;
}

/* -------------------------------------------------------------------------
   16  Einfache Seiten (Impressum, Datenschutz, Danke, 404)
   ------------------------------------------------------------------------- */
.page-head {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}
.page-head__title { font-size: var(--t-3); }

.prose {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 8vw, 6rem);
  max-width: var(--measure);
}
.prose h2 {
  font-size: var(--t-1);
  margin-top: 2.5rem;
  margin-bottom: 0.7rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.prose h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.prose p { color: var(--muted); }
.prose a { color: var(--green-700); }

.notice {
  border: 1px dashed var(--sand);
  background: var(--paper-2);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  font-size: var(--t--1);
  color: var(--sand-ink);
  margin-bottom: 2rem;
}

.page-actions { margin-top: 2.5rem; }

/* -------------------------------------------------------------------------
   17  Bewegung

   Grundsatz: Bewegung fuehrt den Blick, sie unterhaelt nicht. Jedes Element
   bewegt sich genau einmal, beim ersten Erscheinen. Danach ist Ruhe.
   Ohne JavaScript ist alles sofort sichtbar: die Klasse `js` setzt
   /js/boot.js, das im head ohne defer laeuft.
   ------------------------------------------------------------------------- */

/* --- Grundform: leicht von unten einblenden --------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-slow) var(--ease-soft),
    transform var(--dur-slow) var(--ease-soft);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Die Sonderformen bringen ihre eigene Bewegung mit und duerfen nicht
   zusaetzlich verschoben werden. */
.js .reveal--mask,
.js .reveal--media,
.js .reveal--plain { opacity: 1; transform: none; }

/* --- Textzeilen hinter einer Maske hervorschieben ---------------------- */
.mask {
  display: block;
  overflow: hidden;
  /* Platz fuer Unterlaengen, sonst schneidet die Maske das g von "Schwung" ab. */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.mask__in { display: block; }
.js .reveal--mask .mask__in {
  transform: translateY(115%);
  transition: transform 1s var(--ease-soft);
  transition-delay: calc(var(--m, 0) * 110ms);
}
.js .reveal--mask.is-in .mask__in { transform: none; }

/* --- Bilder: Vorhang von unten, dazu ein leichtes Zurueckzoomen -------- */
.media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
}
.js .reveal--media .media {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s var(--ease-soft);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js .reveal--media .media > img {
  transform: scale(1.06);
  transition: transform 1.6s var(--ease-soft);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js .reveal--media.is-in .media { clip-path: inset(0 0 0 0); }
.js .reveal--media.is-in .media > img { transform: none; }

/* Der versetzte Haarlinien-Rahmen kommt nach dem Bild dazu. */
@media (min-width: 60rem) {
  .js .hero__media::before {
    opacity: 0;
    transform: translate(-0.5rem, -0.5rem);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
    transition-delay: 0.55s;
  }
  .js .hero__media.is-in::before { opacity: 1; transform: none; }
}

/* --- Kapitelkopf: Ziffer, Linie und Titel nacheinander ----------------- */
.js .chapter .chapter__num {
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.js .chapter .chapter__rule {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.75s var(--ease-soft) 0.12s;
}
.js .chapter .chapter__kicker {
  opacity: 0;
  transition: opacity var(--dur) var(--ease) 0.3s;
}
.js .chapter.is-in .chapter__num,
.js .chapter.is-in .chapter__kicker { opacity: 1; }
.js .chapter.is-in .chapter__rule { transform: none; }

/* --- Zitat: die Linie darueber zieht sich auf ------------------------- */
.js .pullquote {
  --line-w: 0;
  position: relative;
  border-top-color: transparent;
}
.js .pullquote::before {
  content: '';
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 50%;
  width: 100%;
  height: 1px;
  background: var(--line);
  transform: translateX(-50%) scaleX(0);
  transition: transform 0.9s var(--ease-soft);
}
.js .pullquote.is-in::before { transform: translateX(-50%) scaleX(1); }
.js .pullquote .pullquote__cite::before {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.6s var(--ease-soft) 0.45s;
}
.js .pullquote.is-in .pullquote__cite::before { transform: none; }

/* --- Antworten im Fragenteil ------------------------------------------ */
.faq__item[open] .faq__a {
  animation: faq-in 0.36s var(--ease) both;
}
@keyframes faq-in {
  from { opacity: 0; transform: translateY(-6px); }
}

/* --- Hover: nur dort, wo wirklich etwas passiert ---------------------- */
.card::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 2px;
  background: var(--green-700);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.4s var(--ease-soft);
}
.card:hover::after,
.card:focus-within::after { transform: none; }

.btn .icon { transition: transform var(--dur-fast) var(--ease); }
.btn:hover .icon { transform: translateX(3px); }

/* --- Zeigefreudige Geraete: sonst klebt der Hover-Zustand am Finger --- */
@media (hover: none) {
  .card:hover::after { transform: scaleX(0); }
  .card:hover { background: var(--paper); }
}

/* --- Wer weniger Bewegung will, bekommt keine ------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal--mask .mask__in,
  .js .reveal--media .media,
  .js .reveal--media .media > img,
  .js .hero__media::before,
  .js .chapter .chapter__num,
  .js .chapter .chapter__rule,
  .js .chapter .chapter__kicker,
  .js .pullquote::before,
  .js .pullquote .pullquote__cite::before {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
  .js .pullquote { border-top-color: var(--line); }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------
   18  Bausteine aus dem Kundenfeedback vom 2026-08-10
   ------------------------------------------------------------------------- */

/* --- Zielgruppen-Satz und Kernaussagen -------------------------------- */
.audience {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
  max-width: 44rem;
  font-family: var(--font-display);
  font-size: var(--t-1);
  line-height: 1.5;
  color: var(--green-800);
}

/* Eine einzelne, tragende Aussage. Steht fuer sich, ohne Kasten. */
.statement {
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  max-width: 46rem;
  font-family: var(--font-display);
  font-size: var(--t-2);
  line-height: 1.42;
  color: var(--green-800);
  text-wrap: pretty;
}

/* --- Ausbildungsstand -------------------------------------------------
   Muss unmissverstaendlich lesbar sein: er ist IN Ausbildung, nicht fertig.
   Deshalb eigene Zeile mit Marke, nicht im Fliesstext versteckt. */
.credential {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1.1rem 0 0;
  padding: 0.45rem 0.9rem 0.45rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-inline-start: 2px solid var(--sand);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: var(--t--1);
  letter-spacing: 0.01em;
  color: var(--muted);
}

/* --- Preistabelle klassischer Unterricht ------------------------------ */
.prices {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-0);
}
.prices caption { text-align: start; }
.prices th,
.prices td {
  text-align: start;
  padding: 1rem 0.75rem 1rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: baseline;
  font-weight: 400;
}
.prices thead th {
  padding-block: 0 0.75rem;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-text);
  font-size: var(--t--2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.prices tbody tr:last-child th,
.prices tbody tr:last-child td { border-bottom: 0; }
.prices__right { text-align: end; padding-inline-end: 0; }
.prices__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-1);
  color: var(--ink);
  line-height: 1.25;
}
.prices__meta {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--t--2);
  color: var(--muted);
}
.prices__price {
  font-family: var(--font-display);
  font-size: var(--t-1);
  color: var(--green-700);
  white-space: nowrap;
}

/* Unter 40rem wird aus jeder Zeile ein Block: Bezeichnung oben,
   Dauer und Preis darunter nebeneinander. Eine dreispaltige Tabelle
   waere auf 320px nicht mehr lesbar. */
@media (max-width: 39.99rem) {
  .prices thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .prices tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.2rem 1rem;
    padding-block: 1.1rem;
    border-bottom: 1px solid var(--line);
  }
  .prices tbody tr:last-child { border-bottom: 0; }
  .prices th,
  .prices td { border: 0; padding: 0; }
  .prices tbody th { grid-column: 1 / -1; }
  .prices td { font-size: var(--t--1); color: var(--muted); }
  .prices td[data-label]::before {
    content: attr(data-label) ': ';
    color: var(--muted);
  }
  .prices__price { text-align: end; }
  .prices__price[data-label]::before { content: none; }
}

/* --- Zwei gleichwertige Spalten (Video und Daten, Saisonbegleitung) --- */
.split {
  display: grid;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 52rem) {
  .split { grid-template-columns: repeat(2, 1fr); gap: 3rem; }
}
.split__col { padding-top: 1.4rem; border-top: 1px solid var(--line-strong); }
.split__text { color: var(--muted); font-size: var(--t-0); }

/* --- Prozesskette der Saisonbegleitung -------------------------------
   Sieben Schritte. Auf dem Desktop nebeneinander mit durchgehender Linie,
   auf schmalen Displays untereinander. Die Linie liegt hinter den Ziffern
   und wird von deren Hintergrund unterbrochen. */
.chainbox {
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}
.chain {
  position: relative;
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: chain;
}
.chain__step {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.chain__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid var(--green-400);
  border-radius: 50%;
  background: var(--green-50);
  font-family: var(--font-display);
  font-size: var(--t--1);
  color: var(--green-700);
  line-height: 1;
}
.chain__label { font-size: var(--t-0); color: var(--ink); }

@media (min-width: 62rem) {
  .chain {
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
  }
  /* Die durchgehende Linie sitzt auf Hoehe der Ziffernmitte. */
  .chain::before {
    content: '';
    position: absolute;
    inset-block-start: 0.925rem;
    inset-inline: 7%;
    height: 1px;
    background: var(--green-100);
  }
  .chain__step {
    position: relative;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    text-align: center;
    padding-inline: 0.4rem;
  }
  .chain__label { font-size: var(--t--1); }
}

/* -------------------------------------------------------------------------
   19  Bewegung fuer die neuen Bausteine
   ------------------------------------------------------------------------- */
.js .chainbox .chain__step {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease-soft), transform var(--dur) var(--ease-soft);
}
.js .chainbox.is-in .chain__step { opacity: 1; transform: none; }
.js .chainbox .chain__step:nth-child(1) { transition-delay: 0.05s; }
.js .chainbox .chain__step:nth-child(2) { transition-delay: 0.12s; }
.js .chainbox .chain__step:nth-child(3) { transition-delay: 0.19s; }
.js .chainbox .chain__step:nth-child(4) { transition-delay: 0.26s; }
.js .chainbox .chain__step:nth-child(5) { transition-delay: 0.33s; }
.js .chainbox .chain__step:nth-child(6) { transition-delay: 0.40s; }
.js .chainbox .chain__step:nth-child(7) { transition-delay: 0.47s; }

@media (prefers-reduced-motion: reduce) {
  .js .chainbox .chain__step { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   20  Hinweis zu Cookies (js/cookie-hinweis.js, Ticket 4, 2026-10-10)
   Nur ein Hinweis, keine Wahl: die Site laedt nichts Optionales. Ein Blatt
   Papier unten rechts mit Haarlinie, oben die Sandlinie des Kickers, der
   Knopf wie alle Knoepfe der Site. Erst nach 5,5 s und einer halben
   Bildschirmhoehe Scroll, nie ueber dem Hero-Knopf. Solange es steht, endet
   der Fuss darueber, die Signatur bleibt frei.
   Kontraste: ink/paper 13.9, muted/paper 5.9, green-700/paper 9.6.
   ------------------------------------------------------------------------- */
.cookie {
  position: fixed;
  z-index: 110;
  left: 1rem;
  right: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: grid;
  gap: 0.85rem;
  padding: 1.1rem 1.15rem 1rem 1.25rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift);
  font-family: var(--font-text);
  font-size: var(--t--1);
  line-height: 1.55;
  animation: cookie-blatt var(--dur) var(--ease-soft) both;
}
.cookie[hidden] { display: none; }
.cookie::before {
  content: '';
  width: 2.5rem;
  height: 1px;
  background: var(--sand);
}
.cookie__text { margin: 0; color: var(--muted); }
.cookie__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cookie__row a { text-underline-offset: 0.2em; }
@keyframes cookie-blatt { from { opacity: 0; transform: translateY(0.75rem); } }
@media (min-width: 40rem) {
  .cookie { left: auto; right: var(--gutter); width: 30rem; }
}
.hat-cookie { scroll-padding-bottom: calc(var(--cookie-h, 0px) + 2rem); }
.hat-cookie .footer { padding-block-end: calc(3rem + var(--cookie-h, 0px)); }
@media (prefers-reduced-motion: reduce) {
  .cookie { animation: none; }
}
@media print { .cookie { display: none; } }