/* ==========================================================================
   VEBT · Entwurf
   Aufbau: 1 Schriften · 2 Tokens · 3 Grundlagen · 4 Bausteine · 5 Abschnitte · 6 Bewegung
   Farben und Maße sind in DESIGN.md begründet.
   ========================================================================== */

/* 1 Schriften ------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* 2 Tokens ---------------------------------------------------------------- */
:root {
  --c-rope: #78c0a8;      /* Mint aus dem Logo */
  --c-knot: #a81860;      /* Magenta aus dem „e“ */
  --c-knot-dark: #8a1350;
  --c-ink: #10241d;
  --c-ink-soft: #3d5249;
  --c-paper: #ffffff;
  --c-fog: #eaf4f0;
  --c-line: #c9e2d9;

  --f-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 40px;
  --s-6: 64px;
  --s-7: 104px;
  --s-8: 160px;

  --gutter: clamp(20px, 5vw, 72px);
  --max: 1280px;
  --measure: 36rem;
  --rope-width: 4px;
  --header-h: 72px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-3));
}

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  margin: 0;
  font-family: var(--f-display);
  font-stretch: 112%;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); }
h3 { font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.01em; }

p { margin: 0 0 var(--s-3); max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--c-knot); text-underline-offset: 0.18em; }
a:hover { color: var(--c-knot-dark); }

:focus-visible {
  outline: 3px solid var(--c-knot);
  outline-offset: 3px;
}

figure { margin: 0; }

.container {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: var(--s-3);
  top: -100px;
  z-index: 100;
  padding: var(--s-2) var(--s-3);
  background: var(--c-ink);
  color: var(--c-paper);
}
.skip-link:focus { top: var(--s-3); }

/* 4 Bausteine ------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: 2px;
  font: 700 1rem/1.2 var(--f-text);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.button:active { transform: translateY(1px); }

.button--primary { background: var(--c-knot); color: var(--c-paper); }
.button--primary:hover { background: var(--c-knot-dark); color: var(--c-paper); }

.button--ghost { border-color: var(--c-ink); color: var(--c-ink); background: transparent; }
.button--ghost:hover { background: var(--c-ink); color: var(--c-paper); }

.button--light { background: var(--c-rope); color: var(--c-ink); }
.button--light:hover { background: var(--c-paper); color: var(--c-ink); }

.text-link {
  color: var(--c-ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--c-rope);
  text-decoration-thickness: var(--rope-width);
}
.text-link:hover { color: var(--c-knot); }

.plain-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.plain-list li {
  padding: 10px 0;
  border-top: 1px solid var(--c-line);
}
.plain-list li:last-child { border-bottom: 1px solid var(--c-line); }
.plain-list--muted li { color: var(--c-ink-soft); }

.draft-band {
  margin: 0;
  max-width: none;
  padding: 6px var(--gutter);
  background: var(--c-ink);
  color: #cfe6dd;
  font-size: 0.8125rem;
  text-align: center;
}

/* Das Leitseil: Grundform für alle Seil-Grafiken */
.rope path,
.knot path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 5 Abschnitte ------------------------------------------------------------ */

/* Kopfzeile */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.site-header.is-scrolled { border-bottom-color: var(--c-line); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  max-width: calc(var(--max) + 2 * var(--gutter));
  height: var(--header-h);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-header__logo img { width: 56px; height: auto; }

.site-nav { display: flex; align-items: center; gap: var(--s-4); }
.site-nav__list {
  display: flex;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav__list a {
  color: var(--c-ink);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}
.site-nav__list a:hover { color: var(--c-knot); }

.menu-toggle { display: none; }

@media (max-width: 1080px) {
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--c-ink);
    font: 700 0.9375rem var(--f-text);
    cursor: pointer;
  }
  .menu-toggle__bars,
  .menu-toggle__bars::before {
    display: block;
    width: 24px;
    height: 3px;
    border-radius: 2px;
    background: var(--c-ink);
    transition: transform 0.25s var(--ease-out);
  }
  .menu-toggle__bars { position: relative; transform: translateY(-4px); }
  .menu-toggle__bars::before { content: ""; position: absolute; top: 8px; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars { transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(-8px) rotate(-90deg); }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-4);
    padding: var(--s-4) var(--gutter) var(--s-5);
    background: var(--c-paper);
    border-bottom: 1px solid var(--c-line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s, transform 0.25s var(--ease-out), visibility 0.2s;
  }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .site-nav__list { flex-direction: column; gap: 0; }
  .site-nav__list a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--c-line);
    font-family: var(--f-display);
    font-stretch: 112%;
    font-size: 1.375rem;
    font-weight: 700;
  }
}

/* Kopf */
.hero { padding-block: var(--s-5) var(--s-6); overflow: hidden; }

.hero__title {
  max-width: 15ch;
  font-size: clamp(2.6rem, 7.4vw, 6.25rem);
  line-height: 0.98;
}

.rope--hero {
  width: calc(100% + 2 * var(--gutter));
  height: clamp(56px, 8vw, 110px);
  margin: var(--s-3) calc(-1 * var(--gutter)) var(--s-4);
  overflow: visible;
}
.rope--hero .rope__line { stroke: var(--c-rope); stroke-width: 5; vector-effect: non-scaling-stroke; }
.rope--hero .rope__knot { stroke: var(--c-knot); stroke-width: 5; vector-effect: non-scaling-stroke; }

.hero__grid {
  display: grid;
  gap: var(--s-5);
}

.hero__lead { font-size: 1.1875rem; line-height: 1.55; }

.facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: var(--s-4) 0;
  border-top: 1px solid var(--c-line);
}
.facts__item { padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--c-line); }
.facts dt { font-size: 0.8125rem; font-weight: 600; color: var(--c-ink-soft); }
.facts dd {
  margin: 2px 0 0;
  font-family: var(--f-display);
  font-stretch: 108%;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.25;
}

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }

.hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 960px) {
  .hero { padding-top: var(--s-6); }
  .hero__grid { grid-template-columns: 5fr 7fr; gap: var(--s-6); align-items: start; }
  .hero__media { margin-right: calc(-1 * var(--gutter)); margin-top: calc(-1 * var(--s-6)); }
  .hero__media img { aspect-ratio: 3 / 2; }
}

/* Ansatz */
.approach { padding-block: var(--s-7); background: var(--c-fog); }
.approach__intro { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); }

.approach__layout { display: grid; gap: var(--s-5); }

.steps {
  display: grid;
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps__item { max-width: 30rem; }
.steps__no {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--f-display);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 3.25rem;
  line-height: 1;
  color: var(--c-rope);
}
.steps__item h3 { margin-bottom: var(--s-2); font-size: 1.6rem; }

.approach__img { width: 100%; object-fit: cover; }
.approach__img--wide { aspect-ratio: 4 / 3; }
.approach__img--small { aspect-ratio: 16 / 10; }

@media (min-width: 960px) {
  .approach__intro { grid-template-columns: 5fr 7fr; align-items: end; }
  /* Treppe: Schritte und Fotos teilen sich ein 12er-Raster,
     jeder Schritt rückt weiter nach rechts, wie der Weg vom Erleben zum Transfer */
  .approach__layout { grid-template-columns: repeat(12, 1fr); column-gap: var(--s-4); row-gap: var(--s-5); }
  .steps { display: contents; }
  .steps__item--1 { grid-column: 1 / span 5; grid-row: 1; }
  .steps__item--2 { grid-column: 3 / span 5; grid-row: 2; }
  .steps__item--3 { grid-column: 8 / span 5; grid-row: 3; align-self: end; }
  .approach__img--small { grid-column: 8 / span 5; grid-row: 1 / span 2; align-self: start; }
  .approach__img--wide { grid-column: 1 / span 6; grid-row: 3; aspect-ratio: 3 / 2; }
}

/* Leitsatz */
.statement { padding-block: var(--s-7); background: var(--c-ink); color: #e3efe9; }
.statement__inner { display: grid; gap: var(--s-4); }
.statement__quote {
  max-width: 18ch;
  margin: 0;
  font-family: var(--f-display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--c-rope);
}
@media (min-width: 960px) {
  .statement__inner { grid-template-columns: 7fr 5fr; align-items: end; gap: var(--s-6); }
}

/* Module am Leitseil */
.modules { padding-block: var(--s-7); }
.modules__grid { display: grid; gap: var(--s-6); }
.modules__head p { margin-top: var(--s-4); }
.modules__aside { display: grid; gap: var(--s-5); }
.modules__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.rope-agenda {
  --progress: 0px;
  position: relative;
  margin: 0;
  padding: 0 0 0 56px;
  list-style: none;
}
/* Leeres Seil (hell) und gespanntes Seil (Mint), Länge kommt aus main.js */
.rope-agenda::before,
.rope-agenda::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 6px;
  width: var(--rope-width);
  border-radius: var(--rope-width);
}
.rope-agenda::before { bottom: 6px; background: var(--c-line); }
.rope-agenda::after { height: var(--progress); background: var(--c-rope); transition: height 0.15s linear; }

.rope-agenda__item { position: relative; padding-bottom: var(--s-6); }
.rope-agenda__item:last-child { padding-bottom: 0; }

.knot {
  position: absolute;
  left: -56px;
  top: -2px;
  z-index: 1;
  width: 32px;
  height: 40px;
  background: var(--c-paper);
}
.knot path {
  stroke: #9cc4b6;
  stroke-width: var(--rope-width);
  transition: stroke 0.3s var(--ease-out);
}
.rope-agenda__item.is-reached .knot path { stroke: var(--c-knot); }

.rope-agenda__date {
  margin-bottom: var(--s-2);
  font-family: var(--f-display);
  font-stretch: 108%;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--c-knot);
}
.rope-agenda__tag {
  margin-left: var(--s-2);
  font-family: var(--f-text);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-ink-soft);
}
.rope-agenda__item h3 { margin-bottom: var(--s-3); font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.rope-agenda__item h3 span {
  display: block;
  margin-bottom: 4px;
  font-family: var(--f-text);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--c-ink-soft);
}
.rope-agenda__result { color: var(--c-ink-soft); }
.rope-agenda__result strong { color: var(--c-ink); }

@media (min-width: 960px) {
  .modules__grid { grid-template-columns: 4fr 8fr; column-gap: var(--s-7); align-items: start; }
  .modules__aside { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  .rope-agenda { padding-left: 72px; }
  .knot { left: -72px; }
}

/* Passt es? */
.fit { padding-block: var(--s-7); background: var(--c-fog); }
.fit h2 { margin-bottom: var(--s-6); }
.fit__grid { display: grid; gap: var(--s-6); }
.fit__col h3 { margin-bottom: var(--s-4); }
.fit__note { margin-top: var(--s-4); font-size: 0.9375rem; color: var(--c-ink-soft); }
@media (min-width: 960px) { .fit__grid { grid-template-columns: 1fr 1fr; gap: var(--s-7); } }

/* Termine */
.dates { padding-block: var(--s-7); }
.dates__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
@media (min-width: 960px) { .dates__head { grid-template-columns: 5fr 7fr; align-items: end; } }

.course-list { margin: 0 0 var(--s-6); padding: 0; list-style: none; border-top: 2px solid var(--c-ink); }
.course {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-line);
}
.course p { margin: 0; }
.course__name {
  grid-column: 1 / -1;
  font-family: var(--f-display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: 1.5rem;
}
.course__meta span { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--c-ink-soft); }
.course__status {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 600;
}
.course__status::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 3px solid var(--c-line);
}
.course[data-status="open"] .course__status::before { border-color: var(--c-rope); background: var(--c-rope); }
.course[data-status="pending"] { color: var(--c-ink-soft); }
.course__action { grid-column: 1 / -1; justify-self: start; }

@media (min-width: 960px) {
  .course { grid-template-columns: 2fr 1fr 1fr 1fr 2fr auto; align-items: center; min-height: 96px; }
  .course__name,
  .course__status,
  .course__action { grid-column: auto; }
}

.infosession { display: grid; gap: var(--s-4); }
.infosession__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.infosession__text h3 { margin-bottom: var(--s-3); font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.infosession__text .button { margin-top: var(--s-4); }
@media (min-width: 960px) { .infosession { grid-template-columns: 6fr 5fr; gap: var(--s-6); align-items: center; } }

/* Förderung */
.funding { padding-block: var(--s-7); background: var(--c-fog); }
.funding h2 { margin-bottom: var(--s-6); }
.funding__grid { display: grid; gap: var(--s-6); margin-bottom: var(--s-7); }
.funding__text h3 { margin-bottom: var(--s-3); }
.funding__text .plain-list { margin-top: var(--s-3); }

.calc { border-top: 2px solid var(--c-ink); }
.calc__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  max-width: none;
  margin: 0;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-line);
}
.calc__label { font-weight: 600; }
.calc__value {
  font-family: var(--f-display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.calc__row--minus .calc__value { color: var(--c-ink-soft); }
.calc__row--total { border-bottom: 2px solid var(--c-ink); }
.calc__row--total .calc__value { color: var(--c-knot); font-size: clamp(2.6rem, 7vw, 5rem); }
.calc__note { margin-top: var(--s-3); font-size: 0.9375rem; color: var(--c-ink-soft); }

.funding__steps-title { margin-bottom: var(--s-4); }
.funding-steps {
  display: grid;
  gap: 0;
  margin: 0 0 var(--s-5);
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.funding-steps li {
  counter-increment: step;
  position: relative;
  padding: var(--s-3) 0 var(--s-3) 44px;
  border-top: 1px solid var(--c-line);
}
.funding-steps strong { display: block; }
.funding-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: var(--s-3);
  font-family: var(--f-display);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--c-knot);
}
.funding__warning {
  max-width: 44rem;
  padding-left: var(--s-3);
  border-left: var(--rope-width) solid var(--c-knot);
  font-weight: 600;
}

@media (min-width: 960px) {
  .funding__grid { grid-template-columns: 7fr 5fr; gap: var(--s-7); align-items: start; }
  .funding-steps { grid-template-columns: repeat(3, 1fr); column-gap: var(--s-5); }
}

/* Unternehmen */
.business { padding-block: var(--s-7); background: var(--c-ink); color: #e3efe9; }
.business__grid { display: grid; gap: var(--s-6); }
.business__intro h2 { margin-bottom: var(--s-4); color: var(--c-paper); }
.business__intro .button { margin-top: var(--s-4); }
.options { margin: 0; }
.options__item { padding: var(--s-4) 0; border-top: 1px solid #2f4a40; }
.options__item:last-child { border-bottom: 1px solid #2f4a40; }
.options dt {
  margin-bottom: var(--s-2);
  font-family: var(--f-display);
  font-stretch: 108%;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--c-rope);
}
.options dd { margin: 0; max-width: var(--measure); }
@media (min-width: 960px) { .business__grid { grid-template-columns: 5fr 7fr; gap: var(--s-7); } }

/* Team */
.team { padding-block: var(--s-7); }
.team__intro { display: grid; gap: var(--s-5); margin-bottom: var(--s-6); }
.team__intro h2 { margin-bottom: var(--s-4); }
.team__duo { width: min(100%, 300px); aspect-ratio: 3 / 4; object-fit: cover; }
@media (min-width: 960px) {
  .team__intro { grid-template-columns: 7fr 4fr; gap: var(--s-7); align-items: center; }
  .team__duo { justify-self: end; }
}

.team__people { display: grid; gap: var(--s-6); margin-bottom: var(--s-7); }
.person__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; margin-bottom: var(--s-4); }
.person h3 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
.person__role { margin: 4px 0 var(--s-3); font-weight: 700; color: var(--c-knot); }
.person--oliver .person__role { color: #2e7a62; }
.person__quals {
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  color: var(--c-ink-soft);
}
.person__quals li { padding: 8px 0; border-top: 1px solid var(--c-line); }
@media (min-width: 960px) {
  .team__people { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .person--oliver { margin-top: var(--s-7); }
}

.team__quote { max-width: 52rem; margin: 0; }
.team__quote p {
  max-width: none;
  font-family: var(--f-display);
  font-stretch: 100%;
  font-weight: 600;
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  line-height: 1.3;
}
.team__quote footer { margin-top: var(--s-3); font-weight: 700; color: var(--c-ink-soft); }

/* Fragen */
.faq { padding-block: var(--s-7); background: var(--c-fog); }
.faq__grid { display: grid; gap: var(--s-5); }
.faq__list { border-top: 2px solid var(--c-ink); }
.faq details { border-bottom: 1px solid var(--c-line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 20px 0;
  font-weight: 700;
  font-size: 1.125rem;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-knot);
  transition: transform 0.25s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 20px; color: var(--c-ink-soft); }
@media (min-width: 960px) { .faq__grid { grid-template-columns: 4fr 8fr; gap: var(--s-7); } }

/* Kontakt */
.contact { padding-block: var(--s-7); }
.contact__grid { display: grid; gap: var(--s-6); }
.contact__info h2 { margin-bottom: var(--s-4); }
.contact__channels { margin: var(--s-4) 0; padding: 0; list-style: none; }
.contact__channels a {
  display: inline-block;
  padding: 6px 0;
  font-family: var(--f-display);
  font-stretch: 108%;
  font-weight: 700;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  color: var(--c-ink);
  text-decoration-color: var(--c-rope);
  text-decoration-thickness: var(--rope-width);
}
.contact__channels a:hover { color: var(--c-knot); }
.contact__meta { color: var(--c-ink-soft); }
@media (min-width: 960px) { .contact__grid { grid-template-columns: 5fr 7fr; gap: var(--s-7); } }

.form { display: grid; gap: var(--s-4); padding: var(--s-5) var(--s-4); background: var(--c-fog); }
.form__row { display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } .form { padding: var(--s-5); } }

.field { display: grid; gap: 6px; }
.field span { font-size: 0.875rem; font-weight: 600; }
.field input,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #9cc4b6;
  border-radius: 2px;
  background: var(--c-paper);
  color: var(--c-ink);
  font: inherit;
}
.field input:focus,
.field textarea:focus { outline: 3px solid var(--c-rope); outline-offset: 0; border-color: var(--c-ink); }
.field textarea { resize: vertical; }

.check { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-2); font-size: 0.9375rem; color: var(--c-ink-soft); }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--c-knot); }

.form .button { justify-self: start; }
.form__thanks { padding: var(--s-3); background: var(--c-paper); border-left: var(--rope-width) solid var(--c-rope); font-weight: 600; }

/* Fußzeile */
.site-footer { padding-block: var(--s-5); border-top: 1px solid var(--c-line); font-size: 0.875rem; color: var(--c-ink-soft); }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); }
.site-footer__inner img { width: 48px; }
.site-footer__links { display: flex; gap: var(--s-4); margin: 0 0 0 auto; padding: 0; list-style: none; }
.site-footer__links a { color: var(--c-ink-soft); }

/* 6 Bewegung -------------------------------------------------------------- */
/* Seil im Kopf zeichnet sich einmal beim Laden */
.rope--hero .rope__line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: rope-draw 1.6s var(--ease-out) 0.2s forwards; }
.rope--hero .rope__knot { stroke-dasharray: 1; stroke-dashoffset: 1; animation: rope-draw 0.7s var(--ease-out) 0.9s forwards; }
@keyframes rope-draw { to { stroke-dashoffset: 0; } }

/* Sanftes Einblenden, nur wenn JS läuft */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rope--hero .rope__line,
  .rope--hero .rope__knot { animation: none; stroke-dashoffset: 0; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .rope-agenda::after { transition: none; }
}