/* =====================================================================
   feedback/melden.css — „Problem melden“ und „Idee“ (QN.feedbackMelden, feedback/melden.js) · Agent 3, 27.10.2026
   Ein Ablauf, drei Orte (data-ort): blatt (das Handy am Bigscreen-Weg in
   spiel.html) · mitte (das Handy im Abend: das Formular IST die Mitte des Schirms, randlos) · est („Schreib uns“ in den K6-Einstellungen). Der Ablauf trägt die
   Sprache seines Blatts: Größen und Flächen kommen je Ort aus Variablen, Farben nur aus den Rollen (--t0 … --acc2 · --hk-… · --b-…).
   Bewegt wird nur transform und opacity; prefers-reduced-motion (die --d-… werden 1 ms) hält alles an.
   ===================================================================== */

/* ---- je Ort: Maße und Rollen ---- */
.fbm {
  --fbm-s: max(12px, 2.2cqmin); --fbm-k: max(10px, 1.75cqmin); --fbm-t: max(14px, 2.7cqmin); --fbm-w: max(12px, 2.2cqmin);
  --fbm-r: max(10px, 1.8cqmin); --fbm-g: max(6px, 1cqmin); --fbm-h: 48px; --fbm-ic: max(22px, 3.6cqmin); --fbm-kachel: max(88px, 14cqmin);
  --fbm-fg: var(--t0); --fbm-fg2: var(--t1); --fbm-leise: var(--t2);
  --fbm-fl: color-mix(in srgb, var(--t0) 7%, transparent); --fbm-fl2: color-mix(in srgb, var(--t0) 12%, transparent);
  --fbm-ring: color-mix(in srgb, var(--t0) 14%, transparent); --fbm-mulde: color-mix(in srgb, var(--g0) 62%, transparent);
  --fbm-akz: var(--acc2); --fbm-auf-akz: var(--auf-acc2, #101010);
  --fbm-haupt-bg: var(--acc2); --fbm-haupt-fg: var(--auf-acc2, #101010); --fbm-haupt-schatten: none;
  --fbm-siegel: var(--acc); --fbm-auf-siegel: var(--auf-acc, #fff); --fbm-stempel: var(--acc2);
  --fbm-disp: var(--f-display); --fbm-text: var(--f-body);
  display: grid; gap: var(--fbm-g); min-width: 0; color: var(--fbm-fg); font-family: var(--fbm-text);
}
.fbm[data-ort="blatt"] {
  --fbm-s: calc(3.9cqmin * var(--schrift, 1)); --fbm-k: calc(3.1cqmin * var(--schrift, 1)); --fbm-t: calc(5.4cqmin * var(--schrift, 1)); --fbm-w: calc(4cqmin * var(--schrift, 1));
  --fbm-r: 3.4cqmin; --fbm-g: 2cqmin; --fbm-h: max(48px, 12.4cqmin); --fbm-ic: 8cqmin; --fbm-kachel: 30cqmin;
}
.fbm[data-ort="est"] {
  --fbm-s: 15px; --fbm-k: 13px; --fbm-t: 25px; --fbm-w: 17px; --fbm-r: 14px; --fbm-g: 10px; --fbm-h: 56px; --fbm-ic: 24px; --fbm-kachel: 64px;
  --fbm-fg: #fff; --fbm-fg2: #fff; --fbm-leise: var(--b-leise); --fbm-fl: var(--b-hell); --fbm-ring: var(--b-k); --fbm-mulde: var(--b-mulde);
  --fbm-akz: var(--b-gold-a); --fbm-auf-akz: var(--b-k-gold);
  --fbm-siegel: var(--b-gold-a); --fbm-auf-siegel: var(--b-k-gold); --fbm-stempel: var(--b-gold-a);
  --fbm-disp: var(--prf-disp); --fbm-text: var(--prf-text);
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--fbm-g); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
}
.fbm[data-ort="est"]::-webkit-scrollbar { display: none; }

/* ---- das Blatt des Zahnrads tritt zur Seite (seine Zeilen ruhen, die Karte bleibt — der Ablauf ist ein Teil von ihr) ---- */
.qh-einstblatt.fbm-auf .qh-einst-karte > :not(.fbm):not(.qh-einst-griff) { display: none !important; }
/* Zurück in die Liste: Die Zeilen kommen von links wieder herein. */
.qh-einstblatt.fbm-wieder .qh-einst-karte > * { animation: fbm-kommt-rueck var(--d-mittel, 260ms) var(--k-ein) both; }
/* Die Zeilen im K6-Zahnrad: am schmalen Gerät ohne die lange Zeile darunter (wie „Spiel verlassen“). „Fehler in dieser Frage“ steht nur, wenn es
   eine Frage gibt (fahne.js) — gemeldet bleibt sie still stehen. */
.hk[data-schmal] .hk-einst .hk-melden .t em, .hk[data-schmal] .hk-einst .hk-fehler:not([data-gemeldet]) .t em { display: none; }
.hk-einst .hk-zl[hidden] { display: none; }
.hk-einst .hk-fehler[data-gemeldet] { opacity: .66; cursor: default; }
.hk-einst .hk-fehler[data-gemeldet] .pf { visibility: hidden; }
.hk-einst .hk-melden { margin-bottom: 8px; }
/* Am schmalen Gerät stehen „Fehler in dieser Frage“ und „Problem melden“ nebeneinander (wie „Neu verbinden“ und „Spiel verlassen“) — so bleibt das Blatt
   so hoch wie vorher und lässt den Kopf frei. Steht nur „Problem melden“, nimmt es die ganze Zeile. */
.hk[data-schmal] .hk-einst .hk-meldepaar { display: flex; gap: 8px; margin-bottom: 8px; }
.hk[data-schmal] .hk-einst .hk-meldepaar > .hk-zl { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
/* Stößt das Blatt oben an (melden.js, k6Passen): zuerst geht „Dieser Abend“, dann die Zeile unter „Problem melden“ — nichts rollt. */
.hk-einst.fbm-eng .hk-abend { display: none; }
.hk-einst.fbm-enger .hk-melden .t em, .hk-einst.fbm-enger .hk-fehler .t em, .hk-einst.fbm-enger .hk-paar .t em { display: none; }

/* ---- der Auftritt: Das ganze Blatt wächst aus dem Zahnrad (die Karte, nicht nur ihr Inhalt), das Zahnrad dreht sich dabei (melden.js) ---- */
.qh-einstblatt.fbm-neu .qh-einst-karte { animation: fbm-ausrad 460ms var(--k-schnapp, cubic-bezier(.34, 1.56, .64, 1)) both; }
.qh-einstblatt:not(.qh-einst-feld).fbm-neu .qh-einst-karte { transform-origin: 92% 0; }
@keyframes fbm-ausrad { 0% { opacity: 0; transform: translate(4px, -8px) scale(.32); } 45% { opacity: 1; } 100% { opacity: 1; transform: none; } }

/* ---- die Bühne: zwei Schritte teilen sich eine Zelle, solange einer kommt und einer geht ---- */
.fbm-buehne { display: grid; min-width: 0; }
.fbm-s { grid-area: 1 / 1; display: grid; gap: var(--fbm-g); align-content: start; min-width: 0; }
.fbm-s.fbm-geht { pointer-events: none; }
.fbm-s.fbm-kommt.vor { animation: fbm-kommt-vor var(--d-mittel, 260ms) var(--k-ein) 70ms both; }
.fbm-s.fbm-kommt.rueck { animation: fbm-kommt-rueck var(--d-mittel, 260ms) var(--k-ein) 70ms both; }
.fbm-s.fbm-geht.vor { animation: fbm-geht-vor 150ms var(--k-aus, ease-in) both; }
.fbm-s.fbm-geht.rueck { animation: fbm-geht-rueck 150ms var(--k-aus, ease-in) both; }
@keyframes fbm-kommt-vor { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes fbm-kommt-rueck { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes fbm-geht-vor { to { opacity: 0; transform: translateX(-28px); } }
@keyframes fbm-geht-rueck { to { opacity: 0; transform: translateX(28px); } }
@keyframes fbm-hebt { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- der Kopf: Zurück und der Titel ---- */
.fbm-kopf { display: flex; align-items: center; gap: max(4px, calc(var(--fbm-g) * .6)); min-height: 32px; }
.fbm-titel { margin: 0; flex: 1; min-width: 0; font: 800 var(--fbm-t)/1.12 var(--fbm-disp); color: var(--fbm-fg); text-wrap: balance; outline: none; }
.fbm-zurueck { position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-left: -4px; padding: 0; border: 0; border-radius: 50%;
  background: var(--fbm-fl2); color: var(--fbm-fg); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--d-kurz) var(--k-ein); }
.fbm-zurueck::before { content: ""; position: absolute; inset: -8px; }   /* tippbar 48 px */
.fbm-zurueck svg { width: 18px; height: 18px; }
.fbm-zurueck:active { transform: scale(.92); }
.fbm-unter { margin: -2px 0 2px; font: 700 var(--fbm-k)/1.3 var(--fbm-text); color: var(--fbm-leise); text-align: center; }
.fbm-etikett { margin: 2px 0 -2px; font: 800 var(--fbm-k)/1 var(--fbm-disp); letter-spacing: .12em; text-transform: uppercase; color: var(--fbm-akz); }

/* ---- die Wahl: große, klare Flächen mit kleinem Leben ---- */
.fbm-wahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fbm-g); }
.fbm-wahlen[data-n="3"] { grid-template-columns: minmax(0, 1fr); }
.fbm-wahl { position: relative; display: grid; justify-items: start; align-content: space-between; gap: var(--fbm-g); min-width: 0; min-height: var(--fbm-kachel);
  padding: calc(var(--fbm-g) * 1.4); border: 0; border-radius: var(--fbm-r); background: var(--fbm-fl); color: var(--fbm-fg); text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 max(1px, .18cqmin) var(--fbm-ring); font: 800 var(--fbm-w)/1.15 var(--fbm-disp); -webkit-tap-highlight-color: transparent;
  transition: transform var(--d-kurz) var(--k-ein), opacity var(--d-mittel) var(--k-ein); }
.fbm-wahl b { font: inherit; overflow-wrap: anywhere; hyphens: auto; }
.fbm-wic { display: grid; place-items: center; width: calc(var(--fbm-ic) * 1.65); height: calc(var(--fbm-ic) * 1.65); border-radius: 50%;
  background: color-mix(in srgb, var(--fbm-akz) 18%, transparent); color: var(--fbm-akz); transition: background var(--d-kurz) var(--k-ein), color var(--d-kurz) var(--k-ein); }
.fbm-wic svg { width: var(--fbm-ic); height: var(--fbm-ic); overflow: visible; }
.fbm-wic[data-art="idee"] .fbm-strahl { transform-origin: 12px 6px; }
@media (hover: hover) { .fbm-wahl:hover { background: var(--fbm-fl2); } .fbm-wahl:hover .fbm-wic[data-art] svg, .fbm-wahl:focus-visible .fbm-wic[data-art] svg { animation: var(--fbm-leben) 760ms var(--k-ein); } }
.fbm-wic[data-art="bug"] { --fbm-leben: fbm-schraube; }
.fbm-wic[data-art="idee"] { --fbm-leben: fbm-gluehen; }
.fbm-wic[data-art="frage"] { --fbm-leben: fbm-wippen; }
.fbm-wic[data-art="bug"] svg { transform-origin: 30% 70%; }
/* Auftritt: die Flächen steigen nacheinander auf, ihr Zeichen lebt einmal auf — dann ist Ruhe. */
.fbm-erst .fbm-wahl, .fbm-kommt .fbm-wahl { animation: fbm-wahl-auf 460ms var(--k-schnapp) both; animation-delay: calc(90ms + var(--i, 0) * 80ms); }
.fbm-erst .fbm-wic svg, .fbm-kommt .fbm-wic svg { animation: var(--fbm-leben) 760ms var(--k-ein) both; animation-delay: calc(360ms + var(--i, 0) * 110ms); }
.fbm-erst .fbm-wic[data-art="idee"] .fbm-strahl, .fbm-kommt .fbm-wic[data-art="idee"] .fbm-strahl { animation: fbm-strahl 900ms var(--k-ein) both; animation-delay: calc(420ms + var(--i, 0) * 110ms); }
@keyframes fbm-wahl-auf { from { opacity: 0; transform: translateY(12px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes fbm-schraube { 0%, 100% { transform: rotate(0deg); } 35% { transform: rotate(-32deg); } 70% { transform: rotate(10deg); } }
@keyframes fbm-gluehen { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.14); } }
@keyframes fbm-wippen { 0%, 100% { transform: translateY(0) rotate(0deg); } 35% { transform: translateY(-3px) rotate(-8deg); } 70% { transform: translateY(1px) rotate(4deg); } }
@keyframes fbm-strahl { 0% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: none; } }
/* Die Wahl rastet ein: drücken, zurückfedern, das Zeichen füllt sich — die andere tritt zurück. */
.fbm-wahl.rastet { animation: fbm-rastet 300ms var(--k-schnapp) both; box-shadow: inset 0 0 0 2px var(--fbm-akz); }
.fbm-wahl.rastet .fbm-wic { background: var(--fbm-akz); color: var(--fbm-auf-akz); }
.fbm-wahl.weicht { opacity: .4; transform: scale(.97); }
@keyframes fbm-rastet { 0% { transform: scale(1); } 35% { transform: scale(.94); } 75% { transform: scale(1.03); } 100% { transform: scale(1); } }
.fbm-wahl:focus-visible, .fbm-plus:focus-visible, .fbm-weiter:focus-visible, .fbm-knopf:focus-visible, .fbm-zurueck:focus-visible, .fbm-k:focus-visible {
  outline: 2px solid var(--fbm-fg); outline-offset: 2px; }

/* ---- „Ist es das?“: die bekannten Probleme dieses Schirms, „+1“ zählt sichtbar hoch ---- */
.fbm-bekannt { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--fbm-g) * .75); }
.fbm-b { display: flex; align-items: center; gap: var(--fbm-g); min-height: var(--fbm-h); padding: 4px 5px 4px calc(var(--fbm-g) * 1.4); border-radius: var(--fbm-r);
  background: var(--fbm-fl); box-shadow: inset 0 0 0 max(1px, .18cqmin) var(--fbm-ring); transition: box-shadow var(--d-mittel) var(--k-ein); }
.fbm-kommt .fbm-b, .fbm-erst .fbm-b { animation: fbm-hebt 340ms var(--k-ein) both; animation-delay: calc(60ms + var(--i, 0) * 60ms); }
.fbm-b.an { box-shadow: inset 0 0 0 2px var(--fbm-akz); }
.fbm-btext { flex: 1; min-width: 0; font: 600 var(--fbm-s)/1.3 var(--fbm-text); color: var(--fbm-fg); overflow-wrap: anywhere; }
.fbm-plus { position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px 0 11px; border: 0; border-radius: 99px;
  background: color-mix(in srgb, var(--fbm-akz) 15%, transparent); color: var(--fbm-akz); cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fbm-akz) 55%, transparent); font: 800 var(--fbm-s)/1 var(--fbm-disp);
  transition: background var(--d-mittel) var(--k-ein), color var(--d-mittel) var(--k-ein); }
.fbm-plus::before { content: ""; position: absolute; inset: -5px -4px; }   /* tippbar 48 px */
.fbm-pz { display: inline-grid; place-items: center; min-width: 1.4em; }
.fbm-pz svg { width: 1.05em; height: 1.05em; }
.fbm-zahl { position: relative; display: inline-grid; overflow: hidden; padding-left: 7px; border-left: 1.5px solid color-mix(in srgb, currentColor 40%, transparent);
  color: var(--fbm-fg); font-variant-numeric: tabular-nums; line-height: 1.15; }
.fbm-zahl i { grid-area: 1 / 1; font-style: normal; }
.fbm-zahl i.alt { animation: fbm-zahl-raus 360ms var(--k-ein) forwards; }
.fbm-zahl i.neu { animation: fbm-zahl-rein 460ms var(--k-schnapp) 80ms both; }
@keyframes fbm-zahl-raus { to { opacity: 0; transform: translateY(-110%); } }
@keyframes fbm-zahl-rein { from { opacity: 0; transform: translateY(110%); } to { opacity: 1; transform: none; } }
.fbm-plus.an { background: var(--fbm-akz); color: var(--fbm-auf-akz); box-shadow: none; }
.fbm-plus.an .fbm-zahl { color: inherit; }
.fbm-plus:disabled { cursor: default; }
.fbm-plus:disabled:not(.an) { opacity: .45; }
.fbm-plus.fbm-zaehlt { animation: fbm-bump 460ms var(--k-schnapp); }
@keyframes fbm-bump { 0% { transform: scale(1); } 30% { transform: scale(.9); } 65% { transform: scale(1.14); } 100% { transform: scale(1); } }
.fbm-hoch { position: absolute; left: 50%; top: -4px; pointer-events: none; font: 900 var(--fbm-s)/1 var(--fbm-disp); color: var(--fbm-akz); animation: fbm-hoch 820ms var(--k-ein) forwards; }
@keyframes fbm-hoch { 0% { opacity: 0; transform: translate(-50%, 4px) scale(.7); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -28px) scale(1.2); } }
.fbm-weiter { display: flex; align-items: center; justify-content: space-between; gap: var(--fbm-g); min-height: var(--fbm-h); padding: 0 calc(var(--fbm-g) * 1.2) 0 calc(var(--fbm-g) * 1.4);
  border: 0; border-radius: var(--fbm-r); background: transparent; color: var(--fbm-fg); cursor: pointer; text-align: left;
  box-shadow: inset 0 0 0 max(1px, .18cqmin) var(--fbm-ring); font: 700 var(--fbm-s)/1.2 var(--fbm-text); -webkit-tap-highlight-color: transparent; }
.fbm-weiter b { font: inherit; }
.fbm-weiter i, .fbm-pf { display: grid; color: var(--fbm-leise); } .fbm-weiter svg, .fbm-pf svg { width: 16px; height: 16px; }
@media (hover: hover) { .fbm-weiter:hover { background: var(--fbm-fl); } }

/* ---- der Gast: ein ehrlicher Satz, der Weg zur Anmeldung ---- */
.fbm-gast { display: flex; align-items: flex-start; gap: var(--fbm-g); padding: calc(var(--fbm-g) * 1.1) calc(var(--fbm-g) * 1.3); border-radius: var(--fbm-r);
  background: var(--fbm-mulde); box-shadow: inset 0 0 0 max(1px, .18cqmin) var(--fbm-ring); }
.fbm-gast p { margin: 0; font: 600 var(--fbm-k)/1.4 var(--fbm-text); color: var(--fbm-fg2); }
.fbm-gast-ic { flex: none; display: grid; color: var(--fbm-leise); padding-top: 1px; } .fbm-gast-ic svg { width: calc(var(--fbm-k) * 1.4); height: calc(var(--fbm-k) * 1.4); }

/* ---- das Feld ---- */
.fbm-feld { position: relative; display: block; }
.fbm-ta { display: block; box-sizing: border-box; width: 100%; min-height: calc(var(--fbm-s) * 1.4 * 3 + var(--fbm-g) * 2 + var(--fbm-k) + 4px); margin: 0; resize: none;
  padding: var(--fbm-g) calc(var(--fbm-g) * 1.3) calc(var(--fbm-g) + var(--fbm-k) + 2px); border: 0; border-radius: var(--fbm-r); outline: none;
  background: var(--fbm-mulde); color: var(--fbm-fg); caret-color: var(--fbm-akz); font: 600 var(--fbm-s)/1.4 var(--fbm-text);
  box-shadow: inset 0 0 0 max(1px, .18cqmin) var(--fbm-ring); transition: box-shadow var(--d-kurz) var(--k-ein); }
.fbm-ta::placeholder { color: var(--fbm-leise); opacity: .9; }
.fbm-ta:focus { box-shadow: inset 0 0 0 2px var(--fbm-akz); }
.fbm-zaehler { position: absolute; right: calc(var(--fbm-g) * 1.2); bottom: calc(var(--fbm-g) * .7); font: 600 var(--fbm-k)/1 var(--fbm-text); color: var(--fbm-leise); pointer-events: none; font-variant-numeric: tabular-nums; }
.fbm[data-ort="mitte"] .fbm-ta, .fbm[data-ort="est"] .fbm-ta { font-size: 16px; }   /* am Telefon nie unter 16 px — sonst zoomt der Browser */

/* ---- die Tasten: Abbrechen so groß wie Senden ---- */
.fbm-tasten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fbm-g); margin-top: 2px; }
.fbm-tasten.eins { grid-template-columns: minmax(0, 1fr); }
.fbm-knopf { display: grid; place-items: center; min-height: var(--fbm-h); padding: 0 10px; border: 0; border-radius: var(--fbm-r); cursor: pointer; text-align: center;
  background: var(--fbm-fl); color: var(--fbm-fg); box-shadow: inset 0 0 0 max(1px, .18cqmin) var(--fbm-ring); font: 800 calc(var(--fbm-s) * 1.06)/1.1 var(--fbm-disp);
  -webkit-tap-highlight-color: transparent; transition: transform var(--d-kurz) var(--k-ein), opacity var(--d-mittel) var(--k-ein); }
.fbm-knopf.haupt { background: var(--fbm-haupt-bg); color: var(--fbm-haupt-fg); box-shadow: var(--fbm-haupt-schatten); }
.fbm-knopf:disabled { opacity: .42; cursor: default; }
.fbm-knopf:active:not(:disabled), .fbm-knopf.fbm-drueck { transform: scale(.96); }
@media (hover: hover) { .fbm-knopf:not(.haupt):not(:disabled):hover { background: var(--fbm-fl2); } }
.fbm .prf-gold:disabled { cursor: default; } .fbm .prf-gold:disabled > span { opacity: .45; filter: saturate(.5); }

/* ---- Danke: der Stempel „Eingegangen“ landet ---- */
.fbm-danke { display: grid; justify-items: center; gap: var(--fbm-g); padding: calc(var(--fbm-g) * .6) 0 2px; text-align: center; }
.fbm-danke .fbm-titel { flex: none; }
.fbm-stempelfeld { position: relative; display: flex; align-items: center; gap: calc(var(--fbm-g) * 1.3); min-height: calc(var(--fbm-ic) * 1.9); }
.fbm-siegel { position: relative; z-index: 1; display: grid; place-items: center; width: calc(var(--fbm-ic) * 1.75); height: calc(var(--fbm-ic) * 1.75); border-radius: 50%;
  color: var(--fbm-auf-siegel); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fbm-siegel) 34%, transparent), 0 4px 12px rgba(0, 0, 0, .3);
  background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--fbm-siegel) 58%, #fff), var(--fbm-siegel) 58%, color-mix(in srgb, var(--fbm-siegel) 76%, #000)); }
.fbm-siegel svg { width: 58%; height: 58%; }
.fbm-tinte { position: absolute; left: 0; top: 50%; width: calc(var(--fbm-ic) * 1.75); height: calc(var(--fbm-ic) * 1.75); margin-top: calc(var(--fbm-ic) * -.875); border-radius: 50%;
  box-shadow: 0 0 0 2px var(--fbm-siegel); opacity: 0; pointer-events: none; }
.fbm-stempel { position: relative; padding: 5px 11px 4px; border: 2.5px solid currentColor; border-radius: 7px; outline: 1px solid currentColor; outline-offset: 2px;
  color: var(--fbm-stempel); font: 900 calc(var(--fbm-s) * 1.08)/1 var(--fbm-disp); letter-spacing: .14em; text-transform: uppercase; transform: rotate(-6deg); }
.fbm-stempel::after { content: ""; position: absolute; inset: -7px; border-radius: 10px; box-shadow: 0 0 0 2px currentColor; opacity: 0; pointer-events: none; }
.fbm-satz { margin: 0; max-width: 34ch; font: 600 var(--fbm-k)/1.45 var(--fbm-text); color: var(--fbm-fg2); text-wrap: pretty; }
.fbm-stempeln .fbm-siegel { animation: fbm-siegel 500ms var(--k-schnapp) 40ms both; }
.fbm-stempeln .fbm-tinte { animation: fbm-tinte 640ms var(--k-ein) 280ms both; }
.fbm-stempeln .fbm-stempel { animation: fbm-stempel 520ms var(--k-schnapp) 240ms both; }
.fbm-stempeln .fbm-stempel::after { animation: fbm-tinte 600ms var(--k-ein) 500ms both; }
.fbm-stempeln .fbm-danke .fbm-titel { animation: fbm-hebt 340ms var(--k-ein) 340ms both; }
.fbm-stempeln .fbm-satz { animation: fbm-hebt 340ms var(--k-ein) 420ms both; }
.fbm-stempeln .fbm-verlauf { animation: fbm-hebt 340ms var(--k-ein) 500ms both; }
.fbm-stempeln .fbm-tasten { animation: fbm-hebt 340ms var(--k-ein) 560ms both; }
@keyframes fbm-siegel { 0% { opacity: 0; transform: scale(.2) rotate(-50deg); } 65% { opacity: 1; transform: scale(1.14) rotate(8deg); } 100% { opacity: 1; transform: none; } }
@keyframes fbm-stempel { 0% { opacity: 0; transform: scale(1.9) rotate(-24deg); } 60% { opacity: 1; transform: scale(.92) rotate(-3deg); } 100% { opacity: 1; transform: rotate(-6deg); } }
@keyframes fbm-tinte { 0% { opacity: .65; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.7); } }

/* ---- der Verlauf: Eingegangen → Entschieden → Live (heute ist nur der erste hell; Schritt 4 baut darauf) ---- */
.fbm-verlauf { list-style: none; display: flex; width: 100%; max-width: 300px; margin: 2px 0 0; padding: 0; }
.fbm-verlauf li { position: relative; flex: 1 1 0; min-width: 0; display: grid; justify-items: center; gap: 5px; font: 700 var(--fbm-k)/1.1 var(--fbm-text); color: var(--fbm-leise); text-align: center; }
.fbm-verlauf li i { position: relative; z-index: 1; width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--fbm-fg) 32%, transparent); background: transparent; }
.fbm-verlauf li:not(:last-child)::after { content: ""; position: absolute; top: 4.5px; left: calc(50% + 9px); width: calc(100% - 18px); height: 2px; border-radius: 1px;
  background: color-mix(in srgb, var(--fbm-fg) 18%, transparent); }
.fbm-verlauf li.an { color: var(--fbm-fg); }
.fbm-verlauf li.an i { background: var(--fbm-akz); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fbm-akz) 26%, transparent); }
/* (die Linie zum nächsten erreichten Schritt: .weiter setzt verlaufHtml — vorher li.an:has(+ li.an). Diese eine Regel ließ JEDEN Wechsel der überall
   benutzten Klasse .an — die Reiter der Leiste, die Tasten — den ganzen Schirm neu berechnen: am Handy 7× so teuer, gemessen 2.11.) */
.fbm-verlauf li.an.weiter::after { background: var(--fbm-akz); }
.fbm-stempeln .fbm-verlauf li.an i { animation: fbm-punkt 480ms var(--k-schnapp) 640ms both; }
@keyframes fbm-punkt { 0% { transform: scale(0); } 70% { transform: scale(1.4); } 100% { transform: none; } }

/* ---- der Zettel: die Meldung fliegt ins Zahnrad ---- */
.fbm-zettel { position: absolute; z-index: 80; box-sizing: border-box; padding: 8px 10px; overflow: hidden; pointer-events: none; border-radius: 10px;
  background: color-mix(in srgb, var(--t0, #fff) 94%, var(--acc2, #fff)); color: var(--g0, #121212); box-shadow: 0 8px 22px rgba(0, 0, 0, .4); font: 600 12px/1.35 var(--f-body, sans-serif); }
.fbm-zettel span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.fbm-zettel[data-ort="est"] { background: #fffaf0; color: var(--b-k, #1a1030); border-radius: 14px; font-size: 14px; }
/* aus der Ebene im Zahnrad (online, Discord): in den Maßen des Felds dort — und über dem Menü, das gerade geht */
.fbm-zettel[data-ort="zahnrad"] { z-index: 200; border-radius: max(11px, 2.2cqmin); padding: max(10px, 1.8cqmin) max(12px, 2.2cqmin); font: 600 max(12.5px, 2.4cqmin)/1.4 var(--f-body, sans-serif); }

/* ---- je Ort: die Sprache des Blatts ---- */
/* Einstellungen: die Sprache des Profils — Titel mit Kontur, Flächen mit Lippe, Mulden für das Feld */
.fbm[data-ort="est"] .fbm-kopf { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; }
.fbm[data-ort="est"] .fbm-kopf .fbm-titel { grid-column: 2; }
.fbm[data-ort="est"] .fbm-titel { text-align: center; font: 900 var(--fbm-t)/1.05 var(--prf-disp); color: #fff; -webkit-text-stroke: 6px var(--b-k); paint-order: stroke fill; text-shadow: 0 3px 0 var(--b-k); padding-bottom: 2px; }
.fbm[data-ort="est"] .fbm-zurueck { width: 40px; height: 40px; margin: 0; background: var(--b-hell); box-shadow: inset 0 0 0 2.5px var(--b-k), 0 3px 0 var(--b-k); color: #fff; }
.fbm[data-ort="est"] .fbm-unter { color: var(--b-leise); text-shadow: 0 1.5px 0 var(--b-k); }
.fbm[data-ort="est"] .fbm-etikett { color: var(--b-gold-a); text-shadow: 0 1.5px 0 var(--b-k); }
.fbm[data-ort="est"] .fbm-wahl { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; align-content: center; padding: 6px 12px 10px 8px;
  background: var(--b-hell); box-shadow: inset 0 0 0 3px var(--b-k), inset 0 -6px 0 var(--b-lila-lippe), 0 4px 0 var(--b-k); margin-bottom: 4px;
  font: 900 var(--fbm-w)/1.1 var(--prf-disp); color: #fff; text-shadow: 0 2px 0 var(--b-k); }
.fbm[data-ort="est"] .fbm-wic { width: 42px; height: 42px; background: var(--b-mulde); color: var(--b-gold-a); box-shadow: inset 0 0 0 2.5px var(--b-k); }
.fbm[data-ort="est"] .fbm-wahl.rastet { box-shadow: inset 0 0 0 3px var(--b-k), inset 0 0 0 5px var(--b-gold-a), inset 0 -6px 0 var(--b-lila-lippe), 0 4px 0 var(--b-k); }
.fbm[data-ort="est"] .fbm-wahl.rastet .fbm-wic { background: var(--b-sonne); color: var(--b-k-gold); }
.fbm[data-ort="est"] .fbm-pf { color: #fff; } .fbm[data-ort="est"] .fbm-pf svg { width: 18px; height: 18px; filter: drop-shadow(0 1.5px 0 var(--b-k)); }
.fbm[data-ort="est"] .fbm-b, .fbm[data-ort="est"] .fbm-gast { background: var(--b-mulde); box-shadow: inset 0 0 0 2.5px var(--b-k), inset 0 3px 0 rgba(0, 0, 0, .3); }
.fbm[data-ort="est"] .fbm-b.an { box-shadow: inset 0 0 0 2.5px var(--b-k), inset 0 0 0 4.5px var(--b-gold-a); }
.fbm[data-ort="est"] .fbm-btext, .fbm[data-ort="est"] .fbm-gast p { color: #fff; text-shadow: 0 1.5px 0 var(--b-k); }
.fbm[data-ort="est"] .fbm-plus { background: var(--b-sonne); color: var(--b-k-gold); box-shadow: inset 0 0 0 2.5px var(--b-k-gold), 0 3px 0 var(--b-k-gold); }
.fbm[data-ort="est"] .fbm-plus .fbm-zahl { color: var(--b-k-gold); }
.fbm[data-ort="est"] .fbm-weiter { background: var(--b-hell); box-shadow: inset 0 0 0 3px var(--b-k), inset 0 -5px 0 var(--b-lila-lippe), 0 3px 0 var(--b-k); color: #fff;
  font: 900 16px/1 var(--prf-disp); text-shadow: 0 2px 0 var(--b-k); }
.fbm[data-ort="est"] .fbm-weiter i { color: #fff; }
.fbm[data-ort="est"] .fbm-ta { min-height: 112px; box-shadow: inset 0 0 0 2.5px var(--b-k), inset 0 4px 0 rgba(0, 0, 0, .3); caret-color: var(--b-gold-a); }
.fbm[data-ort="est"] .fbm-ta:focus { box-shadow: inset 0 0 0 2.5px var(--b-k), inset 0 4px 0 rgba(0, 0, 0, .3), 0 0 0 3px var(--b-gold-a); }
.fbm[data-ort="est"] .fbm-ta::placeholder { color: rgba(230, 222, 254, .55); }
.fbm[data-ort="est"] .fbm-satz { color: var(--b-leise); text-shadow: 0 1.5px 0 var(--b-k); font-size: 15px; }
.fbm[data-ort="est"] .fbm-stempel { text-shadow: 0 2px 0 var(--b-k-gold); }
.fbm[data-ort="est"] .fbm-tasten { margin-top: 4px; }
.fbm[data-ort="est"] .fbm-verlauf li { color: var(--b-leise); }
.fbm[data-ort="est"] .fbm-verlauf li.an { color: #fff; }

/* ---- „Deine Gespräche“ (K6-Einstellungen): neue Einträge mit ihrem Status ---- */
.fbm-gz .fbm-gz-ic svg { width: 22px; height: 22px; }
.fbm-verlauf.klein { display: inline-flex; align-items: center; gap: 0; margin-top: 4px; }
.fbm-verlauf.klein i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); }
.fbm-verlauf.klein i + i { margin-left: 12px; position: relative; }
.fbm-verlauf.klein i + i::before { content: ""; position: absolute; right: 9px; top: 3px; width: 10px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, .25); }
.fbm-verlauf.klein i.an { background: var(--b-gold-a, #ffc93c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--b-gold-a, #ffc93c) 30%, transparent); }
.fbm-verlauf.klein em { margin-left: 9px; font: 800 12px/1 var(--prf-text, sans-serif); font-style: normal; color: #fff; text-shadow: 0 1.5px 0 var(--b-k, #000); }
.fbm-gz .fbm-status { align-self: flex-start; margin-top: 3px; padding: 2px 8px; border-radius: 99px; font: 800 11px/1.3 var(--prf-text, sans-serif); font-style: normal;
  color: var(--b-k-gold, #3a1a02); background: var(--b-gold-a, #ffc93c); }

/* =====================================================================
   K6 · DAS FORMULAR IST DIE MITTE (melden.js, k6) — „Problem melden“ und „Fehler in dieser Frage“ am Handy im Abend.
   Tobi (27.10.): „Das Formular, so wie du es vorher hattest, sollte bleiben — nur dass du den ganzen Screen gut und professionell
   ausfüllst.“ Darum KEINE Karte mehr in der Mitte (kein eigener Rand, kein eigener Grund, kein Band — das war „ein Screen in einem
   Screen“): Das Formular steht randlos auf dem Bildschirm des Geräts, dort, wo eine Frage ihre Uhr, ihren Text und ihre Antworten hat,
   und füllt die ganze Höhe — der Titel oben (in der Schrift des Fragetexts), die Wahlen bzw. das Feld dazwischen (sie wachsen in die
   Höhe, gleiche Abstände), die Tasten unten am Ende der Mitte. Kopf, Kategorie-Zeile, Pult und Spielerleiste bleiben.
   Danach kein Danke-Schirm: An der Stelle der Tasten sinkt „Danke, eingereicht“ ein wie „Eingeloggt“ am Knopf (melden.js, bestaetige),
   nach 1,5 s geht das Formular von selbst.
   Die Mitte des Geräts tritt dahinter ganz zurück (data-fbm-mitte). Farben nur aus den Rollen des Geräts (--hk-…, --acc …).
   ===================================================================== */
/* (die Uhr .u6 hängt am Gerät, liegt aber auf der Mitte — sie gehört zur Frage und tritt mit zurück) */
.hk[data-fbm-mitte] .hk-pass > *, .hk[data-fbm-mitte] > .u6 { opacity: 0 !important; pointer-events: none !important; transition: opacity .26s ease !important; }
.hk[data-fbm-zurueck] .hk-pass > *, .hk[data-fbm-zurueck] > .u6 { transition: opacity .32s ease !important; }

/* die eigene Lage über dem Gerät (fest, in seinem Maß — melden.js setzt Lage, Maßstab und die Mitte .fbm-pass) */
.fbm-lage { position: fixed; z-index: 2147481500; pointer-events: none; color: var(--t0); }
.fbm-lage .fbm-box { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.fbm-lage .fbm-pass { position: absolute; }
/* Die Fläche des Formulars: so breit wie die Antworten einer Frage (das Deck), von unter der Kategorie-Zeile bis kurz über den Abschnitt —
   mit Tastatur bis kurz über sie (--fbm-unten, melden.js). */
.fbm-lage .fbm-fin { position: absolute; left: 1px; right: 1px; top: calc(var(--kopf, 104px) + 8px); bottom: var(--fbm-unten, 12px); display: flex; flex-direction: column; transition: opacity .2s ease; }
/* Ein Blatt des Geräts (Zahnrad, Krone) oder eine Unterbrechung ist offen: Das Formular tritt so lange zurück — mit allem darin. */
.fbm-lage.fbm-verdeckt .fbm-fin { opacity: 0; }
.fbm-lage.fbm-verdeckt .fbm-karte { pointer-events: none; }
/* Die Tastatur im Labor (?tastatur=<px>): nur ein Platzhalter, wie in den Schreib-Kategorien. */
.fbm-probe { position: absolute; left: 0; right: 0; display: grid; place-items: center; pointer-events: none; background: repeating-linear-gradient(0deg, #2b2b30 0 52px, #232328 52px 56px); }
.fbm-probe b { font: 700 13px/1 var(--f-body, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: #8d8d96; }
.fbm-probe[hidden] { display: none; }

/* Das Formular selbst: keine Karte — nur die Fläche, in der es steht. */
.fbm-karte { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; pointer-events: auto; transform-origin: 50% 30%; }
/* Auftritt: Erst tritt die Mitte zurück, dann steht das Formular da (Titel, die Wahlen nacheinander); Abgang: ruhig ausblenden. */
.fbm-lage.fbm-auftritt .fbm-karte { animation: fbm-karte-auf .42s cubic-bezier(.2, .8, .2, 1) .16s both; }
.fbm-lage.fbm-auftritt .fbm-erst .fbm-wahl, .fbm-lage.fbm-auftritt .fbm-erst .fbm-grund, .fbm-lage.fbm-auftritt .fbm-erst .fbm-b { animation-delay: calc(260ms + var(--i, 0) * 60ms); }
.fbm-lage.fbm-geht .fbm-karte { animation: fbm-karte-ab .26s cubic-bezier(.4, 0, 1, 1) both; pointer-events: none; }

/* ONLINE: DAS SEITENBLATT (melden.js, ORTE.online) — rechts, unter dem Zahnrad, von der Kopfzeile bis zum Pult (628 × 390: bis zum unteren
   Rand). Seine Fläche (.fbm-pass) setzt melden.js in px des Schirms; das Blatt darin (.fbm-fin) steht in den Maßen des Handy-Formulars
   (schmal; niedrig: data-eng) und wächst ab 610 px Schirmhöhe mit (scale) — bei 1608 × 940 dasselbe Blatt, nur größer. Es ist EINE ruhige
   Fläche in den Tönen des Sets; innen steht das Formular randlos wie am Handy. Kopf und Pult bleiben, die Wand rückt zur Seite. */
.fbm-lage[data-weg="online"] .fbm-fin { left: 0; right: auto; top: 0; bottom: auto; box-sizing: border-box; transform-origin: 0 0; padding: 14px 14px 12px; border-radius: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--g2) 86%, var(--acc) 5%), color-mix(in srgb, var(--g1) 94%, #000));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--t0) 12%, transparent), inset 0 2px 0 color-mix(in srgb, #fff 7%, transparent), 0 16px 40px rgba(0, 0, 0, .5); }
.fbm-lage[data-weg="online"][data-eng] .fbm-fin { padding: 10px 10px 9px; border-radius: 15px; }
/* Auftritt: Es gleitet von rechts herein (aus der Ecke des Zahnrads), während die Wand zur Seite rückt; Abgang: zurück nach rechts. */
.fbm-lage[data-weg="online"].fbm-auftritt .fbm-pass { animation: fbm-seite-auf .38s cubic-bezier(.2, .8, .2, 1) both; }
.fbm-lage[data-weg="online"].fbm-geht .fbm-pass { animation: fbm-seite-ab .26s cubic-bezier(.4, 0, 1, 1) both; }
.fbm-lage[data-weg="online"]:is(.fbm-auftritt, .fbm-geht) .fbm-karte { animation: none; }
@keyframes fbm-seite-auf { 0% { opacity: 0; transform: translateX(28px); } 100% { opacity: 1; transform: none; } }
@keyframes fbm-seite-ab { to { opacity: 0; transform: translateX(22px); } }
@keyframes fbm-karte-auf { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: none; } }
@keyframes fbm-karte-ab { to { opacity: 0; transform: translateY(10px); } }

/* der Ablauf: Titel oben, der Rumpf füllt die Höhe, die Tasten stehen unten am Ende der Mitte */
.fbm-rumpf { display: contents; }
.fbm[data-ort="mitte"] {
  --fbm-s: 16px; --fbm-k: 13px; --fbm-t: 22px; --fbm-w: 19px; --fbm-r: 15px; --fbm-g: 12px; --fbm-h: 54px; --fbm-ic: 24px; --fbm-pad: 0px;
  --fbm-fl: color-mix(in srgb, var(--t0) 7%, transparent); --fbm-fl2: color-mix(in srgb, var(--t0) 12%, transparent);
  --fbm-ring: color-mix(in srgb, var(--t0) 18%, transparent); --fbm-mulde: color-mix(in srgb, var(--g0) 70%, transparent);
  --fbm-akz: var(--acc); --fbm-auf-akz: var(--auf-acc, #101010);
  --fbm-haupt-bg: var(--acc2); --fbm-haupt-fg: var(--auf-acc2, #101010);
  --fbm-haupt-schatten: inset 0 2px 0 color-mix(in srgb, #fff 22%, transparent), 0 4px 0 color-mix(in srgb, var(--acc2) 55%, #000);
  --fbm-disp: var(--f-display, 'Outfit', system-ui, sans-serif); --fbm-text: var(--f-body, 'Plus Jakarta Sans', system-ui, sans-serif);
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0; font-family: var(--fbm-disp); }
/* Schmal und niedrig: an der eigenen Lage (melden.js) oder am Bogen der Bewertung (abend.js) — dieselben Maße. */
:is(.fbm-lage, .fba-bogen)[data-schmal] .fbm[data-ort="mitte"] { --fbm-h: 48px; --fbm-g: 10px; --fbm-t: 19px; --fbm-w: 17px; --fbm-s: 15px; --fbm-k: 12.5px; }
:is(.fbm-lage, .fba-bogen)[data-eng] .fbm[data-ort="mitte"] { --fbm-g: 8px; }
.fbm[data-ort="mitte"] .fbm-buehne { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
.fbm[data-ort="mitte"] .fbm-s { min-height: 0; display: flex; flex-direction: column; gap: var(--fbm-g); padding: 0 0 4px; }
/* der Titel: in der Schrift des Fragetexts (22 bzw. 19 px), links der Zurück-Pfeil */
.fbm[data-ort="mitte"] .fbm-kopf { flex: none; gap: 10px; min-height: 44px; padding: 0 4px 0 6px; }
.fbm[data-ort="mitte"] .fbm-titel { font: 800 var(--fbm-t)/1.14 var(--fbm-disp); letter-spacing: -.01em; }
.fbm[data-ort="mitte"] .fbm-zurueck { width: 38px; height: 38px; margin-left: -2px; background: linear-gradient(180deg, var(--hk-glas-a, var(--g2)), var(--hk-glas-b, var(--g1)));
  box-shadow: inset 0 1px 0 var(--hk-kante, rgba(255, 255, 255, .1)), inset 0 0 0 1px var(--hk-kante-tief, rgba(0, 0, 0, .3)), 0 3px 0 var(--hk-tief, rgba(0, 0, 0, .4)); }
.fbm[data-ort="mitte"] .fbm-zurueck::before { inset: -5px; }   /* tippbar 48 px */
.fbm[data-ort="mitte"] .fbm-rumpf { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--fbm-g); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  margin: -4px -2px; padding: 4px 2px 6px; }
.fbm[data-ort="mitte"] .fbm-rumpf::-webkit-scrollbar { display: none; }
.fbm[data-ort="mitte"] .fbm-rumpf > * { flex: none; }
/* Die Raster (Wahlen, Gründe, Kacheln, bekannte Probleme) teilen sich die freie Höhe, werden aber nie niedriger als ihre Zeilen (≥ 48 px):
   Reicht der Platz nicht (eine Tastatur auf dem kleinen Gerät), rollt der Rumpf — nichts schiebt sich über das Feld darunter. */
.fbm[data-ort="mitte"] .fbm-rumpf.rollt { -webkit-mask: linear-gradient(180deg, #000 calc(100% - 22px), transparent); mask: linear-gradient(180deg, #000 calc(100% - 22px), transparent); }

/* die Tasten: gleich groß, mit Lippe — unten am Ende der Mitte */
.fbm[data-ort="mitte"] .fbm-tasten { flex: none; gap: 10px; margin-top: 0; }
.fbm[data-ort="mitte"] .fbm-knopf { height: var(--fbm-h); min-height: 0; padding: 0 12px; border-radius: 15px; white-space: nowrap; font: 800 calc(var(--fbm-h) * .32)/1 var(--fbm-disp); color: var(--t0);
  background: linear-gradient(180deg, color-mix(in srgb, var(--g2) 90%, #000), var(--g0));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--t0) 16%, transparent), inset 0 2px 0 color-mix(in srgb, #fff 7%, transparent), 0 4px 0 color-mix(in srgb, var(--g0) 70%, #000);
  transition: transform .14s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease; }
.fbm[data-ort="mitte"] .fbm-knopf.haupt { background: var(--fbm-haupt-bg); color: var(--fbm-haupt-fg); box-shadow: var(--fbm-haupt-schatten); }
.fbm[data-ort="mitte"] .fbm-knopf:active:not(:disabled), .fbm[data-ort="mitte"] .fbm-knopf.fbm-drueck { transform: translateY(3px); }
.fbm[data-ort="mitte"] .fbm-knopf[aria-disabled="true"] { opacity: .42; }
.fbm[data-ort="mitte"] .fbm-knopf.fbm-bereit { animation: fbm-bereit .32s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes fbm-bereit { 0% { transform: none; } 45% { transform: scale(1.04); } 100% { transform: none; } }
@media (hover: hover) { .fbm[data-ort="mitte"] .fbm-knopf:not(.haupt):not(:disabled):hover { background: linear-gradient(180deg, color-mix(in srgb, var(--g3) 90%, #000), var(--g1)); } }

/* Eine Fläche mit Lippe — die Wahlen, die bekannten Probleme, „Nein, etwas anderes“ (wie die Zahlen der Bewertung, nur größer). */
.fbm[data-ort="mitte"] .fbm-wahl, .fbm[data-ort="mitte"] .fbm-b {
  background: linear-gradient(180deg, color-mix(in srgb, var(--g3) 88%, var(--t0) 6%), color-mix(in srgb, var(--g2) 92%, #000));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--t0) 13%, transparent), inset 0 2px 0 color-mix(in srgb, #fff 8%, transparent), 0 4px 0 color-mix(in srgb, var(--g0) 85%, #000); }

/* die Wahl: sie füllt die Höhe — jede Fläche gleich hoch, mit großem Zeichen, ihrem Namen und einer leisen Zeile, wofür sie steht */
.fbm[data-ort="mitte"] .fbm-wahlen { flex: 1 1 0; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(var(--fbm-h), 1fr); gap: var(--fbm-g); padding-bottom: 4px; }
.fbm[data-ort="mitte"] .fbm-wahl { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; align-content: center; justify-items: stretch; gap: 16px; min-height: 0; padding: 0 16px 0 16px;
  border-radius: 18px; font: 800 var(--fbm-w)/1.15 var(--fbm-disp); }
.fbm[data-ort="mitte"] .fbm-wahl.rastet { box-shadow: inset 0 0 0 2px var(--acc), 0 4px 0 color-mix(in srgb, var(--g0) 85%, #000); }
.fbm-wt { display: grid; gap: 5px; min-width: 0; }
.fbm-wt b { font: inherit; overflow-wrap: normal; }
.fbm-wt small { font: 600 var(--fbm-k)/1.3 var(--fbm-text); color: var(--t2); }
.fbm[data-ort="mitte"] .fbm-wic { width: 54px; height: 54px; }
.fbm[data-ort="mitte"] .fbm-wic svg { width: 26px; height: 26px; }
:is(.fbm-lage, .fba-bogen)[data-schmal] .fbm[data-ort="mitte"] .fbm-wahl { gap: 12px; padding: 0 12px; border-radius: 15px; }
:is(.fbm-lage, .fba-bogen)[data-schmal] .fbm[data-ort="mitte"] .fbm-wic { width: 42px; height: 42px; }
:is(.fbm-lage, .fba-bogen)[data-schmal] .fbm[data-ort="mitte"] .fbm-wic svg { width: 22px; height: 22px; }
/* 360 × 640: die fünf Zeilen der Bewertung sind niedrig — das Gesicht wird kleiner, damit es in der Zeile Luft hat */
.fba-bogen[data-eng] .fbm[data-ort="mitte"] .fba-wert .fbm-wic { width: 36px; height: 36px; }
.fba-bogen[data-eng] .fbm[data-ort="mitte"] .fba-wert .fbm-wic svg { width: 20px; height: 20px; }

/* ---- DIE KACHELN: mehrere (Bewertung, Schritt 2) oder eine (Worum geht es? bei der Idee) — 2 Spalten, sie teilen sich die freie Höhe.
   Oben das Zeichen im Kreis, unten das Wort; rechts oben der Ring, in den der Haken rastet. Gewählt: die zweite Farbe des Sets, wie die
   Gründe beim Fehler. Ist die Kachel niedriger als 84 px, steht das Zeichen links neben dem Wort; bricht das Wort in einer hohen Kachel
   doch in zwei Zeilen um (schmales Gerät) und käme es so an den Kreis, rückt es ebenfalls neben das Zeichen (.zweizeilig, abend.js). ---- */
.fbm-kacheln, .fbm[data-ort="mitte"] .fbm-rumpf > .fbm-kacheln { flex: 1 1 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(52px, 1fr); gap: var(--fbm-g); }
.fbm-kachel { position: relative; container-type: size; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 16px; cursor: pointer; text-align: left; color: var(--t0);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background .2s ease, color .2s ease;
  background: linear-gradient(180deg, color-mix(in srgb, var(--g3) 88%, var(--t0) 6%), color-mix(in srgb, var(--g2) 92%, #000));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--t0) 13%, transparent), inset 0 2px 0 color-mix(in srgb, #fff 8%, transparent), 0 4px 0 color-mix(in srgb, var(--g0) 85%, #000); }
.fbm-kachel > * { position: absolute; }
.fbm-kic { left: 12px; top: 12px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: color-mix(in srgb, var(--fbm-akz, var(--acc)) 18%, transparent); color: var(--fbm-akz, var(--acc)); transition: background .2s ease, color .2s ease; }
.fbm-kic svg { width: 21px; height: 21px; }
.fbm-kachel b { left: 13px; right: 12px; bottom: 12px; font: 800 15px/1.18 var(--fbm-disp, sans-serif); overflow-wrap: normal; hyphens: manual; text-wrap: balance; }
.fbm-khaken { right: 11px; top: 11px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--t0) 34%, transparent); }
.fbm-khaken svg { width: 14px; height: 14px; opacity: 0; transform: scale(.4); transition: opacity .16s ease, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.fbm-kachel[aria-pressed="true"], .fbm-kachel[aria-checked="true"] { background: var(--acc2); color: var(--auf-acc2, var(--g0));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #fff 18%, transparent), 0 4px 0 color-mix(in srgb, var(--acc2) 50%, #000); }
.fbm-kachel[aria-pressed="true"] .fbm-kic, .fbm-kachel[aria-checked="true"] .fbm-kic { background: color-mix(in srgb, var(--auf-acc2, var(--g0)) 14%, transparent); color: inherit; }
.fbm-kachel[aria-pressed="true"] .fbm-khaken, .fbm-kachel[aria-checked="true"] .fbm-khaken { box-shadow: inset 0 0 0 1.5px currentColor; }
.fbm-kachel[aria-pressed="true"] .fbm-khaken svg, .fbm-kachel[aria-checked="true"] .fbm-khaken svg { opacity: 1; transform: none; }
.fbm-kachel:focus-visible { outline: 2px solid var(--t0); outline-offset: 2px; }
.fbm-kachel:active { transform: translateY(2px); }
.fbm-kachel.rastet { animation: fbm-tipp .36s cubic-bezier(.3, 1.6, .5, 1); }
.fbm-erst .fbm-kachel, .fbm-kommt .fbm-kachel { animation: fbm-wahl-auf .42s var(--k-schnapp, cubic-bezier(.34, 1.56, .64, 1)) both; animation-delay: calc(90ms + var(--i, 0) * 50ms); }
@container (max-height: 83px) {
  .fbm-kic { top: 50%; left: 10px; width: 36px; height: 36px; margin-top: -18px; }
  .fbm-kic svg { width: 20px; height: 20px; }
  .fbm-kachel b { left: 54px; right: 30px; top: 50%; bottom: auto; transform: translateY(-50%); font-size: 14.5px; line-height: 1.15; }
  .fbm-khaken { top: 50%; right: 8px; width: 18px; height: 18px; margin-top: -9px; }
  .fbm-khaken svg { width: 12px; height: 12px; }
}
.fbm-kachel.zweizeilig .fbm-kic { top: 50%; left: 10px; width: 36px; height: 36px; margin-top: -18px; }
.fbm-kachel.zweizeilig b { left: 54px; right: 30px; top: 50%; bottom: auto; transform: translateY(-50%); font-size: 14.5px; line-height: 1.15; }
.fbm-kachel.zweizeilig .fbm-khaken { top: 50%; right: 8px; width: 18px; height: 18px; margin-top: -9px; }
@container (max-height: 66px) {
  .fbm-kic { left: 8px; width: 30px; height: 30px; margin-top: -15px; }
  .fbm-kic svg { width: 17px; height: 17px; }
  .fbm-kachel b { left: 45px; right: 25px; font-size: 13.5px; line-height: 1.12; }
  .fbm-khaken { right: 7px; width: 16px; height: 16px; margin-top: -8px; }
}

/* Die Idee: Die Kacheln sind kompakt (freiwillig, quer), das Feld darunter nimmt die freie Höhe — die Idee ist hier der Inhalt. */
.fbm[data-ort="mitte"] [data-s="idee"] .fbm-rumpf > .fbm-kacheln { flex: none; grid-auto-rows: 72px; }
.fbm-lage[data-eng] .fbm[data-ort="mitte"] [data-s="idee"] .fbm-rumpf > .fbm-kacheln { grid-auto-rows: 52px; }
.fbm[data-ort="mitte"] [data-s="idee"] .fbm-feld { min-height: calc(16px * 1.4 * 2 + 30px); }

/* ---- DIE ZEILE: ein freiwilliges Feld in EINER Zeile unter den Wahlen — zweitrangig, wächst beim Schreiben bis auf drei Zeilen (Bewertung, Fehler) ---- */
.fbm[data-ort="mitte"] .fbm-feld.zeile { flex: none; min-height: 0; }
.fbm[data-ort="mitte"] .fbm-feld.zeile .fbm-ta { flex: 1 1 auto; height: 48px; min-height: 48px; padding: 12px 15px; font-size: 16px; line-height: 1.4; border-radius: 14px; overflow-y: auto; }
.fbm-lage[data-eng] .fbm-wt small { display: none; }   /* 360 × 640: die Flächen sind niedrig — der Name genügt */
.fbm[data-ort="mitte"] .fbm-pf svg { width: 20px; height: 20px; }
.fbm-wic[data-art="fehler"] { --fbm-leben: fbm-wehen; }
.fbm-wic[data-art="fehler"] svg { transform-origin: 25% 50%; }
@keyframes fbm-wehen { 0%, 100% { transform: none; } 22% { transform: skewY(-9deg) scaleX(.88); } 48% { transform: skewY(6deg) scaleX(.96); } 74% { transform: skewY(-3deg); } }
.fbm-wic[data-art="fehler"] svg path.fbm-tuch { fill: currentColor; fill-opacity: .22; }

/* „Ist es das?“: die bekannten Probleme und „Nein, etwas anderes“ teilen sich die Höhe gleich */
.fbm[data-ort="mitte"] .fbm-etikett { margin: 0 0 -2px 6px; font-size: 12.5px; }
.fbm[data-ort="mitte"] .fbm-bekannt { flex: var(--n, 3) 1 0; grid-auto-rows: minmax(var(--fbm-h), 1fr); gap: var(--fbm-g); }
.fbm[data-ort="mitte"] .fbm-b { min-height: 0; padding: 6px 8px 6px 16px; border-radius: 16px; }
.fbm[data-ort="mitte"] .fbm-b.an { box-shadow: inset 0 0 0 2px var(--fbm-akz), 0 4px 0 color-mix(in srgb, var(--g0) 85%, #000); }
.fbm[data-ort="mitte"] .fbm-btext { font: 700 var(--fbm-s)/1.3 var(--fbm-text); }
.fbm[data-ort="mitte"] .fbm-plus { height: 44px; padding: 0 13px 0 12px; }
.fbm[data-ort="mitte"] .fbm-gast { flex: 1 1 0; align-items: center; min-height: var(--fbm-h); padding: 12px 16px; border-radius: 16px; }
.fbm[data-ort="mitte"] .fbm-gast p { font-size: var(--fbm-k); }

/* FEHLER IN DER FRAGE: „Frage 4“ im Kopf, die Gründe als eine Gruppe — sie teilen sich die Höhe —, „Mitgeschickt“ über den Tasten */
.fbm-nr { flex: none; padding: 6px 10px 5px; border-radius: 99px; white-space: nowrap; font: 800 12px/1.1 var(--fbm-text, sans-serif); letter-spacing: .08em; text-transform: uppercase;
  color: var(--t0); background: color-mix(in srgb, var(--acc) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 55%, transparent); transition: background .3s ease, color .3s ease; }
.fbm[data-weiter] .fbm-nr { background: var(--acc); color: var(--auf-acc, var(--g0)); }
.fbm-weiterzeile { display: none; margin: 0; padding: 9px 12px; border-radius: 12px; font: 600 var(--fbm-k, 12.5px)/1.35 var(--fbm-text, sans-serif); color: var(--t0);
  background: color-mix(in srgb, var(--acc2) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc2) 40%, transparent); }
.fbm[data-weiter] .fbm-weiterzeile { display: block; animation: fbm-hebt .32s var(--k-ein, ease-out) both; }
.fbm[data-ort="mitte"] .fbm-gruende { flex: 1 1 0; display: grid; grid-auto-rows: minmax(48px, 1fr); gap: 9px; }
/* Niedriges Gerät: zwei Spalten, damit alle Gründe auf einmal zu sehen sind („Meine Antwort hätte zählen müssen“ über die ganze Breite). */
.fbm-lage[data-eng] .fbm-gruende { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.fbm-lage[data-eng] .fbm-grund { gap: 8px; padding: 5px 9px 5px 10px; font-size: 13.5px; line-height: 1.2; }
.fbm-lage[data-eng] .fbm-grund.fbm-oben { grid-column: 1 / -1; }
.fbm-lage[data-eng] .fbm-punkt { width: 16px; height: 16px; }
.fbm-grund { position: relative; display: flex; align-items: center; gap: 13px; min-height: 48px; margin: 0; padding: 6px 16px 6px 16px; border: 0; border-radius: 16px; text-align: left; cursor: pointer;
  font: 700 var(--fbm-s, 15px)/1.25 var(--fbm-text, sans-serif); color: var(--t0); -webkit-tap-highlight-color: transparent; transition: background .2s ease, color .2s ease;
  background: linear-gradient(180deg, color-mix(in srgb, var(--g3) 88%, var(--t0) 6%), color-mix(in srgb, var(--g2) 92%, #000));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--t0) 13%, transparent), inset 0 2px 0 color-mix(in srgb, #fff 8%, transparent), 0 3px 0 color-mix(in srgb, var(--g0) 85%, #000); }
.fbm-punkt { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--t0) 36%, transparent); }
.fbm-punkt svg { width: 13px; height: 13px; opacity: 0; transform: scale(.4); transition: opacity .16s ease, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.fbm-grund[aria-checked="true"] { background: var(--acc2); color: var(--auf-acc2, var(--g0)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #fff 18%, transparent), 0 3px 0 color-mix(in srgb, var(--acc2) 50%, #000); }
.fbm-grund[aria-checked="true"] .fbm-punkt { box-shadow: inset 0 0 0 1.5px currentColor; }
.fbm-grund[aria-checked="true"] .fbm-punkt svg { opacity: 1; transform: none; }
.fbm-grund:focus-visible { outline: 2px solid var(--t0); outline-offset: 2px; }
.fbm-grund.rastet { animation: fbm-tipp .36s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes fbm-tipp { 0% { transform: none; } 40% { transform: scale(1.025); } 100% { transform: none; } }
.fbm-erst .fbm-grund, .fbm-kommt .fbm-grund { animation: fbm-hebt .34s var(--k-ein, ease-out) both; animation-delay: calc(60ms + var(--i, 0) * 55ms); }
/* Melden ohne Grund: Die Gründe zeigen sich einmal (kein Satz, kein Rot). */
.fbm-gruende.fbm-zeigt .fbm-grund { animation: fbm-zeigen .42s ease-in-out; }
@keyframes fbm-zeigen { 0%, 100% { transform: none; } 35% { transform: translateY(-3px); } 70% { transform: translateY(1px); } }

/* DAS FELD teilt sich die freie Höhe mit den Wahlen (Problem, Idee); der freiwillige Satz zum Fehler ist eine Zeile (.zeile, oben) */
.fbm[data-ort="mitte"] .fbm-feld { flex: 1 1 0; min-height: calc(var(--fbm-h) * 1.8); display: flex; }
.fbm[data-ort="mitte"] .fbm-ta { flex: 1 1 auto; height: auto; min-height: 0; padding: 15px 16px; border-radius: 16px; overflow-y: auto; font-size: 17px; font-weight: 600; line-height: 1.35;
  background: var(--fbm-mulde); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--t0) 14%, transparent), inset 0 3px 8px rgba(0, 0, 0, .28); }
.fbm[data-ort="mitte"] .fbm-ta:focus { box-shadow: inset 0 0 0 2px var(--acc2), inset 0 3px 8px rgba(0, 0, 0, .28); }
.fbm[data-ort="mitte"] .fbm-zaehler:empty { display: none; }
.fbm[data-ort="mitte"] .fbm-zaehler { padding: 2px 6px; border-radius: 6px; background: var(--g1); }
/* MIT TASTATUR (data-tast — die Mitte endet über ihr): Beim Problem treten die bekannten Probleme so lange zur Seite — es bleiben das Feld und die
   Tasten über der Tastatur. */
.fbm-lage[data-tast] .fbm[data-ort="mitte"] [data-s="bug"] :is(.fbm-ist, .fbm-bekannt) { display: none; }
.fbm-lage[data-tast] .fbm[data-ort="mitte"] [data-s="idee"] :is(.fbm-etikett, .fbm-kacheln) { display: none; }
.fbm-lage[data-tast] .fbm[data-ort="mitte"] .fbm-gruende:has(.fbm-grund[aria-checked="true"]) { flex: none; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 48px; }
.fbm-lage[data-tast] .fbm[data-ort="mitte"] .fbm-gruende:has(.fbm-grund[aria-checked="true"]) .fbm-grund:not([aria-checked="true"]) { display: none; }
/* 360 × 640, „Ist es das?“: drei bekannte Probleme und das Feld darunter passen ohne Rollen (Zeilen ≥ 44, Tippflächen ≥ 48) */
.fbm-lage[data-eng] .fbm[data-ort="mitte"] [data-s="bug"] .fbm-etikett:not(.fbm-ist) { display: none; }
.fbm-lage[data-eng] .fbm[data-ort="mitte"] [data-s="bug"] .fbm-feld { flex: none; min-height: 0; }
.fbm-lage[data-eng] .fbm[data-ort="mitte"] [data-s="bug"] .fbm-gast { flex: none; min-height: 0; padding: 6px 12px; }
.fbm-lage[data-eng] .fbm[data-ort="mitte"] [data-s="bug"] .fbm-gast p { font-size: 12px; line-height: 1.35; }
.fbm-lage[data-eng] .fbm[data-ort="mitte"] [data-s="bug"] .fbm-ta { height: 48px; padding: 12px 15px; font-size: 16px; line-height: 1.4; overflow-y: auto; }
.fbm-lage[data-eng] .fbm[data-ort="mitte"] [data-s="bug"] .fbm-rumpf { gap: 6px; }
.fbm-lage[data-eng] .fbm[data-ort="mitte"] .fbm-bekannt { grid-auto-rows: minmax(44px, 1fr); gap: 6px; }
.fbm-lage[data-eng] .fbm[data-ort="mitte"] .fbm-b { padding: 3px 5px 3px 12px; border-radius: 13px; }
.fbm-lage[data-eng] .fbm[data-ort="mitte"] .fbm-btext { font-size: 13.5px; line-height: 1.22; }
.fbm-lage[data-eng] .fbm[data-ort="mitte"] .fbm-plus { height: 38px; }
.fbm-lage[data-tast] .fbm[data-ort="mitte"] .fbm-feld { min-height: var(--fbm-h); }

/* DANKE, EINGEREICHT — in der Sprache des Pults: Wo die Tasten standen, sinkt die Bestätigung ein wie „Eingeloggt“ am Knopf (eingelassen statt
   erhaben, der Haken im runden Feld in den Farben des Knopfs). Der Rest tritt zurück. Nach 1,5 s geht das Formular von selbst (melden.js). */
.fbm-s.fbm-fest .fbm-kopf, .fbm-s.fbm-fest .fbm-rumpf { opacity: .38; transition: opacity .3s ease; }
.fbm-drin { flex: none; position: relative; display: flex; align-items: center; gap: 12px; height: var(--fbm-h); padding: 0 8px 0 18px; border-radius: 15px; color: var(--t0);
  background: linear-gradient(118deg, transparent 0 40%, var(--hk-glanz, rgba(255, 255, 255, .05)) 52%, transparent 64%), linear-gradient(180deg, var(--hk-chip, var(--g1)), var(--hk-kachel-b, var(--g0)));
  box-shadow: inset 0 3px 8px var(--hk-tief, rgba(0, 0, 0, .4)), inset 0 0 0 2px var(--hk-ring, var(--acc)), 0 1px 0 var(--hk-kante-tief, rgba(0, 0, 0, .3));
  animation: fbm-drin .36s cubic-bezier(.2, .8, .2, 1) both; }
.fbm-drin-w { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fbm-drin-w b { font: 900 calc(var(--fbm-h) * .33)/1.05 var(--fbm-disp); letter-spacing: -.01em; }
.fbm-drin-w small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 900 11.5px/1.2 var(--fbm-disp); letter-spacing: .14em; text-transform: uppercase; color: var(--hk-akzent, var(--acc)); }
.fbm-drin-h { flex: none; display: grid; place-items: center; width: calc(var(--fbm-h) - 14px); height: calc(var(--fbm-h) - 14px); border-radius: 50%; color: var(--hk-auf-knopf, var(--g0));
  background: linear-gradient(180deg, var(--hk-knopf-a, var(--acc2)), var(--hk-knopf-b, var(--acc2))); animation: fbm-drin-h .42s cubic-bezier(.34, 1.56, .64, 1) .18s both; }
.fbm-drin-h svg { width: 55%; height: 55%; }
@keyframes fbm-drin { 0% { opacity: 0; transform: translateY(-4px) scale(1.03); } 100% { opacity: 1; transform: none; } }
@keyframes fbm-drin-h { 0% { opacity: 0; transform: scale(1.7); } 100% { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .fbm, .fbm *, .fbm *::before, .fbm *::after, .fbm-zettel, .qh-einstblatt.fbm-wieder .qh-einst-karte > *,
  .qh-einstblatt.fbm-neu .qh-einst-karte, .fbm-lage *, .hk[data-fbm-mitte] .hk-pass > *, .hk[data-fbm-zurueck] .hk-pass > *, .hk[data-fbm-mitte] > .u6, .hk[data-fbm-zurueck] > .u6 { animation: none !important; transition: none !important; }
}
.fbm-lage[data-ruhig="1"] *, .hk.still[data-fbm-mitte] .hk-pass > *, .hk.still[data-fbm-zurueck] .hk-pass > *, .hk.still[data-fbm-mitte] > .u6 { animation: none !important; transition: none !important; }

/* ONLINE, das Seitenblatt (melden.js, ORTE.online): die Maße des kleinen Handys (data-schmal, data-eng), etwas dichter — der Kopf 40 px, die
   Abstände 7 px —, damit nichts rollt; die Trefferflächen bleiben 48 px. Im flachen Blatt (628 × 390, data-flach) fällt „Ist es das?“ weg. */
.fbm-lage[data-weg="online"] .fbm[data-ort="mitte"] { --fbm-g: 7px; }
.fbm-lage[data-weg="online"] .fbm[data-ort="mitte"] .fbm-kopf { min-height: 40px; }
.fbm-lage[data-weg="online"] .fbm[data-ort="mitte"] .fbm-s { padding-bottom: 0; }
.fbm-lage[data-weg="online"] .fbm-fin, .fbm-lage[data-weg="online"][data-eng] .fbm-fin { padding: 10px 10px 8px; }
.fbm-lage[data-weg="online"][data-flach] .fbm[data-ort="mitte"] [data-s="bug"] .fbm-ist { display: none; }
/* DAS UNTERMENÜ IM ZAHNRAD (melden.js, HAKEN 2b): dieselben Zeilen wie die Liste des Zahnrads — gemeldet trägt die Zeile den Ring in der Farbe
   des Sets und ihren Haken, die übrigen treten zurück. Die Zahl beim bekannten Problem steht leise rechts. */
.fbm-zr .qh-einst-zeile { animation: fbm-hebt .26s var(--k-ein, ease-out) both; animation-delay: calc(var(--i, 0) * 35ms); }
.fbm-zr .fbm-zr-plus { font: 800 max(11px, 2cqmin)/1 var(--f-display, sans-serif); font-style: normal; color: var(--acc); white-space: nowrap; }
.fbm-zr .qh-einst-pfeil svg { display: block; width: 1em; height: 1em; color: var(--acc); }
.fbm-zr .qh-einst-zeile.fbm-dank { box-shadow: inset 0 0 0 2px var(--acc); }
.fbm-zr .qh-einst-zeile.fbm-dank .qh-einst-fuss { color: var(--acc); font-weight: 800; }
.fbm-zr.fbm-fertig .qh-einst-zeile:not(.fbm-dank) { opacity: .4; transition: opacity .2s ease; }
@media (prefers-reduced-motion: reduce) { .fbm-zr .qh-einst-zeile { animation: none; } }
/* Lobby und Finale: „Ich habe eine Idee“ mit etwas Abstand zu den Problemen; die zweite Ebene — das Feld als Mulde (wie der Regler im Zahnrad),
   darunter Senden in der Farbe des Gewählten (wartet auf einen Satz), gesendet: der Rand in --acc mit Haken. */
.fbm-zr .qh-einst-zeile.fbm-zr-ab { margin-top: max(4px, .9cqmin); }
.fbm-zr-text { display: grid; gap: max(7px, 1.4cqmin); }
.qh-einstblatt .qh-einst-liste.fbm-zr > .fbm-zr-text { grid-column: 1 / -1; }   /* auch wenn die Liste in zwei Spalten steht (S, menue-online.css: „> * { grid-column: auto }“) */
.fbm-zr-ta { display: block; width: 100%; box-sizing: border-box; min-height: max(92px, 17cqmin); max-height: max(150px, 30cqmin); resize: none; margin: 0;
  padding: max(10px, 1.8cqmin) max(12px, 2.2cqmin); border: 0; border-radius: max(11px, 2.2cqmin); outline: none;
  background: color-mix(in srgb, var(--g0) 88%, #000); color: var(--t0); font: 600 max(12.5px, 2.4cqmin)/1.4 var(--f-body);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .7), inset 0 0 0 max(1.5px, .22cqmin) color-mix(in srgb, var(--t0) 10%, transparent); }
.fbm-zr-ta::placeholder { color: var(--t2); opacity: 1; }
.fbm-zr-ta:focus { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .7), inset 0 0 0 max(2px, .3cqmin) var(--acc); }
.fbm-zr-ta:disabled { opacity: .6; }
.fbm-zr-senden { display: flex; align-items: center; justify-content: center; gap: max(6px, 1.1cqmin); min-height: 48px; padding: 0 max(12px, 2.2cqmin); border: 0;
  border-radius: max(12px, 2.5cqmin); background: var(--acc); color: var(--auf-acc); font: 800 max(12px, 2.45cqmin)/1 var(--f-display); cursor: pointer;
  box-shadow: inset 0 2px 0 color-mix(in srgb, #fff 28%, transparent), 0 3px 0 color-mix(in srgb, var(--acc) 55%, #000); -webkit-tap-highlight-color: transparent; }
.fbm-zr-senden:active:not(:disabled) { transform: translateY(1px); }
.fbm-zr-senden:disabled { background: color-mix(in srgb, var(--t0) 9%, transparent); color: var(--t2); box-shadow: inset 0 0 0 max(1.5px, .22cqmin) color-mix(in srgb, var(--t0) 10%, transparent); cursor: default; }
.fbm-zr-senden.fbm-dank { background: none; color: var(--acc); box-shadow: inset 0 0 0 2px var(--acc); }
.fbm-zr-senden svg { width: max(14px, 2.6cqmin); height: max(14px, 2.6cqmin); }
.fbm-zr-senden:focus-visible { outline: max(2px, .35cqmin) solid var(--t0); outline-offset: 2px; }
/* Nachtragen (im Finale): ein Satz, worum es geht — das Feld ist hier der Inhalt und trägt die Höhe */
.fbm-nachsatz { margin: 0 4px; font: 600 var(--fbm-k, 12.5px)/1.4 var(--fbm-text, sans-serif); color: var(--t1); }
.fbm-lage .fbm[data-ort="mitte"] [data-s="bug"] .fbm-feld.gross { flex: 1 1 0; min-height: calc(var(--fbm-h) * 1.8); }
.fbm-lage .fbm[data-ort="mitte"] [data-s="bug"] .fbm-feld.gross .fbm-ta { height: auto; min-height: 0; padding: 14px 15px; }

/* Die Gründe des Fehlers stehen im Seitenblatt untereinander wie am großen Handy (nur im niedrigen Fenster in zwei Spalten) — sonst würden vier
   Gründe zu hohen Kacheln. Eine gemerkte Meldung trägt ihre Frage im Kopf; die Zeile „Es geht schon weiter“ steht dort nicht. */
.fbm-lage[data-weg="online"]:not([data-flach]) .fbm-gruende { grid-template-columns: minmax(0, 1fr); gap: 7px; }
.fbm-lage[data-weg="online"]:not([data-flach]) .fbm-grund { gap: 13px; padding: 6px 16px; font-size: var(--fbm-s); line-height: 1.25; }
.fbm-lage[data-weg="online"]:not([data-flach]) .fbm-punkt { width: 20px; height: 20px; }
.fbm-lage[data-merk] .fbm-weiterzeile { display: none !important; }

/* IM FINALE (melden.js, ORTE.online): Das Blatt steht an der Stelle des Treppchens — das Treppchen tritt dahinter zurück, das Schaufenster bleibt. */
.qo-schirm .sp-f-podium { transition: opacity .3s ease; }
.qo-schirm[data-fbm-podium] .sp-f-podium { opacity: 0; pointer-events: none; }
/* Flach (628 × 390, data-flach): noch etwas dichter — der Kopf 36 px, die Abstände 6 px, die fünf Zeilen 4 px —, damit nichts rollt. */
.fbm-lage[data-weg="online"][data-flach] .fbm[data-ort="mitte"] { --fbm-g: 6px; }
.fbm-lage[data-weg="online"][data-flach] .fbm[data-ort="mitte"] .fbm-kopf { min-height: 36px; }
.fbm-lage[data-weg="online"][data-flach] .fbm[data-ort="mitte"] .fba-werte { gap: 4px; }
.fbm-lage[data-weg="online"][data-flach] .fbm-fin { padding: 8px 9px 7px; }
.fbm-lage[data-weg="online"][data-flach] .fbm[data-ort="mitte"] .fbm-rumpf > .fbm-kacheln { gap: 4px; }
.fbm-lage[data-weg="online"][data-flach] .fbm[data-ort="mitte"] .fbm-rumpf { padding-bottom: 4px; }
.fbm-lage[data-weg="online"][data-flach] .fbm-drin-w small { letter-spacing: .05em; }

/* DIE QUERFASSUNG (data-flach — die Fläche des Blatts ist flacher als 330 px: das Finale im niedrigen Fenster, 628 × 390). Das Blatt bleibt in seiner
   Fläche; statt Zeilen untereinander stehen die Dinge nebeneinander:
     · „Wie war …?“ — die fünf Gesichter als Kärtchen nebeneinander (das Gesicht oben, das Wort darunter, die Zahl leise in der Ecke);
     · „Was war am besten?“ — die Kacheln drei mal zwei, darunter EINE Reihe: die Zeile „Noch was?“, Abbrechen, Senden;
     · die Gründe des Fehlers in zwei Spalten (wie am kleinen Handy). Die Trefferflächen bleiben 48 px. */
.fbm-lage[data-flach] .fbm[data-ort="mitte"] [data-s="wert"] .fba-werte { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: minmax(48px, 1fr); gap: 6px; }
.fbm-lage[data-flach] .fbm[data-ort="mitte"] .fba-wert { position: relative; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; justify-items: center; gap: 8px;
  padding: 8px 4px; text-align: center; border-radius: 14px; }
.fbm-lage[data-flach] .fbm[data-ort="mitte"] .fba-wert .fbm-wic { width: 40px; height: 40px; }
.fbm-lage[data-flach] .fbm[data-ort="mitte"] .fba-wert .fbm-wic svg { width: 26px; height: 26px; }
.fbm-lage[data-flach] .fbm[data-ort="mitte"] .fba-wert .fbm-wt b { font-size: 13px; line-height: 1.15; text-wrap: balance; }
.fbm-lage[data-flach] .fbm[data-ort="mitte"] .fba-wert .fba-zahl { position: absolute; right: 7px; top: 6px; padding: 0; font-size: 11px; }
.fbm-lage[data-flach] .fbm[data-ort="mitte"] [data-s="grund"] { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; }
.fbm-lage[data-flach] .fbm[data-ort="mitte"] [data-s="grund"] > .fbm-kopf { grid-column: 1 / -1; }
.fbm-lage[data-flach] .fbm[data-ort="mitte"] [data-s="grund"] .fbm-rumpf { display: contents; }
.fbm-lage[data-flach] .fbm[data-ort="mitte"] [data-s="grund"] .fbm-rumpf > .fbm-kacheln { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(48px, 1fr); gap: 6px; min-height: 0; }
.fbm-lage[data-flach] .fbm[data-ort="mitte"] [data-s="grund"] .fbm-feld.zeile { grid-column: 1; align-self: end; }
.fbm-lage[data-flach] .fbm[data-ort="mitte"] [data-s="grund"] .fbm-tasten { display: contents; }
.fbm-lage[data-flach] .fbm[data-ort="mitte"] [data-s="grund"] .fbm-tasten .fbm-knopf { min-width: 112px; align-self: end; }
.fbm-lage[data-flach] .fbm[data-ort="mitte"] [data-s="grund"] .fbm-tasten [data-fba="weg"] { display: none; }   /* Abbrechen steht als Kreuz im Kopf */
.fbm-lage[data-flach] .fbm[data-ort="mitte"] [data-s="grund"] .fba-urteil { display: none; }
.fbm-lage[data-flach] .fbm[data-ort="mitte"] [data-s="grund"] .fba-schluss { grid-column: 1 / -1; align-self: end; }
/* die Kacheln der Querfassung: das Zeichen über dem Wort, mittig; der Ring klein in der Ecke */
.fbm-lage[data-flach] .fbm[data-ort="mitte"] .fbm-kachel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 6px 6px; text-align: center; }
.fbm-lage[data-flach] .fbm[data-ort="mitte"] .fbm-kachel > .fbm-kic, .fbm-lage[data-flach] .fbm[data-ort="mitte"] .fbm-kachel > b { position: static; transform: none; margin: 0; }
.fbm-lage[data-flach] .fbm[data-ort="mitte"] .fbm-kachel > .fbm-kic { width: 28px; height: 28px; }
.fbm-lage[data-flach] .fbm[data-ort="mitte"] .fbm-kachel > .fbm-kic svg { width: 17px; height: 17px; }
.fbm-lage[data-flach] .fbm[data-ort="mitte"] .fbm-kachel > b { max-width: 100%; font-size: 12.5px; line-height: 1.12; }
.fbm-lage[data-flach] .fbm[data-ort="mitte"] .fbm-kachel > .fbm-khaken { top: 5px; right: 5px; width: 15px; height: 15px; margin: 0; }
.fbm-lage[data-flach] .fbm[data-ort="mitte"] .fbm-kachel > .fbm-khaken svg { width: 10px; height: 10px; }
.fbm-lage[data-flach] .fbm[data-ort="mitte"] [data-s="grund"] .fbm-feld.zeile:only-child { grid-column: 1 / -1; }
/* Das zweite Kreuz (im Kopf von „Was war am besten?“) gibt es nur in der Querfassung. */
.fba-bogen .fba-zu2 { display: none !important; }
.fbm-lage[data-flach] .fba-bogen .fba-zu2 { display: grid !important; }
.fbm-lage[data-flach] .fba-bogen[data-schritt="dank"] .fbm[data-ort="mitte"] [data-s="grund"] .fbm-feld.zeile { display: none; }   /* danach: die Bestätigung über die ganze Reihe */