/* ═══════════════════════════════════════════════════════════
   Lisa Kern — Landingpage
   Umsetzung nach DESIGN.md. Heller Modus, Terrakotta-Akzent.
   Italiana (Display) · Cormorant (Lesetext) · Hanken Grotesk (Label)
   Vier Sektionen: Hero · Ablauf · Preise · Anfrage
   ═══════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  /* Farben — kein einziger neutraler Wert, alles ins Warme gezogen */
  --paper:        #EFEDE7;
  --paper-rgb:    239, 237, 231;
  --surface:      #FDFCFA;
  --ink-disp:     #241A10;
  --ink:          #1C1813;
  --prose:        #4A4237;
  --muted:        #6A6154;
  --quiet:        #6F685C;
  --faint:        #8A8174;
  --fainter:      #9A9284;
  --disabled:     #B6ADA0;

  --hair:         rgba(28, 24, 19, 0.14);
  --hair-strong:  rgba(28, 24, 19, 0.22);

  /* Terrakotta — ein Akzent, fünf Abstufungen, sparsam dosiert */
  --terra-deep:   #8A3F27;
  --terra:        #9C4A2F;
  --terra-lift:   #AE5536;
  --terra-hover:  #B85E3D;
  --terra-tint:   rgba(156, 74, 47, 0.08);

  /* Abstände — 9px-Raster */
  --s1:  9px;   --s2: 18px;  --s3: 27px;  --s4: 36px;
  --s5: 45px;   --s6: 54px;  --s8: 72px;  --s9: 81px;
  --s11: 99px;  --s14: 126px; --s16: 144px;

  --gutter:     clamp(24px, 4vw, 64px);
  --measure:    640px;
  --wide:       1360px;
  --head-band:  74px;

  /* Display-Schrift: Fraunces. Verspielt über SOFT/WONK, aber
     mit deutlich kräftigeren Strichen als eine Didone — genau
     das war an Italiana das Problem. */
  --display: 'Fraunces', 'Cormorant', Georgia, serif;
  --wonk: 'SOFT' 40, 'WONK' 1;

  /* Typo — Display spreizt 2.8×, Lesetext nur 1.3×.
     Fraunces läuft breiter als Italiana, daher kleinere Grade. */
  --disp-xl:  clamp(36px, 5.5vw, 88px);
  --disp-l:   clamp(30px, 4.1vw, 64px);
  --disp-s:   clamp(21px, 2.0vw, 29px);
  --prose-l:  clamp(21px, 2.2vw,  29px);
  --prose-b:  clamp(19px, 1.9vw,  25px);
  --prose-s:  clamp(16px, 1.4vw,  19px);
  --cap:      clamp(14px, 1.05vw, 17px);

  /* Label-Größen stehen fest, sie skalieren nicht */
  --lab:       12px;
  --lab-nav:   13px;
  --lab-sm:    11px;
  --lab-quiet: 10px;

  /* Bewegung — zwei Kurven, beide bremsen aus */
  --exp:  cubic-bezier(0.16, 1, 0.3, 1);
  --qnt:  cubic-bezier(0.22, 1, 0.36, 1);
  --t:    0.3s;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Cormorant', Georgia, serif;
  font-weight: 400;
  font-size: var(--prose-b);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip statt hidden: hidden würde den Body zu einem eigenen
     Scroll-Container machen und das Scrollverhalten zerlegen. */
  overflow-x: clip;
}

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

::selection { background: var(--terra); color: var(--paper); }

:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }

/* Feines Korn über allem — das Detail, das niemand fordert */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* ── Lesefortschritt ────────────────────────────────────── */
/* Liegt auf der Unterkante des Kopfbands, nicht frei über der
   Seite — sonst liest sich der Balken wie ein Rendering-Fehler
   statt wie eine Anzeige. */
.progress {
  position: fixed;
  top: calc(var(--head-band) - 1px);
  left: 0; right: 0;
  height: 1px;
  z-index: 21;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t) var(--qnt);
}
.progress.is-on { opacity: 1; }
.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--terra);
  transition: width 0.12s linear;
}

/* ── Typografische Rollen ───────────────────────────────── */

/* Display: Fraunces, Versalien, Zeilenhöhe unter 1 */
.disp {
  font-family: var(--display);
  font-weight: 500;
  font-optical-sizing: auto;
  font-variation-settings: var(--wonk);
  text-transform: uppercase;
  color: var(--ink-disp);
  margin: 0;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.disp-xl { font-size: var(--disp-xl); line-height: 0.96; }
.disp-l  { font-size: var(--disp-l);  line-height: 1.00; }
.disp-s  { font-size: var(--disp-s);  line-height: 1.12; letter-spacing: 0.012em; }

/* Lesetext: Cormorant, Zeilenhöhe 1.6 */
.prose, .prose-s {
  font-family: 'Cormorant', Georgia, serif;
  color: var(--prose);
  margin: 0 0 var(--s2);
  text-wrap: pretty;
}
.prose   { font-size: var(--prose-b); line-height: 1.6; }
.prose-s { font-size: var(--prose-s); line-height: 1.6; }
.prose-lead { font-size: var(--prose-l); line-height: 1.55; color: var(--ink); }
.prose:last-child, .prose-s:last-child { margin-bottom: 0; }

/* Label: Hanken Grotesk, gesperrt, nie im Fließtext */
.lab {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: var(--lab);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.45;
  /* --faint wäre hübscher, liegt bei 10–12px aber unter 4.5:1.
     Kleinschrift bekommt deshalb --muted. */
  color: var(--muted);
}

/* ── Kopfzeile ──────────────────────────────────────────── */
.site {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  height: var(--head-band);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid transparent;
  transition: background-color var(--t) var(--qnt), border-color var(--t) var(--qnt);
}
.site.is-stuck {
  background: rgba(var(--paper-rgb), 0.88);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--hair);
}

.logo {
  font-family: var(--display);
  font-weight: 600;
  font-optical-sizing: auto;
  font-variation-settings: var(--wonk);
  font-size: 19px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-disp);
  text-decoration: none;
  transition: color var(--t) var(--qnt);
}
.logo:hover { color: var(--terra); }

.h-right { display: flex; align-items: center; gap: clamp(13px, 1.5vw, 22px); }
.h-link {
  font-size: var(--lab-nav);
  font-weight: 300;
  letter-spacing: 0.16em;
  color: var(--quiet);
  text-decoration: none;
  transition: color var(--t) var(--qnt);
}
.h-link:hover { color: var(--ink); }

/* ── Buttons ────────────────────────────────────────────── */
.btn, .cta-wired {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border-radius: 999px;
  transition: background-color var(--t) var(--qnt),
              color var(--t) var(--qnt),
              border-color var(--t) var(--qnt);
}
.cta-wired {
  font-size: var(--lab-nav);
  font-weight: 300;
  padding: 10px 22px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
}
.cta-wired:hover { background: var(--ink); color: var(--paper); }

.btn-solid {
  font-size: var(--lab);
  letter-spacing: 0.18em;
  padding: 17px 30px;
  border: 1px solid var(--terra);
  background: var(--terra);
  color: var(--paper);
}
.btn-solid:hover { background: var(--terra-hover); border-color: var(--terra-hover); }

.btn-quiet {
  font-size: var(--lab);
  letter-spacing: 0.18em;
  padding: 17px 30px;
  border: 1px solid var(--hair-strong);
  background: rgba(var(--paper-rgb), 0.5);
  color: var(--ink);
}
.btn-quiet:hover { border-color: var(--ink); background: rgba(var(--paper-rgb), 0.85); }

.btn-big { padding: 20px 40px; }

/* ── Sektionsraster ─────────────────────────────────────── */
.block {
  padding: var(--s9) var(--gutter);
  max-width: calc(var(--measure) + var(--gutter) * 2);
  margin: 0 auto;
}
.block-wide { max-width: calc(var(--wide) + var(--gutter) * 2); }

/* Kapitelmarke — zweistellige Nummer in Terrakotta */
.num {
  font-size: var(--lab-quiet);
  color: var(--muted);
  margin: 0 0 var(--s3);
  display: flex;
  align-items: center;
  gap: 14px;
}
.num .n { color: var(--terra); }
.num::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hair);
  max-width: 120px;
}

/* ═══ 1 · HERO ══ Video als Grund ═══════════════════════════ */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  padding: calc(var(--head-band) + var(--s5)) var(--gutter) var(--s6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s5);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--paper);
}
.hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: saturate(0.88) contrast(0.96);
}

/* Pergament-Schleier: links dicht für den Text, rechts offen fürs Bild.
   So bleibt die Seite hell, wie im Brief verlangt, und das Video
   trägt trotzdem. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(104deg,
      rgba(var(--paper-rgb), 0.95) 0%,
      rgba(var(--paper-rgb), 0.86) 32%,
      rgba(var(--paper-rgb), 0.58) 64%,
      rgba(var(--paper-rgb), 0.44) 100%),
    linear-gradient(to bottom,
      rgba(var(--paper-rgb), 0.72) 0%,
      rgba(var(--paper-rgb), 0.30) 34%,
      rgba(var(--paper-rgb), 0.56) 78%,
      var(--paper) 100%);
}

.hero-inner { position: relative; max-width: 1180px; }

.kick { font-size: var(--lab); color: var(--muted); margin: 0 0 var(--s3); }
.hero .disp-xl { margin-bottom: var(--s4); }
.hero-body { max-width: var(--measure); }
.hero-body .prose { margin-bottom: var(--s4); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* Die Linie gehört über die volle Breite, nicht nur über die
   Vertrauenszeile — sonst bricht sie mitten im Satz ab. */
.hero-foot {
  position: relative;
  padding-top: var(--s3);
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px var(--s3);
}
.hero-trust {
  flex: 1 1 460px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(20px, 3vw, 48px);
}
.hero-trust li { font-size: var(--lab-quiet); color: var(--quiet); }

.scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--lab-quiet);
  color: var(--quiet);
  text-decoration: none;
  transition: color var(--t) var(--qnt);
}
.scroll-hint:hover { color: var(--terra); }
.scroll-hint i {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, var(--terra), transparent);
  animation: drip 2.4s var(--exp) infinite;
}
@keyframes drip {
  0%   { transform: scaleY(0.2); transform-origin: top; opacity: 0; }
  35%  { transform: scaleY(1);   transform-origin: top; opacity: 1; }
  70%  { transform: scaleY(1);   transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0.2); transform-origin: bottom; opacity: 0; }
}

/* ═══ 2 · ABLAUF ════════════════════════════════════════════ */
.ablauf-grid {
  margin-top: var(--s6);
  display: grid;
  gap: var(--s6);
}
@media (min-width: 900px) {
  .ablauf-grid {
    grid-template-columns: minmax(0, var(--measure)) minmax(280px, 1fr);
    gap: clamp(48px, 6vw, 112px);
    align-items: start;
  }
  .ablauf-fig { position: sticky; top: calc(var(--head-band) + var(--s4)); }
}

.steps { list-style: none; margin: 0; padding: 0; }
.step { padding: var(--s5) 0; border-top: 1px solid var(--hair); }
.step:first-child { padding-top: 0; border-top: 0; }
.step:last-child { padding-bottom: 0; }
.step-n { display: block; font-size: var(--lab-quiet); color: var(--terra); margin-bottom: 14px; }
.step-t {
  font-family: var(--display);
  font-weight: 500;
  font-optical-sizing: auto;
  font-variation-settings: var(--wonk);
  font-size: var(--disp-s);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--ink-disp);
  margin: 0 0 var(--s2);
}

.ablauf-fig {
  margin: 0;
  border-radius: 3px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--hair);
}
.ablauf-fig img {
  width: 100%;
  height: 100%;
  aspect-ratio: 720 / 1010;
  object-fit: cover;
  will-change: transform;
}

/* ═══ 3 · PREISE ════════════════════════════════════════════ */
.offers {
  margin-top: var(--s6);
  display: grid;
  gap: var(--s2);
}
@media (min-width: 900px) { .offers { grid-template-columns: repeat(3, 1fr); } }

.offer {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 3px;
  padding: clamp(28px, 2.6vw, 44px);
  display: flex;
  flex-direction: column;
}
.offer-lead { border-color: var(--hair-strong); }

.offer-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: var(--s2);
  margin-bottom: var(--s2);
  border-bottom: 1px solid var(--hair);
}
.offer-t {
  font-family: var(--display);
  font-weight: 600;
  font-optical-sizing: auto;
  font-variation-settings: var(--wonk);
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--ink-disp);
  margin: 0;
}
.offer-price { margin: 0; }
.offer-price .amt {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-optical-sizing: auto;
  font-variation-settings: var(--wonk);
  font-size: clamp(25px, 2.1vw, 32px);
  line-height: 1.05;
  color: var(--ink-disp);
}
.offer-price .cond { display: block; font-size: var(--lab-quiet); color: var(--muted); margin-top: 7px; }
.offer-flag { margin: var(--s2) 0 0; font-size: var(--lab-quiet); color: var(--terra); }

.offers-note {
  margin: var(--s5) 0 0;
  max-width: var(--measure);
  color: var(--muted);
  font-size: var(--cap);
}

/* ═══ 4 · ANFRAGE ═══════════════════════════════════════════ */
.close { position: relative; }

.close-media {
  position: relative;
  height: 58svh;
  min-height: 380px;
  overflow: hidden;
  background: var(--ink-disp);
}
.close-media img {
  width: 100%;
  height: 116%;
  margin-top: -8%;
  object-fit: cover;
  object-position: center 42%;
  will-change: transform;
}
.close-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(36, 26, 16, 0.22) 0%,
    rgba(36, 26, 16, 0.02) 24%,
    rgba(var(--paper-rgb), 0.34) 68%,
    var(--paper) 100%);
}

.close-in {
  max-width: calc(var(--wide) + var(--gutter) * 2);
  margin: 0 auto;
  padding: var(--s9) var(--gutter) var(--s11);
}

.close-grid {
  margin-top: var(--s6);
  display: grid;
  gap: var(--s8);
}
@media (min-width: 900px) {
  .close-grid {
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(48px, 6vw, 104px);
    align-items: start;
  }
}

.close-side .prose-lead { margin-bottom: var(--s2); }
.close-side .prose-s { color: var(--muted); }

.facts { margin: var(--s4) 0 0; }
.facts > div { padding: 13px 0; border-top: 1px solid var(--hair); }
.facts > div:last-child { border-bottom: 1px solid var(--hair); }
.facts dt { font-size: var(--lab-quiet); color: var(--muted); margin-bottom: 5px; }
.facts dd {
  margin: 0;
  font-family: 'Cormorant', Georgia, serif;
  font-size: var(--cap);
  line-height: 1.45;
  color: var(--ink);
}

/* ── Formular ───────────────────────────────────────────── */
.form-intro { margin-bottom: var(--s5); color: var(--muted); }

.f-grid { display: grid; gap: var(--s3); }
@media (min-width: 620px) { .f-grid { grid-template-columns: 1fr 1fr; } }
.f { margin: 0; display: flex; flex-direction: column; gap: 9px; }
.f-full { grid-column: 1 / -1; }
.f label.lab { color: var(--muted); font-size: var(--lab-sm); }
.req { color: var(--terra); }

input[type="text"], input[type="email"], input[type="date"], select, textarea {
  font-family: 'Cormorant', Georgia, serif;
  font-size: var(--cap);
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 3px;
  padding: 14px 16px;
  width: 100%;
  transition: border-color var(--t) var(--qnt), background-color var(--t) var(--qnt);
}
textarea { resize: vertical; min-height: 110px; }
input:hover, select:hover, textarea:hover { border-color: var(--hair-strong); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--terra); background: #fff; }
input.is-bad, select.is-bad, textarea.is-bad { border-color: var(--terra); background: var(--terra-tint); }
::placeholder { color: var(--disabled); }

/* Spam-Falle — nicht display:none, das überspringen viele Bots */
.honey {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.f-check { margin-top: var(--s1); }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.check input { width: 17px; height: 17px; margin: 4px 0 0; accent-color: var(--terra); flex: none; }
.check .prose-s { font-size: var(--cap); color: var(--muted); }

.f-submit {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}
.form-msg {
  margin: 0;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: var(--lab-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terra);
  min-height: 1em;
}
.form-msg.is-ok { color: var(--muted); }

/* ── Karten reagieren auf den Zeiger ────────────────────── */
[data-tilt] { transition: transform 0.5s var(--qnt), border-color 0.5s var(--qnt); }
[data-tilt]:hover { border-color: var(--hair-strong); }

/* ── Fußzeile ───────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--hair); padding: var(--s6) var(--gutter); }
.foot-in {
  max-width: var(--wide);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px var(--s4);
}
.foot-in p { margin: 0; font-size: var(--lab-quiet); color: var(--quiet); }
.foot-nav { display: flex; gap: var(--s3); }
.foot-nav a {
  font-size: var(--lab-quiet);
  color: var(--quiet);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--hair-strong);
  transition: color var(--t) var(--qnt), text-decoration-color var(--t) var(--qnt);
}
.foot-nav a:hover { text-decoration-color: currentColor; }
.foot-nav a:hover { color: var(--ink); }

/* ── Rechtsseiten ───────────────────────────────────────── */
.legal {
  max-width: calc(760px + var(--gutter) * 2);
  margin: 0 auto;
  padding: calc(var(--head-band) + var(--s8)) var(--gutter) var(--s11);
}
.legal .disp-l { margin-bottom: var(--s5); }
.legal-body { max-width: 68ch; }

.legal-h {
  font-family: var(--display);
  font-weight: 600;
  font-optical-sizing: auto;
  font-variation-settings: var(--wonk);
  font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.25;
  color: var(--ink-disp);
  margin: var(--s6) 0 var(--s2);
}
.legal-h:first-of-type { margin-top: var(--s5); }

.legal-body .prose-s { margin-bottom: var(--s2); }
.legal-body strong { font-weight: 600; color: var(--terra-deep); }

.legal-list { margin: 0 0 var(--s2); padding-left: 1.25em; }
.legal-list li { margin-bottom: 6px; }

.legal-note {
  background: var(--terra-tint);
  border: 1px solid rgba(156, 74, 47, 0.28);
  border-radius: 3px;
  padding: var(--s3);
  margin-bottom: var(--s5);
}
.legal-note .lab { color: var(--terra); margin: 0 0 8px; }
.legal-note .prose-s { margin: 0; color: var(--prose); }

.legal-hint {
  border-left: 2px solid var(--hair-strong);
  padding-left: var(--s2);
  color: var(--muted);
  font-size: var(--cap);
}
.legal-meta { margin-top: var(--s6); color: var(--muted); font-size: var(--cap); }

/* ═══ Bewegung ══════════════════════════════════════════════
   Nur transform und opacity. Nichts schwingt über.           */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--exp), transform 0.75s var(--exp);
  transition-delay: var(--d, 0ms);
  will-change: transform;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Wortweiser Auftritt — nicht buchstabenweise, das ist deutlich ruhiger */
.word { display: inline-block; overflow: hidden; vertical-align: top; }
.word > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 0.9s var(--exp);
  transition-delay: var(--d, 0ms);
  will-change: transform;
}
.is-in .word > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .word > span { transform: none; transition: none; }
  .scroll-hint i { animation: none; opacity: 0.7; }
  .ablauf-fig img, .close-media img { transform: none !important; }
  [data-tilt] { transform: none !important; }
  .progress span { transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Schmale Viewports ──────────────────────────────────── */
@media (max-width: 899px) {
  .ablauf-fig img { aspect-ratio: 4 / 3; }
}
@media (max-width: 720px) {
  :root { --head-band: 62px; }
  .h-link { display: none; }
  .hero { padding-top: calc(var(--head-band) + var(--s5)); }
  .hero-trust { gap: 10px 20px; }
  .btn-row .btn { flex: 1 1 100%; }
  .scroll-hint { display: none; }
  .close-media { height: 44svh; min-height: 280px; }
  .f-submit { flex-direction: column; align-items: stretch; }
  .f-submit .btn { width: 100%; }
  /* Der Schleier muss auf Hochformat von oben nach unten tragen,
     nicht von links nach rechts. */
  .hero-scrim {
    background: linear-gradient(to bottom,
      rgba(var(--paper-rgb), 0.92) 0%,
      rgba(var(--paper-rgb), 0.90) 40%,
      rgba(var(--paper-rgb), 0.86) 74%,
      var(--paper) 100%);
  }
}