/* ==========================================================================
   ansteuerung-einstellungen.css — Aussehen des gemeinsamen Bereichs „Ansteuerung“ (kanonisch in _shared_input/).
   Eigener Namensraum .anst-*; Farben über Variablen, damit jede App ihr Thema aufsetzt, ohne das Layout zu ändern:
     --anst-bg, --anst-fg, --anst-leise, --anst-rand, --anst-akzent, --anst-akzent-fg, --anst-feld, --anst-schrift
   Maße nach der Hausregel (Augensteuerung): Knöpfe ≥ 120 × 96 px, Wahl-/Stufenknöpfe ≥ 120 × 96 px,
   „Fertig“ ≈ 220 × 112 px; Fugen ≥ 10 px; nichts blinkt; prefers-reduced-motion beachtet.
   ========================================================================== */
.anst {
  --anst-bg: #141a22; --anst-fg: #f4f6f9; --anst-leise: #b9c2ce; --anst-rand: #ffffff2a;
  --anst-akzent: #ffd400; --anst-akzent-fg: #1d1d1f; --anst-feld: #1f2733; --anst-schrift: inherit;
  color: var(--anst-fg); font-family: var(--anst-schrift); font-size: clamp(18px, 2vw, 24px); line-height: 1.3;
  box-sizing: border-box;
}
.anst *, .anst *::before, .anst *::after { box-sizing: inherit; }
.anst-ueberlagerung {
  /* Nie scrollen (Augensteuerung, Scannen, Grid-Browser): feste Höhe, Inhalt wird geblättert */
  position: fixed; inset: 0; z-index: 2147483000; overflow: hidden; height: 100vh; height: 100dvh;
  background-color: var(--anst-bg);
  background-image: radial-gradient(ellipse 90% 60% at 50% -10%, color-mix(in srgb, var(--anst-akzent) 9%, var(--anst-bg)), var(--anst-bg) 70%);
  padding: 16px 24px max(16px, env(safe-area-inset-bottom)) 24px;
  display: flex; flex-direction: column; gap: 12px;
}
/* CVI-Modus des Bausteins „Barrierefreiheit“ (body.bf-cvi): ruhig und schlicht — kein Verlauf */
body.bf-cvi .anst-ueberlagerung { background-image: none; }
.anst-flaeche { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; align-content: start; gap: 12px; max-width: 1600px; width: 100%; margin: 0 auto; }
/* Breite Bildschirme: Einstellzeilen zweispaltig, damit weniger geblättert werden muss; Frage, Erklärung, Probe, Aktionen über die volle Breite */
@media (min-width: 1240px) { .anst-flaeche { grid-template-columns: repeat(2, minmax(0, 1fr)); } .anst-flaeche > :not(.anst-zeile) { grid-column: 1 / -1; } }
/* Stufe „einfach“ (05.11.2026): Karten in einer Reihe, die Zeile des Wegs über die volle Breite, darunter rechts
   „Genauer einstellen“ · „Zurücksetzen“ — so passt alles auf eine Seite. Die Probierfläche steht seit 08.11.2026 fest
   daneben (s. u. „Probierfläche“), nicht mehr in der Fläche. */
@media (min-width: 1000px) {
  .anst-einfach .anst-flaeche { grid-template-columns: minmax(0, 1fr); }
  .anst-einfach .anst-flaeche > .anst-aktionen { justify-content: flex-end; }
  .anst-einfach .anst-karten { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .anst-einfach .anst-karte { min-height: 120px; }
}
/* Zeile: Titel und Erklärung links, Knöpfe rechts daneben (statt drei Reihen untereinander) — erst ab 1280 px, weil die
   Probierfläche rechts Breite braucht (bei 1024 px stand die Erklärung sonst Wort für Wort untereinander) */
@media (min-width: 1280px) {
  .anst-einfach .anst-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 18px; }
  .anst-einfach .anst-zeile > h3 { grid-column: 1; min-width: 0; }
  .anst-einfach .anst-zeile > .anst-hinweis { grid-column: 1; }
  .anst-einfach .anst-zeile > .anst-werte { grid-column: 2; grid-row: 1 / span 2; flex-wrap: nowrap; }
}
/* bis 1800 px sind sieben Karten in einer Reihe schmal (die Probierfläche rechts nimmt seit 08.11.2026 Breite):
   Symbol über dem Wort — bei 1280 × 720 waren „Zeiger“, „Gamepad“, „Kamera“ sonst abgeschnitten */
@media (min-width: 1000px) and (max-width: 1799px) {
  .anst-einfach .anst-karte .anst-knopf-haupt { flex-direction: column; gap: 2px; }
  .anst-einfach .anst-karte svg { width: 36px; height: 36px; }
  .anst-einfach .anst-karte { padding: 8px; }
}
/* volle Breite: „Zurück“ immer ganz unten links */
.anst-leiste { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; }
.anst-blaettern { display: flex; align-items: center; justify-content: center; gap: 14px; flex: 1 1 auto; min-width: 0; }
/* spezifischer als .anst-knopf (steht weiter unten und würde sonst min-width/-height überschreiben) */
.anst-knopf.anst-zurueck, .anst-knopf.anst-blatt, .anst-knopf.anst-fertig { flex-direction: row; gap: 10px; min-width: 220px; min-height: 112px; font-size: 1.15em; }
.anst-knopf.anst-zurueck svg, .anst-knopf.anst-blatt svg, .anst-knopf.anst-fertig svg { width: 40px; height: 40px; }
/* Symbol und Text nebeneinander (der Knopf-Inhalt steckt in einem inneren span) */
.anst-knopf.anst-zurueck > span:first-child, .anst-knopf.anst-blatt > span:first-child, .anst-knopf.anst-fertig > span:first-child { display: inline-flex; flex-direction: row; align-items: center; gap: 10px; white-space: nowrap; }
.anst-blatt-platz { display: inline-block; min-width: 220px; }
.anst-blatt-zahl { min-width: 9em; text-align: center; color: var(--anst-leise); font-variant-numeric: tabular-nums; }
.anst-aktionen { display: flex; flex-wrap: wrap; gap: 14px; }
.anst-kopf { flex: none; display: flex; align-items: center; justify-content: center; }
.anst-titel { margin: 0; font-size: clamp(26px, 3vw, 38px); }
.anst-frage h3, .anst-zeile h3 { margin: 0 0 8px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; }
.anst-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.anst-knopf {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-width: 120px; min-height: 96px; padding: 10px 16px; border-radius: 20px;
  border: 3px solid var(--anst-rand); color: var(--anst-fg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--anst-fg) 7%, var(--anst-feld)), var(--anst-feld));
  box-shadow: 0 3px 0 #0000004d, 0 8px 22px #00000026;
  font: inherit; font-weight: 600; cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent;
  transition: border-color .12s ease-out, background .12s ease-out;
}
.anst-knopf:hover, .anst-knopf:focus-visible { border-color: var(--anst-akzent); outline: none; }
.anst-knopf.gewaehlt { border-color: var(--anst-akzent); background: color-mix(in srgb, var(--anst-akzent) 24%, var(--anst-feld));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--anst-akzent) 28%, transparent), 0 8px 22px #00000033; }
.anst-knopf small { font-size: 0.68em; font-weight: 400; color: var(--anst-leise); }
.anst-knopf svg { width: 44px; height: 44px; flex: none; }
.anst-karte { min-height: 150px; }
.anst-karte svg { width: 48px; height: 48px; }
.anst-karte .anst-knopf-haupt { display: inline-flex; align-items: center; gap: 8px; }
/* Ausgegraut, nicht versteckt (Lars 25.10.2026): Gamepad ohne Gerät, Kamera ohne Webcam, Weg ohne Brücke in der App */
.anst-karte.anst-gesperrt { opacity: .45; cursor: default; border-style: dashed; }
.anst-karte.anst-gesperrt:hover, .anst-karte.anst-gesperrt:focus-visible { border-color: var(--anst-rand); }
.anst-karte.anst-gesperrt .dwell-dot { display: none; }
.anst-liste { display: grid; gap: 12px; max-width: 1200px; width: 100%; margin: 0 auto; }
.anst-erklaer { margin: 0; padding: 12px 18px; border-radius: 16px; border: 0; border-left: 6px solid var(--anst-akzent); background: color-mix(in srgb, var(--anst-akzent) 10%, transparent); color: var(--anst-fg); font-size: 0.9em; }
.anst-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 12px 18px; border-radius: 20px; background: color-mix(in srgb, var(--anst-feld) 75%, transparent); border: 2px solid color-mix(in srgb, var(--anst-fg) 10%, transparent); }
.anst-zeile h3 { margin: 0; min-width: 240px; flex: 1 1 240px; }
.anst-hinweis { margin: 0; flex: 1 1 100%; color: var(--anst-leise); font-size: 0.8em; }
.anst-werte { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.anst-werte .anst-knopf { min-height: 96px; }   /* Hausregel: ≥ 120 × 96 auch für Stufen- und An/Aus-Knöpfe (Befund Studio-Sitzung 24.10.) */
.anst-stufe { min-width: 120px; font-size: 1.6em; line-height: 1; }
.anst-wert { display: inline-block; min-width: 150px; text-align: center; font-size: 1.15em; font-weight: 700; font-variant-numeric: tabular-nums; }
.anst-fuss { display: flex; justify-content: space-between; align-items: center; gap: 14px; max-width: 1200px; width: 100%; margin: 0 auto; flex-wrap: wrap; }
.anst-fertig { min-width: 220px; min-height: 112px; background: var(--anst-akzent); color: var(--anst-akzent-fg); border-color: var(--anst-akzent); font-size: 1.15em; }
.anst-knopf.anst-fertig { background: linear-gradient(180deg, color-mix(in srgb, #fff 18%, var(--anst-akzent)), var(--anst-akzent)); }
/* Stufe wechseln („Genauer einstellen“ / „Weniger zeigen“) und Zurücksetzen: gleich groß, nebeneinander */
.anst-stufe-wechsel, .anst-reset { min-width: 220px; min-height: 112px; }
.anst-fertig:hover, .anst-fertig:focus-visible { border-color: var(--anst-fg); }
.anst-oeffnen { flex-direction: row; min-width: 220px; min-height: 96px; }
/* Verweil-Anzeige (dwell-dom .dwell-dot) sitzt zentriert über dem Knopf, der Text bleibt frei: Knopftext oben lassen */
.anst-knopf .dwell-dot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 2; }
@media (max-width: 520px) {
  /* Die zweite Zeile kostet Höhe: Blättern auf das Hausminimum 96 px („Zurück“ bleibt 112 px), Wege-Karten 130 px —
     sonst passen die Wege-Karten und die Zeile „Form“ nicht mehr auf eine Seite (gemessen 375 × 812). */
  .anst-knopf.anst-blatt { min-height: 96px; }
  .anst-karte { min-height: 130px; }
  /* Die Zeile „Form“ (vier Bildknöpfe in zwei Reihen) war 524 px hoch bei 510 px Fläche */
  .anst-knopf svg.anst-vorschau { width: 34px; height: 34px; }
  .anst-zeile { gap: 6px 12px; padding: 6px 12px; }
  /* zwei Karten nebeneinander (vorher eine je Reihe bei 320–375 px: sieben Reihen) */
  .anst-karten { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
  /* − Wert +: der Wert steht über den Knöpfen, die beiden Knöpfe teilen sich die Reihe */
  .anst-wert { min-width: 0; flex: 1 1 100%; order: -1; text-align: left; }
}
@media (max-height: 640px) {
  .anst-titel { font-size: 24px; }
  .anst-karte { min-height: 120px; }
}
@media (max-width: 700px) {
  .anst-ueberlagerung { padding: 14px 16px; }
  .anst-zeile h3 { min-width: 0; flex-basis: 100%; }
}
/* Niedrig (Telefon quer, 667 × 375 bis 932 × 430): Kopf und Frage nur für Vorlesen, Karten und Zeilen kompakter —
   vorher lag die zweite Reihe der Wege-Karten halb unter der Leiste und jede Zeile war höher als die Fläche */
@media (max-height: 520px) {
  .anst-ueberlagerung { padding-top: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); gap: 8px; }
  .anst-flaeche { gap: 8px; }
  .anst-kopf, .anst-frage h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .anst-karten { gap: 8px; }
  .anst-karte { min-height: 96px; padding: 6px 8px; gap: 2px; }
  .anst-karte svg { width: 32px; height: 32px; }
  .anst-karte small { font-size: 0.62em; line-height: 1.15; }
  .anst-erklaer { padding: 8px 12px; font-size: 0.8em; }
  .anst-zeile { padding: 6px 12px; gap: 4px 12px; }
  .anst-zeile h3 { font-size: 19px; }
  .anst-hinweis { font-size: 0.72em; }
  .anst-knopf.anst-blatt { min-height: 96px; }
  .anst-knopf svg.anst-vorschau { width: 34px; height: 34px; }
  /* „− 1000 ms + an aus“ in einer Reihe (667 px): der Wert so breit wie sein Text */
  .anst-wert { min-width: 0; padding: 0 6px; font-size: 1em; }
  .anst-werte { gap: 8px; }
}
/* Schmal oder niedrig: Wahlknöpfe teilen sich die Breite und brechen ihren Text um (je ≥ 120 px), statt einzeln in
   eine neue Reihe zu rutschen — sonst ist eine Zeile wie „Scan-Modus“ höher als die ganze Fläche */
@media (max-width: 520px), (max-height: 520px) {
  .anst-werte > .anst-knopf { flex: 1 1 0; min-width: 120px; max-width: 260px; }
}
/* Zeile höher als die Fläche (der Baustein setzt .anst-eng beim Umbrechen): ohne Erklärsatz */
.anst-zeile.anst-eng .anst-hinweis { display: none; }
/* iPhone SE/mini hoch (≤ 400 × 700): Titel nur für Vorlesen (die Karten zeigen, wo man ist) */
@media (max-width: 400px) and (max-height: 700px) {
  .anst-kopf { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Sehr niedrig (iPhone SE quer, 568 × 320): Fläche 184 px — Wahl- und Stufenknöpfe 96 × 72 (erlaubte Ausnahme unter
   420 px Höhe, wie AssistUK Arcade kern/LAYOUT.md), damit „− Wert + an aus“ in eine Reihe passt */
@media (max-height: 360px) {
  .anst-werte > .anst-knopf, .anst-knopf.anst-stufe { min-width: 96px; min-height: 72px; }
  .anst-werte .anst-knopf { min-height: 72px; }
  .anst-karte { min-height: 80px; }
  .anst-knopf.anst-stufe { font-size: 1.3em; }
  .anst-zeile { padding: 4px 10px; }
  .anst-zeile h3 { font-size: 17px; }
}
/* ---------- Leiste (05.11.2026): links „Zurück“, Mitte Blättern (und „Schritt n von m“), rechts „Fertig“ ----------
   Gleich in den Bausteinen „Ansteuerung“ und „Barrierefreiheit“. Gemessen in 14 Größen (320 × 568 bis 2000 × 800,
   Chromium und WebKit, jede Seite, beide Stufen): „Zurück“ ≥ 220 × 112 (flach unter 520 px Höhe und unter 375 px Breite
   176, Ausnahme wie AssistUK Arcade kern/LAYOUT.md), kein Knopf außerhalb, nichts überlappt.
   Bis 1240 px blättert man nur mit Pfeil — das Wort bleibt für Vorlesen und Screenreader da (nur das WORT, nicht die Hülle:
   sonst ist der Knopf leer, Befund 25.10.2026). */
@media (max-width: 1240px), (max-height: 520px) {
  .anst-knopf.anst-blatt, .anst-blatt-platz { min-width: 120px; }
  .anst-knopf.anst-blatt > span:first-child > span,
  .zug .anst-knopf.anst-blatt > span:not(.dwell-dot) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .anst-blatt-zahl { min-width: 5em; font-size: 0.85em; }
}
/* Hochkant bis 860 px (iPad hoch, Telefon): Blättern in einer eigenen Reihe über „Zurück“ und „Fertig“ */
@media (max-width: 860px) and (min-height: 521px) {
  .anst-leiste { flex-wrap: wrap-reverse; justify-content: space-between; row-gap: 10px; }
  .anst-blaettern { flex: 1 1 100%; justify-content: space-between; order: 2; }
  .anst-blaettern:empty { display: none; }
  .anst-blaettern > .anst-blatt-zahl:only-child { flex: 1; text-align: center; }
  .anst-knopf.anst-zurueck { flex: none; min-width: 220px; }
  .anst-knopf.anst-fertig { flex: 1 1 0; min-width: 120px; padding-left: 8px; padding-right: 8px; }
  .anst-knopf.anst-blatt { min-height: 96px; }
}
@media (max-width: 400px) {
  .anst-ueberlagerung { padding-left: 10px; padding-right: 10px; }
  .anst-blaettern { gap: 6px; }
  .anst-leiste .anst-blatt-zahl { flex: 1 1 0; min-width: 0; font-size: 0.7em; white-space: normal; line-height: 1.15; }
}
/* iPhone SE (320): „Zurück“ 172 + 8 + „Fertig“ 120 = 300 px — mehr Platz ist nicht (sonst drei Reihen) */
@media (max-width: 374px) { .anst-leiste { column-gap: 8px; } .anst-knopf.anst-zurueck { min-width: 172px; } }
/* Flach (Telefon quer): alles in einer Reihe. Ab 701 px Breite (844 × 390, 932 × 430) bleiben „Zurück“ 220 × 112,
   Blättern 120 und „Fertig“ 150 — 220 + 2 × 120 + Zahl + 150 passen */
@media (max-height: 520px) {
  .anst-leiste, .anst-blaettern { gap: 8px; }
  .anst-knopf.anst-fertig { min-width: 150px; }
  .anst-knopf.anst-blatt { min-height: 96px; }
  .anst-leiste .anst-blatt-zahl { flex: 1 1 0; min-width: 0; font-size: 0.7em; white-space: normal; line-height: 1.15; }
}
/* schmal und flach (568 × 320 bis 700 × 430): „Zurück“ 176 × 96, „Fertig“ nur mit Haken (das Wort bleibt für Vorlesen),
   bis 600 px Blättern 96 breit (Ausnahme wie AssistUK Arcade kern/LAYOUT.md) */
@media (max-height: 520px) and (max-width: 600px) { .anst-knopf.anst-blatt, .anst-blatt-platz { min-width: 96px; } }
@media (max-height: 520px) and (max-width: 700px) {
  .anst-knopf.anst-zurueck { min-width: 176px; min-height: 96px; }
  .anst-knopf.anst-fertig { min-width: 96px; min-height: 96px; }
  .anst-knopf.anst-fertig > span:first-child > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .anst-knopf { transition: none; } }
.anst-ausfrage { max-width: 1200px; width: 100%; margin: 0 auto; padding: 14px 16px; border-radius: 16px; border: 3px solid var(--anst-akzent); background: color-mix(in srgb, var(--anst-akzent) 14%, var(--anst-feld)); }
.anst-ausfrage p { margin: 0 0 10px; font-weight: 600; }
.anst-aus-ja { min-width: 220px; min-height: 112px; }
.anst-aus-nein { min-width: 220px; min-height: 112px; border-color: var(--anst-akzent); }
.anst-zusatz { min-height: 96px; }

/* Behalten-Abfrage nach einem Wechsel der Ansteuerung (Schutz vor dem Aussperren, 25.10.2026) */
.anst-pruefung { position: fixed; inset: 0; z-index: 2147483001; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: color-mix(in srgb, var(--anst-bg) 82%, transparent); }
.anst-pruef-box { width: 100%; max-width: 900px; padding: 24px 28px; border-radius: 20px; border: 3px solid var(--anst-akzent); background: var(--anst-feld); text-align: center; }
.anst-pruef-text { margin: 10px 0; font-size: 1.05em; }
.anst-pruef-zahl { margin: 0 0 16px; color: var(--anst-leise); font-variant-numeric: tabular-nums; }
.anst-pruef-knoepfe { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.anst-knopf.anst-pruef-ja, .anst-knopf.anst-pruef-alt { min-width: 220px; min-height: 112px; font-size: 1.15em; }
.anst-knopf.anst-pruef-ja { background: var(--anst-akzent); color: var(--anst-akzent-fg); border-color: var(--anst-akzent); }
.anst-zurueckgesprungen { border-color: var(--anst-akzent); }

/* Bild-Vorschau in Wahlknöpfen (Form, Farbe, Größe): Bild über dem Wort */
.anst-knopf > span:first-child:has(.anst-vorschau) { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.anst-knopf svg.anst-vorschau { width: 44px; height: 44px; display: block; }
.anst-vorschau-text { font-size: 0.9em; }

/* Zusammenfassung „Deine Ansteuerung“ auf der Einstellungsseite der App: Farben der Seite, reiner Text (keine Ziele) */
.anst.anst-zusammenfassung { color: inherit; font-size: inherit; margin: 0 0 16px; }
.anst-zf-weg { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 1.2em; }
.anst-zf-weg svg { width: 44px; height: 44px; flex: none; }
.anst-zf-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 0; }
.anst-zf-zeile { margin: 0; padding: 10px 14px; border-radius: 14px; border: 2px solid color-mix(in srgb, currentColor 18%, transparent); }
.anst-zf-zeile dt { font-size: 0.85em; opacity: 0.75; }
.anst-zf-zeile dd { margin: 2px 0 0; font-weight: 700; font-size: 1.1em; display: flex; align-items: center; gap: 8px; }
.anst-zf-farbe { display: inline-block; width: 22px; height: 22px; border-radius: 50%; flex: none; border: 2px solid color-mix(in srgb, currentColor 35%, transparent); }

/* Taste anlernen: wie die Behalten-Abfrage, ein Knopf „Abbrechen“ in der Mitte */
.anst-lernen .anst-pruef-knoepfe { justify-content: center; }

/* ARIA-Prüfung 07.11.2026: Fokus auch auf gewählten Knöpfen unterscheidbar (eigener Ring statt nur Randfarbe); der
   Dialog selbst bekommt beim Öffnen den Fokus (ohne Ring); Unterzeile gewählter Karten in voller Schriftfarbe (Kontrast) */
.anst-knopf:focus-visible { outline: 4px solid var(--anst-fg) !important; outline-offset: 3px; }
.anst-ueberlagerung:focus { outline: none; }
.anst-knopf.gewaehlt small { color: var(--anst-fg); }

/* ---------- Probierfläche (08.11.2026, Lars: „ein konsistentes Testfeld überall … auch bei den detaillierten
   Einstellungen“) ----------
   Fest außerhalb des Blätterns, auf jeder Seite und in beiden Stufen an derselben Stelle:
     quer (Tablet, Computer, Telefon quer)  eine Spalte rechts neben der Fläche, zwischen Kopf und Leiste
     hoch (Telefon, iPad hoch)              ein Streifen über der Leiste, drei Felder nebeneinander
   Felder ≥ 120 × 96. Begründete Ausnahmen: hoch unter 390 px Breite teilen sich drei Felder die Breite (375: 115 px,
   320: 97 px — zwei Reihen kosteten bei 320 × 568 den Platz der einzigen Wege-Karte); quer unter 361 px Höhe 96 × 72 wie die Wahlknöpfe
   (AssistUK Arcade kern/LAYOUT.md). */
.anst-mitte { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: row; gap: 12px; width: 100%; max-width: 1900px; margin: 0 auto; }
.anst-mitte > .anst-flaeche { flex: 1 1 auto; min-width: 0; height: 100%; }
.anst-probe { flex: none; display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 12px; border-radius: 20px;
  border: 2px dashed color-mix(in srgb, var(--anst-fg) 26%, transparent); background: color-mix(in srgb, var(--anst-feld) 55%, transparent); }
.anst-probe-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.anst-probe-text, .anst-probe-zahl, .anst-probe-stand { margin: 0; }
.anst-probe-text { color: var(--anst-fg); }
.anst-probe-leise, .anst-probe-zahl, .anst-probe-stand { color: var(--anst-leise); font-size: 0.8em; }
.anst-probe-zahl { font-variant-numeric: tabular-nums; }
.anst-probe-zahl b { color: var(--anst-fg); }
.anst-probe-stand { line-height: 1.25; }
.anst-probe-felder { display: grid; gap: 12px; min-height: 0; }
.anst-knopf.anst-probe-feld { min-width: 120px; min-height: 96px; font-size: 1.1em; }
.anst-probe-feld.getroffen { border-color: var(--anst-akzent); background: var(--anst-akzent); color: var(--anst-akzent-fg); }
/* quer: Spalte rechts, die Felder untereinander und so hoch, wie Platz ist */
.anst-ueberlagerung .anst-probe { width: clamp(180px, 19vw, 300px); }
.anst-ueberlagerung .anst-probe-kopf { flex-direction: column; align-items: flex-start; }
.anst-ueberlagerung .anst-probe-felder { flex: 1 1 auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(3, minmax(96px, 200px)); align-content: start; }
/* quer bis 820 px Höhe (Tablet 1024 × 768, Laptop): der Erklärsatz nur für Vorlesen — mit größerer App-Schrift (GazeTo)
   schob er Feld 3 sonst aus der Spalte */
@media (orientation: landscape) and (max-height: 820px) {
  .anst-ueberlagerung .anst-probe-leise { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* hoch: Streifen über der Leiste */
@media (orientation: portrait) {
  .anst-mitte { flex-direction: column; }
  .anst-mitte > .anst-flaeche { height: auto; flex: 1 1 auto; min-height: 0; }
  .anst-ueberlagerung .anst-probe { width: 100%; padding: 8px 10px; gap: 6px; }
  .anst-ueberlagerung .anst-probe-kopf { flex-direction: row; align-items: baseline; }
  .anst-ueberlagerung .anst-probe-felder { flex: none; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(96px, 120px); gap: 8px; }
  .anst-ueberlagerung .anst-probe-leise { display: none; }   /* eine Zeile weniger; das Wort „Probierfläche“ und die Zeile darunter erklären */
}
@media (orientation: portrait) and (max-height: 900px) {
  .anst-ueberlagerung .anst-probe-felder { grid-template-rows: 96px; }   /* Telefon hoch: jede Zeile der Fläche zählt */
}
/* Telefon hoch bis 760 px Höhe (iPhone SE/8/mini): eine Kopfzeile „was gerade gilt · Treffer“, das Wort „Probierfläche“
   nur für Vorlesen — sonst bleibt über dem Streifen nicht einmal Platz für eine Wege-Karte (320 × 568) */
@media (orientation: portrait) and (max-height: 760px) {
  .anst-ueberlagerung .anst-probe { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 4px; align-items: baseline; }
  .anst-ueberlagerung .anst-probe-kopf { display: contents; }
  .anst-ueberlagerung .anst-probe-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .anst-ueberlagerung .anst-probe-stand { grid-column: 1; grid-row: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .anst-ueberlagerung .anst-probe-zahl { grid-column: 2; grid-row: 1; }
  .anst-ueberlagerung .anst-probe-felder { grid-column: 1 / -1; grid-row: 2; }
}
/* sehr niedrig hoch (iPhone SE 1, 320 × 568): Felder 72 hoch (begründete Ausnahme wie unter 361 px Höhe quer) — sonst ist
   die Fläche niedriger als eine Einstellzeile mit Titel und Knopf */
@media (orientation: portrait) and (max-height: 600px) {
  .anst-ueberlagerung .anst-probe-felder { grid-template-rows: 72px; }
  .anst-ueberlagerung .anst-probe-felder > .anst-knopf.anst-probe-feld { min-height: 72px; }
}
@media (orientation: portrait) and (max-width: 400px) {
  .anst-ueberlagerung { padding-left: 8px; padding-right: 8px; }
  .anst-ueberlagerung .anst-probe { padding: 6px 0; border-width: 2px 0; border-radius: 12px; }
  .anst-ueberlagerung .anst-probe-felder { gap: 3px; }
  .anst-ueberlagerung .anst-probe-felder > .anst-knopf.anst-probe-feld { min-width: 0; padding-left: 4px; padding-right: 4px; }
  .anst-probe-text, .anst-probe-zahl, .anst-probe-stand { font-size: 0.75em; }
}
/* quer und niedrig (Telefon quer): Spalte mit 2 + 1 Feldern, Erklärsatz nur für Vorlesen */
@media (orientation: landscape) and (max-height: 520px) {
  .anst-mitte { gap: 8px; }
  .anst-ueberlagerung .anst-probe { width: auto; padding: 4px 8px 6px; gap: 3px; border-radius: 14px; }
  .anst-ueberlagerung .anst-probe-kopf { flex-direction: row; gap: 0 8px; }
  .anst-ueberlagerung .anst-probe-leise { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .anst-ueberlagerung .anst-probe-felder { grid-template-columns: repeat(2, 120px); grid-template-rows: repeat(2, minmax(96px, 1fr)); gap: 6px; }
  .anst-ueberlagerung .anst-probe-felder > :last-child { grid-column: 1 / -1; }
  .anst-ueberlagerung .anst-probe-text { font-size: 0.8em; }
  .anst-probe-zahl, .anst-probe-stand { font-size: 0.7em; }
  /* eine Zeile (sonst ragt Feld 3 bei 844 × 390 in die Leiste); der ganze Text steht im title und wird vorgelesen */
  .anst-ueberlagerung .anst-probe-stand { max-width: 246px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (orientation: landscape) and (max-height: 360px) {
  .anst-ueberlagerung .anst-probe-felder { grid-template-columns: repeat(2, 96px); grid-template-rows: repeat(2, minmax(72px, 1fr)); }
  .anst-ueberlagerung .anst-probe-felder > .anst-knopf.anst-probe-feld { min-width: 96px; min-height: 72px; }
  .anst-ueberlagerung .anst-probe-stand { max-width: 198px; }
}
/* Auf einer Einstellungsseite der App (probierflaeche()): Farben der Seite, drei Felder nebeneinander */
.anst.anst-probe-aussen { width: 100%; margin: 12px 0; font-size: inherit; }
.anst-probe-aussen .anst-probe-felder { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
.anst-probe-aussen .anst-knopf.anst-probe-feld { min-height: 110px; }
@media (max-width: 420px) {
  .anst-probe-aussen .anst-probe-felder { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .anst-probe-aussen .anst-knopf.anst-probe-feld { min-width: 0; padding: 6px; }
}