/* ═══════════════════════════════════════════════════════════════════════
   IT-CHECK — Fassung 3

   Farben aus den fertigen Filmbildern gemessen (siehe DREHBUCH.md).
   Schriftskala mit Faktor 1,25 pro Stufe — neue Werte nur aus dieser Reihe:
     0.8rem 12,8px · 1rem 16px · 1.25rem 20px · 1.563rem 25px
     1.953rem 31px · 2.441rem 39px · 3.052rem 49px
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --grund: #080c16;
  --grund-2: #101724;
  --rand: #26303f;

  --papier: #c7b68d;
  --papier-hell: #ddd0ae;
  --papier-tief: #a89877;
  --auf-papier: #2a2418;
  --auf-papier-2: #4a4133;

  --gruen: #9ec72c;
  --gruen-hell: #b3d94a;
  --auf-gruen: #131a07;

  --text: #e8ecf2;
  --text-2: #98a6ba;
  --text-3: #7b8aa0;

  --note-a: #34c26b;
  --note-b: #9ec72c;
  --note-c: #eab308;
  --note-d: #f97316;
  --note-e: #ef4444;
  /* mit dem Papier vorgemischt statt per opacity gedämpft — opacity zieht die
     Ziffer mit ins Papier und drückt den Kontrast unter 3:1 */
  --note-a-still: #7ebc7c;
  --note-b-still: #b2be5c;
  --note-c-still: #d8b44a;
  --note-d-still: #e09452;
  --note-e-still: #db7d68;

  --schrift: system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", Roboto, sans-serif;
  /* Verdana setzt die Karten und Chips IM FILM — dieselbe Schrift, ohne
     Drittanbieter und damit ohne DSGVO-Frage. */
  --marke: Verdana, "DejaVu Sans", Geneva, sans-serif;

  --spalte: 1180px;
}

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

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--gruen);
}
:focus-visible {
  outline: 2px solid var(--gruen);
  outline-offset: 3px;
}
.versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Sprungmarke für Tastaturnutzer — sichtbar, sobald sie den Fokus bekommt */
.sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gruen);
  color: var(--auf-gruen);
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 7px 0;
  font-weight: 600;
}
.sprung:focus {
  left: 0;
}

/* ── Kopf ─────────────────────────────────────────────────────────────── */
.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem clamp(1rem, 4vw, 2.5rem);
  /* Voll deckend. Bei 0,97 schimmerte der durchlaufende Text hinter der
     Leiste durch — auf fast jedem Bildschirm sichtbar. Kein backdrop-filter:
     das Nachblurren bei jedem Scrollschritt kostete rund 7 Bilder/s. */
  background: var(--grund);
  border-bottom: 1px solid var(--rand);
}
.marke {
  font-family: var(--marke);
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 1rem;
  color: var(--text);
  text-decoration: none;
}
.marke .gruen {
  color: var(--gruen);
}
.kopf nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.kopf nav a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 1rem;
}
/* :not(.knopf) — sonst färbt diese Regel beim Überfahren auch den grünen
   Knopf hell: Klasse+Element schlägt eine Klasse allein. */
.kopf nav a:not(.knopf):hover {
  color: var(--text);
}
@media (max-width: 940px) {
  .kopf nav a:not(.knopf) {
    display: none;
  }
}

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.4rem;
  border-radius: 7px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}
.knopf.voll {
  background: var(--gruen);
  color: var(--auf-gruen);
}
.knopf.voll:hover {
  background: var(--gruen-hell);
}
.knopf.leer {
  border-color: var(--rand);
  color: var(--text);
}
.knopf.leer:hover {
  border-color: var(--gruen);
}
.knopf:active {
  transform: translateY(1px);
}
.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.8rem;
}

/* ── Abschnittsgrundform ──────────────────────────────────────────────── */
.teil {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: clamp(4rem, 9vh, 7rem) clamp(1.2rem, 4vw, 2rem);
}
.kopfzeile {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
h1 {
  font-size: clamp(2.441rem, 1.4rem + 2.2vw, 3.052rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 1.2rem;
  text-wrap: balance;
}
h1 .gruen {
  color: var(--gruen);
}
h2 {
  font-size: clamp(1.563rem, 1.1rem + 1.8vw, 2.441rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.8rem;
  text-wrap: balance;
}
h3 {
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
}
p {
  margin: 0 0 1rem;
  color: var(--text-2);
}
p:last-child {
  margin-bottom: 0;
}
.unter {
  color: var(--text-2);
  max-width: 58ch;
}
.gross {
  font-size: 1.25rem;
}

/* ── Hero ─────────────────────────────────────────────────────────────
   Text links, Film rechts. Der Film behält sein Format: 16:9, nicht
   beschnitten. Vorher lag er als Streifen über die volle Breite und verlor
   beim Abspielen 48 % der Bildhöhe. */
.hero {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.6rem) clamp(1.2rem, 4vw, 2rem) clamp(3rem, 6vw, 4.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: center;
}
.hero-text {
  max-width: 34rem;
}

.hero-film {
  margin: 0;
}
.film {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--rand);
  background: #000;
  /* Das Format des Films, nicht das des Layouts. */
  aspect-ratio: 16 / 9;
  width: 100%;
}
.film img,
.film video {
  width: 100%;
  height: 100%;
  /* contain, nicht cover: lieber Ränder als ein beschnittenes Bild. */
  object-fit: contain;
  background: #000;
}
/* Kein Verlauf über die ganze Fläche — der ließ das Standbild wie ein
   billiges Vorschaubild wirken. Nur der Knopf, mittig. */
.film-start {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  transition: background 0.25s ease;
}
.film-start:hover {
  background: rgb(8 12 22 / 0.2);
}
.film-start .kreis {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgb(8 12 22 / 0.72);
  border: 2px solid var(--gruen);
  color: var(--gruen);
  display: grid;
  place-items: center;
  font-size: 1.563rem;
  padding-left: 5px;
  transition: transform 0.2s ease, background 0.2s ease;
}
.film-start:hover .kreis {
  transform: scale(1.06);
  background: var(--gruen);
  color: var(--auf-gruen);
}
.hero-film figcaption {
  margin-top: 0.8rem;
  font-size: 0.8rem;
  color: var(--text-3);
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}
.dauer {
  font-family: var(--marke);
  font-weight: 700;
  color: var(--gruen);
  border: 1px solid var(--rand);
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
}

/* ── Papierkarte: das Leitmotiv aus dem Film ──────────────────────────── */
.befund-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: start;
}
.papier {
  background: var(--papier);
  background-image: linear-gradient(160deg, var(--papier-hell), var(--papier) 45%, var(--papier-tief));
  color: var(--auf-papier);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  max-width: 25rem;
  box-shadow: 0 18px 44px rgb(0 0 0 / 0.45);
}
/* Das Korn aus dem Film. Reine Deckkraft statt mix-blend-mode: der
   Mischmodus erzwingt in jedem Bild eine Neuberechnung (rund 11 Bilder/s). */
.papier::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.11;
  pointer-events: none;
}
.papier-kopf {
  background: var(--gruen);
  height: 10px;
  position: relative;
}
.papier-inhalt {
  padding: 1.6rem 1.7rem 1.8rem;
  position: relative;
}
.papier h3 {
  font-family: var(--marke);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 1rem;
  margin: 0 0 0.25rem;
}
.papier .klein {
  color: var(--auf-papier-2);
  font-size: 0.8rem;
  margin: 0 0 1.4rem;
}
.feld {
  font-family: var(--marke);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--auf-papier-2);
  margin: 0 0 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgb(42 36 24 / 0.22);
}

.noten {
  display: flex;
  gap: 6px;
  margin: 0 0 0.5rem;
}
.note {
  width: 36px;
  height: 36px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  font-family: var(--marke);
  font-weight: 700;
  font-size: 1rem;
  /* dunkel: Weiß trug auf Gelb nur 1,2:1 */
  color: #1a1508;
}
.note.a { background: var(--note-a); }
.note.b { background: var(--note-b); }
.note.c { background: var(--note-c); }
.note.d { background: var(--note-d); }
.note.e { background: var(--note-e); }
.note:not(.aktiv).a { background: var(--note-a-still); }
.note:not(.aktiv).b { background: var(--note-b-still); }
.note:not(.aktiv).c { background: var(--note-c-still); }
.note:not(.aktiv).d { background: var(--note-d-still); }
.note:not(.aktiv).e { background: var(--note-e-still); }
.note.aktiv {
  outline: 2px solid var(--auf-papier);
  outline-offset: 2px;
}
.noten-legende {
  font-size: 0.8rem;
  color: var(--auf-papier-2);
  margin: 0 0 1.6rem;
}

.bereiche {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.6rem;
  font-size: 1rem;
}
.bereiche th {
  text-align: left;
  font-weight: 400;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgb(42 36 24 / 0.12);
}
.bereiche td {
  text-align: right;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgb(42 36 24 / 0.12);
}
.bereiche tr:last-child th,
.bereiche tr:last-child td {
  border-bottom: 0;
}
.mini {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  font-family: var(--marke);
  font-weight: 700;
  font-size: 0.8rem;
  color: #1a1508;
}
.mini.a { background: var(--note-a); }
.mini.b { background: var(--note-b); }
.mini.c { background: var(--note-c); }
.mini.d { background: var(--note-d); }
.mini.e { background: var(--note-e); }

.plan {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.plan li {
  position: relative;
  padding-left: 1.7rem;
  font-size: 1rem;
}
.plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gruen);
  border: 2px solid rgb(42 36 24 / 0.35);
}

/* ── Listen mit Trennlinien statt Karten ─────────────────────────────── */
.liste {
  margin: 0;
  align-self: start;
}
.liste > div {
  padding: 1.15rem 0;
  border-top: 1px solid var(--rand);
}
.liste > div:last-child {
  border-bottom: 1px solid var(--rand);
}
.liste dt {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.liste dd {
  margin: 0;
  color: var(--text-2);
  font-size: 1rem;
  max-width: 54ch;
}
.liste.zweispaltig {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  column-gap: clamp(1.6rem, 4vw, 3rem);
}

.haken {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.haken li {
  position: relative;
  padding-left: 1.8rem;
  color: var(--text-2);
}
.haken li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gruen);
  font-weight: 700;
}

.zahlenzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.2rem;
  margin: 0 0 2.4rem;
  padding: 0 0 1.4rem;
  border-bottom: 1px solid var(--rand);
  color: var(--text-2);
  font-size: 1rem;
}
.zahlenzeile b {
  font-family: var(--marke);
  color: var(--gruen);
  margin-right: 0.3em;
}

/* ── Der Ablauf: Grafik und Text in GETRENNTEN Spalten ─────────────────
   Die Bühne klebt in ihrer eigenen Spalte. Sie kann den Text nicht
   überdecken — das ist strukturell so, nicht durch Positionsregeln.
   In der Vorfassung lag sie als position:fixed über der ganzen Seite;
   die Messung fand 32 überdeckte Textstellen. */
.scrolly {
  display: grid;
  /* Gleichwertige Spalten: bei 0,9 zu 1,1 wirkte die Grafik wie ein
     Anhaengsel des Textes statt wie sein Gegenueber. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.scrolly-bild {
  position: sticky;
  top: 5.5rem;
  height: min(74vh, 620px);
}
.buehne-halter {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 42%, #0d1420 0%, var(--grund) 72%);
  border: 1px solid var(--rand);
}
.buehne-halter iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
}
body.buehne-laeuft .buehne-halter iframe {
  opacity: 1;
}
/* Ersatzbild, solange (oder falls) die Bühne nicht läuft. Volle Deckkraft:
   wenn keine Bühne kommt — ohne WebGL, bei „Bewegung reduzieren" — ist es das
   einzige Bild und darf nicht blass bleiben. */
.buehne-ersatz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Schnitt, keine Überblendung. Vorher blendete das Bild aus, während die
   Bühne einblendete — beide 0,7 s lang, beide halb durchsichtig. Man sah
   für einen Moment zwei Bilder übereinander. Die Bühne hat einen
   durchsichtigen Hintergrund, deshalb hilft kein Übereinanderlegen: das
   Ersatzbild muss ganz weg sein, bevor sie erscheint. */
body.buehne-laeuft .buehne-ersatz {
  display: none;
}

.schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: schritt;
}
.schritt {
  position: relative;
  padding: clamp(2.6rem, 7vh, 5rem) 0 clamp(2.6rem, 7vh, 5rem) 1.4rem;
  border-bottom: 1px solid var(--rand);
}
.schritt:last-child {
  border-bottom: 0;
}
/* Fortsetzungsanker innerhalb einer Phase: keine Trennlinie, kein eigener
   Marker — sie gehören zum Schritt darüber und bewegen nur die Bühne weiter. */
.schritt.schmal {
  border-bottom: 0;
  padding-top: clamp(1.4rem, 4vh, 2.6rem);
  padding-bottom: clamp(1.4rem, 4vh, 2.6rem);
}
.schritt.schmal::before {
  display: none;
}
/* Der aktive Schritt bekommt einen Marker — die anderen werden NICHT gedämpft.
   Zuerst standen sie auf 45 % Deckkraft; gemessen sind das 2,45:1 Kontrast
   statt der geforderten 4,5:1. Ein Effekt, der Text unlesbar macht, ist keiner. */
.schritt::before {
  content: "";
  position: absolute;
  left: 0;
  top: clamp(2.6rem, 7vh, 5rem);
  bottom: clamp(2.6rem, 7vh, 5rem);
  width: 2px;
  background: var(--rand);
  transition: background 0.35s ease;
}
.schritt.aktiv::before {
  background: var(--gruen);
}
.schritt .phase {
  display: block;
  font-family: var(--marke);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gruen);
  margin-bottom: 0.9rem;
}
.schritt h3 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.563rem;
  margin-bottom: 0.7rem;
}
.buchstabe {
  font-family: var(--marke);
  font-weight: 700;
  font-size: 1rem;
  color: var(--auf-gruen);
  background: var(--gruen);
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex: none;
}

/* Zettel auf Papier — wie die Hinweiskarten im Film */
.zettel {
  margin-top: 1.4rem;
  padding: 1rem 1.2rem;
  background: var(--papier);
  background-image: linear-gradient(168deg, var(--papier-hell), var(--papier) 60%);
  color: var(--auf-papier);
  border-radius: 3px;
  font-size: 1rem;
  transform: rotate(-0.4deg);
  max-width: 34rem;
}
.zettel strong {
  color: var(--auf-papier);
}

/* ── Netzwerkaufnahme ─────────────────────────────────────────────────
   Nur 480 px breit ausgeliefert: Beschriftungen sind in der DATEI
   unlesbar, nicht bloß per CSS verkleinert. Deshalb nicht hochskalieren. */
.karte-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}
.netz-rahmen {
  width: 100%;
  max-width: 480px;
  background: var(--grund-2);
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 10px;
  line-height: 0;
}
.netz-video {
  width: 100%;
  max-width: 480px;
  border-radius: 5px;
}
.nachsatz {
  margin: 2.2rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rand);
  color: var(--text-3);
  font-size: 0.8rem;
}

/* ── Ihre Daten ───────────────────────────────────────────────────────── */
.daten {
  background: var(--grund-2);
  border-block: 1px solid var(--rand);
  max-width: none;
}
.daten-raster {
  max-width: var(--spalte);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: center;
}
.bildrahmen {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--rand);
}

/* ── Fragen ───────────────────────────────────────────────────────────── */
.fragen {
  max-width: 52rem;
}
.fragen details {
  border-bottom: 1px solid var(--rand);
}
.fragen summary {
  cursor: pointer;
  padding: 1.15rem 2.4rem 1.15rem 0;
  font-weight: 600;
  position: relative;
  list-style: none;
}
.fragen summary::-webkit-details-marker {
  display: none;
}
.fragen summary::after {
  content: "+";
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gruen);
  font-size: 1.563rem;
  line-height: 1;
}
.fragen details[open] summary::after {
  content: "−";
}
.fragen details p {
  margin: 0 0 1.3rem;
  font-size: 1rem;
  max-width: 62ch;
}

/* ── Abschluss ────────────────────────────────────────────────────────── */
.abschluss {
  text-align: center;
}
.abschluss .unter {
  margin-inline: auto;
}
.abschluss .knopfreihe {
  justify-content: center;
}
.telefon {
  margin-top: 1.6rem;
  font-size: 1rem;
}

/* ── Anfrageformular ───────────────────────────────────────────────────── */
.anfrage {
  max-width: 42rem;
  margin: 2.4rem auto 0;
  text-align: left;
}
.feldpaar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.anfrage label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.anfrage label > span {
  font-size: 1rem;
  color: var(--text-2);
}
.anfrage label > span b {
  color: var(--gruen);
  font-weight: 400;
}
.anfrage input {
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--grund-2);
  border: 1px solid var(--rand);
  border-radius: 7px;
  padding: 0.7rem 0.9rem;
  width: 100%;
  transition: border-color 0.2s ease;
}
.anfrage input:hover {
  border-color: #3a4657;
}
.anfrage input:focus {
  border-color: var(--gruen);
  outline: 2px solid var(--gruen);
  outline-offset: 1px;
}
/* Honigtopf: für Menschen unsichtbar, für Automaten ein ausfüllbares Feld.
   Nicht display:none — manche Automaten überspringen versteckte Felder. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.hinweis-klein {
  font-size: 0.8rem;
  color: var(--text-3);
  margin: 1.2rem 0 0;
}
/* Mittig unter der mittig gesetzten Überschrift. Im Hero bleiben die
   Knöpfe linksbündig — dort steht auch der Text links. */
.anfrage .knopfreihe {
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}
.anfrage button.knopf {
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
}
/* Beide Knöpfe gleich hoch und gleich breit ab einer Mindestbreite: zwei
   unterschiedlich große Knöpfe nebeneinander lesen sich als Versehen. */
.anfrage .knopfreihe .knopf {
  min-width: 14rem;
  justify-content: center;
  padding: 0.85rem 1.6rem;
}
@media (max-width: 34rem) {
  .anfrage .knopfreihe .knopf {
    min-width: 100%;
  }
}
/* Die Rückmeldung steht unter den Knöpfen und gehört zu ihnen — also auch
   mittig, sonst wandert der Blick nach dem Absenden nach links weg. */
.anfrage .rueckmeldung {
  text-align: center;
}
.rueckmeldung {
  margin-top: 1rem;
  font-size: 1rem;
  min-height: 1.6em;
}
.rueckmeldung.gut {
  color: var(--gruen);
}
.rueckmeldung.schlecht {
  color: #ff9d8a; /* auf dunklem Grund lesbarer als reines Rot */
}

.fuss {
  border-top: 1px solid var(--rand);
  padding: 3rem clamp(1.2rem, 4vw, 2rem) 2.4rem;
  text-align: center;
  color: var(--text-3);
  font-size: 0.8rem;
}
.fuss .gross {
  font-family: var(--marke);
  font-weight: 700;
  font-size: clamp(3.052rem, 13vw, 9rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  margin: 0 0 1.6rem;
  color: transparent;
  -webkit-text-stroke: 1px #38455a;
  user-select: none;
}
.fuss a {
  color: var(--text-2);
}
.fuss .zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  justify-content: center;
  margin-bottom: 0.7rem;
}

/* ── Schmale Bildschirme: Bühne über den Text, nicht daneben ──────────── */
@media (max-width: 860px) {
  .scrolly {
    grid-template-columns: 1fr;
  }
  .scrolly-bild {
    height: 44vh;
    top: 4.4rem;
    /* über dem Text, mit deckendem Grund darunter — so bleibt der Text
       lesbar, während die Bühne oben klebt */
    z-index: 5;
    margin-bottom: 1.5rem;
    background: var(--grund);
  }
  .schritt {
    padding-left: 1.1rem;
  }
}

/* ── Flache Bildschirme: Handy im Querformat ─────────────────────────────
   Die Regel oben greift ab 860 px Breite — bei 780x360 also auch, obwohl das
   Gerät breiter als hoch ist. 44vh sind dort 158 px: Das Kastl wird zur
   Briefmarke in einem Briefschlitz, die Beschriftung des Kalenders ist nicht
   mehr lesbar (gemessen in pruefung/aufloesungen.py).

   Wo die Höhe knapp und die Breite reichlich ist, gehört die Bühne neben den
   Text statt darüber. Dann bekommt sie die volle Höhe. */
@media (max-width: 860px) and (max-height: 540px) {
  .scrolly {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.2rem;
  }
  .scrolly-bild {
    height: 76vh;
    top: 3.4rem;
    /* zurück in die eigene Spalte: kein Stapeln, kein deckender Grund nötig */
    z-index: auto;
    margin-bottom: 0;
    background: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Formular ───────────────────────────────────────────────────────────
   Zwei feste Spalten für die kurzen Antworten. auto-fit wäre falsch: solange
   die Sicherheitsfrage lädt, ist die rechte Spalte leer, und das linke Feld
   würde sie einnehmen und beim Nachladen zurückspringen. */
.feldpaar.fest {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 34rem) {
  .feldpaar.fest {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Ein Feld über die ganze Breite — für die Frage, die mehr als eine Zeile
   braucht. */
.anfrage label.breit {
  margin-bottom: 1rem;
}

.anfrage textarea {
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--grund-2);
  border: 1px solid var(--rand);
  border-radius: 7px;
  padding: 0.7rem 0.9rem;
  width: 100%;
  min-height: 5.5rem;
  /* Nur nach unten größer ziehbar: seitliches Ziehen würde das Feld aus dem
     Raster brechen und das Formular schief aussehen lassen. */
  resize: vertical;
  transition: border-color 0.2s ease;
}
.anfrage textarea:hover {
  border-color: #3a4657; /* wie .anfrage input:hover */
}
.anfrage textarea:focus-visible {
  outline: 2px solid var(--gruen);
  outline-offset: 2px;
  border-color: transparent;
}

/* Die Sicherheitsfrage steht in Worten da — „drei plus vier" statt „3 + 4“.
   Das kostet einen einfachen Automaten mehr Mühe als das Ziffernformat und
   liest sich für einen Menschen genauso schnell.
   Die grüne Farbe kommt aus .anfrage label > span b und bleibt bewusst: die
   Aufgabe soll ins Auge fallen. Eine eigene color-Regel stünde hier nur zum
   Schein — .anfrage label > span b ist spezifischer. */
.rechenfeld > span b {
  font-weight: 600;
  white-space: nowrap;
}

/* Sicherheitsfrage nicht ladbar: das Feld bleibt stehen und sagt, was los
   ist. Ein stumm verschwundenes Feld sieht aus wie „kein Spamschutz“. */
.rechenfeld.fehlt {
  grid-column: 1 / -1;
}
.rechenfeld.fehlt > span {
  color: #d8a066;
}

/* hidden allein reicht nicht: display: flex aus .anfrage label sticht das
   Standardverhalten des Attributs aus, und das Feld stünde trotzdem da. */
.anfrage label[hidden] {
  display: none;
}


/* ── Rechtsseiten (Impressum, Datenschutz) ──────────────────────────────
   Reiner Lesetext. Schmale Spalte, ruhige Hierarchie: hier kommt niemand
   zum Stöbern her, sondern um eine bestimmte Angabe zu finden. */
.recht {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.2rem, 4vw, 2rem)
    clamp(4rem, 8vw, 6rem);
}
.recht h1 {
  /* „Datenschutzerklärung" ist ein einziges Wort und war bei fester Größe
     breiter als seine Spalte — es schob die ganze Seite 43 Pixel nach rechts.
     Die Schrift gibt auf schmalen Schirmen nach, und die Silbentrennung
     (lang="de-AT" steht am <html>) fängt den Rest ab. */
  font-size: clamp(1.8rem, 7vw, 2.441rem);
  line-height: 1.2;
  margin: 0 0 0.6rem;
  hyphens: auto;
}
.recht h2 {
  font-size: 1.25rem;
  line-height: 1.35;
  margin: 2.2rem 0 0.5rem;
  color: var(--text);
}
.recht p {
  margin: 0 0 0.9rem;
  color: var(--text-2);
  /* Rechtstexte sind voll mit langen Wörtern („Verbraucherschlichtungs-
     stelle") und Adressen. Auf einem schmalen Schirm schob eines davon die
     ganze Seite 28 Pixel nach rechts. */
  overflow-wrap: break-word;
}
.recht a {
  color: var(--gruen);
}
.recht address {
  font-style: normal;
}

/* Offene Angabe, die vor dem Livegang gefüllt werden muss. Gelb auf Dunkel
   statt gelber Hintergrund: der helle Block riss auf dieser Seite ein Loch. */
/* Herkunftshinweis unter einer Abbildung. Die Befundkarte hat denselben
   Hinweis, dort aber auf Papiergrund (.papier .klein) — hier steht er auf
   dem dunklen Grund und braucht eigene Farbwerte. */
.netz-rahmen .quelle {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  color: var(--text-3);
}