/* ============================================================ Typical Web – Bausteine (Visuell 1:1 an die iOS-App angeglichen) ============================================================ Die Farben, Maße und Schriftstufen stehen in `tokens.css` und nirgends sonst. Hier steht nur, wie daraus Bildschirme werden. ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* **Der Grund steht am `html`, nicht am `body`** – und mit einer Farbe dahinter. Ein Verlauf allein am `body` malt nur so weit, wie der Inhalt reicht; was darüber hinausgeht bekäme das Weiß der Zeichenfläche. */ html { min-height: 100%; /* Theme.grundVerlauf – Pflaume oben, Petrol unten */ background: var(--grund-1) linear-gradient(to bottom, var(--grund-1), var(--grund-2), var(--grund-3), var(--grund-4)) fixed; color: var(--ink); } /* **Der Inhalt steht in der Mitte des Fensters, nicht oben dran.** Bei einer Handybreite füllt der Inhalt fast immer die Höhe – hier fiel das nie auf. Im Browser kann das Fenster beliebig hoch sein, und ein kurzer Bildschirm (Start, Einladung) klebte oben, während darunter nur der Verlauf stand. `justify-content: center` zentriert nur, solange Inhalt hineinpasst; ist er höher als das Fenster, wächst `body` darüber hinaus und alles läuft wie gewohnt von oben nach unten – Formulare mit Tastatur oder eine lange Liste verlieren dadurch keine Zeile. */ body { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; position: relative; overflow-x: hidden; } /* ── Atmosphärischer Neon-Hintergrund (NeonBackground aus Swift) ── */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -2; background: radial-gradient(circle 210px at calc(50% - 110px) 15%, rgba(255, 62, 126, 0.30), transparent 70%), radial-gradient(circle 190px at calc(50% + 130px) 48%, rgba(150, 111, 255, 0.20), transparent 70%), radial-gradient(circle 160px at calc(50% - 75px) 82%, rgba(53, 221, 211, 0.14), transparent 70%); } .hell body::before { background: radial-gradient(circle 210px at calc(50% - 110px) 15%, rgba(255, 62, 126, 0.16), transparent 70%), radial-gradient(circle 190px at calc(50% + 130px) 48%, rgba(111, 69, 221, 0.12), transparent 70%), radial-gradient(circle 160px at calc(50% - 75px) 82%, rgba(0, 150, 142, 0.10), transparent 70%); } /* Vignette nach unten hin abdunkeln */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: linear-gradient(to bottom, transparent 40%, rgba(11, 10, 19, 0.85) 100%); } .hell body::after { background: linear-gradient(to bottom, transparent 40%, rgba(242, 241, 248, 0.85) 100%); } /* **Der Start-Reiter bringt sein eigenes Licht mit** (Theme.startVerlauf, NeonBackground.eigenesLicht) – Entwurf 21a/21b. `haupt.js` setzt die Klasse `start-reiter` an ``, solange `startSeite()` zu sehen ist (auch während der Modus-Wahl, nicht mehr beim Beitreten oder Anlegen). Im Dunkeln ist das derselbe Verlauf wie überall (`grund-1..4`), deshalb steht hier nur die helle Fassung. Die drei Farbschleier und die Vignette entfallen in beiden Designs: Der Auftritt aus schwebenden Feldern (`.start-auftritt`) bringt seinen eigenen violetten Schein mit, und die Pillen tragen ihre Farbe selbst. */ html.start-reiter { background: var(--grund-1) linear-gradient(to bottom, var(--grund-1), var(--grund-2), var(--grund-3), var(--grund-4)) fixed; } html.hell.start-reiter { background: var(--start-hell-1) linear-gradient(to bottom, var(--start-hell-1), var(--start-hell-2), var(--start-hell-3), var(--start-hell-4)) fixed; } html.start-reiter body::before, html.start-reiter body::after { content: none; } /* Der Rahmen, in dem alles steht */ .rahmen { width: 100%; max-width: 440px; margin: 0 auto; padding: var(--space-screen); padding-top: max(var(--space-medium), env(safe-area-inset-top)); padding-bottom: max(var(--space-section), env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--space-large); position: relative; z-index: 1; box-sizing: border-box; } /* ── Kopfleiste / Toolbar ─────────────────────────────────── */ .kopfleiste { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-small); min-height: 36px; width: 100%; } .kopfleiste.mit-zurueck { justify-content: space-between; } .kopf-rechts { display: flex; align-items: center; gap: var(--space-small); } .kopf-icon-knopf { width: 38px; height: 38px; border-radius: 50%; background: rgba(var(--veil-basis), 0.06); border: 1px solid var(--kante-fein); color: var(--ink-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); } .kopf-icon-knopf:hover, .kopf-icon-knopf:focus-visible { color: var(--ink); border-color: var(--kante-stark); background: rgba(var(--veil-basis), 0.12); } .kopf-icon-knopf:active { transform: scale(0.92); } .kopf-zurueck { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; color: var(--cyan); font: var(--font-label); font-size: 15px; font-weight: 600; cursor: pointer; padding: 6px 0; } .kopf-zurueck:active { opacity: 0.7; } /* ── Der Auftritt und der Schriftzug (StartHeld + TypicalSchriftzug) ── Entwurf 21a/21b. Ersetzt die alte Chat-Blase (`NeonWordmark`) auf dem Start-Reiter – die bleibt, wo sie noch gebraucht wird: als Signatur unter dem Rückblick. Hier steht seit dem 31.08.2026 der Auftritt aus schwebenden Feldern über dem freistehenden Wort, 1:1 aus `StartHeld.swift` und `TypicalSchriftzug.swift`. */ .hero-header { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: var(--space-small); padding-bottom: var(--space-tight); width: 100%; position: relative; } .schriftzug { will-change: transform; } /* Funken und Konfetti beim Osterei (`ostereiTippen` in `ansicht.js`) – frei fliegende Formen, die sich beim Ende ihrer eigenen Animation selbst aus dem DOM entfernen. Bewusst außerhalb von `.start-felder`: die trägt die Ausblend-Maske fürs Schweben, Funken sollen ungedämpft sichtbar sein. */ .osterei-funke, .osterei-konfetti { position: absolute; pointer-events: none; z-index: 3; } .osterei-funke-kachel { border: 2px solid currentColor; border-radius: 5px; } .osterei-funke-haken svg { width: 100%; height: 100%; } .osterei-funke-punkt { border-radius: 50%; } .osterei-konfetti { border-radius: 1px; } /* Der Auftritt: fünf schwebende Felder und fünf Punkte, 402 px Entwurfsbreite. Die Lage rechnet sich anteilig zur tatsächlichen Breite um (`calc(x/402*100%)`, siehe `startAuftritt()` in `ansicht.js`); die Höhe bleibt fest, wie im Entwurf. */ .start-auftritt { position: relative; width: 100%; height: 222px; pointer-events: none; } .start-schein { position: absolute; width: 440px; height: 320px; left: calc(201 / 402 * 100%); top: 144px; transform: translate(-50%, -50%); background: radial-gradient(circle, color-mix(in srgb, var(--violet) 15%, transparent) 0%, transparent 70%); } /* Der Rahmen, der die Maske trägt – **größer als die sichtbaren 222 px**, sonst schneidet die Maske selbst hart ab: Ein `mask-image` klippt immer an der eigenen Box, unabhängig von `overflow`. Mehrere Felder reichen schon in Ruhelage leicht über 0 bzw. 222 hinaus (das große Haken-Feld etwa beginnt bei y ≈ −8), und der Wurf wirft zusätzlich bis zu 26 px nach oben aus – ohne das Polster stünde dort eine sichtbare Kante statt eines Randes. `startAuftritt()` in `ansicht.js` addiert denselben Polsterwert (60 px) auf jede `top`-Position, damit die Lage der Felder dadurch unverändert bleibt. Nach unten blendet die Maske vollständig auf null aus, statt bei rund 42 % Deckkraft hart zu enden. */ .start-felder { position: absolute; left: 0; right: 0; top: -60px; height: 302px; -webkit-mask-image: linear-gradient(to bottom, black 0%, black 64.7%, transparent 113.9%); mask-image: linear-gradient(to bottom, black 0%, black 64.7%, transparent 113.9%); } .start-feld, .start-punkt { position: absolute; transform: translate(-50%, -50%) rotate(var(--drehung, 0deg)); } .start-feld-schweben, .start-punkt-schweben { width: 100%; height: 100%; animation: start-schweben var(--dauer, 5s) ease-in-out var(--verzug, 0s) infinite alternate; } @keyframes start-schweben { from { transform: translateY(0); } to { transform: translateY(-9px); } } .start-feld-wurf, .start-punkt-wurf { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .start-feld-wurf.spielt, .start-punkt-wurf.spielt { animation: start-wurf 0.8s ease-out; } @keyframes start-wurf { 0% { transform: translateY(0) rotate(0deg) scale(1); } 30% { transform: translateY(-26px) rotate(180deg) scale(1.12); } 62.5% { transform: translateY(4px) rotate(345deg) scale(1.05); } 100% { transform: translateY(0) rotate(360deg) scale(1); } } @media (prefers-reduced-motion: reduce) { .start-feld-schweben, .start-punkt-schweben { animation: none; } .start-feld-wurf.spielt, .start-punkt-wurf.spielt { animation: none; } } /* Die fünf Felder – ein geschriebener Satz, der eingetretene, ein Kartenausschnitt, ein zweiter Treffer, ein noch leeres Feld. */ .feld-zeilen { border-radius: 18px; background: color-mix(in srgb, var(--violet) 4%, transparent); border: 1px solid color-mix(in srgb, var(--violet) 26%, transparent); flex-direction: column; gap: 7px; } .start-balken { border-radius: 999px; background: color-mix(in srgb, var(--violet) 32%, transparent); width: 48px; height: 5px; } .start-balken.kurz { background: color-mix(in srgb, var(--violet) 20%, transparent); width: 32px; } .feld-haken-gross { border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--pink) 52%, transparent), color-mix(in srgb, var(--violet) 36%, transparent)); border: 1px solid color-mix(in srgb, var(--pink) 55%, transparent); box-shadow: 0 0 19px color-mix(in srgb, var(--pink) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.18); color: #fff; } .feld-haken-gross svg { width: 40px; height: 40px; stroke-width: 3; } .feld-raster { border-radius: 18px; background: color-mix(in srgb, var(--cyan) 6%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--cyan) 20%, transparent); } .start-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; width: 74px; height: 74px; } .start-stein { border-radius: 7px; } .start-stein.voll { background: color-mix(in srgb, var(--cyan) 30%, transparent); } .start-stein.leer { border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent); } .feld-haken-klein { border-radius: 17px; background: color-mix(in srgb, var(--amber) 7%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 50%, transparent); box-shadow: 0 0 8px color-mix(in srgb, var(--amber) 22%, transparent); color: var(--amber); opacity: 0.92; } .feld-haken-klein svg { width: 26px; height: 26px; stroke-width: 3; } .feld-schemen { border-radius: 16px; border: 1px solid color-mix(in srgb, var(--violet) 18%, transparent); opacity: 0.6; filter: blur(1px); } /* Die fünf Punkte. */ .start-punkt-koerper { width: 100%; height: 100%; border-radius: 50%; } .punkt-pink { background: var(--pink); box-shadow: 0 0 6px color-mix(in srgb, var(--pink) 60%, transparent); } .punkt-cyan { background: var(--cyan); box-shadow: 0 0 7px color-mix(in srgb, var(--cyan) 60%, transparent); } .punkt-violet { background: var(--violet); box-shadow: 0 0 5px color-mix(in srgb, var(--violet) 60%, transparent); opacity: 0.85; } .punkt-amber { background: var(--amber); box-shadow: 0 0 5px color-mix(in srgb, var(--amber) 60%, transparent); opacity: 0.85; } .punkt-pink-fern { background: var(--pink); opacity: 0.5; filter: blur(0.5px); } /* Der Schriftzug: **das Wort als Aufkleber**, aufrecht, in Textfarbe, mit zwei harten Schatten in Rosa und Violett dahinter – gestapelte `text-shadow`, dieselbe Technik, die `TypicalSchriftzug.swift` mit drei `Text`-Kopien nachbaut, weil SwiftUI keine gestapelten Textschatten kennt. In CSS reicht eine Regel. **Ein `

`, kein `
`.** Auf iOS trägt der Schriftzug `.isHeader`; hier übernimmt das die native Überschrift, ohne eigenes ARIA. Das Osterei bekommt bewusst keine Tastaturbedienung – dieselbe Ausnahme wie auf iOS (`.accessibilityAction` fehlt dort ebenso), weil die Geste rein beiläufig gemeint ist. */ .schriftzug { font-family: var(--slab); font-weight: 800; font-size: 76px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); text-align: center; margin: 4px 0 0; padding: 6px 10px 30px; user-select: none; cursor: pointer; --schriftzug-nah: color-mix(in srgb, var(--pink) 88%, black); --schriftzug-fern: color-mix(in srgb, var(--violet) 55%, transparent); --schriftzug-tiefe: rgba(0, 0, 0, 0.5); text-shadow: 3px 3px 0 var(--schriftzug-nah), 6px 6px 0 var(--schriftzug-fern), 0 10px 17px var(--schriftzug-tiefe); } .hell .schriftzug { --schriftzug-nah: color-mix(in srgb, var(--pink) 85%, black); --schriftzug-tiefe: color-mix(in srgb, var(--ink) 15%, transparent); } .hero-subtitle { font: var(--font-support); color: var(--ink-soft); text-align: center; max-width: 320px; margin: 0 auto; line-height: 1.35; } /* ── Die zwei Aktionspillen des Start-Reiters ────────────────────── 1:1 aus `PillenStil` (`Theme/Buttons.swift`) – **eigene Klassen, nicht `.big-action`.** Die Modus-Wahl (`modusSchritt()`) benutzt `.big-action` für dieselbe Kartenform mit anderer Rolle; sie behält ihr Aussehen, das ist auf iOS ebenfalls `ModusWahl`, nicht `PillenStil` – der eine Knopfstil, der nur dem Start-Reiter gehört. */ .start-pillen { display: flex; flex-direction: column; gap: var(--space-small); width: 100%; } .start-pille { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; min-height: 92px; padding: 24px; border-radius: var(--radius-large); border: none; background: none; font: inherit; text-align: left; cursor: pointer; transition: transform 0.12s ease-out; } .start-pille:active { transform: scale(0.965); } .start-pille.gefuellt { background: linear-gradient(115deg, color-mix(in srgb, var(--pink) 88%, black) 5%, var(--neon-violett) 95%); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 10px 15px color-mix(in srgb, var(--pink) 35%, transparent); color: #fff; } .start-pille.umrandet { background: color-mix(in srgb, var(--cyan) 7%, transparent); border: 1.5px solid color-mix(in srgb, var(--cyan) 55%, transparent); color: var(--cyan); } .start-pille-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; } .start-pille.gefuellt .start-pille-icon { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.35); } .start-pille.umrandet .start-pille-icon { background: color-mix(in srgb, var(--cyan) 15%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent); } .start-pille-titel { font: var(--font-title); flex: 1; min-width: 0; } .start-pille-chevron { flex: none; opacity: 0.7; } .start-fuss { font: var(--font-micro); color: var(--ink-faint); text-align: center; margin-top: 2px; } /* ── BigAction Karten (Modus-Wahl & laufende Runde) ────────── */ .big-actions { display: flex; flex-direction: column; gap: var(--space-small); width: 100%; } .big-action { display: flex; align-items: center; gap: var(--space-medium); width: 100%; box-sizing: border-box; padding: 16px var(--space-large); border-radius: var(--radius-large); text-align: left; cursor: pointer; border: 1px solid var(--kante-klar); background: rgba(var(--veil-basis), 0.03); position: relative; overflow: hidden; transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.15s ease; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); } .big-action:active { transform: scale(0.985); opacity: 0.9; } .big-action.pink-tint { background: radial-gradient(circle at 10% 10%, rgba(255, 62, 126, 0.24) 0%, rgba(255, 62, 126, 0.06) 55%, transparent 100%); border-color: rgba(255, 62, 126, 0.42); } .big-action.cyan-tint { background: radial-gradient(circle at 10% 90%, rgba(53, 221, 211, 0.22) 0%, rgba(53, 221, 211, 0.05) 55%, transparent 100%); border-color: rgba(53, 221, 211, 0.42); } .big-action-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; } .big-action.pink-tint .big-action-icon { background: rgba(255, 62, 126, 0.15); border: 1px solid rgba(255, 62, 126, 0.35); color: var(--pink); } .big-action.cyan-tint .big-action-icon { background: rgba(53, 221, 211, 0.15); border: 1px solid rgba(53, 221, 211, 0.35); color: var(--cyan); } .big-action-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .big-action-title { font: var(--font-title); font-size: 19px; font-weight: 700; color: var(--ink); } .big-action-subtitle { font: var(--font-support); color: var(--ink-soft); } .big-action-chevron { color: var(--ink-faint); flex: none; opacity: 0.7; } /* ── Section Label ────────────────────────────────────────── */ .section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: var(--ink-faint); margin-top: var(--space-small); margin-bottom: var(--space-tight); } /* ── GameRow / Laufende Runden ────────────────────────────── */ .game-row { display: flex; align-items: center; gap: var(--space-medium); width: 100%; padding: 14px 16px; border-radius: var(--radius-large); background: rgba(var(--veil-basis), 0.03); border: 1px solid var(--kante-klar); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); transition: transform 0.15s ease, opacity 0.15s ease; text-align: left; } .game-row:active { transform: scale(0.985); } .game-row-emoji { width: 52px; height: 52px; border-radius: var(--radius-medium); background: rgba(255, 62, 126, 0.14); border: 1px solid rgba(255, 62, 126, 0.4); display: grid; place-items: center; font-size: 24px; flex: none; } .game-row-emoji.cyan { background: rgba(53, 221, 211, 0.14); border-color: rgba(53, 221, 211, 0.4); } .game-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .game-row-title { font: var(--font-rowtitle); font-size: 16px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .game-row-desc { font: var(--font-support); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .game-row-meta { display: flex; align-items: center; gap: var(--space-small); font: var(--font-micro); color: var(--ink-faint); } .status-pill { display: inline-flex; align-items: center; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pink); background: rgba(255, 62, 126, 0.14); border: 1px solid rgba(255, 62, 126, 0.35); border-radius: 999px; padding: 2px 8px; } .status-pill.cyan { color: var(--cyan); background: rgba(53, 221, 211, 0.14); border-color: rgba(53, 221, 211, 0.35); } /* ── Knöpfe ───────────────────────────────────────────────── */ button { font: inherit; color: inherit; cursor: pointer; } .knopf { display: flex; align-items: center; justify-content: center; gap: var(--space-small); width: 100%; min-height: 52px; border: none; border-radius: var(--radius-medium); background: linear-gradient(180deg, var(--pink) 0%, #e62868 100%); color: #fff; font: var(--font-headline); font-size: 16px; font-weight: 700; padding: var(--space-medium) var(--space-large); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 8px 24px rgba(255, 62, 126, 0.36); transition: transform 0.15s ease, opacity 0.15s ease; } .knopf:active:not(:disabled) { transform: scale(0.985); opacity: 0.9; } .knopf:disabled { background: rgba(var(--veil-basis), 0.08); border-color: var(--kante-klar); color: var(--ink-faint); box-shadow: none; cursor: default; opacity: 0.6; } .knopf.cyan { background: linear-gradient(180deg, var(--cyan) 0%, #20b8af 100%); color: var(--ground); box-shadow: 0 8px 24px rgba(53, 221, 211, 0.36); } .knopf.leise { background: rgba(var(--veil-basis), 0.05); color: var(--ink-soft); border: 1px solid var(--kante-klar); box-shadow: none; min-height: 48px; font-weight: 600; } /** * Nur so breit wie der Text, nicht `width: 100%` – für einen Knopf, der die * Ausnahme auf dem Bildschirm ist, nicht die Hauptaktion. Anders als * `.knopf.klein`: normale Groß-/Kleinschreibung und lesbare Schriftgröße, * keine Kapitälchen-Pille. */ .knopf.kompakt { width: auto; min-height: auto; padding: var(--space-small) var(--space-medium); border-radius: var(--radius-small); font-size: 15px; } .knopf.klein { width: auto; min-height: 36px; padding: var(--space-tight) var(--space-small); background: rgba(var(--veil-basis), 0.05); border: 1px solid var(--kante-klar); color: var(--ink-soft); font: var(--font-micro); border-radius: var(--radius-small); text-transform: uppercase; letter-spacing: 0.06em; } /** * Die getroffene Wahl unter kleinen Knöpfen – getönt wie `.dauer-kachel`, nur * in Violett, weil die Solo-Karte diese Farbe trägt (`RasterFeld`/`ZielFeld` * auf iOS tönen mit denselben 16 % und 55 %). * * **Diese Regel muss es geben.** `.knopf.klein` überschreibt den Verlauf von * `.knopf` mit derselben Fläche, die `.knopf.leise` setzt – ein gewählter * Knopf sah dadurch aus wie die ungewählten daneben, und die Wahl war auf dem * Bildschirm nicht ablesbar. */ .knopf.klein.gewaehlt { background: color-mix(in srgb, var(--violet) 16%, transparent); border-color: color-mix(in srgb, var(--violet) 55%, transparent); color: var(--violet); } select.knopf.klein { appearance: none; cursor: pointer; font: var(--font-micro); padding-right: calc(var(--space-small) + 12px); background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: right var(--space-tight) center, calc(100% - var(--space-tight) + 4px) center; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; } :where(button, input, textarea, a, [tabindex]):focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } .big-action:focus-visible, .game-row:focus-visible, .dauer-kachel:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: var(--radius-large); } .wahlfeld:focus-visible, .person-zeile:focus-visible, .team-chip:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: var(--radius-medium); } .emoji-knopf:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: var(--radius-medium); transform: scale(1.12); } .kopf-icon-knopf:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 50%; } .kopf-zurueck:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: var(--radius-medium); } /* ── Zeitstrahl / AblaufLeiste ────────────────────────────── */ .zeitstrahl { display: flex; align-items: flex-start; justify-content: space-between; position: relative; width: 100%; padding: 0 4px; margin-bottom: var(--space-tight); } .zeitstrahl::before { content: ""; position: absolute; top: 11px; left: 24px; right: 24px; height: 1px; background: var(--kante-fein); z-index: 0; } .zeitstrahl .schritt { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; position: relative; z-index: 1; } .zeitstrahl .punktzeile { width: 22px; height: 22px; display: grid; place-items: center; position: relative; } .zeitstrahl .punkt { width: 7px; height: 7px; border-radius: 50%; background: rgba(var(--veil-basis), 0.18); transition: all 0.2s ease; } .zeitstrahl .schritt.erledigt .punkt { background: var(--cyan); box-shadow: 0 0 6px rgba(53, 221, 211, 0.6); } .zeitstrahl .schritt.jetzt .punkt { width: 10px; height: 10px; background: var(--pink); box-shadow: 0 0 10px rgba(255, 62, 126, 0.9); } .zeitstrahl .schritt.jetzt .punktzeile::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 62, 126, 0.28); animation: zeitstrahl-puls 1.6s infinite ease-out; } @keyframes zeitstrahl-puls { 0% { transform: scale(0.55); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } } .zeitstrahl .schritt span:last-child { font-size: 10px; font-weight: 500; color: var(--ink-faint); text-align: center; line-height: 1.1; white-space: nowrap; } .zeitstrahl .schritt.jetzt span:last-child { color: var(--ink); font-weight: 700; } /* ── Garderobenmarke (Einladungs-Ticket) ───────────────────── */ .garderobenmarke { display: flex; flex-direction: column; align-items: center; width: 100%; box-sizing: border-box; padding: var(--space-large); border-radius: var(--radius-hero); background: linear-gradient(135deg, rgba(255, 62, 126, 0.13), rgba(var(--veil-basis), 0.04)); border: 1px solid var(--kante-klar); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); position: relative; overflow: hidden; } .marke-kopf { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; width: 100%; } .marke-emoji { font-size: 34px; line-height: 1; } .marke-titel { font: var(--font-display); font-size: 24px; font-weight: 800; color: var(--ink); margin: 4px 0 0 0; } .marke-gastgeber { font: var(--font-support); color: var(--ink-soft); } .marke-perforation { width: calc(100% + 2 * var(--space-large)); margin: var(--space-medium) calc(-1 * var(--space-large)); height: 1px; background: repeating-linear-gradient(90deg, var(--kante-klar), var(--kante-klar) 6px, transparent 6px, transparent 12px); position: relative; } .marke-abriss { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-medium); width: 100%; } .marke-qr-box { /* Das Bild, das man jemandem hinhält – es darf so groß sein wie der Code daneben laut ist. Auf iOS sind es 112 pt in einer Handbreite; im Browser steht mehr Fläche zur Verfügung, und ein zu kleiner QR-Code lässt sich aus einem Meter Abstand nicht mehr scannen. */ width: 168px; height: 168px; border-radius: var(--radius-medium); background: #ffffff; padding: 8px; flex: none; display: grid; place-items: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); } .marke-qr-box .qr-bild { width: 100%; height: 100%; display: block; } .marke-details { display: flex; flex-direction: column; gap: var(--space-tight); /* Schmäler als das wird die Spalte nicht gequetscht – sie bricht dann lieber unter das QR-Bild, statt die Ziffern abzuschneiden. */ flex: 1 1 200px; min-width: 0; } .marke-code-zeile { display: flex; align-items: center; gap: var(--space-small); } .marke-code { font-family: var(--slab); font-weight: 800; font-size: clamp(26px, 2.4vw, 34px); color: var(--ink); letter-spacing: 0.06em; line-height: 1.1; white-space: nowrap; } /** * Kopieren als kleines Zeichen neben den Ziffern – dieselbe Lösung wie * `kopierZeichen` auf iOS: Es steht dort, wo der Code steht, statt als * eigener Knopf in voller Breite darunter. */ .marke-kopie { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--kante-klar); background: rgba(var(--veil-basis), 0.07); color: var(--ink-soft); transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .marke-kopie:hover { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 45%, transparent); } .marke-kopie:active { transform: scale(0.94); } /** * Die beiden Wege, die der Browser zusätzlich braucht: den Link verschicken * (auf iOS macht das das Teilen-Blatt) und den Code entziehen (auf iOS das * Kontextmenü). Sie stehen als kleine Zeilen unter dem Code – erreichbar, * aber nicht in der Lautstärke von „Weiter". */ .marke-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-tight) var(--space-medium); margin-top: 2px; } .marke-tat { background: none; border: none; padding: 2px 0; color: var(--ink-soft); font: var(--font-support); font-weight: 600; text-decoration: underline; text-decoration-color: var(--kante-stark); text-underline-offset: 3px; transition: color 0.15s ease; } .marke-tat:hover { color: var(--cyan); text-decoration-color: color-mix(in srgb, var(--cyan) 60%, transparent); } .marke-tat:active { opacity: 0.7; } /** * Die Bühne des Einladen-Bildschirms. * * **Am Handy untereinander, im Browser nebeneinander.** Marke, Mitspieler und * „Weiter" ergeben gestapelt gut 900 px; auf einem 14-Zoll-Notebook (830 px * Fensterhöhe) reicht das nicht, und wer sehen will, wer schon da ist, muss * scrollen – während rechts und links vom Inhalt leerer Verlauf steht. * Zwei Spalten füllen das Fenster und lassen den Bildschirm in einem Blick. */ .einladen-buehne { display: flex; flex-direction: column; gap: var(--space-large); width: 100%; } .einladen-spalte { display: flex; flex-direction: column; gap: var(--space-large); } /** * Die Bühne eines Aufbauschritts – am Handy eine Spalte, im Browser zwei * (die Stufe steht weiter unten bei den übrigen Fenstermaßen). */ .aufbau-buehne { display: flex; flex-direction: column; gap: var(--space-large); width: 100%; } @media (min-width: 900px) { .einladen-buehne { flex-direction: row; align-items: flex-start; } .einladen-buehne > .garderobenmarke { flex: 1 1 46%; min-width: 0; } .einladen-buehne > .einladen-spalte { flex: 1 1 54%; min-width: 0; } } /* ── Flächen / Glass Panel ────────────────────────────────── */ .karte { background: rgba(var(--veil-basis), 0.03); border: 1px solid var(--kante-klar); border-radius: var(--radius-large); padding: var(--space-large); display: flex; flex-direction: column; gap: var(--space-medium); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); } .karte.stark { border-color: var(--kante-stark); border-radius: var(--radius-hero); } .karte.cyan-licht { background: radial-gradient(circle at 10% 90%, rgba(53, 221, 211, 0.20) 0%, rgba(53, 221, 211, 0.05) 55%, transparent 100%); border-color: rgba(53, 221, 211, 0.42); } h1 { font: var(--font-display); font-size: 26px; line-height: 1.2; } h2 { font: var(--font-title); } h3 { font: var(--font-headline); } .leise-zeile { font: var(--font-support); color: var(--ink-soft); } .mikro { font: var(--font-micro); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; } /* * **Kapitälchen sind eine Überschrift, kein Kleingedrucktes.** „Satz 1 von 9" * und „von dir · selbst gemeldet" sind Sätze und werden gelesen, nicht * überflogen – in Versalien las sich beides wie eine Rubrik. */ .mikro.normal { text-transform: none; letter-spacing: normal; } .trenner { height: 1px; background: var(--kante-fein); border: none; } /* ── Eingabefelder ────────────────────────────────────────── */ label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--ink-faint); margin-bottom: var(--space-tight); } .feld { width: 100%; min-height: 52px; padding: var(--space-medium) var(--space-large); border: 1px solid var(--kante-klar); border-radius: var(--radius-medium); background: rgba(150, 111, 255, 0.07); color: var(--ink); font: var(--font-body); font-size: 16px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .feld::placeholder { color: var(--ink-faint); } .feld:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 12px rgba(53, 221, 211, 0.35); } .feld.code { font-family: var(--slab); font-weight: 800; font-size: 32px; text-align: center; letter-spacing: 0.25em; padding-left: calc(var(--space-large) + 0.25em); min-height: 64px; } textarea.feld { min-height: 88px; resize: vertical; line-height: 1.4; } /* ── Emoji-Wahl & Sinnbild-Wahl ───────────────────────────── */ .emoji-wahl { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-tight); } .emoji-knopf { aspect-ratio: 1; min-height: 46px; border: 1px solid var(--kante-fein); border-radius: var(--radius-small); background: rgba(var(--veil-basis), 0.03); font-size: 24px; line-height: 1; display: grid; place-items: center; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .emoji-knopf:active { transform: scale(0.92); } .emoji-knopf[aria-pressed="true"] { border-color: var(--pink); background: rgba(255, 62, 126, 0.20); box-shadow: 0 0 10px rgba(255, 62, 126, 0.4); } .emoji-vorschau-box { width: 52px; height: 52px; border-radius: var(--radius-medium); background: rgba(var(--veil-basis), 0.06); border: 1px solid var(--kante-klar); display: grid; place-items: center; font-size: 26px; flex: none; } /* ── Zeilen und Avatare ───────────────────────────────────── */ .liste { display: flex; flex-direction: column; gap: var(--space-small); list-style: none; } .zeile { display: flex; align-items: center; gap: var(--space-medium); width: 100%; min-height: 56px; padding: var(--space-small) var(--space-medium); border: 1px solid var(--kante-fein); border-radius: var(--radius-medium); background: rgba(var(--veil-basis), 0.02); text-align: left; transition: transform 0.15s ease; } .zeile.antippbar { cursor: pointer; } .zeile.antippbar:active { transform: scale(0.985); } .zeile .waechst { flex: 1; min-width: 0; } .zeile .name { font: var(--font-label); font-weight: 700; color: var(--ink); } .avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; background: rgba(var(--veil-basis), 0.08); border: 1.5px solid var(--spieler-farbe, var(--violet)); overflow: hidden; box-shadow: 0 0 8px color-mix(in srgb, var(--spieler-farbe, var(--violet)) 40%, transparent); } .avatar img { width: 100%; height: 100%; object-fit: cover; } /* ── Modus-Wahl Vorschau ──────────────────────────────────── */ .mini-karten-vorschau { position: relative; width: 52px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; } .mini-karten-stapel { position: relative; width: 22px; height: 28px; } .mini-karte-blatt { position: absolute; width: 22px; height: 28px; border-radius: 4px; background: rgba(150, 111, 255, 0.10); border: 1px solid var(--kante-klar); } .mini-karte-blatt:nth-child(1) { left: -13px; top: 3px; } .mini-karte-blatt:nth-child(2) { left: 0px; top: 0px; } .mini-karte-blatt:nth-child(3) { left: 13px; top: -3px; border-color: rgba(255, 62, 126, 0.75); } .mini-gruppe-grid { display: grid; grid-template-columns: repeat(4, 7.5px); grid-template-rows: repeat(4, 7.5px); gap: 1.5px; padding: 3px; border-radius: 6px; border: 1px solid rgba(53, 221, 211, 0.55); } .mini-gruppe-zelle { border-radius: 1.5px; opacity: 0.85; } /* ── Bingokarte ───────────────────────────────────────────── */ /* Die Felder selbst tragen keine Klasse mehr: `ansicht.js` setzt sie seit dem Entwurf „Karte Flug" mit eigenen Stilen je Feld. Hier steht nur noch das Raster, das sie hält. */ /* * **Die Kachel wächst mit, bleibt aber eine Kachel.** Ohne Deckel würde eine * 3×3-Karte in der breiten Bühne (`.rahmen.breit`) auf über 200 pt pro Feld * gezogen – viel leere Fläche um einen kurzen Satz. Der Deckel skaliert mit * der Spaltenzahl, damit ein 5×5-Raster mehr Breite bekommt als ein 3×3, und * zentriert sich selbst, sobald die Bühne breiter ist als sein Bedarf. */ .raster { display: grid; grid-template-columns: repeat(var(--spalten, 3), 1fr); gap: var(--zellenfuge, var(--space-small)); width: 100%; max-width: calc(var(--spalten, 3) * 160px); margin: 0 auto; padding: 0 12px; box-sizing: border-box; container-type: inline-size; } /* Die Modus-Vorschau der Solo-Karte: ein 3×3 statt des 4×4 der Teamkarte, in Violett statt Türkis – dieselbe Farbe, die die Karte selbst trägt. */ .mini-gruppe-grid.solo { grid-template-columns: repeat(3, 9px); grid-template-rows: repeat(3, 9px); border-color: color-mix(in srgb, var(--violet) 55%, transparent); } /* Ein Feld der Solo-Karte. **Farben setzt `ansicht.js` je Feld** – Treffer, Siegfeld und Lücke unterscheiden sich pro Kachel, genau wie auf der Spielkarte seit „Karte Flug". Hier stehen nur die Maße und das, was für alle gilt. */ /* Die Kachelbreite kommt aus dem Container (`.raster`, `container-type: inline-size`), nicht aus dem Rasterfluss selbst – `cqw` misst also genau die Breite, die `1fr` gerade wirklich bekommt. `--zk` ist das Gegenstück zu `kante` in `SoloKarteView.swift`: (Containerbreite − Zwischenräume) / Spalten. */ .solo-feld { --zk: calc((100cqw - (var(--spalten, 3) - 1) * var(--zellenfuge, 6px)) / var(--spalten, 3)); aspect-ratio: 1 / var(--hoehenfaktor, 1); display: flex; align-items: center; justify-content: center; position: relative; padding: clamp(5px, calc(var(--zk) * 0.06), 7px); border-radius: var(--radius-medium); border: 1px solid var(--kante-klar); font-family: var(--system); font-weight: 500; font-size: clamp(10px, calc(7px + var(--zk) * 0.07), 16px); text-align: center; line-height: 1.25; overflow: hidden; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.2s ease; } .solo-feld:hover:not(:disabled) { transform: translateY(-1px); } .solo-feld:disabled { cursor: default; opacity: 0.75; } /* Lange Sätze auf kleinen Kacheln: lieber umbrechen als überlaufen. */ .solo-feld > span:first-child { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } /* Der Haken-Kreis bei einem Treffer – Gegenstück zu `SoloFeld.hakenGroesse`. */ .solo-feld-haken { position: absolute; top: clamp(4px, calc(var(--zk) * 0.05), 6px); right: clamp(4px, calc(var(--zk) * 0.05), 6px); width: clamp(14px, calc(var(--zk) * 0.16), 22px); height: clamp(14px, calc(var(--zk) * 0.16), 22px); border-radius: 50%; background: #fff; color: color-mix(in srgb, var(--pink) 85%, black); font-size: clamp(8px, calc(var(--zk) * 0.09), 12px); font-weight: 900; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } /* Eine schon eingetragene Vorhersage – zusammengeklappt, mit „Ändern". */ .steht { display: flex; align-items: flex-start; gap: var(--space-small); padding: var(--space-small) var(--space-medium); border: 1px solid var(--kante-fein); border-radius: var(--radius-medium); background: rgba(var(--veil-basis), 0.02); } .steht .knopf { width: auto; min-height: 36px; padding: var(--space-tight) var(--space-small); } /* ── Phasenkopf: die Farbe sitzt an der Kante, nicht im Satz ── */ /* * `.dran`/`.gut` färbten die ganze Karte – und damit auch die Überschrift, die * dadurch pink war. In der App ist sie `Theme.ink` und getönt wird der Rahmen; * eine pinke Überschrift über einem violetten Rahmen sah aus wie ein Fehler. */ .phasenkopf h1 { color: var(--ink); } .phasenkopf.dran { border-color: color-mix(in srgb, var(--pink) 45%, transparent); } .phasenkopf.gut { border-color: color-mix(in srgb, var(--cyan) 45%, transparent); } /* ── Spieldauer: die Wahl zeigt, was man bekommt ──────────── */ /* * Gegenstück zu `ScopePhase`/`Rastervorschau` in der App. Vorher standen hier * zwei Zeilen mit Radioknopf untereinander – ein Wort lässt sich deuten, ein * Muster nicht. Die Diagonale zeigt, wie lang eine Linie wird. */ .dauer-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-small); } .dauer-kachel { display: flex; flex-direction: column; align-items: center; gap: var(--space-small); padding: var(--space-medium) var(--space-small); border: 1px solid var(--kante-klar); border-radius: var(--radius-small); background: transparent; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .dauer-kachel:active { transform: scale(0.985); } /* Getönt bleibt allein die Wahl – dort ist die Farbe die Aussage. */ .dauer-kachel.gewaehlt { background: color-mix(in srgb, var(--pink) 16%, transparent); border-color: color-mix(in srgb, var(--pink) 55%, transparent); } .dauer-titel { font: var(--font-rowtitle); color: var(--ink); } .dauer-kachel.gewaehlt .dauer-titel { color: var(--pink); } .dauer-unter { font: var(--font-micro); color: var(--ink-faint); text-align: center; } .raster-vorschau { display: grid; grid-template-columns: repeat(var(--raster-spalten), 19px); gap: 5px; } /* Kleiner bei größeren Rastern, damit die Vorlage immer gleich breit ist. */ .raster-vorschau.eng { grid-template-columns: repeat(var(--raster-spalten), 15px); } .raster-zelle { aspect-ratio: 1; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--kante-klar) 70%, transparent); } .raster-zelle.auf-linie { border-color: transparent; background: linear-gradient(140deg, var(--treffer-a), var(--treffer-b)); } /* ── Schreiben: erst die Person, dann Satz für Satz ───────── */ /* * Gegenstück zu `WritingPhase` und `SchreibDeck` in der App. Vorher stand * jeder Auftrag als eigenes Feld untereinander, jedes mit eigenem Knopf. */ .person-zeile { display: flex; align-items: center; gap: var(--space-medium); width: 100%; padding: var(--space-medium) var(--space-large); border-radius: var(--radius-large); /* Jede Person hat ihre Farbe – auch als Zeile. Der Zustand steht daneben * in der Kapsel, nie in der Kante: Spielerfarben gehören einer Person. */ background: color-mix(in srgb, var(--spieler-farbe, var(--violet)) 10%, transparent); border: 1px solid color-mix(in srgb, var(--spieler-farbe, var(--violet)) 60%, transparent); text-align: left; cursor: pointer; transition: transform 0.15s ease; } .person-zeile:active { transform: scale(0.985); } .person-name { font: var(--font-title); color: var(--ink); } .zeilen-pfeil { flex: none; color: var(--ink-faint); font-size: 20px; line-height: 1; } .noch-pille { flex: none; font-size: 11px; font-weight: 700; color: var(--pink); padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--pink) 14%, transparent); border: 1px solid color-mix(in srgb, var(--pink) 40%, transparent); } .avatar.gross { width: 52px; height: 52px; font-size: 26px; } .avatar.klein { width: 34px; height: 34px; font-size: 17px; } .schreib-kopf { display: flex; align-items: center; gap: var(--space-small); } /* * Die Fortschrittskette: ein Glied je Auftrag – kein Prozentbalken. Bei vier * Sätzen sagt „25 %" weniger als ein Glied von vieren. Die erledigten Glieder * tragen ihren Platz auf der Gewinnlinie von Pink nach Cyan. */ .perlen { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; height: 4px; } .perle { border-radius: 999px; /* Die leeren Plätze sind nicht grau – ein weißer Schleier würde auf * tiefschwarzem Grund zu Grau; die schwache Tönung bleibt Teil der Welt. */ background: color-mix(in srgb, var(--violet) 22%, transparent); } .perle.voll, .perle.jetzt { background: color-mix(in oklab, var(--pink), var(--cyan) calc(var(--anteil, 0) * 100%)); } .perle.jetzt { opacity: 0.45; } /* Die einzige Karte mit deckender Fläche – sie trägt die Eingabe. */ .schreib-karte { display: flex; flex-direction: column; gap: var(--space-medium); border-color: color-mix(in srgb, var(--pink) 30%, transparent); background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--pink) 20%, transparent), transparent 70%), var(--ground-lift); } .schreib-karte h3 { font: var(--font-headline); color: var(--ink); } .steht-liste { max-height: 260px; overflow-y: auto; } /* ── Übersicht: der Zeitstrahl der Runde ──────────────────── */ /* * Gegenstück zu `Zeitstrahl` in der App. Er läuft rückwärts durch die Zeit: * Wer die Seite aufmacht, um zu sehen, was gerade passiert ist, soll nicht * erst an allem vorbeiscrollen, was er schon kennt. */ /* **Ohne Pink seit dem 30.08.2026.** Pink heißt „was jetzt dran ist" und * höchstens einmal je Bildschirm; der Gewinn ist das Gegenteil davon – eine * Tatsache, die sich über die ganze Runde nicht ändert. Mit Fläche und Kante * las sich die Zeile als Karte und stand als zweite laute Kante direkt über * der türkisen Stand-Karte. In derselben Zeile steht jetzt der Stand der * Karte, wofür vorher eine eigene Kapitälchen-Überschrift da war. */ .gewinn-zeile { display: flex; align-items: center; gap: var(--space-small); font: var(--font-support); color: var(--ink-soft); padding: 0 var(--space-tight); margin: 0; } .gewinn-zeile .trennpunkt { color: var(--ink-faint); } .stand-karte { display: flex; flex-direction: column; gap: var(--space-tight); } .stand-karte h3 { font: var(--font-title); color: var(--ink); } /* **Punkte statt Balken (30.08.2026).** Überschrift, Unterzeile und Balken * sagten dasselbe dreimal – als Satz, als Bruch und als Grafik. Vier Felder, * drei davon voll, sagen es einmal und zeigen zusätzlich, wie lang die Linie * überhaupt ist. Die Unterzeile trägt der `aria-label` weiter. */ .linienpunkte { display: flex; gap: var(--space-tight); margin-top: var(--space-tight); } .linienpunkt { flex: 1; height: 7px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--cyan) 55%, transparent); } .linienpunkt.voll { border-color: transparent; background: var(--cyan); } .sieg-karte { border-color: color-mix(in srgb, var(--pink) 45%, transparent); background: color-mix(in srgb, var(--pink) 12%, transparent); } .sieg-karte h2 { font: var(--font-title); color: var(--ink); } /* * Das Band trägt den Bogen der Runde – Pink oben, wo das Jüngste steht, * Türkis unten am Anfang. Es liegt hinter den Einträgen, damit die Punkte * darauf sitzen. */ .strahl { position: relative; display: flex; flex-direction: column; } .strahl::before { content: ""; position: absolute; left: 5px; top: 7px; bottom: 18px; width: 1.5px; background: linear-gradient(180deg, var(--pink), color-mix(in srgb, var(--violet) 55%, transparent), var(--cyan)); opacity: 0.85; } .strahl-eintrag { position: relative; display: flex; align-items: flex-start; gap: var(--space-medium); padding-bottom: var(--space-medium); } .bandpunkt { flex: none; width: 11px; height: 11px; margin-top: 4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 22%, transparent); } /* **Der Punkt trägt zwei Auskünfte.** Türkis heißt „ein Treffer", Pink * zusätzlich „das ist neu für dich". */ .bandpunkt.neu { background: var(--pink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 22%, transparent); } /* **Die Uhrzeit steht über ihrer Gruppe, nicht in jeder Zeile (30.08.2026).** * Sechs Meldungen aus zwei Minuten trugen sechsmal fast dieselbe Zahl vor sich * her – in der Spalte, die zuerst gelesen wird. Leiser als der Tag darüber, * sonst stünden zwei gleich laute Überschriften übereinander. */ .zeit-kopf { margin-left: calc(11px + var(--space-medium)); margin-bottom: var(--space-tight); font: 600 11px ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; color: var(--ink-faint); } /* **Was seit dem letzten Besuch dazugekommen ist** – siehe `js/gelesen.js`. */ .neu-trenner { display: flex; align-items: center; gap: var(--space-small); margin-left: calc(11px + var(--space-medium)); margin-bottom: var(--space-small); } .neu-strich { flex: 1; height: 1px; background: color-mix(in srgb, var(--pink) 45%, transparent); } .neu-zahl { font: 700 10px var(--system); letter-spacing: 1px; text-transform: uppercase; color: var(--pink); } .strahl-satz { font: var(--font-body); color: var(--ink); } .strahl-name { font-weight: 700; color: var(--spieler-farbe, var(--ink)); } /* Der Tag steht als Überschrift, nicht in jeder Zeile – eingerückt neben * dem Band, nicht darauf. */ .tages-kopf { margin-left: calc(11px + var(--space-medium)); } /* ── Reiterleiste (Tab Bar aus iOS) ───────────────────────── */ .reiter { display: flex; gap: var(--space-tight); background: rgba(var(--veil-basis), 0.04); padding: 4px; border-radius: var(--radius-medium); border: 1px solid var(--kante-klar); } .reiter button { flex: 1; /* Trägt den Zähler in der Ecke – siehe `.chat-zahl`. */ position: relative; min-height: 40px; border-radius: calc(var(--radius-medium) - 3px); background: none; font: var(--font-label); font-size: 14px; color: var(--ink-soft); display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.15s ease; } .reiter button[aria-pressed="true"] { color: var(--ink); background: rgba(255, 62, 126, 0.16); border: 1px solid rgba(255, 62, 126, 0.4); font-weight: 700; box-shadow: 0 0 10px rgba(255, 62, 126, 0.25); } /* ── Modals / Sheets (Blatt) ──────────────────────────────── */ .blatt { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 0; animation: blatt-fade 0.2s ease-out; } @keyframes blatt-fade { from { opacity: 0; } to { opacity: 1; } } .blatt > div { width: 100%; max-width: 440px; max-height: 86vh; overflow-y: auto; background: var(--schwebe-grund); border: 1px solid var(--kante-stark); border-bottom: none; border-top-left-radius: var(--radius-hero); border-top-right-radius: var(--radius-hero); border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding: var(--space-large); padding-bottom: max(var(--space-large), env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--space-medium); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.16); animation: blatt-slide 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); scrollbar-width: thin; scrollbar-color: var(--kante-klar) transparent; } .blatt > div::-webkit-scrollbar { width: 6px; } .blatt > div::-webkit-scrollbar-track { background: transparent; } .blatt > div::-webkit-scrollbar-thumb { background: var(--kante-klar); border-radius: 999px; } .blatt-griff { width: 36px; height: 5px; border-radius: 999px; background: rgba(var(--veil-basis), 0.22); margin: -4px auto 4px auto; flex: none; } @keyframes blatt-slide { from { transform: translateY(40px); } to { transform: translateY(0); } } @keyframes blatt-dialog-in { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* ── Meldungen & Feedback ─────────────────────────────────── */ .hinweis { border: 1px solid var(--kante-klar); border-radius: var(--radius-medium); padding: var(--space-small) var(--space-medium); font: var(--font-support); color: var(--ink-soft); background: rgba(var(--veil-basis), 0.03); } .hinweis.schlecht { border-color: var(--pink); background: rgba(255, 62, 126, 0.12); color: var(--ink); } .hinweis.gut { border-color: var(--cyan); background: rgba(53, 221, 211, 0.12); color: var(--ink); } /* ── Kleinteile ───────────────────────────────────────────── */ .reihe { display: flex; gap: var(--space-small); align-items: center; } .reihe.verteilt { justify-content: space-between; } .reihe.zentriert { justify-content: center; } /* Drei Punkte, die warten – neben „verbindet" und „Code entsteht". Die Klasse stand seit dem Umbau in `js/ansicht.js`, die Regel dazu nie: Drei leere `` ohne Größe und ohne Farbe sind im Browser nichts, also sah man an vier Stellen genau gar nichts warten. `aria-hidden` sitzt am Behälter, weil der Satz daneben schon sagt, was gerade läuft – ein Vorleseprogramm soll nicht dreimal „Punkt" hinterherschieben. Die Bewegung braucht hier keinen eigenen Riegel: Ganz unten steht die Regel, die jede Animation abstellt, sobald das System sie abbestellt hat. **Deshalb ist der Ruhezustand der sichtbare** – die Punkte stehen voll da und die Welle dimmt sie kurz weg, nicht umgekehrt. Andersherum fröre die angehaltene Animation auf dem blassen Bild ein, und ausgerechnet wer die Bewegung abbestellt hat, bekäme den Hinweis am schlechtesten zu sehen. */ .punkte { display: inline-flex; gap: var(--space-hairline); align-items: center; } .punkte i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint); opacity: 1; animation: punkte-puls 1.2s infinite ease-in-out; } .punkte i:nth-child(2) { animation-delay: 0.16s; } .punkte i:nth-child(3) { animation-delay: 0.32s; } @keyframes punkte-puls { 0%, 100% { opacity: 1; } 45% { opacity: 0.2; } } .spalte { display: flex; flex-direction: column; gap: var(--space-small); } .waechst { flex: 1; min-width: 0; } .gut { color: var(--cyan); } .dran { color: var(--pink); } /* **Die Breite wächst mit dem Fenster – gestaffelt, nicht endlos.** Ein Formular oder eine Zeilenliste wird ab einer gewissen Breite nur schwerer zu lesen, keine Zeile darin wird dadurch wichtiger; die Stufen halten die Zeilenlänge vernünftig und nutzen trotzdem spürbar mehr vom Fenster als die feste Handybreite von vorher. */ @media (min-width: 640px) { .rahmen { max-width: 480px; padding: var(--space-section); } .blatt { align-items: center; padding: var(--space-large); } .blatt > div { max-width: 480px; max-height: calc(100vh - 64px); border: 1px solid var(--kante-stark); border-radius: var(--radius-hero); padding: var(--space-section); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 1px 1px var(--kante-klar), inset 0 1px 0 rgba(255, 255, 255, 0.16); animation: blatt-dialog-in 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .blatt-griff { display: none; } } @media (min-width: 900px) { .rahmen { max-width: 580px; } .blatt > div { max-width: 540px; } } @media (min-width: 1280px) { .rahmen { max-width: 640px; } .blatt > div { max-width: 580px; } } /* **Die Bühne einer laufenden Runde darf breiter werden als ein Formular.** Einladung, Schreiben, Karte und Zeitstrahl sind keine Fließtexte, die eine Zeilenlänge einhalten müssen – Kartenraster, Spielerliste und Ticket tragen mehr Breite gut. `.breit` sitzt am selben `.rahmen`, den `ansicht.js` für genau diese Bildschirme zusätzlich vergibt (siehe `zeichneAlles`); Start und Beitreten bleiben bei der schmaleren Stufe – zwei große Knöpfe mittig im Fenster wirken breitgezogen eher verloren als geräumig. */ @media (min-width: 900px) { .rahmen.breit { max-width: 720px; } } @media (min-width: 1280px) { .rahmen.breit { max-width: 860px; } } /* **Der Einladen-Bildschirm steht in zwei Spalten und braucht dafür Platz.** In 860 px bleiben der Marke keine 400 – QR-Bild und Ziffern rücken dann übereinander, und der halbe Bildschirm bleibt leerer Verlauf. `ansicht.js` vergibt `.weit` nur in der Einladephase. */ @media (min-width: 1100px) { .rahmen.breit.weit { max-width: 980px; } } @media (min-width: 1440px) { .rahmen.breit.weit { max-width: 1120px; } } /* **Die Fragekarten eines Aufbauschritts stehen nebeneinander, sobald das Fenster es hergibt.** Derselbe Grund wie bei `.einladen-buehne`: Alles untereinander ergibt auf dem Schritt „Dauer" rund 1200 px, während links und rechts leerer Verlauf bleibt – auf einem 14-Zoll-Notebook rollt man dann an „Weiter" vorbei, also an der Hauptaktion. `align-items: start` lässt jede Karte ihre eigene Höhe behalten; ohne das zöge die höhere ihre Nachbarin mit in die Länge. Der Team-Builder trägt Namen in Kästen und nimmt die volle Breite: Zwei Teamkästen nebeneinander in einer halben Spalte sind schmäler als die Namen darin. */ @media (min-width: 900px) { .aufbau-buehne { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-large); align-items: start; } .aufbau-buehne > .team-builder { grid-column: 1 / -1; } } /* Ab hier ist Platz für eine dritte Spalte – und der Team-Builder rückt neben die Fragen, statt unter ihnen eine eigene Reihe zu beginnen. Er beansprucht die Spalten 2 und 3 und landet damit neben der letzten Fragekarte; ohne das lief der Bildschirm mit offenem Builder wieder über die Fensterhöhe. */ @media (min-width: 1200px) { .aufbau-buehne { grid-template-columns: repeat(3, 1fr); } .aufbau-buehne > .team-builder { grid-column: 2 / -1; } } /* **Am Handy bleiben QR und Ziffern nebeneinander, nur kleiner** – so wie in der App. Ohne diese Stufe passt das 168er Bild nicht neben die Ziffern, bricht darüber und schiebt allein schon eine halbe Bildschirmhöhe. */ @media (max-width: 560px) { .marke-qr-box { width: 124px; height: 124px; padding: 6px; } .marke-details { flex: 1 1 140px; } } @keyframes wackel { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-3px); } 45% { transform: translateX(3px); } 70% { transform: translateX(-2px); } } @keyframes einblenden { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ── Wahlfelder (Spielfeld & Teambildung) ─────────────────── */ .wahlfeld { display: flex; align-items: center; gap: var(--space-medium); padding: var(--space-small) var(--space-medium); border-radius: var(--radius-medium); border: 1px solid var(--kante-klar); background: transparent; cursor: pointer; text-align: left; transition: all 0.15s ease; width: 100%; box-sizing: border-box; } .wahlfeld:active { transform: scale(0.985); } .wahlfeld.gewaehlt { background: color-mix(in srgb, var(--pink) 14%, transparent); border-color: color-mix(in srgb, var(--pink) 50%, transparent); } .wahlfeld-bild { flex: none; width: 44px; height: 44px; display: grid; place-items: center; } .wahlfeld-titel { font: var(--font-title); font-size: 15px; font-weight: 700; color: var(--ink); } .wahlfeld.gewaehlt .wahlfeld-titel { color: var(--pink); } .wahlfeld-zeile { font: var(--font-micro); color: var(--ink-soft); margin-top: 1px; } .wahlfeld-hinweis { font: var(--font-micro); color: var(--ink-faint); margin-top: 1px; } /* ── Team-Builder ────────────────────────────────────────── */ .team-builder { display: flex; flex-direction: column; gap: var(--space-small); width: 100%; } .team-builder-kopf { display: flex; align-items: center; justify-content: space-between; width: 100%; } .team-builder-titel { font: var(--font-headline); font-size: 16px; font-weight: 700; color: var(--ink); } .team-builder-leeren { appearance: none; background: none; border: none; padding: 2px 4px; font: var(--font-micro); font-weight: 600; color: var(--cyan); cursor: pointer; text-transform: none; transition: opacity 0.15s ease; } .team-builder-leeren:hover { opacity: 0.8; } .team-builder-vorrat { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .team-chip { appearance: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--spieler-farbe, var(--cyan)) 14%, transparent); border: 1px solid color-mix(in srgb, var(--spieler-farbe, var(--cyan)) 48%, transparent); font: var(--font-micro); font-weight: 500; color: var(--ink); cursor: pointer; transition: transform 0.12s ease, opacity 0.15s ease; box-sizing: border-box; } .team-chip:active { transform: scale(0.95); } .team-chip .punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--spieler-farbe, var(--cyan)); flex: none; } .team-chip .name { color: var(--ink); line-height: 1; } .team-chip .entfernen { appearance: none; background: none; border: none; padding: 0 0 0 2px; margin: 0; font-size: 11px; font-weight: 700; line-height: 1; color: var(--ink-faint); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color 0.15s ease; } .team-chip .entfernen:hover, .team-chip:hover .entfernen { color: var(--pink); } .team-kaesten { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-small); margin-top: var(--space-tight); } .team-kasten { display: flex; flex-direction: column; gap: 6px; padding: var(--space-small) var(--space-medium); border-radius: var(--radius-small); background: rgba(var(--veil-basis), 0.05); border: 1px solid var(--kante-klar); min-height: 56px; box-sizing: border-box; } .team-kasten-kopf { display: flex; align-items: center; justify-content: space-between; font: var(--font-rowtitle); font-size: 13px; font-weight: 700; color: var(--ink); } .team-kasten-kopf .mikro { color: var(--ink-faint); font-weight: 500; font-size: 11px; } .team-kasten-leer { font: var(--font-micro); color: var(--ink-faint); padding: 2px 0; } .knopf-glas-voll { appearance: none; width: 100%; padding: 10px 14px; border-radius: var(--radius-medium); background: rgba(var(--veil-basis), 0.06); border: 1px solid var(--kante-fein); font: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: center; text-transform: none; transition: all 0.15s ease; margin-top: 4px; } .knopf-glas-voll:active { transform: scale(0.985); background: rgba(var(--veil-basis), 0.12); } /* ── Karte Flug: Kopfleiste, Legende & Feedback ──────────── */ .karten-kopf-leiste { display: flex; align-items: center; gap: 8px; padding: 0 4px; margin-bottom: 8px; width: 100%; } .karten-kopf-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--du-farbe, var(--pink)); flex: none; } .karten-kopf-titel { font: var(--font-headline); font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; } .karten-kopf-trenner { color: var(--ink-faint); font-size: 11px; } .karten-kopf-zusatz { color: var(--ink-soft); font-size: 11px; font-weight: 500; white-space: nowrap; } .umschalt-kapsel { appearance: none; border: 0; cursor: pointer; display: flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--cyan) 14%, transparent); color: var(--cyan); font: var(--font-support); font-size: 11px; font-weight: 600; margin-left: auto; white-space: nowrap; transition: all 0.15s ease; } .umschalt-kapsel:active { transform: scale(0.96); } .legende-huelle { overflow: hidden; padding: 0 4px; box-sizing: border-box; transition: max-height 0.46s cubic-bezier(0.62, 0.03, 0.16, 1), opacity 0.26s ease, margin-top 0.46s cubic-bezier(0.62, 0.03, 0.16, 1); } .legende-liste { display: flex; gap: 6px; flex-wrap: wrap; } .legende-kapsel { appearance: none; cursor: pointer; display: flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--violet) 8%, transparent); border: 1px solid var(--kante-fein); font: var(--font-support); font-size: 11px; transition: all 0.15s ease; } .legende-kapsel.aktiv { background: color-mix(in srgb, var(--spieler-farbe, var(--cyan)) 20%, transparent); border-color: var(--spieler-farbe, var(--cyan)); } .legende-kapsel .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--spieler-farbe, var(--cyan)); flex: none; } .legende-kapsel .name { color: var(--ink-soft); font-weight: 400; } .legende-kapsel.ist-ich .name { color: var(--ink); font-weight: 700; } .legende-kapsel .zahl { color: var(--ink-faint); font-weight: 500; } .karten-fuss { padding: 16px 12px 0; text-align: center; font: var(--font-support); font-size: 13px; color: var(--ink-faint); line-height: 1.5; } .karten-hinweis-toast { margin: 14px 4px 0; padding: 10px 14px; border-radius: var(--radius-medium); text-align: center; background: color-mix(in srgb, var(--hinweis-farbe, var(--pink)) 16%, transparent); border: 1px solid color-mix(in srgb, var(--hinweis-farbe, var(--pink)) 50%, transparent); font: var(--font-support); font-size: 12px; font-weight: 500; color: var(--ink); animation: einblenden 0.22s ease; } .karten-mulde { transition: transform 0.15s ease, opacity 0.3s ease; } .karten-mulde:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 14px; } @media (hover: hover) { .karten-mulde[tabindex="0"]:hover { transform: translateY(-2px); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition: none !important; } } /* ── Rechtstexte ──────────────────────────────────────────────────────────── Die Fußzeile mit Datenschutz, Nutzungsbedingungen und Impressum. Sie steht fest in `index.html` und nicht in einem Modul – siehe die Begründung dort. */ .rechtsfuss { max-width: 42rem; margin: 2.5rem auto 3rem; padding: 0 1.25rem; text-align: center; font-size: .85rem; opacity: .6; } .rechtsfuss a { color: inherit; margin: 0 .6rem; display: inline-block; line-height: 2; } /* ── Der Rundenchat ────────────────────────────────────────────── Gegenstück zu `Views/GameTabs/ChatTab.swift`: eigene Nachrichten rechts und getönt, fremde links auf ruhiger Fläche. Die Unterscheidung muss ohne Lesen funktionieren. */ /* **Der Zähler sitzt über der rechten Schulter des Reiters, nicht daneben.** Neben der Beschriftung las er sich wie ein zweiter Teil des Namens („Chat 3"); in der Ecke ist er das, was er überall sonst auch ist. Absolut gesetzt kostet er zudem keine Breite – die Reiter bleiben gleich breit, ob eine Zahl dasteht oder nicht. */ .chat-zahl { position: absolute; top: 3px; right: 6px; display: flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; /* **Weiß auf tieferem Rosa.** `--marke-ink` ist die Schrift der Siegfeld-Marke (Petrol) und stand hier falsch – auf Rosa gemessen 1,9:1. Weiß auf `--pink` misst 3,4:1 und bleibt unter den 4,5 für kleine fette Schrift; eine Spur abgedunkelt trägt dieselbe Marke die weiße Ziffer mit 5,6:1. */ background: #bf2e5e; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; } /* **Der Verlauf beginnt unten und rollt für sich.** Vorher wuchs er in die Seite hinein und schob die Schreibzeile aus dem Bild – ab etwa einem Dutzend Nachrichten musste man erst herunterwischen, um antworten zu können. Jetzt hat er eine Deckelhöhe und rollt darin; `justify-content: flex-end` setzt wenige Nachrichten an seinem Fuß auf, statt sie oben kleben zu lassen. */ .chat-verlauf { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; margin: 12px 0; max-height: min(58vh, 520px); overflow-y: auto; overscroll-behavior: contain; } .chat-blase { align-self: flex-start; max-width: min(78%, 34rem); padding: 8px 12px; border: 1px solid var(--kante); border-radius: 14px; background: var(--flaeche); } .chat-blase.meine { align-self: flex-end; border-color: color-mix(in srgb, var(--pink) 45%, transparent); background: color-mix(in srgb, var(--pink) 16%, transparent); } .chat-kopf { display: flex; gap: 8px; margin: 0 0 2px; color: var(--ink-faint); font-size: 11px; font-weight: 600; } .chat-uhr { font-weight: 400; opacity: 0.75; } .chat-text { margin: 0; overflow-wrap: anywhere; } /* **Melden hängt an der Nachricht, nicht an einem Knopf daneben.** Sichtbar wird es erst beim Überfahren oder mit der Tastatur – aber es ist immer vorhanden, nie `display: none`: Ein Knopf, den es für Hilfsmittel nicht gibt, erfüllt die Meldepflicht nicht. */ .chat-melden { margin-top: 4px; padding: 0; border: 0; background: none; color: var(--ink-faint); font: inherit; font-size: 11px; cursor: pointer; opacity: 0; transition: opacity 0.15s ease; } .chat-blase:hover .chat-melden, .chat-melden:focus-visible { opacity: 1; } .chat-leer { padding: 32px 0; text-align: center; } .chat-hinweis { margin: 8px 0 0; color: var(--amber, #f0a020); font-size: 13px; } .chat-zeile { display: flex; gap: 8px; align-items: center; margin-top: 12px; } .chat-zeile .feld { flex: 1; } @media (prefers-reduced-motion: reduce) { .chat-melden { transition: none; } } .chat-name { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; } .chat-name:hover { text-decoration: underline; } /* **Ein niedriges Fenster bekommt einen engeren Takt.** Zwei Spalten allein reichen nicht: Auf einem 14-Zoll-Notebook bleiben nach Menü- und Adressleiste rund 830 px Fensterhöhe, und der Einladen-Bildschirm lief unten heraus – man musste rollen, um „Weiter" zu sehen, also genau die Hauptaktion. Statt einer festen Skalierung (die Schrift kaputtmacht) rückt hier alles zusammen, was Luft ist: Ränder, Abstände, das QR-Bild, der Rechtsfuß. Die Schriftgrößen bleiben, wie sie sind – bis auf Sinnbild und Rundentitel, die als Schmuck den meisten Platz kosten. Gilt nur auf dem Rechner (`min-width: 900px`): Ein Handy im Querformat ist niedrig, dort ist Rollen aber der übliche Weg, und die Marke steht in einer Spalte. */ @media (min-width: 900px) and (max-height: 900px) { .rahmen { padding-top: var(--space-medium); padding-bottom: var(--space-medium); gap: var(--space-medium); } .einladen-buehne, .einladen-spalte, .aufbau-buehne { gap: var(--space-medium); } .zeitstrahl { margin-bottom: 0; } .garderobenmarke { padding: var(--space-medium); } .marke-emoji { font-size: 26px; } .marke-titel { font-size: 20px; } .marke-perforation { margin-block: var(--space-small); } .marke-qr-box { width: 140px; height: 140px; } .karte { padding: var(--space-medium); gap: var(--space-small); } /* Der Kopf trägt Zeitstrahl und Frage – zwei Zeilen, die keine Sektionsränder brauchen, wenn die Höhe knapp ist. */ .phasenkopf { padding: var(--space-small) var(--space-medium); } .wahlfeld { padding: var(--space-small); } /* Vier Namen sind der Regelfall einer Gruppenrunde – vier Zeilen à 56 px sind hier die größte einzelne Fläche. Der Avatar bleibt 40 px, die Zeile verliert nur ihre Luft. */ .liste { gap: var(--space-tight); } .zeile { min-height: 48px; padding: var(--space-tight) var(--space-small); } /* Die Rastervorschau ist die höchste Kachel der Dauer-Wahl – ihre Aussage ist die Diagonale, nicht die Feldgröße. */ .dauer-kachel { padding: var(--space-small); gap: var(--space-tight); } .raster-vorschau { grid-template-columns: repeat(var(--raster-spalten), 15px); gap: 4px; } .raster-vorschau.eng { grid-template-columns: repeat(var(--raster-spalten), 12px); } .rechtsfuss { margin: var(--space-large) auto var(--space-medium); } }