/* =====================================================================
   feedback/abend.css — Die Bewertung des Sets im Abendende: DER BOGEN (feedback/abend.js, Bogen).
   Eingekleidet NUR über die Farbrollen (--acc, --acc2, --g0…, --t0…, --auf-*): trägt in jedem Set.
   Bewegung nur über transform und opacity; reduzierte Bewegung / „Ruhiger Schirm": alles steht.
   Ein Bogen, zwei Orte: am Handy IST er die Mitte des Finales (.hk-fin > .fba-bogen, randlos); online steht er im Seitenblatt
   rechts (.fbm-lage[data-weg="online"], feedback/melden.css — seit 27.10. nachts; die alte Karte in der linken Spalte ist weg).
   Seine Zeilen, Kacheln, Tasten und die Bestätigung gehören der Formularfamilie von „Problem melden“ (feedback/melden.css). Nie am Fernseher.
   ===================================================================== */

/* ---- der Grund des Bogens ---- */
.fba { font-family: var(--f-display, 'Outfit', system-ui, sans-serif); font-size: 15px; color: var(--t0); pointer-events: none; }
/* Die Grundwerte der Knöpfe — mit :where() ohne Gewicht: Sie dürfen die Maße der Formularfamilie nicht überschreiben. */
:where(.fba) button { font: inherit; color: inherit; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.fba button:focus-visible, .fba textarea:focus-visible { outline: 2.5px solid var(--t0); outline-offset: 2px; }
.fba-geht { pointer-events: none; }
/* „Wie war <Set>?“ — das „?“ bleibt am Namen */
.fba-titel { flex: 1 1 auto; min-width: 0; gap: .28em; margin: 0; }
.fba-wie { flex: none; color: var(--t1); font-weight: 700; }
.fba-set { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; color: var(--t0); }
.fba-fz { margin-left: .03em; }
/* „Danke an“ klein über dem Namen: Der Name (auch ein langer Creator) bekommt die ganze Breite und läuft erst dann weich aus. */
.fba-herz { overflow: visible; justify-content: flex-start; padding-left: 14px; }
.fba-herz .fba-hw { display: grid; min-width: 0; text-align: left; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; }
.fba-herz .fba-hw small { font-family: var(--f-body, system-ui, sans-serif); font-size: .7em; font-weight: 700; color: var(--t1); }
.fba-herz .fba-hw b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 900; }
.fba-herz.gesagt { justify-content: center; opacity: 1 !important; color: var(--t1); }
/* das Herz: schlägt einmal, kleine Herzen steigen auf */
.fba-hz { position: relative; flex: none; display: grid; place-items: center; width: 22px; height: 22px; color: var(--acc); }
.fba-hz > svg { width: 100%; height: 100%; }
.fba-hzk { position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; color: var(--acc); opacity: 0; pointer-events: none;
  animation: fba-hzk .95s cubic-bezier(.2, .7, .3, 1) var(--d) both; }
.fba-hzk svg { display: block; width: 100%; height: 100%; }
.fba-hz.schlaegt > svg { animation: fba-herz .56s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes fba-herz { 0% { transform: none; } 30% { transform: scale(1.4); } 60% { transform: scale(.9); } 100% { transform: none; } }
@keyframes fba-hzk { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), -54px) rotate(var(--r)) scale(1.05); } }

/* Der Knopf „Feedback" im Pult: nach dem Senden ein kleiner Haken (am Pult gemerkt — der Host-Wechsel baut die Tasten neu) */
.qo-pult .qo-e-knopf[data-tu="feedback"] { position: relative; }
.qo-pult.qo-fb-fertig .qo-e-knopf[data-tu="feedback"]::after { content: ""; position: absolute; right: -.5cqmin; top: -.5cqmin; width: max(14px, 2.6cqmin); height: max(14px, 2.6cqmin); border-radius: 50%;
  background: var(--acc); box-shadow: 0 0 0 .3cqmin var(--g0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.6l4 4L18.2 8' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 78% no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fba-haken .46s cubic-bezier(.3, 1.6, .5, 1) both; }
/* Die Zahl der Meldungen aus dem Quiz, zu denen man im Finale mehr sagen kann (melden.js, nachtragen) — links oben, der Haken steht rechts */
.qo-pult .qo-e-knopf[data-tu="feedback"] .qo-fb-zahl { position: absolute; left: -.5cqmin; top: -.5cqmin; z-index: 2; min-width: max(16px, 2.8cqmin); height: max(16px, 2.8cqmin);
  padding: 0 .5cqmin; box-sizing: border-box; display: grid; place-items: center; border-radius: 99px; font: 900 max(10px, 1.7cqmin)/1 var(--f-display, sans-serif); font-style: normal;
  color: var(--auf-acc, #101010); background: var(--acc); box-shadow: 0 0 0 .3cqmin var(--g0); pointer-events: none; animation: fba-haken .46s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes fba-haken { 0% { opacity: 0; transform: scale(.3); } 100% { opacity: 1; transform: none; } }

/* ---- HANDY (K6): DER BOGEN IST DIE MITTE des Finales (abend.js, Bogen) — randlos, in der Formularfamilie von „Problem melden“
   (feedback/melden.css: .fbm[data-ort="mitte"] — Zeilen, Kacheln, Tasten, „Danke, eingereicht“). Hier steht nur, was der Bogen
   allein hat: seine Lage, die Gesichter, die Zahl, das Urteil im Kopf und das Herz neben der Bestätigung. Die Wahl dahinter tritt
   ganz zurück (abend.js, zuruecktreten). ---- */
.hk-fin > .fba-bogen { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; padding: 2px 1px 0; font-family: inherit; }
.hk-fin[data-akt][data-fbkarte] > .fh-blatt.fh-wahl { pointer-events: none; }
.fba-bogen > .fbm { pointer-events: auto; transform-origin: 50% 30%; }
.fba-bogen.fba-auftritt > .fbm { animation: fbm-karte-auf .42s cubic-bezier(.2, .8, .2, 1) var(--fba-vor, 0ms) both; }
.fba-bogen.fba-auftritt .fbm-erst .fbm-wahl { animation-delay: calc(var(--fba-vor, 0ms) + 100ms + var(--i, 0) * 55ms); }
.fba-bogen.fba-geht > .fbm { pointer-events: none; }

/* der Titel: „Wie war“ leiser, der Name des Sets hell; ein langer Name rückt in die zweite Zeile und kürzt dort mit „…“ (das „?“ bleibt) */
.fba-bogen .fba-titel { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .28em; }
.fba-bogen .fba-wie { flex: none; color: var(--t1); font-weight: 700; }
.fba-bogen .fba-set { display: flex; min-width: 0; max-width: 100%; font-weight: 800; color: var(--t0); }
.fba-bogen .fba-set > span { min-width: 0; overflow: hidden; white-space: nowrap; }   /* gekürzt wird in abend.js (kuerze), dicht vor dem „?“ */
.fba-bogen .fba-fz { flex: none; font-style: normal; }
/* Abbrechen als Kreuz im Kopf — nur auf dem niedrigen Gerät; dort fällt die Taste unten weg */
.fba-bogen .fba-zu { display: none; }
.fba-bogen[data-eng] .fba-zu { display: grid; margin: 0 -2px 0 0; }
.fba-bogen[data-eng] [data-s="wert"] .fbm-tasten { display: none; }
.fba-zu svg { width: 16px; height: 16px; }
/* Schritt 2 auf dem niedrigen Gerät: ohne „Mehrere gehen“ (die Ringe sagen es), damit drei Reihen Kacheln und die Zeile passen */
.fba-bogen[data-eng] [data-s="grund"] .fbm-etikett { display: none; }
.fba-bogen[data-eng] .fbm[data-ort="mitte"] .fbm-rumpf > .fbm-kacheln { grid-auto-rows: minmax(48px, 1fr); gap: 6px; }
/* … und die fünf Zeilen rücken auf 5 px zusammen: So passen sie auch unter einen zweizeiligen Titel (ein langer Set-Name). */
.fba-bogen[data-eng] .fbm[data-ort="mitte"] .fba-werte { gap: 5px; }
/* MIT TASTATUR (abend.js: am Telefon, sobald man in „Noch was?“ schreibt): Die Kacheln treten zurück (die Wahl bleibt), die Zeile wird drei
   Zeilen hoch, und die Tasten stehen gleich darunter — alles oben in der Mitte, über der Tastatur. */
.fba-bogen[data-tast] .fbm[data-ort="mitte"] [data-s="grund"] :is(.fbm-etikett, .fbm-kacheln) { display: none; }
.fba-bogen[data-tast] .fbm[data-ort="mitte"] [data-s="grund"] .fbm-rumpf { flex: none; }
.fba-bogen[data-tast] .fbm[data-ort="mitte"] .fbm-feld.zeile .fbm-ta { min-height: calc(16px * 1.4 * 3 + 24px); }

/* Schritt 1: die fünf Zeilen — ein Gesicht im Kreis der Zeile, das Wort, die Zahl leise rechts */
.fba-gesicht svg { overflow: visible; }
.fba-bogen .fbm[data-ort="mitte"] .fba-gesicht svg { width: 34px; height: 34px; }
.fba-bogen[data-schmal] .fbm[data-ort="mitte"] .fba-gesicht svg { width: 28px; height: 28px; }
.fba-zahl { font: 900 15px/1 var(--fbm-disp); font-style: normal; font-variant-numeric: tabular-nums; color: var(--t2); padding-right: 4px; transition: color .2s ease; }
.fba-wert[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--acc), 0 4px 0 color-mix(in srgb, var(--g0) 85%, #000); }
.fba-wert[aria-checked="true"] .fbm-wic { background: var(--acc); color: var(--auf-acc, var(--g0)); }
.fba-wert[aria-checked="true"] .fba-zahl { color: var(--acc); }
.fba-wert.rastet .fbm-wic svg { animation: fba-strahlt .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes fba-strahlt { 0% { transform: none; } 40% { transform: scale(1.22) rotate(-6deg); } 100% { transform: none; } }
.fba-bogen[data-schmal] .fba-zahl { font-size: 14px; }

/* Schritt 2: das Urteil im Kopf — das gewählte Gesicht und seine Zahl (zurück über den Pfeil) */
.fba-urteil { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 5px; font-size: 13px; letter-spacing: 0; }
.fba-urteil i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--acc); color: var(--auf-acc, var(--g0)); }
.fba-urteil svg { width: 15px; height: 15px; }

/* Danach: neben „Danke, eingereicht“ das Herz für den Creator (dieselbe Höhe wie die Tasten) */
.fba-schluss { flex: none; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; }
.fba-schluss.allein { grid-template-columns: minmax(0, 1fr); }
.fba-bogen .fba-herz { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 0 12px 0 14px; overflow: visible; animation: fbm-drin .36s cubic-bezier(.2, .8, .2, 1) .12s both; }
.fba-bogen .fba-herz .fba-hw { display: grid; min-width: 0; text-align: left; font: 900 15px/1.1 var(--fbm-disp); }
.fba-bogen .fba-herz .fba-hw small { font: 700 11.5px/1.2 var(--fbm-text); color: var(--t1); }
.fba-bogen .fba-herz .fba-hw b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fba-bogen .fba-herz.gesagt { justify-content: center; opacity: 1; }
.fba-bogen .fba-herz.gesagt .fba-hw { color: var(--t1); }

/* ---- ONLINE: im Seitenblatt (melden.css, .fbm-lage[data-weg="online"]) füllt der Bogen das Blatt ---- */
.fbm-lage .fba-bogen { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

/* Der Knopf „Feedback" im Feld des Knopfs: beim Host neben „<Set> spielen" (an der Stelle von „Nochmal"), beim Gast neben „Jubeln" */
.fh-feld > button.fh-fb { gap: 3px; }
.fh-fb i { width: 24px; height: 24px; } .fh-fb i svg { display: block; width: 100%; height: 100%; }
.fh-fb-haken { position: absolute; right: 7px; top: 7px; display: none; width: 18px; height: 18px; padding: 3px; box-sizing: border-box; border-radius: 50%; background: var(--hk-akzent, var(--acc)); color: var(--hk-auf-akzent, var(--g0)); text-decoration: none; }
.fh-fb-haken svg { display: block; width: 100%; height: 100%; }
.hk[data-fbfertig] .fh-fb-haken { display: block; animation: fba-haken .46s cubic-bezier(.3, 1.6, .5, 1) both; }
/* Gast: „Jubeln" bleibt (der Knopf des Rahmens), rückt nur für „Feedback" zur Seite — ohne seinen Untertitel. */
.hk.hk.g6[data-fin="3"][data-finfeld="fb"] .hk-stub { pointer-events: auto !important; }
.hk.hk.g6[data-fin="3"][data-finfeld="fb"] .hk-stub .hk-jubel { opacity: 1 !important; pointer-events: none; right: calc(var(--fh-noch, 104px) + 11px); padding-right: 52px; }
.hk.hk.g6[data-fin="3"][data-finfeld="fb"] .hk-stub .hk-jubel small { display: none; }
.hk.hk.g6[data-fin="3"][data-finfeld="fb"] .hk-stub .hk-jubel b { font-size: 21px; letter-spacing: .08em; }
.hk.hk.g6[data-schmal][data-fin="3"][data-finfeld="fb"] .hk-stub .hk-jubel b { font-size: 18px; letter-spacing: .05em; }

@media (prefers-reduced-motion: reduce) {
  .fba *, .fba *::before, .fba *::after, .qo-pult.qo-fb-fertig .qo-e-knopf[data-tu="feedback"]::after, .hk[data-fbfertig] .fh-fb-haken { animation: none !important; transition: none !important; }
}
.still .fba *, .still .fba *::before { animation: none !important; transition: none !important; }