/* =====================================================================
   JB Reitsport · „Noir“ – Termin anfragen (termin.html)
   Nur seitenspezifisch, Klassen mit Präfix ter-. Basis/Komponenten (Felder, Chips, Check, Buttons): css/site.css
   Bühne 50/50 (SYSTEM.md §9): links Cinemagraph 150816 im Halbdunkel (Desktop sticky, mobil als Streifen oben),
   rechts die Anfrage in vier Schritten. Signatur: Fortschritt als Champagnerlinie „01 / 04“, Schrittwechsel als
   Letterbox-Blende (ruhig: Überblendung), mit jedem Schritt wird es auf der Bühne heller, Erfolg: Spotlight auf
   „Danke.“. Champagner-Kursiv nur einmal („Pferd.“). Keine Endlosschleife außer Korn/Lichtleck/Cinemagraph.
   ===================================================================== */

/* ---------------------------------------------------------------- Seite */
/* Header-CTA „Termin anfragen“ ist hier die aktuelle Seite – ausgeblendet über site.css (.header-cta[aria-current]). */
/* Fokus und Sprünge nie unter die klebende Steuerleiste (WCAG 2.4.11): Höhe der Leiste + 32 px */
html { scroll-padding-bottom: 120px; }
.ter-form .field { scroll-margin-bottom: 120px; }

/* ---------------------------------------------------------------- Sektion */
.ter {
  position: relative; isolation: isolate;
  background: var(--night);
  --strip: calc(var(--header-h) + clamp(212px, 34svh, 380px));   /* mobiler Bildstreifen (34svh sichtbar unter dem Header) */
}

/* ---------------------------------------------------------------- Bühne (Cinemagraph 150816) */
.ter-stage { position: relative; display: flex; flex-direction: column; isolation: isolate; overflow: hidden; overflow: clip; }
.ter-stage__frame { position: relative; height: var(--strip); overflow: hidden; background: var(--graphite-0); }
.ter-stage .ter-stage__media { position: absolute; inset: 0; }
.ter-stage__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
}
/* Halbdunkel: Vignette, die mit jedem Schritt zurückgeht (Licht steigt) – Deckkraft statt Filter am Cinemagraph */
.ter-stage__dim,
.ter-stage__shade,
.ter-stage__marks { position: absolute; left: 0; right: 0; top: 0; height: var(--strip); pointer-events: none; }
.ter-stage__dim {
  background:
    radial-gradient(ellipse 62% 54% at 52% 40%, rgba(var(--night-rgb), 0) 0%, rgba(var(--night-rgb), .4) 70%, rgba(var(--night-rgb), .74) 100%),
    rgba(var(--night-rgb), .1);
  opacity: var(--dim, .5);                         /* jb4: Halbdunkel deutlich leichter (vorher .8) */
  transition: opacity 1.8s var(--ease-std);
}
.ter[data-step="2"] { --dim: .38; }
.ter[data-step="3"] { --dim: .26; }
.ter[data-step="4"] { --dim: .16; }
.ter[data-step="done"] { --dim: 0; }
.ter-stage__shade {
  background:
    linear-gradient(180deg, rgba(var(--night-rgb), .72) 0%, rgba(var(--night-rgb), 0) 22%),
    linear-gradient(0deg, var(--night) 0%, rgba(var(--night-rgb), .9) 14%, rgba(var(--night-rgb), .3) 40%, rgba(var(--night-rgb), 0) 58%);
}
.ter-stage__frame .grain { z-index: 1; }
.ter-stage__marks { display: none; }

.ter-stage__content { position: relative; z-index: 4; margin: calc(-1 * clamp(84px, 13svh, 128px)) var(--gutter) 0; }
.ter-stage__label { margin: 0 0 12px; }
.ter-title {
  margin: 0;
  font: 400 clamp(42px, 11.6vw, 64px)/1 var(--f-serif);
  letter-spacing: -.018em; color: var(--bone);
}
.ter-title .line { padding-bottom: .16em; margin-bottom: -.16em; }
.ter-title em { font-style: italic; letter-spacing: -.01em; padding-right: .04em; }
.ter-stage__sub { max-width: 40ch; margin: 16px 0 0; color: rgba(var(--bone-rgb), .86); font-size: 16px; line-height: 1.5; hyphens: manual; -webkit-hyphens: manual; }
/* Vertrauen nur aus Fakten – mobil als ruhige Serif-Zeile, ab Tablet als Versalien-Reihe */
.ter-trust { margin-top: 14px; font: italic 400 17px/1.45 var(--f-serif); color: var(--grey); }
.ter-trust li { display: inline; }
.ter-trust li + li::before { content: "·"; margin: 0 .5em; color: var(--accent); font-style: normal; }
@media (min-width: 768px) {
  .ter-trust { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; font: 600 var(--fs-label)/1.4 var(--f-text); letter-spacing: .14em; text-transform: uppercase; }
  .ter-trust li { display: inline-flex; align-items: center; gap: 9px; }
  .ter-trust li::before, .ter-trust li + li::before { content: ""; width: 4px; height: 4px; margin: 0; border-radius: 50%; background: var(--accent); flex: none; }
}

/* Schalter „Bewegung pausieren“ – mobil als runder Knopf im Streifen, Desktop als Pille */
.ter-stage__bar { position: absolute; z-index: 5; top: calc(var(--header-h) + 12px); right: var(--gutter); }
@media (max-width: 1023.98px) {
  /* Letzte Runde: weder oben rechts noch auf der Label-Zeile – beides lag in derselben Spalte direkt unter dem runden
     Menüknopf und las sich als zweites Navigationselement. Mobil steht der Schalter jetzt im Fluss unter Jennys Satz,
     links bündig und ausgeschrieben (Ring + „Bewegung pausieren“): eindeutig eine Mediensteuerung, kein Menü. */
  .ter-stage__bar { position: relative; z-index: 4; top: auto; right: auto; margin: 12px var(--gutter) 0; }
  .ter-stage__bar .motion-pill {
    display: inline-flex; align-items: center; gap: 12px;
    width: auto; height: 44px; padding: 0 6px 0 0; margin-left: -4px;
    border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    color: var(--grey); opacity: 1;
  }
  .ter-stage__bar .motion-pill::before {
    content: ""; position: static; flex: none; order: -1; width: 34px; height: 34px; margin-right: -46px; border-radius: 50%;
    border: 1px solid rgba(var(--bone-rgb), .28); background: rgba(var(--night-rgb), .4);
    transition: border-color .2s var(--ease-std);
  }
  .ter-stage__bar .motion-pill .i { flex: none; width: 14px; height: 14px; margin-left: 10px; color: var(--bone); }
  .ter-stage__bar .motion-pill [data-motion-label] {
    position: static; padding: 0; margin-left: 10px; border: 0; border-radius: 0; background: none;
    font-size: 12.5px; letter-spacing: .16em; color: inherit; opacity: 1; transform: none; pointer-events: none; transition: none;
  }
  .ter-stage__bar .motion-pill:hover, .ter-stage__bar .motion-pill:focus-visible { color: var(--bone); background: none; }
  .ter-stage__bar .motion-pill:hover::before, .ter-stage__bar .motion-pill:focus-visible::before,
  .ter-stage__bar .motion-pill[aria-pressed="true"]::before { border-color: var(--accent); }
}

/* ---------------------------------------------------------------- Anfrage (rechte Spalte) */
.ter-panel { position: relative; padding: clamp(36px, 6svh, 56px) var(--gutter) 0; overflow: hidden; overflow: clip; }
.ter-panel__leak { opacity: .7; }
.ter-panel > :not(.leak) { position: relative; z-index: 1; }

/* ---- Fortschritt: „01 / 04“ + Champagnerlinie (Signatur) */
.ter-progress {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 18px; row-gap: 14px;
  margin-bottom: clamp(30px, 4.6svh, 48px);
}
.ter-progress__count {
  margin: 0; display: flex; align-items: baseline; gap: 6px;
  font: 400 40px/.8 var(--f-display); letter-spacing: .04em; color: var(--grey);
  font-variant-numeric: tabular-nums;
}
.ter-progress__cur { position: relative; display: inline-block; overflow: hidden; padding-top: .08em; margin-top: -.08em; color: var(--accent); }
.ter-progress__num { display: block; }
.ter-progress__num.is-roll { animation: ter-roll .7s var(--ease-out) both; }
.ter-progress__num.is-roll-back { animation: ter-roll-back .7s var(--ease-out) both; }
@keyframes ter-roll { from { transform: translate3d(0, 105%, 0); } }
@keyframes ter-roll-back { from { transform: translate3d(0, -105%, 0); } }
.ter-progress__sep { font-size: .62em; color: var(--line-ui); transform: translateY(-.12em); }
.ter-progress__all { font-size: .62em; }
.ter-progress__list { display: flex; justify-content: flex-end; min-width: 0; }
.ter-progress__list li { display: none; }
.ter-progress__list li.is-current { display: block; }
.ter-progress__step {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  border: 0; background: none; cursor: pointer;
  font: 600 var(--fs-label)/1.2 var(--f-text); letter-spacing: .18em; text-transform: uppercase; color: var(--grey);
  transition: color .25s var(--ease-std);
}
.ter-progress__step[aria-current="step"] { color: var(--bone); cursor: default; }
.ter-progress__step.is-done:hover, .ter-progress__step.is-done:focus-visible { color: var(--accent-hi); }
.ter-progress__step[aria-disabled="true"] { color: rgba(var(--bone-rgb), .66); cursor: default; }   /* ≈ 5,5:1 (vorher 3,29:1) */
.ter-progress__line { grid-column: 1 / -1; position: relative; height: 1px; background: var(--line); }
.ter-progress__fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--accent-lo), var(--accent) 60%, var(--accent-hi));
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  transition: transform 1.2s var(--ease-inout);
}
.ter-progress__line::after {                                     /* Lichtpunkt an der Spitze der Linie */
  content: ""; position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-hi) 0 35%, rgba(var(--accent-rgb), .35) 36% 60%, rgba(var(--accent-rgb), 0) 61%);
  transform: translate3d(calc(var(--p, 0) * var(--lw, 0px)), 0, 0);
  transition: transform 1.2s var(--ease-inout);
}

/* ---- Bildschirm der Schritte + Letterbox-Blende */
.ter-form { gap: 0; }
/* Abstand zur Steuerleiste liegt im Bildschirm, nicht als margin-top der Leiste: eine klebende Leiste kann nicht
   höher stehen als ihr eigener Rand im Formular – mit margin-top ragte „Weiter“ bei 390×664 22 px aus dem Bild. */
.ter-screen { position: relative; padding-bottom: clamp(28px, 4svh, 40px); }
.js .ter-step:not(.is-current) { display: none; }
/* Sicherheitsnetz: läuft js/termin.js nicht (html.no-anim nach 4 s ohne Seitenskripte), stehen alle Schritte da */
.no-anim .ter:not(.ter-ready) .ter-step { display: block !important; }
.ter-step + .ter-step { margin-top: 64px; }
.js .ter.ter-ready .ter-step + .ter-step { margin-top: 0; }
.ter-step__head { margin-bottom: clamp(24px, 3.4svh, 36px); }
.ter-step__title { font-size: clamp(40px, 10vw, 56px); margin: 0 0 12px; }
.ter-step__lead { margin: 0; max-width: 46ch; color: var(--grey); }
.ter-step.is-entering { animation: ter-enter .6s var(--ease-out) both; }
@keyframes ter-enter { from { opacity: 0; transform: translate3d(0, 16px, 0); } }

.ter-blende { position: absolute; inset: -12px calc(-1 * var(--gutter)); z-index: 6; pointer-events: none; overflow: hidden; }
.ter-blende__bar { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--night); transform: scaleY(0); }
.ter-blende__bar--top { top: 0; transform-origin: 50% 0; }
.ter-blende__bar--bottom { bottom: 0; transform-origin: 50% 100%; }
.ter-blende__slit {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: min(72%, 460px); height: 1px; margin: -.5px 0 0 calc(min(72%, 460px) / -2);
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0), var(--accent) 24%, var(--accent-hi) 50%, var(--accent) 76%, rgba(var(--accent-rgb), 0));
  transform: scaleX(0); opacity: 0;
}
/* Schrittwechsel ≈ 0,68 s statt ≈ 1,0 s (Review 3: dreimal hintereinander wirkte das träge) – js/termin.js T_CLOSE/T_OPEN */
.ter-screen.is-closing .ter-blende__bar { transform: scaleY(1); transition: transform .26s var(--ease-inout); }
.ter-screen.is-closing .ter-blende__slit { transform: scaleX(1); opacity: 1; transition: transform .3s var(--ease-out) .06s, opacity .14s var(--ease-std) .06s; }
.ter-screen.is-opening .ter-blende__bar { transform: scaleY(0); transition: transform .42s var(--ease-out); }
.ter-screen.is-opening .ter-blende__slit { transform: scaleX(1.8); opacity: 0; transition: transform .42s var(--ease-out), opacity .3s var(--ease-std) .04s; }
.ter-screen.is-fading .ter-step { opacity: 0; transition: opacity .22s ease; }
.ter-screen .ter-step { transition: opacity .25s ease; }

/* ---------------------------------------------------------------- Schritt 1: Anliegen als Filmplakate */
.ter-choice { gap: 14px; }
.ter-posters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ter-poster { position: relative; display: block; min-width: 0; cursor: pointer; border-radius: var(--r); -webkit-tap-highlight-color: transparent; }
.ter-poster input { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ter-poster__frame {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 5; border-radius: var(--r); background: var(--graphite);
}
.ter-poster__frame img {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 30%);
  transform: scale(1.02); transition: transform 1.2s var(--ease-out);
}
.ter-poster__frame::before {                                      /* Halbdunkel je Plakat – das gewählte bekommt Licht */
  content: ""; position: absolute; inset: 0; z-index: 1; background: var(--night);
  opacity: .3; transition: opacity .7s var(--ease-std);
}
.ter-poster__frame::after {                                       /* Rahmen: Haarlinie, gewählt Champagner */
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(var(--bone-rgb), .14);
  transition: box-shadow .45s var(--ease-std);
}
.ter-poster__shade {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(var(--night-rgb), 0) 38%, rgba(var(--night-rgb), .62) 66%, rgba(var(--night-rgb), .95) 100%);
}
.ter-poster__check, .ter-poster__dot {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(var(--bone-rgb), .55); background: rgba(var(--night-rgb), .4);
  transition: background-color .3s var(--ease-std), border-color .3s var(--ease-std);
}
.ter-poster__check { position: absolute; z-index: 3; top: 10px; right: 10px; }
.ter-poster__check svg, .ter-poster__dot svg {
  width: 16px; height: 16px; fill: none; stroke: var(--on-accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: scale(.5); transition: opacity .25s var(--ease-std), transform .4s var(--ease-out);
}
.ter-poster__body { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 6px; pointer-events: none; }
.ter-poster__no { font: 400 16px/1 var(--f-display); letter-spacing: .08em; color: var(--accent); }
.ter-poster__title {
  font: 400 clamp(22px, 6vw, 30px)/.94 var(--f-display); text-transform: uppercase; letter-spacing: .01em; color: var(--bone);
  hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal;
}
/* „Besondere / Herausforderung“: feste Zeilen – sonst wählte text-wrap: balance „Heraus-/forderung“ (Review 3) */
.ter-poster__w { display: block; }
.ter-poster__hint {                                               /* steht im Namen des Felds; sichtbar über die Untertitel-Zeile */
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Hover (Maus), Fokus, gewählt */
@media (hover: hover) and (pointer: fine) {
  .ter-poster:hover .ter-poster__frame img { transform: scale(1.07); }
  .ter-poster:hover .ter-poster__frame::before { opacity: .12; }
  .ter-poster:hover .ter-poster__check, .ter-poster--type:hover .ter-poster__dot { border-color: var(--accent); }
}
.ter-poster input:focus-visible ~ .ter-poster__frame,
.ter-poster--type:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.ter-poster--type.is-focus { outline: 2px solid var(--accent); outline-offset: 3px; }
.ter-posters.has-choice .ter-poster:not(.is-chosen) .ter-poster__frame::before { opacity: .56; }
.ter-posters.has-choice .ter-poster:not(.is-chosen) .ter-poster__title { color: rgba(var(--bone-rgb), .78); }
.ter-poster.is-chosen .ter-poster__frame::before { opacity: 0; }
.ter-poster.is-chosen .ter-poster__frame::after { box-shadow: inset 0 0 0 1px var(--accent), inset 0 0 0 2px rgba(var(--accent-rgb), .5); }
.ter-poster.is-chosen .ter-poster__frame img { transform: scale(1.05); }
.ter-poster.is-chosen .ter-poster__check, .ter-poster--type.is-chosen .ter-poster__dot { background: var(--accent); border-color: var(--accent); }
.ter-poster.is-chosen .ter-poster__check svg, .ter-poster--type.is-chosen .ter-poster__dot svg { opacity: 1; transform: none; }

/* Fehler: Hinweis über den Plakaten, Rahmen in der Fehlerfarbe */
.ter-choice__err { margin-top: -6px; }
.ter-choice.is-invalid .ter-poster__frame::after { box-shadow: inset 0 0 0 1px var(--error); }
.ter .ter-choice.is-invalid label.ter-poster--type { border-color: var(--error); }

/* „Etwas anderes“ – typografisch, ohne Bild */
.ter .ter-choice label.ter-poster--type {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 76px; padding: 14px 16px 14px 20px;
  border: 1px solid rgba(var(--bone-rgb), .16); border-radius: var(--r);
  background: rgba(var(--graphite-2-rgb), .35);
  transition: border-color .35s var(--ease-std), background-color .35s var(--ease-std);
}
.ter-poster--type .ter-poster__body { position: static; display: grid; gap: 2px; }
.ter-poster--type .ter-poster__title { font: italic 400 clamp(26px, 7vw, 32px)/1.05 var(--f-serif); text-transform: none; letter-spacing: -.005em; }
.ter-poster--type .ter-poster__hint {
  position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal;
  font-size: 15px; line-height: 1.4; color: var(--grey);
}
.ter-poster--type .ter-poster__dot { flex: none; }
@media (hover: hover) and (pointer: fine) { .ter-poster--type:hover { border-color: rgba(var(--accent-rgb), .6); } }
.ter-posters.has-choice .ter-poster--type:not(.is-chosen) { border-color: rgba(var(--bone-rgb), .1); }
.ter-poster--type.is-chosen { border-color: var(--accent); background: rgba(var(--accent-rgb), .06); }

/* Untertitel-Zeile unter den Plakaten: zeigt, wofür das gewählte (bzw. überfahrene) Anliegen steht */
.ter-choice__cap {
  display: flex; align-items: baseline; gap: 12px; min-height: 1.5em; margin: 4px 0 0;
  font: italic 400 19px/1.35 var(--f-serif); color: rgba(var(--bone-rgb), .86);
  transition: opacity .3s var(--ease-std);
}
.ter-choice__cap b { font: 400 16px/1 var(--f-display); font-style: normal; letter-spacing: .08em; color: var(--accent); }
.ter-choice__cap.is-swap { opacity: 0; transition-duration: .12s; }
@media (max-width: 1023.98px) { .ter-choice__cap:empty { display: none; } }

/* ---------------------------------------------------------------- Schritte 2–3: Felder */
.ter-fields { display: grid; gap: 26px; }
.ter-row { display: grid; gap: 16px; }
.ter-sub { display: grid; gap: 8px; min-width: 0; }
.ter-reach .field__help { margin-top: -4px; }
.ter-reach.is-invalid input:not([aria-invalid]) { border-color: var(--line-ui); box-shadow: none; }
.ter-form textarea { field-sizing: content; min-height: 132px; max-height: 46svh; }
.ter-form #ter-vorgeschichte { min-height: 96px; }
.ter-vet {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px;
  margin: 2px 0 0; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 15px; line-height: 1.5; color: var(--grey);
}
.ter-vet span:last-child { flex: 1 1 260px; }
@media (min-width: 640px) {
  .ter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ter-row--horse { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- Schritt 4: Übersicht */
.ter-sum { border-top: 1px solid var(--line); }
.ter-sum__block { padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.ter-sum__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ter-sum__h { margin: 0; font: 600 var(--fs-label)/1.3 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.ter-sum__edit {
  min-height: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer;
  font: 600 var(--fs-label)/1 var(--f-text); letter-spacing: .18em; text-transform: uppercase; color: var(--bone);
  text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), .7); text-underline-offset: 6px; text-decoration-thickness: 1px;
  transition: color .2s var(--ease-std), text-decoration-color .2s var(--ease-std);
}
.ter-sum__edit:hover { color: var(--accent-hi); text-decoration-color: var(--accent); }
.ter-sum__lead { margin: 4px 0 0; font: 400 clamp(28px, 7vw, 36px)/1.12 var(--f-serif); letter-spacing: -.01em; color: var(--bone); }
.ter-sum__list { display: grid; gap: 12px; margin: 6px 0 0; }
.ter-sum__list > div { display: grid; gap: 2px; }
.ter-sum__list dt { font-size: 14px; color: var(--grey); }
.ter-sum__list dd {
  margin: 0; color: var(--bone); white-space: pre-line; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
}
.ter-sum__list dd.is-empty, .ter-sum__lead.is-empty { color: var(--placeholder); font-style: italic; }
@media (min-width: 640px) {
  .ter-sum__list > div { grid-template-columns: 10em minmax(0, 1fr); column-gap: 16px; align-items: baseline; }
}
.ter-consent { margin-top: 26px; }
.ter-consent__more { margin: 0 0 0 42px; }                  /* Link außerhalb des Labels: ein Tipp verlässt das Formular nicht mehr versehentlich */
.ter-note-m { display: flex; align-items: center; gap: 10px; margin: 22px 0 0; font-size: 14px; color: var(--grey); }

/* ---------------------------------------------------------------- Steuerung (klebt unten – Daumenzone) */
.ter-nav {
  position: sticky; bottom: 0; z-index: 7;
  display: flex; align-items: center; gap: 12px;
  margin: 0 calc(-1 * var(--gutter)) 0;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid transparent;
  transition: background-color .35s var(--ease-std), border-color .35s var(--ease-std);
}
/* nur solange die Leiste klebt (Inhalt läuft darunter durch): dunkles Glas mit Haarlinie */
.ter-nav.is-stuck {
  border-top-color: rgba(var(--bone-rgb), .1);
  background: rgba(var(--night-rgb), .88);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
/* Mobil/Tablet (Review 3): Verlaufsfläche statt hartem Glas – der Inhalt läuft weich unter „Weiter“ aus, nichts liegt
   mehr ohne Abdunklung direkt unter dem Knopf (vorher 1,07:1 für die Anleitung darunter) */
@media (max-width: 1023.98px) {
  .ter-nav, .ter-nav.is-stuck {
    padding-top: 28px; border-top: 0;   /* sonst kachelt der Verlauf in den 1-px-Rand: dunkle Linie durch den Text */
    background: linear-gradient(180deg, rgba(var(--night-rgb), 0), var(--night) 38%);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
.ter-nav__sentinel { display: block; height: 1px; margin-top: -1px; pointer-events: none; }
.ter-nav__back {
  flex: none; display: inline-grid; place-items: center; width: 52px; height: 52px; padding: 0;
  border: 1px solid var(--line-ui); border-radius: 999px; background: transparent; color: var(--bone); cursor: pointer;
  transition: border-color .2s var(--ease-std), color .2s var(--ease-std);
}
.ter-nav__back span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ter-nav__back:hover { border-color: var(--accent); color: var(--accent-hi); }
.ter-nav__back .i { width: 18px; height: 18px; }
.ter-nav__note { display: none; margin: 0; }
.ter-nav__dot, .ter-note-m::before { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.ter-note-m::before { content: ""; }
.ter-nav__next, .ter-nav__send { flex: 1 1 auto; margin-left: auto; }
.ter-form:not(.is-last) .ter-nav__send { display: none; }
.ter-form.is-last .ter-nav__next { display: none; }
html:not(.js) .ter-nav__next, html:not(.js) .ter-progress { display: none; }
.ter-nav__send { position: relative; }
.ter-nav__busy {
  position: absolute; left: 22%; right: 22%; bottom: 12px; height: 1px; border-radius: 1px;
  background: rgba(var(--night-rgb), .75); transform-origin: 0 50%; transform: scaleX(0); opacity: 0;
}
.ter-nav__send.is-busy { cursor: progress; opacity: 1; }
.ter-nav__send.is-busy .i { opacity: 0; }
.ter-nav__send.is-busy .ter-nav__busy { opacity: 1; animation: ter-busy 1.1s var(--ease-inout) infinite; }
@keyframes ter-busy {
  0% { transform: scaleX(0); transform-origin: 0 50%; }
  50% { transform: scaleX(1); transform-origin: 0 50%; }
  50.1% { transform: scaleX(1); transform-origin: 100% 50%; }
  100% { transform: scaleX(0); transform-origin: 100% 50%; }
}

/* ---------------------------------------------------------------- Erfolg: Spotlight auf „Danke.“ */
.ter-done {
  position: relative; isolation: isolate;
  display: grid; justify-items: center; align-content: center; text-align: center;
  min-height: 74svh; padding: clamp(40px, 8svh, 96px) 0 clamp(48px, 8svh, 96px);
}
.ter-done__light { position: absolute; inset: calc(-1 * clamp(36px, 6svh, 56px)) calc(-1 * var(--gutter)) 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ter-done__cone {
  position: absolute; inset: 0;
  background: conic-gradient(from 0deg at 50% -4%,
    rgba(var(--light-rgb), 0) 0deg 163deg, rgba(var(--light-rgb), .07) 171deg, rgba(var(--light-rgb), .15) 180deg,
    rgba(var(--light-rgb), .07) 189deg, rgba(var(--light-rgb), 0) 197deg 360deg);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 86%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 86%);
  transform-origin: 50% 0;
}
.ter-done__pool {
  position: absolute; left: 50%; top: 46%; width: min(150%, 980px); aspect-ratio: 2.1 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(var(--light-rgb), .16), rgba(var(--light-rgb), .06) 52%, rgba(var(--light-rgb), 0));
}
.ter-done__label { margin: 0 0 18px; }
.ter-done__title {
  margin: 0; font: 400 clamp(104px, 30vw, 220px)/.92 var(--f-serif); letter-spacing: -.035em;
}
.ter-done__title .line { padding: .06em .1em .2em; margin: -.06em -.1em -.2em; }
.ter-done__title .line__in {
  color: transparent;
  background: radial-gradient(ellipse 58% 70% at 50% 46%, var(--bone) 0%, var(--bone) 46%, rgba(var(--bone-rgb), .66) 100%);
  -webkit-background-clip: text; background-clip: text;
}
.ter-done__draft { margin: 26px 0 0; }
.ter-done__draft .tbd { font-size: 13px; min-height: 38px; padding: 0 16px; color: var(--bone); border-color: rgba(var(--accent-rgb), .6); text-align: left; }
/* schmal: kürzer und einzeilig („Entwurf – nichts gesendet“), sonst stand der Punkt allein links (Review 3) */
@media (max-width: 479.98px) { .ter-done__long { display: none; } .ter-done__draft .tbd { white-space: nowrap; } }
.ter-done__text { max-width: 40ch; margin: 22px auto 0; color: rgba(var(--bone-rgb), .84); }
.ter-done__recap { max-width: 46ch; margin: 10px auto 0; font: italic 400 21px/1.4 var(--f-serif); color: var(--grey); }
.ter-done__recap:empty { display: none; }
.ter-done__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; margin-top: 36px; }
.ter-done__actions .link { border: 0; background: none; padding: 0; }

/* Auftritt: Licht geht an (Kegel, dann Lichtkreis), „Danke.“ steigt aus der Maske */
.ter-done.is-in .ter-done__cone { animation: ter-cone 1.7s var(--ease-out) .05s both; }
.ter-done.is-in .ter-done__pool { animation: ter-pool 2s var(--ease-out) .3s both; }
.ter-done.is-in .ter-done__label { animation: hero-rise 1s var(--ease-out) .2s both; }
.ter-done.is-in .ter-done__title .line__in { animation: hero-line 1.4s var(--ease-out) .42s both; }
.ter-done.is-in .ter-done__draft { animation: hero-rise 1s var(--ease-out) .95s both; }
.ter-done.is-in .ter-done__text, .ter-done.is-in .ter-done__recap { animation: hero-rise 1s var(--ease-out) 1.05s both; }
.ter-done.is-in .ter-done__actions { animation: hero-rise 1s var(--ease-out) 1.2s both; }
@keyframes ter-cone { from { opacity: 0; transform: scaleY(.35); } }
@keyframes ter-pool { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }

/* Phase „fertig“: Formular und Fortschritt weg, Bühne im vollen Licht */
.ter[data-step="done"] .ter-progress, .ter[data-step="done"] .ter-form { display: none; }

/* ---------------------------------------------------------------- Fuß der Spalte */
.ter-aside {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
  margin-top: clamp(48px, 7svh, 80px); padding: 26px 0 clamp(56px, 8svh, 96px);
  border-top: 1px solid var(--line);
}
.ter-aside__col { display: grid; align-content: start; justify-items: start; gap: 2px; }
.ter-aside__h { margin: 0 0 6px; font: 600 var(--fs-label)/1.3 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--grey); }
.ter-aside .text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
.ter-aside .tbd { margin-top: 8px; }
@media (max-width: 479.98px) { .ter-aside { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* ---------------------------------------------------------------- Steuerleiste ab Tablet: Zurück mit Text, Hinweis, Weiter rechts */
@media (min-width: 640px) {
  .ter-nav__back { width: auto; height: 52px; padding: 0 22px; display: inline-flex; gap: 10px; font: 600 13px/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; }
  .ter-nav__back span { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
  .ter-nav__note { display: inline-flex; align-items: center; gap: 10px; flex: 1 1 auto; justify-content: flex-end; font-size: 14px; color: var(--grey); text-align: right; }
  .ter-nav__next, .ter-nav__send { flex: none; margin-left: 0; }
  .ter-note-m { display: none; }
}

/* ---------------------------------------------------------------- Tablet */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .ter { --strip: calc(var(--header-h) + clamp(260px, 38svh, 440px)); }
  .ter-posters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ter-poster__frame { aspect-ratio: 3 / 4; }
  .ter-poster__title { font-size: 24px; }
  .ter-panel { max-width: 860px; margin-inline: auto; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .ter-stage__content { max-width: 640px; }
  .ter-title { font-size: 68px; }
}
/* Mobil, flache Fenster (iPhone-Safari 390×664, 360×672): kürzerer Bildstreifen, Vertrauenszeile entfällt –
   so stehen „Worum geht es?“ und „Weiter“ beim Laden ganz im Bild (Review 3) */
@media (max-width: 1023.98px) and (max-height: 720px) {
  .ter { --strip: calc(var(--header-h) + 26svh); }
  .ter-trust { display: none; }
}
/* Abnahme 24.10. (Mobil): die erste Kartenreihe soll über dem Falz anschneiden – Bildstreifen kürzer, und solange in
   Schritt 1 nichts gewählt ist, klebt die Steuerleiste nicht (sie steht unter den Karten; wer zuerst „Weiter“ tippte,
   bekam sofort einen Fehler). Mit Auswahl (auch per ?anliegen=) klebt sie wie gewohnt. */
@media (max-width: 639.98px) {
  .ter { --strip: calc(var(--header-h) + clamp(170px, 25svh, 300px)); }
}
@media (max-width: 639.98px) and (max-height: 720px) {
  .ter { --strip: calc(var(--header-h) + 21svh); }
}
/* Letzte Runde: auch am Desktop klebt die Leiste in Schritt 1 erst nach der Auswahl – vorher schwebte „Weiter“ ohne
   Grund über den Plakaten (bei 1440×900 auf dem Auswahlkreis von Karte IV). */
.ter:not([data-step="2"]):not([data-step="3"]):not([data-step="4"]):not([data-step="done"]):not(:has(input[name="anliegen"]:checked)) .ter-nav { position: relative; }

/* ---------------------------------------------------------------- Desktop: Bühne klebt links, Anfrage rechts */
@media (min-width: 1024px) {
  .ter { display: grid; grid-template-columns: minmax(0, 41.5%) minmax(0, 1fr); align-items: start; min-height: 100vh; min-height: 100svh; }
  .ter-stage {
    position: sticky; top: 0;
    height: 100vh; height: 100svh;
    justify-content: flex-end;
    padding-top: calc(var(--header-h) + 32px);
    overflow: hidden;
  }
  .ter-stage__frame { position: absolute; inset: 0; height: auto; }
  .ter-stage__media img { object-position: 44% 28%; }
  .ter-stage__dim, .ter-stage__shade, .ter-stage__marks { height: auto; bottom: 0; }
  .ter-stage__dim {
    background:
      radial-gradient(ellipse 56% 44% at 50% 36%, rgba(var(--night-rgb), 0) 0%, rgba(var(--night-rgb), .4) 72%, rgba(var(--night-rgb), .72) 100%),
      rgba(var(--night-rgb), .1);
  }
  .ter-stage__shade {
    background:
      linear-gradient(180deg, rgba(var(--night-rgb), .74) 0%, rgba(var(--night-rgb), 0) 17%),
      linear-gradient(0deg, rgba(var(--night-rgb), .96) 0%, rgba(var(--night-rgb), .8) 20%, rgba(var(--night-rgb), .28) 42%, rgba(var(--night-rgb), 0) 58%),
      linear-gradient(270deg, var(--night) 0%, rgba(var(--night-rgb), .5) 7%, rgba(var(--night-rgb), 0) 20%);
  }
  .ter-stage__marks {
    display: block; z-index: 3;
    top: calc(var(--header-h) + 14px); left: calc(var(--gutter) - 26px); right: 22px; bottom: 14px;
    --c: rgba(var(--bone-rgb), .26);
    background:
      linear-gradient(var(--c), var(--c)) 0 0 / 18px 1px, linear-gradient(var(--c), var(--c)) 0 0 / 1px 18px,
      linear-gradient(var(--c), var(--c)) 100% 0 / 18px 1px, linear-gradient(var(--c), var(--c)) 100% 0 / 1px 18px,
      linear-gradient(var(--c), var(--c)) 0 100% / 18px 1px, linear-gradient(var(--c), var(--c)) 0 100% / 1px 18px,
      linear-gradient(var(--c), var(--c)) 100% 100% / 18px 1px, linear-gradient(var(--c), var(--c)) 100% 100% / 1px 18px;
    background-repeat: no-repeat;
  }
  .ter-stage__content { margin: 0 clamp(40px, 4vw, 72px) clamp(56px, 9svh, 104px) var(--gutter); max-width: 560px; }
  .ter-title { font-size: clamp(54px, min(5.3vw, 10svh), 96px); line-height: .98; }
  .ter-stage__sub { font-size: 18px; margin-top: 20px; }
  .ter-trust { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(var(--bone-rgb), .14); }
  .ter-stage__bar { top: calc(var(--header-h) + 30px); right: 40px; }

  .ter-panel {
    min-height: 100vh; min-height: 100svh;
    padding: calc(var(--header-h) + clamp(24px, 5svh, 64px)) var(--gutter) 0 clamp(40px, 5vw, 96px);
  }
  .ter-panel > :not(.leak) { max-width: 780px; }
  .ter-progress { column-gap: 32px; }
  .ter-progress__count { font-size: 46px; }
  .ter-progress__list { gap: 4px 22px; flex-wrap: wrap; }
  .ter-progress__list li { display: block; }
  .ter-step__title { font-size: clamp(44px, min(4vw, 7.4svh), 64px); }
  /* Anliegen als echte Filmplakate (Review 3): 2 × 2 im Hochformat 4 : 5 statt vier 165-px-Kacheln in einer Reihe.
     Die Höhe ist an das Fenster gebunden, damit die erste Reihe samt Titel über der Steuerleiste steht (flache
     Laptops werden querformatiger); der Ausschnitt (--pos) hält das pinke Werkzeug in 150238 heraus. */
  .ter-posters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .ter-poster__frame { width: 100%; aspect-ratio: 4 / 5; max-height: max(210px, calc(100svh - 500px)); }   /* width: sonst überträgt aspect-ratio die max-height auf die Breite */
  .ter-poster__frame img { object-position: var(--pos, 50% 30%); }
  .ter-poster__body { left: 18px; right: 18px; bottom: 16px; }
  .ter-poster__title { font-size: clamp(28px, 2.3vw, 38px); }
  .ter .ter-choice label.ter-poster--type { min-height: 74px; padding: 12px 18px 12px 24px; }
  .ter-screen { padding-bottom: clamp(26px, 3.6svh, 40px); }
  .ter-nav { margin: 0; padding: 18px 0; }
  .ter-nav.is-stuck { background: var(--night); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ter-nav::before {                                              /* weicher Übergang über der klebenden Leiste */
    content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 40px; pointer-events: none;
    background: linear-gradient(180deg, rgba(var(--night-rgb), 0), var(--night));
    opacity: 0; transition: opacity .35s var(--ease-std);
  }
  .ter-nav.is-stuck::before { opacity: 1; }
  .ter-done { min-height: calc(100svh - var(--header-h) - clamp(24px, 5svh, 64px)); padding-top: 0; }
  .ter-done__title { font-size: clamp(140px, min(15vw, 26svh), 240px); }
}
@media (min-width: 1024px) and (max-height: 700px) {
  .ter-step__lead { font-size: 16px; }
  .ter-step__title { margin-bottom: 6px; }
  .ter-progress { margin-bottom: 22px; }
}
/* sehr breite Fenster: die Anfrage steht mittig in ihrer Spalte */
@media (min-width: 1600px) {
  .ter-panel > :not(.leak) { max-width: 840px; margin-inline: auto; }
  .ter-panel { padding-right: clamp(64px, 6vw, 120px); }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .ter-trust { display: none; }
  .ter-stage__sub { font-size: 17px; }
  .ter-step__head { margin-bottom: 20px; }
}

/* ---------------------------------------------------------------- Auftritt beim Laden (nach dem Intro über --hd) */
.js .ter-stage__media { animation: ter-settle 2.6s var(--ease-out) both; animation-delay: calc(var(--hd) - .35s); }
.js .ter-title .line__in { animation: hero-line 1.3s var(--ease-out) both; animation-delay: calc(var(--hd) + .12s + var(--li, 0) * .1s); }
.js .ter-stage__label { animation: hero-rise 1.1s var(--ease-out) both; animation-delay: var(--hd); }
.js .ter-stage__sub { animation: hero-rise 1.1s var(--ease-out) both; animation-delay: calc(var(--hd) + .45s); }
.js .ter-trust, .js .ter-stage__bar, .js .ter-stage__marks { animation: hero-rise 1.1s var(--ease-out) both; animation-delay: calc(var(--hd) + .7s); }
.js .ter-progress { animation: hero-rise 1.1s var(--ease-out) both; animation-delay: calc(var(--hd) + .25s); }
.js .ter-screen, .js .ter-nav { animation: hero-rise 1.2s var(--ease-out) both; animation-delay: calc(var(--hd) + .4s); }
@keyframes ter-settle { from { transform: scale(1.07); } }

/* ---------------------------------------------------------------- „Bewegung reduzieren“: ruhige Fassung (Überblenden) */
@media (prefers-reduced-motion: reduce) {
  .js .ter-stage__media { animation: none; }
  .js .ter-title .line__in { animation-name: hero-fade; animation-duration: .9s; animation-timing-function: ease; }
  .js .ter-stage__label, .js .ter-stage__sub, .js .ter-trust, .js .ter-stage__bar, .js .ter-stage__marks,
  .js .ter-progress, .js .ter-screen, .js .ter-nav { animation-name: hero-fade; animation-timing-function: ease; }
  .ter-progress__num.is-roll, .ter-progress__num.is-roll-back { animation: hero-fade .5s ease both; }
  .ter-progress__fill, .ter-progress__line::after { transition: none; }
  .ter-step.is-entering { animation: hero-fade .3s ease both; }
  .ter-poster__frame img, .ter-poster:hover .ter-poster__frame img, .ter-poster.is-chosen .ter-poster__frame img { transform: none; transition: none; }
  .ter-poster__check svg, .ter-poster__dot svg { transform: none; }
  .ter-nav__send.is-busy .ter-nav__busy { animation: none; transform: none; opacity: .5; }
  .ter-done.is-in .ter-done__cone { animation: hero-fade 1.2s ease both; }
  .ter-done.is-in .ter-done__pool { animation: hero-fade 1.4s ease .2s both; }
  .ter-done.is-in .ter-done__title .line__in { animation: hero-fade 1s ease .35s both; }
  .ter-done.is-in .ter-done__label, .ter-done.is-in .ter-done__draft, .ter-done.is-in .ter-done__text,
  .ter-done.is-in .ter-done__recap, .ter-done.is-in .ter-done__actions { animation-name: hero-fade; animation-timing-function: ease; }
}