/* ==========================================================================
   LA Department, landing.css
   Eigenes, helles Design-System nur für die Startseite. Bewusst getrennt von
   style.css: die Unterseiten behalten vorerst die dunkle Sprache, und die
   Vorher/Nachher-Demo bringt ihre eigenen Tokens mit (demo.css).

   Haltung: hell, warm, viel Luft, wenige große Gedanken. Bewegung ist
   langsam und schwer statt vielteilig — das ist es, was teuer aussieht,
   nicht die Farben.
   ========================================================================== */

/* ---------- Schriften. Lokal, keine externen Requests. ---------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }

/* ---------- Tokens ----------
   Kontraste gegen --bone gemessen:
   --ink        16.4:1
   --ink-soft    7.1:1
   --ink-faint   4.6:1  (nur für Kleinstlabels, nie für Fließtext)
   --wine        6.3:1  (dunkler als das Weinrot der dunklen Fassung, sonst
                         fällt es auf hellem Grund unter 4.5:1)          */
:root {
  --bone: #f2efe9;
  --bone-warm: #e9e4db;
  --card: #ffffff;

  --ink: #14120f;
  --ink-soft: rgba(20, 18, 15, 0.66);
  --ink-faint: rgba(20, 18, 15, 0.46);
  --line: rgba(20, 18, 15, 0.12);
  --line-soft: rgba(20, 18, 15, 0.07);

  --wine: #a02c42;
  --wine-deep: #7d2033;

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-lg: 28px;
  --r-xl: 44px;

  /* Langsam und schwer. Nichts hier unter 0.5s. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.9s;
  --dur-fast: 0.4s;

  --gutter: clamp(22px, 6vw, 110px);
  --luft: clamp(96px, 17vh, 210px);
}

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

body {
  font-family: var(--font-display);
  font-variation-settings: "wght" 400, "wdth" 100;
  background: var(--bone);
  color: var(--ink);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
/* Ziele des Sprunglinks bekommen per Skript tabindex="-1", damit der Fokus
   mitwandert. Einen Rahmen um den ganzen Inhaltsbereich braucht es dafuer
   nicht. */
[tabindex="-1"]:focus { outline: none; }

.skip-link {
  position: absolute; left: 12px; top: 12px; z-index: 200;
  background: var(--ink); color: var(--bone); padding: 12px 20px; font-size: 0.9rem;
  /* Weggeschnitten statt nach links außerhalb geschoben. Ein Element auf
     -9999px spannt bei overflow-x: hidden am body Nebenwirkungen auf. */
  clip-path: inset(50%);
  width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  clip-path: none;
  width: auto; height: auto; overflow: visible;
}

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

/* ---------- Typo ----------
   Gemischte Groß- und Kleinschreibung, mittlere Stärke, negatives
   Buchstabenspationierung. Die dunkle Fassung schrie in Versalien; hier
   spricht die Seite leise und wird dadurch größer. */
.gross {
  font-variation-settings: "wght" 560, "wdth" 100;
  line-height: 0.98;
  letter-spacing: -0.033em;
  text-wrap: balance;
}
/* Längste Zeile dieser Klasse ist "Du lieferst nichts." mit rund 9.1em.
   Nutzbar sind 100vw minus 2x --gutter, im Maximum also etwa 88vw.
   88 / 9.1 = 9.6vw Spielraum, 8.8vw hält Abstand. */
.gross-xl { font-size: clamp(2.6rem, 8.8vw, 8.2rem); }
.gross-l  { font-size: clamp(2.1rem, 5.6vw, 5rem); }
.gross-m  { font-size: clamp(1.5rem, 2.9vw, 2.5rem); letter-spacing: -0.022em; line-height: 1.06; }

.lede {
  font-size: clamp(1.08rem, 1.5vw, 1.42rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 40ch;
  font-variation-settings: "wght" 400, "wdth" 100;
}

.fliess {
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 1.68;
  color: var(--ink-soft);
  max-width: 54ch;
}

.mini {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.akzent { color: var(--wine); }

/* Fußnote: klein, aber ein Satz. Deshalb ohne Versalien und ohne Sperrung. */
.fussnote {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

/* ---------- Vorhang: das Intro vor der Seite ----------
   Die Klassennamen sind doppelt vergeben (.vorhang und .preloader), weil
   js/main.js die englischen Namen sucht. Eine Umbenennung dort träfe auch
   die alte dunkle Fassung. */
.vorhang {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bone);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  /* Der Vorhang fährt nach oben weg und darf dabei nichts überstehen lassen. */
  overflow: hidden;
}

/* Ohne JavaScript entfernt ihn niemand wieder. Dann gibt es ihn gar nicht. */
.no-js .vorhang { display: none; }

body.is-loading { overflow: hidden; }

.vorhang__wort {
  /* Die Maske sitzt hier, das Wort darin fährt herauf. */
  overflow: hidden;
  line-height: 0.9;
}
.vorhang__wort span {
  display: block;
  font-variation-settings: "wght" 680, "wdth" 92;
  font-size: clamp(2.2rem, 7.4vw, 6.4rem);
  letter-spacing: -0.035em;
  color: var(--ink);
}

.vorhang__zahl {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(26px, 5vh, 54px);
  font-family: var(--font-mono);
  font-size: clamp(2.4rem, 7vw, 5rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--wine);
}

@media (max-width: 620px) {
  .vorhang { justify-content: flex-end; padding-bottom: clamp(120px, 26vh, 200px); }
}

/* ---------- Navigation. Schwebt, wird beim Scrollen zur Kapsel. ---------- */
.kopf {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  padding: clamp(14px, 2vh, 26px) 0;
  transition: background var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
}
.kopf.ist-geklebt {
  background: rgba(242, 239, 233, 0.82);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--line-soft);
}
.kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.marke {
  font-variation-settings: "wght" 700, "wdth" 104;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

.kopf__links { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 38px); }
.kopf__links a {
  font-family: var(--font-mono);
  font-size: 0.78rem; /* 12.5px. Darunter wird gesperrte Versalschrift zäh. */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color var(--dur-fast) var(--ease);
}
.kopf__links a:hover { color: var(--ink); }

/* Der Knopf steht in derselben Liste und würde sonst die Linkfarbe erben,
   also dunkle Schrift auf dunklem Grund. */
.kopf__links a.knopf,
.kopf__links a.knopf:hover { color: var(--bone); }

/* ---------- Knopf ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 17px 32px;
  border-radius: 999px;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.knopf:hover { background: var(--wine); transform: translateY(-2px); }
.knopf:active { transform: scale(0.985); }

.leise {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.leise:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- Abschnitte. Ein Gedanke pro Bildschirm. ---------- */
.feld { padding-block: var(--luft); }
.feld--eng { padding-block: calc(var(--luft) * 0.55); }

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(60px, 12vh, 150px);
  padding-top: clamp(120px, 18vh, 220px);
  position: relative;
}

/* Ein einziger, sehr weicher Farbschleier. Kein Spotlight-Kreis, sondern
   eine Kante Wärme, die den Blick nach oben rechts zieht. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(160, 44, 66, 0.07) 0%, rgba(160, 44, 66, 0) 46%),
    linear-gradient(to bottom, var(--bone-warm) 0%, var(--bone) 62%);
  z-index: -1;
}

.hero__zeile {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: clamp(26px, 4vh, 46px);
}
.hero__zeile span { white-space: nowrap; }
.hero__strich { flex: 1; height: 1px; background: var(--line); }

.hero__aktion {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  flex-wrap: wrap;
  margin-top: clamp(34px, 6vh, 66px);
}

/* ---------- Aussage: eine große Zeile, sonst nichts ---------- */
.aussage {
  background: var(--bone-warm);
  border-radius: var(--r-xl);
  padding: clamp(48px, 9vh, 130px) clamp(28px, 5vw, 96px);
}
.aussage p { max-width: 20ch; }

/* ---------- Leistung: vier ruhige Flächen ---------- */
.karten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 26px);
}

.karte {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: clamp(30px, 3.4vw, 54px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: clamp(240px, 26vw, 340px);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .karte:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(20, 18, 15, 0.09);
  }
}

.karte__nr { color: var(--wine); }
.karte h3 {
  font-variation-settings: "wght" 600, "wdth" 100;
  font-size: clamp(1.28rem, 1.9vw, 1.75rem);
  letter-spacing: -0.02em;
  margin-top: auto;
}
.karte p { color: var(--ink-soft); font-size: 1rem; line-height: 1.6; max-width: 34ch; }

/* ---------- Ablauf: nummerierte Zeilen mit viel Luft ---------- */
.schritt {
  display: grid;
  grid-template-columns: clamp(56px, 7vw, 110px) minmax(0, 1fr);
  gap: clamp(18px, 4vw, 70px);
  padding-block: clamp(34px, 5vh, 68px);
  border-top: 1px solid var(--line-soft);
  align-items: start;
}
.schritt:last-child { border-bottom: 1px solid var(--line-soft); }
.schritt__nr { color: var(--wine); padding-top: 0.5em; }
.schritt h3 {
  font-variation-settings: "wght" 560, "wdth" 100;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  letter-spacing: -0.026em;
  line-height: 1.04;
  margin-bottom: 14px;
}

/* ---------- Zweispalter ---------- */
.zwei {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 6vw, 110px);
  align-items: start;
}

/* ---------- 3D-Bühne, hell eingefasst ---------- */
.buehne {
  position: relative;
  width: 100%;
  /* Nie hoeher als der Bildschirm abzueglich Kopfzeile: die Buehne wird
     mittig angeheftet, und ein Rest unter dem Rand bliebe beim Scrollen
     unsichtbar. Das trifft vor allem Telefone im Querformat. */
  /* Rueckfall fuer Browser ohne svh (Safari vor iOS 15.4): dort wuerde die
     ganze Zeile darunter verworfen, die Buehne haette keine feste Hoehe,
     und die Szene misst ihre Leinwand aus genau dieser Hoehe. */
  height: min(clamp(380px, 58vh, 620px), calc(100vh - 110px));
  height: min(clamp(380px, 58svh, 620px), calc(100svh - 110px));
  /* Leichter Lichtabfall zu den Rändern, damit das Modell auf etwas steht
     und nicht in einem leeren Rechteck schwebt. */
  background:
    radial-gradient(120% 90% at 50% 34%, #ece6dc 0%, #e0d9cd 58%, #cec6b8 100%);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.buehne__canvas { width: 100%; height: 100%; }

.buehne__hinweis {
  position: absolute;
  left: clamp(20px, 3vw, 42px);
  bottom: clamp(18px, 2.4vw, 34px);
  font-family: var(--font-mono);
  font-size: 0.72rem; /* 11.5px, nicht darunter. */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: opacity var(--dur) var(--ease);
}
.buehne.is-offen .buehne__hinweis { opacity: 0; }

.buehne__marken { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.szene__label {
  position: absolute;
  top: 0; left: 0;
  width: max-content;
  max-width: 15rem;
  padding-left: 34px;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
  will-change: transform;
}
.szene__label.is-on { opacity: 1; }
.szene__label.is-links {
  padding-left: 0; padding-right: 34px; text-align: right; translate: -100% 0;
}
.szene__label.is-oben { translate: 0 -100%; }
.szene__label.is-links.is-oben { translate: -100% -100%; }
.szene__label-line {
  position: absolute; left: 0; top: 0.62em;
  width: 26px; height: 1px; background: var(--wine);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur-fast) var(--ease) 0.06s;
}
.szene__label.is-on .szene__label-line { transform: scaleX(1); }
.szene__label.is-links .szene__label-line { left: auto; right: 0; transform-origin: 100% 50%; }
.szene__label-line::before {
  content: ""; position: absolute; left: -3px; top: -2px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--wine);
}
.szene__label.is-links .szene__label-line::before { left: auto; right: -3px; }
.szene__label-text {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem; /* 11.5px. Darunter ist gesperrte Versalschrift Deko. */
  line-height: 1.55;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.szene__label-text b {
  display: block; margin-top: 3px;
  font-size: 0.8rem;
  font-weight: 600; letter-spacing: 0.06em; color: var(--ink);
}

/* ---------- Demo-Rahmen ---------- */
.vergleich__rahmen {
  background: var(--bone-warm);
  border-radius: var(--r-xl);
  padding: clamp(24px, 4vw, 72px);
}
.vergleich__rahmen .demo { max-width: min(1000px, 100%); margin-inline: auto; margin-top: 0; }

/* ---------- Abschluss ---------- */
.schluss {
  background: var(--ink);
  color: var(--bone);
  border-radius: var(--r-xl);
  padding: clamp(52px, 10vh, 140px) clamp(28px, 5vw, 96px);
}
.schluss .lede { color: rgba(242, 239, 233, 0.72); }
.schluss .knopf { background: var(--bone); color: var(--ink); }
.schluss .knopf:hover { background: var(--wine); color: var(--bone); }

/* ---------- Fuß ---------- */
.fuss { padding-block: clamp(46px, 7vh, 90px); border-top: 1px solid var(--line-soft); }
.fuss__oben {
  display: flex; flex-wrap: wrap; gap: clamp(26px, 5vw, 80px);
  justify-content: space-between; margin-bottom: clamp(34px, 5vh, 60px);
}
.fuss__spalte { display: grid; gap: 10px; align-content: start; }
.fuss__spalte h2 { margin-bottom: 4px; }
.fuss__spalte a, .fuss__spalte span { color: var(--ink-soft); font-size: 0.96rem; }
.fuss__spalte a:hover { color: var(--wine); }
.fuss__unten {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  padding-top: clamp(22px, 3vh, 34px); border-top: 1px solid var(--line-soft);
}
/* Nicht unter 11px: das sind anklickbare Links, kein Kleingedrucktes. */
.fuss__unten, .fuss__unten a { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.02em; color: var(--ink-soft); }
/* Versalien nur auf den beiden Rechtslinks. Die Zeile daneben ist ein Satz
   mit Namen und Anschrift und liest sich gesperrt in Großbuchstaben zäh. */
.fuss__recht a { text-transform: uppercase; letter-spacing: 0.1em; }
.fuss__unten a:hover { color: var(--ink); }
.fuss__recht { display: flex; gap: 22px; }

/* ---------- Website-Check: das Gratis-Angebot ----------
   Dieselbe warme Flaeche wie die Aussage oben, damit es sich als Teil der
   Seite liest und nicht als eingeschobenes Werbebanner. Die Felder sind
   weiss und stehen damit sichtbar auf der Flaeche. */
.check {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
  background: var(--bone-warm);
  border-radius: var(--r-xl);
  padding: clamp(28px, 5vw, 80px) clamp(22px, 5vw, 80px);
}
.check__text .fliess { max-width: 44ch; }
.check__punkte {
  list-style: none;
  margin-top: clamp(22px, 3.5vh, 34px);
  border-top: 1px solid var(--line);
}
.check__punkte li {
  padding: 13px 0 13px 26px;
  border-bottom: 1px solid var(--line);
  position: relative;
  color: var(--ink);
  font-size: 0.98rem;
}
/* Ein kurzer Strich in Weinrot statt Haken-Symbol. */
.check__punkte li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 12px; height: 2px;
  background: var(--wine);
}
.feldhinweis {
  margin-top: 8px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.optional {
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  margin-left: 6px;
}
@media (max-width: 900px) {
  .check { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Formulare (Kontakt und Website-Check) ---------- */
.feldpaar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}

.feldchen { margin-bottom: clamp(22px, 3vh, 34px); }

.feldchen label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.feldchen input,
.feldchen textarea {
  width: 100%;
  font: inherit;
  font-size: 1.02rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.feldchen textarea { min-height: 190px; resize: vertical; line-height: 1.55; }

.feldchen input::placeholder,
.feldchen textarea::placeholder { color: var(--ink-faint); }

.feldchen input:focus,
.feldchen textarea:focus {
  outline: none;
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgba(160, 44, 66, 0.14);
}

/* Honigtopf. Bots füllen ihn, Menschen sehen ihn nie. */
.honig {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; overflow: hidden;
  clip-path: inset(50%);
}

.einwilligung {
  max-width: 54ch;
  margin-bottom: clamp(26px, 3.5vh, 38px);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.einwilligung a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.status {
  margin-top: 20px;
  max-width: 52ch;
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.status.ist-sichtbar { opacity: 1; }
.status.ist-gut { color: var(--ink); }
.status.ist-schlecht { color: var(--wine-deep); }
.status__link {
  display: inline-block;
  color: var(--wine);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 560px) {
  .feldpaar { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Standbild in der Buehne ----------
   Die Buehne ist immer sichtbar. Bis die Szene ihr erstes Bild gezeichnet hat
   (is-ready), und wieder, wenn sie nicht zeichnen kann, steht dieses Bild
   darin. Die Leinwand liegt darueber und ist bis dahin durchsichtig. */
.buehne__standbild {
  /* Das Bild ist auf das Modell zugeschnitten. Auf breiten Buehnen begrenzt
     die Hoehe: 58 % der Buehnenhoehe entsprechen der Groesse des Modells
     live. Auf Telefonen im Hochformat begrenzt die Breite: 90 %, statt als
     halbe Briefmarke in einer leeren Flaeche zu stehen. */
  position: absolute;
  inset: 21% 5%;
  display: block;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.buehne__standbild img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.buehne__canvas { position: relative; }
.buehne.is-ready .buehne__standbild { opacity: 0; }

/* Beschriftungen und der Hinweis "Scrollen" gehoeren zur laufenden Szene.
   Ueber dem Standbild (kein WebGL, Kontext verloren, kein JS) zeigten sie
   an veralteten Stellen auf etwas, das sich nicht bewegt. */
:root:not(.hat-szene) .buehne__marken,
:root:not(.hat-szene) .buehne__hinweis { display: none; }

/* Der Absatz ueber der Buehne verspricht Bewegung nur, wenn die Szene laeuft.
   hat-szene setzt szenen.js erst, wenn die Buehne wirklich zeichnet, und
   nimmt sie bei einem Kontextverlust wieder weg. */
.mit-szene { display: none; }
.ohne-szene { display: inline; }
.hat-szene .mit-szene { display: inline; }
.hat-szene .ohne-szene { display: none; }

/* Im Hochformat hoeher als breit: die Beschriftungen stehen ueber und unter
   dem Modell, dort ist auf dem Telefon der Platz. */
@media (max-width: 620px) {
  .buehne {
    height: min(clamp(400px, 56vh, 520px), calc(100vh - 110px));
    height: min(clamp(400px, 56svh, 520px), calc(100svh - 110px));
  }
  .szene__label { max-width: 12rem; }
}

/* ---------- Bewegung: langsam, schwer, einmalig ---------- */
.steigt { opacity: 0; transform: translateY(26px); }
.steigt.ist-da {
  opacity: 1; transform: none;
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.no-js .steigt { opacity: 1; transform: none; }

/* ---------- Schmale Fenster ---------- */
@media (max-width: 900px) {
  .karten { grid-template-columns: minmax(0, 1fr); }
  .zwei { grid-template-columns: minmax(0, 1fr); }
  .kopf__links a:not(.knopf) { display: none; }
}

@media (max-width: 620px) {
  /* Bildschirmhoch mit Inhalt am unteren Rand funktioniert am Schreibtisch.
     Auf dem Telefon scrollt man dann erst an einer leeren Fläche vorbei,
     bevor die Überschrift kommt. */
  .hero { min-height: 0; padding-top: clamp(118px, 20vh, 170px); }
  .hero__zeile { flex-wrap: wrap; }
  /* Der Rahmen nahm dem Geraet 48 von 375 Pixeln. Die zwei Seiten im
     Laptop leben davon, so gross wie moeglich zu sein. */
  .vergleich__rahmen { padding: 16px 10px; border-radius: var(--r-lg); }
  .schritt { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .schritt__nr { padding-top: 0; }
}

/* ---------- Fingerbedienung ----------
   Gemessen auf dem Telefon: Fusszeilenlinks 23px hoch, die Rechtslinks 18px,
   die Navigation 19px. Das trifft man nicht zuverlaessig. Die Ziele werden
   auf rund 44px gebracht und behalten Abstand zueinander, statt sich per
   negativem Aussenabstand zu ueberlappen. */
@media (pointer: coarse) {
  .kopf__links a:not(.knopf) { padding-block: 13px; }
  .leise { padding-block: 13px; }
  /* Die Marke oben links ist ein Link zur Startseite und war 24px hoch. */
  .marke { display: inline-block; padding-block: 10px; }

  .fuss__spalte { gap: 2px; }
  .fuss__spalte a { padding-block: 11px; }
  .fuss__spalte h2 { margin-bottom: 8px; }

  .fuss__unten { gap: 4px 18px; }
  .fuss__unten a { padding-block: 13px; }
  .fuss__recht { gap: 18px; }

  /* Kleine Versalschrift wird auf dem Telefon schnell zum Muster statt zum
     Wort. Eine Spur groesser, die Sperrung bleibt. */
  .mini { font-size: 0.76rem; }
  .knopf { font-size: 0.78rem; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .steigt { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}