/* ===================================================================== Quiznight 2 — Kategorien-Entwurf · gemeinsames Fundament Alles, was auf JEDER der 36 Bühnen gleich ist. Kategorie-eigenes CSS liegt in kat/.js und ist mit .k- gescoped. ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } :root { /* DIE MARKENFARBEN, aus dem Altbestand gemessen (149 Fundstellen des Verlaufs `linear-gradient(135deg,#a855f7,#6366f1)`), Tobis Anordnung vom 2026-09-22: „Ich will dabei die alten Quiznight-Farben beibehalten." Die Gruende haben einen VIOLETTSTICH. Getoentes Schwarz statt neutralem ist kein Geschmack: Es laesst die Farben darauf gesaettigter wirken, und die vermessenen Vorbilder machen es alle so (Jackbox' haeufigste Pixel sind #204020 und #202040, nie #000000). Vorher stand hier ein neutrales Blaugrau — das war der Hauptgrund, warum die Schirme wie ein Dashboard aussahen. */ --g0: #07060f; --g1: #0c0a1a; --g2: #161231; --g3: #1f1946; --g4: #2e2660; --t0: #f5f1ff; --t1: #b9afe4; --t2: #8177b5; /* ROLLEN, NICHT FARBEN (Tobi, 2026-09-23 — Plan A.5, F.2.7): Hier steht die Marke. Ein Set mit eigenen Farben ueberschreibt ALLE folgenden Namen auf einmal mit QN.thema(farben) (qn.js) — Gruende, Schrift und „du" haengen von den zwei Set-Farben ab. Die Kategorien haben seitdem keine eigene Farbe mehr; wer hier eine Farbe braucht, nimmt eine Rolle: --acc die Buehne (Violett) --acc2 die Tiefe (Indigo) --jetzt was sich gerade aendert --du das eigene Ich (Tuerkis) --auf-X die Schrift AUF der Flaeche X — nie selbst waehlen, die Werte folgen Regel 03 der Designsprache: helle Flaechen (ab OKLCH-L 0,7) tragen dunkle Schrift, tiefe die helle — ausser die helle fiele unter 3:1. `--pink` und `--m1..--m3` sind aeltere Namen derselben Rollen und folgen dem Set mit. Nur der Schriftzug malt die Marke woertlich. */ --acc: #a855f7; --acc2: #6366f1; --jetzt: #e879f9; --pink: #e879f9; --m1: #e879f9; --m2: #a855f7; --m3: #6366f1; --ok: #22c55e; --warn: #fbbf24; --bad: #ef4444; --du: #22d3ee; --auf-acc: #f5f1ff; --auf-acc2: #f5f1ff; --auf-jetzt: #240828; --auf-du: #001a1f; --auf-ok: #001d07; --auf-warn: #1f1400; --auf-bad: #f5f1ff; --d-kurz: 140ms; --d-mittel: 260ms; --d-lang: 520ms; --d-xl: 900ms; --k-ein: cubic-bezier(.2, .8, .2, 1); --k-aus: cubic-bezier(.4, 0, 1, 1); --k-schnapp: cubic-bezier(.34, 1.56, .64, 1); --f-display: 'Outfit', system-ui, sans-serif; --f-body: 'Plus Jakarta Sans', system-ui, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, monospace; } @media (prefers-reduced-motion: reduce) { :root { --d-kurz: 1ms; --d-mittel: 1ms; --d-lang: 1ms; --d-xl: 1ms; } } /* ===================================================================== 1. DIE BÜHNE — der Activity-Rahmen Feste Pixelgröße (Stützstelle), innen ausschließlich cqmin/%/fr. ===================================================================== */ .qn-buehne { position: relative; container-type: size; overflow: hidden; isolation: isolate; display: grid; grid-template-rows: auto 1fr; background: var(--g1); color: var(--t0); font-family: var(--f-body); font-size: 2.6cqmin; line-height: 1.35; -webkit-font-smoothing: antialiased; user-select: none; } /* Grundschleier: verhindert, dass eine Bühne je „nackt" wirkt */ .qn-buehne::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% -20%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 62%), radial-gradient(90% 70% at 100% 110%, color-mix(in srgb, var(--acc2) 14%, transparent), transparent 60%); } /* DAS MOTIV DES SETS (theme.motif, Plan F.2) — Tobi, 2026-09-23: „ein Set zum Thema Rennsport sollte auch wie Rennsport aussehen." Farben allein schaffen das nicht; das Motiv stellt JEDE der 24 Bühnen in die Welt des Sets, ohne dass eine Kategorie davon weiss. Es liegt in ::after hinter dem Inhalt (die Kinder tragen z-index 1), bleibt in der Schriftfarbe des Grunds und laeuft zu den Raendern aus — Muster in der Mitte stuenden hinter der Frage. Gesetzt wird es mit QN.themaSetzen (data-motiv an der Wurzel). */ .qn-buehne::after, .qn-hand::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; --motiv-ton: color-mix(in srgb, var(--t0) 9%, transparent); } /* Zielflagge: ein Karofeld, das oben rechts und unten links aus der Ecke kommt. */ [data-motiv="karo"] :is(.qn-buehne, .qn-hand)::after { background: repeating-conic-gradient(var(--motiv-ton) 0 25%, transparent 0 50%) 0 0 / 6cqmin 6cqmin; -webkit-mask: radial-gradient(48% 62% at 102% -4%, #000 30%, transparent 72%), radial-gradient(40% 52% at -2% 104%, #000 20%, transparent 70%); mask: radial-gradient(48% 62% at 102% -4%, #000 30%, transparent 72%), radial-gradient(40% 52% at -2% 104%, #000 20%, transparent 70%); } /* Tempo: schraege Streifen, die von links einlaufen und in der Mitte enden. */ [data-motiv="tempo"] :is(.qn-buehne, .qn-hand)::after { background: repeating-linear-gradient(108deg, var(--motiv-ton) 0 .7cqmin, transparent .7cqmin 3.4cqmin); -webkit-mask: linear-gradient(90deg, #000 0%, transparent 38%, transparent 70%, rgba(0,0,0,.5) 100%); mask: linear-gradient(90deg, #000 0%, transparent 38%, transparent 70%, rgba(0,0,0,.5) 100%); } /* Pixel: Klötzchen mit Fuge, wie ein grober Bildschirm — sie kommen oben rechts und unten links aus der Ecke (Gaming). Jede Kachel ist ein Viertel eines Kegelverlaufs: das Quadrat oben links, 72 % breit, der Rest Fuge. */ [data-motiv="pixel"] :is(.qn-buehne, .qn-hand)::after { background: conic-gradient(at 72% 72%, transparent 75%, var(--motiv-ton) 0) 0 0 / 2.8cqmin 2.8cqmin; -webkit-mask: radial-gradient(46% 60% at 102% -4%, #000 26%, transparent 70%), radial-gradient(42% 54% at -2% 104%, #000 22%, transparent 68%); mask: radial-gradient(46% 60% at 102% -4%, #000 26%, transparent 70%), radial-gradient(42% 54% at -2% 104%, #000 22%, transparent 68%); } /* Raster: ein feines Punktfeld — Stadion, Anzeigetafel, Labor. */ [data-motiv="raster"] :is(.qn-buehne, .qn-hand)::after { background: radial-gradient(circle, var(--motiv-ton) 0 .32cqmin, transparent .36cqmin) 0 0 / 2.4cqmin 2.4cqmin; -webkit-mask: radial-gradient(75% 85% at 50% 50%, transparent 35%, #000 100%); mask: radial-gradient(75% 85% at 50% 50%, transparent 35%, #000 100%); } /* Schnee (Weihnachten): kein Hintergrundmuster mehr. Die Flocken lasen sich als Lichtkreise hinter den Kategorien (Tobi, 03.11.: „lösche diese Lichter im Hintergrund überall aus jeder Kategorie"). */ /* Filmstreifen (Kino): Jede Bühne ist ein Bild auf dem Film — an ihren Rändern steht die Perforation. Rechts läuft die Lochreihe von oben herein, links von unten, je auf einem schmalen dunklen Träger. Die Löcher sind Kacheln wie beim Pixel-Motiv (ein Viertel eines Kegelverlaufs), nur hoch statt quadratisch. Beide Reihen laufen zur Mitte der Kante hin aus (zwei Masken, je eine Bildhälfte). EINE Reihe je Seite, ganz am Rand: Ein breiterer Streifen mit Bildstegen lief hinter die Uhr im Kopf und las sich dort als Leiter (im Bild geprüft). */ [data-motiv="filmstreifen"] :is(.qn-buehne, .qn-hand)::after { --motiv-ton: color-mix(in srgb, var(--t0) 17%, transparent); --motiv-kino-film: color-mix(in srgb, var(--g0) 44%, transparent); background: conic-gradient(at 62% 60%, transparent 75%, var(--motiv-ton) 0) right .33cqmin top .4cqmin / 1.5cqmin 2.5cqmin repeat-y, conic-gradient(at 62% 60%, transparent 75%, var(--motiv-ton) 0) left .9cqmin top 1.3cqmin / 1.5cqmin 2.5cqmin repeat-y, linear-gradient(var(--motiv-kino-film), var(--motiv-kino-film)) right 0 top 0 / 2.5cqmin 100% no-repeat, linear-gradient(var(--motiv-kino-film), var(--motiv-kino-film)) left 0 top 0 / 2.5cqmin 100% no-repeat; -webkit-mask: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .6) 40%, transparent 78%) right top / 50% 100% no-repeat, linear-gradient(0deg, #000 0, rgba(0, 0, 0, .6) 40%, transparent 78%) left top / 50% 100% no-repeat; mask: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .6) 40%, transparent 78%) right top / 50% 100% no-repeat, linear-gradient(0deg, #000 0, rgba(0, 0, 0, .6) 40%, transparent 78%) left top / 50% 100% no-repeat; } /* Tasten (Musik): An den Rändern jeder Bühne liegt ein Stück Klaviatur — eine helle Leiste aus weißen Tasten, darauf die schwarzen in Gruppen zu zwei und drei (die Gruppen unterscheiden sie vom gleichmäßigen Lochrand des Films). Rechts läuft sie von oben herein, links von unten, je zur Mitte der Kante hin aus — oben und unten bleibt frei (Kopf und Uhr, Antworten). Eine Oktave sind sieben weiße Tasten (je 2,4 cqmin); die schwarzen sitzen auf den Fugen 1 · 2 · 4 · 5 · 6 und ragen 62 % in die Leiste hinein. Nur Verläufe, nichts bewegt sich. */ [data-motiv="tasten"] :is(.qn-buehne, .qn-hand)::after { --motiv-tasten-weiss: color-mix(in srgb, var(--t0) 13%, transparent); --motiv-tasten-schwarz: color-mix(in srgb, var(--g0) 84%, transparent); --motiv-tasten-fuge: color-mix(in srgb, var(--g0) 52%, transparent); --motiv-tasten-oktave: linear-gradient(180deg, transparent 0 10.1%, var(--motiv-tasten-schwarz) 10.1% 18.4%, transparent 18.4% 24.4%, var(--motiv-tasten-schwarz) 24.4% 32.7%, transparent 32.7% 53%, var(--motiv-tasten-schwarz) 53% 61.3%, transparent 61.3% 67.3%, var(--motiv-tasten-schwarz) 67.3% 75.6%, transparent 75.6% 81.6%, var(--motiv-tasten-schwarz) 81.6% 89.9%, transparent 89.9%); background: var(--motiv-tasten-oktave) right 0 top 0 / 2.2cqmin 16.8cqmin repeat-y, var(--motiv-tasten-oktave) left 0 bottom 0 / 2.2cqmin 16.8cqmin repeat-y, linear-gradient(180deg, var(--motiv-tasten-fuge) 0 .16cqmin, transparent .16cqmin) right 0 top 0 / 3.6cqmin 2.4cqmin repeat-y, linear-gradient(0deg, var(--motiv-tasten-fuge) 0 .16cqmin, transparent .16cqmin) left 0 bottom 0 / 3.6cqmin 2.4cqmin repeat-y, linear-gradient(var(--motiv-tasten-weiss), var(--motiv-tasten-weiss)) right 0 top 0 / 3.6cqmin 100% no-repeat, linear-gradient(var(--motiv-tasten-weiss), var(--motiv-tasten-weiss)) left 0 top 0 / 3.6cqmin 100% no-repeat; -webkit-mask: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .6) 40%, transparent 78%) right top / 50% 100% no-repeat, linear-gradient(0deg, #000 0, rgba(0, 0, 0, .6) 40%, transparent 78%) left top / 50% 100% no-repeat; mask: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .6) 40%, transparent 78%) right top / 50% 100% no-repeat, linear-gradient(0deg, #000 0, rgba(0, 0, 0, .6) 40%, transparent 78%) left top / 50% 100% no-repeat; } /* Luftpost (Weltreise): Jede Bühne ist ein Luftpostbrief — an ihren vier Kanten läuft der gestreifte Rand, schräge Streifen im Wechsel Azur · hell · Koralle · hell. ZWEIFARBIG und gedämpft (rund ein Drittel Deckkraft): Einfarbig läse er sich wie das Motiv „tempo" oder wie Curbs. Wie die Lochreihe des Filmstreifens läuft er zur Mitte jeder Kante hin aus — die Ecken tragen ihn, die Mitte der Kanten (Kopf, Uhr, Antworten) bleibt frei. Ein Rand, nichts in der Mitte, keine Schrift. */ [data-motiv="luftpost"] :is(.qn-buehne, .qn-hand)::after { --motiv-luftpost-b: max(5px, 1.5cqmin); --motiv-luftpost-s: max(4px, 1.15cqmin); --motiv-luftpost-azur: color-mix(in srgb, var(--acc) 40%, transparent); --motiv-luftpost-hell: color-mix(in srgb, var(--t0) 16%, transparent); --motiv-luftpost-koralle: color-mix(in srgb, var(--acc2) 40%, transparent); --motiv-luftpost-quer: linear-gradient(90deg, #000 0, rgba(0, 0, 0, .55) 22%, transparent 40% 60%, rgba(0, 0, 0, .55) 78%, #000 100%); --motiv-luftpost-hoch: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .55) 22%, transparent 40% 60%, rgba(0, 0, 0, .55) 78%, #000 100%); background: repeating-linear-gradient(-45deg, var(--motiv-luftpost-azur) 0 var(--motiv-luftpost-s), var(--motiv-luftpost-hell) var(--motiv-luftpost-s) calc(var(--motiv-luftpost-s) * 2), var(--motiv-luftpost-koralle) calc(var(--motiv-luftpost-s) * 2) calc(var(--motiv-luftpost-s) * 3), var(--motiv-luftpost-hell) calc(var(--motiv-luftpost-s) * 3) calc(var(--motiv-luftpost-s) * 4)); -webkit-mask: var(--motiv-luftpost-quer) top / 100% var(--motiv-luftpost-b) no-repeat, var(--motiv-luftpost-quer) bottom / 100% var(--motiv-luftpost-b) no-repeat, var(--motiv-luftpost-hoch) left / var(--motiv-luftpost-b) 100% no-repeat, var(--motiv-luftpost-hoch) right / var(--motiv-luftpost-b) 100% no-repeat; mask: var(--motiv-luftpost-quer) top / 100% var(--motiv-luftpost-b) no-repeat, var(--motiv-luftpost-quer) bottom / 100% var(--motiv-luftpost-b) no-repeat, var(--motiv-luftpost-hoch) left / var(--motiv-luftpost-b) 100% no-repeat, var(--motiv-luftpost-hoch) right / var(--motiv-luftpost-b) 100% no-repeat; } /* Blütenblätter (Anime): einzelne Kirschblütenblätter MIT DER KERBE an der Spitze, die schräg aus zwei Ecken hereinwehen (oben rechts, unten links), dazwischen eine ganze fünfblättrige Blüte. Kein rosa Schnee: Weihnachten lässt runde Flocken aus den anderen zwei Ecken rieseln, hier zählen Form (gekerbt, länglich, gedreht) und Richtung (Wind, schräg). Die Blätter sind eine gezeichnete Kachel (300 × 260, neun Blätter und eine Blüte, unregelmäßig gedreht — kein Raster zu sehen) als MASKE; die Farbe kommt aus den Rollen (Rosa mit etwas Schrift, ganz leise). Die zweite und dritte Maske blenden die Ecken aus; mask-composite verschneidet beides (Blätter UND Ecke). --blueten-blatt ist EIN Blatt (Spitze oben, Fuß unten) — die Teile des Sets, die Blütenblätter zeigen (Szene, Lobby, Zwischenstand, Schluss), nehmen es als Maske. */ :root { --blueten-blatt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -10 16 20'%3E%3Cpath d='M0 9C-6.5 4-7-5-3-9L0-6 3-9C7-5 6.5 4 0 9Z'/%3E%3C/svg%3E"); --blueten-kachel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 260'%3E%3Cdefs%3E%3Cpath id='b' d='M0 9C-6.5 4-7-5-3-9L0-6 3-9C7-5 6.5 4 0 9Z'/%3E%3Cg id='k'%3E%3Cuse href='%23b' transform='translate(0 -9)'/%3E%3Cuse href='%23b' transform='rotate(72) translate(0 -9)'/%3E%3Cuse href='%23b' transform='rotate(144) translate(0 -9)'/%3E%3Cuse href='%23b' transform='rotate(216) translate(0 -9)'/%3E%3Cuse href='%23b' transform='rotate(288) translate(0 -9)'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23b' transform='translate(34 42) rotate(42) scale(1.15)'/%3E%3Cuse href='%23b' transform='translate(118 24) rotate(-58) scale(.78)' opacity='.7'/%3E%3Cuse href='%23b' transform='translate(212 64) rotate(118) scale(1.05)'/%3E%3Cuse href='%23b' transform='translate(276 30) rotate(18) scale(.7)' opacity='.6'/%3E%3Cuse href='%23b' transform='translate(70 128) rotate(-24) scale(.72)' opacity='.65'/%3E%3Cuse href='%23b' transform='translate(168 176) rotate(70) scale(1.2)'/%3E%3Cuse href='%23b' transform='translate(26 214) rotate(152) scale(.9)' opacity='.8'/%3E%3Cuse href='%23b' transform='translate(250 222) rotate(-120) scale(.85)' opacity='.75'/%3E%3Cuse href='%23b' transform='translate(112 238) rotate(30) scale(.6)' opacity='.55'/%3E%3Cuse href='%23k' transform='translate(232 140) scale(.62)' opacity='.9'/%3E%3C/svg%3E"); } [data-motiv="blueten"] :is(.qn-buehne, .qn-hand)::after { --motiv-ton: color-mix(in srgb, color-mix(in srgb, var(--acc) 62%, var(--t0)) 26%, transparent); background: var(--motiv-ton); -webkit-mask: var(--blueten-kachel) 0 0 / 27cqmin 23.4cqmin repeat, radial-gradient(52% 64% at 102% -4%, #000 26%, transparent 70%), radial-gradient(46% 58% at -2% 104%, #000 20%, transparent 68%); mask: var(--blueten-kachel) 0 0 / 27cqmin 23.4cqmin repeat, radial-gradient(52% 64% at 102% -4%, #000 26%, transparent 70%), radial-gradient(46% 58% at -2% 104%, #000 20%, transparent 68%); -webkit-mask-composite: source-in, source-over; mask-composite: intersect, add; } /* Fliesen (Küche): die weißen Metro-Fliesen hinter der Herdzeile — längliche Fliesen im HALBEN VERSATZ (jede Reihe um eine halbe Fliese verschoben), dazwischen die Fuge. Kein Karo (Rennsport: Quadrate im Schachbrett) und kein Raster (Gaming): Die Reihen stehen gegeneinander versetzt, jede Fliese ist doppelt so breit wie hoch und hat oben ihren Glanz (die Glasur fängt das Licht der Wärmelampen). Sie kommen aus zwei Ecken (oben rechts, unten links) und laufen an den Kanten entlang aus — die Mitte bleibt frei für die Frage. Die Kachel ist eine gezeichnete Maske (zwei Reihen, 40 × 20); die Farbe kommt aus den Rollen (die Schrift des Grunds, leise). Eine Variable trägt das Motiv im Namen (--fliesen-kachel), damit die Teile des Sets, die Fliesen zeigen (Lobby, Pult, Zwischenstand), dieselbe Kachel nehmen. */ :root { --fliesen-kachel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cg fill='%23000'%3E%3Crect x='.6' y='.6' width='18.8' height='8.8' rx='1.1' fill-opacity='.72'/%3E%3Crect x='20.6' y='.6' width='18.8' height='8.8' rx='1.1' fill-opacity='.72'/%3E%3Crect x='-9.4' y='10.6' width='18.8' height='8.8' rx='1.1' fill-opacity='.72'/%3E%3Crect x='10.6' y='10.6' width='18.8' height='8.8' rx='1.1' fill-opacity='.72'/%3E%3Crect x='30.6' y='10.6' width='18.8' height='8.8' rx='1.1' fill-opacity='.72'/%3E%3Crect x='1.6' y='1.4' width='16.8' height='1.6' rx='.8'/%3E%3Crect x='21.6' y='1.4' width='16.8' height='1.6' rx='.8'/%3E%3Crect x='-8.4' y='11.4' width='16.8' height='1.6' rx='.8'/%3E%3Crect x='11.6' y='11.4' width='16.8' height='1.6' rx='.8'/%3E%3Crect x='31.6' y='11.4' width='16.8' height='1.6' rx='.8'/%3E%3C/g%3E%3C/svg%3E"); } [data-motiv="fliesen"] :is(.qn-buehne, .qn-hand)::after { --motiv-ton: color-mix(in srgb, var(--t0) 15%, transparent); background: var(--motiv-ton); -webkit-mask: var(--fliesen-kachel) 0 0 / 9.2cqmin 4.6cqmin repeat, radial-gradient(58% 46% at 102% -4%, #000 30%, transparent 72%), radial-gradient(52% 42% at -2% 104%, #000 24%, transparent 70%); mask: var(--fliesen-kachel) 0 0 / 9.2cqmin 4.6cqmin repeat, radial-gradient(58% 46% at 102% -4%, #000 30%, transparent 72%), radial-gradient(52% 42% at -2% 104%, #000 24%, transparent 70%); -webkit-mask-composite: source-in, source-over; mask-composite: intersect, add; } /* Schuppen (Sagenwelt): die Haut des Drachen, auf den der Abend zuläuft — Reihen dünner Halbbögen, jede Reihe um einen halben Bogen versetzt, Schuppe unter Schuppe. Keine Spitzen, kein Glanz: eine ruhige Linie aus Halbkreisen, die auch bei 628 × 390 noch als Schuppen liest. Sie kommen aus zwei Ecken (oben rechts, unten links) und laufen zur Mitte hin aus — die Frage bleibt frei. Jade, zu den Ecken hin ein Hauch Purpur (der Verlauf unter der Maske). Die Kachel trägt das Motiv im Namen (--schuppen-kachel), damit die Teile des Sets dieselbe Schuppe nehmen. */ :root { --schuppen-kachel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 0a6 6 0 0 0 12 0a6 6 0 0 0 12 0M-6 6a6 6 0 0 0 12 0a6 6 0 0 0 12 0a6 6 0 0 0 12 0' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E"); } [data-motiv="schuppen"] :is(.qn-buehne, .qn-hand)::after { background: radial-gradient(60% 52% at 100% 0, color-mix(in srgb, var(--acc2) 46%, transparent), transparent 74%), radial-gradient(56% 50% at 0 100%, color-mix(in srgb, var(--acc2) 40%, transparent), transparent 74%), color-mix(in srgb, var(--acc) 26%, transparent); -webkit-mask: var(--schuppen-kachel) 0 0 / 5.6cqmin 2.8cqmin repeat, radial-gradient(58% 46% at 102% -4%, #000 30%, transparent 72%), radial-gradient(52% 42% at -2% 104%, #000 24%, transparent 70%); mask: var(--schuppen-kachel) 0 0 / 5.6cqmin 2.8cqmin repeat, radial-gradient(58% 46% at 102% -4%, #000 30%, transparent 72%), radial-gradient(52% 42% at -2% 104%, #000 24%, transparent 70%); -webkit-mask-composite: source-in, source-over; mask-composite: intersect, add; } /* Sternenlinie (Weltall): der Rand einer Sternkarte — Sternpunkte verschiedener Helligkeit, die eine haarfeine Linie verbindet, wie die Sternbilder auf einer drehbaren Sternkarte. Nicht Schnee (unverbundene Punkte, Weihnachten), nicht Filmstreifen (Löcher in Reihe, Kino), nicht Pixel. Sie kommt aus zwei Ecken (oben rechts, unten links) und läuft zur Mitte hin aus — die Frage bleibt frei. Sternensilber, zu den Ecken hin ein Hauch Marsrost (der Verlauf unter der Maske). Die Kachel trägt das Motiv im Namen (--sternlinie-kachel), damit die Teile des Sets dieselbe Linie nehmen. */ :root { --sternlinie-kachel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cpath d='M0 19 9 12 21 16 30 6 42 10 51 22 60 19' fill='none' stroke='%23000' stroke-width='.6'/%3E%3Ccircle cx='9' cy='12' r='1.6'/%3E%3Ccircle cx='21' cy='16' r='1'/%3E%3Ccircle cx='30' cy='6' r='2.2'/%3E%3Ccircle cx='42' cy='10' r='1.2'/%3E%3Ccircle cx='51' cy='22' r='1.7'/%3E%3Ccircle cx='36' cy='25' r='.6'/%3E%3Ccircle cx='14' cy='26' r='.5'/%3E%3C/svg%3E"); } [data-motiv="sternlinie"] :is(.qn-buehne, .qn-hand)::after { background: radial-gradient(60% 52% at 100% 0, color-mix(in srgb, var(--acc2) 40%, transparent), transparent 74%), radial-gradient(56% 50% at 0 100%, color-mix(in srgb, var(--acc2) 28%, transparent), transparent 74%), color-mix(in srgb, var(--acc) 46%, transparent); -webkit-mask: var(--sternlinie-kachel) 0 0 / 12cqmin 6cqmin repeat, radial-gradient(58% 46% at 102% -4%, #000 30%, transparent 72%), radial-gradient(52% 42% at -2% 104%, #000 24%, transparent 70%); mask: var(--sternlinie-kachel) 0 0 / 12cqmin 6cqmin repeat, radial-gradient(58% 46% at 102% -4%, #000 30%, transparent 72%), radial-gradient(52% 42% at -2% 104%, #000 24%, transparent 70%); -webkit-mask-composite: source-in, source-over; mask-composite: intersect, add; } /* Blaupause (Erfinder): das Konstruktionsraster einer Blaupause — feine Linien wie auf Millimeterpapier, jede fünfte kräftiger. Es kommt aus zwei Ecken (oben rechts, unten links) und läuft zur Mitte hin aus; die Frage bleibt frei. Linien hat kein anderes Set (raster ist ein Punktfeld, filmstreifen eine Lochreihe). Die Linien sind das helle Blaupausenblau, zu den Ecken hin ein Hauch Glühfaden-Licht (der Verlauf unter der Maske). Die Kachel trägt das Motiv im Namen (--blaupause-kachel), damit die Teile des Sets dasselbe Raster nehmen. */ :root { --blaupause-kachel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M10 0V50M20 0V50M30 0V50M40 0V50M0 10H50M0 20H50M0 30H50M0 40H50' stroke='%23000' stroke-width='.7' opacity='.55'/%3E%3Cpath d='M.9 0V50M0 .9H50' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E"); } [data-motiv="blaupause"] :is(.qn-buehne, .qn-hand)::after { background: radial-gradient(54% 46% at 100% 0, color-mix(in srgb, var(--acc2) 30%, transparent), transparent 70%), radial-gradient(50% 44% at 0 100%, color-mix(in srgb, var(--acc2) 22%, transparent), transparent 70%), color-mix(in srgb, var(--acc) 52%, #fff); -webkit-mask: var(--blaupause-kachel) 0 0 / 9cqmin 9cqmin repeat, radial-gradient(58% 46% at 102% -4%, #000 26%, transparent 70%), radial-gradient(52% 42% at -2% 104%, #000 22%, transparent 68%); mask: var(--blaupause-kachel) 0 0 / 9cqmin 9cqmin repeat, radial-gradient(58% 46% at 102% -4%, #000 26%, transparent 70%), radial-gradient(52% 42% at -2% 104%, #000 22%, transparent 68%); -webkit-mask-composite: source-in, source-over; mask-composite: intersect, add; opacity: .5; } /* Mäander (Geschichte): das griechische Band aus rechtwinkligen Haken, der Rand antiker Vasen und Museumsfriese. Er läuft als schmaler Fries am oberen und unteren Rand und kommt aus zwei Ecken (oben rechts, unten links) — zur Mitte hin blendet er aus, die Frage bleibt frei. Haken in Linien hat kein anderes Set (blaupause ist ein Raster, sternlinie verbundene Punkte). Sepia, zu den Ecken hin Siegelrot (der Verlauf liegt im Grund, das Muster ist die Maske). Die Kachel trägt das Motiv im Namen (--maeander-kachel), damit die Teile des Sets denselben Fries nehmen. */ :root { --maeander-kachel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 9H4V1H12V7H8V5H10V3H6V9H16' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E"); } [data-motiv="maeander"] :is(.qn-buehne, .qn-hand)::after { background: linear-gradient(90deg, transparent 22%, color-mix(in srgb, var(--acc) 86%, #fff) 66%, var(--acc2) 100%) 0 0 / 100% 4.6cqmin no-repeat, linear-gradient(90deg, var(--acc2) 0, color-mix(in srgb, var(--acc) 86%, #fff) 34%, transparent 78%) 0 100% / 100% 4.6cqmin no-repeat; -webkit-mask: var(--maeander-kachel) 0 .9cqmin / max(16px, 4.4cqmin) max(10px, 2.75cqmin) repeat-x, var(--maeander-kachel) 0 calc(100% - .9cqmin) / max(16px, 4.4cqmin) max(10px, 2.75cqmin) repeat-x; mask: var(--maeander-kachel) 0 .9cqmin / max(16px, 4.4cqmin) max(10px, 2.75cqmin) repeat-x, var(--maeander-kachel) 0 calc(100% - .9cqmin) / max(16px, 4.4cqmin) max(10px, 2.75cqmin) repeat-x; opacity: .6; } .qn-buehne > * { position: relative; z-index: 1; } /* Alle direkten Bühnenkinder dürfen schrumpfen, nie überlaufen */ .qn-buehne > * { min-height: 0; min-width: 0; } /* ---------- Typo-Skala (immer cqmin!) ---------- */ .qn-riesig { font-family: var(--f-display); font-weight: 800; font-size: 9cqmin; line-height: .95; letter-spacing: -.02em; } .qn-gross { font-family: var(--f-display); font-weight: 700; font-size: 6.2cqmin; line-height: 1.02; letter-spacing: -.015em; } .qn-frage { font-family: var(--f-display); font-weight: 700; font-size: 4.6cqmin; line-height: 1.14; letter-spacing: -.01em; text-wrap: balance; } /* Der Hintergrund zur Frage (spiel.js, kontextSetzen): eine ruhige Zeile direkt unter dem Fragetext — wer oder was das ist. */ .qn-kontext { margin: .9cqmin 0 0; max-width: min(100%, 66cqmin); font-family: var(--f-body); font-weight: 600; font-size: max(13px, 2.6cqmin); line-height: 1.3; color: color-mix(in srgb, var(--t0) 84%, transparent); text-wrap: balance; text-shadow: 0 .2cqmin 1cqmin color-mix(in srgb, var(--g0) 85%, transparent); animation: qn-kontext-ein 600ms cubic-bezier(.2,.7,.2,1) 350ms backwards; } @keyframes qn-kontext-ein { from { opacity: 0; transform: translateY(.8cqmin); } } .qn-kontext-huelle { display: flex; flex-direction: column; min-width: 0; min-height: 0; } @media (prefers-reduced-motion: reduce) { .qn-kontext { animation: none; } } .qn-mittel { font-weight: 600; font-size: 3.2cqmin; line-height: 1.25; } .qn-klein { font-weight: 500; font-size: 2.5cqmin; line-height: 1.3; } .qn-mikro { font-weight: 600; font-size: 2cqmin; line-height: 1.25; letter-spacing: .06em; text-transform: uppercase; } .qn-zahl { font-family: var(--f-mono); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.03em; } .qn-leise { color: var(--t1); } .qn-still { color: var(--t2); } /* ===================================================================== 2. KOPFZEILE — identisch auf allen 36 Bühnen ===================================================================== */ .qn-kopf { display: flex; align-items: center; gap: 2.4cqmin; padding: 2.6cqmin 3.4cqmin; height: 9.4cqmin; box-sizing: border-box; } /* Das Zeichen ist genauso gross wie der Schriftzug daneben — Tobis Anordnung vom 2026-09-23. Beide messen 3,1cqmin, also stehen sie auf derselben Hoehe und keines drueckt das andere. */ .qn-kopf-glyph { width: 3.1cqmin; height: 3.1cqmin; flex: none; display: grid; place-items: center; border-radius: .9cqmin; background: color-mix(in srgb, var(--acc) 24%, var(--g2)); box-shadow: inset 0 0 0 .22cqmin color-mix(in srgb, var(--m2) 92%, transparent); color: var(--acc); } .qn-kopf-glyph svg { width: 62%; height: 62%; display: block; } .qn-kopf-name { font-family: var(--f-display); font-weight: 700; font-size: 2.5cqmin; letter-spacing: .14em; text-transform: uppercase; color: var(--t0); } .qn-kopf-runde { font-size: 2.1cqmin; font-weight: 600; color: var(--t2); padding: .7cqmin 1.5cqmin; border-radius: 10cqmin; background: color-mix(in srgb, var(--t0) 6%, transparent); white-space: nowrap; } .qn-kopf-luft { flex: 1 1 auto; min-width: 0; } .qn-kopf-rechts { display: flex; align-items: center; gap: 1.8cqmin; flex: none; } /* DER GRUND GEHT UNTER DEN KOPF (Tobi, 04.11.2026: „dass das oben nicht so abgeschnitten aussieht, sondern da ein Übergang drin ist, dass man oben die Leiste trotzdem immer gut erkennt, aber die Formen trotzdem weitergehen" — „bei den Großbild-Kategorien wie Geo-Tipp geht er ja schon über, das find ich auch gut"). Die Kategorie gibt ihrem Raum (dem Kind der Bühne neben dem Kopf) die Klasse `qn-unterkopf`: Er reicht dann über beide Zeilen bis an den oberen Rand, sein Inhalt bleibt, wo er war (padding-top = Höhe des Kopfs; eigener Abstand oben über --uk-pt), und alles, was in ihm mit inset:0 liegt (Grund, Leinwand, Muster), läuft unter dem Kopf weiter. Der Kopf steht darüber und bekommt einen weichen Verlauf in der Grundfarbe des Sets, der nach unten ausläuft. */ .qn-buehne:has(> .qn-unterkopf) > .qn-kopf { position: relative; z-index: 3; grid-row: 1; grid-column: 1 / -1; } .qn-buehne > .qn-unterkopf { grid-row: 1 / span 2; grid-column: 1 / -1; padding-top: calc(9.4cqmin + var(--uk-pt, 0px)); } /* DAS FORMENFELD (qn.js, QN.formenFeld): füllt den Raum, in dem es liegt; den Platz in der Stapelung gibt die Kategorie */ .qn-formenfeld { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; } .qn-buehne:has(> .qn-unterkopf) > .qn-kopf::before { /* endet knapp unter der Kante des Kopfs — reichte er tiefer (bis -7cqmin), graute er eine Frage direkt darunter ein (Wer von uns) */ content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -1.2cqmin; z-index: -1; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--g0) 84%, transparent) 0%, color-mix(in srgb, var(--g0) 62%, transparent) 45%, color-mix(in srgb, var(--g0) 22%, transparent) 80%, transparent 100%); } /* Auflösungs-Marke statt Timer */ .qn-marke { font-family: var(--f-display); font-weight: 800; font-size: 2.3cqmin; letter-spacing: .18em; text-transform: uppercase; color: var(--g0); background: var(--acc); padding: .9cqmin 2cqmin; border-radius: 10cqmin; white-space: nowrap; } /* ===================================================================== 3. TIMER-RING ===================================================================== */ .qn-ring { position: relative; width: 7.6cqmin; height: 7.6cqmin; flex: none; } .qn-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; } .qn-ring .spur { fill: none; stroke: color-mix(in srgb, var(--t0) 10%, transparent); stroke-width: 7; } .qn-ring .lauf { fill: none; stroke: var(--acc); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 264; stroke-dashoffset: 0; } .qn-ring.laeuft .lauf { animation: qn-ringlauf var(--sek, 20s) linear forwards; } @keyframes qn-ringlauf { to { stroke-dashoffset: 264; } } .qn-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-mono); font-weight: 700; font-size: 2.8cqmin; font-variant-numeric: tabular-nums; color: var(--t0); } .qn-ring.knapp .lauf { stroke: var(--bad); } .qn-ring.knapp b { color: var(--bad); } /* Der Wirt einer Uhr-Gestalt an der Wand (qn.js, BAUTEILE): derselbe Platz wie der Ring — was darin steht, bringt die Gestalt mit. Ein Ding, das die Ziffer in sich tragen will und dafür mehr Platz braucht, streckt den Kasten über --qn-uhr-fb / --qn-uhr-fh (Faktoren; die Höhe höchstens 1,16, damit die Kopfzeile von 9,4 cqmin hält — qn.js, QN.uhrWirtWand). */ .qn-uhr { position: relative; display: block; width: calc(7.6cqmin * var(--qn-uhr-fb, 1)); height: calc(7.6cqmin * min(var(--qn-uhr-fh, 1), 1.16)); flex: none; } /* DIE ZIFFER DER WAND-UHR — EINE Messlatte für alle Sets (Tobis Fund 3, 26.10.2026: „zu klein, schwer lesbar und fluchtet nicht mit den Texten"). 3,4 cqmin: bei 628 × 390 13,3 px, bei 1128 × 640 21,8 px (vorher je Gestalt 2,2 … 3,1). Größe und Zeile setzt der Wirt — darum !important: Keine Gestalt, auch keine fremde, kann sie kleiner stellen (wie am Handy, k6/uhr.css). Die Prüfung dazu: uhr-pruefen.mjs (Größe, gemessener Kontrast, Flucht mit der Kopfzeile — je Set, Frage und Auflösung). */ .qn-buehne { --qn-uhr-zahl: 3.4cqmin; } .qn-uhr[data-ort="wand"] [data-feld="sekunden"], .qn-kopf .qn-ring b, .qn-kopf .qn-ring.weiter b { font-size: var(--qn-uhr-zahl) !important; line-height: 1 !important; } /* ===================================================================== 4. SPIELER — Avatar, Antwortstand, Ergebnisleiste (4 → 20) ===================================================================== */ .qn-av { --gr: 5cqmin; width: var(--gr); height: var(--gr); flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: calc(var(--gr) * .44); color: #07080c; background: linear-gradient(150deg, var(--pf), color-mix(in srgb, var(--pf) 62%, #000)); box-shadow: 0 .3cqmin .8cqmin rgba(0, 0, 0, .45); position: relative; } .qn-av.du { box-shadow: 0 0 0 .4cqmin var(--du), 0 .3cqmin .8cqmin rgba(0, 0, 0, .45); } .qn-av.blass { opacity: .38; filter: grayscale(.6); } /* --------------------------------------------------------------------- DAS MONSTER IM AVATAR — das Gesicht und sein Ruheleben. Vier Schichten, jede einzeln abschaltbar: 1. die Figur selbst (SVG, fuellt die Huelle) 2. Atmen und Blinzeln (entkoppelt ueber --atem/--blinzel + negative Verzoegerung aus dem Spielerindex) 3. der Blick (--bx/--by als transition, kein Keyframe) 4. die Laune (vier kurze Keyframes, die sich selbst wegraeumen) Alle Dauern haengen an --d-*; unter `prefers-reduced-motion` stehen sie auf 1 ms, und die Figur steht still. Sie sagt dann immer noch alles, was sie sagen muss — die Aussage haengt nie an der Bewegung. --------------------------------------------------------------------- */ .qn-av.mon { background: none; box-shadow: none; border-radius: 0; display: grid; place-items: center; overflow: visible; } /* Eine Figur ist kein Kreis: Jeder Schatten-Ring (du, Stapel, Plättchen) wird um ihr Quadrat gelegt und steht als umrandeter KASTEN da — genau der Befund bei vielen Spielern (2026-09-25). Darum trägt keine Figur einen box-shadow; den Ring der eigenen Figur zeichnet ::after, Abstand zum Nachbarn schafft die Reihe. */ .qn-av.mon, .qn-av.mon.du { box-shadow: none !important; } /* Der eigene Sitz bekommt einen Ring UNTER der Figur statt um sie herum: ein Kreis um ein Monster schnitte ihm die Antennen ab. */ .qn-av.mon.du::after { content: ''; position: absolute; left: 50%; bottom: -6%; width: 78%; height: 14%; transform: translateX(-50%); border-radius: 50%; background: color-mix(in srgb, var(--du) 55%, transparent); filter: blur(.4cqmin); } .qn-av.mon .qn-monster { width: 100%; height: 100%; } /* PRO: ein Lichtfleck im Licht der Pro-Figur unter den Füßen — dasselbe Mittel wie der Ring der eigenen Figur, nur in ihrer Farbe (--pro, qn.js: QN.av). Kein Rahmen, nichts bewegt sich; die Figur glänzt selbst. */ .qn-av.mon.pro::before { content: ''; position: absolute; left: 50%; bottom: -5%; z-index: 0; width: 86%; height: 16%; transform: translateX(-50%); border-radius: 50%; background: color-mix(in srgb, var(--pro, #ff8fd8) 62%, transparent); filter: blur(.5cqmin); pointer-events: none; } .qn-av.mon.pro > * { position: relative; z-index: 1; } /* --- 2. Ruheleben: atmen und blinzeln ------------------------------- */ .qn-monster [data-part="body"] { transform-box: fill-box; transform-origin: 50% 92%; animation: qn-atmen var(--atem, 3.4s) ease-in-out var(--atemzu, 0s) infinite; } @keyframes qn-atmen { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.028, .972); } } .qn-monster [data-part="eyes"] { transform-box: fill-box; transform-origin: 50% 50%; animation: qn-blinzeln var(--blinzel, 6s) step-end var(--blinzelzu, 0s) infinite; } /* Das Blinzeln ist ein SCHNITT, kein Verlauf: Ein Lid faellt in einem Bildschritt, es faehrt nicht herunter. Drei Stufen, zusammen 120 ms. */ @keyframes qn-blinzeln { 0%, 96% { transform: scaleY(1); } 97% { transform: scaleY(.12); } 98% { transform: scaleY(.12); } 99%, 100% { transform: scaleY(1); } } /* Die Antennen, Hoerner und Fluegel schwingen langsamer als der Koerper — sonst sieht die Figur aus wie ein einziges Stueck Gummi. */ .qn-monster [data-part="extra"] { transform-box: fill-box; transform-origin: 50% 100%; animation: qn-wippen calc(var(--atem, 3.4s) * 1.7) ease-in-out var(--atemzu, 0s) infinite; } @keyframes qn-wippen { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } } .qn-av.stumm .qn-monster [data-part="body"], .qn-av.stumm .qn-monster [data-part="extra"], .qn-av.stumm .qn-monster [data-part="eyes"] { animation: none; } /* Die Pro-Figur ruht in stummen Reihen genauso (vorher atmete sie dort als einzige weiter). Ihre Reaktionen bleiben — eine Choreografie ([data-akt]) und der Signaturzug, wie die Launen der freien Figur. */ .qn-av.stumm .qmp:not([data-akt]):not(.qmp-zug), .qn-av.stumm .qmp:not([data-akt]):not(.qmp-zug) * { animation: none !important; } /* KLEINE KÖPFE STEHEN STILL (Leistung, Tobi 2026-10-07): unter 30 px Kantenlänge (qn.js setzt .qn-av-klein nach der Größe im Bild; die Listen-Köpfe sind am 1080er-Fernseher 29,2 px) ruht das Ruheleben. Das Atmen wäre dort weniger als ein Pixel, kostete aber in jedem Bild Stil und Layout im SVG — je Kopf drei Animationen. Ab 30 px bleibt alles, wie es ist. */ .qn-av.qn-av-klein .qn-monster [data-part="body"], .qn-av.qn-av-klein .qn-monster [data-part="extra"], .qn-av.qn-av-klein .qn-monster [data-part="eyes"] { animation: none; } /* --- 3. Der Blick ---------------------------------------------------- */ /* Die Pupillen fahren auf ihr Ziel, statt dort zu erscheinen. Zwei Zahlen, eine transition — das Billigste im ganzen Entwurf und das Einzige, was eine gezeichnete Figur aufmerksam wirken laesst. */ .qn-monster [data-part="eyes"] { translate: var(--bx, 0) var(--by, 0); transition: translate var(--d-lang) var(--k-ein); } /* --- 4. Die Laune ---------------------------------------------------- */ .qn-monster { transform-box: view-box; transform-origin: 50% 88%; } .qm-jubel { animation: qm-jubel calc(var(--d-lang) * 1.6) var(--k-schnapp) 1; } .qm-sackt { animation: qm-sackt calc(var(--d-lang) * 1.4) var(--k-ein) 1; } .qm-zittert { animation: qm-zittert calc(var(--d-mittel) * 2.2) linear 1; } .qm-staunt { animation: qm-staunt calc(var(--d-lang) * 1.5) var(--k-schnapp) 1; } /* Jubel: zusammenstauchen, abspringen, zweimal nachfedern. Die Stauchung VOR dem Sprung ist das, was den Sprung gross macht. */ @keyframes qm-jubel { 0% { transform: translateY(0) scale(1, 1); } 18% { transform: translateY(2%) scale(1.1, .88); } 42% { transform: translateY(-26%) scale(.92, 1.12); } 62% { transform: translateY(0) scale(1.06, .94); } 78% { transform: translateY(-8%) scale(.98, 1.03); } 100% { transform: translateY(0) scale(1, 1); } } /* Sacken: in die Knie und einmal schwer nachgeben. */ @keyframes qm-sackt { 0% { transform: translateY(0) scale(1, 1) rotate(0deg); } 40% { transform: translateY(6%) scale(1.08, .9) rotate(-3deg); } 70% { transform: translateY(4%) scale(1.04, .94) rotate(2deg); } 100% { transform: translateY(0) scale(1, 1) rotate(0deg); } } /* Zittern: schnell, klein, waagerecht — Nervositaet, kein Erdbeben. */ @keyframes qm-zittert { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-2.5%); } 40% { transform: translateX(2.5%); } 60% { transform: translateX(-1.8%); } 80% { transform: translateX(1.8%); } } /* Staunen: zurueckweichen und gross werden. */ @keyframes qm-staunt { 0% { transform: scale(1, 1); } 35% { transform: scale(.94, 1.06) translateY(-3%); } 100% { transform: scale(1, 1); } } /* --------------------------------------------------------------------- DER SCHRIFTZUG. Auf jedem Schirm, damit jeder weiss, was er spielt. Derselbe Verlauf wie auf der Webseite: Pink ueber Violett nach Indigo. --------------------------------------------------------------------- */ /* DER SCHRIFTZUG — Zeichen fuer Zeichen derselbe wie im Marktplatz. Quelle: client/src/components/marketplace/SiteNav.tsx:30. Tobis Anordnung vom 2026-09-23: dieselbe Schriftart wie dort, und ohne Animation. Die Werte sind uebernommen, nicht nachempfunden: Outfit 900, Laufweite −0.025em, Verlauf 135 Grad von Pink ueber Violett nach Indigo. Ein Wortzeichen, das an zwei Orten zwei Prozent anders steht, ist zwei Wortzeichen. `text-transform` statt Versalien im Text: Ein Vorleseprogramm spricht „Quiznight" als Wort und buchstabiert „QUIZNIGHT" Zeichen fuer Zeichen. Das Bild ist dasselbe. */ .qn-wortmarke { font-family: var(--f-display); font-weight: 900; font-size: 3.1cqmin; text-transform: uppercase; letter-spacing: -.025em; line-height: 1; white-space: nowrap; background: linear-gradient(135deg, #e879f9, #a855f7, #6366f1); -webkit-background-clip: text; background-clip: text; color: transparent; flex: none; align-self: center; } /* In der Hand ist weniger Platz — und der Kategoriename ist dort wichtiger als die Marke, weil man ihn beim Antworten braucht. */ .qn-wortmarke.klein { font-size: calc(4.2cqmin * var(--schrift, 1)); } /* Der Schriftzug steht VOR dem Kategoriezeichen und bekommt eine Trennlinie nach rechts: Ohne sie liest man „Quiznight Mehrfachwahl" als einen Namen. */ .qn-kopf .qn-wortmarke { margin-right: 1.2cqmin; padding-right: 2cqmin; border-right: .22cqmin solid color-mix(in srgb, var(--t0) 14%, transparent); } .qh-kopf .qn-wortmarke { margin-right: .8cqmin; padding-right: 1.6cqmin; border-right: .3cqmin solid color-mix(in srgb, var(--t0) 14%, transparent); } /* DIE KOPFZEILE ALS EIN SCHRIFTZUG (Tobi, 2026-09-23: „in derselben Schriftgröße und alles mit Trennstrichen — ein cleaner Schriftzug"): QUIZNIGHT | RENNSPORT | ◇ MEHRFACHWAHL Drei Namen, eine Größe, eine Laufweite, je ein Trennstrich dahinter. Die Marke behält ihren Verlauf, der Set-Name trägt die Farbe des Sets, die Kategorie die Schrift. Versalien brauchen Luft: +0,02em (Designsprache). */ .qn-marke-set { display: inline-flex; align-items: center; flex: none; align-self: center; } .qn-setname { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; white-space: nowrap; color: var(--acc); line-height: 1; flex: none; } .qn-kopf .qn-wortmarke, .qn-kopf .qn-setname, .qn-kopf .qn-kopf-name { font-size: 3.1cqmin; letter-spacing: .02em; line-height: 1; } .qn-kopf .qn-kopf-name { font-weight: 800; } .qn-kopf .qn-setname { margin-right: 1.2cqmin; padding-right: 2cqmin; border-right: .22cqmin solid color-mix(in srgb, var(--t0) 14%, transparent); } /* In der Hand ist die Zeile voll (Uhr, Zahnrad): dieselbe Regel, eine Stufe kleiner — und wer zu lang ist, kürzt sich zuerst beim Set-Namen und dann bei der Kategorie, nie bei der Marke. */ .qh-kopf .qn-wortmarke, .qh-kopf .qn-setname, .qh-kopf .qh-name { font-size: calc(3.1cqmin * var(--schrift, 1)); letter-spacing: .02em; line-height: 1; } /* Mit Set-Namen bekommt der Schriftzug die ganze erste Zeile (drei Namen passen neben Uhr und Zahnrad nicht, gemessen: „REN…"); die Uhr rückt in eine zweite Zeile nach rechts, über das Ende des Zeitbalkens. Das Kategoriezeichen weicht. Übergang — das neue Handy-Design ordnet den Kopf ohnehin neu (design/handy/AUFTRAG.md). */ /* Tobi: „achte beim Handy, dass alles komplett angezeigt wird" — deshalb kürzt hier nichts mit „…": Was nicht in die Zeile passt, bricht als ganzes Wort in die nächste. Rechts hält die Zeile Platz für das Zahnrad. */ .qh-kopf:has(.qn-setname) { flex-wrap: wrap; row-gap: 1cqmin; column-gap: 0; padding-right: 13cqmin; } .qh-kopf:has(.qn-setname) .qh-glyph { display: none; } .qh-kopf:has(.qn-setname) .qn-marke-set { flex-wrap: wrap; row-gap: 1cqmin; } .qh-kopf:has(.qn-setname) .qn-setname, .qh-kopf:has(.qn-setname) .qh-name { flex: none; max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap; } .qh-kopf:has(.qn-setname) .qh-uhr { flex-basis: 100%; justify-content: flex-end; } /* Der Trennstrich steht mittig zwischen zwei Namen, nicht an einem klebend. */ .qh-kopf:has(.qn-setname) .qn-wortmarke, .qh-kopf:has(.qn-setname) .qn-setname { margin-right: 1.3cqmin; padding-right: 1.3cqmin; } .qh-kopf .qn-marke-set { flex: 0 1 auto; min-width: 0; } .qh-kopf .qn-marke-set .qn-wortmarke { flex: none; } .qh-kopf .qn-setname { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; max-width: 30cqmin; margin-right: .8cqmin; padding-right: 1.6cqmin; border-right: .3cqmin solid color-mix(in srgb, var(--t0) 14%, transparent); } .qh-kopf .qh-name { color: var(--t0); } /* -- Antwortstand: bis 8 Köpfe, darüber ein Balken -- */ .qn-stand { display: flex; align-items: center; gap: 1.4cqmin; } .qn-stand-koepfe { display: flex; gap: .9cqmin; } .qn-stand-koepfe .qn-av { --gr: 4.2cqmin; opacity: .3; transition: opacity var(--d-mittel) var(--k-ein), transform var(--d-mittel) var(--k-schnapp); } .qn-stand-koepfe .qn-av.fertig { opacity: 1; transform: translateY(-.4cqmin); } /* KEIN gruener Ring mehr um die Koepfe (Tobi, 2026-09-23). Gruen gehoert nicht zur Marke, und ein Kreis um ein Monster schnitt ihm die Antennen ab. Dass jemand geantwortet hat, sagt der Kopf selbst: er wacht auf (volle Deckkraft) und steigt einen Schritt — dazu die Zahl daneben. */ .qn-stand { min-width: 0; } .qn-stand-text { font-size: max(9px, 2.1cqmin); font-weight: 700; color: var(--t1); white-space: nowrap; } /* DIE ZEILE AM FERNSEHER (qn.js, QN.stand — gewählt C „die Fertigen", Tobi 03.11.): die Zahl groß, das Wort leiser. Nie höher als die Köpfe (4,2cqmin), damit die Karten darüber nicht schrumpfen. */ .qn-stand-v { flex: none; gap: 1.6cqmin; height: 4.2cqmin; } .qn-stand-zahl { display: inline-flex; align-items: baseline; gap: .3cqmin; white-space: nowrap; font-family: var(--f-display); line-height: 1; font-variant-numeric: tabular-nums; } .qn-stand-zahl b { font-size: 3.6cqmin; font-weight: 800; color: var(--t0); } .qn-stand-zahl small { font-size: 2.4cqmin; font-weight: 700; color: var(--t1); } .qn-stand-wort { margin-left: -.6cqmin; font-size: 2.2cqmin; font-weight: 600; color: var(--t2); white-space: nowrap; } /* Ab neun Spielern: ein Stapel der letzten fünf, die geantwortet haben; leer ein stiller Platzhalter. */ .qn-stand-fertige { display: flex; align-items: center; min-width: 4.2cqmin; height: 4.2cqmin; padding-left: .6cqmin; } .qn-stand-fertige:not(:has(.qn-stand-platz:not([hidden])))::before { content: ''; width: 4.2cqmin; height: 4.2cqmin; border-radius: 50%; box-shadow: inset 0 0 0 .22cqmin color-mix(in srgb, var(--t0) 22%, transparent); } .qn-stand-platz { display: block; margin-left: -.6cqmin; animation: qn-stand-vor var(--d-mittel) var(--k-schnapp) both; } .qn-stand-platz[hidden] { display: none; } .qn-stand-platz .qn-av { --gr: 4.2cqmin; } @keyframes qn-stand-vor { from { opacity: 0; transform: translateY(1cqmin) scale(.8); } } /* -- Ergebnis-Chip: ein Spieler mit Punkte-Delta -- */ .qn-chip { display: flex; align-items: center; gap: 1.2cqmin; padding: 1cqmin 1.6cqmin 1cqmin 1cqmin; border-radius: 10cqmin; background: color-mix(in srgb, var(--t0) 7%, transparent); box-shadow: inset 0 0 0 .18cqmin color-mix(in srgb, var(--t0) 8%, transparent); white-space: nowrap; } .qn-chip.du { background: color-mix(in srgb, var(--du) 18%, transparent); box-shadow: inset 0 0 0 .22cqmin color-mix(in srgb, var(--du) 55%, transparent); } .qn-chip.top { background: color-mix(in srgb, var(--ok) 16%, transparent); box-shadow: inset 0 0 0 .22cqmin color-mix(in srgb, var(--ok) 45%, transparent); } .qn-chip b { font-weight: 700; font-size: 2.4cqmin; } .qn-chip .pkt { font-family: var(--f-mono); font-weight: 700; font-size: 2.4cqmin; color: var(--ok); font-variant-numeric: tabular-nums; } .qn-chip .pkt.null { color: var(--t2); } /* -- Rest-Zeile: „+12 weitere" (nur noch als Schrift; der Stapel ist Teil der Köpfe-Reihe) -- */ .qn-rest { display: flex; align-items: center; gap: 1cqmin; font-size: max(9px, 2.1cqmin); font-weight: 600; color: var(--t2); } /* ===================================================================== DIE KÖPFE-REIHE (qn.js, QN.reihe) — misst sich selbst, der Rest wird EIN „+N": ein Stapel aus zwei bis drei Köpfen plus Zahl, so hoch wie ein Kopf. Nie beschnitten, nie gedrückt, keine eigene Farbe: Gründe und Schrift aus den Rollen. ===================================================================== */ .qn-reihe { --rk: 3.4cqmin; --rl: calc(var(--rk) * .2); --rz: 1; --rn: 4; /* Die Wunschbreite: alle Köpfe in einer Zeile. Mehr Platz braucht sie nie, weniger bekommt sie, wenn der Rahmen enger ist — dann rechnet sie nach. */ --rw: calc(var(--rn) * var(--rk) + (var(--rn) - 1) * var(--rl) + 1px); display: flex; flex-wrap: wrap; align-items: center; align-content: center; /* flex-basis bleibt auto: In einer Flex-SPALTE wäre eine Basis die Höhe. */ gap: var(--rl); flex: 0 1 auto; width: var(--rw); max-width: 100%; min-width: 0; /* Die Breite kommt vom Platz, nie vom Inhalt — sonst schrumpfte die Reihe mit jedem Kopf, den sie versteckt, und versteckte den nächsten. */ contain: inline-size; } .qn-reihe.qn-reihe-voll { width: 100%; } .qn-reihe.qn-reihe-mitte { justify-content: center; } .qn-reihe > [hidden] { display: none !important; } /* Die Selektoren sind doppelt so stark wie eine Kategorie-Regel („.k-x .liste b“), damit keine fremde Schriftgröße oder Breite in die Reihe hineinregnet. */ .qn-reihe > .qn-reihe-kopf.qn-reihe-kopf { flex: none; position: relative; width: var(--rk); display: grid; justify-items: center; align-content: center; } .qn-reihe-kopf > .qn-av.qn-av { width: var(--rk); height: var(--rk); } /* DER REST: KEIN STAPEL, NIRGENDS (Tobi, 03.11.2026 am Fernseher: „genau das ist das, was ich nicht will, sondern so wie bei C eben“; 04.11. für alle Schirme: „ich möchte das global ändern auf die neuen, die auch bei Mehrfachwahl stehen“). Die Köpfe stehen nebeneinander, so viele Platz haben, dahinter nur ruhig die Zahl — ohne übereinandergeschobene Köpfe, ohne Pille. */ .qn-reihe > .qn-reihe-rest.qn-reihe-rest { flex: none; display: inline-flex; align-items: center; height: var(--rk); padding: 0 0 0 calc(var(--rk) * .2); } .qn-reihe .qn-reihe-rest.qn-reihe-rest > b { font-family: var(--f-display); font-weight: 800; line-height: 1; white-space: nowrap; font-size: calc(var(--rk) * .62); color: var(--t1); font-variant-numeric: tabular-nums; } /* Am Handy wächst die Zahl mit der Schriftstufe. */ .qn-hand .qn-reihe .qn-reihe-rest.qn-reihe-rest > b { font-size: calc(var(--rk) * .62 * var(--schrift, 1)); } /* Die Zeilen-Liste (qn.js, QN.listePassen): versteckte Zeilen sind weg, auch wenn die Kategorie ihren Zeilen ein display gibt; die letzte Zeile ist der Rest. */ [data-qn-zeile][hidden], .qn-liste-rest[hidden] { display: none !important; } .qn-liste-rest { flex: none; display: flex; align-items: center; gap: .8cqmin; min-width: 0; font-size: max(9px, 1.9cqmin); font-weight: 700; color: var(--t2); white-space: nowrap; } .qn-liste-rest .qn-reihe { --rk: max(12px, var(--lr-k, 2.8cqmin)); } .qn-hand .qn-liste-rest { font-size: max(9px, calc(1.9cqmin * var(--schrift, 1))); } /* Die Rest-Zeile tritt erst auf, wenn ihre Zeilen es getan haben (die Staffel der Kategorie). */ .qn-liste-rest { transition: opacity var(--d-mittel) var(--k-ein); } [data-qn-liste]:has(> [data-qn-zeile].qn-wartet:not(.da):not([hidden])) > .qn-liste-rest { opacity: 0; } /* QN.rest: Zahl und Satz als EIN Kasten (in einem Raster stünden sie sonst in zwei Zeilen). */ .qn-rest-block { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; } /* QN.rest: derselbe Rest, von der Kategorie abgezählt — er steht, wie er ist. */ .qn-reihe.qn-reihe-fest { flex: none; width: auto; contain: none; display: inline-flex; } /* Am Tisch des Pults steht der Rest auf der Höhe der Köpfe, nicht der Lampen. */ .qh-p-sitze > .qn-reihe-rest.qn-reihe-rest { align-self: flex-start; } .qn-reihe-fest .qn-reihe-rest.qn-reihe-rest > b:empty { display: none; } .qn-reihe-fest > .qn-reihe-rest.qn-reihe-rest:has(> b:empty) { padding-right: calc(var(--rk) * .06); } .qn-rest-satz { flex: 0 1 auto; min-width: 0; margin-left: .8cqmin; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: max(9px, 1.9cqmin); font-weight: 600; color: var(--t2); } .qn-reihe-leer { font-size: max(9px, 1.9cqmin); font-weight: 700; color: var(--t2); } /* ===================================================================== NAMEN — überall dieselbe Regel (2026-09-25): an der Wand eine Zeile, zu lang wird mit Ellipse gekürzt; am Handy (wo nichts gekürzt wird) bricht ein Name nur an Leerzeichen und Bindestrich. NIE mitten im Wort — kein overflow-wrap: anywhere an einem Namen. Schrift nie unter 9 px (max(9px, …)). Die Grenze (grenzen.js) hält jedes Wort unter 6 W. .qn-name trägt die Wand-Regel; QN.chip setzt sie an jeden Chip-Namen. ===================================================================== */ .qn-name { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; word-break: normal; } /* ===================================================================== 5. ERKLÄRUNGS-BAND — auf jeder Auflösung gleich ===================================================================== */ .qn-erklaerung { display: flex; align-items: center; gap: 1.8cqmin; padding: 1.8cqmin 2.4cqmin; border-radius: 2cqmin; background: color-mix(in srgb, var(--t0) 6%, transparent); box-shadow: inset .5cqmin 0 0 var(--acc2); font-size: 2.4cqmin; font-weight: 500; line-height: 1.3; color: var(--t0); text-wrap: pretty; } .qn-erklaerung .i { flex: none; width: 3.4cqmin; height: 3.4cqmin; border-radius: 50%; display: grid; place-items: center; background: var(--acc2); color: var(--g0); font-family: var(--f-display); font-weight: 800; font-size: 2.2cqmin; } /* ===================================================================== 6. FLÄCHEN & KNÖPFE (Bau-Material für die Kategorien) ===================================================================== */ .qn-flaeche { background: color-mix(in srgb, var(--t0) 5%, transparent); box-shadow: inset 0 0 0 .18cqmin color-mix(in srgb, var(--t0) 9%, transparent); border-radius: 2.4cqmin; } .qn-glas { background: linear-gradient(180deg, color-mix(in srgb, var(--t0) 9%, transparent), color-mix(in srgb, var(--t0) 3%, transparent)); backdrop-filter: blur(2px); box-shadow: inset 0 0 0 .18cqmin color-mix(in srgb, var(--t0) 12%, transparent); border-radius: 2.4cqmin; } /* ===================================================================== 7. BEWEGUNGS-SET — die neun erlaubten Bewegungen Nur transform + opacity. ===================================================================== */ .qn-ein { animation: qn-auftritt var(--d-lang) var(--k-ein) both; } .qn-ein-oben { animation: qn-auftritt-oben var(--d-lang) var(--k-ein) both; } .qn-ein-klein{ animation: qn-auftritt-klein var(--d-mittel) var(--k-schnapp) both; } .qn-aus { animation: qn-abgang var(--d-mittel) var(--k-aus) both; } .qn-schnapp { animation: qn-schnapp var(--d-mittel) var(--k-schnapp) both; } .qn-gluehen { animation: qn-gluehen 2.2s ease-in-out infinite; } .qn-puls { animation: qn-puls 1.6s ease-in-out infinite; } @keyframes qn-auftritt { from { opacity: 0; transform: translateY(2.4cqmin) scale(.97); } to { opacity: 1; transform: none; } } @keyframes qn-auftritt-oben { from { opacity: 0; transform: translateY(-2.4cqmin); } to { opacity: 1; transform: none; } } @keyframes qn-auftritt-klein { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } } @keyframes qn-abgang { from { opacity: 1; } to { opacity: 0; transform: translateY(-1.6cqmin) scale(.98); } } @keyframes qn-schnapp { 0% { transform: scale(1); } 45% { transform: scale(1.09); } 100% { transform: scale(1); } } @keyframes qn-gluehen { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } } @keyframes qn-puls { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: .82; } } /* Startzustand für gestaffelte Auftritte: Element unsichtbar, bis .da gesetzt wird */ /* DIE PAUSE. Sie haelt jede Keyframe-Animation an — auch die, die eine Kategorie selbst mitbringt, denn die Regel greift am Dokument und nicht an einer Buehne. Laufende Transitions laufen ihre letzten Zehntel noch aus; die sind kurz genug, dass man sie fuer das Ende einer Bewegung haelt und nicht fuer einen Haenger. */ html.qn-pause *, html.qn-pause *::before, html.qn-pause *::after { animation-play-state: paused !important; } /* … AUSSER WAS IN DER PAUSE BEDIENT WIRD (Tobi, 02.11.2026: „Wenn ich im Pausenscreen ein Problem melden möchte, geht das nicht.“ — die Seiten des Melde-Blatts kommen mit Keyframes herein und blieben bei Deckkraft 0 stehen): das Feld des Zahnrads samt Melden und Abend-Feedback, die Host-Steuerung (Krone, Host-Menü), das Blatt am Handy — und der Buddy im Online-Pult („der Avatar, der kann ja weiter animiert sein“). Bühne, Frage und Uhr bleiben angehalten. */ html.qn-pause :is(.qh-einstblatt, .sp-host-schicht, .fbm, .fbm-lage, .fbm-zettel, .fba, .hk-blatt, .qo-pult .qo-buddy-fig), html.qn-pause :is(.qh-einstblatt, .sp-host-schicht, .fbm, .fbm-lage, .fbm-zettel, .fba, .hk-blatt, .qo-pult .qo-buddy-fig) *, html.qn-pause :is(.qh-einstblatt, .sp-host-schicht, .fbm, .fbm-lage, .fbm-zettel, .fba, .hk-blatt, .qo-pult .qo-buddy-fig)::before, html.qn-pause :is(.qh-einstblatt, .sp-host-schicht, .fbm, .fbm-lage, .fbm-zettel, .fba, .hk-blatt, .qo-pult .qo-buddy-fig)::after, html.qn-pause :is(.qh-einstblatt, .sp-host-schicht, .fbm, .fbm-lage, .fbm-zettel, .fba, .hk-blatt, .qo-pult .qo-buddy-fig) *::before, html.qn-pause :is(.qh-einstblatt, .sp-host-schicht, .fbm, .fbm-lage, .fbm-zettel, .fba, .hk-blatt, .qo-pult .qo-buddy-fig) *::after { animation-play-state: running !important; } .qn-wartet { opacity: 0; } .qn-wartet.da { animation: qn-auftritt var(--d-lang) var(--k-ein) both; } /* ===================================================================== 8. REAKTIONSLEISTE (Frage-Bühnen, optional) ===================================================================== */ .qn-reaktionen { display: flex; gap: .8cqmin; } .qn-reaktionen span { width: 4.4cqmin; height: 4.4cqmin; border-radius: 50%; display: grid; place-items: center; font-size: 2.4cqmin; background: color-mix(in srgb, var(--t0) 7%, transparent); } /* ===================================================================== 9. ECHTE FOTOS (Wikimedia Commons) — Bild, Gutschrift, Schleier ===================================================================== */ .qn-bildflaeche { position: relative; display: block; overflow: hidden; border-radius: inherit; } .qn-bild { width: 100%; height: 100%; display: block; object-fit: cover; } .qn-credit { position: absolute; right: .8cqmin; bottom: .7cqmin; z-index: 3; font-size: 1.55cqmin; font-weight: 600; letter-spacing: .01em; color: rgba(255, 255, 255, .72); background: rgba(0, 0, 0, .42); padding: .35cqmin .9cqmin; border-radius: 10cqmin; backdrop-filter: blur(3px); pointer-events: none; max-width: 62%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qn-credit.links { right: auto; left: .8cqmin; } .qn-credit.oben { bottom: auto; top: .7cqmin; } /* Schleier: macht ein Foto zur tragfähigen Fläche für Text darüber */ .qn-schleier { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(6, 7, 11, .12) 0%, rgba(6, 7, 11, .55) 58%, rgba(6, 7, 11, .88) 100%); } .qn-schleier.seitlich { background: linear-gradient(96deg, rgba(6, 7, 11, .92) 0%, rgba(6, 7, 11, .55) 38%, rgba(6, 7, 11, .1) 72%); } /* ===================================================================== 10. DIE REGLER-BAHN — überall dasselbe greifbare Ding Rille mit Rasten · gefüllte Strecke · fetter geriffelter Griff · Fahne ===================================================================== */ /* Die Stellung ist eine registrierte Eigenschaft — nur so lässt sie sich weich fahren. */ @property --p { syntax: ''; inherits: true; initial-value: 0%; } .qn-bahn { position: absolute; inset: 0; pointer-events: none; --p: var(--ziel, 50%); } /* DIE FAHRT: der Griff kommt vom Anfang der Bahn, schießt leicht über den Wert hinaus und rastet ein. Alles andere (Füllung, Fahne) hängt an --p und fährt mit. */ .qn-bahn.faehrt { animation: qn-bahnfahrt calc(var(--d-xl) * 1.7) var(--k-schnapp) both; } @keyframes qn-bahnfahrt { from { --p: var(--von, 8%); } to { --p: var(--ziel, 50%); } } .qn-bahn .rille { position: absolute; border-radius: 10cqmin; background: color-mix(in srgb, #05080d 72%, transparent); box-shadow: inset 0 .22cqmin .5cqmin rgba(0, 0, 0, .75), inset 0 0 0 .16cqmin color-mix(in srgb, var(--t0) 13%, transparent); } .qn-bahn .fuell { position: absolute; border-radius: 10cqmin; background: linear-gradient(var(--wnkl, 90deg), color-mix(in srgb, var(--gf) 30%, transparent), var(--gf)); box-shadow: 0 0 1.6cqmin color-mix(in srgb, var(--gf) 45%, transparent); } /* quer (waagerecht) */ .qn-bahn.quer .rille { left: 0; right: 0; top: 50%; height: 1.5cqmin; transform: translateY(-50%); background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--t0) 22%, transparent) 0 .16cqmin, transparent .16cqmin calc(100% / var(--rasten))); } .qn-bahn.quer .fuell { left: 0; width: var(--p); top: 50%; height: 1.5cqmin; transform: translateY(-50%); } .qn-bahn.quer .griff { left: var(--p); top: 50%; transform: translate(-50%, -50%); } .qn-bahn.quer .fahne { left: var(--p); bottom: calc(50% + 3.6cqmin); transform: translateX(-50%); } .qn-bahn.quer .zieh { left: var(--p); top: calc(50% + 4cqmin); transform: translateX(-50%); } /* hoch (senkrecht) */ .qn-bahn.hoch { --wnkl: 180deg; } .qn-bahn.hoch .rille { top: 0; bottom: 0; left: 50%; width: 1.5cqmin; transform: translateX(-50%); background-image: repeating-linear-gradient(180deg, color-mix(in srgb, var(--t0) 22%, transparent) 0 .16cqmin, transparent .16cqmin calc(100% / var(--rasten))); } .qn-bahn.hoch .fuell { top: 0; height: var(--p); left: 50%; width: 1.5cqmin; transform: translateX(-50%); } .qn-bahn.hoch .griff { top: var(--p); left: 50%; transform: translate(-50%, -50%); } .qn-bahn.hoch .fahne { top: var(--p); left: calc(50% + 6.4cqmin); transform: translateY(-50%); } .qn-bahn.hoch .zieh { top: calc(var(--p) + 4.6cqmin); left: 50%; transform: translateX(-50%); } /* der Griff selbst — fett, geriffelt, mit Schatten: man sieht, dass man ihn anfassen kann */ .qn-bahn .griff { position: absolute; width: 9.2cqmin; height: 5.1cqmin; border-radius: 1.7cqmin; display: flex; align-items: center; justify-content: center; gap: .8cqmin; background: linear-gradient(180deg, #f6fbff 0%, #d3e3ef 46%, #93b0c4 100%); box-shadow: 0 .7cqmin 1.8cqmin rgba(0, 0, 0, .6), 0 0 0 .48cqmin color-mix(in srgb, var(--gf) 36%, transparent), inset 0 .22cqmin 0 rgba(255, 255, 255, .95), inset 0 -.3cqmin .5cqmin rgba(6, 30, 48, .35); } .qn-bahn .griff i { width: .42cqmin; height: 2.4cqmin; border-radius: 10cqmin; background: rgba(9, 40, 62, .55); } /* Wanderndes Licht auf der gefüllten Strecke — die Bahn wirkt bespielt, nicht bedruckt. */ .qn-bahn .fuell::after { content: ''; position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: linear-gradient(var(--wnkl, 90deg), transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%); mask-image: linear-gradient(var(--wnkl, 90deg), #000, #000); animation: qn-bahnlicht 2.8s ease-in-out infinite; } @keyframes qn-bahnlicht { 0% { opacity: 0; } 45% { opacity: .5; } 100% { opacity: 0; } } .qn-bahn.hoch .griff { width: 5.1cqmin; height: 9.2cqmin; flex-direction: column; } .qn-bahn.hoch .griff i { width: 2.4cqmin; height: .42cqmin; } .qn-bahn .fahne { position: absolute; padding: .6cqmin 1.5cqmin; border-radius: 10cqmin; font-family: var(--f-body); font-size: 2.1cqmin; font-weight: 800; color: var(--gf-auf, #04121c); background: var(--gf); box-shadow: 0 .4cqmin 1.4cqmin rgba(0, 0, 0, .5); white-space: nowrap; } .qn-bahn .zieh { position: absolute; font-size: 1.85cqmin; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--gf) 80%, var(--t0)); white-space: nowrap; } .qn-bahn.geist .griff { opacity: .5; } .qn-bahn.geist .fahne { opacity: .6; } /* Der Griff atmet leicht — ohne seine Stellung zu verändern (das war der Bug bei der Skala) */ .qn-bahn .griff::after { content: ''; position: absolute; inset: -.9cqmin; border-radius: 2.4cqmin; box-shadow: 0 0 0 .2cqmin color-mix(in srgb, var(--gf) 30%, transparent); animation: qn-griffhof 2.4s ease-in-out infinite; } @keyframes qn-griffhof { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: .9; transform: scale(1.06); } } /* ===================================================================== 11. WEITER GEHT'S — der Abzähler der Auflösung Derselbe Ring wie der Frage-Timer, nur in der Gegenfarbe; in den letzten drei Sekunden schlägt er. ===================================================================== */ .qn-ring.weiter .lauf { stroke: var(--acc2); } .qn-ring.weiter b { color: color-mix(in srgb, var(--acc2) 50%, var(--t0)); font-size: 2.6cqmin; } /* die Gegenfarbe, aufgehellt: rein stand sie bei 3,9 : 1 (628 × 390, uhr-pruefen.mjs); die Größe setzt --qn-uhr-zahl */ .qn-weiterwort { font-size: 1.85cqmin; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--acc2) 62%, var(--t2)); white-space: nowrap; } /* Die letzten drei Sekunden: Die Uhr im Kopf SCHLÄGT, einmal je Sekunde — sie wächst kurz, eine Welle läuft von ihr weg. (Bis 05.10.2026 stand hier eine 23 cqmin große Ziffer mitten auf der Bühne; sie lag am Fernseher über dem Inhalt, den man noch liest.) Die Welle ist ein Kind der Bühne; QN.start legt sie vor jedem Schlag auf den Kasten der Uhr. Bewegt werden nur scale/transform und opacity. */ [data-qn-weiter].schlag { animation: qn-weiterschlag 1s var(--k-ein) both; } .qn-buehne > .qn-weiterwelle { position: absolute; z-index: 40; pointer-events: none; border-radius: 50%; box-shadow: 0 0 0 .34cqmin var(--acc2), 0 0 2.2cqmin color-mix(in srgb, var(--acc2) 55%, transparent); opacity: 0; } .qn-buehne > .qn-weiterwelle.schlag { animation: qn-weiterwelle 1s var(--k-ein) both; } @keyframes qn-weiterschlag { 0% { scale: 1; } 16% { scale: 1.26; } 46%, 100% { scale: 1; } } @keyframes qn-weiterwelle { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.3); } } /* ===================================================================== 12. DIE KULISSE — die Szenerie hinter der Bahn (QN.kulisse) ZWEI Gerüste, acht Charaktere. Was die acht unterscheidet, steht ausschließlich in den Custom Properties, die QN.kulisse aus der Tabelle QN.KULISSEN in das style-Attribut schreibt. Deshalb gibt es hier KEINE einzige Regel pro Spielart — nur `.g-senk` und `.g-waag`. Die sieben Verlaufsstufen werden aus EINER Farbe gerechnet (--kh/--ks/--kl), und genau diese Farbe misst QN.bildfarbe() am Foto der Frage. Deshalb sehen zwei „Tiefe"-Fragen verschieden aus, ohne dass jemand Code schreibt. ===================================================================== */ /* Der Stand der Füllung ist eine registrierte Eigenschaft — nur so lässt er sich weich fahren, genau wie --p bei der Regler-Bahn. */ @property --kp { syntax: ''; inherits: true; initial-value: 0%; } .qn-kulisse { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; --kp: var(--kziel, 50%); transition: --kp calc(var(--d-xl) * 1.15) var(--k-ein); --kf1: hsl(calc(var(--kh) + var(--kf1h)) clamp(0%, calc((var(--ks) + var(--kf1s)) * 1%), 100%) clamp(0%, calc((var(--kl) + var(--kf1l)) * 1%), 100%)); --kf2: hsl(calc(var(--kh) + var(--kf2h)) clamp(0%, calc((var(--ks) + var(--kf2s)) * 1%), 100%) clamp(0%, calc((var(--kl) + var(--kf2l)) * 1%), 100%)); --kf3: hsl(calc(var(--kh) + var(--kf3h)) clamp(0%, calc((var(--ks) + var(--kf3s)) * 1%), 100%) clamp(0%, calc((var(--kl) + var(--kf3l)) * 1%), 100%)); --kf4: hsl(calc(var(--kh) + var(--kf4h)) clamp(0%, calc((var(--ks) + var(--kf4s)) * 1%), 100%) clamp(0%, calc((var(--kl) + var(--kf4l)) * 1%), 100%)); --kg1: hsl(calc(var(--kh) + var(--kg1h)) clamp(0%, calc((var(--ks) + var(--kg1s)) * 1%), 100%) clamp(0%, calc((var(--kl) + var(--kg1l)) * 1%), 100%)); --kg2: hsl(calc(var(--kh) + var(--kg2h)) clamp(0%, calc((var(--ks) + var(--kg2s)) * 1%), 100%) clamp(0%, calc((var(--kl) + var(--kg2l)) * 1%), 100%)); --kg3: hsl(calc(var(--kh) + var(--kg3h)) clamp(0%, calc((var(--ks) + var(--kg3s)) * 1%), 100%) clamp(0%, calc((var(--kl) + var(--kg3l)) * 1%), 100%)); } /* DIE FAHRT beim Auftritt: die Füllung kommt vom Anfang der Achse, schießt leicht über und rastet ein — dieselbe Technik wie qn-bahnfahrt. */ .qn-kulisse.faehrt { animation: qn-kulissenfahrt calc(var(--d-xl) * 1.7) var(--k-schnapp) both; } @keyframes qn-kulissenfahrt { from { --kp: var(--kvon, 5%); } to { --kp: var(--kziel, 50%); } } /* Die Szene wird gespiegelt, wenn „mehr" nach oben zeigt (--fy: -1). Damit fahren Füllung, Strahlen und Streu auf die richtige Seite, OHNE dass es dafür eine zweite Regel gäbe. Beschriftungen drehen sich einzeln zurück. */ .qn-kulisse .kl-szene { position: absolute; inset: 0; transform: scaleY(var(--fy, 1)); } .qn-kulisse .kl-pol b, .qn-kulisse .kl-mark b { display: block; transform: scaleY(var(--fy, 1)); } /* ---- Grund: die Welt jenseits der Füllung ---- */ .qn-kulisse .kl-grund { position: absolute; inset: 0; background: linear-gradient(180deg, var(--kg1) 0%, var(--kg2) 52%, var(--kg3) 100%); } .qn-kulisse .kl-textur { position: absolute; inset: 0; background: repeating-linear-gradient(var(--txa, 90deg), rgba(255, 255, 255, .9) 0 .16cqmin, rgba(255, 255, 255, 0) .16cqmin var(--txw, 2.6cqmin)); opacity: var(--txo, .05); } /* ---- Felder zwischen den Marken (die ungleichen Dekaden, die Zeitfelder) ---- */ /* Die Messleiter: sie kachelt die ganze Achse und liegt ÜBER der Füllung, damit die Bühne in jeder Zone bespielt ist — nicht nur dort, wo gerade etwas gefüllt ist. `pointer-events` bleibt hier an: das sind Inhalte. */ .qn-kulisse .kl-felder { position: absolute; inset: 0; opacity: var(--feldop, 0); } .qn-kulisse .kl-feldstueck { position: absolute; pointer-events: auto; background: rgb(255 255 255 / var(--fo, .13)); box-shadow: inset 0 0 0 .1cqmin rgba(255, 255, 255, .07); } .qn-kulisse .kl-feldstueck.zwei { background: rgba(0, 0, 0, .2); } /* ---- Füllung: das, was der Wert wirklich ist ---- Füllung und Saum liegen zusammen im Band. Das Band gibt beiden ihre Zone (bei der Säule die ganze Bühne, beim Band der Streifen aus --bo/--bu) und trägt die Stufenform: ist eine gesetzt, steigt die Füllung eine Treppe hinauf, statt als Rechteck zu wachsen. Ohne Treppe ist --trclip `none`. */ .qn-kulisse .kl-band { position: absolute; clip-path: var(--trclip, none); } .qn-kulisse .kl-fuell { position: absolute; overflow: hidden; opacity: var(--fop, 1); background: linear-gradient(var(--gw, 180deg), var(--kf1) 0%, var(--kf2) 26%, var(--kf3) 62%, var(--kf4) 100%); } /* zählbare Einheiten statt glatter Füllung — Breite und Deckkraft sind Data */ .qn-kulisse .kl-seg { position: absolute; inset: 0; opacity: var(--segop, 0); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .30) 0 calc(var(--segw) * .34), rgba(0, 0, 0, .34) calc(var(--segw) * .34) calc(var(--segw) * .40), rgba(0, 0, 0, 0) calc(var(--segw) * .40) var(--segw)); } /* laufender Glanz — das Band lebt */ .qn-kulisse .kl-lauf { position: absolute; inset: 0; opacity: var(--laufop, 0); background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .7) 48%, transparent 100%); animation: qn-kulissenlauf 3.4s ease-in-out infinite; } @keyframes qn-kulissenlauf { 0%, 100% { transform: translateX(-20%); } 50% { transform: translateX(20%); } } /* ---- Saum: die Kante, an der die Füllung endet ---- */ .qn-kulisse .kl-saum { position: absolute; background: linear-gradient(var(--gq, 90deg), color-mix(in srgb, var(--kf4) 55%, #fff) 0%, #fff 50%, color-mix(in srgb, var(--kf4) 55%, #fff) 100%); opacity: var(--saum, .5); box-shadow: 0 0 calc(var(--saumhof, 1) * 2.4cqmin) color-mix(in srgb, var(--kf3) 70%, transparent); } /* ---- Strahlen / Schlieren ---- */ .qn-kulisse .kl-strahl { position: absolute; inset: 0; width: 100%; height: 100%; color: color-mix(in srgb, var(--kf1) 78%, #fff); fill: currentColor; opacity: var(--stop, .5); mix-blend-mode: screen; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 88%); mask-image: linear-gradient(180deg, #000 0%, transparent 88%); } /* ---- Streu: Blasen, Funken, Kristalle — eine Schleife, die Form ist Data ---- */ .qn-kulisse .kl-streu { position: absolute; inset: 0; opacity: var(--sop, .3); } .qn-kulisse .kl-streu i { position: absolute; width: var(--sg); height: var(--sg); background: color-mix(in srgb, var(--kf1) 40%, #fff); border-radius: var(--szr, 50%); clip-path: var(--szf, none); transform: rotate(var(--sr, 0deg)); } /* ---- Marken und Pole ---- */ .qn-kulisse .kl-mark { position: absolute; pointer-events: auto; } .qn-kulisse .kl-mark::before { content: ''; position: absolute; background: rgba(255, 255, 255, .34); } .qn-kulisse .kl-mark b { position: absolute; font-family: var(--f-mono); font-size: 1.75cqmin; font-weight: 700; color: rgba(255, 255, 255, .68); white-space: nowrap; text-shadow: 0 .18cqmin .7cqmin rgba(0, 0, 0, .9); } .qn-kulisse .kl-pol { position: absolute; pointer-events: auto; font-size: 1.95cqmin; font-weight: 700; letter-spacing: .05em; color: rgba(255, 255, 255, .84); text-shadow: 0 .2cqmin 1cqmin rgba(0, 0, 0, .95); max-width: 64%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: var(--polop, 1); } /* ===================================================================== DIE VIER KOMPOSITIONEN DES WAAGERECHTEN GERÜSTS Bis zum 12.09.2026 unterschieden sich anteil · menge · zeit · dekade nur durch Füllfarbe und Textur — eine Silhouette, vier Anstriche. Jetzt hat jede ihr eigenes Bild. Es bleibt bei EINEM Gerüst: die vier Lagen hier sind aus, solange ihre Zahl in QN.KULISSEN 0 ist, und dann baut sie QN.kulisse gar nicht erst. Keine Regel je Spielart, nur `.g-waag`. ===================================================================== */ /* ---- ZWEI TERRITORIEN: das Gegengebiet und die Namen darin ---- */ .qn-kulisse .kl-gegen { position: absolute; opacity: var(--gegop, 0); background: linear-gradient(164deg, var(--kg1) 0%, var(--kg2) 56%, var(--kg3) 100%); box-shadow: inset .5cqmin 0 3cqmin rgba(0, 0, 0, .4); } .qn-kulisse .kl-gebiet { position: absolute; display: flex; align-items: center; justify-content: center; opacity: var(--gebop, 0); overflow: hidden; padding: 0 1.6cqmin; pointer-events: auto; } .qn-kulisse .kl-gebiet b { display: block; max-width: 100%; transform: scaleY(var(--fy, 1)); font-size: 4.4cqmin; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .82); white-space: nowrap; overflow: hidden; text-overflow: clip; text-shadow: 0 .3cqmin 1.6cqmin rgba(0, 0, 0, .95); } /* ---- EIN FELD AUS ZÄHLBAREN DINGEN ---- Dieselbe Markenmatrix liegt dreimal übereinander: alle Marken matt, die vollen Spalten hell, und die angebrochene Spalte von unten hoch. Deshalb sind es wirklich Spalten·Reihen Stück, und man kann sie zählen. */ .qn-kulisse .kl-raster { position: absolute; opacity: var(--rasop, 0); } .qn-kulisse .kl-raster i { position: absolute; inset: 0; background-image: radial-gradient(ellipse 24% 32% at 50% 50%, currentColor 0 72%, transparent 80%); background-size: calc(100% / var(--rasx, 1)) calc(100% / var(--rasy, 1)); transition: clip-path calc(var(--d-xl) * 1.15) var(--k-ein); } .qn-kulisse .kl-raster .r-alle { color: rgba(255, 255, 255, .17); } .qn-kulisse .kl-raster .r-voll, .qn-kulisse .kl-raster .r-teil { color: color-mix(in srgb, var(--kf2) 82%, #fff); filter: drop-shadow(0 0 .6cqmin color-mix(in srgb, var(--kf1) 65%, transparent)); } .qn-kulisse .kl-raster .r-voll { clip-path: inset(0 calc(100% - var(--rvb, 0%)) 0 0); } .qn-kulisse .kl-raster .r-teil { clip-path: inset(calc(100% - var(--rth, 0%)) calc(100% - var(--rtr, 0%)) 0 var(--rtl, 0%)); } /* ---- EINE STRECKE MIT MEILENSTEINEN ---- Halte auf denselben Kanten wie die Messleiter, Start und Ziel größer, und ein Licht, das auf dem Stand der Füllung steht. Es wandert mit --kp mit — dieselbe registrierte Eigenschaft, also dieselbe weiche Fahrt. */ .qn-kulisse .kl-reise { position: absolute; opacity: var(--reop, 0); } .qn-kulisse .kl-reise .r-strecke { position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .34) 0 1.7cqmin, rgba(255, 255, 255, 0) 1.7cqmin 3.8cqmin); background-size: 100% .34cqmin; background-position: 0 var(--relage, 50%); background-repeat: no-repeat; } .qn-kulisse .kl-reise .r-halt { position: absolute; top: var(--relage, 50%); pointer-events: auto; border-radius: 50%; /* Start und Ziel liegen auf den Achsenenden — sie ruecken um ihren eigenen Radius herein, damit sie ganz auf der Buehne stehen statt halb im Rand. */ left: clamp(var(--rehg, 2cqmin), var(--rp), calc(100% - var(--rehg, 2cqmin))); width: var(--rehg, 2cqmin); height: var(--rehg, 2cqmin); margin: calc(var(--rehg, 2cqmin) / -2); background: rgba(6, 10, 16, .82); box-shadow: inset 0 0 0 .32cqmin color-mix(in srgb, var(--kf1) 74%, #fff), 0 0 1.2cqmin rgba(0, 0, 0, .7); } .qn-kulisse .kl-reise .r-halt:first-child, .qn-kulisse .kl-reise .r-halt:last-child { width: calc(var(--rehg, 2cqmin) * 2); height: calc(var(--rehg, 2cqmin) * 2); margin: calc(var(--rehg, 2cqmin) * -1); background: color-mix(in srgb, var(--kf1) 46%, #06090f); } /* Der zurueckgelegte Teil der Strecke: durchgezogen bis zum Wert, gestrichelt voraus. Das ist die Aussage der Reise — nicht die Breite eines Balkens. */ .qn-kulisse .kl-reise .r-spur { position: absolute; top: var(--relage, 50%); left: 0; width: var(--kp); height: .42cqmin; margin-top: -.21cqmin; background: linear-gradient(90deg, color-mix(in srgb, var(--kf1) 55%, transparent) 0%, color-mix(in srgb, var(--kf2) 92%, #fff) 62%, #fff 100%); box-shadow: 0 0 1.8cqmin color-mix(in srgb, var(--kf2) 70%, transparent); } .qn-kulisse .kl-reise .r-licht { position: absolute; top: var(--relage, 50%); left: var(--kp); pointer-events: auto; border-radius: 50%; width: calc(var(--rehg, 2cqmin) * 2.6); height: calc(var(--rehg, 2cqmin) * 2.6); margin: calc(var(--rehg, 2cqmin) * -1.3); background: radial-gradient(circle at 50% 50%, #fff 0 20%, color-mix(in srgb, var(--kf2) 88%, #fff) 40%, transparent 74%); box-shadow: 0 0 3.6cqmin color-mix(in srgb, var(--kf2) 80%, transparent); } /* ---- EINE TREPPE AUS UNGLEICHEN STUFEN ---- Der leere Treppenkörper. Dieselbe Form (--trclip) beschneidet oben das Band — die Füllung steigt also die Stufen hinauf, statt sie zu ignorieren. */ .qn-kulisse .kl-treppe { position: absolute; opacity: var(--trop, 0); clip-path: var(--trclip, none); background: linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .06) 58%, rgba(255, 255, 255, .14) 100%); } /* ===================================================================== GERÜST 1 — senkrecht: die Säule. Achse läuft von oben (p = 0) nach unten. ===================================================================== */ .qn-kulisse.g-senk { --gw: 180deg; --gq: 90deg; } .qn-kulisse.g-senk .kl-band { inset: 0; } .qn-kulisse.g-senk .kl-fuell { left: 0; right: 0; top: 0; height: var(--kp); } .qn-kulisse.g-senk .kl-saum { left: 0; right: 0; top: var(--kp); height: calc(.36cqmin * var(--saumf, 1)); margin-top: calc(-.18cqmin * var(--saumf, 1)); } .qn-kulisse.g-senk .kl-gegen { left: 0; right: 0; top: var(--kp); bottom: 0; } .qn-kulisse.g-senk .kl-feldstueck { left: 0; right: 0; top: var(--a); height: var(--b); } .qn-kulisse.g-senk .kl-mark { left: 0; right: 0; top: var(--mp); height: 0; } .qn-kulisse.g-senk .kl-mark::before { right: 0; width: 3.2cqmin; top: -.09cqmin; height: .18cqmin; } .qn-kulisse.g-senk .kl-mark b { right: 4cqmin; top: -1.2cqmin; } .qn-kulisse.g-senk .kl-pol { left: 2.2cqmin; right: 2.2cqmin; text-align: right; } .qn-kulisse.g-senk .kl-pol.a { top: 1.5cqmin; } .qn-kulisse.g-senk .kl-pol.b { bottom: 1.5cqmin; } /* ===================================================================== GERÜST 2 — waagerecht: das Band. Achse läuft von links (p = 0) nach rechts. ===================================================================== */ .qn-kulisse.g-waag { --gw: 90deg; --gq: 180deg; } /* --bo/--bu sagen, wie hoch die Füllung auf der Bühne steht. Das ist der Unterschied zwischen einer Erdkugel (volle Höhe), einem Balken aus Einheiten (Mitte) und einem Zeitband (unten) — ohne eine einzige Regel je Spielart. Die Messleiter (kl-felder) bleibt bewusst über die ganze Bühne stehen. */ .qn-kulisse.g-waag .kl-band { top: var(--bo, 0%); bottom: var(--bu, 0%); left: 0; right: 0; } .qn-kulisse.g-waag .kl-fuell { top: 0; bottom: 0; left: 0; width: var(--kp); box-shadow: 0 0 3cqmin color-mix(in srgb, var(--kf3) 40%, transparent); } .qn-kulisse.g-waag .kl-saum { top: 0; bottom: 0; left: var(--kp); width: calc(.42cqmin * var(--saumf, 1)); margin-left: calc(-.21cqmin * var(--saumf, 1)); } .qn-kulisse.g-waag .kl-feldstueck { top: 0; bottom: 0; left: var(--a); width: var(--b); } .qn-kulisse.g-waag .kl-mark { top: 0; bottom: 0; left: var(--mp); width: 0; } .qn-kulisse.g-waag .kl-mark::before { bottom: 0; height: 3.2cqmin; left: -.09cqmin; width: .18cqmin; } .qn-kulisse.g-waag .kl-mark b { bottom: 4cqmin; left: 50%; transform: translateX(-50%) scaleY(var(--fy, 1)); } .qn-kulisse.g-waag .kl-pol { bottom: 1.4cqmin; } .qn-kulisse.g-waag .kl-pol.a { left: 2.2cqmin; } .qn-kulisse.g-waag .kl-pol.b { right: 2.2cqmin; text-align: right; } .qn-kulisse.g-waag .kl-strahl { -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 88%); mask-image: linear-gradient(90deg, #000 0%, transparent 88%); } /* Die vier Kompositionen liegen alle im Band — dort, wo auch die Füllung steht. Nur die Territoriums-Namen sitzen höher: unter den Spielermarken und über der Regler-Bahn, damit beide frei bleiben. */ .qn-kulisse.g-waag .kl-gegen { top: var(--bo, 0%); bottom: var(--bu, 0%); left: var(--kp); right: 0; } .qn-kulisse.g-waag .kl-raster, .qn-kulisse.g-waag .kl-reise, .qn-kulisse.g-waag .kl-treppe { top: var(--bo, 0%); bottom: var(--bu, 0%); left: 0; right: 0; } .qn-kulisse.g-waag .kl-gebiet { top: calc(var(--bo, 0%) + 30%); height: 7cqmin; } .qn-kulisse.g-waag .kl-gebiet.a { left: 0; width: var(--kp); } .qn-kulisse.g-waag .kl-gebiet.b { left: var(--kp); right: 0; } @media (prefers-reduced-motion: no-preference) { .qn-kulisse .kl-streu i { animation: qn-kulissenstreu calc(var(--d-xl) * var(--sd, 6)) linear infinite; animation-delay: calc(var(--d-xl) * var(--sv, 0) * -1); } .qn-kulisse .kl-strahl polygon { animation: qn-kulissenschimmer calc(var(--d-xl) * 7) ease-in-out infinite; transform-origin: 50% 0; } .qn-kulisse .kl-strahl .s2 { animation-duration: calc(var(--d-xl) * 9); } .qn-kulisse .kl-strahl .s3 { animation-duration: calc(var(--d-xl) * 6); } .qn-kulisse .kl-strahl .s4 { animation-duration: calc(var(--d-xl) * 11); } /* Das Licht auf der Strecke atmet — „etwas ist unterwegs", nicht „hier endet ein Balken". */ .qn-kulisse .kl-reise .r-licht { animation: qn-kulissenlicht calc(var(--d-xl) * 2.6) ease-in-out infinite; } } @keyframes qn-kulissenlicht { 0%, 100% { transform: scale(.88); opacity: .82; } 50% { transform: scale(1.1); opacity: 1; } } @keyframes qn-kulissenstreu { 0% { transform: translate(0, 0) rotate(var(--sr, 0deg)); opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { transform: translate(calc(var(--sdx, 0) * 1cqmin), calc(var(--sdy, 0) * 1cqmin)) rotate(calc(var(--sr, 0deg) + 40deg)); opacity: 0; } } @keyframes qn-kulissenschimmer { 0%, 100% { opacity: .7; transform: scaleX(1); } 50% { opacity: 1; transform: scaleX(1.2); } } /* ============================================================================ 13 · DAS LAUFBAND — eine Liste, die von selbst läuft ============================================================================ Tobi am 12.09.2026: „Es soll keinen Scrollbutton geben, den man ziehen muss, sondern eine Scrollanimation, die von automatisch läuft." Richtig so: Auf einem Quizschirm hat niemand eine Hand frei zum Ziehen — bei der Discord-Activity guckt die halbe Runde auf einen geteilten Bildschirm, und auf dem Großbildschirm gibt es gar keinen Zeiger. Also wandert die Liste von allein: oben halten, ruhig hinunterfahren, unten halten, zurück. Die Masken oben und unten bleiben stehen und sagen die ganze Zeit „hier geht es weiter". Passt alles hinein (vier Spieler), läuft gar nichts — die Klasse `rollt` setzt QN.laufbaender() nur, wenn wirklich mehr da ist, als in den Kasten passt. Die Strecke (--lb-weg) und die Dauer (--lb-dauer) misst dieselbe Stelle. Die Haltezeiten sind ANTEILE des Umlaufs, keine festen Sekunden: eine lange Liste braucht länger für die Fahrt und hält dann auch länger an den Enden. Das liest sich ruhiger als ein fester Halt, der bei zwanzig Zeilen hetzt. */ .qn-laufband { position: absolute; inset: 0; overflow: hidden; min-height: 0; } .qn-laufband > .qn-lauf { display: flex; flex-direction: column; gap: var(--lb-luft, 1.1cqmin); will-change: transform; } .qn-laufband > .qn-lauf > * { flex: none; } /* Steht die Liste still, füllt sie die Höhe aus — Zeilen wachsen, nicht Lücken. */ .qn-laufband:not(.rollt) > .qn-lauf { position: absolute; inset: 0; justify-content: space-between; } .qn-laufband.rollt > .qn-lauf { position: absolute; left: 0; right: 0; top: 0; animation: qn-laufband var(--lb-dauer, 22s) cubic-bezier(.42, 0, .58, 1) infinite; } /* Die weiche Blende an beiden Enden. Sie erscheint mit `rollt` und bleibt — solange etwas läuft, geht es oben wie unten weiter. */ .qn-laufband.rollt { --lb-o: 6%; --lb-u: 8%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--lb-o), #000 calc(100% - var(--lb-u)), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 var(--lb-o), #000 calc(100% - var(--lb-u)), transparent 100%); } @keyframes qn-laufband { 0%, 8% { transform: translateY(0); } 46%, 54% { transform: translateY(calc(var(--lb-weg, 0px) * -1)); } 92%, 100% { transform: translateY(0); } } /* Wer keine Bewegung will, bekommt die Liste zum Ziehen zurück — sonst wären die unteren Zeilen für ihn unerreichbar. Kein Zierrat, nur der Rückweg. */ @media (prefers-reduced-motion: reduce) { .qn-laufband.rollt { overflow-y: auto; overscroll-behavior: contain; } .qn-laufband.rollt > .qn-lauf { position: static; animation: none; } } /* ============================================================================ 14 · DIE HANDBÜHNE — der Bildschirm in der Hand ============================================================================ Beim Bigscreen-Weg hängt der Frage- und der Auflösungsschirm an der Wand, und jeder Spieler hält sein eigenes Gerät. Das Gerät ist kein zweiter Quizschirm — es ist die EINGABE. Alles, was schon an der Wand steht, gehört nicht noch einmal in die Hand: keine Mitspielerliste, keine Punktetabelle, keine Kulisse, keine Erklärung. Was bleibt, sind vier Dinge, immer in derselben Ordnung: 1. woran man ist (Kategorie + verbleibende Zeit) 2. was zu tun ist (ein Satz im Imperativ, nie eine Erklärung) 3. womit man es tut (die Eingabe, so groß wie irgend möglich) 4. wie man abschickt (ein Knopf, volle Breite, am Daumen) Die Maße stehen in cqmin, und cqmin ist hier die BREITE (390 < 844). Damit wächst die Schrift mit dem Gerät und nicht mit der Gerätehöhe — ein langes Handy bekommt mehr Luft, keine größeren Buchstaben. Die Farben kommen aus der Kategorie (--acc/--acc2). Das ist die einzige Stelle, an der die Handbühne die Bühne an der Wand zitiert: Wer auf den Schirm und dann aufs Gerät sieht, sieht denselben Ton. */ .qn-hand { position: relative; container-type: size; overflow: hidden; isolation: isolate; display: grid; grid-template-rows: auto 1fr auto; /* NICHT in cqmin. Ein Element ist nicht sein eigener Abfrage-Container: `cqmin` AUF der Handbühne rechnet gegen das Fenster, nicht gegen die 390 Punkte des Geräts. Die Ecke wurde dadurch dreimal so rund wie gedacht und schnitt den Glyph in der Kopfzeile an. Innerhalb der Bühne stimmt cqmin. */ border-radius: 31px; background: var(--g1); color: var(--t0); font-family: var(--f-body); font-size: 15px; line-height: 1.35; -webkit-font-smoothing: antialiased; user-select: none; } /* Der Ton der Kategorie, ganz oben, ganz sacht — dieselbe Geste wie auf der großen Bühne, nur kleiner, weil hier kein Platz für Kulisse ist. */ .qn-hand::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 34%; z-index: 0; pointer-events: none; background: radial-gradient(80% 100% at 50% 0%, color-mix(in srgb, var(--acc) 30%, transparent), transparent 72%); } .qn-hand > * { position: relative; z-index: 1; min-width: 0; } /* ---- 1. Woran man ist ---------------------------------------------------- */ /* Oben dasselbe: Die Statusleiste und die Kameranase schieben den Inhalt herunter, und die Uhr des Spiels darf nicht unter der Uhr des Geräts liegen. */ .qh-kopf { display: flex; align-items: center; gap: 2.6cqmin; /* Rechts bleibt Platz fuer das Zahnrad: Es sitzt absolut bei right 3,2cqmin und ist 8,4cqmin breit, braucht also 11,6cqmin plus Luft. Mit den alten 5cqmin lief die Uhr darunter durch. */ padding: max(4.4cqmin, env(safe-area-inset-top, 0px) + 1.6cqmin) 5cqmin 0; } .qh-glyph { flex: none; width: calc(4.2cqmin * var(--schrift, 1)); height: calc(4.2cqmin * var(--schrift, 1)); border-radius: 1.2cqmin; display: grid; place-items: center; color: var(--acc); background: color-mix(in srgb, var(--acc) 20%, transparent); box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--acc) 34%, transparent); } .qh-glyph svg { display: block; width: 62%; height: 62%; } .qh-name { flex: 1 1 auto; min-width: 0; font-family: var(--f-display); font-size: calc(3.5cqmin * var(--schrift, 1)); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qh-uhr { flex: none; display: flex; align-items: baseline; gap: .9cqmin; white-space: nowrap; font-family: var(--f-mono); font-weight: 700; color: var(--t0); } .qh-uhr b { font-size: calc(5.4cqmin * var(--schrift, 1)); font-variant-numeric: tabular-nums; } .qh-uhr span { font-size: calc(3.2cqmin * var(--schrift, 1)); color: var(--t2); } .qh-uhr.qh-knapp b { color: var(--bad); } /* Der Zeitbalken stand hier — seit den BAUTEILEN tragen alle Hände die Uhr des Pults (qn.js, hKopfPult); ihr Balken ist die Energie. */ .qh-oben { display: block; } /* ---- 2. Was zu tun ist --------------------------------------------------- */ .qh-leib { display: flex; flex-direction: column; gap: 3.4cqmin; padding: 4.6cqmin 5cqmin 0; min-height: 0; } .qh-frage { flex: none; margin: 0; font-family: var(--f-display); font-size: calc(5.6cqmin * var(--schrift, 1)); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--t0); text-wrap: balance; } .qh-auftrag { flex: none; margin: -1.4cqmin 0 0; font-size: calc(3.7cqmin * var(--schrift, 1)); font-weight: 600; color: var(--t2); } .qh-auftrag b { color: var(--acc2); font-weight: 700; } /* ===================================================================== DIE ANTWORT DES GERAETS — was passiert, wenn ein Daumen etwas trifft. Ein Handschirm, auf dem sich beim Tippen nur eine Farbe aendert, fuehlt sich tot an; man schaut einmal hin und dann weg. Deshalb drei Gesten, die die Engine bei jeder Bedienung neu ausloest (Klasse setzen, Reflow, Klasse wieder weg — sonst laeuft eine Animation nur beim ersten Mal): .qh-schnapp die getroffene Flaeche federt auf und faellt zurueck .qh-weicht die uebrigen weichen kurz zurueck (die Wahl tritt vor) .qh-quittung der Knopf schlaegt eine Welle, wenn er abschickt .qh-zittert eine Eingabe, die nicht angenommen wurde Alle vier sind kurz (140-420 ms). Laenger waere Zierrat auf einer Uhr, die laeuft. Bei reduzierter Bewegung bleibt nur der Farbwechsel. ===================================================================== */ @keyframes qh-schnapp { 0% { transform: scale(1); } 38% { transform: scale(1.045); } 100% { transform: scale(1); } } @keyframes qh-weicht { 0% { transform: scale(1); } 40% { transform: scale(.975); } 100% { transform: scale(1); } } /* Die Welle laeuft unter dem Knopf durch — ein Lichtstreifen von links nach rechts, kein Blinken. Blinken liest sich als Fehler. */ @keyframes qh-welle { 0% { transform: translateX(-100%); opacity: 0; } 30% { opacity: .55; } 100% { transform: translateX(100%); opacity: 0; } } @keyframes qh-zittert { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-1.2cqmin); } 75% { transform: translateX(1.2cqmin); } } .qn-hand .qh-schnapp { animation: qh-schnapp var(--d-mittel) var(--k-schnapp); } .qn-hand .qh-weicht { animation: qh-weicht var(--d-mittel) var(--k-ein); } .qn-hand .qh-zittert { animation: qh-zittert var(--d-kurz) ease-in-out 2; } /* Der Knopf traegt die Welle als eigene Schicht — auf ihm selbst laeuft schon der Auftritt plus das Atmen, und eine dritte Animation auf demselben Element verdraengt die erste (die Falle aus dem Nachtrag). */ .qn-hand .qh-knopf { position: relative; overflow: hidden; } .qn-hand .qh-knopf > i.qh-blitz { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, #fff 62%, transparent) 50%, transparent 80%); animation: qh-welle 420ms var(--k-ein) both; } /* Das Haekchen zeichnet sich, statt zu erscheinen. */ @keyframes qh-strich { to { stroke-dashoffset: 0; } } .qn-hand .qh-knopf svg.qh-haken { width: 4.6cqmin; height: 4.6cqmin; margin-left: 1.6cqmin; vertical-align: -.6cqmin; } .qn-hand .qh-knopf svg.qh-haken path { stroke-dasharray: 26; stroke-dashoffset: 26; animation: qh-strich var(--d-mittel) var(--k-ein) 120ms forwards; } @media (prefers-reduced-motion: reduce) { .qn-hand .qh-schnapp, .qn-hand .qh-weicht, .qn-hand .qh-zittert, .qn-hand .qh-knopf > i.qh-blitz { animation: none; } .qn-hand .qh-knopf svg.qh-haken path { stroke-dashoffset: 0; animation: none; } } /* ---- 3. Womit man es tut ------------------------------------------------- */ .qh-eingabe { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 2.6cqmin; } /* WAHL — die Grundform. Zwei Möglichkeiten stehen untereinander, vier ebenso: Nebeneinander wäre jede Kachel halb so breit, und dann passt kein Ländername mehr hinein, ohne zu schrumpfen. Untereinander sind sie immer gleich breit, immer gleich lesbar, und der Daumen trifft jede. */ .qh-wahl { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2.4cqmin; min-height: 0; } /* Vier Kacheln teilen sich den Schirm; bei zwei waeren sie sonst je eine halbe Handlaenge hoch. Bei zwei oder drei ist genau das aber richtig: Wahr/Falsch entscheidet man in sechs Sekunden, und dann soll die Flaeche so gross sein, dass man sie ohne Hinsehen trifft. */ .qh-kachel { flex: 1 1 0; min-height: 13cqmin; max-height: 27cqmin; display: flex; align-items: center; gap: 3.4cqmin; padding: 2.6cqmin 4cqmin; border-radius: 4cqmin; text-align: left; background: var(--g2); box-shadow: inset 0 0 0 .4cqmin color-mix(in srgb, var(--t0) 10%, transparent); transition: background var(--d-mittel) var(--k-ein), box-shadow var(--d-mittel) var(--k-ein); } .qh-kachel .qh-mal { flex: none; width: 9cqmin; height: 9cqmin; border-radius: 2.6cqmin; display: grid; place-items: center; font-family: var(--f-display); font-size: calc(4.4cqmin * var(--schrift, 1)); font-weight: 800; color: var(--t1); background: color-mix(in srgb, var(--t0) 9%, transparent); } .qh-kachel .qh-mal svg { width: 4.8cqmin; height: 4.8cqmin; } .qh-kachel .qh-txt { flex: 1 1 auto; min-width: 0; font-size: calc(4.8cqmin * var(--schrift, 1)); font-weight: 700; line-height: 1.2; color: var(--t0); overflow-wrap: anywhere; } .qh-kachel .qh-zu { flex: none; font-size: calc(3.3cqmin * var(--schrift, 1)); color: var(--t2); white-space: nowrap; } /* Gewählt: kein Häkchen irgendwo am Rand, sondern die ganze Kachel kippt in die Kategoriefarbe. Auf Armlänge muss man das ohne Lesen sehen. */ .qh-kachel.qh-an { background: color-mix(in srgb, var(--acc) 26%, var(--g2)); box-shadow: inset 0 0 0 .55cqmin var(--acc), 0 1.4cqmin 4cqmin rgba(0, 0, 0, .45); } /* Der Druckpunkt: Solange der Daumen liegt, gibt die Flaeche nach. Das ist die eine Rueckmeldung, die schon VOR dem Loslassen kommt. */ .qn-hand.sp-lebt .qh-kachel:active, .qn-hand.sp-lebt .qh-riese:active { transform: scale(.982); } .qn-hand .qh-kachel { will-change: transform; } /* Das Schnappen gehört auf das Mal, NICHT auf die Kachel. Die Kachel trägt `.qn-wartet` und damit `opacity: 0`; eine zweite Animation auf demselben Element verdrängt den Auftritt, der die Deckkraft zurückholt — die gewählte Kachel blieb dadurch unsichtbar. */ .qn-hand.qh-laeuft .qh-kachel.qh-an .qh-mal { animation: qn-schnapp var(--d-mittel) var(--k-schnapp) both; } .qh-kachel.qh-an .qh-mal { background: var(--acc); color: var(--auf-acc); } .qh-kachel.qh-an .qh-txt { color: #fff; } /* MEHRFACH — dieselbe Kachel, nur mit Häkchen und einer Zählzeile darunter. Zwei Spalten erst ab neun Möglichkeiten: Bei sechs passte „Bevölkerungs- dichte“ nicht mehr in die halbe Breite und brach mitten im Wort um. Eine ganze Zeile trägt jedes Wort, das in dieser Familie vorkommt. */ .qh-wahl.qh-wenig .qh-kachel { max-height: none; } .qh-wahl.qh-zweispaltig { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 2.2cqmin; align-content: stretch; overflow: hidden; } .qh-wahl.qh-zweispaltig .qh-kachel { min-height: 0; padding: 2.4cqmin 2.6cqmin; gap: 2.2cqmin; } .qh-wahl.qh-zweispaltig .qh-kachel .qh-mal { width: 6.4cqmin; height: 6.4cqmin; border-radius: 1.9cqmin; } .qh-wahl.qh-zweispaltig .qh-kachel .qh-txt { font-size: calc(3.9cqmin * var(--schrift, 1)); } .qh-zaehlzeile { flex: none; display: flex; align-items: baseline; gap: 1.6cqmin; font-size: calc(3.6cqmin * var(--schrift, 1)); color: var(--t2); } .qh-zaehlzeile b { font-family: var(--f-mono); font-size: calc(4.4cqmin * var(--schrift, 1)); font-weight: 700; color: var(--acc2); } /* REGLER — die Zahl gehört nach oben und groß, der Griff nach unten an den Daumen. Wer schiebt, verdeckt mit der Hand die untere Hälfte des Geräts; stünde die Zahl dort, sähe man beim Einstellen nie, was man einstellt. */ .qh-regler { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; gap: 3.4cqmin; } /* FEINSTELLUNG. Ein Regler allein trifft auf einem Handschirm keine 564 — ein Strich ist dort drei Meter breit. Zwei große Tasten daneben sind kein Zierrat, sondern der Unterschied zwischen „ungefähr" und „genau". */ /* Daumengross, nicht bildschirmhoch. Als sie den ganzen Rest aufnahmen, war eine Taste fuer ein einzelnes Jahr sechshundert Punkte hoch — das sieht nicht nach Feineinstellung aus, sondern nach einem Fehler. */ /* DAS STELLWERK. Bahn, Pole, Feintasten und Stuetzstellen sind EIN Geraet und bekommen deshalb eine gemeinsame Flaeche. Einzeln verteilt standen zwischen ihnen vier Handbreit Nichts, und der Schirm sah unfertig aus. */ .qh-stellwerk { flex: none; display: flex; flex-direction: column; gap: 2.6cqmin; padding: 3.2cqmin 3.2cqmin 3.4cqmin; border-radius: 4cqmin; background: color-mix(in srgb, var(--t0) 5%, transparent); box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--t0) 9%, transparent); } .qh-fein { flex: 0 1 auto; max-height: 22cqmin; display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqmin; } .qh-fein span { display: flex; align-items: center; justify-content: center; min-height: 13cqmin; border-radius: 3.6cqmin; font-family: var(--f-mono); font-size: calc(4.6cqmin * var(--schrift, 1)); font-weight: 700; color: var(--t0); background: var(--g2); box-shadow: inset 0 0 0 .45cqmin color-mix(in srgb, var(--t0) 14%, transparent); } /* Die Stützstellen der Skala — dieselben Marken wie auf der Wand, damit man die Zahl in der Hand einordnen kann, ohne aufzusehen. */ .qh-marken { display: flex; flex-wrap: wrap; gap: 1.6cqmin; } .qh-marken span { flex: 1 1 auto; text-align: center; padding: 1.6cqmin 1.4cqmin; border-radius: 2.4cqmin; font-family: var(--f-mono); font-size: calc(3.4cqmin * var(--schrift, 1)); font-weight: 600; color: var(--t1); background: color-mix(in srgb, var(--t0) 6%, transparent); box-shadow: inset 0 0 0 .3cqmin color-mix(in srgb, var(--t0) 9%, transparent); } /* Die Zahl bekommt eine Flaeche, aber keine Hoehe auf Vorrat: Ueber 38 % der Buehne gilt eine Flaeche als Kulisse, und dann wird die Luft um die Ziffer herum als totes Loch gemessen. Den Rest nehmen die Feintasten — richtig so, denn die drueckt man oft und die Zahl liest man nur. */ /* Die Zahl nimmt den Rest der Hoehe, bleibt aber unter 38 % der Buehne — darueber gaelte sie dem Messwerkzeug als Kulisse, und die Luft um die Ziffer wuerde als totes Loch gezaehlt. */ .qh-wert { flex: 1 1 auto; max-height: 88cqmin; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqmin; padding: 3cqmin 3cqmin; border-radius: 4cqmin; text-align: center; background: linear-gradient(168deg, color-mix(in srgb, var(--acc) 16%, var(--g2)), var(--g1)); box-shadow: inset 0 0 0 .4cqmin color-mix(in srgb, var(--acc2) 26%, transparent); } /* Die Groesse steht im Dokument (QN.zahlmass), nicht hier: Sie haengt von der Laenge der Zahl ab. `white-space: nowrap` haelt sie in einer Zeile — eine umgebrochene Zahl ist keine Zahl mehr. */ .qh-wert b { display: block; max-width: 100%; font-family: var(--f-mono); font-size: calc(15cqmin * var(--schrift, 1)); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--acc2); font-variant-numeric: tabular-nums; white-space: nowrap; } .qh-wert span { display: block; font-size: calc(3.8cqmin * var(--schrift, 1)); color: var(--t2); } .qh-bahn { position: relative; height: 4.4cqmin; border-radius: 10cqmin; background: linear-gradient(90deg, color-mix(in srgb, var(--m3) 92%, transparent), var(--acc)); box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--t0) 14%, transparent); } /* Der Griff FÄHRT auf seinen Wert. Er dort erscheinen zu lassen, verschenkt die einzige Sekunde, in der man sieht, WIE weit daneben man lag. */ .qh-bahn i { position: absolute; top: 50%; left: 50%; transition: left var(--d-xl) var(--k-ein); width: 9.6cqmin; height: 9.6cqmin; margin: -4.8cqmin 0 0 -4.8cqmin; border-radius: 50%; background: #fff; box-shadow: 0 .8cqmin 2.6cqmin rgba(0, 0, 0, .6), inset 0 0 0 1.1cqmin var(--acc); } .qn-hand.qh-laeuft .qh-bahn i { left: var(--p, 50%); } @media (prefers-reduced-motion: reduce) { .qh-bahn i { transition: none; left: var(--p, 50%); } } .qh-pole { display: flex; justify-content: space-between; gap: 2cqmin; font-size: calc(3.4cqmin * var(--schrift, 1)); color: var(--t2); } .qh-pole span { max-width: 42%; } .qh-pole span:last-child { text-align: right; } .qh-unterschrift { flex: none; font-size: calc(3.4cqmin * var(--schrift, 1)); color: var(--t2); } /* FELD — ein Eingabefeld, das aussieht wie eines, und sonst nichts. Die Tastatur des Geräts nimmt sich ohnehin die untere Hälfte; deshalb steht das Feld oben und nicht in der Mitte. */ .qh-feld { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2.6cqmin; } .qh-schreib { flex: 1 1 auto; display: flex; align-items: flex-start; gap: 1cqmin; min-height: 20cqmin; padding: 3.6cqmin 4cqmin; border-radius: 4cqmin; background: var(--g0); box-shadow: inset 0 0 0 .5cqmin color-mix(in srgb, var(--acc) 44%, transparent); font-size: calc(5cqmin * var(--schrift, 1)); font-weight: 700; line-height: 1.25; color: var(--t0); overflow-wrap: anywhere; } .qh-schreib.qh-leer { color: var(--t2); font-weight: 500; } .qh-strich { flex: none; display: inline-block; width: .5cqmin; height: 6cqmin; border-radius: .3cqmin; background: var(--acc2); animation: qh-blinzeln 1.06s steps(1) infinite; } @keyframes qh-blinzeln { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .qh-strich { animation: none; } } .qh-hinweisreihe { display: flex; flex-wrap: wrap; gap: 1.6cqmin; } .qh-hinweisreihe span { padding: 1.2cqmin 2.4cqmin; border-radius: 10cqmin; font-size: calc(3.3cqmin * var(--schrift, 1)); color: var(--t1); background: color-mix(in srgb, var(--t0) 7%, transparent); } /* PUNKT — eine Fläche, auf die man tippt. Was die Fläche zeigt, bringt die Kategorie mit; die Handbühne liefert nur das Fadenkreuz und den Rahmen. */ .qh-punkt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2.4cqmin; min-height: 0; } .qh-flaeche { position: relative; flex: 1 1 auto; min-height: 0; border-radius: 4cqmin; overflow: hidden; background: var(--g0); box-shadow: inset 0 0 0 .4cqmin color-mix(in srgb, var(--t0) 12%, transparent); } /* `!important`, weil manche Kategorie ihre eigene Miniatur mit festen Massen in cqmin gestaltet (.k-outline .o-mini ist 5 cqmin breit) und diese Regel spezifischer ist als eine Elementwahl. Auf der Handbuehne fuellt die Zeichnung immer ihre Flaeche. */ /* `qh-`-Praefix, wie alles auf der Handbuehne. Der Name `fuell` allein war schon vergeben: Flächensumme nennt ihre gefuellten Gebiete so und setzt sie bis zum Auftritt auf `opacity: 0` — das Dichtefeld auf dem Handschirm wurde dadurch unsichtbar, obwohl alle 192 Zellen im Dokument standen. */ .qh-flaeche > svg, .qh-flaeche > img, .qh-flaeche > .qh-fuell { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; } /* Ein Farbkreis MUSS rund sein: In einen hochkanten Kasten gespannt wurde er zur Ellipse, und dann stimmt weder der Winkel noch der Abstand vom Mittelpunkt — beides ist hier die Antwort. */ .qh-punkt.qh-rund .qh-flaeche { flex: 0 0 auto; aspect-ratio: 1; } /* Was unter der Fläche steht: die eigenen Werte, die Koordinate. Es füllt genau den Platz, den die quadratische Fläche übrig lässt. */ /* Die Zeile unter der Flaeche nimmt nur ihre eigene Hoehe. Den Rest bekommt die Flaeche — ausser beim runden Farbkreis, der quadratisch bleiben muss und den Rest deshalb abgeben wuerde. */ .qh-unten { flex: none; display: flex; flex-direction: column; gap: 1.8cqmin; } .qh-punkt.qh-rund .qh-unten { flex: 1 1 auto; min-height: 0; justify-content: center; } .qh-werte { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1.8cqmin; } .qh-werte span { display: flex; flex-direction: column; align-items: center; gap: .6cqmin; padding: 2cqmin 1cqmin; border-radius: 2.8cqmin; background: var(--g2); box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--t0) 10%, transparent); } .qh-werte span em { font-style: normal; font-size: calc(3cqmin * var(--schrift, 1)); color: var(--t2); } .qh-werte span b { font-family: var(--f-mono); font-size: calc(4.6cqmin * var(--schrift, 1)); font-weight: 700; color: var(--t0); } .qh-probe { display: flex; align-items: center; gap: 2.6cqmin; padding: 2.4cqmin 3cqmin; border-radius: 3cqmin; background: var(--g2); box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--t0) 10%, transparent); } .qh-probe i { flex: none; width: 11cqmin; height: 11cqmin; border-radius: 2.6cqmin; box-shadow: inset 0 0 0 .4cqmin rgba(255, 255, 255, .28); } .qh-probe b { flex: 1 1 auto; font-size: calc(4cqmin * var(--schrift, 1)); font-weight: 700; color: var(--t0); } .qh-flaeche > img { object-fit: cover; } .qh-kreuz { position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 13cqmin; height: 13cqmin; margin: -6.5cqmin 0 0 -6.5cqmin; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 .55cqmin var(--acc2), 0 0 0 1.1cqmin rgba(0, 0, 0, .45); } .qh-kreuz::before, .qh-kreuz::after { content: ""; position: absolute; background: var(--acc2); } .qh-kreuz::before { left: 50%; top: -3.4cqmin; bottom: -3.4cqmin; width: .5cqmin; margin-left: -.25cqmin; } .qh-kreuz::after { top: 50%; left: -3.4cqmin; right: -3.4cqmin; height: .5cqmin; margin-top: -.25cqmin; } /* Das Fadenkreuz SETZT sich — es erscheint nicht. Der kurze Federschlag ist die Quittung für die Berührung, und ohne ihn wirkt der Punkt gesetzt, bevor man getippt hat. */ @keyframes qh-setzen { 0% { transform: scale(2.1); opacity: 0; } 55% { opacity: 1; } 100% { transform: none; opacity: 1; } } .qn-hand.qh-laeuft .qh-kreuz { animation: qh-setzen var(--d-lang) var(--k-schnapp) 260ms both; } @media (prefers-reduced-motion: reduce) { .qn-hand .qh-kreuz { animation: none; } } .qh-kreuz b { position: absolute; left: 50%; top: 50%; width: 2.6cqmin; height: 2.6cqmin; margin: -1.3cqmin 0 0 -1.3cqmin; border-radius: 50%; background: #fff; } /* ===================================================================== GROSSE SCHRIFT — was die Stufen 125 und 150 am Schirm aendern. Eine Schriftstufe, die nur auf den Schirmen haelt, die man zufaellig aufgemacht hat, ist keine Einstellung. Gemessen wurde jeder Handschirm in jeder Spielart bei jeder Stufe (`gross.mjs`); was dabei herauskam, steht hier. ===================================================================== */ /* 1. ROLLEN STATT ABSCHNEIDEN. Der Leib hat `overflow:hidden` geerbt und damit alles still gekappt, was nicht passte — beim Emoji-Raetsel schon bei 100 % die unterste Tastenreihe. Was nicht passt, rollt jetzt; die Frage bleibt oben, der Knopf bleibt unten. */ .qn-hand .qh-leib { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; } .qn-hand .qh-leib::-webkit-scrollbar { width: 0; height: 0; } /* 2. DIE TASTATUR-ATTRAPPE weicht ab 125 %. Sie zeigt nur, dass dort die echte Tastatur des Geraets steht — wer grosse Schrift braucht, braucht den Platz fuer den Text, nicht fuer ein Abbild. */ .qn-hand.qh-gross .qh-tastatur { display: none; } /* 3. DIE LUFT SCHRUMPFT MIT. Abstaende sind in cqmin und wachsen mit dem Zoom um denselben Faktor wie die Schrift — bei 150 % ist die Luft dreimal so gross wie noetig, und genau sie fehlt dem Inhalt. */ .qn-hand.qh-gross .qh-leib { gap: 2cqmin; } .qn-hand.qh-gross .qh-eingabe { gap: 1.8cqmin; } .qn-hand.qh-gross .qh-wahl { gap: 1.6cqmin; } .qn-hand.qh-gross .qh-kachel { padding: 1.8cqmin 3.2cqmin; min-height: 11cqmin; } .qn-hand.qh-gross .qh-fuss { gap: 1.6cqmin; padding-top: 1.2cqmin; } .qn-hand.qh-gross .qh-bilanz { gap: 1cqmin; } .qn-hand.qh-gross .qh-bilanzzeile { padding: 1.5cqmin 2.6cqmin; } .qn-hand.qh-gross .qh-a-stand { padding: 2.2cqmin 3cqmin; gap: .8cqmin 2.4cqmin; } .qn-hand.qh-gross .qh-a-wahr { padding: 2.2cqmin 3cqmin; } .qn-hand.qh-gross .qh-a-figur { width: 22cqmin; height: 22cqmin; } .qn-hand.qh-gross .qh-a-figur .qn-av { --gr: 18cqmin; } /* Das Schaufeld darf bei grosser Schrift kleiner werden — es erklaert, und die Erklaerung darf weichen, bevor die Zahlen es tun. */ .qn-hand.qh-gross .qh-schaukompass .qh-rose { width: min(44cqmin, 100%); } .qn-hand.qh-gross .qh-kompass .qh-rose { width: min(78cqmin, 100%); } /* ===================================================================== DAS ZAHNRAD und sein Blatt Der Knopf haengt am RAHMEN der Hand, nicht in der Kopfzeile — so traegt ihn jeder Schirm, auch die, die ihren Kopf selbst bauen. Der Kopf bekommt rechts Platz dafuer, damit kein Name darunter laeuft. ===================================================================== */ .qn-hand { --schrift: 1; } /* Die Schriftstufe wirkt NUR auf Schriftgrößen (siehe unten, jede `font-size` einer .qh-Regel trägt den Faktor). Ein zoom auf den Schirm wäre wirkungslos: Bei einem Layout, das durchgehend in cqmin gegen die Handbühne rechnet, wachsen Schrift und Flächen gemeinsam — netto bliebe alles gleich. Größere Schrift heißt: Text wächst, Flächen nicht. */ .qh-zahnrad { position: absolute; right: 3.2cqmin; top: max(4.6cqmin, env(safe-area-inset-top)); z-index: 24; width: 8.4cqmin; height: 8.4cqmin; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--t0) 9%, transparent); color: var(--t1); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--d-kurz) var(--k-ein), color var(--d-kurz) var(--k-ein), transform var(--d-mittel) var(--k-ein); } /* Sichtbar klein, tippbar gross: 11,3cqmin sind rund 44 px auf 390. */ .qh-zahnrad::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100% + 3cqmin, 48px); height: max(100% + 3cqmin, 48px); transform: translate(-50%, -50%); border-radius: 50%; } .qh-zahnrad svg { width: 5cqmin; height: 5cqmin; } .qh-zahnrad:hover { color: var(--t0); background: color-mix(in srgb, var(--t0) 14%, transparent); } .qh-zahnrad.an { color: var(--acc2); background: color-mix(in srgb, var(--acc2) 18%, transparent); transform: rotate(60deg); } /* Der Kopf macht rechts Platz — sonst laeuft ein langer Kategoriename unter den Knopf. */ /* Das Zahnrad sitzt absolut bei `right: 3.2cqmin` und ist 8,4cqmin breit, belegt also 11,6cqmin — mit 11cqmin lief die Uhr darunter durch. 15cqmin lassen drei Komma vier Luft dazwischen, damit es sauber aussieht. */ .qn-hand .qh-kopf { padding-right: 15cqmin; } /* Das Blatt. Unten verankert, weil dort der Daumen ist; der Ruecken faengt jeden Tipp ab, der sonst den lebenden Schirm darunter traefe. */ .qh-einstblatt { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; justify-content: flex-end; } .qh-einst-ruecken { position: absolute; inset: 0; background: rgba(4, 6, 10, .62); opacity: 0; transition: opacity var(--d-mittel) var(--k-ein); } .qh-einstblatt.auf .qh-einst-ruecken { opacity: 1; } .qh-einst-karte { position: relative; max-height: 74%; overflow: auto; overscroll-behavior: contain; background: var(--g2); border-radius: 7cqmin 7cqmin 31px 31px; box-shadow: 0 -2cqmin 9cqmin rgba(0, 0, 0, .6); padding: 2.2cqmin 4.4cqmin calc(4.4cqmin + env(safe-area-inset-bottom)); display: grid; gap: 2.4cqmin; align-content: start; transform: translateY(102%); transition: transform var(--d-lang) var(--k-ein); } .qh-einstblatt.auf .qh-einst-karte { transform: none; } .qh-einst-griff { width: 12cqmin; height: .9cqmin; border-radius: 10cqmin; justify-self: center; background: color-mix(in srgb, var(--t0) 22%, transparent); } .qh-einst-titel { font-family: var(--f-display); font-size: calc(5.6cqmin * var(--schrift, 1)); font-weight: 800; line-height: 1.1; } .qh-einst-titel span { display: block; font-family: var(--f-body); font-size: calc(3.2cqmin * var(--schrift, 1)); font-weight: 600; color: var(--t2); margin-top: .5cqmin; } .qh-einst-liste { display: grid; gap: 1.6cqmin; } .qh-einst-zeile { display: grid; gap: 1.2cqmin; padding: 2.8cqmin 3.4cqmin; border-radius: 3.4cqmin; min-height: 13cqmin; align-content: center; cursor: pointer; background: color-mix(in srgb, var(--t0) 6%, transparent); } .qh-einst-zeile:active { transform: scale(.99); } .qh-einst-kopf { display: flex; align-items: center; gap: 2cqmin; } .qh-einst-kopf b { flex: 1; font-size: calc(4.4cqmin * var(--schrift, 1)); font-weight: 700; } .qh-einst-pfeil { font-size: calc(5cqmin * var(--schrift, 1)); color: var(--t2); line-height: 1; } .qh-einst-fuss { font-size: calc(3cqmin * var(--schrift, 1)); color: var(--t2); line-height: 1.35; } /* Der Schalter: eine Bahn, ein Knopf, der hinueberfaehrt. */ .qh-schalter { flex: none; width: 11.6cqmin; height: 6.6cqmin; border-radius: 10cqmin; position: relative; background: color-mix(in srgb, var(--t0) 16%, transparent); transition: background var(--d-mittel) var(--k-ein); } .qh-schalter > i { position: absolute; left: .7cqmin; top: .7cqmin; width: 5.2cqmin; height: 5.2cqmin; border-radius: 50%; background: var(--qh-sch-knopf, var(--t1)); transform: translateX(var(--qh-sch-x, 0px)); transition: transform var(--d-mittel) var(--k-schnapp), background var(--d-mittel) var(--k-ein); } /* LEISTUNG (2026-10-07): Der Knopf liest Weg und Farbe vom Schalter (--qh-sch-x, --qh-sch-knopf), statt dass eine Regel „.an > i“ ihn trifft. Solche Regeln machten JEDES unter JEDEM Element, das .an bekommt oder verliert, zum Fall für eine Stil-Neuberechnung — und die Figuren (monster/leben.js) bestehen aus und schalten ihre Formen mit .an (Gruppenmoment, 24 Figuren, CPU 4×, im Wechsel gemessen: 24 → 28 Bilder/s). */ .qh-schalter.an { background: color-mix(in srgb, var(--ok) 55%, transparent); --qh-sch-x: 5cqmin; --qh-sch-knopf: #fff; } .qh-einst-wahl { display: flex; gap: 1.2cqmin; } .qh-einst-opt { flex: 1 1 0; text-align: center; padding: 2.2cqmin 0; border-radius: 2.6cqmin; font-size: calc(3.8cqmin * var(--schrift, 1)); font-weight: 700; color: var(--t1); background: color-mix(in srgb, var(--t0) 8%, transparent); transition: background var(--d-kurz) var(--k-ein), color var(--d-kurz) var(--k-ein); } .qh-einst-opt.an { background: var(--acc2); color: var(--auf-acc2); } .qh-recht { font-size: calc(3.4cqmin * var(--schrift, 1)); line-height: 1.45; color: var(--t1); display: grid; gap: 2cqmin; } .qh-recht p { margin: 0; } .qh-recht .qh-recht-klein { color: var(--t2); font-size: calc(3cqmin * var(--schrift, 1)); } .qh-einst-fertig { display: block; text-align: center; padding: 3.4cqmin; border-radius: 3.4cqmin; font-size: calc(4.6cqmin * var(--schrift, 1)); font-weight: 800; color: var(--auf-acc2); background: var(--acc2); cursor: pointer; min-height: 13cqmin; line-height: 6.2cqmin; } /* „Spiel verlassen": die einzige Zeile, die etwas kaputtmachen kann — deshalb als einzige mit Rueckfrage, und die klappt IN der Zeile auf, statt ein zweites Blatt zu oeffnen. */ .qh-einst-zeile.gefahr b { color: var(--warn); } .qh-einst-zeile.gefahr .qh-einst-pfeil { color: var(--warn); } .qh-sicher { display: none; gap: 1.6cqmin; margin-top: 1.4cqmin; } .qh-einst-zeile.fragt .qh-sicher { display: flex; } .qh-einst-zeile.fragt { background: color-mix(in srgb, var(--warn) 14%, transparent); } .qh-sicher span { flex: 1 1 0; text-align: center; padding: 2.4cqmin 0; border-radius: 2.6cqmin; font-size: calc(3.8cqmin * var(--schrift, 1)); font-weight: 700; min-height: 11cqmin; background: color-mix(in srgb, var(--t0) 10%, transparent); color: var(--t1); } .qh-sicher span.ja { background: var(--warn); color: var(--auf-warn); } /* ===================================================================== EINSTELLUNGEN JE PLATTFORM (Tobi, 2026-10-02; qn.js „DAS MENÜ JE PLATTFORM") Am Handy bleibt das Blatt von unten. Am eigenen Schirm (Online, Discord) ist es ein FELD unter dem Zahnrad: so breit wie nötig, das Spiel bleibt daneben zu sehen, der Rücken dunkelt nur leicht. Maße mit Untergrenzen in px — auf S (628 × 390) ist 1cqmin nur 3,9 px. Trefferflächen ab 48 px. ===================================================================== */ .qh-einst-trenner { height: max(1px, .25cqmin); margin: .2cqmin 3cqmin; border-radius: 1px; background: color-mix(in srgb, var(--t0) 12%, transparent); } /* „Dieser Abend": was der Host eingestellt hat — zum Lesen, nicht zum Ändern. */ .qh-einst-abend { display: grid; gap: .8cqmin; padding: 2.4cqmin 3.4cqmin; border-radius: 3.4cqmin; box-shadow: inset 0 0 0 max(1px, .25cqmin) color-mix(in srgb, var(--t0) 14%, transparent); } .qh-einst-abend b { font-size: 3cqmin; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--t2); } .qh-einst-abend span { font-size: 3.5cqmin; font-weight: 600; color: var(--t0); line-height: 1.35; } .qh-einst-abend span span { white-space: nowrap; font-size: inherit; } .qh-einst-abend span i { font-style: normal; color: var(--t2); } .qh-einst-hinweis { margin: 0; font-size: 3cqmin; color: var(--t2); line-height: 1.35; } .qh-einst-hinweis[hidden] { display: none; } .qh-einst-neu .qh-einst-titel span[hidden] { display: none; } /* Am Handy (neu): mit „Dieser Abend" ist das Blatt höher — es darf, damit auch die Rückfrage ganz zu sehen ist. */ .qh-einst-neu:not(.qh-einst-feld) .qh-einst-karte { max-height: 90%; } .qh-einst-neu:not(.qh-einst-feld) .qh-sicher span { min-height: 12.4cqmin; display: grid; place-items: center; padding: 0; } .qh-einst-eng .qh-einst-abend { display: none; } .qh-einst-neu .qh-einst-zeile:focus-visible, .qh-einst-neu .qh-schalter:focus-visible, .qh-einst-neu .qh-sicher span:focus-visible, .qh-einst-neu .qh-einst-fertig:focus-visible { outline: max(2px, .35cqmin) solid var(--t0); outline-offset: max(2px, .3cqmin); } .qh-einstblatt.qh-einst-feld { justify-content: flex-start; z-index: 40; } .qh-einstblatt.qh-einst-feld .qh-einst-ruecken { background: rgba(4, 6, 10, .3); } .qh-einstblatt.qh-einst-feld .qh-einst-karte { position: absolute; top: calc(var(--zr-unten, 9cqmin) + max(6px, 1cqmin)); right: var(--zr-rechts, 3cqmin); container-type: normal; width: min(max(280px, 54cqmin), calc(100% - 4cqmin)); max-width: none; max-height: calc(100% - var(--zr-unten, 9cqmin) - var(--zr-boden, 0px) - max(12px, 2cqmin)); margin: 0; padding: max(10px, 1.8cqmin); gap: max(8px, 1.3cqmin); border-radius: max(14px, 2.6cqmin); box-shadow: 0 1.6cqmin 6cqmin rgba(0, 0, 0, .55), inset 0 0 0 max(1px, .16cqmin) color-mix(in srgb, var(--t0) 12%, transparent); transform: translateY(-1.2cqmin) scale(.97); transform-origin: 94% 0; opacity: 0; transition: transform var(--d-mittel) var(--k-ein), opacity var(--d-kurz) var(--k-ein); } .qh-einstblatt.qh-einst-feld.auf .qh-einst-karte { transform: none; opacity: 1; } .qh-einst-feld .qh-einst-griff, .qh-einst-feld .qh-einst-fertig { display: none; } .qh-einst-feld .qh-einst-titel { display: flex; align-items: baseline; gap: max(6px, 1.2cqmin); padding: 0 max(4px, .6cqmin); font-size: max(14px, 2.9cqmin); } .qh-einst-feld .qh-einst-titel span { display: inline; margin: 0; font-size: max(10px, 1.8cqmin); } /* Zwei Spalten: Schalter und „Gehen" über die ganze Breite, die Wege (Gruppe 2) nebeneinander. */ .qh-einst-feld .qh-einst-liste { grid-template-columns: 1fr 1fr; gap: max(4px, .7cqmin); } .qh-einst-feld .qh-einst-liste > * { grid-column: 1 / -1; } .qh-einst-feld .qh-einst-liste > [data-g="2"]:not(.allein) { grid-column: auto; } .qh-einst-feld .qh-einst-liste > [data-g="2"]:not(.allein) .qh-einst-fuss { display: none; } .qh-einst-feld .qh-einst-zeile { min-height: 48px; padding: max(6px, 1cqmin) max(10px, 1.7cqmin); border-radius: max(10px, 1.8cqmin); gap: max(2px, .3cqmin); } @media (hover: hover) { .qh-einst-feld .qh-einst-zeile:hover { background: color-mix(in srgb, var(--t0) 11%, transparent); } } .qh-einst-feld .qh-einst-kopf { gap: max(8px, 1.4cqmin); } .qh-einst-feld .qh-einst-kopf b { font-size: max(12px, 2.3cqmin); } .qh-einst-feld .qh-einst-pfeil { font-size: max(15px, 2.8cqmin); } .qh-einst-feld .qh-einst-fuss { font-size: max(10px, 1.75cqmin); line-height: 1.3; } .qh-einst-feld .qh-schalter { --sw: max(22px, 3.7cqmin); width: calc(var(--sw) * 1.8); height: var(--sw); } .qh-einst-feld .qh-schalter > i { left: 3px; top: 3px; width: calc(var(--sw) - 6px); height: calc(var(--sw) - 6px); } .qh-einst-feld .qh-schalter.an { --qh-sch-x: calc(var(--sw) * .8); } .qh-einst-feld .qh-einst-abend { padding: max(7px, 1.1cqmin) max(10px, 1.7cqmin); border-radius: max(10px, 1.8cqmin); gap: max(2px, .3cqmin); } .qh-einst-feld .qh-einst-abend b { font-size: max(9px, 1.5cqmin); } .qh-einst-feld .qh-einst-abend span { font-size: max(11px, 2cqmin); } .qh-einst-feld .qh-einst-trenner { margin: max(1px, .2cqmin) max(8px, 1.6cqmin); } .qh-einst-feld .qh-einst-hinweis { font-size: max(10px, 1.75cqmin); padding: 0 max(4px, .6cqmin); } .qh-einst-feld .qh-recht { font-size: max(11px, 2cqmin); gap: max(6px, 1cqmin); padding: 0 max(4px, .6cqmin); } .qh-einst-feld .qh-recht .qh-recht-klein { font-size: max(10px, 1.75cqmin); } /* Die Rückfrage steht IN der Zeile, neben dem Wort — die Zeile wird nicht höher, nichts rückt aus dem Bild. */ .qh-einst-feld .qh-sicher { gap: max(6px, 1cqmin); margin: 0; } .qh-einst-feld .qh-sicher span { position: relative; flex: none; display: grid; place-items: center; padding: 0 max(12px, 2cqmin); min-height: max(36px, 5.6cqmin); border-radius: max(9px, 1.6cqmin); font-size: max(11px, 2.1cqmin); cursor: pointer; } .qh-einst-feld .qh-sicher span::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 48px); transform: translateY(-50%); } .qh-einst-feld .qh-einst-zeile.gefahr.fragt { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .qh-einst-feld .qh-einst-zeile.gefahr.fragt .qh-einst-pfeil, .qh-einst-feld .qh-einst-zeile.gefahr.fragt .qh-einst-fuss { display: none; } .qh-einst-feld .qh-einst-zeile.gefahr.fragt .qh-einst-kopf b::after { content: "?"; } /* Im Rechtlichen gibt es einen Rückweg in die Liste. */ .qh-einst-feld.qh-einst-liest .qh-einst-fertig { display: block; min-height: 48px; line-height: 1.2; padding: max(14px, 1.9cqmin); border-radius: max(10px, 1.8cqmin); font-size: max(12px, 2.3cqmin); box-sizing: border-box; } /* Zwei Spalten (qn.js, passeFeld): Passt das Feld nicht zwischen Zahnrad und Pult, steht jede Zeile in einer Zelle — breiter statt höher. Die Rückfrage von „Spiel verlassen“ nimmt die ganze Breite. */ .qh-einstblatt.qh-einst-feld.qh-einst-quer .qh-einst-karte { width: min(max(400px, 64cqmin), calc(100% - 4cqmin)); } .qh-einst-feld.qh-einst-quer .qh-einst-liste > * { grid-column: auto; } .qh-einst-feld.qh-einst-quer .qh-einst-liste > .qh-einst-trenner, .qh-einst-feld.qh-einst-quer .qh-einst-liste > .qh-einst-abend, .qh-einst-feld.qh-einst-quer .qh-einst-zeile:not(.fbm-dank) .qh-einst-fuss { display: none; } .qh-einst-feld.qh-einst-quer .qh-einst-liste > .qh-einst-zeile.gefahr.fragt { grid-column: 1 / -1; } /* Niedrig (S, 628 × 390): ohne die Erklärzeilen passt das Feld, ohne zu rollen. */ @container (max-height: 460px) { .qh-einst-feld .qh-einst-zeile .qh-einst-fuss { display: none; } } @media (prefers-reduced-motion: reduce) { .qh-einstblatt.qh-einst-feld .qh-einst-karte { transition: none; transform: none; } } /* Solange das Blatt offen ist, nimmt der Schirm darunter keine Tipps an — der Ruecken liegt darueber, aber der Zeiger soll es auch sagen. */ .qn-hand.qh-blatt-auf .qh-leib { pointer-events: none; } /* „Ruhiger Schirm": nimmt die dauernde Bewegung, laesst die Zeit in Ruhe. Uhr, Zeitbalken und die Choreografie des Auftritts bleiben. */ .qn-hand.qh-ruhig-an .qn-puls, .qn-hand.qh-ruhig-an .qh-knopf:not(.qh-aus):not(.qh-zweit).da { animation: none !important; } .qn-hand.qh-ruhig-an .qh-strahl { transition-duration: var(--d-kurz); } @media (prefers-reduced-motion: reduce) { .qh-einst-karte, .qh-einst-ruecken, .qh-schalter > i, .qh-zahnrad { transition: none; } .qh-einst-karte { transform: none; } } /* ---- Was die uebrigen Eingaben antworten --------------------------- */ /* Das Schreibfeld zeigt, dass es zuhoert: Rahmen in der Akzentfarbe und ein Strich, der blinkt. Ohne das schreibt man in eine Flaeche, die aussieht wie jede andere. */ .qn-hand.sp-lebt .qh-schreib:focus-within { box-shadow: inset 0 0 0 .5cqmin var(--acc2), 0 0 4cqmin color-mix(in srgb, var(--acc2) 26%, transparent); } @keyframes qh-cursor { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } } .qn-hand.sp-lebt .qh-schreib:focus-within::after { content: ""; display: inline-block; width: .5cqmin; height: 5.4cqmin; margin-left: .6cqmin; vertical-align: -1cqmin; background: var(--acc2); animation: qh-cursor 1.1s steps(1) infinite; } @media (prefers-reduced-motion: reduce) { .qn-hand.sp-lebt .qh-schreib:focus-within::after { animation: none; } } /* Der Griff waechst, solange der Daumen liegt. Zwoelf Prozent sind genug, damit es die Hand spuert, und wenig genug, dass die Bahn nicht springt. */ .qh-bahn i { transition: transform var(--d-kurz) var(--k-ein); } .qh-bahn.qh-greift i { transform: scale(1.12); } .qh-bahn.qh-greift { box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--t0) 26%, transparent); } /* Die Ringwelle an der Stelle, die getroffen wurde. Sie laeuft einmal und raeumt sich selbst weg — ein Rest auf der Flaeche waere ein zweiter Pin. */ @keyframes qh-tropfen { 0% { transform: translate(-50%, -50%) scale(.2); opacity: .8; } 100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; } } .qh-tropfen { position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 16cqmin; height: 16cqmin; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 .6cqmin color-mix(in srgb, var(--acc2) 70%, transparent); animation: qh-tropfen 600ms var(--k-ein) both; } /* Die getroffene Taste leuchtet auf — auf einer Attrappe ist das der einzige Beleg, dass der Tipp angekommen ist. */ @keyframes qh-taste { 0% { background: color-mix(in srgb, var(--acc2) 58%, transparent); color: var(--auf-acc2); } 100% { background: initial; color: inherit; } } .qn-hand .qh-taste { animation: qh-taste 320ms var(--k-ein) both; } /* DIE LETZTEN SEKUNDEN. Der Balken unter der Kopfzeile faerbt sich und atmet, sobald ein Viertel der Zeit uebrig ist. Bis dahin passiert nichts — sonst ist die ganze Frage ueber Alarm, und Alarm ohne Anlass wird Tapete. */ @keyframes qh-knapp { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } .qn-hand .qh-uhr.knapp { color: var(--warn); } .qn-hand .qh-uhr.knapp b { animation: qh-knapp 900ms ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .qh-tropfen, .qn-hand .qh-taste, .qn-hand .qh-uhr.knapp b { animation: none; } .qh-bahn.qh-greift i { transform: none; } } /* ===================================================================== DAS SCHAUFELD — wie weit lag ich daneben? Steht in der Aufloesung zwischen Punktzahl und Bilanz. Die Luecke zwischen der eigenen Marke und der Wahrheit faehrt auf: ein kurzer Strich heisst nah dran, ein langer heisst weit weg — und das sieht man, bevor man die Zahl gelesen hat. ===================================================================== */ .qh-schaufeld { flex: none; } .qh-schau { display: grid; gap: 2.2cqmin; } .qh-schauskala .qh-achse { position: relative; height: 13cqmin; border-radius: 10cqmin; background: color-mix(in srgb, var(--t0) 8%, transparent); box-shadow: inset 0 0 0 .3cqmin color-mix(in srgb, var(--t0) 10%, transparent); } /* Die Luecke waechst von der eigenen Marke zur Wahrheit. */ .qh-schauskala .qh-luecke { position: absolute; left: var(--a); top: 50%; height: 1.5cqmin; width: 0; margin-top: -.75cqmin; border-radius: 10cqmin; background: repeating-linear-gradient(90deg, var(--warn) 0 1.6cqmin, transparent 1.6cqmin 3.2cqmin); transition: width var(--d-xl) var(--k-ein) 120ms; } .qh-schau.qh-faehrt .qh-luecke { width: var(--b); } .qh-schauskala .qh-marke { position: absolute; left: 50%; top: 0; bottom: 0; width: 0; transition: left var(--d-xl) var(--k-ein); } .qh-schau.qh-faehrt .qh-marke { left: var(--p); } .qh-schauskala .qh-marke > i { position: absolute; left: -.45cqmin; top: 1.4cqmin; bottom: 1.4cqmin; width: .9cqmin; border-radius: 10cqmin; background: var(--t1); } .qh-schauskala .qh-marke > b { position: absolute; left: 50%; transform: translateX(-50%); top: -4.6cqmin; font-size: calc(3.2cqmin * var(--schrift, 1)); font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; } .qh-schauskala .qh-marke.wahr > i { background: var(--ok); box-shadow: 0 0 2.4cqmin color-mix(in srgb, var(--ok) 60%, transparent); } .qh-schauskala .qh-marke.wahr > b { color: var(--ok); } .qh-schauskala .qh-marke.meins > i { background: var(--acc2); } .qh-schauskala .qh-marke.meins > b { color: var(--acc2); top: auto; bottom: -4.6cqmin; } .qh-achsfuss { display: flex; align-items: baseline; justify-content: space-between; gap: 2cqmin; font-size: calc(3cqmin * var(--schrift, 1)); color: var(--t2); margin-top: 3.4cqmin; } .qh-achsfuss em { font-style: normal; font-weight: 800; color: var(--warn); font-size: calc(3.6cqmin * var(--schrift, 1)); font-variant-numeric: tabular-nums; } .qh-schauskala.ohne .qh-marke.wahr > b { color: var(--ok); } /* Der Kompass im Schaufeld ist kleiner als in der Eingabe — er erklaert hier, statt bedient zu werden. */ .qh-schaukompass .qh-kompass { gap: 1.4cqmin; } .qh-schaukompass .qh-rose { width: min(58cqmin, 100%); } .qh-schaukompass .qh-rosemitte .qh-gradzahl { font-size: calc(9cqmin * var(--schrift, 1)); } .qh-schaukompass .qh-rosemitte em { font-size: calc(3cqmin * var(--schrift, 1)); } .qh-schaukompass .qh-himmelwort { font-size: calc(4.6cqmin * var(--schrift, 1)); } .qh-schaukompass .qh-strahl > i { height: 26cqmin; } .qh-schaukompass .qh-strahl.wahr > i { height: 17cqmin; } /* ===================================================================== DER KOMPASS (art: 'kompass') Die Rose steht, der Strahl dreht. Er faehrt auf seinen Wert, statt dort zu erscheinen — wer eine Peilung einstellt, soll sehen, wie er sich heranarbeitet. In der Aufloesung kommt ein zweiter Strahl in Gold dazu und dazwischen der Fehlerbogen; dann liest man den Abstand als WINKEL und nicht als Zahl. ===================================================================== */ /* Der Kompass nimmt den Schirm ein, statt in der Mitte zu schweben: Eine Rose mit einem Handbreit Luft darueber und darunter ist ein Bild in einem Rahmen; eine, die den Daumen erreicht, ist ein Instrument. */ .qh-kompass { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 1.6cqmin; } .qh-rose { position: relative; width: min(96cqmin, 100%); aspect-ratio: 1; flex: 0 1 auto; max-height: 100%; container-type: size; } .qh-rose .qh-ring { position: absolute; inset: 0; width: 100%; height: 100%; } .qh-rose .qh-ring .scheibe { fill: color-mix(in srgb, var(--g2) 88%, var(--acc)); stroke: color-mix(in srgb, var(--t0) 16%, transparent); stroke-width: 1.6; } .qh-rose .qh-ring .innen { fill: none; stroke: color-mix(in srgb, var(--t0) 8%, transparent); stroke-width: .8; } .qh-rose .qh-ring line { stroke: color-mix(in srgb, var(--t0) 26%, transparent); stroke-width: 1; } .qh-rose .qh-ring line.lang { stroke: color-mix(in srgb, var(--t0) 52%, transparent); stroke-width: 1.8; } .qh-rose .qh-ring text { fill: var(--t2); font-size: 8px; font-family: var(--f-mono); font-weight: 700; text-anchor: middle; letter-spacing: -.02em; } .qh-rose .qh-ring .qh-fehlerbogen { fill: none; stroke: var(--warn, #ffcc4d); stroke-width: 3.4; stroke-linecap: round; opacity: .85; } .qh-himmelwort { position: absolute; font-family: var(--f-display); font-weight: 800; font-size: calc(6.4cqmin * var(--schrift, 1)); color: var(--t1); line-height: 1; } .qh-himmelwort.n { top: 3.4cqmin; left: 50%; transform: translateX(-50%); color: var(--acc2); } .qh-himmelwort.s { bottom: 3.4cqmin; left: 50%; transform: translateX(-50%); } .qh-himmelwort.o { right: 3.6cqmin; top: 50%; transform: translateY(-50%); } .qh-himmelwort.w { left: 3.6cqmin; top: 50%; transform: translateY(-50%); } /* Der Strahl: ein Balken vom Mittelpunkt nach aussen, mit Spitze. Gedreht wird der TRAEGER, damit die Spitze immer nach aussen zeigt. */ .qh-strahl { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(calc(var(--grad, 0) * 1deg)); transition: transform var(--d-lang) var(--k-ein); } .qh-strahl > i { position: absolute; left: -1.4cqmin; bottom: 0; width: 2.8cqmin; height: 41cqmin; border-radius: 1.4cqmin 1.4cqmin .6cqmin .6cqmin; background: linear-gradient(180deg, var(--acc2) 0 58%, color-mix(in srgb, var(--acc2) 30%, transparent)); box-shadow: 0 0 3cqmin color-mix(in srgb, var(--m3) 92%, transparent); } .qh-strahl > i::before { content: ""; position: absolute; left: 50%; top: -1.6cqmin; transform: translateX(-50%); border-left: 2.4cqmin solid transparent; border-right: 2.4cqmin solid transparent; border-bottom: 3.2cqmin solid var(--acc2); } .qh-strahl.wahr { transform: rotate(calc(var(--wahr, 0) * 1deg)); } /* Der Wahrheits-Strahl ist kuerzer und schmaler. Bei zwoelf Grad Abweichung laegen zwei gleich lange Balken fast aufeinander — so bleiben beide lesbar, und der eigene Kurs bleibt der Hauptakteur. */ .qh-strahl.wahr > i { background: linear-gradient(180deg, var(--ok, #4ee08a) 0 58%, color-mix(in srgb, var(--ok, #4ee08a) 26%, transparent)); box-shadow: 0 0 3cqmin color-mix(in srgb, var(--ok, #4ee08a) 50%, transparent); width: 1.8cqmin; left: -.9cqmin; height: 27cqmin; } .qh-strahl.wahr > i::before { border-bottom-color: var(--ok, #4ee08a); border-left-width: 2cqmin; border-right-width: 2cqmin; } .qh-rosemitte { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .4cqmin; text-align: center; background: radial-gradient(closest-side, var(--g1) 62%, transparent); padding: 3cqmin 4cqmin; border-radius: 50%; pointer-events: none; } .qh-rosemitte .qh-gradzahl { font-size: calc(13cqmin * var(--schrift, 1)); font-weight: 800; line-height: 1; color: var(--t0); font-variant-numeric: tabular-nums; letter-spacing: -.03em; } .qh-rosemitte em { font-style: normal; font-size: calc(3.6cqmin * var(--schrift, 1)); font-weight: 700; color: var(--acc2); letter-spacing: .04em; } .qh-kompassfuss { flex: none; font-size: calc(3.3cqmin * var(--schrift, 1)); color: var(--t2); text-align: center; } /* Beim Peilen faehrt der Strahl mit dem Daumen — ohne Nachlauf, sonst klebt er hinterher. Die weiche Fahrt gilt nur, wenn er von selbst geht (Aufloesung, Vorbelegung). */ .qn-hand.sp-lebt .qh-rose.greift .qh-strahl { transition: none; } .qn-hand.sp-lebt .qh-rose { cursor: grab; touch-action: none; } .qn-hand.sp-lebt .qh-rose.greift { cursor: grabbing; } @media (prefers-reduced-motion: reduce) { .qh-strahl { transition: none; } } /* REIHENFOLGE — Griffe links, Rang rechts. Die Zeilen sind so hoch wie ein Daumen breit ist, sonst greift man beim Schieben die falsche. */ .qh-reihe { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2cqmin; min-height: 0; } .qh-zeile { flex: 1 1 0; min-height: 12cqmin; display: flex; align-items: center; gap: 3cqmin; padding: 2.4cqmin 3.4cqmin; border-radius: 3.4cqmin; background: var(--g2); box-shadow: inset 0 0 0 .4cqmin color-mix(in srgb, var(--t0) 10%, transparent); } .qh-zeile .qh-rang { flex: none; width: 8cqmin; height: 8cqmin; border-radius: 2.4cqmin; display: grid; place-items: center; font-family: var(--f-mono); font-size: calc(4.2cqmin * var(--schrift, 1)); font-weight: 700; color: var(--acc); background: color-mix(in srgb, var(--acc) 18%, transparent); } .qh-zeile .qh-txt { flex: 1 1 auto; min-width: 0; font-size: calc(4.4cqmin * var(--schrift, 1)); font-weight: 700; overflow-wrap: anywhere; } .qh-zeile .qh-griff { flex: none; display: grid; gap: .9cqmin; opacity: .55; } .qh-zeile .qh-griff i { display: block; width: 5.4cqmin; height: .55cqmin; border-radius: 10cqmin; background: var(--t1); } /* ZUORDNEN — zwei Spalten, dazwischen die Linie. Was schon sitzt, trägt die Kategoriefarbe; was offen ist, bleibt grau. */ .qh-zuordnen { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2cqmin; min-height: 0; } /* Die ZEILE ist das Ding, nicht ihre zwei Hälften. Ohne eigene Fläche schwebten zwei Kästchen in einem hohen leeren Streifen, und zwischen den Zeilen stand jedes Mal ein Finger breit Nichts. */ .qh-paar { flex: 1 1 0; min-height: 11cqmin; display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 1.6cqmin; padding: 2cqmin; border-radius: 3.6cqmin; background: color-mix(in srgb, var(--t0) 4%, transparent); box-shadow: inset 0 0 0 .3cqmin color-mix(in srgb, var(--t0) 7%, transparent); } .qh-paar.qh-sitzt { background: color-mix(in srgb, var(--acc) 12%, transparent); box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--acc) 30%, transparent); } .qh-paar > span { min-width: 0; display: flex; align-items: center; padding: 2.2cqmin 2.6cqmin; border-radius: 3cqmin; background: var(--g2); font-size: calc(3.9cqmin * var(--schrift, 1)); font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--t0) 10%, transparent); } .qh-paar > i { align-self: center; flex: none; width: 5.4cqmin; height: .5cqmin; border-radius: 10cqmin; background: color-mix(in srgb, var(--t0) 18%, transparent); } .qh-paar.qh-sitzt > span { background: color-mix(in srgb, var(--acc) 22%, var(--g2)); box-shadow: inset 0 0 0 .45cqmin color-mix(in srgb, var(--acc) 64%, transparent); } .qh-paar.qh-sitzt > i { background: var(--acc); } /* KNOPF — die Kategorien, bei denen die ganze Eingabe aus einer Entscheidung besteht. Dann ist der Knopf nicht im Fuß, sondern IST der Schirm. */ .qh-knopfwahl { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3cqmin; } .qh-riese { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4cqmin; border-radius: 5cqmin; padding: 4cqmin; background: color-mix(in srgb, var(--acc) 24%, var(--g2)); box-shadow: inset 0 0 0 .6cqmin var(--acc), 0 2cqmin 5cqmin rgba(0, 0, 0, .45); } .qh-riese b { font-family: var(--f-display); font-size: calc(8cqmin * var(--schrift, 1)); font-weight: 800; letter-spacing: -.02em; color: #fff; } .qh-riese span { font-size: calc(3.5cqmin * var(--schrift, 1)); color: color-mix(in srgb, #fff 74%, transparent); text-align: center; } .qh-riese.qh-ruhig { background: var(--g2); box-shadow: inset 0 0 0 .5cqmin color-mix(in srgb, var(--t0) 14%, transparent); } .qh-riese.qh-ruhig b { color: var(--t1); } /* Ein Stand, den nur das eigene Gerät kennt — der Kartenwert beim Nachlegen, die eigene Summe. Steht NICHT an der Wand, gehört also hierher. */ .qh-eigen { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 2cqmin; padding: 2.6cqmin 3.4cqmin; border-radius: 3.4cqmin; background: color-mix(in srgb, var(--acc2) 11%, transparent); box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--acc2) 30%, transparent); } .qh-eigen span { font-size: calc(3.5cqmin * var(--schrift, 1)); color: var(--t1); } .qh-eigen b { flex: none; min-width: 0; font-family: var(--f-mono); font-size: calc(5.4cqmin * var(--schrift, 1)); font-weight: 700; color: var(--acc2); font-variant-numeric: tabular-nums; white-space: nowrap; } /* ---- 4. Wie man abschickt ------------------------------------------------ */ /* Unten mehr Luft als oben: Auf dem Gerät liegt dort die Griffkante, und ein Knopf, der die Rundung berührt, sieht abgeschnitten aus. DAZU DIE SICHERE ZONE. 7,4cqmin sind auf einem 390 Punkte breiten Gerät 29 Punkte — der Home-Balken von iOS braucht 34, die Gestenleiste von Android je nach Gerät mehr. Der Abschicken-Knopf, das wichtigste Element des ganzen Produkts, läge damit teilweise in der Wischzone des Betriebssystems: ein verlorener Tipp pro Runde. `max()` nimmt, was größer ist. Im Entwurfsdokument ist `env()` null, dort ändert sich nichts — auf einem echten Gerät schon. */ .qh-fuss { display: flex; flex-direction: column; gap: 2.2cqmin; padding: 4.4cqmin 5cqmin max(7.4cqmin, env(safe-area-inset-bottom, 0px) + 2.4cqmin); } .qh-knopf { display: flex; align-items: center; justify-content: center; gap: 2.2cqmin; min-height: 15cqmin; border-radius: 4.4cqmin; text-align: center; font-family: var(--f-display); font-size: calc(5.2cqmin * var(--schrift, 1)); font-weight: 800; letter-spacing: -.01em; color: var(--auf-acc2); background: linear-gradient(180deg, var(--acc2), color-mix(in srgb, var(--acc2) 76%, var(--acc))); box-shadow: 0 1.6cqmin 4cqmin color-mix(in srgb, var(--acc2) 26%, transparent); } /* Der Knopf atmet leicht. Auf einem Schirm, auf dem sonst nichts passiert, sagt das ohne Worte: Hier wird getippt. Zwei Prozent, nicht mehr — alles darueber wirkt wie eine Warnung. */ @keyframes qh-atmen { 0%, 100% { transform: none; } 50% { transform: scale(1.02); } } /* BEIDE Animationen in EINER Angabe. Eine zweite `animation` auf demselben Element verdraengt die erste — und die erste ist hier der Auftritt, der die Deckkraft von 0 zurueckholt. Ohne das blieb der Abschicken-Knopf unsichtbar. Der Auftritt fuellt bis 260 ms, das Atmen setzt bei 1,2 s ein; dazwischen streiten sie nicht. */ .qn-hand.qh-laeuft .qh-knopf:not(.qh-aus):not(.qh-zweit).da { animation: qn-auftritt var(--d-mittel) var(--k-ein) both, qh-atmen 2.6s ease-in-out 1.2s infinite; } @media (prefers-reduced-motion: reduce) { .qn-hand.qh-laeuft .qh-knopf { animation: none; } } .qh-knopf.qh-aus { color: var(--t2); background: var(--g2); box-shadow: inset 0 0 0 .45cqmin color-mix(in srgb, var(--t0) 12%, transparent); } .qh-knopf.qh-zweit { min-height: 11.6cqmin; font-size: calc(4.4cqmin * var(--schrift, 1)); color: var(--t0); background: transparent; box-shadow: inset 0 0 0 .45cqmin color-mix(in srgb, var(--t0) 20%, transparent); } .qh-fusszeile { text-align: center; font-size: calc(3.3cqmin * var(--schrift, 1)); color: var(--t2); } /* Die Tastatur des Geraets. Grau, flach, ohne Kategoriefarbe — sie gehoert dem Telefon und nicht dem Spiel, und genau so soll sie aussehen. */ /* Die Tastatur darf SCHRUMPFEN, bevor sie kappt. Vorher stand ihre Hoehe fest; war der Schirm darueber voll (Luegen), wurde unten abgeschnitten — ausgerechnet die Reihe mit der Eingabetaste, auf sieben von vierundzwanzig Schirmen um 53 px (gemessen mit gross.mjs). */ .qh-tastatur { display: flex; flex-direction: column; gap: 1.8cqmin; margin: 2.6cqmin -5cqmin -7.4cqmin; padding: 2.6cqmin 1.4cqmin 4.6cqmin; background: #1b1f27; min-height: 0; flex-shrink: 1; } .qh-tastatur .qh-tastenreihe { min-height: 0; } /* Sie faehrt herauf, wie auf jedem Geraet. Das ist die Bewegung, an der man ohne Nachdenken erkennt, dass jetzt geschrieben werden kann. */ @keyframes qh-tastatur-auf { from { transform: translateY(100%); } to { transform: none; } } .qn-hand.qh-laeuft .qh-tastatur { animation: qh-tastatur-auf var(--d-lang) var(--k-ein) 140ms both; } @media (prefers-reduced-motion: reduce) { .qn-hand .qh-tastatur { animation: none; } } .qh-tastatur .qh-tastenreihe { display: flex; gap: 1.4cqmin; } .qh-tastatur .qh-tastenreihe.qh-eingerueckt { padding: 0 4.6cqmin; } .qh-tastatur span { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 11cqmin; border-radius: 1.6cqmin; background: #33383f; color: #f2f4f8; font-size: calc(4.6cqmin * var(--schrift, 1)); font-weight: 500; text-transform: uppercase; box-shadow: 0 .4cqmin 0 rgba(0, 0, 0, .45); } .qh-tastatur span.qh-breit { flex: 1.5 1 0; background: #262b32; font-size: calc(4cqmin * var(--schrift, 1)); } .qh-tastatur .qh-letzte span.qh-klein { flex: 1.1 1 0; background: #262b32; font-size: calc(3.6cqmin * var(--schrift, 1)); } .qh-tastatur .qh-letzte span.qh-raum { flex: 5 1 0; } .qh-tastatur .qh-letzte span.qh-senden { background: var(--acc); color: var(--auf-acc); } /* Mit Tastatur bleibt fuer das Feld weniger Hoehe — genau so ist es auf dem Geraet, und genau deshalb steht sie hier. Die Grenze haelt es nur unter 38 % der Buehne, damit es dem Messwerkzeug nicht als Kulisse gilt. */ .qn-hand:has(.qh-tastatur) .qh-schreib { max-height: 60cqmin; } /* ---- Die Auflösung in der Hand ------------------------------------------- */ /* DREI ZONEN, nicht fünf gleiche Kästen. An der Wand steht die Wahrheit für alle; hier steht, was sie mit MIR gemacht hat — und das ist der einzige Augenblick der Frage, der einem allein gehört. 1. DER SCHLAG die eigene Figur unter dem Licht des Urteils, die Zahl darunter im Markenverlauf. Die Figur sagt das Ergebnis, bevor ein Wort gelesen ist. 2. DIE WAHRHEIT eine Zeile groß statt zwei gleiche nebeneinander. 3. DER STAND EINE Leiste im Fuß statt zweier Kästen, von denen der obere innen fast leer war. Die Farben: Die FLÄCHE gehört der Marke (Violett→Indigo), die Semantik (grün/gelb/rot) nur dem Licht, dem Zeichen und dem Wort. Vorher trug ein grüner Balken das obere Drittel und ein gelber die Zahl — aus drei Metern sah das nach einem fremden Produkt aus. */ .qn-hand.qh-aufl { grid-template-rows: auto 1fr auto; } .qn-hand.qh-aufl .qh-leib.qh-a { display: flex; flex-direction: column; justify-content: space-evenly; gap: 2.2cqmin; padding-bottom: 1cqmin; min-height: 0; } /* ---------- 1 · Der Schlag ---------- */ /* Die Figur steht NEBEN Wort und Zahl (Tobi, 2026-09-23: „nicht so viel Platz für das Monster oben") — derselbe Aufbau wie die Plakette des Pults. */ .qh-a-schlag { position: relative; flex: 0 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "figur wort" "figur punkte"; justify-items: start; align-items: center; align-content: center; column-gap: 5cqmin; row-gap: 1.2cqmin; padding: 2cqmin 0 1cqmin; isolation: isolate; } .qh-a-schlag.qh-gut { --ur: var(--ok); } .qh-a-schlag.qh-fast { --ur: var(--warn); } .qh-a-schlag.qh-schlecht { --ur: var(--bad); } .qh-a-schlag.qh-neutral { --ur: var(--t0); } /* DIE ROLLE (qn.js): weißes Licht, kein Urteilston */ /* Das Licht liegt um die Figur (links im Schlag) — die Urteilsfarbe als Beleuchtung, nicht als Fläche. Es bleibt unter 38 % der Bühne, damit das Messwerkzeug es als Inhalt und nicht als Kulisse liest. */ .qh-a-licht { position: absolute; z-index: 0; top: 0; left: 50%; width: 88cqmin; height: 100%; transform: translateX(-50%) scale(.82); transform-origin: 16% 50%; border-radius: 50%; opacity: 0; --licht: color-mix(in srgb, var(--ur, var(--m2)) 52%, var(--m2)); background: radial-gradient(34% 72% at 16% 50%, color-mix(in srgb, var(--licht) 46%, transparent) 0%, color-mix(in srgb, var(--licht) 15%, transparent) 46%, transparent 72%); filter: blur(1.6cqmin); transition: opacity var(--d-lang) var(--k-ein), transform var(--d-xl) var(--k-ein); } .qh-a-schlag.licht .qh-a-licht { opacity: 1; transform: translateX(-50%) scale(1); } /* Der Kranz blitzt EINMAL hinter der Figur auf und ist dann fort — er gehört dem Augenblick, nicht dem Schirm. Nur bei „richtig": Ein Strahlenkranz um eine Figur, die gerade danebenlag, wäre Hohn. */ .qh-a-kranz { position: absolute; z-index: -1; inset: -6cqmin; border-radius: 50%; opacity: 0; pointer-events: none; background: conic-gradient(from 0deg, color-mix(in srgb, var(--m1) 92%, transparent) 0deg 8deg, transparent 8deg 30deg, color-mix(in srgb, var(--m2) 92%, transparent) 30deg 38deg, transparent 38deg 60deg, color-mix(in srgb, var(--m3) 92%, transparent) 60deg 68deg, transparent 68deg 90deg, color-mix(in srgb, var(--m1) 92%, transparent) 90deg 98deg, transparent 98deg 120deg, color-mix(in srgb, var(--m2) 92%, transparent) 120deg 128deg, transparent 128deg 150deg, color-mix(in srgb, var(--m3) 92%, transparent) 150deg 158deg, transparent 158deg 180deg, color-mix(in srgb, var(--m1) 92%, transparent) 180deg 188deg, transparent 188deg 210deg, color-mix(in srgb, var(--m2) 92%, transparent) 210deg 218deg, transparent 218deg 240deg, color-mix(in srgb, var(--m3) 92%, transparent) 240deg 248deg, transparent 248deg 270deg, color-mix(in srgb, var(--m1) 92%, transparent) 270deg 278deg, transparent 278deg 300deg, color-mix(in srgb, var(--m2) 92%, transparent) 300deg 308deg, transparent 308deg 330deg, color-mix(in srgb, var(--m3) 92%, transparent) 330deg 338deg, transparent 338deg 360deg); -webkit-mask: radial-gradient(closest-side, transparent 54%, #000 62%, #000 86%, transparent 97%); mask: radial-gradient(closest-side, transparent 54%, #000 62%, #000 86%, transparent 97%); } .qh-a-kranz { mix-blend-mode: screen; } .qh-a-schlag.licht .qh-a-figur .qh-a-kranz { animation: qh-kranz calc(var(--d-xl) * 1.5) var(--k-ein) both; } @keyframes qh-kranz { 0% { opacity: 0; transform: scale(.72) rotate(-20deg); } 34% { opacity: .95; } 100% { opacity: 0; transform: scale(1.16) rotate(12deg); } } .qh-a-figur { position: relative; z-index: 2; grid-area: figur; width: 26cqmin; height: 26cqmin; display: grid; place-items: center; } .qh-a-figur .qn-av { --gr: 22cqmin; } /* Das Urteilswort steht RECHTS NEBEN der Figur, über der Zahl (Rasterfeld „wort"); im Markup kommt es nach ihr: Wer den Schirm vorgelesen bekommt, hört erst die Figur, dann das Wort. */ .qh-a-wort { z-index: 2; grid-area: wort; align-self: end; max-width: 100%; display: flex; align-items: center; gap: 1.6cqmin; padding: 1.1cqmin 3cqmin 1.1cqmin 1.1cqmin; border-radius: 10cqmin; font-family: var(--f-display); font-weight: 800; font-size: calc(4.4cqmin * var(--schrift, 1)); letter-spacing: -.01em; color: var(--ur, var(--ok)); background: color-mix(in srgb, var(--ur, var(--ok)) 13%, transparent); box-shadow: inset 0 0 0 .32cqmin color-mix(in srgb, var(--ur, var(--ok)) 38%, transparent); } .qh-a-wort > i { flex: none; width: 6.4cqmin; height: 6.4cqmin; border-radius: 50%; display: grid; place-items: center; background: var(--ur, var(--ok)); color: var(--g0); } .qh-a-wort > i svg { width: 4cqmin; height: 4cqmin; } /* DIE ZAHL. Sie trägt den Markenverlauf, nicht die Urteilsfarbe: Das Urteil steht schon zweimal da (Wort und Licht), die Punkte sind der Ertrag — und der gehört Quiznight. */ .qh-a-punkte { z-index: 2; text-align: center; max-width: 100%; } .qh-a-schlag > .qh-a-punkte { grid-area: punkte; align-self: start; text-align: left; } .qh-a-punkte b { display: block; max-width: 100%; font-family: var(--f-mono); font-weight: 700; line-height: .95; letter-spacing: -.05em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--t0); } .qh-a-punkte b.qh-plus { background: linear-gradient(135deg, var(--m1), var(--m2) 48%, var(--m3)); -webkit-background-clip: text; background-clip: text; color: transparent; } .qh-a-punkte b.qh-null { color: var(--t2); } .qh-a-punkte b.qh-minus { color: var(--bad); } .qh-a-punkte span { display: block; margin-top: .8cqmin; font-size: calc(3.4cqmin * var(--schrift, 1)); letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--t2); } /* Die Schnipsel fallen EINMAL und verlassen das Bild nach unten. Was ausblendet, wirkt wie ein Fehler; was hinausfällt, war da. */ .qh-a-schnipsel { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; } .qh-a-schnipsel i { position: absolute; top: -6cqmin; left: var(--x); width: var(--w, 1.8cqmin); height: calc(var(--w, 1.8cqmin) * 1.7); border-radius: .3cqmin; background: var(--f); opacity: 0; } .qh-a-schlag.feiert .qh-a-schnipsel i { animation: qh-fall calc(var(--d-xl) * 2.4) var(--k-ein) var(--vz, 0ms) both; } @keyframes qh-fall { 0% { opacity: 0; transform: translateY(0) rotate(0); } 12% { opacity: 1; } 100% { opacity: 1; transform: translateY(132cqmin) rotate(var(--dr, 180deg)); } } @media (prefers-reduced-motion: reduce) { .qh-a-schlag.feiert .qh-a-schnipsel i, .qh-a-schlag.licht .qh-a-kranz { animation: none; opacity: 0; } } /* ---------- 2 · Die Wahrheit ---------- */ /* EINE Zeile groß statt zweier gleicher. Der Grund ist Marke, die Schrift steht darauf — kein farbiger Text auf farbigem Feld, das liest sich aus einem Meter nicht mehr. */ .qh-a-wahr { flex: none; display: grid; gap: .8cqmin; padding: 3.2cqmin 3.6cqmin; border-radius: 3.6cqmin; background: linear-gradient(135deg, color-mix(in srgb, var(--m2) 34%, var(--g1)), color-mix(in srgb, var(--m3) 30%, var(--g1))); box-shadow: inset 0 0 0 .4cqmin color-mix(in srgb, var(--m2) 52%, transparent); } .qh-a-wahr .qh-a-marke { font-size: calc(3.1cqmin * var(--schrift, 1)); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--t0) 68%, transparent); } .qh-a-wahr b { font-family: var(--f-display); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; font-size: calc(6.2cqmin * var(--schrift, 1)); color: var(--t0); overflow-wrap: anywhere; } /* ---------- Die ruhige Liste darunter ---------- */ .qh-bilanz { flex: none; display: flex; flex-direction: column; gap: 1.2cqmin; min-height: 0; } .qh-bilanzzeile { display: flex; align-items: baseline; gap: 2cqmin; padding: 2.6cqmin 3.2cqmin; border-radius: 3cqmin; background: var(--g2); min-height: 12cqmin; } .qh-bilanzzeile > span { flex: none; font-size: calc(3.3cqmin * var(--schrift, 1)); color: var(--t2); min-width: 26%; } .qh-bilanzzeile > b { flex: 1 1 auto; min-width: 0; font-size: calc(4cqmin * var(--schrift, 1)); font-weight: 700; color: var(--t0); text-align: right; overflow-wrap: anywhere; } .qh-bilanzzeile.qh-hell { box-shadow: inset 0 0 0 .3cqmin color-mix(in srgb, var(--ok) 32%, transparent); } .qh-bilanzzeile.qh-hell > b { color: var(--ok); } .qh-bilanzzeile.qh-matt > b { color: var(--t1); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--bad) 70%, transparent); } /* ---------- 3 · Der Stand ---------- */ /* Platzziffer, Punktestand, Sprung, Balken und Abstand in EINER Leiste. Vorher standen dieselben Angaben in zwei Kästen, deren oberer innen fast leer war — das war das größte Loch des ganzen Entwurfs. */ .qh-a-stand { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2cqmin 3cqmin; padding: 3.2cqmin 3.6cqmin; border-radius: 3.6cqmin; background: var(--g2); box-shadow: inset 0 0 0 .4cqmin color-mix(in srgb, var(--m2) 26%, transparent); } .qh-a-stand .qh-a-nr { grid-row: 1; font-family: var(--f-mono); font-weight: 700; line-height: 1; font-size: calc(10cqmin * var(--schrift, 1)); font-variant-numeric: tabular-nums; background: linear-gradient(135deg, var(--m1), var(--m2) 50%, var(--m3)); -webkit-background-clip: text; background-clip: text; color: transparent; } .qh-a-stand .qh-a-zeile { grid-row: 1; min-width: 0; display: grid; gap: .2cqmin; } .qh-a-stand .qh-a-klein { font-size: calc(3.2cqmin * var(--schrift, 1)); color: var(--t2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qh-a-stand .qh-a-summe { font-family: var(--f-mono); font-weight: 700; line-height: 1; color: var(--t0); font-variant-numeric: tabular-nums; white-space: nowrap; } .qh-a-stand .qh-a-zeile > i { font-style: normal; font-size: calc(3cqmin * var(--schrift, 1)); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--t2); } .qh-a-stand .qh-a-sprung { grid-row: 1; display: flex; align-items: center; gap: .6cqmin; padding: 1cqmin 2.2cqmin; border-radius: 10cqmin; font-family: var(--f-mono); font-weight: 700; font-size: calc(3.4cqmin * var(--schrift, 1)); white-space: nowrap; background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); } .qh-a-stand .qh-a-sprung.qh-runter { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); } .qh-a-stand .qh-a-sprung.qh-gleich { background: color-mix(in srgb, var(--t0) 10%, transparent); color: var(--t2); } .qh-a-stand .qh-a-bahn { grid-column: 1 / -1; height: 2.4cqmin; border-radius: 10cqmin; overflow: hidden; background: color-mix(in srgb, var(--t0) 10%, transparent); } .qh-a-stand .qh-a-bahn i { display: block; height: 100%; width: var(--p, 50%); border-radius: inherit; background: linear-gradient(90deg, var(--m1), var(--m2) 55%, var(--m3)); transform-origin: left; transform: scaleX(0); transition: transform var(--d-xl) var(--k-ein) 180ms; } .qh-a-stand.da .qh-a-bahn i { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .qh-a-stand .qh-a-bahn i { transition: none; transform: scaleX(1); } } .qh-a-stand .qh-a-lage { grid-column: 1 / -1; font-size: calc(3.3cqmin * var(--schrift, 1)); color: var(--t1); } .qh-a-stand .qh-a-lage b { color: var(--m1); font-weight: 700; } /* Der Auftritt benutzt dieselbe Staffel wie die große Bühne (.qn-wartet + .da → qn-auftritt). Hier steht nur, dass die Handbühne ihre Reihen etwas enger hintereinander hereinlässt — auf einem kleinen Schirm wirkt dieselbe Staffel sonst zäh. */ .qn-hand .qn-wartet.da { animation-duration: var(--d-mittel); } /* ============================================================================ 15 · DIE GROSSE BÜHNE — der Bildschirm im Raum ============================================================================ Der dritte Weg: Ein Fernseher oder Beamer steht im Zimmer, alle schauen gemeinsam hin, und jeder hält sein Telefon in der Hand. Die Eingabe liegt ausschließlich dort (Abschnitt 14). Auf dieser Bühne gibt es deshalb NICHTS zu bedienen — kein Feld, keine Kachel zum Antippen, keinen Knopf. Das ist kein Weglassen, sondern ein anderes Fach. Eine Activity-Bühne wird aus vierzig Zentimetern gelesen, diese aus zwei bis fünf Metern. Was dort eine Nebenangabe sein durfte, ist hier entweder groß oder gar nicht da. DIE SCHUTZRÄNDER. Ein Fernseher zeigt nicht, was ihm geschickt wird: Viele Geräte beschneiden das Bild am Rand (Overscan), und bei einem Beamer hängt der Rand davon ab, wie gerade jemand die Leinwand aufgehängt hat. Die Rundfunknorm dafür ist alt und bewährt — 3,5 % Rand für alles Bewegte (action safe) und 5 % für alles Geschriebene (title safe). Die Bühne hält sich daran: `--rand-tat` und `--rand-wort`. DIE MASSEINHEIT. Wie überall cqmin — und cqmin ist hier die HÖHE, weil ein Fernsehbild immer breiter als hoch ist und die Höhe der knappe Platz. Bei 1920×1080 ist 1cqmin = 10,8 Punkte; eine Frage in 6cqmin ist also 65 Punkte hoch und aus fünf Metern noch zu lesen. ============================================================================ */ .qn-gross { position: relative; container-type: size; overflow: hidden; isolation: isolate; display: grid; grid-template-rows: auto 1fr auto; background: var(--g1); color: var(--t0); font-family: var(--f-body); line-height: 1.3; -webkit-font-smoothing: antialiased; user-select: none; /* Die Schutzränder der Rundfunknorm. Sie sind kein Zierrat: Ohne sie verschluckt ein Fernseher die Ecke, in der der Beitrittscode steht. */ --rand-tat: 3.5%; --rand-wort: 5%; } /* Alles Geschriebene bleibt innerhalb des Wort-Randes. */ .qn-gross > * { position: relative; z-index: 1; min-width: 0; min-height: 0; } .qn-gross .qg-sicher { padding-left: var(--rand-wort); padding-right: var(--rand-wort); } /* Der Grund — dieselbe Geste wie auf den anderen Bühnen, nur ruhiger: Auf fünf Meter Abstand wird jede Struktur im Hintergrund zu Rauschen. */ .qn-gross .qg-grund { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(70% 55% at 50% 0%, color-mix(in srgb, var(--acc) 24%, transparent), transparent 72%), linear-gradient(180deg, var(--g1), var(--g0)); } /* ============================================================================ 16 · DAS PULT — das Handy-System 2 (qn.js, Abschnitt DAS PULT) ============================================================================ Eingeschaltet je Kategorie (`handNeu: true`); der Handschirm traegt dann `.qh-neu`. Alles hier ist an `.qh-neu` oder an eigene `qh-p-*`-Klassen gebunden — die dreiundzwanzig anderen Kategorien sehen keine Zeile davon, ausser Schriftzug und Uhr: Die trägt seit den BAUTEILEN jede Hand (hKopfPult). OBEN die Anzeige (Schriftzug, Energie, Frage, eigene Wahl, Tisch), UNTEN das Deck in der Daumenzone (mindestens 40 % der Hoehe): Tasten mit Kappe und Sockel, darunter EIN Knopf. Nur Rollenfarben. Nur transform und opacity bewegen sich; Dauern und Kurven aus den Tokens. Auftritte liegen auf den HUELLEN (…-platz, -anzeige, -tisch), Gesten auf dem Element darin. Grundzustand = Endzustand: Unter `prefers-reduced-motion` faellt jede Bewegung weg, und der Schirm sagt dasselbe. */ .qn-hand.qh-neu { grid-template-rows: auto minmax(0, 1fr) auto; } /* ---- Oben: Schriftzug und Energie ---------------------------------------- */ .qh-p-oben { display: flex; flex-direction: column; gap: 2.8cqmin; padding: max(4.4cqmin, env(safe-area-inset-top, 0px) + 1.6cqmin) 5cqmin 0; } /* Rechts haelt die Zeile das Zahnrad frei (es haengt am Rahmen: right 3,2cqmin, 8,4cqmin breit) — nicht mehr, denn die Uhr wohnt jetzt darunter. */ .qh-schild { display: flex; flex-wrap: wrap; align-items: center; row-gap: 1.4cqmin; min-height: 8.4cqmin; padding-right: 9.4cqmin; } .qh-schild .qh-s-teil { flex: 0 1 auto; min-width: 0; max-width: 100%; align-self: center; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; /* Lesbar aus Armlänge (Tobi, 2026-09-23: „die Schrift echt zu klein oben"): so groß wie die Anzeige-Zeile — 18 px auf 390, auch auf dem kleinsten Gerät im Raum (skaliert) über 13 px. Mit der Schriftstufe wächst er nur bis 130 %; was nicht passt, bricht zwischen den Namen um, gekürzt wird nichts. */ font-size: calc(4.6cqmin * min(var(--schrift, 1), 1.3)); letter-spacing: .02em; line-height: 1.12; white-space: normal; overflow-wrap: break-word; } .qh-schild .qh-s-set { color: var(--acc); } .qh-schild .qh-s-kat { color: var(--t0); } /* Der Trennstrich gehoert zum folgenden Namen. Beginnt dieser eine neue Zeile, blendet pultPasse den Strich aus und rueckt den Namen per transform an den Rand — ohne die Zeilenbreite zu aendern, sonst kippte der Name zurueck in die erste Zeile. */ .qh-schild .qh-s-teil + .qh-s-teil::before { content: ""; display: inline-block; width: .32cqmin; height: .92em; vertical-align: -.12em; margin: 0 1.7cqmin; border-radius: .2cqmin; background: color-mix(in srgb, var(--t0) 26%, transparent); } .qh-schild .qh-s-teil.qh-s-neu { transform: translateX(-3.72cqmin); } .qh-schild .qh-s-teil.qh-s-neu::before { opacity: 0; } /* Die Energie: Zellen, eine je Sekunde, schraeg wie ein Tempo-Anzeiger. */ .qh-energie { display: flex; align-items: center; gap: 2.4cqmin; min-height: 6.4cqmin; } .qn-hand .qh-energie-platz .qh-energie .qh-uhr { flex: none; display: flex; align-items: baseline; gap: .5cqmin; min-width: 10.6cqmin; font-family: var(--f-mono); font-weight: 700; color: var(--t0); } .qn-hand .qh-energie-platz .qh-energie .qh-uhr b { font-size: calc(6.2cqmin * var(--schrift, 1)); line-height: 1; letter-spacing: -.04em; } .qn-hand .qh-energie-platz .qh-energie .qh-uhr span { font-size: calc(3.2cqmin * var(--schrift, 1)); color: var(--t2); } .qn-hand .qh-energie-platz .qh-uhr.knapp { color: var(--jetzt); } .qh-e-wort { flex: none; font-size: calc(3cqmin * var(--schrift, 1)); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--t2); } .qh-e-bahn { flex: 1 1 auto; position: relative; height: 4.4cqmin; overflow: hidden; background: color-mix(in srgb, var(--t0) 9%, transparent); transform: skewX(-18deg); -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(100% / var(--zellen) - .8cqmin), transparent 0 calc(100% / var(--zellen))); mask: repeating-linear-gradient(90deg, #000 0 calc(100% / var(--zellen) - .8cqmin), transparent 0 calc(100% / var(--zellen))); } .qh-e-fuell { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--rest, 1)); background: linear-gradient(90deg, var(--acc2), var(--acc)); transition: transform 110ms linear; } /* Das letzte Viertel gehoert „jetzt": die Zellen werden pink und flackern ruhig. Kein Gelb — Gruen, Gelb, Rot sagen erst in der Aufloesung etwas. */ .qh-energie.knapp .qh-e-fuell { background: var(--jetzt); } .qh-energie.knapp .qh-e-bahn { animation: qh-p-flacker 900ms ease-in-out infinite; } @keyframes qh-p-flacker { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } .qh-energie.qh-e-weiter .qh-e-fuell { background: color-mix(in srgb, var(--t0) 32%, transparent); } .qh-energie.qh-e-weiter .qh-uhr b { font-size: calc(5cqmin * var(--schrift, 1)); color: var(--t1); } /* Hände ohne Pult tragen denselben Kopf (qn.js, hKopfPult) — auch dort steht die Uhr still, wenn der Schirm ruhig sein soll. (Das Pult regelt das unten für alles, was .qh-neu trägt.) */ .qn-hand.qh-ruhig-an .qh-energie.knapp .qh-e-bahn { animation: none; } @media (prefers-reduced-motion: reduce) { .qn-hand .qh-energie-platz *, .qn-hand .qh-energie-platz *::before, .qn-hand .qh-energie-platz *::after { animation: none !important; transition: none !important; } } /* ---- Die Anzeige: Frage, eigene Wahl, Tisch ------------------------------ */ .qh-p-schirm { display: flex; flex-direction: column; gap: 2.2cqmin; min-height: 0; padding: 3cqmin 5cqmin 3cqmin; } .qh-p-fragefeld { flex: 1 1 0; min-height: 14cqmin; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 1.8cqmin; padding: 3.4cqmin 4.2cqmin; border-radius: 5cqmin; background: radial-gradient(90% 75% at 50% 0%, color-mix(in srgb, var(--acc) 17%, transparent), transparent 72%), color-mix(in srgb, var(--g2) 70%, transparent); box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--t0) 9%, transparent); } .qn-hand.qh-neu .qh-frage { flex: none; margin: 0; font-family: var(--f-display); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; font-size: calc(6.4cqmin * var(--schrift, 1)); color: var(--t0); text-wrap: balance; overflow-wrap: normal; } .qn-hand.qh-neu .qh-p-auftrag { flex: none; margin: 0; font-size: calc(3.5cqmin * var(--schrift, 1)); font-weight: 600; line-height: 1.3; color: var(--t1); } .qn-hand.qh-neu .qh-p-auftrag b { color: var(--acc); font-weight: 800; } .qh-p-anzeige { flex: none; } .qh-p-a-innen { position: relative; display: flex; align-items: center; gap: 2.6cqmin; min-height: 15.6cqmin; padding: 2cqmin 2.6cqmin 2cqmin 2.2cqmin; border-radius: 4.4cqmin; background: color-mix(in srgb, var(--t0) 5%, transparent); box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--t0) 10%, transparent); } /* Gewaehlt, aber nicht abgeschickt: Das ist, was sich GERADE aendert. */ .qh-p-a-innen[data-zustand="gewaehlt"] { background: color-mix(in srgb, var(--jetzt) 11%, var(--g1)); box-shadow: inset 0 0 0 .45cqmin color-mix(in srgb, var(--jetzt) 72%, transparent); } .qh-p-a-innen[data-zustand="gewaehlt"] .qh-p-a-t em { color: var(--jetzt); } .qh-p-a-innen[data-zustand="gesendet"] { background: color-mix(in srgb, var(--acc) 20%, var(--g1)); box-shadow: inset 0 0 0 .45cqmin var(--acc); } .qh-p-a-formen { flex: none; display: grid; grid-template-columns: repeat(2, 4.4cqmin); gap: .9cqmin; padding-left: 1cqmin; color: var(--t2); } .qh-p-a-formen .qh-form { width: 4.4cqmin; height: 4.4cqmin; display: block; fill: currentColor; } .qh-p-a-formen .qh-form:nth-child(odd) { opacity: .75; } .qh-p-a-marke { flex: none; display: flex; align-items: center; gap: .8cqmin; padding: 1.2cqmin 1.9cqmin 1.2cqmin 1.3cqmin; border-radius: 10cqmin; background: var(--acc); color: var(--auf-acc); } .qh-p-a-marke .qh-form { width: 4.6cqmin; height: 4.6cqmin; display: block; fill: currentColor; } .qh-p-a-marke b { font-family: var(--f-display); font-weight: 800; font-size: calc(4.2cqmin * var(--schrift, 1)); line-height: 1; } .qh-p-a-mini { flex: none; width: 13cqmin; height: 9.4cqmin; display: flex; align-items: center; justify-content: center; container-type: size; } .qh-p-a-mini > svg { width: 100%; height: 100%; display: block; } .qh-p-a-mini > .k-mc-flagge { width: min(100cqw, 150cqh); height: auto; aspect-ratio: 3 / 2; max-height: none; } .qh-p-a-t { flex: 1 1 auto; min-width: 0; display: grid; gap: .6cqmin; } .qh-p-a-t b { font-family: var(--f-display); font-weight: 800; font-size: calc(4.8cqmin * var(--schrift, 1)); line-height: 1.1; color: var(--t0); overflow-wrap: break-word; } .qh-p-a-t em { font-style: normal; font-size: calc(3.2cqmin * var(--schrift, 1)); font-weight: 700; line-height: 1.25; color: var(--t2); } .qh-p-a-stempel { flex: none; width: 8.4cqmin; height: 8.4cqmin; border-radius: 50%; display: grid; place-items: center; background: var(--acc); color: var(--auf-acc); opacity: 0; transform: scale(.4); } .qh-p-a-stempel svg { width: 5cqmin; height: 5cqmin; } .qh-p-a-innen[data-zustand="gesendet"] .qh-p-a-stempel { opacity: 1; transform: none; } /* Das Warten atmet: ein Schein um die Anzeige, langsam, nicht hektisch. */ .qh-p-a-innen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 4.6cqmin color-mix(in srgb, var(--acc) 58%, transparent); opacity: 0; } .qh-p-gesendet .qh-p-a-innen::after { animation: qh-p-atmen 2.8s ease-in-out 600ms infinite; } @keyframes qh-p-atmen { 0%, 100% { opacity: .12; } 50% { opacity: .9; } } /* Der Tisch: Koepfe mit Lampe. Wer noch ueberlegt, wiegt sich — langsam, jeder in seinem Takt; wer drueckt, huepft einmal und seine Lampe geht an. */ .qh-p-tisch { flex: none; display: flex; flex-direction: column; gap: 1.2cqmin; } .qh-p-tischwort { font-size: calc(3.3cqmin * var(--schrift, 1)); font-weight: 600; line-height: 1.25; color: var(--t1); } .qh-p-tischwort b { display: inline-block; font-family: var(--f-display); font-weight: 800; color: var(--t0); } .qh-p-alle .qh-p-tischwort b { color: var(--acc); } .qh-p-sitze { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.2cqmin 2cqmin; } .qh-p-sitz { position: relative; flex: none; display: grid; justify-items: center; gap: 1.3cqmin; transform-origin: 50% 100%; } .qh-p-sitz .qn-av { opacity: .42; transition: opacity var(--d-mittel) var(--k-ein); } .qh-p-sitz.drin .qn-av { opacity: 1; } .qh-p-led { display: block; width: 4cqmin; height: 1.2cqmin; border-radius: 10cqmin; background: color-mix(in srgb, var(--t0) 16%, transparent); } /* „+N" der Lobby-Hände (auftritt und plakat zählen ihren Tisch noch selbst ab). */ .qh-p-mehr { align-self: center; font-family: var(--f-mono); font-weight: 700; font-size: max(9px, calc(3.4cqmin * var(--schrift, 1))); color: var(--t1); } .qh-p-sitz.drin .qh-p-led { background: var(--acc); box-shadow: 0 0 1.8cqmin color-mix(in srgb, var(--acc) 80%, transparent); } @keyframes qh-p-denkt { 0%, 100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } } @keyframes qh-p-hopp { 0% { transform: none; } 38% { transform: translateY(-2.6cqmin) scale(1.07); } 70% { transform: translateY(.3cqmin) scale(.98); } 100% { transform: none; } } @keyframes qh-p-led { from { transform: scaleX(.2); opacity: .4; } to { transform: none; opacity: 1; } } .qh-p-f .qh-p-sitz:not(.drin) { animation: qh-p-denkt 3.2s ease-in-out calc(var(--s, 0) * -.7s) infinite; } .qh-p-sitz.drin.qh-p-hopp { animation: qh-p-hopp 460ms var(--k-schnapp); } .qh-p-sitz.drin.qh-p-hopp .qh-p-led { animation: qh-p-led 420ms var(--k-schnapp); } /* ---- Unten: das Deck ----------------------------------------------------- */ /* DER RAND DES GERAETS (Tobi, 2026-09-23: „unten Platz lassen, weil da oft die Navigation ist"): Die untersten ~34 px gehoeren dem Telefon — Home- Balken, Gestenleiste, Browserleiste. Dort steht kein Knopf und keine Schrift. 10cqmin sind auf 390 Punkten 39 px (34 plus Luft); meldet das Geraet mehr (env), gilt das plus 3cqmin. Der Knopf sitzt darueber, in der Daumenzone. */ .qn-hand.qh-neu { --qh-p-rand: max(10cqmin, env(safe-area-inset-bottom, 0px) + 3cqmin); } .qh-p-deck { display: flex; flex-direction: column; justify-content: flex-end; gap: 2.6cqmin; min-height: 41cqh; padding: 0 5cqmin var(--qh-p-rand, 10cqmin); } .qh-p-tasten { flex: 1 1 auto; min-height: 0; display: grid; gap: 2.4cqmin; } .qh-p-tasten.qh-p-raster { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(29cqmin, 1fr); } .qh-p-tasten.qh-p-liste { grid-template-columns: 1fr; grid-auto-rows: minmax(14cqmin, 1fr); gap: 1.8cqmin; } .qh-p-tasten.qh-p-raster .qh-p-platz:last-child:nth-child(odd) { grid-column: 1 / -1; } .qh-p-platz { position: relative; display: flex; min-width: 0; min-height: 0; } /* Die Taste: ein Sockel (::before) und die Kappe darauf. Die alte Kachel bringt eigene Regeln mit (Fläche, Rahmen, Höhenbegrenzung) — hier ab. */ .qn-hand.qh-neu .qh-p-taste { flex: 1 1 auto; position: relative; display: block; width: 100%; min-width: 0; min-height: 0; max-height: none; margin: 0; padding: 0 0 1.3cqmin; border: 0; border-radius: 4.6cqmin; background: none; box-shadow: none; color: inherit; font: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .qn-hand.qh-neu .qh-p-taste::before, .qn-hand.qh-neu .qh-p-los::before { content: ""; position: absolute; left: 0; right: 0; top: 1.3cqmin; bottom: 0; border-radius: 4.6cqmin; background: color-mix(in srgb, var(--g0) 78%, var(--acc2)); box-shadow: 0 1.4cqmin 3cqmin color-mix(in srgb, var(--g0) 70%, transparent); } .qn-hand.qh-neu.sp-lebt .qh-p-taste.qh-kachel:active, .qn-hand.qh-neu.sp-lebt .qh-p-los.qh-knopf:active { transform: none; } .qh-p-taste .qh-p-kappe { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; border-radius: 4.6cqmin; overflow: hidden; background: linear-gradient(172deg, var(--g3), var(--g2) 64%); box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--t0) 11%, transparent), inset 0 .6cqmin 0 color-mix(in srgb, var(--t0) 7%, transparent); transition: transform 90ms var(--k-ein), opacity var(--d-mittel) var(--k-ein); } .qh-p-taste:active .qh-p-kappe { transform: translateY(1.1cqmin); } /* Eingerastet: die Kappe bleibt halb unten, traegt die Buehnenfarbe und ihre Marke wird voll. */ .qh-p-taste.qh-p-an .qh-p-kappe { transform: translateY(.7cqmin); background: linear-gradient(172deg, color-mix(in srgb, var(--acc) 46%, var(--g3)), color-mix(in srgb, var(--acc) 22%, var(--g2)) 72%); box-shadow: inset 0 0 0 .6cqmin var(--acc), 0 0 5cqmin color-mix(in srgb, var(--acc) 36%, transparent); } .qh-p-hat .qh-p-taste:not(.qh-p-an) .qh-p-kappe { opacity: .74; } .qh-p-gesendet .qh-p-taste:not(.qh-p-an) .qh-p-kappe { opacity: .6; } .qh-p-zu .qh-p-taste, .qh-p-zu .qh-p-los { cursor: default; } .qh-p-zu .qh-p-taste:not(.qh-p-an) .qh-p-kappe { opacity: .36; } /* Der Abgang: Sind alle drin (oder ist die Zeit um), tritt das Deck zurueck — die Aufloesung kommt, die Tasten haben ihre Arbeit getan. Es wird kleiner zur Mitte hin, statt zu sinken: Nach unten waere es in den Rand des Geraets gerutscht, der frei bleiben muss. */ .qh-p-deck { transform-origin: 50% 40%; transition: transform var(--d-lang) var(--k-ein), opacity var(--d-lang) var(--k-ein); } .qh-p-alle .qh-p-deck, .qh-p-zu .qh-p-deck { transform: scale(.965); opacity: .62; } .qh-p-marke { position: absolute; z-index: 2; left: 2cqmin; top: 2cqmin; display: flex; align-items: center; gap: .8cqmin; padding: 1cqmin 1.7cqmin 1cqmin 1.1cqmin; border-radius: 10cqmin; background: color-mix(in srgb, var(--g0) 62%, transparent); color: var(--acc); } .qh-p-marke .qh-form { width: 4.4cqmin; height: 4.4cqmin; display: block; fill: currentColor; } .qh-p-marke b { font-family: var(--f-display); font-weight: 800; font-size: calc(3.8cqmin * var(--schrift, 1)); line-height: 1; color: var(--t0); } .qh-p-an .qh-p-marke { background: var(--acc); color: var(--auf-acc); } .qh-p-an .qh-p-marke b { color: var(--auf-acc); } /* Das Motiv auf der Kappe — dasselbe wie auf der Karte an der Wand. Die Flaeche ist ein eigener Container: nur so passt eine 3:2-Flagge in jede Form, ohne verzerrt oder beschnitten zu werden. */ /* Das Motiv darf unter die Marke reichen: Sie traegt einen dunklen Grund und steht in der Ecke, wo die Zeichnung ohnehin ausläuft. */ .qh-p-bild { position: relative; flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 3.4cqmin 3.6cqmin .4cqmin; } .qh-p-mitbild:not(.qh-p-foto) .qh-p-bild > * { max-width: 100%; } .qh-p-bild > svg { width: 100%; height: 100%; display: block; } .qh-p-bild > .k-mc-flagge { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; box-shadow: none; border-radius: 0; overflow: visible; } .qh-p-bild > .k-mc-flagge svg { filter: drop-shadow(0 .8cqmin 1.4cqmin color-mix(in srgb, var(--g0) 75%, transparent)); } /* Ohne Namen (Flaggen) hat das Bild die ganze Kappe — und haelt Abstand zur Marke: In der Ecke einer Flagge steht oft genau das, woran man sie erkennt. */ .qh-p-ohnetext .qh-p-bild { padding: 8.4cqmin 3.6cqmin 2.8cqmin; } /* Fotos fuellen die ganze Kappe; ein Schleier traegt den Namen. Die Gutschrift steht voll da, auch wenn sie umbricht (Tobi: nichts gekuerzt). */ .qh-p-foto .qh-p-bild { position: absolute; inset: 0; z-index: 0; padding: 0; display: block; } .qh-p-foto .qh-p-bild .qn-bild { width: 100%; height: 100%; display: block; object-fit: cover; } .qh-p-foto .qh-p-kappe::after { content: ""; position: absolute; inset: 34% 0 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--g0) 86%, transparent) 72%); } .qh-p-foto .qh-p-bild .qn-credit { top: auto; bottom: .9cqmin; right: 1.6cqmin; left: 1.6cqmin; z-index: 3; max-width: none; white-space: normal; overflow: visible; text-overflow: clip; text-align: right; font-size: 1.8cqmin; line-height: 1.2; padding: 0; background: none; backdrop-filter: none; color: color-mix(in srgb, var(--t0) 62%, transparent); } .qh-p-foto .qh-p-kappe { justify-content: flex-end; } .qh-p-grossform { position: absolute; z-index: 0; right: -4cqmin; bottom: -5cqmin; width: 24cqmin; height: 24cqmin; color: var(--acc); opacity: .16; pointer-events: none; } .qh-p-grossform .qh-form { width: 100%; height: 100%; display: block; fill: currentColor; } .qh-p-ohnebild .qh-p-kappe { justify-content: center; } .qn-hand.qh-neu .qh-p-txt { position: relative; z-index: 1; flex: none; display: block; min-width: 0; padding: .4cqmin 2.6cqmin 2.6cqmin; font-family: var(--f-display); font-weight: 800; font-size: calc(4.9cqmin * var(--schrift, 1)); line-height: 1.08; letter-spacing: -.01em; color: var(--t0); text-align: center; overflow-wrap: normal; word-break: normal; hyphens: manual; text-wrap: balance; } .qn-hand.qh-neu .qh-p-ohnebild .qh-p-txt { font-size: calc(5.8cqmin * var(--schrift, 1)); padding: 8cqmin 3cqmin 3cqmin; } .qn-hand.qh-neu .qh-p-foto .qh-p-txt { padding: 0 2.4cqmin 5.4cqmin; } /* Abgeschickt: das Siegel auf der eingerasteten Taste. */ .qh-p-schloss { position: absolute; z-index: 3; right: 2cqmin; top: 2cqmin; width: 7.4cqmin; height: 7.4cqmin; border-radius: 50%; display: grid; place-items: center; background: var(--acc); color: var(--auf-acc); box-shadow: 0 0 0 .6cqmin color-mix(in srgb, var(--g0) 45%, transparent); opacity: 0; transform: scale(.3); transition: opacity var(--d-mittel) var(--k-ein), transform var(--d-mittel) var(--k-schnapp); } .qh-p-schloss svg { width: 4.4cqmin; height: 4.4cqmin; } .qh-p-gesendet .qh-p-an .qh-p-schloss { opacity: 1; transform: none; } /* Untereinander (wenn ein Wort nicht in die halbe Breite passt): Marke links, Motiv als Vorschau, der Name mit der ganzen Breite. */ .qh-p-liste .qh-p-kappe { flex-direction: row; align-items: center; padding: 1.6cqmin 2.6cqmin 1.6cqmin 1.8cqmin; gap: 2.4cqmin; } .qh-p-liste .qh-p-marke { position: static; flex: none; } .qh-p-liste .qh-p-bild { flex: none; width: 14cqmin; height: 10cqmin; padding: 0; order: 1; } .qh-p-liste .qh-p-marke { order: 0; } .qn-hand.qh-neu .qh-p-liste .qh-p-txt { order: 2; flex: 1 1 auto; padding: 0; text-align: left; } .qh-p-liste .qh-p-foto .qh-p-bild { position: relative; inset: auto; width: 14cqmin; height: 10cqmin; border-radius: 2.4cqmin; overflow: hidden; } .qh-p-liste .qh-p-foto .qh-p-kappe::after { display: none; } .qh-p-liste .qh-p-foto .qh-p-bild .qn-credit { display: none; } .qh-p-liste .qh-p-foto .qh-p-kappe { justify-content: flex-start; } .qh-p-liste .qh-p-grossform { right: -2cqmin; bottom: -6cqmin; width: 18cqmin; height: 18cqmin; } .qh-p-liste .qh-p-schloss { top: 50%; margin-top: -3.7cqmin; } .qh-p-liste .qh-p-foto .qh-p-kappe { padding-bottom: 1.6cqmin; } /* Die Gutschrift der Fotos steht in der Liste als eigene Zeile unter dem Deck (pultPasse legt sie dort ab) — in der Vorschau haette sie keinen Platz. */ .qh-p-gutschriften { font-size: 1.9cqmin; line-height: 1.3; color: var(--t2); text-align: right; } /* Der Knopf: dieselbe Kappe auf demselben Sockel — und er sagt, was er tut. */ .qh-p-losplatz { flex: none; display: flex; } .qn-hand.qh-neu .qh-p-los { flex: 1 1 auto; position: relative; display: block; overflow: visible; min-height: 0; margin: 0; padding: 0 0 1.4cqmin; border: 0; border-radius: 4.6cqmin; background: none; box-shadow: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .qn-hand.qh-neu .qh-p-los::before { top: 1.4cqmin; } .qh-p-los .qh-p-kappe { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 2.4cqmin; min-height: 14.4cqmin; padding: 1.4cqmin 5cqmin; border-radius: 4.6cqmin; overflow: hidden; font-family: var(--f-display); font-weight: 800; font-size: calc(5.2cqmin * var(--schrift, 1)); line-height: 1.1; letter-spacing: -.01em; text-align: center; transition: transform 90ms var(--k-ein); } .qh-p-los[data-zustand="leer"] .qh-p-kappe { background: var(--g2); color: var(--t2); font-size: calc(4.2cqmin * var(--schrift, 1)); font-weight: 700; box-shadow: inset 0 0 0 .4cqmin color-mix(in srgb, var(--t0) 12%, transparent); } .qh-p-los[data-zustand="bereit"] .qh-p-kappe, .qh-p-los[data-zustand="gewaehlt"] .qh-p-kappe { background: linear-gradient(180deg, var(--acc2), color-mix(in srgb, var(--acc2) 72%, var(--acc))); color: var(--auf-acc2); box-shadow: inset 0 .6cqmin 0 color-mix(in srgb, var(--t0) 22%, transparent), 0 0 5cqmin color-mix(in srgb, var(--acc2) 32%, transparent); } .qh-p-los[data-zustand="gesendet"] .qh-p-kappe { transform: translateY(1cqmin); background: color-mix(in srgb, var(--acc) 22%, var(--g2)); color: var(--t0); box-shadow: inset 0 0 0 .5cqmin var(--acc); } .qh-p-los:not([data-zustand="leer"]):active .qh-p-kappe { transform: translateY(1.2cqmin); } .qh-p-los[data-zustand="leer"] { cursor: default; } .qh-p-los-marke { flex: none; display: flex; align-items: center; gap: .8cqmin; padding: 1cqmin 1.8cqmin 1cqmin 1.2cqmin; border-radius: 10cqmin; background: color-mix(in srgb, var(--auf-acc2) 16%, transparent); } .qh-p-los-marke .qh-form { width: 4.6cqmin; height: 4.6cqmin; display: block; fill: currentColor; } .qh-p-los-marke b { font-size: calc(4.2cqmin * var(--schrift, 1)); line-height: 1; } .qh-p-los-haken svg { width: 5.4cqmin; height: 5.4cqmin; display: block; } .qh-p-los .qh-p-kappe > i.qh-blitz { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--t0) 58%, transparent) 50%, transparent 80%); animation: qh-welle 460ms var(--k-ein) both; } /* ---- Gesten --------------------------------------------------------------- */ @keyframes qh-p-schnapp { 0% { transform: scale(1); } 35% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes qh-p-weicht { 0% { transform: scale(1); } 40% { transform: scale(.965); } 100% { transform: scale(1); } } @keyframes qh-p-nein { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-1.4cqmin); } 45% { transform: translateX(1.4cqmin); } 70% { transform: translateX(-.7cqmin); } } @keyframes qh-p-bereit { 0% { transform: scale(1); } 45% { transform: scale(1.03); } 100% { transform: scale(1); } } @keyframes qh-p-drueck { 0% { transform: scale(1); } 30% { transform: scale(.975); } 100% { transform: scale(1); } } @keyframes qh-p-einrasten { 0% { transform: scale(.965); } 55% { transform: scale(1.018); } 100% { transform: none; } } @keyframes qh-p-stempel { 0% { opacity: 0; transform: scale(2.2) rotate(-18deg); } 60% { opacity: 1; transform: scale(.9) rotate(4deg); } 100% { opacity: 1; transform: none; } } @keyframes qh-p-zahl { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } } .qn-hand.qh-neu .qh-p-taste.qh-p-schnapp { animation: qh-p-schnapp var(--d-mittel) var(--k-schnapp); } .qn-hand.qh-neu .qh-p-taste.qh-p-weicht { animation: qh-p-weicht var(--d-mittel) var(--k-ein); } .qn-hand.qh-neu .qh-p-taste.qh-p-nein { animation: qh-p-nein 320ms ease-in-out; } .qn-hand.qh-neu .qh-p-los.qh-p-bereit { animation: qh-p-bereit var(--d-mittel) var(--k-schnapp); } .qn-hand.qh-neu .qh-p-los.qh-p-drueck { animation: qh-p-drueck var(--d-mittel) var(--k-ein); } .qh-p-a-innen.qh-p-einrasten { animation: qh-p-einrasten var(--d-mittel) var(--k-schnapp); } .qh-p-a-innen.qh-p-stempeln { animation: qh-p-einrasten var(--d-lang) var(--k-schnapp); } .qh-p-a-innen.qh-p-stempeln .qh-p-a-stempel { animation: qh-p-stempel 380ms var(--k-schnapp) 80ms both; } .qh-neu .qh-p-zahlschnapp { animation: qh-p-zahl var(--d-mittel) var(--k-schnapp); } /* ---- Auftritt der Frage, in Schlaegen ------------------------------------ 60 ms Energie laeuft von links ein 120 ms Frage steigt auf 260 ms Anzeige, 320 ms Tisch 380 ms + 70 ms je Taste: Tasten springen 660 ms Knopf ~1,0 s steht alles */ @keyframes qh-p-auf { from { opacity: 0; transform: translateY(3cqmin); } to { opacity: 1; transform: none; } } @keyframes qh-p-pop { from { opacity: 0; transform: translateY(4.4cqmin) scale(.86); } to { opacity: 1; transform: none; } } @keyframes qh-p-links { from { opacity: 0; transform: translateX(-6cqmin); } to { opacity: 1; transform: none; } } @keyframes qh-p-da { from { opacity: 0; } to { opacity: 1; } } .qh-neu.qh-p-f .qh-energie-platz { animation: qh-p-links var(--d-lang) var(--k-ein) 60ms both; } .qh-neu .qh-p-fragefeld { animation: qh-p-auf var(--d-lang) var(--k-ein) 120ms both; } .qh-neu .qh-p-anzeige { animation: qh-p-auf var(--d-mittel) var(--k-ein) 260ms both; } .qh-neu .qh-p-tisch { animation: qh-p-auf var(--d-mittel) var(--k-ein) 320ms both; } .qh-neu .qh-p-platz { animation: qh-p-pop 380ms var(--k-schnapp) calc(380ms + var(--i, 0) * 70ms) both; } .qh-neu .qh-p-losplatz { animation: qh-p-auf var(--d-lang) var(--k-ein) 660ms both; } /* ---- Die Aufloesung: Urteil → Punkte → wie weit daneben → Stand ---------- */ .qh-neu.qh-p-a .qh-energie-platz { animation: qh-p-da var(--d-mittel) var(--k-ein) both; } .qh-p-ergebnis { display: flex; flex-direction: column; justify-content: space-evenly; gap: 2.4cqmin; min-height: 0; padding: 2.2cqmin 5cqmin 1.4cqmin; } /* Das Urteil ist eine Tafel für sich: Plakette links, Wort und Punkte rechts, auf einem Grund im Ton des Urteils. Der Platz, den die grosse Plakette frei gibt, gehoert den Punkten — nicht einem Loch darueber. */ .qh-p-urteil { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "plakette wort" "plakette punkte"; justify-items: start; align-items: center; column-gap: 5cqmin; row-gap: .4cqmin; padding: 3.4cqmin 4cqmin; border-radius: 5cqmin; background: radial-gradient(60% 130% at 0% 50%, color-mix(in srgb, var(--ur) 17%, transparent), transparent 72%), color-mix(in srgb, var(--g2) 62%, transparent); box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--ur) 30%, transparent); } .qh-p-urteil.qh-gut { --ur: var(--ok); --auf-ur: var(--auf-ok); } .qh-p-urteil.qh-schlecht { --ur: var(--bad); --auf-ur: var(--auf-bad); } .qh-p-urteil.qh-fast { --ur: var(--warn); --auf-ur: var(--auf-warn); } /* Neutral ist die Rolle (qn.js, DIE ROLLE: das Rampenlicht) und das kurze „Ausgewertet" vor der Wertung — weißes Licht statt eines Tons: --acc2 war im Rennsport so gelb wie ≈. */ .qh-p-urteil.qh-neutral { --ur: var(--t0); --auf-ur: var(--g0); } /* Die Plakette steht NEBEN Urteil und Punkten, nicht darüber (Tobi, 2026-09-23: „nicht so viel Platz für das Monster oben") — 26 cqmin sind 12 % der Schirmhöhe statt vorher 20 % (Plakette) bzw. 33 % (Plakette, Wort und Punkte übereinander). */ .qh-p-plakette { position: relative; grid-area: plakette; width: 26cqmin; height: 26cqmin; display: grid; place-items: center; } .qh-p-licht { position: absolute; inset: -4.6cqmin; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--ur) 28%, transparent), transparent 72%); animation: qh-p-da 900ms var(--k-ein) both; } .qh-p-ring { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--ur) 20%, var(--g2)), var(--g1) 74%); box-shadow: inset 0 0 0 .9cqmin var(--ur), 0 0 0 .7cqmin color-mix(in srgb, var(--ur) 20%, transparent); animation: qh-p-ring 480ms var(--k-schnapp) both; } @keyframes qh-p-ring { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } } .qh-p-figur { position: relative; z-index: 1; display: grid; place-items: center; animation: qh-p-auf 420ms var(--k-ein) 120ms both; } .qh-p-figur .qn-av { --gr: 18cqmin; } .qh-p-siegel { position: absolute; z-index: 2; right: -.6cqmin; bottom: -.2cqmin; width: 9cqmin; height: 9cqmin; border-radius: 50%; display: grid; place-items: center; background: var(--ur); color: var(--auf-ur); box-shadow: 0 0 0 .7cqmin var(--g1); animation: qh-p-siegel 360ms var(--k-schnapp) 380ms both; } .qh-p-siegel svg { width: 5cqmin; height: 5cqmin; } @keyframes qh-p-siegel { 0% { opacity: 0; transform: scale(2.4) rotate(-24deg); } 60% { opacity: 1; transform: scale(.88) rotate(6deg); } 100% { opacity: 1; transform: none; } } .qh-p-strahlen { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .qh-p-strahlen i { position: absolute; left: 50%; top: 50%; width: .8cqmin; height: 4cqmin; margin: -2cqmin 0 0 -.4cqmin; border-radius: 1cqmin; background: var(--ur); opacity: 0; animation: qh-p-strahl 720ms var(--k-ein) calc(420ms + var(--vz, 0ms)) both; } @keyframes qh-p-strahl { 0% { opacity: 0; transform: rotate(var(--w)) translateY(-9.5cqmin) scaleY(.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--w)) translateY(-16cqmin) scaleY(1); } } .qh-p-uwort { grid-area: wort; align-self: end; max-width: 100%; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; letter-spacing: .04em; font-size: calc(6cqmin * var(--schrift, 1)); line-height: 1.05; text-align: left; color: var(--ur); animation: qh-p-auf var(--d-mittel) var(--k-ein) 560ms both; } .qh-p-punkte { grid-area: punkte; align-self: start; justify-items: start; text-align: left; animation: qh-p-auf var(--d-mittel) var(--k-ein) 680ms both; } /* Ohne Punkte (Party) steht das Wort allein neben der Plakette — mittig, nicht oben; auch in den Stufen (pk2, enger), die das Wort sonst nach unten setzen. */ .qn-hand.qh-neu .qh-p-urteil > .qh-p-uwort:last-child { grid-row: 1 / 3; align-self: center; } .qn-hand.qh-neu .qh-p-punkte b { line-height: .92; } .qn-hand.qh-neu .qh-p-punkte span { margin-top: .6cqmin; font-size: calc(3.1cqmin * var(--schrift, 1)); } .qh-p-schau { flex: none; display: grid; gap: 1.6cqmin; } .qh-p-titel { margin: 0; font-size: calc(3.2cqmin * var(--schrift, 1)); font-weight: 700; line-height: 1.25; letter-spacing: .12em; text-transform: uppercase; color: var(--t2); animation: qh-p-auf var(--d-mittel) var(--k-ein) 1150ms both; } .qh-p-titel b { color: var(--t0); font-weight: 800; } .qh-p-vert { display: grid; gap: 1.4cqmin; } .qh-p-vz { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "marke mini text zahl"; align-items: center; column-gap: 2cqmin; min-height: 12.4cqmin; padding: 1.4cqmin 2.4cqmin 1.4cqmin 1.8cqmin; border-radius: 3.4cqmin; background: color-mix(in srgb, var(--t0) 5%, transparent); animation: qh-p-auf var(--d-mittel) var(--k-ein) calc(1250ms + var(--i, 0) * 90ms) both; } .qh-p-vz.qh-p-wahr { background: color-mix(in srgb, var(--ok) 14%, var(--g1)); box-shadow: inset 0 0 0 .4cqmin color-mix(in srgb, var(--ok) 55%, transparent); } .qh-p-vz.qh-p-meins { box-shadow: inset 0 0 0 .45cqmin var(--du); } .qh-p-vz-marke { grid-area: marke; display: flex; align-items: center; gap: .6cqmin; color: var(--acc); } .qh-p-vz-marke .qh-form { width: 4cqmin; height: 4cqmin; display: block; fill: currentColor; } .qh-p-vz-marke b { font-family: var(--f-display); font-weight: 800; font-size: calc(3.6cqmin * var(--schrift, 1)); line-height: 1; color: var(--t1); } .qh-p-vz-mini { grid-area: mini; width: 10cqmin; height: 7cqmin; display: flex; align-items: center; justify-content: center; container-type: size; } .qh-p-vz-mini > svg { width: 100%; height: 100%; display: block; } .qh-p-vz-mini > .k-mc-flagge { width: min(100cqw, 150cqh); height: auto; aspect-ratio: 3 / 2; max-height: none; } .qh-p-vz-t { grid-area: text; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .8cqmin 1.4cqmin; font-family: var(--f-display); font-weight: 800; font-size: calc(4.2cqmin * var(--schrift, 1)); line-height: 1.1; color: var(--t0); overflow-wrap: break-word; } .qh-p-vz-t > b { font-weight: 800; min-width: 0; } .qh-p-vz-tags { display: inline-flex; flex-wrap: wrap; gap: .8cqmin; } .qh-p-tag { display: inline-flex; align-items: center; gap: .5cqmin; padding: .7cqmin 1.5cqmin; border-radius: 10cqmin; font-family: var(--f-body); font-size: calc(2.8cqmin * var(--schrift, 1)); font-weight: 800; line-height: 1; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .qh-p-tag svg { width: 3cqmin; height: 3cqmin; display: block; } .qh-p-tag-wahr { background: var(--ok); color: var(--auf-ok); } .qh-p-tag-du { background: var(--du); color: var(--auf-du); } .qh-p-ohne { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "marke text"; } .qh-p-ohne .qh-p-tag-du { grid-area: marke; } .qh-p-ohne .qh-p-vz-t { color: var(--t1); font-size: calc(3.8cqmin * var(--schrift, 1)); } .qh-p-vz-zahl { grid-area: zahl; display: flex; align-items: center; gap: 1.4cqmin; } .qh-p-vz-bahn { display: block; width: 10cqmin; height: 1.6cqmin; border-radius: 10cqmin; overflow: hidden; background: color-mix(in srgb, var(--t0) 10%, transparent); } .qh-p-vz-bahn > i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--acc); transform-origin: 0 50%; transform: scaleX(0); transition: transform var(--d-xl) var(--k-ein) calc(var(--i, 0) * 90ms); } .qh-p-zeigt .qh-p-vz-bahn > i { transform: scaleX(var(--anteil, 0)); } .qh-p-wahr .qh-p-vz-bahn > i { background: var(--ok); } .qh-p-vz-zahl b { min-width: 3cqmin; text-align: right; font-family: var(--f-mono); font-weight: 700; font-size: calc(4cqmin * var(--schrift, 1)); line-height: 1; color: var(--t0); } .qh-p-standfuss { display: grid; gap: 1.6cqmin; padding: .4cqmin 5cqmin var(--qh-p-rand, 10cqmin); animation: qh-p-auf var(--d-lang) var(--k-ein) 1850ms both; } .qh-p-hud { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1.6cqmin; } .qh-p-zelle { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .9cqmin; padding: 3cqmin 2.6cqmin 2.8cqmin; border-radius: 3.6cqmin; background: var(--g2); box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--acc) 26%, transparent); } .qh-p-zk { font-size: calc(2.8cqmin * var(--schrift, 1)); font-weight: 800; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--t2); } .qh-p-zeile { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4cqmin 1.2cqmin; } .qh-p-zg { display: block; max-width: 100%; font-family: var(--f-mono); font-weight: 700; line-height: 1; font-size: calc(9.6cqmin * var(--schrift, 1)); letter-spacing: -.04em; color: var(--t0); font-variant-numeric: tabular-nums; white-space: nowrap; } .qh-p-zu { font-size: calc(3cqmin * var(--schrift, 1)); font-weight: 600; line-height: 1.2; color: var(--t1); } .qh-p-sprung { display: inline-block; padding: .6cqmin 1.4cqmin; border-radius: 10cqmin; font-family: var(--f-mono); font-weight: 700; font-size: calc(3cqmin * var(--schrift, 1)); line-height: 1; white-space: nowrap; } /* Die Bewegung im Platz wie in der Leiste: nach oben „jetzt", ein Platz weniger grau — ein Rennverlauf, kein Urteil. Grün und Rot gehören ✓ und ✗ (DIE URTEILSREGEL, qn.js); ein rotes ▼ neben einem ≈ las sich wie ✗. */ .qh-p-sprung.hoch { background: color-mix(in srgb, var(--jetzt) 18%, transparent); color: var(--jetzt); } .qh-p-sprung.runter { background: color-mix(in srgb, var(--t0) 10%, transparent); color: var(--t1); } .qh-p-sprung.gleich { background: color-mix(in srgb, var(--t0) 8%, transparent); color: var(--t2); } .qh-p-pips { display: flex; gap: .9cqmin; padding: 1.4cqmin 0 .9cqmin; } .qh-p-pips i { display: block; width: 3.4cqmin; height: 3.4cqmin; border-radius: 50%; background: color-mix(in srgb, var(--t0) 12%, transparent); } .qh-p-pips i.an { background: var(--acc); } .qh-p-pips i.neu { background: var(--jetzt); box-shadow: 0 0 2cqmin color-mix(in srgb, var(--jetzt) 70%, transparent); } .qh-p-a .qh-p-pips i.an { animation: qh-p-pip 340ms var(--k-schnapp) calc(2150ms + var(--i, 0) * 110ms) both; } @keyframes qh-p-pip { from { opacity: .25; transform: scale(.2); } to { opacity: 1; transform: none; } } .qh-p-lage { font-size: calc(3.8cqmin * var(--schrift, 1)); line-height: 1.3; color: var(--t1); text-align: center; } .qh-p-lage b { color: var(--t0); font-weight: 700; } /* ---- Grosse Schrift: die Luft schrumpft, die Plakette auch ---------------- */ .qn-hand.qh-neu.qh-gross .qh-p-schirm { gap: 1.6cqmin; padding-top: 2.2cqmin; } .qn-hand.qh-neu.qh-gross .qh-p-a-innen { min-height: 13cqmin; padding-top: 1.4cqmin; padding-bottom: 1.4cqmin; } .qn-hand.qh-neu.qh-gross .qh-p-plakette { width: 22cqmin; height: 22cqmin; } .qn-hand.qh-neu.qh-gross .qh-p-figur .qn-av { --gr: 15cqmin; } .qn-hand.qh-neu.qh-gross .qh-p-siegel { width: 8cqmin; height: 8cqmin; } .qn-hand.qh-neu.qh-gross .qh-p-siegel svg { width: 4.6cqmin; height: 4.6cqmin; } .qn-hand.qh-neu.qh-gross .qh-p-ergebnis { gap: 1.6cqmin; } .qn-hand.qh-neu.qh-gross .qh-p-urteil { row-gap: 1cqmin; } .qn-hand.qh-neu.qh-gross .qh-p-vz { min-height: 9cqmin; padding-top: 1cqmin; padding-bottom: 1cqmin; } .qn-hand.qh-neu.qh-gross .qh-p-vert { gap: .9cqmin; } .qn-hand.qh-neu.qh-gross .qh-p-zelle { padding: 1.8cqmin 2cqmin; } /* ---- Ruhe: Ruhiger Schirm und reduzierte Bewegung -------------------------- */ .qn-hand.qh-neu.qh-ruhig-an .qh-p-sitz, .qn-hand.qh-neu.qh-ruhig-an .qh-energie.knapp .qh-e-bahn { animation: none; } @media (prefers-reduced-motion: reduce) { .qn-hand.qh-neu *, .qn-hand.qh-neu *::before, .qn-hand.qh-neu *::after { animation: none !important; transition: none !important; } } /* ============================================================================ 16 · PULT · GRUPPE KARTE — Geo-Tipp · Wann & wo · Flächensumme (qn.js, Block gleichen Namens). Alles an `.qh-pk` bzw. eigenen qh-pk-*. Die Frage: Schriftzug, Energie, Frage, Anzeige, Tisch in einer Zeile — und die Karte nimmt, was bis zum Knopf frei ist. Die Auflösung: Urteil und Punkte nebeneinander, darunter die Karte mit dem Flug, der Stand. ============================================================================ */ .qn-hand.qh-neu.qh-pk.qh-p-f { grid-template-rows: auto auto minmax(0, 1fr); } .qh-pk .qh-p-schirm { gap: 1.8cqmin; padding: 2.4cqmin 5cqmin 2.2cqmin; } .qh-pk .qh-p-fragefeld { flex: none; min-height: 0; max-height: calc(14cqmin + 12cqmin * var(--schrift, 1)); gap: 0; padding: 2.4cqmin 3.8cqmin; border-radius: 4.4cqmin; } /* ---- Anzeige: wo die Nadel steht (Raste, Koordinate, Maßstab) ----------- */ .qh-pk .qh-p-a-innen { min-height: 13.4cqmin; gap: 2.2cqmin; padding: 1.6cqmin 2.4cqmin 1.6cqmin 1.8cqmin; border-radius: 4cqmin; } .qh-pk-a-marke { flex: none; display: flex; align-items: center; gap: .7cqmin; padding: 1.1cqmin 2cqmin 1.1cqmin 1.2cqmin; border-radius: 10cqmin; background: var(--acc); color: var(--auf-acc); } .qh-pk-a-marke svg { width: 5.2cqmin; height: 5.2cqmin; display: block; } .qh-pk-a-marke b { font-family: var(--f-display); font-weight: 800; font-size: calc(3.5cqmin * var(--schrift, 1)); line-height: 1; } .qh-pk-a-marke.leer { padding: 1.5cqmin; background: color-mix(in srgb, var(--t0) 7%, transparent); color: var(--t2); box-shadow: inset 0 0 0 .3cqmin color-mix(in srgb, var(--t0) 16%, transparent); } .qh-pk .qh-p-a-t b.qh-pk-koord { font-family: var(--f-mono); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; font-size: calc(4.5cqmin * var(--schrift, 1)); } .qh-pk .qh-p-a-t em { display: flex; flex-wrap: wrap; align-items: center; gap: .4cqmin 1.8cqmin; } .qh-pk-mass { display: inline-flex; align-items: center; gap: 1.1cqmin; white-space: nowrap; font-family: var(--f-mono); font-weight: 700; color: var(--t1); } .qh-pk-mass i { display: block; height: 1.5cqmin; border: .45cqmin solid currentColor; border-top: 0; border-radius: 0 0 .3cqmin .3cqmin; } /* Das Ticket von Wann & wo: zwei Felder, das laufende trägt „jetzt". */ .qh-p-a-innen.qh-pk-ti { flex-direction: column; align-items: stretch; gap: 1.1cqmin; padding: 1.4cqmin 1.6cqmin 1.3cqmin; } .qh-pk-ticket { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 1.4cqmin; } .qh-pk-t-feld { position: relative; min-width: 0; display: grid; align-content: start; gap: .5cqmin; padding: 1.1cqmin 1.8cqmin 1.2cqmin; border-radius: 3cqmin; background: color-mix(in srgb, var(--t0) 6%, transparent); } .qh-pk-t-feld em { display: flex; align-items: center; gap: .9cqmin; font-style: normal; font-weight: 800; line-height: 1.1; font-size: calc(2.7cqmin * var(--schrift, 1)); letter-spacing: .1em; text-transform: uppercase; color: var(--t2); } .qh-pk-t-feld em i { flex: none; display: grid; place-items: center; width: 4.2cqmin; height: 4.2cqmin; border-radius: 50%; font-style: normal; font-family: var(--f-display); letter-spacing: 0; background: color-mix(in srgb, var(--t0) 12%, transparent); color: var(--t0); } .qh-pk-t-feld b { font-family: var(--f-mono); font-weight: 700; line-height: 1.08; letter-spacing: -.03em; color: var(--t0); font-size: calc(4.3cqmin * var(--schrift, 1)); font-variant-numeric: tabular-nums; overflow-wrap: break-word; } .qh-pk-t-feld.jetzt { box-shadow: inset 0 0 0 .4cqmin var(--jetzt); } .qh-pk-t-feld.jetzt em i { background: var(--jetzt); color: var(--auf-jetzt); } .qh-pk-t-feld.fertig em i { background: var(--acc); color: var(--auf-acc); } .qh-pk-t-feld.wartet { opacity: .5; } .qh-pk-t-feld.leer b { color: var(--t2); font-family: var(--f-body); font-weight: 700; letter-spacing: 0; font-size: calc(3.4cqmin * var(--schrift, 1)); } .qh-pk-t-haken { position: absolute; right: 1cqmin; top: 1cqmin; width: 4.6cqmin; height: 4.6cqmin; border-radius: 50%; display: grid; place-items: center; background: var(--acc); color: var(--auf-acc); opacity: 0; transform: scale(.4); transition: opacity var(--d-mittel) var(--k-ein), transform var(--d-mittel) var(--k-schnapp); } .qh-pk-t-haken svg { width: 3cqmin; height: 3cqmin; } .qh-pk-t-feld.fertig:not(.leer) .qh-pk-t-haken, .qh-p-a-innen[data-zustand="gesendet"] .qh-pk-t-feld.jetzt .qh-pk-t-haken { opacity: 1; transform: none; } .qh-pk-t-stand { display: flex; flex-wrap: wrap; align-items: center; gap: .4cqmin 1.8cqmin; padding: 0 .6cqmin; font-style: normal; font-size: calc(3cqmin * var(--schrift, 1)); font-weight: 700; line-height: 1.25; color: var(--t2); } .qh-p-a-innen[data-zustand="gewaehlt"] .qh-pk-t-stand { color: var(--jetzt); } /* ---- Der Tisch in einer Zeile: Wort links, Köpfe rechts ------------------ */ .qh-pk .qh-p-tisch { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1cqmin 2.4cqmin; } .qh-pk .qh-p-tischwort { flex: 1 1 28cqmin; min-width: 0; } .qh-pk .qh-p-sitze { flex: 0 1 auto; justify-content: flex-end; gap: 1cqmin 1.6cqmin; } .qh-pk .qh-p-sitz { gap: .8cqmin; } .qh-pk .qh-p-tisch { --sitz: 8.4cqmin !important; } /* „Du" steht auf diesen Schirmen auf der Nadel bzw. Schlinge — nicht noch am Sitz. */ .qh-pk .qh-p-sitz .qn-av.du { box-shadow: 0 .3cqmin .8cqmin rgba(0, 0, 0, .45); } .qh-pk .qh-p-led { width: 3.2cqmin; height: 1cqmin; } /* ---- Das Deck: Karte (oder Rad) über dem Knopf --------------------------- */ .qh-pk .qh-pk-deck { min-height: 0; justify-content: stretch; gap: 2.4cqmin; } .qh-pk-platz { flex: 1 1 auto; min-height: 30cqmin; position: relative; display: flex; flex-direction: column; gap: 2cqmin; } .qh-neu .qh-pk-platz { animation: qh-p-pop 460ms var(--k-schnapp) 380ms both; } .qn-hand.qh-neu .qh-pk-platz.qh-p-nein { animation: qh-p-nein 320ms ease-in-out; } .qn-hand.qh-pk .qh-pk-karte { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; isolation: isolate; border-radius: 5cqmin; background: var(--g0); cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; box-shadow: 0 1.4cqmin 3cqmin color-mix(in srgb, var(--g0) 70%, transparent); } .qn-hand.qh-pk .qh-pk-karte::after, .qh-pk-sk::after { content: ""; position: absolute; inset: 0; z-index: 8; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--t0) 13%, transparent); } /* Der Zeiger sagt, was ein Druck tut: Fadenkreuz = Pin setzen, Hand = den Pin greifen, geschlossene Hand = es wird gezogen. */ .qh-flaeche.qh-pk-karte.ueber-pin { cursor: grab; } .qh-flaeche.qh-pk-karte.zieht-karte, .qh-flaeche.qh-pk-karte.zieht-pin { cursor: grabbing; } /* Grenzen, Flüsse, Seen auf der gezeichneten Eingabekarte (qn.js, pkEbenen) — auf „Nah" kräftiger. Auf MapKit zeichnet sie das Pult als Overlays selbst. */ .qh-pk-karte .qh-pk-ebene path { fill: none; stroke-linejoin: round; stroke-linecap: round; } .qh-pk-karte .qh-pk-grenze path { stroke: var(--t0); stroke-opacity: .45; stroke-width: 1px; } .qh-pk-karte[data-raste="1"] .qh-pk-grenze path { stroke-opacity: .6; stroke-width: 1.4px; } .qh-pk-karte[data-raste="2"] .qh-pk-grenze path { stroke-opacity: .8; stroke-width: 2.2px; } .qh-pk-karte .qh-pk-fluss path { stroke: var(--acc2); stroke-opacity: .35; stroke-width: .8px; } .qh-pk-karte[data-raste="2"] .qh-pk-fluss path { stroke-opacity: .6; stroke-width: 1.5px; } .qh-pk-karte .qh-pk-see path { stroke: var(--acc2); stroke-opacity: .45; stroke-width: .8px; fill: color-mix(in srgb, var(--acc2) 16%, transparent); } /* Rasten unten rechts in der Ecke, das Bild unten links — darunter, links, stehen Apples Zeichen und das Rechtliche. Oben ist die Karte frei. Ist die Karte zu niedrig für drei daumengroße Tasten übereinander, legt qn.js (rastenLage) sie nebeneinander. */ .qn-hand.qh-pk .qh-pk-karte .qk-rasten { top: auto; bottom: 2.4cqmin; right: 2.4cqmin; transform: none; z-index: 5; gap: 1.2cqmin; } .qh-pk-karte.rasten-quer .qk-rasten { flex-direction: row; } /* Rasten und Pin sind mit dem Daumen zu treffen: jede Taste mindestens 48 Punkte hoch (Tobi: „alles muss groß genug sein"), der Pin greift ab 48 Punkten Durchmesser (qn.js, PK_GREIF). Online gilt das für den Finger. */ .qn-hand.qh-pk .qk-rasten button { min-width: 17cqmin; height: max(13cqmin, 50px); padding: 0 2.2cqmin; font-size: calc(3.2cqmin * var(--schrift, 1)); } @media (pointer: coarse) { .qo-karte .qh-pk-karte .qk-rasten button { min-height: 48px; min-width: 64px; } } .qn-hand.qh-pk .qk-rasten button.qh-pk-drueck { animation: qh-p-bereit var(--d-mittel) var(--k-schnapp); } /* Der Pin (qn.js, PK_NADEL): eine Marke AUF der Karte, in „du". Die Spitze sitzt genau auf dem gesetzten Ort, ein Punkt markiert ihn; der Kopf steht darüber und dreht sich beim Heben und Setzen um die Spitze. Am Rand bleibt er sichtbar — der Vektor blendet Marken dort sonst aus. */ .qh-pk-karte .qk-anker.qh-pk-setzpin.draussen { visibility: visible; } /* Der Geist (qn.js, PK_GEIST): führt vor, dass ein Tipp den Pin setzt — hüpft, landet, ein Ring läuft aus. Weg mit der ersten Berührung. */ .qh-pk-geistpin { position: absolute; left: 50%; top: 50%; z-index: 4; width: 0; height: 0; pointer-events: none; transition: opacity var(--d-mittel) var(--k-ein); } .qh-pk-geistpin > span { position: absolute; left: 0; top: 0; width: 11cqmin; height: 11cqmin; transform: translate(-50%, -93%); color: color-mix(in srgb, var(--t0) 80%, transparent); filter: drop-shadow(0 .5cqmin .8cqmin rgba(0, 0, 0, .6)); animation: qh-pk-geist-hops 2.4s var(--k-ein) infinite; } .qh-pk-geistpin > span svg { width: 100%; height: 100%; display: block; fill: color-mix(in srgb, var(--g0) 45%, transparent); } .qh-pk-geistpin > i { position: absolute; left: -4.5cqmin; top: -4.5cqmin; width: 9cqmin; height: 9cqmin; border-radius: 50%; opacity: 0; box-shadow: 0 0 0 .45cqmin color-mix(in srgb, var(--t0) 72%, transparent); animation: qh-pk-geist-welle 2.4s var(--k-ein) infinite; } @keyframes qh-pk-geist-hops { 0%, 50%, 100% { transform: translate(-50%, -93%); } 22% { transform: translate(-50%, -130%); } } @keyframes qh-pk-geist-welle { 0%, 44% { transform: scale(.3); opacity: 0; } 52% { opacity: .95; } 86%, 100% { transform: scale(1.5); opacity: 0; } } .qh-pk-karte.beruehrt .qh-pk-geistpin { opacity: 0; } .qh-ruhig-an .qh-pk-geistpin > span, .qh-ruhig-an .qh-pk-geistpin > i { animation: none; } @media (prefers-reduced-motion: reduce) { .qh-pk-geistpin > span, .qh-pk-geistpin > i { animation: none; } .qh-pk-geistpin > i { opacity: .7; transform: none; } } .qh-pk-nadel { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; } /* MapKit hängt eine Marke (1 × 1 Punkt) an ihrer Unterkante-Mitte auf — ihr Ursprung liegt so einen halben Punkt links und einen über dem Ort. */ .qk-mit-mapkit .qh-pk-nadel { left: .5px; top: 1px; } .qh-pk-nadel > * { position: absolute; left: 0; top: 0; } .qh-pk-n-schatten { width: 5.4cqmin; height: 1.8cqmin; border-radius: 50%; background: rgba(0, 0, 0, .5); transform: translate(-50%, -50%) scale(.7); transition: transform var(--d-kurz) var(--k-ein), opacity var(--d-kurz) var(--k-ein); } .qh-pk-n-ring { width: 2cqmin; height: 2cqmin; border-radius: 50%; transform: translate(-50%, -50%); background: var(--du); box-shadow: 0 0 0 .45cqmin rgba(0, 0, 0, .55); } .qh-pk-n-kopf { width: 11cqmin; height: 11cqmin; color: var(--du); transform: translate(-50%, -93%); transform-origin: 50% 93%; filter: drop-shadow(0 .6cqmin .8cqmin rgba(0, 0, 0, .7)); transition: transform var(--d-kurz) var(--k-ein); } .qh-pk-n-kopf svg { width: 100%; height: 100%; display: block; fill: color-mix(in srgb, var(--du) 30%, var(--g0)); } /* Gegriffen: Der Kopf wächst ein wenig, der Schatten zerläuft, ein Hof zeigt, wo die Spitze gerade steht. */ .qh-pk-nadel.zieht .qh-pk-n-kopf { transform: translate(-50%, -93%) scale(1.12); } .qh-pk-nadel.zieht .qh-pk-n-schatten { transform: translate(-50%, -50%) scale(1.25); opacity: .55; } .qh-pk-nadel.zieht .qh-pk-n-ring::after, .qh-pk-nadel.setzt .qh-pk-n-ring::after { content: ""; position: absolute; inset: -1.8cqmin; border-radius: 50%; box-shadow: 0 0 0 .4cqmin color-mix(in srgb, var(--du) 80%, transparent); } /* Gesetzt: Der Kopf fällt auf die Spitze, ein Ring läuft einmal aus. */ .qh-pk-nadel.setzt .qh-pk-n-kopf { animation: qh-pk-steckt var(--d-lang) var(--k-schnapp); } .qh-pk-nadel.setzt:not(.zieht) .qh-pk-n-ring::after { opacity: 0; animation: qh-pk-welle var(--d-lang) var(--k-ein); } @keyframes qh-pk-steckt { 0% { transform: translate(-50%, -128%); opacity: .5; } 100% { transform: translate(-50%, -93%); opacity: 1; } } @keyframes qh-pk-welle { 0% { transform: scale(.35); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } } /* Abgeschickt: Der Pin steckt, sein Ring atmet. */ .qh-p-gesendet .qh-pk-karte .qh-pk-n-kopf { transform: translate(-50%, -88%); } .qh-p-gesendet .qh-pk-karte .qh-pk-n-ring::before { content: ""; position: absolute; inset: -1.8cqmin; border-radius: 50%; box-shadow: 0 0 0 .5cqmin color-mix(in srgb, var(--du) 70%, transparent); animation: qh-pk-atmet 2.4s ease-in-out infinite; } @keyframes qh-pk-atmet { 0%, 100% { opacity: .35; } 50% { opacity: .75; } } @media (prefers-reduced-motion: reduce) { .qh-pk-n-kopf, .qh-pk-n-schatten { transition: none; } .qh-pk-nadel.setzt .qh-pk-n-kopf, .qh-pk-nadel.setzt .qh-pk-n-ring::after, .qh-p-gesendet .qh-pk-karte .qh-pk-n-ring::before { animation: none; } } /* Das Bild der Frage, unten links: tippen = groß, noch einmal = zurück. */ .qh-pk-bild { position: absolute; z-index: 6; left: 2.4cqmin; bottom: 9cqmin; width: 36cqmin; height: 25cqmin; margin: 0; border-radius: 3cqmin; overflow: hidden; background: var(--g1); cursor: zoom-in; box-shadow: inset 0 0 0 .3cqmin color-mix(in srgb, var(--t0) 18%, transparent), 0 1.2cqmin 3cqmin rgba(0, 0, 0, .55); transform-origin: 0 100%; transition: transform var(--d-lang) var(--k-ein); } .qh-pk-bild canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity var(--d-mittel) var(--k-ein); } .qh-pk-bild.geladen canvas { opacity: 1; } .qh-pk-bild::after { content: ""; position: absolute; inset: 50% 0 0; pointer-events: none; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--g0) 84%, transparent)); } .qh-pk-bild-credit { position: absolute; z-index: 1; left: 1.4cqmin; right: 1.4cqmin; bottom: .9cqmin; font-size: calc(2.2cqmin * var(--schrift, 1)); line-height: 1.2; overflow-wrap: anywhere; color: color-mix(in srgb, var(--t0) 80%, transparent); } .qh-pk-bild-lupe { position: absolute; z-index: 1; right: 1cqmin; top: 1cqmin; width: 6.4cqmin; height: 6.4cqmin; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--g0) 66%, transparent); color: var(--t0); } .qh-pk-bild-lupe svg { width: 4cqmin; height: 4cqmin; } .qh-pk-bild.gross { transform: scale(var(--pk-gross, 2.3)); cursor: zoom-out; z-index: 7; } /* Große Schrift: Frage und Anzeige brauchen mehr Höhe, die Karte wird niedriger — ihre Bedienteile rücken zusammen, damit Platz für den Pin bleibt. */ .qn-hand.qh-pk.qh-gross .qk-rasten { gap: .8cqmin; } .qn-hand.qh-pk.qh-gross .qk-rasten button { height: max(11.6cqmin, 50px); min-width: 16cqmin; padding: 0 1.8cqmin; } .qn-hand.qh-pk.qh-gross .qh-pk-karte .qh-pk-bild { width: 30cqmin; height: 20cqmin; } /* ---- Das Jahr-Deck: Bild, Strahl (grob), Rad (fein) ----------------------- */ .qh-pk-jahrdeck { gap: 2cqmin; } .qh-pk-jahrdeck .qh-pk-bild { position: relative; left: auto; bottom: auto; width: auto; height: auto; flex: 1 1 0; min-height: 0; border-radius: 4.4cqmin; cursor: default; transition: none; } .qh-pk-strahl { /* Die Klasse qh-bahn trägt er nur, damit Probe und Film ihn finden — ihre Maße (4,4cqmin hoch, Verlauf) gelten hier nicht. */ flex: none; position: relative; display: grid; gap: .9cqmin; padding: 1.8cqmin 3.4cqmin 1.3cqmin; height: auto; border-radius: 4cqmin; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; background: color-mix(in srgb, var(--t0) 5%, transparent); box-shadow: inset 0 0 0 .3cqmin color-mix(in srgb, var(--t0) 10%, transparent); } .qh-pk-s-bahn { position: relative; display: block; height: 5.6cqmin; border-radius: 1.4cqmin; background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 34%, transparent), color-mix(in srgb, var(--acc2) 24%, transparent)); } .qh-pk-tick { position: absolute; top: 32%; bottom: 32%; width: .3cqmin; margin-left: -.15cqmin; background: color-mix(in srgb, var(--t0) 30%, transparent); } .qh-pk-tick.lang { top: 16%; bottom: 16%; background: color-mix(in srgb, var(--t0) 58%, transparent); } /* Die Marke fährt per transform: eine Ebene so breit wie die Bahn, um --pk-p verschoben (nicht --p: das ist als Prozentwert registriert). */ .qh-pk-s-spur { position: absolute; inset: -1.3cqmin -1cqmin; overflow: hidden; pointer-events: none; } .qh-pk-s-marke { position: absolute; inset: 0 1cqmin; display: block; pointer-events: none; transform: translateX(calc(var(--pk-p, .5) * 100%)); } .qh-pk-s-marke::before { content: ""; position: absolute; left: -.8cqmin; top: 0; bottom: 0; width: 1.6cqmin; border-radius: 1cqmin; background: var(--du); box-shadow: 0 0 0 .5cqmin color-mix(in srgb, var(--g0) 60%, transparent); } .qh-pk-strahl.leer .qh-pk-s-marke { opacity: 0; } .qh-pk-s-pole { display: flex; justify-content: space-between; gap: 2cqmin; font-family: var(--f-mono); font-weight: 700; font-size: calc(2.9cqmin * var(--schrift, 1)); color: var(--t2); } .qh-pk-rad { flex: 0 1 44cqmin; min-height: 28cqmin; position: relative; overflow: hidden; border-radius: 4.6cqmin; cursor: ns-resize; touch-action: none; user-select: none; -webkit-user-select: none; background: linear-gradient(180deg, var(--g1), color-mix(in srgb, var(--g2) 86%, transparent) 50%, var(--g1)); box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--t0) 11%, transparent); } .qh-pk-jahrdeck:not(.mit-bild) .qh-pk-rad, .qh-pk-jahrdeck.ohne-bild .qh-pk-rad { flex: 1 1 auto; min-height: 30cqmin; } .qh-pk-jahrdeck.ohne-bild .qh-pk-bild { display: none; } .qh-pk-rad-fenster { position: absolute; left: 3cqmin; right: 3cqmin; top: 50%; height: calc(100% / 3.2); transform: translateY(-50%); border-radius: 3.4cqmin; background: color-mix(in srgb, var(--acc) 20%, var(--g2)); box-shadow: inset 0 0 0 .45cqmin var(--acc); } .qh-pk-rad-walze { position: absolute; inset: 0; pointer-events: none; } .qh-pk-rad-z { position: absolute; left: 0; right: 0; top: 50%; display: flex; align-items: center; justify-content: center; gap: 2cqmin; font-family: var(--f-mono); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--t0); font-size: min(calc(10cqmin * var(--schrift, 1)), 12.4cqmin, var(--pk-rad-gr, 99px)); font-variant-numeric: tabular-nums; } .qh-pk-rad-z.zehn::after { content: ""; width: 1.6cqmin; height: 1.6cqmin; border-radius: 50%; background: var(--acc2); } .qh-pk-rad.leer .qh-pk-rad-walze { opacity: .3; } .qh-pk-rad.leer .qh-pk-rad-fenster::after { content: "— — — —"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-mono); font-weight: 700; font-size: 7cqmin; color: var(--t2); } /* ---- Der Knopf sagt, was er schickt: Nadel, ① Jahr, ② Ort ----------------- */ .qh-pk-los-marke svg { width: 5cqmin; height: 5cqmin; display: block; } .qh-pk-nr { flex: none; display: grid; place-items: center; width: 5cqmin; height: 5cqmin; border-radius: 50%; font-style: normal; font-family: var(--f-display); font-weight: 900; font-size: calc(3.2cqmin * var(--schrift, 1)); line-height: 1; box-shadow: inset 0 0 0 .4cqmin currentColor; } /* ---- Die Auflösung: Urteil und Punkte nebeneinander, darunter die Karte -- */ .qh-pk.qh-p-a .qh-p-ergebnis { justify-content: flex-start; gap: 2.2cqmin; padding: 1.8cqmin 5cqmin 1.2cqmin; } .qh-pk .qh-p-urteil { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "plak wort" "plak zahl"; justify-items: start; align-items: center; column-gap: 4.4cqmin; row-gap: .4cqmin; } .qh-pk .qh-p-plakette { grid-area: plak; width: 29cqmin; height: 29cqmin; } .qh-pk .qh-p-licht { inset: -4.4cqmin; } .qh-pk .qh-p-figur .qn-av { --gr: 19cqmin !important; } .qh-pk .qh-p-siegel { right: 0; bottom: 0; width: 10.4cqmin; height: 10.4cqmin; box-shadow: 0 0 0 .8cqmin var(--g1); } .qh-pk .qh-p-siegel svg { width: 5.8cqmin; height: 5.8cqmin; } .qh-pk .qh-p-strahlen { transform: scale(.58); } .qh-pk .qh-p-uwort { grid-area: wort; align-self: end; text-align: left; font-size: calc(5.4cqmin * var(--schrift, 1)); } .qh-pk .qh-p-urteil .qh-p-punkte { grid-area: zahl; align-self: start; text-align: left; } .qh-pk .qh-p-schau { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 1.4cqmin; } .qh-pk-schau { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 1.6cqmin; animation: qh-p-auf var(--d-mittel) var(--k-ein) 160ms both; } .qh-pk-zeile { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1cqmin 2.4cqmin; } .qh-pk-km { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4cqmin 1.4cqmin; } .qh-pk-km b { font-family: var(--f-mono); font-weight: 700; font-size: calc(6.2cqmin * var(--schrift, 1)); line-height: 1; letter-spacing: -.04em; color: var(--jetzt); font-variant-numeric: tabular-nums; white-space: nowrap; } .qh-pk-km em { font-style: normal; font-size: calc(3.2cqmin * var(--schrift, 1)); font-weight: 700; color: var(--t1); } .qh-pk-schau.ohne .qh-pk-km b { font-family: var(--f-display); font-size: calc(5cqmin * var(--schrift, 1)); letter-spacing: 0; color: var(--t1); } .qh-pk-halb { font-size: calc(3cqmin * var(--schrift, 1)); font-weight: 700; color: var(--t1); white-space: nowrap; padding: .7cqmin 1.6cqmin; border-radius: 10cqmin; background: color-mix(in srgb, var(--t0) 8%, transparent); } .qh-pk-halb b { font-family: var(--f-mono); color: var(--t0); } .qh-pk-legende { display: flex; flex-wrap: wrap; gap: .6cqmin 2.2cqmin; font-size: calc(2.8cqmin * var(--schrift, 1)); font-weight: 700; color: var(--t2); opacity: 0; transition: opacity var(--d-lang) var(--k-ein); } .qh-pk-zeile.ringe .qh-pk-legende { opacity: 1; } .qh-pk-legende > span { display: inline-flex; align-items: center; gap: .8cqmin; white-space: nowrap; } .qh-pk-legende i { flex: none; display: grid; place-items: center; width: 3.8cqmin; height: 3.8cqmin; border-radius: 50%; box-shadow: inset 0 0 0 .4cqmin var(--t1); color: var(--ok); } .qh-pk-legende .qh-pk-l0 i { box-shadow: inset 0 0 0 .4cqmin var(--ok); } .qh-pk-legende i svg { width: 2.4cqmin; height: 2.4cqmin; } .qh-pk-sk { flex: 1 1 auto; min-height: 34cqmin; position: relative; border-radius: 5cqmin; overflow: hidden; isolation: isolate; } .qh-pk-sk.qh-pk-voll::before { content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1.2cqmin var(--ok); animation: qh-pk-blitz 900ms var(--k-ein) both; } @keyframes qh-pk-blitz { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } } .qh-pk-bk { position: absolute; z-index: 6; left: 2.4cqmin; bottom: 2.4cqmin; width: 35cqmin; } .qh-pk-bk > .qk-bildkarte { width: 100%; grid-template-rows: 18cqmin auto; } /* Niedrige Karte (qn.js, pkSchauPasse): erst ohne Foto, dann ohne Bildkarte. */ .qh-pk-sk.knapp .qh-pk-bk > .qk-bildkarte { grid-template-rows: auto; } .qh-pk-sk.knapp .qk-bk-bild, .qh-pk-sk.knapp .qk-bk-credit { display: none; } .qh-pk-sk.eng .qh-pk-bk { display: none; } /* Große Schrift: Urteil und Plakette rücken zusammen, damit die Karte bleibt. */ .qn-hand.qh-neu.qh-pk.qh-gross .qh-p-plakette { width: 22cqmin; height: 22cqmin; } .qn-hand.qh-pk.qh-gross .qh-p-figur .qn-av { --gr: 14cqmin !important; } .qn-hand.qh-neu.qh-pk.qh-gross .qh-p-siegel { width: 8.4cqmin; height: 8.4cqmin; } .qn-hand.qh-neu.qh-pk.qh-gross .qh-p-siegel svg { width: 4.8cqmin; height: 4.8cqmin; } .qn-hand.qh-pk.qh-gross .qh-p-uwort { font-size: calc(4.4cqmin * var(--schrift, 1)); } .qn-hand.qh-pk.qh-gross .qh-p-urteil .qh-p-punkte b { font-size: 13cqmin !important; } .qn-hand.qh-pk.qh-gross .qh-pk-km b { font-size: calc(5cqmin * var(--schrift, 1)); } .qn-hand.qh-pk.qh-gross .qh-pk-sk { min-height: 22cqmin; } .qn-hand.qh-pk.qh-gross .qh-p-ergebnis { gap: 1.6cqmin; } .qh-pk .qk-bildkarte .qk-bk-text { padding: 1.3cqmin 1.8cqmin 1.5cqmin; } .qh-pk .qk-bildkarte .qk-bk-text em { font-size: calc(2.4cqmin * var(--schrift, 1)); } .qh-pk .qk-bildkarte .qk-bk-text b { font-size: calc(4cqmin * var(--schrift, 1)); } .qh-pk .qk-bildkarte .qk-bk-text span > span { font-size: calc(2.6cqmin * var(--schrift, 1)); } .qh-pk .qk-bildkarte .qk-bk-credit { font-size: calc(2cqmin * var(--schrift, 1)); } .qh-pk .qk-bk-ort > svg { width: 8cqmin; height: 8cqmin; } .qh-pk .qk-bk-koord { font-size: calc(2.6cqmin * var(--schrift, 1)); } /* Das Ziel und mein Pin auf der Hand-Karte: für das Telefon gebaut, nicht für drei Meter. */ .qh-pk .qk-z-name { bottom: 4.8cqmin; padding: .8cqmin 2cqmin; border-radius: 1.6cqmin; font-size: calc(3.6cqmin * var(--schrift, 1)); } .qh-pk .qk-z-name.unten { top: 4.8cqmin; } .qh-pk .qk-z-ring, .qh-pk .qk-z-welle { width: 7cqmin; height: 7cqmin; } .qh-pk .qk-z-kern { width: 2.6cqmin; height: 2.6cqmin; } .qh-pk-pin { position: absolute; left: 0; top: 0; } .qh-pk-pin span { position: absolute; left: 0; top: 0; width: 9cqmin; height: 9cqmin; color: var(--du); opacity: 0; transform: translate(-50%, -94%) translateY(-6cqmin); filter: drop-shadow(0 .6cqmin .8cqmin rgba(0, 0, 0, .7)); transition: transform var(--d-lang) var(--k-schnapp), opacity var(--d-mittel) var(--k-ein); } .qh-pk-pin span svg { width: 100%; height: 100%; display: block; fill: color-mix(in srgb, var(--du) 30%, var(--g0)); } .qh-pk-pin.da span { opacity: 1; transform: translate(-50%, -94%); } /* ===================================================================== DIE KARTE (QN.karte) — MapKit oder Vektor, dieselben Marken. Die Karte selbst ist die einzige Stelle mit eigenem Ton: Apples normale Karte (dunkel) bzw. Meer und Land des Rückfalls. Alles, was darauf steht, trägt Rollen (--pf der Spieler, --du, --jetzt, --t0). ===================================================================== */ .qk-karte { position: relative; overflow: hidden; isolation: isolate; background: var(--g0); } .qk-mk, .qk-vektor { position: absolute; inset: 0; z-index: 0; transition: opacity var(--d-xl) var(--k-ein); } .qk-mk.qk-kommt, .qk-vektor.qk-kommt { opacity: 0; } /* Das Satellitenbild (nur noch auf ausdrückliche Wahl, stil: 'satellit') ruhig und dunkel — nur die Kacheln, nicht die Linien (die liegen in einer eigenen Leinwand) und nicht Apples Zeichen. */ .qk-stil-satellit .qk-mk canvas.syrup-canvas { filter: brightness(.5) saturate(.55) contrast(1.12); } /* Die normale Karte — die Vorgabe überall, in Frage und Auflösung (Tobi, 2026-10-02): Apples Karte im dunklen Farbschema, mit ihren Namen, so wie Apple sie zeichnet — kein Filter. Gemessen am 2026-10-02 (MapKit 5.81, mit GPU): Die Karte samt Schrift liegt in canvas.syrup-canvas (WebGL), canvas.rt-root trägt NUR die Linien und Ringe der Tipps. Der frühere Dämpfer auf rt-root (saturate .5, brightness .66) traf deshalb nie die Karte, sondern nahm den Linien die Farbe ihres Spielers — er ist fort. Den Ton des Sets bringt der Rand (::after). */ .qk-karte.qk-stil-normal::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 75% 70% at 50% 52%, transparent 55%, color-mix(in srgb, var(--g0) 55%, transparent) 100%), radial-gradient(ellipse 120% 90% at 50% 50%, transparent 40%, color-mix(in srgb, var(--acc) 16%, transparent) 100%); } .qk-vektor { background: radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--acc2) 16%, transparent), transparent 70%), linear-gradient(170deg, var(--g1), var(--g0)); } .qk-v-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .qk-v-land { fill: color-mix(in srgb, var(--acc) 10%, var(--g3)); stroke: color-mix(in srgb, var(--acc) 42%, transparent); stroke-width: 1px; stroke-linejoin: round; } .qk-v-netz { fill: none; stroke: color-mix(in srgb, var(--t2) 16%, transparent); stroke-width: 1px; } .qk-v-aequator { fill: none; stroke: color-mix(in srgb, var(--t2) 30%, transparent); stroke-width: 1px; stroke-dasharray: 6 5; } .qk-v-grenze { fill: none; stroke: color-mix(in srgb, var(--t1) 42%, transparent); stroke-width: 1px; stroke-linejoin: round; stroke-linecap: round; } .qk-v-linie, .qk-v-kreis { fill: none; stroke-linecap: round; stroke-linejoin: round; } .qk-v-marken { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .qk-v-marken > .qk-anker { position: absolute; left: 0; top: 0; } .qk-anker { width: 0; height: 0; overflow: visible; pointer-events: none; } .qk-anker.draussen { visibility: hidden; } /* ---- Die Figur: Monster auf einem Stiel, Spitze = Tipp ---------------- */ .qk-figur { --fg: 5.4cqmin; position: absolute; left: 0; top: 0; } /* Ein Tipp ohne Figur (kartenRegie: nur die Nächsten bekommen Kopf, Schild und Linie) — ein kleiner Punkt in seiner Farbe. */ .qk-punkt { position: absolute; left: 0; top: 0; width: 1.5cqmin; height: 1.5cqmin; border-radius: 50%; transform: translate(-50%, -50%) scale(.3); opacity: 0; background: var(--pf); box-shadow: 0 0 0 .28cqmin color-mix(in srgb, var(--g0) 80%, transparent), 0 .2cqmin .6cqmin rgba(0, 0, 0, .5); transition: opacity 260ms ease-out, transform 360ms cubic-bezier(.3, 1.4, .5, 1); } .qk-punkt.da { opacity: .95; transform: translate(-50%, -50%); } @media (prefers-reduced-motion: reduce) { .qk-punkt { transition: none; } } .qk-f-fall { position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; opacity: 0; transform: translate(-50%, -9cqmin); transition: opacity var(--d-mittel) var(--k-ein), transform var(--d-lang) var(--k-schnapp); } .qk-f-kopf { order: 1; width: var(--fg); height: var(--fg); border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--pf) 30%, var(--g1)); box-shadow: 0 0 0 .35cqmin var(--pf), 0 .6cqmin 1.6cqmin rgba(0, 0, 0, .55); transition: transform var(--d-lang) var(--k-schnapp); } .qk-f-kopf .qn-av { width: 84%; height: 84%; --gr: 100%; } .qk-f-stiel { order: 2; width: .5cqmin; height: 2.2cqmin; border-radius: 0 0 .3cqmin .3cqmin; background: var(--pf); box-shadow: 0 0 .6cqmin rgba(0, 0, 0, .6); transition: opacity var(--d-mittel) var(--k-ein); } .qk-f-schatten { position: absolute; left: 0; top: 0; width: 2.6cqmin; height: .9cqmin; border-radius: 50%; background: rgba(0, 0, 0, .55); transform: translate(-50%, -50%) scale(0); transition: transform var(--d-lang) var(--k-ein); } .qk-f-schild { position: absolute; left: 0; top: 1cqmin; display: flex; align-items: baseline; gap: .8cqmin; padding: .45cqmin 1.2cqmin; border-radius: 10cqmin; white-space: nowrap; background: color-mix(in srgb, var(--g0) 78%, transparent); box-shadow: inset 0 0 0 .16cqmin color-mix(in srgb, var(--pf) 70%, transparent), 0 .4cqmin 1.2cqmin rgba(0, 0, 0, .5); opacity: 0; transform: translate(-50%, -.8cqmin); transition: opacity var(--d-mittel) var(--k-ein) 120ms, transform var(--d-mittel) var(--k-ein) 120ms; } .qk-f-schild b { font-family: var(--f-display); font-weight: 700; font-size: max(9px, 2.3cqmin); color: var(--t0); } .qk-f-schild em { font-style: normal; font-family: var(--f-mono); font-weight: 700; font-size: max(9px, 2.1cqmin); color: var(--pf); font-variant-numeric: tabular-nums; } /* Der Abstand erscheint erst, wenn er zählt — „0 km" an jeder Figur wäre eine falsche Auskunft. */ .qk-f-schild em:not(.zaehlt) { display: none; } .qk-figur.da .qk-f-fall { opacity: 1; transform: translate(-50%, 0); } .qk-figur.da .qk-f-schatten { transform: translate(-50%, -50%) scale(1); } .qk-figur.da .qk-f-schild { opacity: 1; transform: translate(-50%, 0); } .qk-figur.klein { --fg: 3.8cqmin; } .qk-figur.klein .qk-f-schild, .qk-figur.ohne-schild .qk-f-schild { display: none; } /* Das Schild erscheint, wenn die Regie es eingeordnet hat (QN.kartenRegie). */ .qk-figur.schild-wartet .qk-f-schild { opacity: 0; } .qk-figur.oben .qk-f-schild { top: auto; bottom: calc(var(--fg) + 3cqmin); } .qk-figur.tief .qk-f-schild { top: 3.8cqmin; } /* Online: das eigene Ich — der einzige Türkis auf der Karte. */ .qk-figur.ich { --fg: 6.6cqmin; } .qk-figur.ich .qk-f-kopf { box-shadow: 0 0 0 .5cqmin var(--du), 0 0 0 1.1cqmin color-mix(in srgb, var(--du) 30%, transparent), 0 .6cqmin 1.6cqmin rgba(0, 0, 0, .55); } .qk-figur.ich .qk-f-schild { box-shadow: inset 0 0 0 .22cqmin var(--du), 0 .4cqmin 1.2cqmin rgba(0, 0, 0, .5); } .qk-figur.ich .qk-f-schild b { color: var(--du); } /* Die beste Nähe: die Figur hebt sich, ein Schild „am nächsten" steht darüber. */ .qk-figur.beste .qk-f-kopf { transform: scale(1.22); box-shadow: 0 0 0 .45cqmin var(--pf), 0 0 0 1.2cqmin color-mix(in srgb, var(--ok) 55%, transparent), 0 0 3.4cqmin color-mix(in srgb, var(--ok) 60%, transparent); } .qk-figur.beste .qk-f-fall::before { content: '★ am nächsten'; order: 0; margin-bottom: 1.3cqmin; padding: .35cqmin 1.1cqmin; border-radius: 10cqmin; font-family: var(--f-display); font-weight: 800; font-size: 2cqmin; letter-spacing: .04em; white-space: nowrap; background: var(--ok); color: var(--auf-ok); animation: qn-auftritt-klein var(--d-mittel) var(--k-schnapp) both; } /* ---- Die Häufchen (QN.kartenRegie): Lage, Stapel „+N", Zeiger am Rand ---- Die Regie verschiebt nur .qk-f-lage (transform); der Schatten bleibt am echten Ort. Im Häufchen ist die Figur unsichtbar (sie steht im Stapel ihres Vordersten), am Rand trägt sie statt Stiel und Schild einen Zeiger. */ .qk-f-lage { position: absolute; left: 0; top: 0; transition: opacity var(--d-mittel) var(--k-ein); } .qk-figur.im-haufen .qk-f-lage { opacity: 0; } .qk-f-kopf { position: relative; } .qk-f-haufen { position: absolute; left: calc(50% + var(--fg) / 2 + .6cqmin); bottom: 2.2cqmin; height: var(--fg); display: flex; align-items: center; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--d-mittel) var(--k-ein); } .qk-figur.beste .qk-f-haufen { left: calc(50% + var(--fg) * .61 + .6cqmin); } .qk-figur.haufen-kopf .qk-f-haufen { opacity: 1; } .qk-f-haufen .qn-reihe-rest.qn-reihe-rest { background: color-mix(in srgb, var(--g0) 84%, transparent); box-shadow: inset 0 0 0 .16cqmin color-mix(in srgb, var(--t0) 16%, transparent), 0 .4cqmin 1.2cqmin rgba(0, 0, 0, .5); } .qk-f-haufen .qn-reihe-rest.qn-reihe-rest > b { color: var(--t0); } .qk-f-zeiger { position: absolute; left: 50%; top: 50%; width: max(9px, 2cqmin); height: max(9px, 2cqmin); background: var(--pf); clip-path: polygon(0 0, 100% 50%, 0 100%); transform: translate(-50%, -50%) rotate(var(--zw, 90deg)) translateX(calc(var(--fg) / 2 + .9cqmin)); opacity: 0; transition: opacity var(--d-mittel) var(--k-ein); pointer-events: none; } .qk-figur.versetzt .qk-f-zeiger { opacity: 1; } .qk-figur.versetzt .qk-f-stiel { opacity: 0; } .qk-figur.versetzt .qk-f-schild, .qk-figur.im-haufen .qk-f-schild { visibility: hidden; } /* Der Vektor versteckt Marken am Rand (.draussen) — eine Figur holt das Häufchen stattdessen ins Bild, also bleibt sie sichtbar. */ .qk-anker.draussen:has(> .qk-figur) { visibility: visible; } /* ---- Das Ziel -------------------------------------------------------- */ /* Das Ziel schlägt ein: die Ringe ziehen sich aus dreifacher Größe zusammen, der Name kommt danach — er wächst nicht mit (ein riesiger Name wäre Lärm). */ .qk-ziel { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity var(--d-mittel) var(--k-ein); } .qk-ziel.da { opacity: 1; } .qk-ziel i { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); } .qk-ziel .qk-z-ring, .qk-ziel .qk-z-kern { scale: 3; transition: scale var(--d-lang) var(--k-schnapp); } .qk-ziel.da .qk-z-ring, .qk-ziel.da .qk-z-kern { scale: 1; } .qk-ziel .qk-z-name { opacity: 0; translate: 0 1.2cqmin; transition: opacity var(--d-mittel) var(--k-ein) .35s, translate var(--d-mittel) var(--k-ein) .35s; } .qk-ziel.da .qk-z-name { opacity: 1; translate: 0 0; } /* Große Runden (qn.js, schilderOrdnen): Während die Kamera fährt und kein Platz frei von einem Stapel („+N") ist, wartet der Name des Ziels — er kommt, sobald die Kamera steht. */ .qk-ziel.da .qk-z-name.wartet { opacity: 0; transition-delay: 0s; transition-duration: .12s; } .qk-z-kern { width: 2cqmin; height: 2cqmin; background: var(--t0); box-shadow: 0 0 0 .45cqmin var(--g0), 0 0 2cqmin var(--t0); } .qk-z-ring { width: 5.4cqmin; height: 5.4cqmin; box-shadow: inset 0 0 0 .4cqmin var(--t0), 0 0 1.6cqmin color-mix(in srgb, var(--t0) 50%, transparent); } .qk-z-welle { width: 5.4cqmin; height: 5.4cqmin; box-shadow: inset 0 0 0 .3cqmin var(--t0); opacity: 0; } @media (prefers-reduced-motion: no-preference) { .qk-ziel.da .qk-z-welle { animation: qk-welle 2.4s var(--k-aus) infinite; } .qk-ziel.da .qk-z-welle.zwei { animation-delay: 1.2s; } } @keyframes qk-welle { 0% { transform: translate(-50%, -50%) scale(1); opacity: .8; } 100% { transform: translate(-50%, -50%) scale(3.4); opacity: 0; } } .qk-z-name { position: absolute; left: 0; bottom: 3.8cqmin; transform: translateX(-50%); white-space: nowrap; padding: .5cqmin 1.5cqmin; border-radius: 1cqmin; background: var(--t0); color: var(--g0); font-family: var(--f-display); font-weight: 800; font-size: 2.6cqmin; letter-spacing: .01em; box-shadow: 0 .6cqmin 1.8cqmin rgba(0, 0, 0, .55); } .qk-z-name::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1.4cqmin; height: 1.4cqmin; background: var(--t0); transform: translate(-50%, -60%) rotate(45deg); } .qk-z-name.unten { bottom: auto; top: 3.8cqmin; } .qk-z-name.unten::after { top: auto; bottom: 100%; transform: translate(-50%, 60%) rotate(45deg); } .qk-z-name.rechts { bottom: auto; top: 0; left: 4cqmin; transform: translateY(-50%); } .qk-z-name.links { bottom: auto; top: 0; left: auto; right: 4cqmin; transform: translateY(-50%); } .qk-z-name.rechts::after, .qk-z-name.links::after { display: none; } /* ---- Die Bildkarte ---------------------------------------------------- */ .qk-bildkarte { margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; border-radius: 2.2cqmin; background: color-mix(in srgb, var(--g1) 90%, transparent); box-shadow: inset 0 0 0 .2cqmin color-mix(in srgb, var(--t0) 16%, transparent), 0 1.4cqmin 4.4cqmin rgba(0, 0, 0, .6); } .qk-bk-bild { position: relative; min-height: 0; overflow: hidden; } .qk-bk-bild > .qn-bildflaeche { position: absolute; inset: 0; border-radius: 0; } .qk-bk-bild .qn-bild { transition: transform 2.4s var(--k-ein); } .qk-bildkarte.aufgedeckt .qk-bk-bild .qn-bild { transform: scale(1.06); } /* Der Nachweis steht ganz da — er bricht lieber um, als abgeschnitten zu werden. */ .qk-bildkarte .qk-bk-credit { top: .7cqmin; right: .7cqmin; bottom: auto; max-width: 92%; font-size: 1.45cqmin; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; border-radius: 1cqmin; } .qk-bk-text { display: grid; padding: 1.3cqmin 1.7cqmin 1.5cqmin; min-width: 0; } .qk-bk-frage, .qk-bk-loesung { grid-area: 1 / 1; display: flex; flex-direction: column; gap: .3cqmin; min-width: 0; transition: opacity var(--d-lang) var(--k-ein), transform var(--d-lang) var(--k-ein); } .qk-bk-text em { font-style: normal; font-weight: 700; font-size: 1.8cqmin; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); } .qk-bk-text b { font-family: var(--f-display); font-weight: 800; font-size: 3.5cqmin; line-height: 1.04; letter-spacing: -.01em; color: var(--t0); text-wrap: balance; } .qk-bk-text span > span { font-size: 2cqmin; color: var(--t1); line-height: 1.25; } .qk-bildkarte.mit-loesung .qk-bk-loesung { opacity: 0; transform: translateY(2cqmin); } .qk-bildkarte.aufgedeckt .qk-bk-frage { opacity: 0; transform: translateY(-2cqmin); } .qk-bildkarte.aufgedeckt .qk-bk-loesung { opacity: 1; transform: none; } .qk-bildkarte.aufgedeckt .qk-bk-loesung em { color: var(--ok); } .qk-bildkarte.aufgedeckt .qk-bk-loesung em::before { content: '✓ '; } /* Ohne Foto: die Ortskarte — Ringe um das Ortszeichen, in der Auflösung die Koordinate. */ .qk-bk-ort { position: absolute; inset: 0; display: grid; place-items: center; color: var(--acc); background: radial-gradient(60% 70% at 50% 45%, color-mix(in srgb, var(--acc) 18%, transparent), transparent 70%), repeating-linear-gradient(0deg, transparent 0 2.6cqmin, color-mix(in srgb, var(--t2) 10%, transparent) 2.6cqmin 2.75cqmin), repeating-linear-gradient(90deg, transparent 0 2.6cqmin, color-mix(in srgb, var(--t2) 10%, transparent) 2.6cqmin 2.75cqmin), var(--g1); } .qk-bk-ort > i { position: absolute; left: 50%; top: 45%; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: inset 0 0 0 .2cqmin color-mix(in srgb, var(--acc) 40%, transparent); } .qk-bk-ort > i:nth-child(1) { width: 9cqmin; height: 9cqmin; } .qk-bk-ort > i:nth-child(2) { width: 16cqmin; height: 16cqmin; opacity: .7; } .qk-bk-ort > i:nth-child(3) { width: 24cqmin; height: 24cqmin; opacity: .4; } .qk-bk-ort > svg { position: relative; width: 6cqmin; height: 6cqmin; margin-bottom: 1.4cqmin; filter: drop-shadow(0 .4cqmin 1cqmin rgba(0, 0, 0, .6)); } .qk-bk-koord { position: absolute; left: 0; right: 0; bottom: 1cqmin; text-align: center; font-family: var(--f-mono); font-weight: 700; font-size: 2.1cqmin; color: var(--t0); letter-spacing: .02em; opacity: 0; transition: opacity var(--d-lang) var(--k-ein); } .qk-bildkarte.aufgedeckt .qk-bk-koord { opacity: 1; } /* ---- Das Schaufeld mit echter Karte (QN.schauKarte) ------------------ */ [data-qk-schau].qk-mit-mapkit > svg { display: none; } .qk-schau-mein, .qk-schau-ziel { position: absolute; left: 0; top: 0; } .qk-schau-mein i, .qk-schau-ziel i { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); } .qk-schau-mein i { width: 3.6cqmin; height: 3.6cqmin; background: var(--qk-mein, var(--acc2)); box-shadow: 0 0 0 .6cqmin rgba(0, 0, 0, .5); } .qk-schau-ziel i { width: 5.4cqmin; height: 5.4cqmin; box-shadow: inset 0 0 0 .8cqmin var(--qk-ziel, var(--ok)), 0 0 0 .5cqmin rgba(0, 0, 0, .45); opacity: 0; transition: opacity var(--d-lang) var(--k-ein) 1.1s; } .qk-schau-los .qk-schau-ziel i { opacity: 1; } /* ---- Die Karte in der Hand: festes Visier, Rastenleiste ---------------- */ .qk-hand > svg, .qk-hand > .qh-kreuz { display: none !important; } .qk-visier { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 4; pointer-events: none; } .qk-visier > * { position: absolute; left: 0; top: 0; } .qk-vi-ring { width: 12cqmin; height: 12cqmin; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: inset 0 0 0 .55cqmin var(--du), 0 0 0 .5cqmin rgba(0, 0, 0, .45); } .qk-vi-ring::after { content: ''; position: absolute; left: 50%; top: 50%; width: 1.6cqmin; height: 1.6cqmin; margin: -.8cqmin 0 0 -.8cqmin; border-radius: 50%; background: var(--du); box-shadow: 0 0 0 .4cqmin rgba(0, 0, 0, .5); } .qk-vi-nadel { width: 11cqmin; height: 11cqmin; color: var(--du); transform: translate(-50%, -94%); filter: drop-shadow(0 .6cqmin .8cqmin rgba(0, 0, 0, .7)); transition: transform var(--d-kurz) var(--k-ein); } .qk-vi-nadel svg { width: 100%; height: 100%; display: block; fill: color-mix(in srgb, var(--du) 30%, var(--g0)); } .qk-vi-schatten { width: 5cqmin; height: 1.6cqmin; border-radius: 50%; background: rgba(0, 0, 0, .55); transform: translate(-50%, -50%) scale(.6); transition: transform var(--d-kurz) var(--k-ein); } .qk-visier.leer .qk-vi-ring { box-shadow: inset 0 0 0 .45cqmin color-mix(in srgb, var(--t0) 70%, transparent), 0 0 0 .5cqmin rgba(0, 0, 0, .4); } .qk-visier.leer .qk-vi-ring::after { background: var(--t0); } .qk-visier.leer .qk-vi-nadel { opacity: .55; } .qk-visier.zieht .qk-vi-nadel { transform: translate(-50%, -112%); } .qk-visier.zieht .qk-vi-schatten { transform: translate(-50%, -50%) scale(1.25); } .qk-visier.setzt .qk-vi-ring { animation: qk-setzt var(--d-lang) var(--k-schnapp); } @keyframes qk-setzt { 0% { transform: translate(-50%, -50%) scale(1.5); opacity: .4; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } } .qk-rasten { position: absolute; right: 2.4cqmin; top: 50%; transform: translateY(-50%); z-index: 4; display: flex; flex-direction: column; gap: 1.2cqmin; } .qk-rasten button { min-width: 15cqmin; height: 11cqmin; padding: 0 2cqmin; border: 0; border-radius: 3cqmin; cursor: pointer; font: 700 calc(3cqmin * var(--schrift, 1)) var(--f-body); color: var(--t0); background: color-mix(in srgb, var(--g0) 72%, transparent); box-shadow: inset 0 0 0 .3cqmin color-mix(in srgb, var(--t0) 18%, transparent); transition: transform var(--d-kurz) var(--k-schnapp); } .qk-rasten button:active { transform: scale(.94); } .qk-weltstreifen { position: absolute; left: 2.4cqmin; right: 2.4cqmin; top: 2.4cqmin; z-index: 4; height: 13cqmin; border-radius: 2.2cqmin; overflow: hidden; cursor: pointer; background: color-mix(in srgb, var(--g0) 80%, transparent); box-shadow: inset 0 0 0 .3cqmin color-mix(in srgb, var(--t0) 14%, transparent), 0 .6cqmin 1.6cqmin rgba(0, 0, 0, .45); } .qk-weltstreifen svg { position: absolute; inset: .8cqmin 1cqmin; width: calc(100% - 2cqmin); height: calc(100% - 1.6cqmin); display: block; } .qk-weltstreifen path { fill: color-mix(in srgb, var(--acc) 22%, var(--g3)); stroke: none; } /* Das Fenster ist „wo die Karte gerade steht", nicht „ich" — Türkis bleibt dem Visier. */ .qk-ws-fenster { fill: color-mix(in srgb, var(--t0) 18%, transparent); stroke: var(--t0); stroke-width: 1.6px; } .qk-rasten button.an { background: var(--acc); color: var(--auf-acc); box-shadow: 0 .6cqmin 1.6cqmin rgba(0, 0, 0, .45); } @media (prefers-reduced-motion: reduce) { .qk-f-fall, .qk-f-schild, .qk-f-schatten, .qk-f-kopf, .qk-f-lage, .qk-f-haufen, .qk-f-zeiger, .qk-f-stiel, .qk-ziel, .qk-ziel .qk-z-ring, .qk-ziel .qk-z-kern, .qk-ziel .qk-z-name, .qk-bk-frage, .qk-bk-loesung, .qk-bk-bild .qn-bild, .qk-bk-koord, .qk-vi-nadel, .qk-schau-ziel i { transition: none; } .qk-visier.setzt .qk-vi-ring, .qk-figur.beste .qk-f-fall::before { animation: none; } } /* ============================================================================ PULT · GRUPPE REGLER — Leiste, Band, Rose und die zwei Schaufelder (qn.js, Block gleichen Namens). Gebunden an .qh-p-r / .qh-p-k (die Frage der Regler bzw. des Kompasses) und an .qh-p-rs / .qh-p-ks (Aufloesung). Die Leiste traegt `.qh-bahn` und die Rose `.qh-rose`, damit die Probe sie findet — die alten Regeln dieser zwei Klassen werden hier zurueckgesetzt, und in beiden steht kein `` (die alte Bahn formt jedes i zum Griff). Die reduzierte Bewegung oben gilt auch hier (!important). ============================================================================ */ /* ---- Die Anzeige: die Zahl gross, der Zustand darunter ------------------- */ .qn-hand.qh-neu .qh-p-r-anz { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "wert stempel" "status stempel"; align-items: center; column-gap: 2.6cqmin; row-gap: .6cqmin; min-height: 19cqmin; padding: 1.8cqmin 2.6cqmin 1.8cqmin 3.4cqmin; } .qh-p-r-wert { grid-area: wert; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1.8cqmin; } .qh-p-r-zahl { font-family: var(--f-mono); font-weight: 700; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--t0); white-space: nowrap; } .qh-p-r-anz[data-zustand="leer"] .qh-p-r-zahl { color: var(--t2); } .qh-p-r-grad { font-family: var(--f-display); margin-left: -.06em; } .qh-p-r-einheit { font-family: var(--f-display); font-weight: 800; font-size: calc(4.6cqmin * var(--schrift, 1)); line-height: 1.1; color: var(--t1); } .qh-p-r-status { grid-area: status; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2cqmin 1.8cqmin; font-size: calc(3.2cqmin * var(--schrift, 1)); line-height: 1.25; } .qh-p-r-status b { font-family: var(--f-mono); font-weight: 700; color: var(--t1); } .qh-p-r-status em { font-style: normal; font-weight: 700; color: var(--t2); } .qh-p-r-anz[data-zustand="gewaehlt"] .qh-p-r-status em { color: var(--jetzt); } .qh-p-r-anz .qh-p-a-stempel { grid-area: stempel; } /* ---- Das Foto der Frage (Los, Objekt, Kulisse) --------------------------- */ .qn-hand.qh-neu .qh-p-r-mitbild { justify-content: flex-start; } .qh-p-r-bild { position: relative; flex: 1 1 0; min-height: 46%; border-radius: 3.4cqmin; overflow: hidden; background: color-mix(in srgb, var(--g0) 55%, transparent); box-shadow: inset 0 0 0 .3cqmin color-mix(in srgb, var(--t0) 8%, transparent); } .qh-p-r-bild .qn-bild { position: absolute; inset: 0; width: 100%; height: 100%; } /* Die Gutschrift steht voll da, auch wenn sie umbricht (nichts gekuerzt). */ .qh-p-r-bild .qn-credit { left: 1.4cqmin; right: 1.4cqmin; bottom: 1cqmin; max-width: none; text-align: right; white-space: normal; overflow: visible; text-overflow: clip; font-size: 1.9cqmin; line-height: 1.25; padding: 0; background: none; backdrop-filter: none; color: color-mix(in srgb, var(--t0) 76%, transparent); text-shadow: 0 0 1cqmin var(--g0), 0 0 .4cqmin var(--g0); } .qn-hand.qh-neu.qh-gross .qh-p-r-bild { min-height: 0; } .qn-hand.qh-neu .qh-p-r-ohnebild .qh-p-r-bild { display: none; } /* ---- Das Deck: grob oben, fein darunter, der Knopf zuunterst ------------- */ .qh-p-r-grob { flex: none; } .qh-p-r-fein { flex: 1 1 auto; min-height: 20cqmin; display: flex; } .qn-hand.qh-neu.qh-p-r.qh-gross .qh-p-deck { min-height: 34cqh; } .qn-hand.qh-neu.qh-p-k .qh-p-deck { min-height: 53cqh; } .qn-hand.qh-neu.qh-p-k.qh-gross .qh-p-deck { min-height: 47cqh; } .qh-p-k .qh-p-r-fein { flex: none; min-height: 0; height: 16cqmin; } /* Die Leiste — die ganze Spanne, absolut. */ .qn-hand.qh-neu .qh-p-leiste.qh-bahn { /* overflow: der Traeger des Griffs ist so breit wie die Rille und faehrt per transform — er darf den Schirm nicht breiter machen. */ position: relative; display: grid; row-gap: .9cqmin; height: auto; padding: .6cqmin 3.2cqmin 0; overflow: hidden; border-radius: 0; background: none; box-shadow: none; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; } .qh-p-leiste-marken { position: relative; height: calc(3.1cqmin * var(--schrift, 1) * 1.2); } .qh-p-leiste-marken b { position: absolute; top: 0; left: calc(var(--rl) * 100%); transform: translateX(calc(var(--rl) * -100%)); font-family: var(--f-mono); font-weight: 700; font-size: calc(3.1cqmin * var(--schrift, 1)); line-height: 1.2; color: var(--t1); white-space: nowrap; } .qh-p-leiste-marken b.qh-p-still { opacity: 0; } .qh-p-leiste-rille { position: relative; height: 6.4cqmin; } .qh-p-leiste-rille::before, .qh-p-rs-rille::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2.2cqmin; margin-top: -1.1cqmin; border-radius: 10cqmin; background: color-mix(in srgb, var(--t0) 12%, transparent); box-shadow: inset 0 .4cqmin .8cqmin color-mix(in srgb, var(--g0) 70%, transparent); } .qh-p-leiste-fuell { position: absolute; left: 0; right: 0; top: 50%; height: 2.2cqmin; margin-top: -1.1cqmin; border-radius: 10cqmin; background: linear-gradient(90deg, var(--acc2), var(--acc)); transform-origin: 0 50%; transform: scaleX(var(--rl, .5)); opacity: 0; transition: transform var(--d-kurz) var(--k-ein), opacity var(--d-mittel) var(--k-ein); } .qh-p-hat .qh-p-leiste-fuell { opacity: .85; } .qh-p-lt { position: absolute; top: 50%; left: calc(var(--rl) * 100%); width: .5cqmin; height: 4.4cqmin; margin: -2.2cqmin 0 0 -.25cqmin; border-radius: 1cqmin; background: color-mix(in srgb, var(--t0) 38%, transparent); } .qh-p-leiste-traeger { position: absolute; inset: 0; pointer-events: none; transform: translateX(calc(var(--rl, .5) * 100%)); transition: transform var(--d-kurz) var(--k-ein); } .qh-p-leiste.qh-p-greift .qh-p-leiste-traeger, .qh-p-leiste.qh-p-greift .qh-p-leiste-fuell { transition: none; } .qh-p-leiste-knopf { position: absolute; left: 0; top: 50%; width: 6.4cqmin; height: 6.4cqmin; margin: -3.2cqmin 0 0 -3.2cqmin; border-radius: 50%; background: var(--jetzt); box-shadow: 0 0 0 .9cqmin color-mix(in srgb, var(--jetzt) 28%, transparent), 0 .8cqmin 2cqmin color-mix(in srgb, var(--g0) 75%, transparent); opacity: 0; transform: scale(.3); transition: transform var(--d-mittel) var(--k-schnapp), opacity var(--d-kurz) var(--k-ein); } .qh-p-hat .qh-p-leiste-knopf { opacity: 1; transform: none; } .qh-p-hat .qh-p-leiste.qh-p-greift .qh-p-leiste-knopf { transform: scale(1.22); } .qh-p-gesendet .qh-p-leiste-knopf { background: var(--acc); box-shadow: 0 0 0 .9cqmin color-mix(in srgb, var(--acc) 30%, transparent), 0 .8cqmin 2cqmin color-mix(in srgb, var(--g0) 75%, transparent); } .qh-p-leiste-pole { display: flex; justify-content: space-between; gap: 4cqmin; font-size: calc(3cqmin * var(--schrift, 1)); font-weight: 600; line-height: 1.25; color: var(--t2); } .qh-p-leiste-pole span { max-width: 48%; } .qh-p-leiste-pole span + span { text-align: right; } /* Das Band — ein Messband unter einer festen Kerbe. Es laeuft mit dem Daumen: nach links gewischt, kommen die groesseren Werte unter die Kerbe. */ .qh-p-band { --S: 4.4cqmin; flex: 1 1 auto; position: relative; overflow: hidden; border-radius: 4.6cqmin; background: linear-gradient(180deg, var(--g3), var(--g2) 55%, color-mix(in srgb, var(--g0) 50%, var(--g2))); box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--t0) 11%, transparent), inset 0 1.6cqmin 3cqmin color-mix(in srgb, var(--g0) 45%, transparent), 0 1.4cqmin 3cqmin color-mix(in srgb, var(--g0) 60%, transparent); cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; } .qh-p-band.qh-p-greift { cursor: grabbing; } .qh-p-band-fenster { position: absolute; inset: 0; pointer-events: none; -webkit-mask: linear-gradient(90deg, transparent 3%, #000 20%, #000 80%, transparent 97%); mask: linear-gradient(90deg, transparent 3%, #000 20%, #000 80%, transparent 97%); } .qh-p-band-streifen { position: absolute; left: 50%; top: 0; bottom: 0; width: 0; transform: translateX(calc(var(--off, 0) * var(--S))); } .qh-p-band-streifen.qh-p-rastet { transition: transform var(--d-mittel) var(--k-schnapp); } .qh-p-bt { position: absolute; left: calc(var(--x) * var(--S)); top: 18%; width: .5cqmin; height: 24%; margin-left: -.25cqmin; border-radius: 1cqmin; background: color-mix(in srgb, var(--t0) 30%, transparent); } .qh-p-bt.g1 { height: 33%; background: color-mix(in srgb, var(--t0) 52%, transparent); } .qh-p-bt.g2 { width: .8cqmin; margin-left: -.4cqmin; height: 42%; background: color-mix(in srgb, var(--t0) 82%, transparent); } .qh-p-bl { position: absolute; left: calc(var(--x) * var(--S)); bottom: 12%; transform: translateX(-50%); font-family: var(--f-mono); font-weight: 700; font-size: calc(3.2cqmin * var(--schrift, 1)); line-height: 1; color: var(--t2); white-space: nowrap; } .qh-p-bl.g2 { color: var(--t0); } /* Das Ende der Spanne: ein Anschlag, schraffiert. */ .qh-p-band-ende { position: absolute; top: 0; bottom: 0; width: 60cqmin; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--g0) 72%, transparent) 0 1.2cqmin, transparent 0 2.4cqmin); } .qh-p-band-ende.links { left: calc(var(--x) * var(--S) - 60cqmin); box-shadow: inset -.5cqmin 0 0 color-mix(in srgb, var(--t0) 30%, transparent); } .qh-p-band-ende.rechts { left: calc(var(--x) * var(--S)); box-shadow: inset .5cqmin 0 0 color-mix(in srgb, var(--t0) 30%, transparent); } /* Die Kerbe steht, das Band laeuft. Vor dem ersten Griff ist sie blass. */ .qh-p-band-kerbe { position: absolute; left: 50%; top: 9%; bottom: 9%; width: 1cqmin; margin-left: -.5cqmin; border-radius: 1cqmin; background: var(--jetzt); box-shadow: 0 0 2.6cqmin color-mix(in srgb, var(--jetzt) 55%, transparent); pointer-events: none; transition: opacity var(--d-mittel) var(--k-ein); } .qh-p-band-kerbe::before, .qh-p-band-kerbe::after { content: ""; position: absolute; left: 50%; width: 0; height: 0; margin-left: -2cqmin; border-left: 2cqmin solid transparent; border-right: 2cqmin solid transparent; } .qh-p-band-kerbe::before { top: -.6cqmin; border-top: 2.4cqmin solid var(--jetzt); } .qh-p-band-kerbe::after { bottom: -.6cqmin; border-bottom: 2.4cqmin solid var(--jetzt); } .qn-hand.qh-neu:not(.qh-p-hat) .qh-p-band-kerbe { opacity: .45; } .qh-p-gesendet .qh-p-band-kerbe { background: var(--acc); box-shadow: 0 0 2.6cqmin color-mix(in srgb, var(--acc) 55%, transparent); } .qh-p-gesendet .qh-p-band-kerbe::before { border-top-color: var(--acc); } .qh-p-gesendet .qh-p-band-kerbe::after { border-bottom-color: var(--acc); } .qh-p-band-pfeil { position: absolute; top: 50%; width: 8cqmin; height: 8cqmin; margin-top: -4cqmin; color: var(--t1); opacity: .72; pointer-events: none; } .qh-p-band-pfeil.links { left: 1.6cqmin; } .qh-p-band-pfeil.rechts { right: 1.6cqmin; } .qh-p-band-pfeil svg { width: 100%; height: 100%; display: block; } .qh-p-zu .qh-p-band, .qh-p-zu .qh-p-leiste, .qh-p-zu .qh-p-k-rose { cursor: default; } /* ---- Die Rose — der Wurf. Alles ein SVG, es waechst mit dem Platz. ------- */ .qh-p-k-platz { flex: 1 1 auto; min-height: 30cqmin; container-type: size; display: flex; align-items: center; justify-content: center; } .qn-hand.qh-neu .qh-p-k-rose.qh-rose { flex: none; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); max-height: none; aspect-ratio: auto; container-type: normal; cursor: crosshair; touch-action: none; -webkit-tap-highlight-color: transparent; } .qh-p-k-rose svg, .qh-p-ks-rose svg { width: 100%; height: 100%; display: block; overflow: visible; } .qh-p-k-scheibe { fill: color-mix(in srgb, var(--g2) 88%, var(--acc)); stroke: color-mix(in srgb, var(--t0) 14%, transparent); stroke-width: 1.4; } .qh-p-k-puls { fill: none; stroke: var(--jetzt); stroke-width: 2.4; opacity: 0; } .qn-hand.qh-neu.qh-p-f:not(.qh-p-hat) .qh-p-k-puls { animation: qh-p-k-puls 1800ms ease-in-out 900ms infinite; } .qn-hand.qh-neu.qh-ruhig-an .qh-p-k-puls { animation: none; opacity: .5; } @keyframes qh-p-k-puls { 0%, 100% { opacity: .1; } 50% { opacity: .75; } } .qh-p-k-striche line { stroke: color-mix(in srgb, var(--t0) 30%, transparent); stroke-width: 1; } .qh-p-k-striche line.g1 { stroke: color-mix(in srgb, var(--t0) 52%, transparent); stroke-width: 1.5; } .qh-p-k-striche line.g2 { stroke: color-mix(in srgb, var(--t0) 80%, transparent); stroke-width: 2.2; } .qh-p-k-zahlen text { fill: var(--t2); font-family: var(--f-mono); font-weight: 700; font-size: calc(9.5px * var(--schrift, 1)); text-anchor: middle; dominant-baseline: central; } .qh-p-k-haupt text { fill: var(--t1); font-family: var(--f-display); font-weight: 900; font-size: calc(16px * var(--schrift, 1)); text-anchor: middle; dominant-baseline: central; } .qh-p-k-haupt text.nord { fill: var(--acc); } .qh-p-k-innen { fill: none; stroke: color-mix(in srgb, var(--t0) 8%, transparent); stroke-width: .8; } .qh-p-k-nabe { fill: var(--g1); stroke: color-mix(in srgb, var(--t0) 42%, transparent); stroke-width: 1.6; } .qh-p-k-strahl { transform: rotate(calc(var(--grad, 0) * 1deg)); transition: transform var(--d-mittel) var(--k-schnapp); } .qh-p-k-rose.qh-p-greift .qh-p-k-strahl, .qh-p-k-rose.qh-p-greift .qh-p-k-ziel { transition: none; } .qh-p-k-wuchs { opacity: 0; transform: scale(.2); transition: transform var(--d-mittel) var(--k-schnapp), opacity var(--d-kurz) var(--k-ein); } .qh-p-hat .qh-p-k-wuchs { opacity: 1; transform: none; } .qh-p-k-stiel { stroke: var(--jetzt); stroke-width: 5; stroke-linecap: round; } .qh-p-k-spitze { fill: var(--jetzt); } .qh-p-gesendet .qh-p-k-stiel { stroke: var(--acc); } .qh-p-gesendet .qh-p-k-spitze { fill: var(--acc); } .qh-p-k-ziel { fill: var(--t0); font-family: var(--f-display); font-weight: 800; font-size: calc(10.5px * var(--schrift, 1)); text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: var(--g1); stroke-width: 4.5px; stroke-linejoin: round; transform: rotate(calc(var(--grad, 0) * -1deg)); transition: transform var(--d-mittel) var(--k-schnapp); } /* Der Wurf beim Abschicken: die Spitze stoesst nach aussen und zurueck. */ @keyframes qh-p-k-wurf { 0% { transform: none; } 35% { transform: translateY(-6px) scale(1.05); } 100% { transform: none; } } .qh-p-k-wuchs.qh-p-k-wurf { animation: qh-p-k-wurf var(--d-mittel) var(--k-schnapp); } /* ---- Gesten und Auftritt -------------------------------------------------- */ @keyframes qh-p-r-links { 0% { transform: none; } 40% { transform: translateX(-1.2cqmin); } 100% { transform: none; } } @keyframes qh-p-r-rechts { 0% { transform: none; } 40% { transform: translateX(1.2cqmin); } 100% { transform: none; } } .qn-hand.qh-neu .qh-p-band.qh-p-r-links { animation: qh-p-r-links var(--d-mittel) var(--k-schnapp); } .qn-hand.qh-neu .qh-p-band.qh-p-r-rechts { animation: qh-p-r-rechts var(--d-mittel) var(--k-schnapp); } .qn-hand.qh-neu .qh-p-band.qh-p-nein, .qn-hand.qh-neu .qh-p-leiste.qh-p-nein, .qn-hand.qh-neu .qh-p-k-rose.qh-p-nein { animation: qh-p-nein 320ms ease-in-out; } .qh-neu .qh-p-r-grob, .qh-neu .qh-p-k-platz { animation: qh-p-auf var(--d-lang) var(--k-ein) 380ms both; } .qh-neu .qh-p-r-fein { animation: qh-p-pop 380ms var(--k-schnapp) 470ms both; } /* Einmal, solange nichts eingestellt ist: Das Band zuckt an — es laeuft. */ @keyframes qh-p-r-stups { 0%, 100% { transform: none; } 30% { transform: translateX(-5cqmin); } 62% { transform: translateX(1.4cqmin); } 82% { transform: translateX(-.4cqmin); } } .qn-hand.qh-neu.qh-p-f:not(.qh-p-hat) .qh-p-band-fenster { animation: qh-p-r-stups 1100ms var(--k-ein) 1150ms both; } @keyframes qh-p-k-ein { from { opacity: 0; transform: rotate(-20deg) scale(.94); } to { opacity: 1; transform: none; } } .qh-neu .qh-p-k-rose svg { animation: qh-p-k-ein var(--d-lang) var(--k-ein) 420ms both; } /* ---- Schaufeld Regler: die Strecke zwischen dir und der Wahrheit --------- */ .qh-p-rs.qh-gut, .qh-p-ks.qh-gut { --ur: var(--ok); --auf-ur: var(--auf-ok); } .qh-p-rs.qh-fast, .qh-p-ks.qh-fast { --ur: var(--warn); --auf-ur: var(--auf-warn); } .qh-p-rs.qh-schlecht, .qh-p-ks.qh-schlecht { --ur: var(--bad); --auf-ur: var(--auf-bad); } .qh-p-rs.qh-neutral, .qh-p-ks.qh-neutral { --ur: var(--acc2); --auf-ur: var(--auf-acc2); } .qh-p-rs { display: grid; gap: 2cqmin; animation: qh-p-auf var(--d-mittel) var(--k-ein) 1150ms both; } /* Das Schaufeld ist EINE Tafel — wie die Zeilen der Verteilung bei der Wahl. */ .qh-p-rs, .qh-p-ks { padding: 2.8cqmin 2.2cqmin 3cqmin; border-radius: 4.4cqmin; background: color-mix(in srgb, var(--t0) 5%, transparent); box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--t0) 8%, transparent); } .qh-p-rs-bahn { display: grid; row-gap: .6cqmin; padding: 0 3.4cqmin; overflow: hidden; } .qh-p-rs-reihe { position: relative; height: calc(3.4cqmin * var(--schrift, 1) + 1.8cqmin); } .qh-p-rs-rille { position: relative; height: 6.4cqmin; } .qh-p-rs-zone { position: absolute; top: 50%; height: 5cqmin; margin-top: -2.5cqmin; left: calc(var(--a) * 100%); width: calc(var(--b) * 100%); border-radius: 10cqmin; background: color-mix(in srgb, var(--t0) 8%, transparent); box-shadow: inset 0 0 0 .3cqmin color-mix(in srgb, var(--t0) 24%, transparent); } .qh-p-rs-luecke { position: absolute; top: 50%; height: 2.2cqmin; margin-top: -1.1cqmin; left: calc(var(--a) * 100%); width: calc(var(--b) * 100%); border-radius: 10cqmin; background: var(--ur); transform-origin: 0 50%; transform: scaleX(0); transition: transform var(--d-xl) var(--k-ein); } .qh-p-rs-luecke.zurueck { transform-origin: 100% 50%; } .qh-p-zeigt .qh-p-rs-luecke { transform: none; } .qh-p-rs-kerbe { position: absolute; top: 50%; left: calc(var(--rl) * 100%); width: .5cqmin; height: 3.6cqmin; margin: -1.8cqmin 0 0 -.25cqmin; border-radius: 1cqmin; background: color-mix(in srgb, var(--t0) 32%, transparent); } .qh-p-rs-traeger { position: absolute; inset: 0; pointer-events: none; transform: translateX(calc(var(--pm) * 100%)); } .qh-p-rs-traeger.wahr { transition: transform var(--d-xl) var(--k-ein); } .qh-p-zeigt .qh-p-rs-traeger.wahr { transform: translateX(calc(var(--pw) * 100%)); } .qh-p-rs-strich { position: absolute; left: 0; top: .2cqmin; bottom: .2cqmin; width: 1.1cqmin; margin-left: -.55cqmin; border-radius: 1cqmin; } .qh-p-rs-strich.meins { background: var(--du); box-shadow: 0 0 2cqmin color-mix(in srgb, var(--du) 55%, transparent); } .qh-p-rs-strich.wahr { background: var(--t0); opacity: 0; transition: opacity var(--d-kurz) var(--k-ein); } .qh-p-zeigt .qh-p-rs-strich.wahr { opacity: 1; } .qh-p-rs-fahne { position: absolute; left: 0; display: inline-flex; align-items: center; gap: .9cqmin; padding: .8cqmin 1.8cqmin; border-radius: 10cqmin; white-space: nowrap; font-family: var(--f-mono); font-weight: 700; font-size: calc(3.4cqmin * var(--schrift, 1)); line-height: 1; transform: translateX(calc(var(--pm) * -100%)); } .qh-p-rs-reihe.oben .qh-p-rs-fahne { bottom: 0; } .qh-p-rs-reihe.unten .qh-p-rs-fahne { top: 0; } .qh-p-rs-fahne.meins { background: var(--du); color: var(--auf-du); } .qh-p-rs-fahne.meins > b { font-family: var(--f-body); font-weight: 800; font-size: .78em; letter-spacing: .08em; text-transform: uppercase; } .qh-p-rs-fahne.wahr { background: var(--t0); color: var(--g0); opacity: 0; transition: transform var(--d-xl) var(--k-ein), opacity var(--d-kurz) var(--k-ein); } .qh-p-zeigt .qh-p-rs-fahne.wahr { opacity: 1; transform: translateX(calc(var(--pw) * -100%)); } .qh-p-rs-fahne svg { width: 3.4cqmin; height: 3.4cqmin; display: block; flex: none; } .qh-p-rs-mass { display: flex; align-items: center; justify-content: center; gap: 2cqmin; opacity: 0; transform: translateY(1.6cqmin); transition: opacity var(--d-mittel) var(--k-ein) var(--d-xl), transform var(--d-mittel) var(--k-schnapp) var(--d-xl); } .qh-p-zeigt .qh-p-rs-mass { opacity: 1; transform: none; } .qh-p-rs-zeichen { flex: none; width: 7cqmin; height: 7cqmin; border-radius: 50%; display: grid; place-items: center; background: var(--ur); color: var(--auf-ur); } .qh-p-rs-zeichen svg { width: 4.2cqmin; height: 4.2cqmin; } .qh-p-rs-mass b { min-width: 0; font-family: var(--f-display); font-weight: 800; font-size: calc(5.4cqmin * var(--schrift, 1)); line-height: 1.1; color: var(--ur); overflow-wrap: break-word; } .qh-p-rs-fakt { font-size: calc(3.3cqmin * var(--schrift, 1)); font-weight: 600; line-height: 1.3; color: var(--t1); text-align: center; opacity: 0; transition: opacity var(--d-mittel) var(--k-ein) calc(var(--d-xl) + 300ms); } .qh-p-zeigt .qh-p-rs-fakt { opacity: 1; } /* ---- Schaufeld Kompass: der Schwenk -------------------------------------- */ .qh-p-ks { display: grid; grid-template-columns: 42cqmin minmax(0, 1fr); align-items: center; gap: 3.6cqmin; animation: qh-p-auf var(--d-mittel) var(--k-ein) 1150ms both; } .qh-p-ks-rose { width: 42cqmin; height: 42cqmin; } .qh-p-ks .qh-p-k-zahlen { display: none; } .qh-p-ks .qh-p-k-haupt text { font-size: 18px; } .qh-p-ks-zone { fill: color-mix(in srgb, var(--t0) 10%, transparent); stroke: color-mix(in srgb, var(--t0) 42%, transparent); stroke-width: 1.2; stroke-dasharray: 3 3; } .qh-p-ks-keil { fill: color-mix(in srgb, var(--ur) 46%, transparent); opacity: 0; transition: opacity var(--d-mittel) var(--k-ein) calc(var(--d-xl) * .5); } .qh-p-zeigt .qh-p-ks-keil { opacity: 1; } .qh-p-ks-strahl line { stroke-width: 5.5; stroke-linecap: round; } .qh-p-ks-strahl.meins { transform: rotate(calc(var(--g) * 1deg)); } .qh-p-ks-strahl.meins line { stroke: var(--du); } .qh-p-ks-strahl.meins path { fill: var(--du); } .qh-p-ks-strahl.wahr { transform: rotate(calc(var(--von) * 1deg)); opacity: 0; transition: transform var(--d-xl) var(--k-ein), opacity var(--d-kurz) var(--k-ein); } .qh-p-zeigt .qh-p-ks-strahl.wahr { transform: rotate(calc(var(--nach) * 1deg)); opacity: 1; } .qh-p-ks-strahl.wahr line { stroke: var(--t0); } .qh-p-ks-kappe { transform: rotate(calc(var(--von) * -1deg)); transition: transform var(--d-xl) var(--k-ein); } .qh-p-zeigt .qh-p-ks-kappe { transform: rotate(calc(var(--nach) * -1deg)); } .qh-p-ks-kappe circle { fill: var(--t0); } .qh-p-ks-kappe path { fill: none; stroke: var(--g0); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; } .qh-p-ks-text { min-width: 0; display: grid; gap: 2cqmin; justify-items: start; } .qh-p-ks .qh-p-rs-mass { justify-content: flex-start; gap: 1.6cqmin; } .qh-p-ks .qh-p-rs-mass b { font-size: calc(4.6cqmin * var(--schrift, 1)); } .qh-p-ks .qh-p-rs-zeichen { width: 6cqmin; height: 6cqmin; } .qh-p-ks .qh-p-rs-fakt { text-align: left; } .qh-p-ks-zeile { display: grid; gap: .5cqmin; font-size: calc(2.9cqmin * var(--schrift, 1)); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--t2); } .qh-p-ks-zeile span { display: inline-flex; align-items: center; gap: .8cqmin; } .qh-p-ks-zeile span svg { width: 3.2cqmin; height: 3.2cqmin; } .qh-p-ks-zeile b { font-family: var(--f-display); font-weight: 800; font-size: calc(5cqmin * var(--schrift, 1)); line-height: 1.05; letter-spacing: -.02em; text-transform: none; color: var(--t0); } .qn-hand.qh-neu.qh-gross .qh-p-ks { grid-template-columns: 34cqmin minmax(0, 1fr); } .qn-hand.qh-neu.qh-gross .qh-p-ks-rose { width: 34cqmin; height: 34cqmin; } /* ---------------------------------------------------------------------------- 16 · PULT · GRUPPE FLÄCHE — ein Punkt oder eine Linie auf einer Fläche, ein Raster, ein Zug (qn.js, Abschnitt „PULT · GRUPPE FLÄCHE") ---------------------------------------------------------------------------- Das Deck ist hier eine Fläche und braucht Höhe: Die Anzeige oben nimmt nur, was sie braucht (auto), das Deck den Rest (1fr). Das Fragefeld hat eine feste, knappe Höhe (--pf-frage), in die pultPasse die Frage einpasst. Der Tisch steht in einer Zeile neben seinem Satz, solange beides hineinpasst. */ .qn-hand.qh-neu:has(> .qh-pf-deck) { grid-template-rows: auto auto minmax(0, 1fr); } .qh-pf-schirm { gap: 1.8cqmin; padding-top: 2.4cqmin; padding-bottom: 2cqmin; } .qh-pf-schirm .qh-p-fragefeld { flex: none; height: var(--pf-frage, 17cqmin); min-height: 0; padding: 2.4cqmin 4cqmin; gap: 1cqmin; border-radius: 4.4cqmin; } .qn-hand.qh-neu.qh-gross .qh-pf-schirm .qh-p-fragefeld { height: calc(var(--pf-frage, 17cqmin) * 1.32); } .qh-pf-schirm .qh-p-tisch { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1cqmin 2.4cqmin; } .qh-pf-schirm .qh-p-tischwort { flex: 1 1 26cqmin; min-width: 0; } .qh-pf-schirm .qh-p-sitze { flex: 0 1 auto; } /* Die Anzeige der Gruppe: links ein Bild der eigenen Eingabe (Lupe, Farbe, Zeichnung), rechts, was es sagt. */ .qh-pf-mini { flex: none; position: relative; width: 15cqmin; height: 11.6cqmin; overflow: hidden; border-radius: 2.6cqmin; background: var(--g1); box-shadow: inset 0 0 0 .3cqmin color-mix(in srgb, var(--t0) 12%, transparent); } .qh-pf-lupe { position: absolute; inset: 0; overflow: hidden; display: block; } .qh-pf-abzug { position: absolute; left: 0; top: 0; display: block; transform-origin: 0 0; pointer-events: none; transition: transform var(--d-mittel) var(--k-ein); } .qh-pf-lupe.nah .qh-pf-abzug { transition: none; } .qh-pf-faden { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none; transition: opacity var(--d-kurz) var(--k-ein); } .qh-pf-faden.an { opacity: 1; } .qh-pf-faden::before, .qh-pf-faden::after { content: ""; position: absolute; background: var(--jetzt); border-radius: 1cqmin; box-shadow: 0 0 0 .25cqmin color-mix(in srgb, var(--g0) 70%, transparent); } .qh-pf-faden::before { left: -2.6cqmin; top: -.2cqmin; width: 5.2cqmin; height: .4cqmin; } .qh-pf-faden::after { left: -.2cqmin; top: -2.6cqmin; width: .4cqmin; height: 5.2cqmin; } .qh-pf-lupe:not(.nah) .qh-pf-faden::before { left: -1.4cqmin; width: 2.8cqmin; } .qh-pf-lupe:not(.nah) .qh-pf-faden::after { top: -1.4cqmin; height: 2.8cqmin; } /* ---- Das Deck: die Fläche, darunter die Knopfzeile ------------------------ */ .qh-pf-deck { min-height: 0; gap: 2.2cqmin; justify-content: flex-start; padding-top: .4cqmin; } .qh-pf-platz { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .qh-pf-knopfzeile { flex: none; display: flex; align-items: stretch; gap: 2.2cqmin; } .qh-pf-knopfzeile .qh-p-losplatz { flex: 1 1 auto; min-width: 0; } .qh-pf-los-marke { flex: none; display: flex; align-items: center; } .qh-pf-los-marke svg { width: 5.4cqmin; height: 5.4cqmin; display: block; } /* Werkzeug: kleine Taste, dieselbe Kappe auf demselben Sockel wie der Knopf. */ .qh-pf-wz { flex: none; position: relative; width: 17cqmin; margin: 0; padding: 0 0 1.4cqmin; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .qh-pf-wz::before { content: ""; position: absolute; left: 0; right: 0; top: 1.4cqmin; bottom: 0; border-radius: 4.6cqmin; background: color-mix(in srgb, var(--g0) 78%, var(--acc2)); } .qh-pf-wz-kappe { position: relative; z-index: 1; height: 100%; min-height: 14.4cqmin; padding: 1.2cqmin .6cqmin; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8cqmin; border-radius: 4.6cqmin; background: var(--g3); color: var(--t0); box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--t0) 11%, transparent); transition: transform 90ms var(--k-ein), opacity var(--d-mittel) var(--k-ein); } .qh-pf-wz-kappe svg { width: 5.6cqmin; height: 5.6cqmin; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .qh-pf-wz-kappe em { font-style: normal; font-size: calc(2.7cqmin * var(--schrift, 1)); font-weight: 800; line-height: 1.05; letter-spacing: .02em; color: var(--t1); text-align: center; } .qh-pf-wz:active .qh-pf-wz-kappe { transform: translateY(1.1cqmin); } .qh-pf-wz.aus { cursor: default; } .qh-pf-wz.aus .qh-pf-wz-kappe { opacity: .42; } .qh-p-zu .qh-pf-wz { cursor: default; } /* Das Punkt-Deck: die Fläche der Kategorie und ihr Fadenkreuz. */ .qn-hand.qh-neu .qh-pf-flaeche { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; border-radius: 4.4cqmin; touch-action: none; cursor: crosshair; background: var(--g2); } .qn-hand.qh-neu .qh-pf-flaeche.qh-pf-rund { aspect-ratio: 1; flex: none; height: 100%; max-width: 100%; margin: 0 auto; border-radius: 50%; } .qh-pf-kreuz { position: absolute; left: var(--x, 50%); top: var(--y, 50%); z-index: 3; width: 9cqmin; height: 9cqmin; margin: -4.5cqmin 0 0 -4.5cqmin; border-radius: 50%; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 .6cqmin var(--jetzt), 0 0 0 .5cqmin color-mix(in srgb, var(--g0) 60%, transparent); } .qh-pf-kreuz.an { opacity: 1; } .qh-pf-kreuz i { position: absolute; left: 50%; top: 50%; width: 1.8cqmin; height: 1.8cqmin; margin: -.9cqmin; border-radius: 50%; background: var(--jetzt); } /* Der Flug (QN.pultFlug): ein Abzug über allem, der auf sein Ziel fährt. */ .qh-pf-geist { position: absolute !important; z-index: 40; margin: 0 !important; pointer-events: none; transform-origin: 50% 50%; transition: transform var(--d-mittel) var(--k-ein), opacity var(--d-mittel) var(--k-aus); } /* Ruckeln, wenn leer abgeschickt wird — auf dem, was die Kategorie nennt. */ .qn-hand.qh-neu .qh-pf-deck .qh-p-nein { animation: qh-p-nein 320ms ease-in-out; } /* Das Schaufeld der Auflösung tritt mit dem Titel auf (1150 ms), nicht vor der Plakette; was darin geschieht, startet mit .qh-p-zeigt. */ .qh-neu.qh-p-a .qh-pf-schau { animation: qh-p-auf var(--d-lang) var(--k-ein) 1150ms both; } /* Auftritt: die Fläche steigt nach der Anzeige auf, der Knopf zuletzt. */ .qh-neu .qh-pf-platz { animation: qh-p-auf var(--d-lang) var(--k-ein) 360ms both; } .qh-neu .qh-pf-knopfzeile { animation: qh-p-auf var(--d-lang) var(--k-ein) 640ms both; } /* Große Schrift: Das Mini wird kleiner, die Werkzeuge rücken als flache Leiste über den Knopf — so bekommt der Knopf die ganze Breite und sein Wort bleibt ganz. */ .qn-hand.qh-neu.qh-gross .qh-pf-mini { width: 13cqmin; height: 10cqmin; } .qn-hand.qh-neu.qh-gross .qh-pf-knopfzeile { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqmin 2.2cqmin; } .qn-hand.qh-neu.qh-gross .qh-pf-knopfzeile .qh-p-losplatz { order: 3; grid-column: 1 / -1; } .qn-hand.qh-neu.qh-gross .qh-pf-wz { width: auto; } .qn-hand.qh-neu.qh-gross .qh-pf-wz-kappe { min-height: 9cqmin; flex-direction: row; gap: 1.4cqmin; padding: .8cqmin 2cqmin; } /* ============================================================================ 16 · PULT · GRUPPE WAHL (qn.js, Block „PULT · GRUPPE WAHL") ============================================================================ Bildfrage, Wahr oder falsch, Hinweisleiter, Weltspitze, Sieb. Was hier steht, gilt fuer jede Kategorie, die es benutzt: das Foto mit Lupe, der Schalter, das Sammeln, das Zeitmass, die Rangliste, das Sieb der Aufloesung. Die Kategorie traegt nur noch, was allein sie hat. Nur Rollenfarben; nur transform und opacity bewegen sich. Die Regel fuer reduzierte Bewegung oben (!important) gilt auch fuer alles hier. */ /* ---- Platz fuer die Frage (QN.pultPlatzFuerFrage) ------------------------- Drei Stufen, angehaeuft: Die Tasten geben nach, damit die Frage steht. */ .qn-hand.qh-neu.qh-p-dicht1 .qh-p-tasten .qh-p-txt { font-size: calc(4.2cqmin * var(--schrift, 1)); } .qn-hand.qh-neu.qh-p-dicht1 .qh-p-tasten.qh-p-liste { grid-auto-rows: minmax(12cqmin, 1fr); gap: 1.4cqmin; } .qn-hand.qh-neu.qh-p-dicht1 .qh-p-tasten.qh-p-raster { grid-auto-rows: minmax(24cqmin, 1fr); } .qn-hand.qh-neu.qh-p-dicht2 .qh-p-tasten .qh-p-txt { font-size: calc(3.6cqmin * var(--schrift, 1)); } .qn-hand.qh-neu.qh-p-dicht2 .qh-p-tasten.qh-p-liste { grid-auto-rows: minmax(10.6cqmin, 1fr); gap: 1.2cqmin; } .qn-hand.qh-neu.qh-p-dicht2 .qh-p-tasten.qh-p-liste .qh-p-kappe { padding-top: 1cqmin; padding-bottom: 1cqmin; } .qn-hand.qh-neu.qh-p-dicht3 .qh-p-tasten .qh-p-txt { font-size: calc(3.1cqmin * var(--schrift, 1)); } .qn-hand.qh-neu.qh-p-dicht3 .qh-p-lupe-zeichen b { display: none; } .qn-hand.qh-neu.qh-p-dicht3 .qh-p-lupe-zeichen { padding: .9cqmin; } /* Ein Wort, das auch verkleinert nicht in seine Taste passt, bricht um. */ .qn-hand.qh-neu .qh-p-txt.qh-p-bricht { overflow-wrap: anywhere; hyphens: auto; } /* ---- Das Foto: im Fragefeld mit Lupe ------------------------------------- */ .qh-p-foto { position: relative; display: block; overflow: hidden; isolation: isolate; border-radius: 3.4cqmin; background: var(--g0); box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--acc) 34%, transparent); } .qh-p-fragefeld:has(> .qh-p-foto) { padding: 2cqmin 2cqmin 2.6cqmin; gap: 1.8cqmin; } .qh-p-fragefeld:has(> .qh-p-foto) > .qh-frage, .qh-p-fragefeld:has(> .qh-p-foto) > .qh-p-auftrag { padding: 0 1.8cqmin; } .qh-p-fragefeld > .qh-p-foto { flex: 1 1 0; min-height: 40cqmin; animation: qh-p-foto-auf var(--d-xl) var(--k-ein) 80ms both; } .qn-hand.qh-neu.qh-gross .qh-p-fragefeld > .qh-p-foto { min-height: 30cqmin; } /* Die Stufen von „Platz fuer die Frage" (oben): Auch das Foto gibt nach. */ .qn-hand.qh-neu.qh-p-dicht1 .qh-p-fragefeld > .qh-p-foto { min-height: 28cqmin; } .qn-hand.qh-neu.qh-p-dicht2 .qh-p-fragefeld > .qh-p-foto { min-height: 22cqmin; } .qn-hand.qh-neu.qh-p-dicht3 .qh-p-fragefeld > .qh-p-foto { min-height: 10cqmin; } @keyframes qh-p-foto-auf { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } } .qh-p-foto-dunst { position: absolute; inset: -10%; z-index: 0; pointer-events: none; background-size: cover; background-position: center; filter: blur(3.6cqmin) saturate(1.15) brightness(.58); } .qh-p-foto-bild { position: absolute; inset: 0; z-index: 1; transform-origin: var(--lx, 50%) var(--ly, 50%); transition: transform var(--d-kurz) var(--k-aus); } .qh-p-foto-bild .qn-bild { width: 100%; height: 100%; object-fit: contain; } .qh-p-lupe { cursor: zoom-in; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .qh-p-lupe-an .qh-p-foto-bild { transform: scale(2); transition: transform var(--d-mittel) var(--k-ein); } .qh-p-lupe-zeichen { position: absolute; z-index: 2; left: 1.6cqmin; top: 1.6cqmin; display: flex; align-items: center; gap: 1cqmin; padding: 1.2cqmin 2cqmin 1.2cqmin 1.4cqmin; border-radius: 10cqmin; background: color-mix(in srgb, var(--g0) 66%, transparent); color: var(--t0); box-shadow: inset 0 0 0 .3cqmin color-mix(in srgb, var(--t0) 22%, transparent); transition: opacity var(--d-kurz) var(--k-ein); } .qh-p-lupe-zeichen svg { width: 4.2cqmin; height: 4.2cqmin; display: block; flex: none; } .qh-p-lupe-zeichen b { font-size: calc(3cqmin * var(--schrift, 1)); font-weight: 800; line-height: 1; letter-spacing: .02em; } .qh-p-lupe-an .qh-p-lupe-zeichen, .qh-p-lupe-an .qh-p-foto-credit { opacity: 0; } /* Die Gutschrift steht voll da, auch wenn sie umbricht (nichts gekuerzt). */ .qh-p-foto .qn-credit.qh-p-foto-credit { z-index: 2; left: auto; right: 1.4cqmin; bottom: 1.2cqmin; top: auto; max-width: calc(100% - 12cqmin); white-space: normal; overflow: visible; text-overflow: clip; text-align: right; font-size: calc(2cqmin * var(--schrift, 1)); line-height: 1.25; padding: .5cqmin 1.3cqmin; border-radius: 1.4cqmin; background: color-mix(in srgb, var(--g0) 66%, transparent); backdrop-filter: none; color: color-mix(in srgb, var(--t0) 80%, transparent); transition: opacity var(--d-kurz) var(--k-ein); } /* ---- Festlegen (Hinweisleiter): Was noch gilt, traegt sein Siegel, solange eine andere Taste nur vorgewaehlt ist. */ .qh-p-taste.qh-p-fest .qh-p-schloss { opacity: .7; transform: none; } .qh-p-hat .qh-p-taste.qh-p-fest .qh-p-kappe { opacity: .9; } /* ---- Der Schalter (Wahr oder falsch) -------------------------------------- Zwei Haelften, geneigt wie die Naht der Wand. Die Neigung liegt auf Kappe und Sockel, der Inhalt steht gerade (Gegenneigung) — die Taste selbst bleibt frei fuer die Gesten des Pults. */ .qh-p-schalter { flex: 1 1 auto; min-height: 46cqmin; position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 4.8cqmin; padding: 0 2.6cqmin; } .qn-hand.qh-neu .qh-p-halb::before { transform: skewX(-7deg); } .qh-p-halb .qh-p-kappe { transform: skewX(-7deg); justify-content: flex-end; } .qh-p-halb.qh-p-an .qh-p-kappe { transform: skewX(-7deg) translateY(.7cqmin); } .qh-p-halb:active .qh-p-kappe { transform: skewX(-7deg) translateY(1.1cqmin); } .qh-p-halb0 .qh-p-kappe { background: linear-gradient(172deg, color-mix(in srgb, var(--acc) 26%, var(--g3)), var(--g2) 72%); } .qh-p-halb1 .qh-p-kappe { background: linear-gradient(172deg, color-mix(in srgb, var(--acc2) 30%, var(--g3)), var(--g2) 72%); } .qh-p-halb-innen { display: grid; justify-items: center; gap: 1.6cqmin; min-width: 0; padding: 0 2.6cqmin 5.4cqmin; transform: skewX(7deg); } .qh-p-halb-zeichen { width: 12cqmin; height: 12cqmin; color: var(--t1); } .qh-p-halb-zeichen .qh-form { width: 100%; height: 100%; display: block; fill: currentColor; } .qh-p-halb.qh-p-an .qh-p-halb-zeichen { color: var(--t0); } .qn-hand.qh-neu .qh-p-halb .qh-p-txt { padding: 0; max-width: 100%; font-size: calc(7.2cqmin * var(--schrift, 1)); line-height: 1; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; } .qh-p-halb .qh-p-schloss { transform: skewX(7deg) scale(.3); } .qh-p-gesendet .qh-p-halb.qh-p-an .qh-p-schloss { transform: skewX(7deg); } .qh-p-naht { position: absolute; z-index: 2; left: 50%; top: 0; bottom: 1.3cqmin; width: .8cqmin; margin-left: -.4cqmin; border-radius: 1cqmin; overflow: hidden; pointer-events: none; background: color-mix(in srgb, var(--t0) 22%, transparent); transform: skewX(-7deg); } .qh-p-naht i { position: absolute; inset: 0; opacity: 0; background: linear-gradient(180deg, transparent 0 60%, var(--jetzt) 76%, color-mix(in srgb, var(--t0) 80%, var(--jetzt)) 81%, transparent 90%); } .qh-neu .qh-p-naht { animation: qh-p-da var(--d-lang) var(--k-ein) 420ms both; } /* Die Zuendschnur: Im letzten Viertel laeuft ein Funke die Naht hinab. */ .qh-p-f:has(.qh-energie.knapp) .qh-p-naht { background: color-mix(in srgb, var(--jetzt) 36%, transparent); } /* (Der Funke hat eine Klasse: hinter :has() rechnete ein nacktes i bei JEDER Text- und Knotenänderung alle i des Schirms neu — gemessen 2.11.) */ .qh-p-f:has(.qh-energie.knapp) .qh-p-naht .qh-p-nahtfunke { opacity: 1; animation: qh-p-funke 1.1s linear infinite; } @keyframes qh-p-funke { from { transform: translateY(-92%); } to { transform: translateY(40%); } } .qn-hand.qh-neu.qh-ruhig-an .qh-p-naht i, .qn-hand.qh-neu.qh-ruhig-an .qh-p-naht .qh-p-nahtfunke { animation: none; } /* (die Klasse: gleiche Stärke wie der Funke oben, steht danach — Ruhig gewinnt wie vorher) */ .qh-p-kugelplatz { position: absolute; z-index: 3; left: 50%; top: 34%; width: 24cqmin; height: 24cqmin; margin: -12cqmin 0 0 -12cqmin; pointer-events: none; animation: qh-p-kugel-fall var(--d-lang) var(--k-schnapp) 520ms both; } @keyframes qh-p-kugel-fall { from { opacity: 0; transform: translateY(-9cqmin) scale(.7); } to { opacity: 1; transform: none; } } .qh-p-kugel { position: relative; display: block; width: 100%; height: 100%; transition: transform var(--d-lang) var(--k-schnapp); } .qh-p-kugel::before { content: ""; position: absolute; inset: -1.8cqmin; border-radius: 50%; pointer-events: none; opacity: 0; box-shadow: 0 0 5cqmin color-mix(in srgb, var(--acc) 70%, transparent); } .qh-p-kugel-rund { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--g2); color: var(--acc); box-shadow: 0 1.6cqmin 3.6cqmin color-mix(in srgb, var(--g0) 82%, transparent); } .qh-p-kugel-rund::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 0 .5cqmin color-mix(in srgb, var(--t0) 18%, transparent); } .qh-p-kugel-rund > .qn-bild { width: 100%; height: 100%; display: block; object-fit: cover; } .qh-p-kugel-rund > svg { position: absolute; inset: 22%; width: 56%; height: 56%; display: block; } .qh-p-schalter:has(.qh-p-halb0.qh-p-an) .qh-p-kugel { transform: translateX(-20cqmin) rotate(-96deg); } .qh-p-schalter:has(.qh-p-halb1.qh-p-an) .qh-p-kugel { transform: translateX(20cqmin) rotate(96deg); } .qh-p-schalter:has(.qh-p-an) .qh-p-kugel-rund::after { box-shadow: inset 0 0 0 .7cqmin var(--acc); } /* Warten: Die Kugel liegt auf ihrer Seite und atmet. */ .qh-p-gesendet .qh-p-kugel::before { animation: qh-p-atmen 2.8s ease-in-out 600ms infinite; } /* Grosse Schrift: WAHR und FALSCH brauchen mehr Hoehe — die Kugel wird kleiner und rueckt hoeher, damit sie kein Zeichen verdeckt. */ .qn-hand.qh-neu.qh-gross .qh-p-kugelplatz { width: 18cqmin; height: 18cqmin; margin: -9cqmin 0 0 -9cqmin; top: 27%; } .qn-hand.qh-neu.qh-gross .qh-p-halb-zeichen { width: 9cqmin; height: 9cqmin; } /* ---- Sammeln (Sieb) ------------------------------------------------------- */ .qh-p-sammel { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(11.4cqmin, 1fr); gap: 1.6cqmin 2cqmin; touch-action: none; } .qn-hand.qh-neu .qh-p-korn { padding-bottom: 1cqmin; border-radius: 3.6cqmin; } .qn-hand.qh-neu .qh-p-korn::before { top: 1cqmin; border-radius: 3.6cqmin; } .qh-p-korn .qh-p-kappe { flex-direction: row; align-items: center; gap: 1.6cqmin; border-radius: 3.6cqmin; padding: 1.2cqmin 1.8cqmin 1.2cqmin 2.8cqmin; } .qn-hand.qh-neu .qh-p-korn .qh-p-txt { flex: 1 1 auto; padding: 0; text-align: left; font-size: calc(4.3cqmin * var(--schrift, 1)); line-height: 1.1; } .qh-p-korn-mal { flex: none; width: 6.2cqmin; height: 6.2cqmin; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 .45cqmin color-mix(in srgb, var(--t0) 28%, transparent); color: var(--auf-acc); } .qh-p-korn-mal svg { width: 3.8cqmin; height: 3.8cqmin; display: block; opacity: 0; transform: scale(.4); transition: opacity var(--d-kurz) var(--k-ein), transform var(--d-mittel) var(--k-schnapp); } .qh-p-korn.qh-p-an .qh-p-korn-mal { background: var(--acc); box-shadow: none; } .qh-p-korn.qh-p-an .qh-p-korn-mal svg { opacity: 1; transform: none; } /* Beim Sammeln tritt nichts zurueck; erst nach der Abgabe ruht, was nicht gewaehlt ist. */ .qh-p-hat .qh-p-korn:not(.qh-p-an) .qh-p-kappe { opacity: 1; } .qh-p-gesendet .qh-p-korn:not(.qh-p-an) .qh-p-kappe { opacity: .62; } .qh-p-zu .qh-p-korn:not(.qh-p-an) .qh-p-kappe { opacity: .36; } .qh-neu .qh-p-sammel .qh-p-platz { animation-delay: calc(340ms + var(--i, 0) * 32ms); } /* Warten: Was im Sieb liegt, schwebt ueber dem Gitter, jede Kachel in ihrem Takt. */ @keyframes qh-p-schwebe { 0%, 100% { transform: translateY(.7cqmin); } 50% { transform: translateY(-.3cqmin); } } .qh-p-gesendet .qh-p-korn.qh-p-an .qh-p-kappe { animation: qh-p-schwebe 3.6s ease-in-out calc(var(--i, 0) * -.45s) infinite; } .qn-hand.qh-neu.qh-ruhig-an .qh-p-korn .qh-p-kappe { animation: none; } .qn-hand.qh-neu.qh-gross .qh-p-sammel { gap: 1.2cqmin 1.6cqmin; grid-auto-rows: minmax(10.4cqmin, 1fr); } .qn-hand.qh-neu.qh-p-sammel-eng2 .qh-p-sammel { gap: 1cqmin 1.6cqmin; grid-auto-rows: minmax(9.4cqmin, 1fr); } .qn-hand.qh-neu.qh-p-sammel-eng2 .qh-p-korn .qh-p-kappe { padding-top: .8cqmin; padding-bottom: .8cqmin; } .qh-p-a-sammel { flex: none; display: grid; grid-template-columns: repeat(2, 4.2cqmin); gap: .9cqmin; padding-left: 1cqmin; } .qh-p-a-sammel i { display: block; width: 4.2cqmin; height: 4.2cqmin; border-radius: 1.1cqmin; box-shadow: inset 0 0 0 .45cqmin var(--t2); } .qh-p-a-sammel i:nth-child(2), .qh-p-a-sammel i:nth-child(3) { background: color-mix(in srgb, var(--t2) 50%, transparent); box-shadow: none; } .qh-p-a-zahl { min-width: 10cqmin; justify-content: center; padding: 1.2cqmin 1.8cqmin; } .qh-p-a-zahl b { font-family: var(--f-mono); font-weight: 700; font-size: calc(5cqmin * var(--schrift, 1)); } .qh-p-los-zahl { min-width: 8cqmin; justify-content: center; padding: .9cqmin 1.6cqmin; } .qh-p-los-zahl b { font-family: var(--f-mono); font-weight: 700; } /* ---- Das Zeitmass („wie schnell") ----------------------------------------- */ .qh-p-zeit { display: grid; gap: 1.2cqmin; padding-top: 5.4cqmin; animation: qh-p-auf var(--d-mittel) var(--k-ein) 1350ms both; } .qh-p-zt-bahn { position: relative; height: 3.2cqmin; } .qh-p-zt-grund, .qh-p-zt-fuell { position: absolute; left: 0; right: 0; top: .9cqmin; bottom: .9cqmin; border-radius: 10cqmin; } .qh-p-zt-grund { background: color-mix(in srgb, var(--t0) 10%, transparent); } .qh-p-zt-fuell { background: var(--acc); transform-origin: 0 50%; transform: scaleX(0); } .qh-p-zeigt .qh-p-zt-fuell { transform: scaleX(var(--x, 0)); transition: transform var(--d-xl) var(--k-ein) 350ms; } .qh-p-zt-punkt { position: absolute; top: 50%; left: calc(var(--x, 0) * 100%); width: 2.4cqmin; height: 2.4cqmin; margin: -1.2cqmin 0 0 -1.2cqmin; border-radius: 50%; background: var(--t2); box-shadow: 0 0 0 .5cqmin var(--g1); opacity: 0; transform: scale(.3); } .qh-p-zeigt .qh-p-zt-punkt { opacity: 1; transform: none; transition: opacity var(--d-mittel) var(--k-ein) calc(400ms + var(--i, 0) * 80ms), transform var(--d-mittel) var(--k-schnapp) calc(400ms + var(--i, 0) * 80ms); } .qh-p-zt-ich { position: absolute; top: 50%; left: calc(var(--x, 0) * 100%); width: 0; height: 0; opacity: 0; } .qh-p-zt-ich::before { content: ""; position: absolute; left: -.5cqmin; top: -2.6cqmin; width: 1cqmin; height: 5.2cqmin; border-radius: 1cqmin; background: var(--t0); } .qh-p-zt-ich b { position: absolute; left: 0; bottom: 3cqmin; transform: translateX(calc(var(--x, 0) * -100%)); white-space: nowrap; font-family: var(--f-mono); font-weight: 700; font-size: calc(3.6cqmin * var(--schrift, 1)); line-height: 1; color: var(--t0); } .qh-p-zeigt .qh-p-zt-ich { opacity: 1; transition: opacity var(--d-mittel) var(--k-ein) 1100ms; } .qh-p-zt-fuss { display: flex; justify-content: space-between; align-items: baseline; gap: 2cqmin; font-size: calc(3.1cqmin * var(--schrift, 1)); line-height: 1.25; color: var(--t1); } .qh-p-zt-fuss b { color: var(--t0); font-weight: 800; } .qh-p-zt-frist { flex: none; font-family: var(--f-mono); color: var(--t2); } /* ---- Die Rangliste mit Klammer (Weltspitze) -------------------------------- */ .qh-p-rl { --rl-luft: 1cqmin; position: relative; display: grid; grid-auto-rows: 1fr; gap: var(--rl-luft); } .qh-p-rl-mitklammer { padding-right: 6.4cqmin; } .qh-p-rl-z { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; column-gap: 1.8cqmin; min-height: 7.6cqmin; padding: .7cqmin 2cqmin .7cqmin .9cqmin; border-radius: 3cqmin; /* Deckend und nach Rang geschichtet: Beim Sortieren fahren Zeilen uebereinander — die bessere liegt oben, nichts scheint durch. */ position: relative; z-index: calc(20 - var(--i, 0)); background: color-mix(in srgb, var(--t0) 6%, var(--g1)); transform: translateY(calc(var(--von, 0) * (100% + var(--rl-luft)))); animation: qh-p-da var(--d-mittel) var(--k-ein) 1150ms both; } /* Die Bausteine der Verteilung (Text, Zeichen) bringen eigene Rasterflaechen mit — hier gilt die einfache Folge, sonst legte das Raster still eine zweite Zeile an. */ .qh-p-rl-z > * { grid-area: auto; } .qh-p-zeigt .qh-p-rl-z { transform: none; transition: transform var(--d-xl) var(--k-ein) calc(250ms + var(--i, 0) * 60ms); } .qh-p-rl-z.qh-p-wahr { background: color-mix(in srgb, var(--ok) 14%, var(--g1)); box-shadow: inset 0 0 0 .4cqmin color-mix(in srgb, var(--ok) 55%, transparent); } .qh-p-rl-z.qh-p-meins { box-shadow: inset 0 0 0 .45cqmin var(--du); } .qh-p-rl-rang { min-width: 6.2cqmin; height: 6.2cqmin; padding: 0 1cqmin; border-radius: 1.8cqmin; display: grid; place-items: center; font-family: var(--f-mono); font-weight: 700; font-size: calc(3.4cqmin * var(--schrift, 1)); line-height: 1; background: color-mix(in srgb, var(--acc) 20%, var(--g2)); color: var(--t0); } .qh-p-rl-z.qh-p-wahr .qh-p-rl-rang { background: var(--acc); color: var(--auf-acc); } .qh-p-rl-zeichen { width: 5.4cqmin; height: 5.4cqmin; color: var(--acc); } .qh-p-rl-zeichen svg { width: 100%; height: 100%; display: block; } .qh-p-rl .qh-p-vz-t { font-size: calc(3.9cqmin * var(--schrift, 1)); } .qh-p-rl-klammer { --rh: calc((100% - (var(--n) - 1) * var(--rl-luft)) / var(--n)); position: absolute; right: .8cqmin; width: 3.6cqmin; top: calc(var(--rh) / 2); height: calc(var(--k, 0) * (var(--rh) + var(--rl-luft))); border: .55cqmin solid var(--t1); border-left: 0; border-radius: 0 2.4cqmin 2.4cqmin 0; transform-origin: 50% 0; transform: scaleY(0); } /* Grosse Schrift: sechs Zeilen muessen neben Plakette und Stand passen. */ .qn-hand.qh-neu.qh-gross .qh-p-rl { --rl-luft: .7cqmin; } .qn-hand.qh-neu.qh-gross .qh-p-rl-z { min-height: 6.2cqmin; padding-top: .4cqmin; padding-bottom: .4cqmin; column-gap: 1.4cqmin; } .qn-hand.qh-neu.qh-gross .qh-p-rl .qh-p-vz-t { font-size: calc(3cqmin * var(--schrift, 1)); gap: .4cqmin 1cqmin; } .qn-hand.qh-neu.qh-gross .qh-p-rl-rang { min-width: 5.4cqmin; height: 5.4cqmin; font-size: calc(2.6cqmin * var(--schrift, 1)); } .qn-hand.qh-neu.qh-gross .qh-p-rl-zeichen { width: 4.4cqmin; height: 4.4cqmin; } .qn-hand.qh-neu.qh-gross .qh-p-rl .qh-p-tag { font-size: calc(2.2cqmin * var(--schrift, 1)); padding: .5cqmin 1.1cqmin; } .qh-p-zeigt .qh-p-rl-klammer { transform: none; transition: transform var(--d-lang) var(--k-ein) calc(var(--d-xl) + 200ms); } /* ---- Das Sieb der Aufloesung ---------------------------------------------- */ .qh-p-sieb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1cqmin; } .qh-p-zeigt .qh-p-sieb { animation: qh-p-ruettel 150ms ease-in-out 3; } @keyframes qh-p-ruettel { 0%, 100% { transform: none; } 25% { transform: translateX(-1cqmin); } 75% { transform: translateX(1cqmin); } } .qh-p-sb { position: relative; isolation: isolate; display: flex; align-items: center; gap: 1cqmin; min-width: 0; min-height: 8.2cqmin; padding: 1cqmin 1.2cqmin; border-radius: 2.6cqmin; background: color-mix(in srgb, var(--t0) 6%, transparent); font-family: var(--f-display); font-weight: 800; font-size: calc(3.1cqmin * var(--schrift, 1)); line-height: 1.08; color: var(--t0); animation: qh-p-auf var(--d-mittel) var(--k-ein) calc(1100ms + var(--i, 0) * 30ms) both; } .qh-p-sb b { min-width: 0; font-weight: 800; overflow-wrap: break-word; } .qh-p-sb::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; } .qh-p-sb-z { flex: none; width: 4.6cqmin; height: 4.6cqmin; border-radius: 50%; display: grid; place-items: center; opacity: 0; transform: scale(.3); } .qh-p-sb-z svg { width: 2.9cqmin; height: 2.9cqmin; display: block; } .qh-p-sb-getroffen::before { background: color-mix(in srgb, var(--ok) 18%, var(--g1)); box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--ok) 62%, transparent); } .qh-p-sb-getroffen .qh-p-sb-z { background: var(--ok); color: var(--auf-ok); } .qh-p-sb-fehlgriff::before { background: color-mix(in srgb, var(--bad) 16%, var(--g1)); box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--bad) 62%, transparent); } .qh-p-sb-fehlgriff .qh-p-sb-z { background: var(--bad); color: var(--auf-bad); } .qh-p-sb-uebersehen::before { outline: .35cqmin dashed var(--warn); outline-offset: -.35cqmin; } .qh-p-sb-uebersehen .qh-p-sb-z i { display: block; width: 3.6cqmin; height: 3.6cqmin; border-radius: 50%; border: .5cqmin dashed var(--warn); } .qh-p-zeigt .qh-p-sb::before, .qh-p-zeigt .qh-p-sb-z { opacity: 1; transform: none; transition: opacity var(--d-mittel) var(--k-ein) calc(480ms + var(--i, 0) * 90ms), transform var(--d-mittel) var(--k-schnapp) calc(480ms + var(--i, 0) * 90ms); } /* Der Fehlgriff faellt durchs Gitter; was zu Recht liegen blieb, ruht. */ .qh-p-sb-fehlgriff b { display: inline-block; } .qh-p-zeigt .qh-p-sb-fehlgriff b { transform: translateY(.8cqmin) rotate(2deg); transition: transform var(--d-lang) var(--k-aus) calc(560ms + var(--i, 0) * 90ms); } .qh-p-sb-ruhig { color: var(--t2); } .qh-p-zeigt .qh-p-sb-ruhig b { opacity: .55; transition: opacity var(--d-lang) var(--k-ein) calc(480ms + var(--i, 0) * 90ms); } .qh-p-sieb-legende { display: flex; flex-wrap: wrap; gap: .6cqmin 2.4cqmin; font-size: calc(2.9cqmin * var(--schrift, 1)); line-height: 1.2; color: var(--t1); animation: qh-p-auf var(--d-mittel) var(--k-ein) 1500ms both; } .qh-p-sieb-legende span { display: inline-flex; align-items: center; gap: .8cqmin; } .qh-p-sieb-legende i { display: inline-grid; place-items: center; width: 3.4cqmin; height: 3.4cqmin; border-radius: 50%; } .qh-p-sieb-legende i svg { width: 2.2cqmin; height: 2.2cqmin; display: block; } .qh-p-sieb-legende .l-ok { background: var(--ok); color: var(--auf-ok); } .qh-p-sieb-legende .l-bad { background: var(--bad); color: var(--auf-bad); } .qh-p-sieb-legende .l-warn { border: .45cqmin dashed var(--warn); } .qh-p-sieb-legende .l-lage { margin-left: auto; } .qh-p-sieb-legende b { color: var(--t0); font-weight: 800; } .qn-hand.qh-neu.qh-gross .qh-p-sieb { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8cqmin; } .qn-hand.qh-neu.qh-gross .qh-p-sb { min-height: 6.4cqmin; padding: .7cqmin 1.2cqmin; } /* ============================================================================ 16 · PULT · GRUPPE FELD — Schreiben (feld) und Stöpseln (zuordnen) (qn.js, Abschnitt PULT · GRUPPE FELD) ============================================================================ Zwei Decks für das Pult. Alles hier hängt an eigenen Klassen (qh-fd-* für das Feld, qh-pz-* für das Zuordnen) oder am Tastaturmodus .qh-p-tastatur; Kopf, Energie, Anzeige, Tisch, Knopf und Auflösung bleiben, wie der Abschnitt darüber sie baut. Nur Rollenfarben, nur transform und opacity. */ /* ---- Feld: oben die Karte mit dem Bild der Kategorie ---------------------- */ .qh-fd-schirm .qh-p-fragefeld { justify-content: flex-start; } /* Das Bild der Kategorie (Filmstreifen, Schacht …) füllt, was die Frage übrig lässt — ohne Tastatur ist das der größte Teil des Schirms. */ .qh-fd-buehne { position: relative; flex: 1 1 auto; min-height: 26cqmin; display: flex; flex-direction: column; } .qh-fd-eigen { margin: auto 0 0; font-size: calc(3.3cqmin * var(--schrift, 1)); line-height: 1.3; color: var(--t1); } .qh-fd-eigen b { font-family: var(--f-mono); color: var(--t0); } /* ---- Feld: die Anzeige — das Geschriebene, groß --------------------------- */ .qh-fd-anzeige { cursor: text; } .qh-fd-marke { flex: none; width: 9.6cqmin; height: 9.6cqmin; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--t0) 8%, transparent); color: var(--t2); } .qh-fd-marke svg { width: 5.2cqmin; height: 5.2cqmin; display: block; } .qh-fd-anzeige[data-zustand="gewaehlt"] .qh-fd-marke { background: color-mix(in srgb, var(--jetzt) 22%, transparent); color: var(--jetzt); } .qh-fd-anzeige[data-zustand="gesendet"] .qh-fd-marke { background: var(--acc); color: var(--auf-acc); } /* Was jemand selbst tippt, darf an jeder Stelle umbrechen — ein langes Wort ohne Leerzeichen liefe sonst aus dem Kasten. Gekürzt wird nie. */ /* Der Platz des Textes ist ein eigener Kasten: pultPasse misst an ihm, ob das Geschriebene passt (nicht an der Anzeige, in der der Stempel einschlägt). */ .qh-fd-wertplatz { display: block; min-width: 0; } .qn-hand.qh-neu .qh-fd-t .qh-fd-wert { --qh-fd-hi: 5.6; --qh-fd-lo: 4.2; display: block; font-size: calc(5.6cqmin * var(--schrift, 1)); line-height: 1.12; overflow-wrap: anywhere; } .qn-hand.qh-neu .qh-fd-t .qh-fd-leer { color: var(--t1); } .qn-hand.qh-neu .qh-fd-t .qh-fd-gravur { text-transform: uppercase; letter-spacing: .05em; } /* ---- Feld: das Deck — das Feld als Taste auf ihrem Sockel ------------------ */ .qn-hand.qh-neu .qh-p-deck.qh-fd-deck { min-height: 0; gap: 2.2cqmin; } .qh-fd-platz { flex: none; display: flex; } .qh-fd-schreib { flex: 1 1 auto; position: relative; display: block; padding-bottom: 1.3cqmin; cursor: text; } .qh-fd-schreib::before { content: ""; position: absolute; left: 0; right: 0; top: 1.3cqmin; bottom: 0; border-radius: 4.6cqmin; background: color-mix(in srgb, var(--g0) 78%, var(--acc2)); box-shadow: 0 1.4cqmin 3cqmin color-mix(in srgb, var(--g0) 70%, transparent); } .qh-fd-kappe { position: relative; z-index: 1; display: flex; align-items: center; gap: 2cqmin; min-height: 14.4cqmin; padding: 2.2cqmin 3.6cqmin; border-radius: 4.6cqmin; background: linear-gradient(172deg, var(--g3), var(--g2) 64%); box-shadow: inset 0 0 0 .4cqmin color-mix(in srgb, var(--t0) 16%, transparent), inset 0 .6cqmin 0 color-mix(in srgb, var(--t0) 7%, transparent); transition: opacity var(--d-mittel) var(--k-ein); } /* Wer schreibt, ändert gerade etwas: der Rand in „jetzt". */ .qh-fd-fokus .qh-fd-kappe { box-shadow: inset 0 0 0 .55cqmin var(--jetzt), 0 0 4cqmin color-mix(in srgb, var(--jetzt) 26%, transparent); } /* Mindestens 16 px, sonst zoomt iOS ins Feld. Die Regel der Spielprobe (spiel.css, .qh-tipp: font: inherit) liegt ohne Ebene — daher die längere Kette hier. */ .qn-hand.qh-neu .qh-fd-kappe .qh-fd-tipp { flex: 1 1 auto; min-width: 0; display: block; width: 100%; margin: 0; padding: .4cqmin 0; border: 0; outline: 0; border-radius: 0; background: none; box-shadow: none; resize: none; overflow: hidden; color: var(--t0); caret-color: var(--jetzt); text-align: left; font-family: var(--f-display); font-weight: 800; letter-spacing: -.01em; font-size: max(16px, calc(5.2cqmin * var(--schrift, 1))); line-height: 1.2; -webkit-user-select: text; user-select: text; -webkit-appearance: none; appearance: none; } .qn-hand.qh-neu .qh-fd-kappe .qh-fd-tipp::placeholder { color: var(--t2); font-weight: 700; opacity: 1; } /* Jeder Tastendruck lässt den Rand kurz aufglimmen (nur opacity). */ .qh-fd-glimm { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 .7cqmin var(--jetzt), 0 0 3.6cqmin color-mix(in srgb, var(--jetzt) 55%, transparent); } .qh-fd-glimm.an { animation: qh-fd-glimm var(--d-mittel) var(--k-aus) both; } @keyframes qh-fd-glimm { from { opacity: .9; } to { opacity: 0; } } .qh-fd-rest { flex: none; align-self: flex-end; font-family: var(--f-mono); font-weight: 700; font-size: calc(3cqmin * var(--schrift, 1)); line-height: 1.2; color: var(--jetzt); } .qh-fd-rest:empty { display: none; } /* Die Regeln der Frage: eine ruhige Zeile, keine Chips zum Antippen. */ .qh-fd-regeln { flex: none; margin: 0; word-spacing: .9cqmin; text-wrap: balance; font-size: calc(3.2cqmin * var(--schrift, 1)); font-weight: 600; line-height: 1.35; color: var(--t2); text-align: center; } .qh-fd-regeln span { word-spacing: normal; } .qh-fd-enter svg { width: 4.8cqmin; height: 4.8cqmin; display: block; } .qn-hand.qh-neu .qh-fd-schreib.qh-p-nein { animation: qh-p-nein 320ms ease-in-out; } /* Abgeschickt: das Feld tritt zurück, bleibt aber lesbar und antippbar. */ .qh-p-gesendet:not(.qh-fd-fokus) .qh-fd-kappe { opacity: .72; } .qh-p-zu .qh-fd-kappe { opacity: .4; } .qh-p-zu .qh-fd-schreib, .qh-p-zu .qh-fd-anzeige { cursor: default; } .qh-neu .qh-fd-platz { animation: qh-p-pop 380ms var(--k-schnapp) 380ms both; } .qh-neu .qh-fd-regeln { animation: qh-p-auf var(--d-mittel) var(--k-ein) 520ms both; } /* ---- Feld: die Tastatur ist offen ------------------------------------------ Die Hand ist nur noch so hoch wie der sichtbare Rest (QN.pultTastatur). Alles wird knapper, nichts fällt weg, was man zum Schreiben braucht: Kopf, Uhr, Frage, das Bild als Band, das Geschriebene, Feld, Knopf. Der Auftrag und die Köpfe des Tisches kommen zurück, sobald die Tastatur geht (die Zahl des Tisches bleibt stehen). */ .qn-hand.qh-neu.qh-p-tastatur { --qh-p-rand: 2.6cqmin; } .qh-p-tastatur .qh-p-oben { padding-top: max(2.6cqmin, env(safe-area-inset-top, 0px) + 1cqmin); gap: 1.4cqmin; } .qh-p-tastatur .qh-energie { min-height: 4.8cqmin; } .qh-p-tastatur .qh-p-schirm { gap: 1.4cqmin; padding-top: 1.8cqmin; padding-bottom: 1.2cqmin; } .qh-p-tastatur .qh-p-fragefeld { min-height: 0; padding: 2cqmin 3cqmin; gap: 1.2cqmin; } .qh-p-tastatur .qh-p-auftrag { display: none; } .qh-p-tastatur .qh-fd-buehne { min-height: 12cqmin; } .qh-p-tastatur .qh-p-a-innen { min-height: 0; padding-top: 1.3cqmin; padding-bottom: 1.3cqmin; } .qh-p-tastatur .qh-fd-marke { width: 7.6cqmin; height: 7.6cqmin; } .qh-p-tastatur .qh-p-sitze { display: none; } .qn-hand.qh-neu.qh-p-tastatur .qh-p-deck.qh-fd-deck { gap: 1.6cqmin; } .qh-p-tastatur .qh-fd-kappe { min-height: 12cqmin; padding-top: 1.6cqmin; padding-bottom: 1.6cqmin; } .qh-p-tastatur .qh-p-los .qh-p-kappe { min-height: 11.6cqmin; } /* Der Schirm wird eng (pfPasse, einmal je Frage): Schrift 150 %, langer Set-Name, langer Text. Die Köpfe des Tisches treten zurück (die Zahl bleibt stehen), der Auftrag auch; das Bild der Kategorie wird zum Band. */ .qn-hand.qh-neu.qh-fd-eng .qh-p-sitze, .qn-hand.qh-neu.qh-fd-eng .qh-fd-schirm .qh-p-auftrag { display: none; } .qn-hand.qh-neu.qh-fd-eng .qh-fd-buehne { min-height: 12cqmin; } /* ---- Zuordnen: das Steckfeld — EIN Ding, das Anschluss sucht --------------- */ .qh-pz-frage { justify-content: flex-start; } .qh-pz-feldplatz { flex: 1 1 auto; min-height: 34cqmin; display: flex; } .qh-pz-feld { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; animation: qh-pz-rein var(--d-lang) var(--k-ein) both; } @keyframes qh-pz-rein { from { opacity: 0; transform: translateX(7cqmin); } to { opacity: 1; transform: none; } } .qh-pz-einzeln { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "nr bild status" "name name kabel"; align-items: center; gap: 1cqmin 1.6cqmin; padding: 2cqmin 2.4cqmin 1.6cqmin; border-radius: 4cqmin; background: color-mix(in srgb, var(--jetzt) 10%, var(--g1)); box-shadow: inset 0 0 0 .45cqmin color-mix(in srgb, var(--jetzt) 62%, transparent); } .qh-pz-einzeln.steckt { background: color-mix(in srgb, var(--acc) 14%, var(--g1)); box-shadow: inset 0 0 0 .45cqmin color-mix(in srgb, var(--acc) 60%, transparent); } .qh-pz-nr { grid-area: nr; align-self: start; min-width: 7.4cqmin; height: 7.4cqmin; padding: 0 1.6cqmin; border-radius: 10cqmin; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: calc(4cqmin * var(--schrift, 1)); line-height: 1; background: color-mix(in srgb, var(--g0) 55%, transparent); color: var(--t0); } .qh-pz-status { grid-area: status; justify-self: end; align-self: start; padding: 1cqmin 2cqmin; border-radius: 10cqmin; font-size: calc(3cqmin * var(--schrift, 1)); font-weight: 800; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; background: color-mix(in srgb, var(--jetzt) 22%, transparent); color: var(--jetzt); } .qh-pz-status b { font-family: var(--f-mono); } .qh-pz-einzeln.steckt .qh-pz-status { background: var(--acc); color: var(--auf-acc); } .qh-pz-bild { grid-area: bild; min-height: 0; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--t0); } .qh-pz-bild > svg { width: 100%; height: 100%; max-height: 36cqmin; display: block; filter: drop-shadow(0 .8cqmin 1.4cqmin color-mix(in srgb, var(--g0) 70%, transparent)); } .qh-pz-grossnr { font-family: var(--f-display); font-size: 16cqmin; line-height: 1; color: var(--jetzt); opacity: .5; } .qn-hand.qh-neu .qh-pz-name { grid-area: name; min-width: 0; font-family: var(--f-display); font-weight: 800; font-size: calc(6cqmin * var(--schrift, 1)); line-height: 1.08; letter-spacing: -.01em; color: var(--t0); overflow-wrap: normal; text-wrap: balance; } /* Das Kabelende sucht Anschluss: es pendelt, bis es steckt. */ .qh-pz-kabel { grid-area: kabel; align-self: end; width: 5.4cqmin; height: 10.4cqmin; color: var(--jetzt); transform-origin: 50% 0; } .qh-pz-kabel svg { width: 100%; height: 100%; display: block; } .qh-pz-einzeln:not(.steckt) .qh-pz-kabel { animation: qh-pz-pendel 2.6s ease-in-out infinite; } .qh-pz-einzeln.steckt .qh-pz-kabel { color: var(--acc); } @keyframes qh-pz-pendel { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } } /* Alle gesteckt: das Brett — oben die Dinge, unten die Stecker, dazwischen die Leitungen, wie sie liegen (antippen = umstecken). */ .qh-pz-brett { --qh-pz-k: 1; border-radius: 4cqmin; overflow: hidden; background: color-mix(in srgb, var(--acc) 10%, var(--g1)); box-shadow: inset 0 0 0 .45cqmin color-mix(in srgb, var(--acc) 50%, transparent); } .qh-pz-leitungen { position: absolute; inset: 0; width: 100%; height: 100%; } .qh-pz-leitungen path { fill: none; stroke: var(--acc); stroke-width: 3.4px; stroke-linecap: round; vector-effect: non-scaling-stroke; animation: qh-p-da var(--d-lang) var(--k-ein) calc(var(--i, 0) * 80ms) both; } .qh-p-gesendet .qh-pz-leitungen path { animation: qh-pz-atem 2.4s ease-in-out calc(var(--i, 0) * .8s) infinite; } @keyframes qh-pz-atem { 0%, 100% { opacity: .5; } 50% { opacity: 1; } } .qh-pz-bz { position: absolute; left: var(--x); top: 1.6cqmin; transform: translateX(-50%) scale(var(--qh-pz-k)); transform-origin: 50% 0; display: grid; justify-items: center; gap: .6cqmin; margin: 0; padding: 1cqmin 1.2cqmin .8cqmin; border: 0; border-radius: 2.8cqmin; font: inherit; color: var(--t0); cursor: pointer; -webkit-tap-highlight-color: transparent; background: color-mix(in srgb, var(--g0) 70%, var(--g1)); box-shadow: inset 0 0 0 .3cqmin color-mix(in srgb, var(--t0) 14%, transparent); } .qh-pz-bz .qh-pz-nr { min-width: 5cqmin; height: 5cqmin; padding: 0 1cqmin; font-size: calc(3cqmin * var(--schrift, 1)); } .qh-pz-bzbild { width: 12cqmin; height: 7.4cqmin; display: block; color: var(--t0); } .qh-pz-bzbild svg { width: 100%; height: 100%; display: block; } .qh-pz-bk { position: absolute; left: var(--x); bottom: 1.6cqmin; transform: translateX(-50%) scale(var(--qh-pz-k)); transform-origin: 50% 100%; min-width: 9cqmin; padding: 1cqmin 1.6cqmin; border-radius: 2.2cqmin; text-align: center; background: color-mix(in srgb, var(--acc2) 22%, var(--g1)); box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--acc2) 55%, transparent); font-family: var(--f-mono); font-weight: 700; font-size: calc(3.4cqmin * var(--schrift, 1)); line-height: 1; color: var(--acc); } /* ---- Zuordnen: die Leiste (die Anzeige) ------------------------------------- */ .qh-p-a-innen.qh-pz-leiste { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 1.2cqmin; padding: 1.8cqmin 2cqmin 1.6cqmin; } .qh-pz-reihe { display: grid; grid-template-columns: repeat(var(--m, 4), minmax(0, 1fr)) auto; align-items: center; gap: 1.4cqmin; } .qh-pz-ding { position: relative; min-width: 0; display: grid; grid-template-rows: 8.4cqmin auto; gap: .6cqmin; margin: 0; padding: 1cqmin 1.2cqmin .9cqmin; border: 0; border-radius: 2.8cqmin; font: inherit; color: var(--t0); cursor: pointer; -webkit-tap-highlight-color: transparent; background: color-mix(in srgb, var(--t0) 6%, transparent); box-shadow: inset 0 0 0 .3cqmin color-mix(in srgb, var(--t0) 12%, transparent); } .qh-pz-ding.steckt { background: color-mix(in srgb, var(--acc) 16%, var(--g1)); box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--acc) 58%, transparent); } .qh-pz-ding.an { background: color-mix(in srgb, var(--jetzt) 16%, var(--g1)); box-shadow: inset 0 0 0 .55cqmin var(--jetzt); } .qh-pz-dbild { min-height: 0; display: flex; align-items: center; justify-content: center; color: var(--t0); } .qh-pz-dbild svg { width: 100%; height: 100%; display: block; } .qh-pz-dbild > b { font-family: var(--f-display); font-size: 6cqmin; line-height: 1; color: var(--t2); } .qh-pz-dfuss { display: flex; align-items: baseline; justify-content: space-between; gap: .6cqmin; line-height: 1; } .qh-pz-dfuss b { font-family: var(--f-display); font-weight: 800; font-size: calc(3.2cqmin * var(--schrift, 1)); color: var(--t1); } .qh-pz-dfuss i { font-style: normal; font-family: var(--f-mono); font-weight: 700; font-size: calc(3cqmin * var(--schrift, 1)); color: var(--acc); } .qh-pz-dfuss i.offen { font-family: var(--f-body); font-size: calc(2.6cqmin * var(--schrift, 1)); color: var(--t2); } .qh-pz-ding.an .qh-pz-dfuss i.offen { color: var(--jetzt); } .qh-pz-leiste .qh-p-a-stempel { width: 7.6cqmin; height: 7.6cqmin; } .qh-pz-leiste .qh-p-a-stempel svg { width: 4.6cqmin; height: 4.6cqmin; } .qh-pz-t { font-style: normal; font-size: calc(3.2cqmin * var(--schrift, 1)); font-weight: 700; line-height: 1.25; color: var(--t2); } .qh-pz-leiste[data-zustand="gewaehlt"] .qh-pz-t { color: var(--jetzt); } .qh-pz-leiste[data-zustand="gesendet"] .qh-pz-t { color: var(--t1); } .qh-pz-ding.qh-p-einrasten { animation: qh-p-einrasten var(--d-mittel) var(--k-schnapp); } /* Ein Ding, das seinen Stecker abgeben musste, ist wieder offen: es blinkt. */ .qh-pz-ding.qh-pz-blink { animation: qh-pz-blink 760ms ease-in-out 2; } @keyframes qh-pz-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } /* ---- Zuordnen: das Deck — die Stecker als Tasten ---------------------------- */ .qn-hand.qh-neu .qh-p-deck.qh-pz-deck { min-height: 0; gap: 2.4cqmin; } .qh-pz-stecker { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(12cqmin, auto); gap: 1.6cqmin; } .qh-pz-stecker.qh-pz-zwei { grid-template-columns: 1fr 1fr; } .qh-pz-st .qh-p-kappe { flex-direction: row; align-items: center; gap: 2.4cqmin; padding: 1.2cqmin 2.6cqmin 1.2cqmin 1.6cqmin; } .qh-pz-dose { flex: none; width: 10.4cqmin; height: 8.6cqmin; border-radius: 2.6cqmin; display: grid; place-items: center; background: color-mix(in srgb, var(--acc2) 22%, var(--g1)); box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--acc2) 55%, transparent); } .qh-pz-dose b { font-family: var(--f-mono); font-weight: 700; font-size: calc(3.8cqmin * var(--schrift, 1)); line-height: 1; color: var(--acc); } .qh-pz-st.qh-p-an .qh-pz-dose { background: var(--acc); box-shadow: none; } .qh-pz-st.qh-p-an .qh-pz-dose b { color: var(--auf-acc); } .qn-hand.qh-neu .qh-pz-st-t { flex: 1 1 auto; min-width: 0; font-family: var(--f-display); font-weight: 800; font-size: calc(4.6cqmin * var(--schrift, 1)); line-height: 1.1; letter-spacing: -.01em; color: var(--t0); text-align: left; overflow-wrap: normal; text-wrap: balance; } .qh-pz-st-ding { flex: none; display: flex; align-items: center; gap: .8cqmin; } .qh-pz-st-ding:empty { display: none; } .qh-pz-mini { width: 9.6cqmin; height: 6.4cqmin; display: block; color: var(--t0); } .qh-pz-mini svg { width: 100%; height: 100%; display: block; } .qh-pz-st-ding b { font-family: var(--f-display); font-weight: 800; font-size: calc(3.6cqmin * var(--schrift, 1)); color: var(--acc); } .qh-pz-st.qh-pz-belegt:not(.qh-p-an) .qh-p-kappe { background: linear-gradient(172deg, color-mix(in srgb, var(--acc) 16%, var(--g3)), var(--g2) 72%); } /* Die Tasten der Mehrfachwahl treten nach dem Abschicken zurück — die Stecker nicht: Man liest an ihnen, was man gesteckt hat. */ .qn-hand.qh-neu.qh-p-gesendet .qh-pz-st:not(.qh-p-an) .qh-p-kappe { opacity: 1; } /* Warten: Strom liegt an — durch jede Leitung läuft abwechselnd ein Schein. */ .qh-pz-strom { position: absolute; left: 14cqmin; right: 3cqmin; bottom: .9cqmin; height: .6cqmin; border-radius: 1cqmin; background: var(--acc); opacity: 0; pointer-events: none; } .qh-p-gesendet .qh-pz-belegt .qh-pz-strom { animation: qh-pz-strom 2.4s ease-in-out calc(var(--i, 0) * .8s) infinite; } @keyframes qh-pz-strom { 0%, 100% { opacity: .12; } 50% { opacity: .85; } } .qh-pz-loszahl b { font-family: var(--f-mono); } /* ---- Die Auflösung macht Platz (QN.pultSchauPasse) --------------------------- Stufe 2: Die Plakette wird kleiner (neben Urteil und Punkten steht sie seit 2026-09-23 immer). Stufe 1 und 3 gehören dem Schaufeld der Kategorie. */ .qn-hand.qh-neu.qh-pk2 .qh-p-urteil { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; align-items: center; column-gap: 4.4cqmin; row-gap: .4cqmin; } .qn-hand.qh-neu.qh-pk2 .qh-p-plakette { grid-row: 1 / 3; width: 21cqmin; height: 21cqmin; } .qn-hand.qh-neu.qh-pk2 .qh-p-figur .qn-av { --gr: 14cqmin; } .qn-hand.qh-neu.qh-pk2 .qh-p-siegel { width: 7.6cqmin; height: 7.6cqmin; right: -.6cqmin; } .qn-hand.qh-neu.qh-pk2 .qh-p-siegel svg { width: 4.4cqmin; height: 4.4cqmin; } .qn-hand.qh-neu.qh-pk2 .qh-p-uwort { align-self: end; text-align: left; } .qn-hand.qh-neu.qh-pk2 .qh-p-punkte { align-self: start; text-align: left; } .qn-hand.qh-neu.qh-pk2 .qh-p-ergebnis { gap: 1.4cqmin; padding-top: 1.4cqmin; } /* ---- Grosse Schrift: Luft und Bilder geben zuerst nach ------------------------ */ /* Mit großer Schrift steht alles in einer Zeile: Nummer, Zeichnung, Name, Kabel. Der Zustand steht in der Farbe des Felds und in der Leiste. */ .qn-hand.qh-neu.qh-gross .qh-pz-einzeln { grid-template-columns: auto 15cqmin minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); grid-template-areas: "nr bild name kabel"; align-items: center; padding: 1.4cqmin 2cqmin; } .qn-hand.qh-neu.qh-gross .qh-pz-nr { align-self: center; } .qn-hand.qh-neu.qh-gross .qh-pz-status { display: none; } .qn-hand.qh-neu.qh-gross .qh-pz-bild > svg { max-height: 11cqmin; } .qn-hand.qh-neu.qh-gross .qh-pz-kabel { align-self: center; } .qn-hand.qh-neu.qh-gross .qh-pz-bzbild { width: 9.6cqmin; height: 6cqmin; } /* Noch zu eng: Die Köpfe des Tisches treten zurück (die Zahl bleibt stehen), der Auftrag auch — das Deck erklärt sich selbst. */ .qn-hand.qh-neu.qh-pz-eng .qh-p-sitze, .qn-hand.qh-neu.qh-pz-eng .qh-pz-frage .qh-p-auftrag { display: none; } .qn-hand.qh-neu.qh-gross .qh-pz-kabel { width: 4.4cqmin; height: 8.4cqmin; } .qn-hand.qh-neu.qh-gross .qh-pz-feldplatz { min-height: 26cqmin; } .qn-hand.qh-neu.qh-gross .qh-pz-ding { grid-template-rows: 6.4cqmin auto; } .qn-hand.qh-neu.qh-gross .qh-pz-stecker { grid-auto-rows: minmax(10.6cqmin, auto); gap: 1.2cqmin; } .qn-hand.qh-neu.qh-gross .qh-pz-dose { width: 9cqmin; height: 7.4cqmin; } .qn-hand.qh-neu.qh-gross .qh-fd-kappe { min-height: 12.4cqmin; } /* ---- Ruhe ------------------------------------------------------------------------ */ .qn-hand.qh-neu.qh-ruhig-an .qh-pz-kabel, .qn-hand.qh-neu.qh-ruhig-an .qh-pz-strom, .qn-hand.qh-neu.qh-ruhig-an.qh-p-gesendet .qh-pz-leitungen path { animation: none; } /* ============================================================================ 16 · PULT · GRUPPE PARTY — Lüge, Wer von uns (qn.js, Block „PULT · GRUPPE PARTY") ============================================================================ Was die Partyspiele über die vier Tasten hinaus brauchen: gesperrte Tasten (die eigene Lüge), die Lücke im Satz, das Feld zum Schreiben, die Tipplage über der Tastatur, den Stapel für lange Listen und eine engere Auflösung. Nur Rollenfarben; bewegt wird nur transform/opacity (der Stapel mit `translate`). Grundzustand = Endzustand. */ /* ---- Gesperrte Taste: die eigene Lüge ------------------------------------ */ .qn-hand.qh-neu .qh-p-taste.qh-p-aus { cursor: not-allowed; } .qn-hand.qh-neu .qh-p-taste.qh-p-aus .qh-p-kappe { opacity: .66; background: color-mix(in srgb, var(--t0) 3%, transparent); box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--t0) 16%, transparent); } .qn-hand.qh-neu .qh-p-taste.qh-p-aus .qh-p-marke { background: transparent; color: var(--t2); } .qn-hand.qh-neu .qh-p-taste.qh-p-aus .qh-p-marke b { color: var(--t2); } .qn-hand.qh-neu .qh-p-taste.qh-p-aus .qh-p-txt { color: var(--t1); } .qh-p-zutag { position: relative; z-index: 1; flex: none; align-self: center; display: inline-flex; align-items: center; gap: .8cqmin; margin: 0 auto 2.2cqmin; padding: .8cqmin 1.8cqmin; border-radius: 10cqmin; font-family: var(--f-body); font-size: calc(2.8cqmin * var(--schrift, 1)); font-weight: 800; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; background: color-mix(in srgb, var(--t0) 10%, transparent); color: var(--t1); } .qh-p-zutag svg { width: 3.2cqmin; height: 3.2cqmin; display: block; flex: none; } .qh-p-liste .qh-p-zutag { order: 3; margin: 0; } /* In den Zeilen der Partyspiele hält die Kappe rechts Platz für das Siegel (Haken, Herz) — sonst läge es auf dem Ende einer langen Zeile. */ .qh-p-tasten.qh-p-kannstapeln.qh-p-liste .qh-p-kappe { padding-right: 10.4cqmin; } .qh-p-tasten.qh-p-kannstapeln.qh-p-liste .qh-p-aus .qh-p-kappe { padding-right: 2.6cqmin; } /* ---- Die Lücke im Satz (Lüge) ------------------------------------------- */ .qh-p-luecke { padding: 0 .16em; margin: 0 .04em; border-radius: .2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: color-mix(in srgb, var(--jetzt) 16%, transparent); box-shadow: inset 0 -.08em 0 var(--jetzt); color: var(--t0); } .qh-p-luecke:empty::before { content: attr(data-leer); color: var(--jetzt); letter-spacing: .04em; } .qh-p-luecke:empty { animation: qh-p-lueckeatmet 1.8s ease-in-out infinite; } @keyframes qh-p-lueckeatmet { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } .qn-hand.qh-neu.qh-ruhig-an .qh-p-luecke { animation: none; } .qh-p-gesendet .qh-p-luecke:not(:empty), .qh-p-luecke.qh-p-fest { background: color-mix(in srgb, var(--acc) 24%, transparent); box-shadow: inset 0 -.08em 0 var(--acc); } /* Sichtschutz: Der Nachbar liest die eigene Lüge nicht mit. */ .qh-p-sicht .qh-p-luecke:not(:empty) { color: transparent; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--t0) 22%, transparent) 0 .18em, color-mix(in srgb, var(--t0) 8%, transparent) .18em .36em); } /* ---- Anzeige: Zeichen statt Tastenmarke ----------------------------------- */ .qh-p-a-zeichen { flex: none; width: 10cqmin; height: 10cqmin; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--t0) 9%, transparent); color: var(--t1); } .qh-p-a-zeichen svg { width: 5.4cqmin; height: 5.4cqmin; display: block; } .qh-p-a-innen[data-zustand="gewaehlt"] .qh-p-a-zeichen { background: var(--jetzt); color: var(--auf-jetzt); } .qh-p-a-innen[data-zustand="gesendet"] .qh-p-a-zeichen { background: var(--acc); color: var(--auf-acc); } .qh-p-a-figur { flex: none; display: grid; place-items: center; } .qh-p-los-zeichen { padding: .9cqmin 1.3cqmin; } .qh-p-los-zeichen svg { width: 4.6cqmin; height: 4.6cqmin; display: block; } /* ---- Das Feld: schreiben auf der Kappe ------------------------------------ */ .qh-p-feldplatz { flex: 1 1 auto; min-height: 0; display: flex; } .qh-p-feld { position: relative; flex: 1 1 auto; min-width: 0; min-height: 28cqmin; display: flex; flex-direction: column; gap: 1.4cqmin; margin-bottom: 1.3cqmin; padding: 3cqmin 3.8cqmin 2.8cqmin; border-radius: 4.6cqmin; cursor: text; background: linear-gradient(172deg, var(--g3), var(--g2) 64%); box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--t0) 11%, transparent), inset 0 .6cqmin 0 color-mix(in srgb, var(--t0) 7%, transparent), 0 1.3cqmin 0 color-mix(in srgb, var(--g0) 78%, var(--acc2)); } .qh-p-feld:focus-within { box-shadow: inset 0 0 0 .55cqmin var(--jetzt), 0 1.3cqmin 0 color-mix(in srgb, var(--g0) 78%, var(--acc2)), 0 0 5cqmin color-mix(in srgb, var(--jetzt) 26%, transparent); } .qh-p-feld[data-zustand="gesendet"]:not(:focus-within) { background: linear-gradient(172deg, color-mix(in srgb, var(--acc) 30%, var(--g3)), color-mix(in srgb, var(--acc) 14%, var(--g2)) 72%); box-shadow: inset 0 0 0 .55cqmin var(--acc), 0 1.3cqmin 0 color-mix(in srgb, var(--g0) 78%, var(--acc2)); } .qh-p-f-kopf { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 2cqmin; } .qh-p-f-name { min-width: 0; display: inline-flex; align-items: center; gap: 1cqmin; font-size: calc(3cqmin * var(--schrift, 1)); font-weight: 800; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--t2); } .qh-p-f-name svg { flex: none; width: 3.8cqmin; height: 3.8cqmin; display: block; } .qh-p-f-zahl { flex: none; font-family: var(--f-mono); font-weight: 700; font-size: calc(3cqmin * var(--schrift, 1)); color: var(--t2); white-space: nowrap; } .qh-p-f-zahl b { color: var(--t1); } .qh-p-f-knapp .qh-p-f-zahl b { color: var(--jetzt); } /* Die Kappe ist ein Zettel: Die Linien laufen im Takt der Zeilenhoehe mit (auch wenn langer Text kleiner wird) — die Flaeche sagt „hier schreiben", statt leer zu stehen. */ .qn-hand.qh-neu .qh-p-feld .qh-p-tipp { flex: 1 1 auto; min-height: 0; width: 100%; margin: 0; padding: .06em 0 0; border: 0; outline: 0; resize: none; color: var(--t0); caret-color: var(--jetzt); overflow: hidden; font-family: var(--f-display); font-weight: 800; line-height: 1.3; letter-spacing: -.01em; font-size: max(16px, calc(6.4cqmin * var(--schrift, 1))); background: repeating-linear-gradient(180deg, transparent 0 calc(1.3em - .3cqmin), color-mix(in srgb, var(--t0) 13%, transparent) calc(1.3em - .3cqmin) 1.3em); background-attachment: local; } .qn-hand.qh-neu .qh-p-feld .qh-p-tipp::placeholder { color: color-mix(in srgb, var(--t0) 34%, transparent); opacity: 1; } .qh-p-f-fuss { flex: none; display: flex; align-items: center; gap: 2.2cqmin; } .qh-p-f-linie { flex: 0 0 20cqmin; display: block; height: 1.2cqmin; border-radius: 10cqmin; overflow: hidden; background: color-mix(in srgb, var(--t0) 10%, transparent); } .qh-p-f-linie > i { display: block; height: 100%; border-radius: inherit; background: var(--acc); transform-origin: 0 50%; transform: scaleX(var(--anteil, 0)); transition: transform var(--d-kurz) var(--k-ein); } .qh-p-f-knapp .qh-p-f-linie > i { background: var(--jetzt); } .qh-p-f-hilfe { flex: 1 1 auto; min-width: 0; font-size: calc(3cqmin * var(--schrift, 1)); font-weight: 600; line-height: 1.25; color: var(--t2); } .qh-p-f-decke { position: absolute; inset: 0; z-index: 2; border-radius: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2cqmin; text-align: center; background: color-mix(in srgb, var(--acc) 26%, var(--g2)); color: var(--t0); opacity: 0; pointer-events: none; transition: opacity var(--d-mittel) var(--k-ein); } .qh-p-f-decke svg { width: 8cqmin; height: 8cqmin; display: block; } .qh-p-f-decke b { font-family: var(--f-display); font-weight: 800; font-size: calc(5cqmin * var(--schrift, 1)); line-height: 1.1; } .qh-p-f-decke em { font-style: normal; font-size: calc(3.2cqmin * var(--schrift, 1)); font-weight: 600; color: var(--t1); } .qh-p-sicht .qh-p-f-decke { opacity: 1; pointer-events: auto; } .qh-p-feld.qh-p-nein { animation: qh-p-nein 320ms ease-in-out; } /* Eine Zeile (ein Wort, Raritäten): das Feld macht dem Deck darüber Platz. */ .qh-p-feldplatz.qh-p-feld1 { flex: none; } .qh-p-feld1 .qh-p-feld { min-height: 0; padding: 2.2cqmin 3.6cqmin 2.2cqmin; gap: 1cqmin; } .qn-hand.qh-neu .qh-p-feld1 .qh-p-feld .qh-p-tipp { flex: none; height: 1.3em; } .qh-neu .qh-p-feldplatz { animation: qh-p-pop 420ms var(--k-schnapp) 380ms both; } /* ---- Die Tipplage: Feld und Knopf über der Tastatur ---------------------- */ .qn-hand.qh-neu.qh-p-tippt .qh-p-tisch, .qn-hand.qh-neu.qh-p-tippt .qh-p-anzeige { display: none; } .qn-hand.qh-neu.qh-p-tippt .qh-p-oben { gap: 1.6cqmin; padding-top: 2.4cqmin; } .qn-hand.qh-neu.qh-p-tippt .qh-p-schirm { padding-top: 1.8cqmin; padding-bottom: 1.4cqmin; } .qn-hand.qh-neu.qh-p-tippt .qh-p-fragefeld { min-height: 10cqmin; padding: 2.4cqmin 3.4cqmin; } .qn-hand.qh-neu.qh-p-tippt .qh-p-deck { min-height: 0; gap: 2cqmin; padding-bottom: 2.4cqmin; } .qn-hand.qh-neu.qh-p-tippt .qh-p-feld { min-height: 0; } /* ---- Der Stapel: eine Karte groß, blättern ------------------------------- */ .qn-hand.qh-neu.qh-p-mitliste .qh-p-fragefeld { min-height: 24cqmin; } .qh-p-tasten.qh-p-stapel { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); grid-template-areas: "s"; } .qh-p-stapel .qh-p-platz { grid-area: s; visibility: hidden; translate: calc(var(--rel, 0) * 104%) 0; transition: translate var(--d-mittel) var(--k-ein), visibility 0s linear var(--d-mittel); } .qh-p-stapel .qh-p-platz.qh-p-jetzt { visibility: visible; transition: translate var(--d-mittel) var(--k-ein), visibility 0s; } /* Die Karte des Stapels: Marke oben, der Text groß in der Mitte (pultPasse gibt ihm die größte Schrift, die passt), die Sperre darunter. */ .qh-p-tasten.qh-p-stapel .qh-p-kappe { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 3cqmin 10.4cqmin 3cqmin 3.6cqmin; gap: 1.6cqmin; } .qh-p-tasten.qh-p-stapel .qh-p-aus .qh-p-kappe { padding-right: 3.6cqmin; } .qh-p-tasten.qh-p-stapel .qh-p-marke { align-self: flex-start; } .qh-p-tasten.qh-p-stapel .qh-p-zutag { align-self: flex-start; } .qn-hand.qh-neu .qh-p-stapel .qh-p-txt { flex: 1 1 0; min-height: 0; display: flex; align-items: center; font-size: calc(6.8cqmin * var(--schrift, 1)); line-height: 1.12; } .qh-p-liste.qh-p-stapel .qh-p-schloss { top: 2.4cqmin; margin-top: 0; } .qh-p-blaettern { flex: none; display: flex; align-items: center; gap: 2.4cqmin; } .qh-p-blaettern[hidden] { display: none; } /* 14 × 14 cqmin: auch auf dem kleinsten Gerät (360 breit, die Hand auf 92 % verkleinert) noch 48 × 48 px — vorher 11 cqmin hoch, dort 40 px (Grenzen-Messung 2026-09-25: die Lüge blättert schon ab fünf, sechs Spielern). */ .qh-p-blatt { flex: none; width: 14cqmin; height: 14cqmin; margin: 0; padding: 0; border: 0; border-radius: 3.6cqmin; display: grid; place-items: center; background: var(--g2); color: var(--t0); cursor: pointer; box-shadow: inset 0 0 0 .35cqmin color-mix(in srgb, var(--t0) 12%, transparent); -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .qh-p-blatt svg { width: 6cqmin; height: 6cqmin; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .qh-p-blatt:disabled { opacity: .32; cursor: default; } .qh-p-blatt:not(:disabled):active { transform: scale(.94); } .qh-p-bl-mitte { flex: 1 1 auto; min-width: 0; display: grid; justify-items: center; gap: 1.1cqmin; } .qh-p-bl-zahl { font-family: var(--f-mono); font-weight: 700; font-size: calc(3.6cqmin * var(--schrift, 1)); line-height: 1; color: var(--t1); } .qh-p-bl-zahl b { color: var(--t0); } .qh-p-bl-punkte { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1cqmin; } .qh-p-bl-punkte i { display: block; width: 1.8cqmin; height: 1.8cqmin; border-radius: 50%; background: color-mix(in srgb, var(--t0) 20%, transparent); transition: transform var(--d-kurz) var(--k-schnapp); } .qh-p-bl-punkte i.an { background: var(--acc); transform: scale(1.3); } /* ---- Die Auflösung: enger, bevor sie überläuft --------------------------- */ .qh-p-vz.qh-p-weg { display: none; } .qn-hand.qh-neu.qh-gross .qh-p-neben, .qn-hand.qh-neu.qh-gross .qh-p-f-hilfe { display: none; } .qn-hand.qh-neu.qh-gross .qh-p-feld { min-height: 20cqmin; } .qh-p-tag-still { background: color-mix(in srgb, var(--t0) 13%, transparent); color: var(--t0); } .qh-p-tag-acc { background: var(--acc); color: var(--auf-acc); } .qh-p-rest { min-height: 0; } .qh-p-rest .qh-p-vz-t { font-family: var(--f-body); font-weight: 600; font-size: calc(3.3cqmin * var(--schrift, 1)); color: var(--t1); } .qn-hand.qh-neu.qh-p-eng .qh-p-ergebnis { gap: 1.6cqmin; padding-top: 1.4cqmin; } .qn-hand.qh-neu.qh-p-eng .qh-p-plakette { width: 22cqmin; height: 22cqmin; } .qn-hand.qh-neu.qh-p-eng .qh-p-figur .qn-av { --gr: 15cqmin; } .qn-hand.qh-neu.qh-p-eng .qh-p-siegel { width: 8cqmin; height: 8cqmin; } .qn-hand.qh-neu.qh-p-eng .qh-p-siegel svg { width: 4.6cqmin; height: 4.6cqmin; } .qn-hand.qh-neu.qh-p-eng .qh-p-urteil { row-gap: 1cqmin; } .qn-hand.qh-neu.qh-p-eng .qh-p-vert { gap: .9cqmin; } .qn-hand.qh-neu.qh-p-eng .qh-p-vz { min-height: 9cqmin; padding-top: 1cqmin; padding-bottom: 1cqmin; } /* Noch enger: die Plakette (links neben Urteil und Punkten) wird kleiner. */ .qn-hand.qh-neu.qh-p-enger .qh-p-urteil { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "plakette wort" "plakette punkte"; justify-items: start; align-items: center; column-gap: 4cqmin; row-gap: .6cqmin; } .qn-hand.qh-neu.qh-p-enger .qh-p-plakette { grid-area: plakette; width: 19cqmin; height: 19cqmin; } .qn-hand.qh-neu.qh-p-enger .qh-p-figur .qn-av { --gr: 13cqmin; } .qn-hand.qh-neu.qh-p-enger .qh-p-uwort { grid-area: wort; text-align: left; font-size: calc(5cqmin * var(--schrift, 1)); } .qn-hand.qh-neu.qh-p-enger .qh-p-punkte { grid-area: punkte; justify-items: start; } .qn-hand.qh-neu.qh-p-enger .qh-p-siegel { width: 7.2cqmin; height: 7.2cqmin; right: -.6cqmin; } .qn-hand.qh-neu.qh-p-enger .qh-p-siegel svg { width: 4.2cqmin; height: 4.2cqmin; } /* Am engsten: die Zeilen geben ihre Balken ab und ihrem Text die Breite. */ .qn-hand.qh-neu.qh-p-engst .qh-p-vz { column-gap: 1.2cqmin; min-height: 0; padding: .9cqmin 1.6cqmin .9cqmin 1.4cqmin; } .qn-hand.qh-neu.qh-p-engst .qh-p-vz-bahn { display: none; } .qn-hand.qh-neu.qh-p-engst .qh-p-vz-mini { width: 6cqmin; height: 6cqmin; } .qn-hand.qh-neu.qh-p-engst .qh-p-vz-t { font-size: calc(3.4cqmin * var(--schrift, 1)); } .qn-hand.qh-neu.qh-p-engst .qh-p-schau { gap: 1cqmin; } /* ============================================================================ DIE LEBENDIGE SZENE (qn.js, QN.szene) — ein ruhiges Bild, darüber Schichten, die sich bewegen. Nur transform und opacity; keine Unschärfe- Filter in Bewegung (weiche Kanten kommen aus Verläufen). Farben aus den Rollen, damit jedes Set sein Licht mitbringt. ============================================================================ */ .qn-szene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .qn-szene > * { position: absolute; pointer-events: none; } .qsz-bild { inset: -4%; background: var(--kulisse-bild, none) left top / cover no-repeat, var(--g0); filter: hue-rotate(var(--kulisse-dreh, 0deg)); animation: qsz-atmen 26s ease-in-out infinite alternate; will-change: transform; } @keyframes qsz-atmen { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.06) translate(1.4%, 1.1%); } } /* Der Schleier hält Kopf und Mitte lesbar — er bewegt sich nicht. */ .qsz-schleier { inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--g0) 82%, transparent) 0, color-mix(in srgb, var(--g0) 40%, transparent) 9%, transparent 20%), radial-gradient(85% 85% at 64% 60%, color-mix(in srgb, var(--g0) 60%, transparent), transparent 80%), linear-gradient(0deg, color-mix(in srgb, var(--g0) 45%, transparent) 0, transparent 22%); } /* --- Gestalt „buehne": Lichtkegel, Staub, eine atmende Quelle ------------- */ .qsz-kegel { left: 2%; top: -6%; width: var(--breite, 22%); height: 170%; transform-origin: 50% 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--jetzt) 30%, transparent) 38%, color-mix(in srgb, #fff 26%, var(--acc) 30%) 50%, color-mix(in srgb, var(--acc2) 26%, transparent) 62%, transparent); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .55) 30%, transparent 72%); mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .55) 30%, transparent 72%); mix-blend-mode: screen; opacity: .55; animation: qsz-schwenk var(--dauer, 14s) ease-in-out var(--verz, 0s) infinite alternate; will-change: transform; } @keyframes qsz-schwenk { from { transform: rotate(var(--von, -40deg)); } to { transform: rotate(var(--bis, -24deg)); } } .qsz-staub { inset: 0; } .qsz-staub i { width: .55cqmin; height: .55cqmin; border-radius: 50%; opacity: 0; background: radial-gradient(circle, #fff 0, color-mix(in srgb, var(--jetzt) 70%, #fff) 45%, transparent 70%); transform: scale(var(--s, 1)); animation: qsz-schweben var(--d, 10s) ease-in-out var(--v, 0s) infinite; will-change: transform, opacity; } @keyframes qsz-schweben { 0% { opacity: 0; transform: translate(0, 0) scale(var(--s, 1)); } 20% { opacity: .9; } 55% { opacity: .35; } 80% { opacity: .8; } 100% { opacity: 0; transform: translate(var(--dx, 4cqmin), -9cqmin) scale(var(--s, 1)); } } .qsz-quelle { left: -14%; top: -22%; width: 46%; height: 60%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, #fff 55%, var(--jetzt)), color-mix(in srgb, var(--acc) 40%, transparent) 40%, transparent 72%); mix-blend-mode: screen; opacity: .5; animation: qsz-puls 7s ease-in-out infinite; will-change: transform, opacity; } @keyframes qsz-puls { 0%, 100% { opacity: .38; transform: scale(1); } 50% { opacity: .62; transform: scale(1.08); } } /* --- Gestalt „rennen": Lichtspuren, Funken, Flutlicht, Dunst -------------- */ .qsz-spur { left: -70%; width: 70%; height: var(--dicke, .3cqmin); border-radius: 99px; opacity: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc) 80%, transparent) 60%, color-mix(in srgb, #fff 70%, var(--acc2)) 96%, transparent); box-shadow: 0 0 1.4cqmin color-mix(in srgb, var(--acc) 70%, transparent); transform: rotate(var(--w, -18deg)) translateX(0); animation: qsz-vorbei var(--dauer, 7s) cubic-bezier(.55, 0, .25, 1) var(--verz, 0s) infinite; will-change: transform, opacity; } @keyframes qsz-vorbei { 0% { opacity: 0; transform: rotate(var(--w, -18deg)) translateX(0); } 3% { opacity: .95; } 16% { opacity: .9; transform: rotate(var(--w, -18deg)) translateX(260%); } 19%, 100% { opacity: 0; transform: rotate(var(--w, -18deg)) translateX(260%); } } .qsz-funken { left: 0; bottom: 0; width: 100%; height: 100%; } .qsz-funken i { bottom: -2%; width: .5cqmin; height: .5cqmin; border-radius: 50%; opacity: 0; background: radial-gradient(circle, #fff 0, color-mix(in srgb, var(--acc2) 85%, #fff) 40%, transparent 70%); box-shadow: 0 0 .9cqmin color-mix(in srgb, var(--acc2) 80%, transparent); transform: scale(var(--s, 1)); animation: qsz-steigen var(--d, 4s) cubic-bezier(.2, .6, .4, 1) var(--v, 0s) infinite; will-change: transform, opacity; } @keyframes qsz-steigen { 0% { opacity: 0; transform: translate(0, 0) scale(var(--s, 1)); } 10% { opacity: 1; } 70% { opacity: .7; } 100% { opacity: 0; transform: translate(var(--dx, 10cqmin), calc(var(--dy, 40cqmin) * -1)) scale(calc(var(--s, 1) * .4)); } } .qsz-flut { left: -8%; top: -18%; width: 52%; height: 48%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, #fff 70%, var(--acc2)), color-mix(in srgb, var(--acc2) 30%, transparent) 38%, transparent 70%); mix-blend-mode: screen; opacity: .45; animation: qsz-flackern 5.2s steps(1, end) infinite; will-change: opacity; } @keyframes qsz-flackern { 0%, 100% { opacity: .45; } 41% { opacity: .62; } 43% { opacity: .38; } 45% { opacity: .58; } 71% { opacity: .5; } } .qsz-dunst { left: -20%; top: 30%; width: 90%; height: 60%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 16%, transparent), transparent 70%); opacity: .7; animation: qsz-ziehen 30s ease-in-out infinite alternate; will-change: transform; } @keyframes qsz-ziehen { from { transform: translate(0, 0) scale(1); } to { transform: translate(18%, -6%) scale(1.15); } } /* Die Lichtbögen: Kreise mit Radius --r, oben bei --oben, Mittelpunkt bei x = 50 cqmin. Sichtbar ist nur der obere linke Teil (Maske), wo im Bild vorher die roten Bögen lagen. DIE BAHN hält jeden Bogen samt Strich in einem Kasten, der nur so groß ist wie das Sichtbare — Glut, Strich und Nachleuchten eingeschlossen: links bis zum Rand der Szene, rechts bis dort, wo der Strich verlischt (Mittelpunkt + ¼ r), oben 6 cqmin Luft, unten bis unter den Schwanz des Strichs beim Start. Außerhalb malt nichts, also bleiben die Kacheln der Ebenen darin leer. Der Kasten selbst bewegt sich nicht. */ /* Verschieben (etwa der Trailer, der die Bögen tiefer legt): --qsz-dx/--qsz-dy an der Bahn — sie wächst mit, der Kasten beginnt weiter links oben bei 0. */ .qsz-bahn { left: 0; top: calc(var(--oben) - 6cqmin + var(--qsz-dy, 0cqmin)); width: calc(50cqmin + var(--r) * .26 + 6cqmin + var(--qsz-dx, 0cqmin)); height: calc(var(--r) * .3 + 26cqmin); overflow: hidden; } .qsz-bahn > * { position: absolute; pointer-events: none; } /* Die Glut: EINE Ebene je Bahn (nur Deckkraft), so groß wie die Bahn — sie schneidet selbst ab (overflow), sonst reichte die Ebene so weit wie der Kreis darin, und Chromium malte ihre Kacheln auf Vorrat weit über das Sichtbare hinaus (gemessen: 115 MB für die drei Bögen). Der Bogen darin ist keine eigene Ebene, seine Maske wird mitgemalt. */ .qsz-glut { inset: 0; overflow: hidden; opacity: .9; animation: qsz-gluehen 5s ease-in-out calc(var(--j) * -1.7s) infinite; will-change: opacity; } .qsz-bogen { position: absolute; left: calc(50cqmin - var(--r) + var(--qsz-dx, 0cqmin)); top: 6cqmin; width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%; border-top: 1.1cqmin solid color-mix(in srgb, var(--acc) 82%, #fff); box-shadow: 0 -1cqmin 3.6cqmin -.2cqmin color-mix(in srgb, var(--acc) 85%, transparent), inset 0 1.2cqmin 3.2cqmin -.4cqmin color-mix(in srgb, var(--acc) 70%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(var(--r) * .55), transparent calc(var(--r) * 1.15)); mask-image: linear-gradient(90deg, #000 0, #000 calc(var(--r) * .55), transparent calc(var(--r) * 1.15)); } /* LEISTUNG (2026-10-07): data-j statt [style*=…]. Eine Regel, die das style-Attribut liest, lässt den Browser bei JEDEM Schreiben von el.style (jede Figur, jedes Bild) Invalidierungen ansetzen — auf der ganzen Seite. */ .qsz-bogen[data-j="1"] { border-top-width: .7cqmin; } .qsz-bogen[data-j="2"] { border-top-width: .45cqmin; } @keyframes qsz-gluehen { 0%, 100% { opacity: .65; } 50% { opacity: 1; } } /* Der Strich, der über den Bogen rast: sitzt oben auf dem Kreis und dreht sich um dessen Mitte — so fährt er genau die Bahn. Früher drehte sich der ganze Kreis (eine Ebene von Kreisgröße) samt Maske. Die Maske lag immer gleich auf dem Strich (am Schwanz --kt, am Kopf ¼ — das steckt jetzt in seinen Farben) und schnitt ihn an der Kreislinie ab (vom Strich blieb nur, was im Kreis liegt — das tut jetzt clip-path, derselbe Kreis). Jetzt dreht sich nur ein kleiner Kasten um Strich und Nachleuchten: 32 × 6 cqmin, die Kreismitte liegt r unter seiner Oberkante (transform-origin). */ .qsz-komet { position: absolute; left: calc(50cqmin - 30cqmin + var(--qsz-dx, 0cqmin)); top: 3cqmin; width: 32cqmin; height: 6cqmin; transform-origin: 30cqmin calc(3cqmin + var(--r)); clip-path: circle(var(--r) at 30cqmin calc(3cqmin + var(--r))); transform: rotate(-38deg); animation: qsz-rasen var(--dauer, 8s) cubic-bezier(.5, 0, .2, 1) var(--verz, 0s) infinite; will-change: transform, opacity; } .qsz-komet::before { content: ''; position: absolute; left: 2cqmin; top: 2.4cqmin; width: 28cqmin; height: 1.3cqmin; border-radius: 99px; --k55: calc(var(--kt) + (.25 - var(--kt)) * .55); --k96: calc(var(--kt) + (.25 - var(--kt)) * .96); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc) calc(90% * var(--k55)), transparent) 55%, color-mix(in srgb, #fff calc(100% * var(--k96)), transparent) 96%, transparent); box-shadow: 0 0 2cqmin color-mix(in srgb, var(--acc) calc(85% * (var(--kt) + .25) / 2), transparent); } @keyframes qsz-rasen { 0% { transform: rotate(-40deg); opacity: 0; } 4% { opacity: 1; } 24% { transform: rotate(14deg); opacity: 1; } 27%, 100% { transform: rotate(14deg); opacity: 0; } } /* Die Flutlicht-Lampen oben links — eine Reihe, die leise flackert. */ .qsz-lampen { left: 1%; top: 2%; width: 26%; height: 8%; } .qsz-lampen i { position: absolute; top: calc(var(--l) * 3%); left: calc(var(--l) * 18%); width: 2.6cqmin; height: 2.6cqmin; border-radius: 50%; background: radial-gradient(circle, #fff 0, color-mix(in srgb, #fff 60%, var(--acc2)) 30%, transparent 70%); box-shadow: 0 0 3cqmin 1cqmin color-mix(in srgb, var(--acc2) 45%, transparent); animation: qsz-flackern 4.6s steps(1, end) var(--fv, 0s) infinite; will-change: opacity; } /* --- Gestalt „arcade": Rastergitter, Horizont, Pixel, Sterne, Röhre ------ */ /* Die Fläche des Gitters ist geneigt (perspective + rotateX) und steht still; bewegt wird nur das Gitter darin, um genau eine Masche (12 cqmin) — dann sieht es aus wie vorher, und die Schleife fällt nicht auf. Zum Horizont hin läuft das Gitter unter einem RUHENDEN Verlauf aus (.qsz-ferne, wie im Plakat) — keine Maske über einer bewegten Ebene. */ .qsz-boden { left: -12%; right: -12%; top: 60%; bottom: -34%; overflow: hidden; transform: perspective(58cqmin) rotateX(64deg); transform-origin: 50% 0; } .qsz-ferne { position: absolute; inset: 0; background: linear-gradient(180deg, var(--g0) 0, color-mix(in srgb, var(--g0) 55%, transparent) 16%, transparent 36%); } .qsz-gitter { position: absolute; left: 0; right: 0; top: -12cqmin; bottom: 0; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--acc) 72%, transparent) 0 .4cqmin, transparent .4cqmin 12cqmin), repeating-linear-gradient(180deg, color-mix(in srgb, var(--acc2) 62%, transparent) 0 .4cqmin, transparent .4cqmin 12cqmin); animation: qsz-gitterfahrt 2.6s linear infinite; will-change: transform; } @keyframes qsz-gitterfahrt { from { transform: translateY(0); } to { transform: translateY(12cqmin); } } .qsz-horizont { left: 0; right: 0; top: 60%; height: 16cqmin; margin-top: -8cqmin; background: linear-gradient(180deg, transparent 49%, color-mix(in srgb, #fff 40%, var(--acc2)) 49.5%, color-mix(in srgb, #fff 40%, var(--acc2)) 50.5%, transparent 51%), radial-gradient(60% 50% at 50% 50%, color-mix(in srgb, var(--acc2) 42%, transparent), transparent 72%); opacity: .7; animation: qsz-puls 8s ease-in-out infinite; will-change: transform, opacity; } .qsz-sterne { left: 0; right: 0; top: 0; height: 60%; } .qsz-sterne i { position: absolute; width: .55cqmin; height: .55cqmin; background: var(--t0); opacity: .15; transform: scale(var(--s, 1)); animation: qsz-funkeln var(--d, 4s) ease-in-out var(--v, 0s) infinite; will-change: opacity; } @keyframes qsz-funkeln { 0% { opacity: .15; } 30% { opacity: .85; } 45% { opacity: .3; } 70% { opacity: .65; } 100% { opacity: .15; } } .qsz-pixel { inset: 0; } .qsz-pixel i { position: absolute; bottom: -3%; width: 1.1cqmin; height: 1.1cqmin; background: var(--ton, var(--acc)); opacity: 0; box-shadow: 0 0 1.4cqmin color-mix(in srgb, var(--ton, var(--acc)) 70%, transparent); transform: scale(var(--s, 1)); animation: qsz-pixelsteigen var(--d, 8s) steps(18, end) var(--v, 0s) infinite; will-change: transform, opacity; } @keyframes qsz-pixelsteigen { 0% { opacity: 0; transform: translateY(0) scale(var(--s, 1)); } 12% { opacity: .9; } 72% { opacity: .55; } 100% { opacity: 0; transform: translateY(calc(var(--dy, 40cqmin) * -1)) scale(var(--s, 1)); } } .qsz-zeilen { inset: 0; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .2) 0 .22cqmin, transparent .22cqmin .66cqmin); opacity: .6; } .qsz-strahl { left: 0; right: 0; top: -22%; height: 22%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--acc) 9%, transparent) 70%, color-mix(in srgb, #fff 9%, transparent) 92%, transparent); animation: qsz-strahl 11s linear infinite; will-change: transform; } @keyframes qsz-strahl { from { transform: translateY(0); } to { transform: translateY(560%); } } /* --- Gestalt „winter": Schnee, Lichterkette, Kerzenlicht, Sternschnuppe ---- */ /* Warmes Licht unten links, als läge dort eine Kerze — es atmet langsam. */ .qsz-kerze { left: -12%; bottom: -26%; width: 52%; height: 62%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, #fff 45%, var(--acc2)), color-mix(in srgb, var(--acc2) 32%, transparent) 40%, transparent 72%); mix-blend-mode: screen; opacity: .42; animation: qsz-kerze 6.5s ease-in-out infinite; will-change: transform, opacity; } @keyframes qsz-kerze { 0%, 100% { opacity: .36; transform: scale(1); } 45% { opacity: .5; transform: scale(1.05); } 70% { opacity: .42; transform: scale(1.02); } } /* Ein grüner Dunst in der Tiefe, der kaum merklich zieht. */ .qsz-nebel { right: -20%; top: 18%; width: 80%; height: 60%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 18%, transparent), transparent 70%); opacity: .8; animation: qsz-ziehen 34s ease-in-out infinite alternate; will-change: transform; } /* Schnee: jede Flocke fällt mit leichtem Seitenwind; drei Tiefen über Größe (--s), Tempo (--d) und Deckkraft (--o). */ .qsz-schnee { inset: 0; } .qsz-schnee i { position: absolute; top: -4%; width: 1cqmin; height: 1cqmin; border-radius: 50%; opacity: 0; background: radial-gradient(circle, #fff 0, color-mix(in srgb, #fff 70%, var(--acc2)) 35%, transparent 70%); transform: translate3d(0, 0, 0) scale(var(--s, 1)); animation: qsz-fallen var(--d, 14s) linear var(--v, 0s) infinite; will-change: transform, opacity; } @keyframes qsz-fallen { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(var(--s, 1)); } 8% { opacity: var(--o, .6); } 50% { transform: translate3d(calc(var(--dx, 4cqmin) * .6), 56cqh, 0) scale(var(--s, 1)); } 90% { opacity: var(--o, .6); } 100% { opacity: 0; transform: translate3d(var(--dx, 4cqmin), 112cqh, 0) scale(var(--s, 1)); } } /* Die Lichterkette oben links: der Draht steht, die Birnen funkeln leise (Deckkraft, keine Blitze — höchstens ein Wechsel alle drei Sekunden). */ .qsz-kette { left: 0; top: 0; width: 68cqmin; height: 16cqmin; } .qsz-kette > * { position: absolute; } /* Die Maße gehören zur Birnen-Rechnung in qn.js (SZENE_SCHICHTEN.winter). */ .qsz-draht { left: -2cqmin; top: .4cqmin; width: 68.2cqmin; height: 12.3cqmin; border-bottom: .3cqmin solid color-mix(in srgb, var(--acc) 50%, var(--g3)); border-radius: 0 0 50% 50% / 0 0 100% 100%; } .qsz-birne { width: 1.5cqmin; height: 2.1cqmin; margin-left: -.75cqmin; border-radius: 50% 50% 46% 46% / 42% 42% 58% 58%; background: radial-gradient(circle at 38% 30%, #fff, color-mix(in srgb, #fff 30%, var(--ton)) 30%, var(--ton) 70%); box-shadow: 0 0 1.6cqmin .3cqmin color-mix(in srgb, var(--ton) 70%, transparent); opacity: .9; animation: qsz-birne var(--fd, 4s) ease-in-out var(--fv, 0s) infinite; will-change: opacity; } @keyframes qsz-birne { 0%, 100% { opacity: .95; } 40% { opacity: .55; } 60% { opacity: .9; } } /* Die Sternschnuppe: ein Strich, der alle neun Sekunden einmal über den Himmel zieht. */ .qsz-schnuppe { left: 18%; top: 8%; width: 22cqmin; height: .35cqmin; border-radius: 99px; opacity: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc2) 60%, transparent) 70%, #fff); transform: rotate(14deg) translateX(0); animation: qsz-schnuppe 9s cubic-bezier(.4, 0, .2, 1) 2.5s infinite; will-change: transform, opacity; } @keyframes qsz-schnuppe { 0% { opacity: 0; transform: rotate(14deg) translateX(0); } 2% { opacity: .9; } 9% { opacity: 0; transform: rotate(14deg) translateX(46cqmin); } 100% { opacity: 0; transform: rotate(14deg) translateX(46cqmin); } } /* DER ZWEITE HÖHEPUNKT (Weihnachten, Finale): Wenn der Pokal kommt (.sp-e-jubel an .sp-ende, spiel.js), läuft zweimal eine Lichterwelle durch die Kette — Birne für Birne blitzt sie auf —, und aus dem Himmel fällt EINMAL ein Sternregen aus goldenen Sternen und hellen Flocken. Danach steht das Bild (Finale: „ab hier blinkt nichts mehr“). Nur transform und opacity. */ .qsz-sternregen { inset: 0; overflow: hidden; } .qsz-sternregen i { position: absolute; top: -6%; width: var(--gr, 2cqmin); height: var(--gr, 2cqmin); opacity: 0; } .qsz-sternregen .stern { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); background: radial-gradient(circle at 50% 45%, #fff 0 12%, color-mix(in srgb, #fff 35%, var(--acc2)) 30%, var(--acc2) 70%); } .qsz-sternregen .flocke { border-radius: 50%; width: calc(var(--gr, 2cqmin) * .6); height: calc(var(--gr, 2cqmin) * .6); background: radial-gradient(circle, #fff 0, color-mix(in srgb, #fff 70%, var(--acc2)) 40%, transparent 72%); } .sp-e-jubel > .qn-szene[data-gestalt=winter] .qsz-sternregen i { animation: qsz-sternregen var(--dauer, 3s) cubic-bezier(.3, .1, .5, 1) var(--v, 0ms) 1 both; } @keyframes qsz-sternregen { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scale(.6); } 8% { opacity: 1; transform: translate3d(0, 6cqh, 0) rotate(calc(var(--dr, 90deg) * .1)) scale(1.1); } 80% { opacity: .9; } 100% { opacity: 0; transform: translate3d(var(--dx, 0), 112cqh, 0) rotate(var(--dr, 90deg)) scale(1); } } .sp-e-jubel > .qn-szene[data-gestalt=winter] .qsz-birne { animation: qsz-birne var(--fd, 4s) ease-in-out var(--fv, 0s) infinite, qsz-welle 900ms ease-out calc(var(--bi, 0) * 70ms) 2; } @keyframes qsz-welle { 30% { opacity: 1; transform: scale(1.8); } } /* Im Finale steht der Kopf frei über der Szene (kein Balken wie in der Vorschau): Die Kette hängt dort tiefer, sonst liefen die ersten Birnen durch den Schriftzug (gemessen: Birnen ab 21 px, Schrift bis 27 px bei 628×390). */ .sp-ende > .qn-szene[data-gestalt="winter"] .qsz-kette { transform: translateY(2.6cqmin); } /* --- Gestalt „premiere" (Kino): Suchscheinwerfer, Foyerlicht, Dunst, Blitzlichter --- */ /* Warmes Licht aus dem Foyer, unten RECHTS — dort stehen im (gespiegelten) Bild die Türen. */ .qsz-kino-foyer { right: -18%; bottom: -34%; width: 64%; height: 84%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, #fff 42%, var(--acc)), color-mix(in srgb, var(--acc) 30%, transparent) 42%, transparent 72%); mix-blend-mode: screen; opacity: .38; animation: qsz-kino-foyer 7.5s ease-in-out infinite; will-change: transform, opacity; } @keyframes qsz-kino-foyer { 0%, 100% { opacity: .32; transform: scale(1); } 50% { opacity: .46; transform: scale(1.05); } } /* Der Abend-Schleier (nur im Finale): Das Treppchen steht links vor der dunklen Wand. Der Schleier nimmt Teppich und nassem Pflaster dort so viel Licht, dass jede Zeile — auch die leisen („Punkte", die Titel) — mindestens 4,5 : 1 hat (im Bild gemessen); nach rechts läuft er aus, dort leuchtet der Eingang. Während der Auszeichnungen (Akt 2: .fn-ehr steht) deckt er das ganze Bild, denn dann steht Schrift auch rechts. Es bewegt sich nur Deckkraft. In Rundenvorschau und Lobby gibt es ihn nicht. */ .qsz-kino-abend, .qsz-kino-abend2 { display: none; } .sp-ende > .qn-szene[data-gestalt="premiere"] .qsz-kino-abend { display: block; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--g0) 86%, transparent) 0, color-mix(in srgb, var(--g0) 84%, transparent) 54%, transparent 80%); } /* Der Schleier der Verleihung liegt ZUOBERST (auch über Scheinwerfern und Dunst). Rechts fast deckend: Dort steht in Akt 2 der Wert in der Tiefenfarbe (Petrol) — vor dem hellen Eingang hatte er selbst bei 80 % Schleier nur 2,5 : 1. Das Haus wird für die Verleihung dunkel. */ .sp-ende > .qn-szene[data-gestalt="premiere"] .qsz-kino-abend2 { display: block; inset: 0; opacity: 0; transition: opacity 600ms var(--k-ein); background: linear-gradient(90deg, color-mix(in srgb, var(--g0) 80%, transparent) 0, color-mix(in srgb, var(--g0) 96%, transparent) 44%); } .sp-ende:has(.fn-ehr) > .qn-szene[data-gestalt="premiere"] .qsz-kino-abend2 { opacity: 1; } /* Die Suchscheinwerfer: ein schmaler Kegel je Scheinwerfer. Sein Fuß steht HINTER dem Kino (unter dem Bildrand); zu sehen ist er erst über der Dachkante, im Nachthimmel — die Maske blendet die untere Hälfte aus (dort stünde er vor Fassade, Podest und Tafeln) und lässt ihn ganz oben auslaufen. Der Kegel ist ein Kegelverlauf (weiche Flanken); Kegel und Maske werden EINMAL gemalt, bewegt wird nur die Drehung um den Fußpunkt. Maße in cqmin, damit der Kegel an jedem Schirm dieselbe Form hat. */ .qsz-kino-sucher { bottom: -8cqmin; width: 30cqmin; height: 128cqmin; margin-left: -15cqmin; transform-origin: 50% 100%; background: conic-gradient(from -6deg at 50% 100%, transparent 0deg, color-mix(in srgb, #fff 30%, transparent) 3deg, color-mix(in srgb, #fff 58%, var(--acc2) 22%) 6deg, color-mix(in srgb, #fff 30%, transparent) 9deg, transparent 12deg, transparent 360deg); -webkit-mask-image: linear-gradient(0deg, transparent 0, transparent 50%, rgba(0, 0, 0, .9) 66%, rgba(0, 0, 0, .55) 86%, transparent 100%); mask-image: linear-gradient(0deg, transparent 0, transparent 50%, rgba(0, 0, 0, .9) 66%, rgba(0, 0, 0, .55) 86%, transparent 100%); opacity: .6; transform: rotate(var(--von, -20deg)); animation: qsz-kino-schwenk var(--dauer, 20s) ease-in-out var(--verz, 0s) infinite alternate; will-change: transform; } .qsz-kino-sucher[data-j="1"] { opacity: .48; } .qsz-kino-sucher[data-j="2"] { opacity: .4; } @keyframes qsz-kino-schwenk { from { transform: rotate(var(--von, -20deg)); } to { transform: rotate(var(--bis, 10deg)); } } /* Dunst im Licht: kleine warme Punkte, die langsam aufsteigen. */ .qsz-kino-flimmer { inset: 0; } .qsz-kino-flimmer i { position: absolute; width: .5cqmin; height: .5cqmin; border-radius: 50%; opacity: 0; background: radial-gradient(circle, #fff 0, color-mix(in srgb, var(--acc) 60%, #fff) 45%, transparent 70%); transform: scale(var(--s, 1)); animation: qsz-kino-flimmer var(--d, 10s) ease-in-out var(--v, 0s) infinite; will-change: transform, opacity; } @keyframes qsz-kino-flimmer { 0% { opacity: 0; transform: translate(0, 0) scale(var(--s, 1)); } 25% { opacity: .7; } 60% { opacity: .3; } 82% { opacity: .65; } 100% { opacity: 0; transform: translate(var(--dx, 4cqmin), -7cqmin) scale(var(--s, 1)); } } /* DER ZWEITE HÖHEPUNKT (Kino, Finale): Wenn der Pokal kommt (.sp-e-jubel an .sp-ende), zünden am Teppich die Blitzlichter der Fotografen — kleine Sterne, jeder für sich und jeder zweimal, verteilt über gut vier Sekunden. Nie die Fläche: jeder Blitz ist kleiner als ein Hundertstel des Schirms. Danach steht das Bild. */ .qsz-kino-blitze { inset: 0; } .qsz-kino-blitze i { position: absolute; width: var(--gr, 4cqmin); height: var(--gr, 4cqmin); opacity: 0; margin: calc(var(--gr, 4cqmin) / -2) 0 0 calc(var(--gr, 4cqmin) / -2); background: linear-gradient(90deg, transparent, #fff 50%, transparent) center / 100% 7% no-repeat, linear-gradient(0deg, transparent, #fff 50%, transparent) center / 7% 100% no-repeat, radial-gradient(circle, #fff 0 9%, color-mix(in srgb, #fff 70%, var(--acc2)) 16%, transparent 52%); transform: rotate(var(--w, 0deg)) scale(.3); } .sp-e-jubel > .qn-szene[data-gestalt=premiere] .qsz-kino-blitze i { animation: qsz-kino-blitz 460ms ease-out var(--v, 0ms) 1 both, qsz-kino-blitz 460ms ease-out calc(var(--v, 0ms) + 1900ms) 1 forwards; } @keyframes qsz-kino-blitz { 0% { opacity: 0; transform: rotate(var(--w, 0deg)) scale(.3); } 14% { opacity: 1; transform: rotate(var(--w, 0deg)) scale(1); } 100% { opacity: 0; transform: rotate(var(--w, 0deg)) scale(.7); } } /* --- Gestalt „aussicht" (Weltreise): Dunst am Horizont, ferne Lichter, Abendschleier, der Überflug --- */ /* Zwei Dunstbänder ziehen langsam gegeneinander am Horizont entlang (nur Verschiebung, kein Licht wandert). */ .qsz-wr-dunst { left: -30%; width: 160%; bottom: 8%; height: 26%; border-radius: 50%; opacity: .3; background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, #fff 62%, var(--acc2)) 0, color-mix(in srgb, #fff 22%, transparent) 46%, transparent 72%); animation: qsz-wr-ziehen 46s ease-in-out infinite alternate; will-change: transform; } .qsz-wr-dunst2 { bottom: 20%; height: 16%; opacity: .18; animation-duration: 64s; animation-direction: alternate-reverse; } @keyframes qsz-wr-ziehen { from { transform: translateX(-7%); } to { transform: translateX(7%); } } /* Ferne Lichter knapp über dem Horizont: andere Flieger, sehr weit weg — sie atmen, sie wandern nicht. */ .qsz-wr-ferne { inset: 0; } .qsz-wr-ferne i { position: absolute; width: .5cqmin; height: .5cqmin; border-radius: 50%; opacity: .2; background: radial-gradient(circle, #fff 0 30%, color-mix(in srgb, #fff 60%, var(--acc2)) 50%, transparent 72%); animation: qsz-wr-atmen var(--d, 4s) ease-in-out var(--v, 0s) infinite; will-change: opacity; } @keyframes qsz-wr-atmen { 0%, 100% { opacity: .14; } 50% { opacity: .7; } } /* Der Abendschleier (nur im Finale): Die rechte Hälfte des Bilds ist das helle Wolkenmeer — dort stehen Liste und Schaufenster. Der Schleier nimmt ihm so viel Licht, dass jede Zeile 4,5 : 1 hat; links, über Plattform und Treppchen, bleibt die Welt frei (dort liegt der Schleier des Finales am Treppchen selbst, finale-buehne.css). In Akt 2 (die Verleihung, .fn-ehr) deckt er das ganze Bild. Im Finale zieht der Dunst nur noch als Hauch: Als helles Band über den Namen nahm er dem Treppchen die Tiefe. */ .qsz-wr-abend, .qsz-wr-abend2 { display: none; } .sp-ende > .qn-szene[data-gestalt="aussicht"] .qsz-wr-abend { display: block; inset: 0; background: linear-gradient(90deg, transparent 0, transparent 38%, color-mix(in srgb, var(--g0) 44%, transparent) 56%, color-mix(in srgb, var(--g0) 58%, transparent) 100%); } .sp-ende > .qn-szene[data-gestalt="aussicht"] .qsz-wr-dunst { opacity: .1; } .sp-ende > .qn-szene[data-gestalt="aussicht"] .qsz-wr-dunst2 { opacity: .06; } .sp-ende > .qn-szene[data-gestalt="aussicht"] .qsz-wr-abend2 { display: block; inset: 0; opacity: 0; transition: opacity 600ms var(--k-ein); background: linear-gradient(90deg, color-mix(in srgb, var(--g0) 72%, transparent) 0, color-mix(in srgb, var(--g0) 94%, transparent) 46%); } .sp-ende:has(.fn-ehr) > .qn-szene[data-gestalt="aussicht"] .qsz-wr-abend2 { opacity: 1; } /* DER ZWEITE HÖHEPUNKT (Weltreise, Finale): Wenn der Pokal kommt, zieht hoch über dem Treppchen ein kleiner Flieger quer über den Himmel und schreibt seinen Kondensstreifen — einmal; dann verweht der Streifen. */ .qsz-wr-ueberflug { left: 5%; top: 13%; width: 46%; height: 6cqmin; opacity: 0; transform: rotate(-7deg); transform-origin: 0 50%; } .qsz-wr-spur { position: absolute; left: 0; top: 50%; width: 100%; height: .5cqmin; margin-top: -.25cqmin; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(180deg, transparent 0 10%, rgba(255, 255, 255, .78) 10% 38%, transparent 38% 62%, rgba(255, 255, 255, .78) 62% 90%, transparent 90%); -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .6) 40%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .6) 40%, #000 96%, transparent); } .qsz-wr-traeger { position: absolute; left: -100%; top: 0; bottom: 0; width: 100%; transform: translateX(0); } .qsz-wr-flieger { position: absolute; right: 0; top: 50%; width: 3.2cqmin; height: 3.2cqmin; margin: -1.6cqmin -.8cqmin 0 0; background: #fff; transform: rotate(90deg); clip-path: polygon(50% 0, 56% 6%, 57% 38%, 98% 62%, 98% 70%, 57% 58%, 56% 84%, 68% 94%, 68% 100%, 50% 95%, 32% 100%, 32% 94%, 44% 84%, 43% 58%, 2% 70%, 2% 62%, 43% 38%, 44% 6%); } .sp-e-jubel > .qn-szene[data-gestalt="aussicht"] .qsz-wr-ueberflug { animation: qsz-wr-sicht 6s ease-out 1 both; } .sp-e-jubel > .qn-szene[data-gestalt="aussicht"] .qsz-wr-spur { animation: qsz-wr-spur 4.4s cubic-bezier(.32, .1, .58, 1) 1 both; } .sp-e-jubel > .qn-szene[data-gestalt="aussicht"] .qsz-wr-traeger { animation: qsz-wr-flug 4.4s cubic-bezier(.32, .1, .58, 1) 1 both; } @keyframes qsz-wr-sicht { 0% { opacity: 0; } 6% { opacity: 1; } 74% { opacity: 1; } 100% { opacity: 0; } } @keyframes qsz-wr-spur { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes qsz-wr-flug { from { transform: translateX(0); } to { transform: translateX(100%); } } /* Die Wolkenbänder der Welt (pakete.js, welt.leben) ziehen im Himmel über dem Treppchen. Mit der Dichte des allgemeinen Nebels (finale-leben.css) waren sie dort nicht zu erkennen (Prüfung 2026-10-18, Akt 3) — hier tragen sie etwa die anderthalbfache Deckkraft; bewegt wird weiter nur transform und opacity. */ [data-motiv="luftpost"] .fk-welt .fl-nebel { background: radial-gradient(40% 56% at 26% 55%, color-mix(in srgb, var(--fl-f) 46%, transparent), transparent 100%), radial-gradient(44% 66% at 62% 45%, color-mix(in srgb, var(--fl-f) 38%, transparent), transparent 100%), radial-gradient(32% 50% at 88% 58%, color-mix(in srgb, var(--fl-f) 28%, transparent), transparent 100%); } /* --- Gestalt „laternenfest" (Anime): Blütenblätter im Laternenlicht, warmes Licht, Blütenregen --- */ /* Warmes Laternenlicht unten links — es atmet langsam (in der Siegerehrung liegt dort die Halle). Das Licht der Laternen ist keine Rollenfarbe (IDEE §2.5): ein warmer Ton mit einem Hauch Rosa. */ .qsz-an-laterne { left: -14%; bottom: -30%; width: 56%; height: 70%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, #fff 40%, #ffc98a), color-mix(in srgb, color-mix(in srgb, #ffbf72 80%, var(--acc)) 30%, transparent) 42%, transparent 72%); mix-blend-mode: screen; opacity: .32; animation: qsz-an-laterne 7s ease-in-out infinite; will-change: transform, opacity; } @keyframes qsz-an-laterne { 0%, 100% { opacity: .28; transform: scale(1); } 50% { opacity: .42; transform: scale(1.05); } } /* Die Blütenblätter: Sie kommen am rechten Rand herein und treiben im Wind nach links unten, jedes in seinem Takt, und drehen sich dabei um sich selbst (rotateX: das Blatt kippt, man sieht es schmal und wieder breit). Drei Tiefen über Größe (--s), Tempo (--d) und Deckkraft (--o). Die Form ist EIN Blatt mit Kerbe (--blueten-blatt), die Farbe Rosa, zur Kerbe hin satter. */ .qsz-an-blueten { inset: 0; overflow: hidden; } .qsz-an-blueten i { position: absolute; left: 101%; width: 1.25cqmin; height: 1.56cqmin; opacity: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--acc) 40%, #fff) 0, color-mix(in srgb, var(--acc) 82%, #fff) 55%, var(--acc) 100%); -webkit-mask: var(--blueten-blatt) center / 100% 100% no-repeat; mask: var(--blueten-blatt) center / 100% 100% no-repeat; transform: translate3d(0, 0, 0) rotate(var(--w0, 0deg)) scale(var(--s, 1)); animation: qsz-an-treiben var(--d, 16s) linear var(--v, 0s) infinite; will-change: transform, opacity; } @keyframes qsz-an-treiben { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(var(--w0, 0deg)) rotateX(0deg) scale(var(--s, 1)); } 6% { opacity: var(--o, .6); } 30% { transform: translate3d(-34cqw, calc(var(--dy, 30cqh) * .22), 0) rotate(calc(var(--w0, 0deg) + var(--dr, 360deg) * .3)) rotateX(160deg) scale(var(--s, 1)); } 55% { transform: translate3d(-62cqw, calc(var(--dy, 30cqh) * .5), 0) rotate(calc(var(--w0, 0deg) + var(--dr, 360deg) * .55)) rotateX(250deg) scale(var(--s, 1)); } 80% { transform: translate3d(-90cqw, calc(var(--dy, 30cqh) * .74), 0) rotate(calc(var(--w0, 0deg) + var(--dr, 360deg) * .8)) rotateX(420deg) scale(var(--s, 1)); } 94% { opacity: var(--o, .6); } 100% { opacity: 0; transform: translate3d(-114cqw, var(--dy, 30cqh), 0) rotate(calc(var(--w0, 0deg) + var(--dr, 360deg))) rotateX(540deg) scale(var(--s, 1)); } } /* DER ZWEITE HÖHEPUNKT (Anime, Finale): Wenn der Pokal kommt (.sp-e-jubel an .sp-ende), fällt EINMAL ein Blütenregen — große Blätter, verschieden spät, der Wind nimmt sie nach links mit. Danach steht das Bild. */ .qsz-an-regen { inset: 0; overflow: hidden; } .qsz-an-regen i { position: absolute; top: -6%; width: calc(var(--gr, 2cqmin) * .8); height: var(--gr, 2cqmin); opacity: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--acc) 36%, #fff) 0, color-mix(in srgb, var(--acc) 80%, #fff) 55%, var(--acc) 100%); -webkit-mask: var(--blueten-blatt) center / 100% 100% no-repeat; mask: var(--blueten-blatt) center / 100% 100% no-repeat; } .sp-e-jubel > .qn-szene[data-gestalt=laternenfest] .qsz-an-regen i { animation: qsz-an-regen var(--dauer, 3s) cubic-bezier(.3, .1, .5, 1) var(--v, 0ms) 1 both; } @keyframes qsz-an-regen { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) rotateX(0deg) scale(.6); } 8% { opacity: 1; transform: translate3d(calc(var(--dx, 0cqmin) * .1), 6cqh, 0) rotate(calc(var(--dr, 90deg) * .1)) rotateX(40deg) scale(1.1); } 80% { opacity: .9; } 100% { opacity: 0; transform: translate3d(var(--dx, 0cqmin), 112cqh, 0) rotate(var(--dr, 90deg)) rotateX(380deg) scale(1); } } /* Wer keine Bewegung will, bekommt das ruhige Bild mit stehendem Licht. */ @media (prefers-reduced-motion: reduce) { .qsz-wr-ueberflug, .qsz-wr-ferne i { opacity: 0; } .qn-szene *, .qn-szene *::before { animation: none !important; } .qsz-staub i, .qsz-funken i, .qsz-spur, .qsz-komet, .qsz-pixel i, .qsz-strahl, .qsz-schnee i, .qsz-schnuppe, .qsz-sternregen i, .qsz-kino-flimmer i, .qsz-kino-blitze i, .qsz-an-blueten i, .qsz-an-regen i, .qsz-tw-staub i, .qsz-tw-gluehen i { opacity: 0; } } /* --- Gestalt „savanne" (Tierwelt): die tiefe Sonne, Staub im Gegenlicht, Glühwürmchen --- */ /* Der Hof der Sonne links am Horizont — er atmet langsam (warm, kein Rollenton: das Licht der Welt). */ .qsz-tw-sonne { left: -12%; top: 22%; width: 46%; height: 52%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, #fff 46%, #ffc070), color-mix(in srgb, #ffb060 70%, var(--acc)) 26%, color-mix(in srgb, var(--acc) 22%, transparent) 52%, transparent 74%); mix-blend-mode: screen; opacity: .34; animation: qsz-tw-sonne 8s ease-in-out infinite; will-change: transform, opacity; } @keyframes qsz-tw-sonne { 0%, 100% { opacity: .28; transform: scale(1); } 50% { opacity: .42; transform: scale(1.06); } } /* Der Staub: feine goldene Körner, die im Gegenlicht nach rechts treiben und dabei leicht sinken. */ .qsz-tw-staub { inset: 0; overflow: hidden; } .qsz-tw-staub i { position: absolute; width: .42cqmin; height: .42cqmin; border-radius: 50%; opacity: 0; background: color-mix(in srgb, #fff 40%, #ffd28a); transform: scale(var(--s, 1)); animation: qsz-tw-staub var(--d, 16s) linear var(--v, 0s) infinite; will-change: transform, opacity; } @keyframes qsz-tw-staub { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(var(--s, 1)); } 18% { opacity: .7; } 82% { opacity: .5; } 100% { opacity: 0; transform: translate3d(16cqmin, 5cqmin, 0) scale(var(--s, 1)); } } /* Die Glühwürmchen: kleine warme Punkte über dem Ufer, jedes an seinem Platz — sie glimmen auf und verlöschen. */ .qsz-tw-gluehen { inset: 0; overflow: hidden; } .qsz-tw-gluehen i { position: absolute; width: .7cqmin; height: .7cqmin; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, #fffbd0, color-mix(in srgb, #e9f27a 70%, transparent) 46%, transparent 76%); animation: qsz-tw-gluehen var(--d, 3.6s) ease-in-out var(--v, 0s) infinite; will-change: transform, opacity; } @keyframes qsz-tw-gluehen { 0%, 100% { opacity: 0; transform: scale(.6); } 40% { opacity: .9; transform: scale(1); } 60% { opacity: .8; transform: translateY(-.4cqmin); } } @media (prefers-reduced-motion: reduce) { .qsz-tw-staub i, .qsz-tw-gluehen i { opacity: 0; } } /* Fährte (Tierwelt): eine Reihe kleiner Pfotenabdrücke, wie sie ein Tier am Ufer hinterlässt — immer zwei versetzt, die Spur eines Gehenden. Sie läuft als schmaler Rand oben und unten und kommt aus zwei Ecken (oben rechts, unten links), zur Mitte hin blendet sie aus: Die Frage bleibt frei. Ocker, zu den Ecken hin Flamingo (der Verlauf liegt im Grund, die Abdrücke sind die Maske). Klein und blass; Abdrücke als Rand hat kein anderes Set. Die Kachel trägt das Motiv im Namen (--faehrte-kachel), damit die Teile des Sets dieselbe Fährte nehmen. */ :root { --faehrte-kachel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cg fill='%23000'%3E%3Cellipse cx='5' cy='8.7' rx='2.1' ry='1.75'/%3E%3Ccircle cx='2.6' cy='6.1' r='.9'/%3E%3Ccircle cx='4.15' cy='5.05' r='.9'/%3E%3Ccircle cx='5.85' cy='5.05' r='.9'/%3E%3Ccircle cx='7.4' cy='6.1' r='.9'/%3E%3Cellipse cx='17' cy='5.7' rx='2.1' ry='1.75'/%3E%3Ccircle cx='14.6' cy='3.1' r='.9'/%3E%3Ccircle cx='16.15' cy='2.05' r='.9'/%3E%3Ccircle cx='17.85' cy='2.05' r='.9'/%3E%3Ccircle cx='19.4' cy='3.1' r='.9'/%3E%3C/g%3E%3C/svg%3E"); } [data-motiv="faehrte"] :is(.qn-buehne, .qn-hand)::after { background: linear-gradient(90deg, transparent 22%, color-mix(in srgb, var(--acc) 90%, #fff) 64%, var(--acc2) 100%) 0 0 / 100% 4.6cqmin no-repeat, linear-gradient(90deg, var(--acc2) 0, color-mix(in srgb, var(--acc) 90%, #fff) 36%, transparent 78%) 0 100% / 100% 4.6cqmin no-repeat; -webkit-mask: var(--faehrte-kachel) 0 .9cqmin / max(20px, 5.2cqmin) max(10px, 2.6cqmin) repeat-x, var(--faehrte-kachel) 0 calc(100% - .9cqmin) / max(20px, 5.2cqmin) max(10px, 2.6cqmin) repeat-x; mask: var(--faehrte-kachel) 0 .9cqmin / max(20px, 5.2cqmin) max(10px, 2.6cqmin) repeat-x, var(--faehrte-kachel) 0 calc(100% - .9cqmin) / max(20px, 5.2cqmin) max(10px, 2.6cqmin) repeat-x; opacity: .5; } /* --- Gestalt „stadion" (Fußball): die letzte Glut über dem Horizont, Tau über dem Rasen, Papierschnipsel von den Rängen --- */ /* Die Glut über dem Horizont — sie atmet sehr langsam (warm, kein Rollenton: das Licht der Welt). */ .qsz-fb-glut { position: absolute; left: 22%; top: 16%; width: 56%; height: 28%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, #ffb88e 46%, transparent), color-mix(in srgb, #c46a8a 22%, transparent) 50%, transparent 76%); mix-blend-mode: screen; opacity: .3; animation: qsz-fb-glut 11s ease-in-out infinite; will-change: transform, opacity; } @keyframes qsz-fb-glut { 0%, 100% { opacity: .24; transform: scale(1); } 50% { opacity: .36; transform: scale(1.05); } } /* Der Tau: zwei flache, helle Bänder tief über dem Rasen, die kaum merklich ziehen. */ .qsz-fb-tau { position: absolute; inset: 0; overflow: hidden; } .qsz-fb-tau i { position: absolute; left: -30%; width: 160%; top: 62%; height: 9%; border-radius: 50%; opacity: .26; background: radial-gradient(closest-side, color-mix(in srgb, #e6f0ff 30%, transparent), transparent 72%); animation: qsz-fb-tau 34s ease-in-out infinite alternate; will-change: transform; } .qsz-fb-tau i:nth-child(2) { top: 71%; height: 7%; opacity: .18; animation-duration: 46s; animation-delay: -12s; } @keyframes qsz-fb-tau { from { transform: translateX(-6%); } to { transform: translateX(6%); } } /* Die Papierschnipsel: kleine Rechtecke in den Farben der Welt, die flatternd von oben fallen. */ .qsz-fb-schnipsel { position: absolute; inset: 0; overflow: hidden; } .qsz-fb-schnipsel i { position: absolute; top: -4%; width: 1cqmin; height: .62cqmin; border-radius: .1cqmin; background: var(--ton, #fff); opacity: 0; animation: qsz-fb-schnipsel var(--d, 12s) linear var(--v, 0s) infinite; will-change: transform, opacity; } @keyframes qsz-fb-schnipsel { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate3d(1, .4, .2, 0deg); } 8% { opacity: .85; } 90% { opacity: .7; } 100% { opacity: 0; transform: translate3d(var(--dx, 0), 108cqh, 0) rotate3d(1, .4, .2, var(--dr, 360deg)); } } @media (prefers-reduced-motion: reduce) { .qsz-fb-schnipsel i, .qsz-fb-tau i { opacity: 0; } .qsz-fb-glut { animation: none; } } /* Rasen (Fußball): MÄHSTREIFEN MIT KREIDELINIE — am Rand jeder Bühne oben und unten ein schmaler Streifen Rasen in zwei Grüntönen, nach innen die weiße Seitenlinie, an den vier Ecken der Viertelkreis der Eckfahne. Breite Streifen, Grün auf Grün, mit Kreide (Rennsports Curbs sind kurze rot-weiße Blöcke; keine Querlinien in festen Abständen — das wäre American Football). Die zwei Grüns liegen nah beieinander, die Kreide und die Viertelkreise tragen das Motiv auch dort, wo die Streifen schmal werden. Variablen tragen das Motiv im Namen (--rasen-*), damit die Teile des Sets dieselben Streifen nehmen. */ [data-motiv="rasen"] { --rasen-hell: color-mix(in srgb, var(--acc) 66%, #0a2a0e); --rasen-dunkel: color-mix(in srgb, var(--acc) 46%, #04180a); --rasen-kreide: color-mix(in srgb, #f4f8f0 80%, transparent); --rasen-streifen: repeating-linear-gradient(90deg, var(--rasen-hell) 0 6cqmin, var(--rasen-dunkel) 6cqmin 12cqmin); } [data-motiv="rasen"] :is(.qn-buehne, .qn-hand)::after { background: radial-gradient(circle at 0 0, transparent 0 4.8cqmin, var(--rasen-kreide) 4.85cqmin 5.15cqmin, transparent 5.2cqmin) 0 0 / 6cqmin 6cqmin no-repeat, radial-gradient(circle at 100% 0, transparent 0 4.8cqmin, var(--rasen-kreide) 4.85cqmin 5.15cqmin, transparent 5.2cqmin) 100% 0 / 6cqmin 6cqmin no-repeat, radial-gradient(circle at 0 100%, transparent 0 4.8cqmin, var(--rasen-kreide) 4.85cqmin 5.15cqmin, transparent 5.2cqmin) 0 100% / 6cqmin 6cqmin no-repeat, radial-gradient(circle at 100% 100%, transparent 0 4.8cqmin, var(--rasen-kreide) 4.85cqmin 5.15cqmin, transparent 5.2cqmin) 100% 100% / 6cqmin 6cqmin no-repeat, linear-gradient(var(--rasen-kreide), var(--rasen-kreide)) 0 2.2cqmin / 100% max(1px, .26cqmin) no-repeat, linear-gradient(var(--rasen-kreide), var(--rasen-kreide)) 0 calc(100% - 2.2cqmin) / 100% max(1px, .26cqmin) no-repeat, var(--rasen-streifen) 0 0 / 100% 2.2cqmin no-repeat, var(--rasen-streifen) 0 100% / 100% 2.2cqmin no-repeat; opacity: .55; } /* ===================================================================== DIE KÖPFCHEN-KARTEN (QN, gemeinsam für die Standardbühnen von Code knacken und Umlegen): je Spieler eine Karte mit lebendem Monster, Name und einer Zeile Stand. Maße in cqmin des umgebenden Containers (die Bühne der Kategorie setzt container-type). Zustände: ok · aus · du (nur online) · heiss · neu · rang (mit .qn-kk-rang) — und .qn-kk-mehr für „+N weitere“. ===================================================================== */ .qn-kk-reihe { display:flex; justify-content:center; align-items:flex-end; gap:1.6cqmin; width:100%; padding:0 2cqmin; } .qn-kk { position:relative; flex:0 1 21cqmin; min-width:0; display:flex; flex-direction:column; align-items:center; gap:.7cqmin; padding:0 1.2cqmin 1.3cqmin; border-radius:2.4cqmin; background:linear-gradient(180deg, color-mix(in srgb, var(--acc) 26%, rgba(10,16,44,.6)), rgba(8,12,32,.82)); box-shadow:inset 0 0 0 .22cqmin rgba(255,255,255,.14), 0 1.6cqmin 3cqmin rgba(0,0,0,.4); transition:box-shadow 400ms ease-out, opacity 400ms; } .qn-kk-fig { width:15cqmin; height:15cqmin; margin-top:-6.4cqmin; } .qn-kk-fig > * { width:100%; height:100%; } .qn-kk-n { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--f-display); font-weight:800; font-size:3cqmin; } .qn-kk-st { display:flex; align-items:center; gap:.9cqmin; } .qn-kk.du { box-shadow:inset 0 0 0 .3cqmin var(--du), 0 1.6cqmin 3cqmin rgba(0,0,0,.4); } .qn-kk.ok { box-shadow:inset 0 0 0 .32cqmin var(--ok), 0 0 2.6cqmin color-mix(in srgb, var(--ok) 32%, transparent), 0 1.6cqmin 3cqmin rgba(0,0,0,.4); } .qn-kk.aus { opacity:.6; } /* fast geknackt: das Glühen liegt auf einer eigenen Ebene — eine Animation an der Karte selbst verdrängte ihren Auftritt (qn-wartet) */ .qn-kk.heiss:not(.ok)::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; animation:qn-kk-heiss 1.1s ease-in-out infinite alternate; } @keyframes qn-kk-heiss { from { box-shadow:inset 0 0 0 .3cqmin transparent; } to { box-shadow:inset 0 0 0 .3cqmin var(--warn), 0 0 2.4cqmin color-mix(in srgb, var(--warn) 40%, transparent); } } .qn-kk.neu .qn-kk-st { animation:qn-kk-neu 520ms cubic-bezier(.3,1.5,.5,1); } .qn-kk-rang { display:none; position:absolute; top:-1.4cqmin; right:-1.2cqmin; width:4cqmin; height:4cqmin; border-radius:50%; place-items:center; font:800 2.2cqmin var(--f-display); font-style:normal; background:var(--warn); color:var(--auf-warn, #241700); box-shadow:0 .6cqmin 1.4cqmin rgba(0,0,0,.4); } .qn-kk.rang .qn-kk-rang { display:grid; animation:qn-kk-neu 520ms cubic-bezier(.3,1.5,.5,1); } .qn-kk.qn-kk-mehr { flex:0 0 auto; align-self:center; padding:1.6cqmin 2cqmin; background:none; box-shadow:none; flex-direction:row; gap:.8cqmin; } .qn-kk.qn-kk-mehr b { font:800 3.4cqmin var(--f-display); } .qn-kk.qn-kk-mehr span { font-weight:700; font-size:2.2cqmin; color:var(--t1); } .qn-kk-reihe.eng .qn-kk { flex-basis:15cqmin; gap:.5cqmin; padding:0 .8cqmin 1cqmin; } .qn-kk-reihe.eng .qn-kk-fig { width:11.5cqmin; height:11.5cqmin; margin-top:-5cqmin; } .qn-kk-reihe.eng .qn-kk-n { font-size:2.2cqmin; } @keyframes qn-kk-neu { from { transform:scale(.8); opacity:.4; } to { transform:none; opacity:1; } } @media (prefers-reduced-motion: reduce) { .qn-kk::after { animation:none !important; } } /* Der Stand als Wort an der Karte („überlegt …", „✓ abgegeben", „✓ gelöst") — Umlegen, Was fehlt (kat/kk-reihe.js). */ .qn-kk-st.kk-wort { font-weight:700; font-size:2.1cqmin; color:var(--t2); white-space:nowrap; } .qn-kk.fertig .qn-kk-st.kk-wort { color:var(--t1); } .qn-kk.ok .qn-kk-st.kk-wort { color:var(--ok); } /* ---- DER SPIELTISCH der Standardbühnen (Umlegen: Streichholztisch · Was fehlt: Memory-Karten) ---- Rand aus dunklem Holz, Filzbezug in der Farbe des Sets. Größe und Lage bestimmt die Kategorie; hier nur das Aussehen. */ .qn-tisch { position:relative; border-radius:4.4cqmin; background:linear-gradient(160deg, #7a4826, #3d200e 46%, #6a3c1d 70%, #33190a); box-shadow:0 3.4cqmin 6cqmin rgba(0,0,0,.6), inset 0 .5cqmin 0 rgba(255,220,180,.25), inset 0 -.6cqmin 1cqmin rgba(0,0,0,.45); } .qn-tisch::before { content:''; position:absolute; inset:0; border-radius:inherit; opacity:.35; pointer-events:none; background:repeating-linear-gradient(92deg, rgba(255,210,160,.08) 0 .3cqmin, transparent .3cqmin 1.6cqmin, rgba(0,0,0,.08) 1.6cqmin 1.9cqmin, transparent 1.9cqmin 3.4cqmin); } .qn-filz { position:absolute; inset:2.2cqmin; border-radius:2.6cqmin; overflow:hidden; background:radial-gradient(120% 130% at 50% 38%, color-mix(in srgb, var(--acc) 58%, #0b1530), color-mix(in srgb, var(--acc) 26%, #050a18) 78%); box-shadow:inset 0 0 4cqmin rgba(0,0,0,.65), inset 0 0 0 .3cqmin rgba(0,0,0,.4); } .qn-filz::before { content:''; position:absolute; inset:0; opacity:.5; pointer-events:none; background:repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 1px, transparent 1px 5px), repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 1px, transparent 1px 6px); }