/* Schmitter von Steinkeller: finaler Entwurf.
   Hell und ruhig. Das einzige laute Element ist der Film im Hero. */

/* ------------------------------------------------------------ fonts ----- */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;font-display:swap;src:url("assets/fonts/archivo-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;font-display:swap;src:url("assets/fonts/archivo-normal-latin.woff2") format("woff2");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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url("assets/fonts/instrument-sans-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url("assets/fonts/instrument-sans-normal-latin.woff2") format("woff2");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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ----------------------------------------------------------- tokens ----- */
:root {
  --paper:        #FAFBF8;
  --mist:         #EEF2EC;
  --ink:          #122019;
  --ink-soft:     #4C5C54;
  --green:        #0E6B47;
  --green-ink:    #F6FBF8;
  --forest:       #0B2E22;
  --forest-raised:#123A2C;
  --bone:         #F1F5EF;
  --bone-soft:    #A9BDB2;
  --mint:         #6FD3A0;
  --film:         #0B0F14;
  --hair:         color-mix(in oklab, var(--ink) 12%, transparent);
  --hair-strong:  color-mix(in oklab, var(--ink) 22%, transparent);

  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-text:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --t-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --t-base: clamp(1rem, 0.96rem + 0.22vw, 1.1rem);
  --t-lg:   clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  --t-xl:   clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --t-2xl:  clamp(2rem, 1.4rem + 2.4vw, 3.3rem);
  --t-3xl:  clamp(2.3rem, 1.4rem + 3.6vw, 4.6rem);

  --gutter:  clamp(1.25rem, 5vw, 4rem);
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --maxw:    76rem;
  --r:       4px;
  --ease:    cubic-bezier(0.23, 1, 0.32, 1);
}

/* ------------------------------------------------------------ reset ----- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
::selection { background: var(--green); color: var(--green-ink); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; }
.contact :focus-visible { outline-color: var(--mint); }

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

/* ------------------------------------------------------------- type ----- */
.display {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-wrap: balance;
}
.display--xl { font-size: var(--t-3xl); }
.display--lg { font-size: var(--t-2xl); letter-spacing: -0.025em; line-height: 1.06; }
.display--md { font-size: var(--t-xl); letter-spacing: -0.02em; line-height: 1.1; }
.lede { font-size: var(--t-lg); line-height: 1.45; color: var(--ink-soft); max-width: 44ch; text-wrap: pretty; }

/* ---------------------------------------------------------- buttons ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem;
  padding: 0.8em 1.4em;
  border: 1px solid var(--green);
  border-radius: var(--r);
  background: var(--green);
  color: var(--green-ink);
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--t-base);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), transform 120ms var(--ease);
}
.btn:hover { background: color-mix(in oklab, var(--green) 86%, black); }
.btn:active { transform: scale(0.98); }
.btn--ghost { background: transparent; color: var(--green); border-color: var(--hair-strong); }
.btn--ghost:hover { background: color-mix(in oklab, var(--green) 7%, transparent); }
/* 44 px hoch: empfohlene Mindestgröße für Tippflächen */
.btn--small { min-height: 2.75rem; padding: 0.55em 1.1em; font-size: var(--t-sm); }
.btn--light { background: var(--mint); border-color: var(--mint); color: var(--forest); }
.btn--light:hover { background: color-mix(in oklab, var(--mint) 85%, white); }
.btn[disabled] { opacity: 0.7; cursor: progress; transform: none; }

/* -------------------------------------------------------------- bar -----
   Fest über allem. Über dem dunklen Teil des Films wird sie durchsichtig und
   hell, damit oben kein weißer Balken hart auf das Bild trifft.
   --hero-dark und --hero-out schreibt main.js (0..1). */
:root { --hero-dark: 0; --hero-out: 0; --bar-dark: 0; }
/* --bar-dark: 1, solange eine dunkelgrüne Sektion unter der Leiste liegt
   (main.js). Registriert, damit der Wechsel weich überblendet. */
@property --bar-dark { syntax: "<number>"; inherits: true; initial-value: 0; }
:root { transition: --bar-dark 320ms var(--ease); }
.bar {
  --bar-k: max(var(--hero-dark), var(--bar-dark));
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  color: color-mix(in oklab, var(--bone) calc(var(--bar-k) * 100%), var(--ink));
  background: color-mix(in oklab,
    color-mix(in oklab, var(--forest) calc(var(--bar-dark) * 100%), var(--paper))
    calc((1 - var(--hero-dark)) * 92%), transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--ink) calc((1 - var(--bar-k)) * 12%), transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
}
.hero-is-dark .bar { -webkit-backdrop-filter: none; backdrop-filter: none; }
.bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
.mark { display: flex; flex-direction: column; justify-content: center; min-height: 2.75rem; text-decoration: none; line-height: 1.15; }
.mark__name { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.015em; font-size: 1.05rem; }
.mark__line { font-size: 0.8rem; color: color-mix(in oklab, var(--bone-soft) calc(var(--bar-k) * 100%), var(--ink-soft)); }
.bar .short { display: none; }
/* Navigation nur, wo neben Name und Buttons wirklich Platz ist */
.bar__nav { display: none; }
@media (min-width: 1100px) {
  .bar__nav { display: flex; gap: 1.75rem; margin-left: auto; margin-right: 1rem; font-size: var(--t-sm); }
}
.bar__nav a { text-decoration: none; opacity: 0.85; transition: opacity 180ms var(--ease); }
.bar__nav a:hover { opacity: 1; text-decoration: underline; }
.bar__actions { display: flex; align-items: center; gap: 0.5rem; }
.btn--call { background: #fff; color: var(--green); border-color: var(--hair-strong); }
.btn--call:hover { background: var(--mist); }

/* ------------------------------------------------------------- hero -----
   Ein Bildschirm, gepinnt. Der Film liegt randlos darunter, der weiße Grund
   ist eine Schicht darüber, die per Verlauf ins Bild übergeht. Nichts hier
   setzt position auf .hero__stage: .sc-stage (Engine) macht sie sticky. */
.hero { --veil: 38%; }
:where(.hero__stage) { position: relative; height: 100svh; overflow: hidden; background: var(--paper); }
/* Kein Aufploppen beim Laden: die Stadt blendet aus dem Weiß ein, sobald das
   Standbild wirklich dekodiert ist (main.js setzt .is-ready). */
.js .hero__poster { opacity: 0; transition: opacity 600ms var(--ease); }
.js .hero__poster.is-ready { opacity: 1; }
.js .hero.sc-has-clip .hero__poster { opacity: 0; }
.hero__stage :is(video, .hero__poster) { object-position: 50% 58%; }

.hero__veil, .hero__scrim, .hero__fade { position: absolute; inset: 0; pointer-events: none; }
.hero__veil {
  z-index: 2;
  opacity: calc(1 - var(--hero-dark));
  background: linear-gradient(to bottom,
    var(--paper) 0%,
    var(--paper) var(--veil),
    color-mix(in oklab, var(--paper) 86%, transparent) calc(var(--veil) + 5%),
    color-mix(in oklab, var(--paper) 55%, transparent) calc(var(--veil) + 12%),
    color-mix(in oklab, var(--paper) 22%, transparent) calc(var(--veil) + 19%),
    transparent calc(var(--veil) + 28%));
}
.hero__scrim {
  /* nur oben, wo die Schrift im dunklen Teil steht */
  z-index: 2;
  opacity: var(--hero-dark);
  background: linear-gradient(to bottom, rgb(6 9 12 / 0.72) 0%, rgb(6 9 12 / 0.5) calc(var(--veil) - 4%), transparent calc(var(--veil) + 24%));
}
.hero__fade {
  z-index: 3;
  opacity: var(--hero-out);
  background: linear-gradient(to top,
    var(--paper) 0%,
    var(--paper) 6%,
    color-mix(in oklab, var(--paper) 60%, transparent) 20%,
    transparent 42%);
}

.hero__copy {
  position: absolute; z-index: 4; left: 0; right: 0; top: 0;
  padding-top: calc(4.25rem + clamp(1.75rem, 5vh, 3.5rem));
  color: color-mix(in oklab, var(--bone) calc(var(--hero-dark) * 100%), var(--ink));
}
.hero__top { display: grid; gap: clamp(1.25rem, 3vh, 2rem); }
.hero__top h1 { max-width: 34ch; font-size: clamp(2.1rem, 1.2rem + 2.9vw, 3.9rem); }
.hero__side {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 1.25rem 2.5rem;
}
.hero__side .lede { max-width: 38ch; font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.3rem); color: color-mix(in oklab, #D6DFDA calc(var(--hero-dark) * 100%), var(--ink-soft)); }
.hero .btn--ghost {
  color: color-mix(in oklab, var(--bone) calc(var(--hero-dark) * 100%), var(--green));
  border-color: color-mix(in oklab, var(--bone) calc(var(--hero-dark) * 45%), var(--hair-strong));
}
.hero-is-dark .hero .btn--ghost:hover { background: rgb(255 255 255 / 0.08); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Schritt-Kästen: dieselbe Form wie in "So läuft es ab" (Kreis mit Ziffer,
   Linie, Titel, Satz), hier hell auf leicht abgedunkeltem, durchscheinendem
   Grund. Sie sitzen unter dem weißen Bereich, damit sie immer auf dem Film
   stehen. main.js setzt --x: -1 links draußen, 0 Mitte, 1 rechts draußen. */
.hero__steps {
  position: absolute; z-index: 4; left: 0; right: 0;
  /* --steps-top setzt main.js nur, wenn der Bildschirm zu niedrig ist */
  top: var(--steps-top, calc(var(--veil) + 26%));
  display: grid; justify-items: center;
  pointer-events: none;
}
.stepcard {
  --x: -1;
  grid-area: 1 / 1;
  visibility: hidden;
  position: relative;
  width: min(25rem, calc(100vw - 2 * var(--gutter)));
  padding: 1.75rem 1.4rem 1.3rem;
  border-top: 2px solid var(--mint);
  border-radius: 0 0 var(--r) var(--r);
  background: rgb(6 12 10 / 0.42);
  -webkit-backdrop-filter: blur(5px) saturate(1.1);
  backdrop-filter: blur(5px) saturate(1.1);
  color: #fff;
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.45);
  transform: translate3d(calc(var(--x) * (50vw + 60%)), 0, 0);
  will-change: transform;
}
.stepcard__n {
  position: absolute; top: -1.05rem; left: 1.4rem;
  display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--mint); color: var(--forest);
  font-family: var(--f-display); font-weight: 600; font-size: 0.95rem;
  text-shadow: none;
}
/* Die Ziffer wandert mit dem Fortschritt: 1 links, 2 in der Mitte, 3 rechts
   (nur im Hero, in "So läuft es ab" bleibt sie links). */
.stepcard[data-step="1"] .stepcard__n { left: 50%; transform: translateX(-50%); }
.stepcard[data-step="2"] .stepcard__n { left: auto; right: 1.4rem; }
.stepcard__t { font-family: var(--f-display); font-weight: 600; font-size: var(--t-lg); letter-spacing: -0.015em; margin-bottom: 0.4rem; }
.stepcard__d { color: rgb(255 255 255 / 0.88); font-size: var(--t-sm); line-height: 1.55; }

/* Fortschrittsleiste. Frei am linken Bildschirmrand wie die Punkte-
   Navigation auf Onepagern, ohne Fläche; ein feiner Schatten hält die helle
   Schrift auch über der hellen Stadt lesbar. Vertikal mittig zu den Kästen. */
.hero__railwrap {
  position: absolute; z-index: 5;
  left: clamp(1rem, 2vw, 2rem);
  top: calc(var(--steps-top, calc(var(--veil) + 26%)) + 2.2rem);
  opacity: calc(1 - var(--hero-out));
  pointer-events: none;
}
.rail { display: none; }
.has-rail .rail {
  position: relative;
  display: grid; gap: 0.95rem;
  color: #fff;
  font-size: 0.8rem; letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.75), 0 0 16px rgb(0 0 0 / 0.6);
}
.rail::before {
  /* feine Linie hinter den Punkten */
  content: ""; position: absolute; left: 0.3rem; top: 0.5rem; bottom: 0.5rem; width: 1px;
  background: rgb(255 255 255 / 0.45);
  box-shadow: 0 0 6px rgb(0 0 0 / 0.4);
}
.rail__step {
  position: relative;
  display: flex; align-items: center; gap: 0.7rem;
  opacity: 0.75;
  transition: opacity 300ms var(--ease);
}
.rail__step::before {
  content: ""; flex: none;
  width: 0.62rem; height: 0.62rem; border-radius: 50%;
  border: 1.5px solid #fff;
  background: rgb(10 16 14 / 0.55);
  box-shadow: 0 0 8px rgb(0 0 0 / 0.45);
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease), transform 300ms var(--ease);
}
.rail__step.is-done { opacity: 0.9; }
.rail__step.is-done::before { background: #fff; }
.rail__step.is-active { opacity: 1; color: var(--mint); font-weight: 600; }
.rail__step.is-active::before { background: var(--mint); border-color: var(--mint); transform: scale(1.3); }


.proof {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem;
  padding-block: 1rem clamp(2.5rem, 5vw, 4rem);
  color: var(--ink-soft);
  font-size: var(--t-sm);
}

/* ------------------------------------------------------------ steps ----- */
.steps { padding-block: var(--section); background: var(--mist); }
.steps__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  counter-reset: none;
}
.step { position: relative; padding-top: 1.75rem; border-top: 2px solid var(--hair-strong); }
.step:first-child { border-top-color: var(--green); }
.step__n {
  position: absolute; top: -1.05rem; left: 0;
  display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--mist);
  border: 2px solid var(--hair-strong);
  font-family: var(--f-display); font-weight: 600; font-size: 0.95rem;
}
.step:first-child .step__n { background: var(--green); border-color: var(--green); color: var(--green-ink); }
.step h3 { font-family: var(--f-display); font-weight: 600; font-size: var(--t-lg); letter-spacing: -0.015em; margin-bottom: 0.5rem; }
.step p { color: var(--ink-soft); max-width: 38ch; }

/* ------------------------------------------------------------ audit ----- */
.audit { padding-block: var(--section); }
.audit__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}
.audit__head { display: grid; gap: 1.25rem; position: sticky; top: 7rem; }
.audit__facts { display: grid; gap: 0.6rem; margin-top: 0.5rem; }
.audit__facts li { position: relative; padding-left: 1.6rem; color: var(--ink); }
.audit__facts li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 0.8rem; height: 0.45rem;
  border-left: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
.audit__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--hair-strong);
}
.audit__grid li {
  padding: 1.5rem 1.5rem 1.6rem 0;
  border-bottom: 1px solid var(--hair);
}
.audit__grid li:nth-child(even) { padding-left: 1.5rem; padding-right: 0; border-left: 1px solid var(--hair); }
.audit__grid h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; margin-bottom: 0.35rem; }
.audit__grid p { color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.55; }

/* ------------------------------------------------------------ after ----- */
.after { padding-block: var(--section); background: var(--mist); }
.after__lead { display: grid; gap: 1.25rem; max-width: 46rem; }
.after__pair {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.panel {
  display: grid; align-content: start; gap: 1rem;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r);
}
.panel p { color: var(--ink-soft); max-width: 44ch; }
.panel .panel__result { color: var(--green); font-weight: 600; }

/* -------------------------------------------------------------- who ----- */
.who { padding-block: var(--section); }
.who__pair {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.person { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.person__photo {
  width: 100%; height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--mist);
  border-radius: var(--r);
}
.person__name { font-family: var(--f-display); font-weight: 600; font-size: var(--t-lg); letter-spacing: -0.015em; }
.person__role { color: var(--green); font-weight: 600; font-size: var(--t-sm); margin: 0.15rem 0 0.75rem; }
.person p:last-of-type { color: var(--ink-soft); max-width: 50ch; }
.person__link { display: inline-block; margin-top: 0.75rem; color: var(--green); font-weight: 600; font-size: var(--t-sm); }

/* -------------------------------------------------------------- faq ----- */
.faq { padding-block: var(--section); background: var(--mist); }
.faq__inner { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: start; }
.faq__list { border-top: 1px solid var(--hair-strong); }
.faq details { border-bottom: 1px solid var(--hair-strong); }
.faq summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none;
  font-family: var(--f-text); font-weight: 400; font-size: 1.5rem; line-height: 1;
  color: var(--green);
  transition: transform 220ms var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--green); }
.faq details p { padding: 0 2.5rem 1.5rem 0; color: var(--ink-soft); max-width: 60ch; }

/* ---------------------------------------------------------- contact -----
   Dunkelgrüner Abschnitt mit heller Schrift; das Formular ist eine weiße
   Karte darauf, damit es sich klar abhebt und gut lesbar ist. */
.contact { --contact-soft: #E3EAE6; background: var(--forest); color: #fff; padding-block: var(--section); }
.contact--again { padding-bottom: 0; }
.contact__title { font-size: clamp(1.9rem, 1.3rem + 1.9vw, 2.9rem); line-height: 1.08; }
.contact__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.contact__lead { display: grid; gap: 1.25rem; }
.contact .lede { color: var(--contact-soft); }
.contact__call { margin-top: 1rem; font-family: var(--f-display); font-weight: 600; font-size: var(--t-lg); }
.contact__direct { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; font-style: normal; }
.contact__number { font-variant-numeric: tabular-nums; font-weight: 600; }
.contact__mail { color: #fff; padding-block: 0.6rem; }
.contact__mail:hover { color: var(--mint); }
.contact .btn--call { border-color: #fff; }

.form {
  display: grid; gap: 1rem;
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  background: #fff;
  color: var(--ink);
  border-radius: var(--r);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.28);
}
.form__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form__row { display: grid; gap: 0.4rem; }
.form label { font-size: var(--t-sm); color: var(--ink); font-weight: 500; }
.form__opt { color: var(--ink-soft); font-weight: 400; }
/* Felder klar als Felder erkennbar: deutliche Umrandung, beim Tippen ein
   grüner Rahmen mit Ring. */
.form input:not([type="checkbox"]), .form textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  background: #fff;
  border: 1px solid color-mix(in oklab, var(--ink) 32%, transparent);
  border-radius: var(--r);
  color: var(--ink);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.form textarea { resize: vertical; min-height: 7rem; }
.form input:not([type="checkbox"]):hover, .form textarea:hover { border-color: color-mix(in oklab, var(--ink) 50%, transparent); }
.form input:focus, .form textarea:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px rgb(14 107 71 / 0.22); }
.contact .form :focus-visible { outline-color: var(--green); }
/* Datenschutzhinweis statt Einwilligungs-Checkbox (v12): Rechtsgrundlage ist
   das berechtigte Interesse, eine Einwilligung ist nicht nötig. */
.form__note { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-soft); }
.form__note a { color: var(--ink); }
.form__trap { position: absolute; left: -9999px; }
.form .btn { justify-self: start; margin-top: 0.25rem; }

.foot { margin-top: var(--section); border-top: 1px solid rgb(255 255 255 / 0.18); }
.foot__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.25rem 1rem; padding-block: 1rem; font-size: var(--t-sm); color: var(--contact-soft); }
.foot__links { display: flex; gap: 1.5rem; }
.foot a { display: inline-block; padding-block: 0.7rem; text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }

/* ------------------------------------------------------------- jump -----
   Zwischen den beiden Kontaktsektionen. Kurz gepinnt, der Film läuft oben
   und unten ins Dunkelgrün aus, damit nirgends eine Kante entsteht. */
:where(.jump__stage) { position: relative; height: 100svh; overflow: hidden; }
.jump__stage { background: var(--forest); }
.jump__edge {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom,
    var(--forest) 0%,
    color-mix(in oklab, var(--forest) 70%, transparent) 7%,
    color-mix(in oklab, var(--forest) 25%, transparent) 15%,
    transparent 24%,
    transparent 76%,
    color-mix(in oklab, var(--forest) 25%, transparent) 85%,
    color-mix(in oklab, var(--forest) 70%, transparent) 93%,
    var(--forest) 100%);
}

/* ----------------------------------------------------------- mobile ----- */
@media (max-width: 900px) {
  .audit__inner, .faq__inner, .contact__inner { grid-template-columns: 1fr; }
  .audit__head { position: static; }
  .steps__list { grid-template-columns: 1fr; gap: 2.5rem; }
  .after__pair, .who__pair { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .mark__line { display: none; }
  .btn--small { padding-inline: 0.9em; }
  .hero { --veil: 50%; }
  .bar__actions { gap: 0.35rem; }
  .bar .btn--small { padding-inline: 0.7em; }
  .mark__name { font-size: 0.95rem; }
  .stepcard { padding: 1.5rem 1.1rem 1.1rem; }
  .hero__steps { top: var(--steps-top, calc(var(--veil) + 28% + 1rem)); }
  /* Handy: neben den fast bildschirmbreiten Kästen bleibt nur der Rand,
     also nur die Punkte, ohne Beschriftung */
  .hero__railwrap { left: 0.35rem; top: calc(var(--steps-top, calc(var(--veil) + 28% + 1rem)) + 3.2rem); }
  .rail__label { display: none; }
  .has-rail .rail { gap: 0.8rem; }
  .rail__step::before { width: 0.5rem; height: 0.5rem; }
  .rail::before { left: 0.25rem; }
  .bar .long { display: none; }
  .bar .short { display: inline; }
  .audit__grid { grid-template-columns: 1fr; }
  .audit__grid li, .audit__grid li:nth-child(even) { padding: 1.25rem 0; border-left: 0; }
  .form__two { grid-template-columns: 1fr; }
  .person { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1.1rem; }
  .actions .btn { flex: 1 1 auto; }
}
@media (max-width: 380px) {
  .bar .btn--small { font-size: 0.8rem; }
}
/* Handy quer und andere sehr niedrige Bildschirme: Kopfzeile, Überschrift und
   Kästen kompakter, damit oben der Text und darunter Film und Kasten Platz
   haben. Das Scrollverhalten bleibt gleich. */
@media (orientation: landscape) and (max-height: 500px) {
  html { scroll-padding-top: 4rem; }
  .bar__inner { min-height: 3.5rem; }
  .hero__copy { padding-top: calc(3.5rem + 0.9rem); }
  .hero__top { gap: 0.4rem; }
  .hero__top h1 { max-width: none; font-size: clamp(1.35rem, 3.4vw, 1.9rem); }
  .hero__side .lede { max-width: 62ch; font-size: 0.95rem; }
  .stepcard { width: min(34rem, calc(100vw - 2 * var(--gutter) - 4rem)); padding: 1.1rem 1.2rem 0.9rem; }
  .stepcard__n { width: 1.75rem; height: 1.75rem; top: -0.9rem; font-size: 0.85rem; }
  .stepcard__t { font-size: var(--t-base); margin-bottom: 0.2rem; }
  .stepcard__d { font-size: 0.8rem; line-height: 1.45; }
  .rail__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; }
}