:root { box-sizing: border-box; --tp-font-scale: 1; /* SPALTEN DER SPIELPLAN-TABELLENZEILE (.match-tabular-row) — EINE Quelle. Es gab die Aufteilung zweimal: in schedule-view.js und in standings-templates.js, beide mit gleicher Auszeichnungskraft und !important. Welche gewann, entschied allein die Reihenfolge des Einhaengens — die Kopie aus standings-templates.js. Jede Aenderung an der Spielplan-Datei blieb dadurch wirkungslos. Deshalb steht die Aufteilung jetzt hier, in der immer geladenen Datei, und beide Stellen verweisen nur noch darauf. Wer die Spalten aendert, aendert sie hier. Zur Aufteilung selbst — die REIHENFOLGE der Zuteilung ist das Entscheidende. Das Raster verteilt in drei Schritten: (1) Sockel aller Spalten, (2) inhalts- abhaengige Spalten bis zu ihrer Grenze, (3) der Rest an die 1fr-Spalten. Daraus folgt die gewuenschte Rangfolge von selbst: - Die Teamspalten haben einen SOCKEL (7rem). Den bekommen sie in Schritt 1, noch bevor die Gruppenspalte waechst — der Gruppenname kann den Teamnamen also nie den Grundplatz wegnehmen. - Die Gruppenspalte ist fit-content: sie nimmt in Schritt 2 nur, was ihr Name WIRKLICH braucht (leer = 0, "Gr 1" = vier Zeichen), hoechstens 24 Zeichen. - Was danach uebrig ist, geht in Schritt 3 vollstaendig an die Teamspalten. NICHT min(24ch, max-content) schreiben — Schluesselwoerter wie max-content sind in min() nicht erlaubt, die GANZE Regel faellt dann aus und die Zeile bricht. Spalte 1 (Nr./Live-Punkt) und Spalte 3 (Gruppe) stehen bewusst NICHT hier drin: beide haengen an Merkmalen, die die einzelne Tabellenkarte setzt. Ein var() in einem eigenen Merkmal wird dort aufgeloest, wo das Merkmal DEKLARIERT ist — also hier an :root, wo die Karten-Merkmale niemand kennt. Sie waeren stumm auf ihre Vorgabe eingefroren. Deshalb setzen die Regeln sie selbst davor: grid-template-columns: var(--col1-width, 34px) 56px var(--tp-group-track) var(--tp-schedule-rest); */ --tp-schedule-rest: minmax(7rem, 1fr) 58px minmax(7rem, 1fr) 32px 30px; /* SPALTEN DER PLANUNG (Gruppenkarten UND Lostoepfe) — EINE Quelle. Beide Raster muessen zeichengleich sein, sonst steht Topf 1 nicht ueber Gruppe 1. Sie stehen in zwei verschiedenen Dateien (labs-groups.js, plan-algorithms.js) und liefen genau deshalb schon einmal auseinander. Die 340px sind gemessen, nicht geschaetzt: Bei 280px Kartenbreite blieben fuer den Teamnamen 65px (die Knoepfe der Slot-Zeile brauchen 130px, Wappen/Kuerzel/Abstaende weitere 83px) — selbst zweizeilig reichte das fuer laengere Namen nicht. Ab 340px stehen auch 20-Zeichen-Namen vollstaendig. Folge fuer den Umbruch: zwei Karten nebeneinander erst ab 2x340 + 10 Abstand = 690px Seitenbreite. Vorher lag die Schwelle bei 570px — dort standen zwar zwei Karten nebeneinander, aber jede nur ~280px breit, also zu schmal zum Lesen. Genau der Bereich, in dem Namen abgeschnitten waren. */ --tp-planning-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); /* Die Gruppenspalte — Vorgabe fuer den Fall, dass noch nichts gemessen wurde. Sie MUSS in allen Zeilen einer Karte gleich breit sein, sonst wandert alles rechts davon (Ergebnis, Teamnamen) von Zeile zu Zeile — genau das ist am 11.08.2026 passiert, als hier fit-content pro Zeile wirkte. tpGruppenspalteAngleichen() in schedule-view.js misst deshalb den laengsten Gruppennamen JE KARTE und setzt dort eine feste Breite. Diese Vorgabe greift nur bis zur ersten Messung. */ --tp-group-track: fit-content(24ch); } html.tp-font-large { --tp-font-scale: 1.12; } html.tp-font-xlarge { --tp-font-scale: 1.25; } /* GRUNDGRÖSSE FÜR BEDIENELEMENTE — der Grund, warum Knöpfe „zu groß" wirkten. Gezählt am 09.08.2026: 683 Knöpfe, Auswahllisten und Eingabefelder im Programm bringen KEINE eigene Schriftgröße mit, 620 bringen eine mit. Ohne Angabe erben sie 16 px (Auswahllisten sogar die Browser-Vorgabe 13,33 px) — während die Elemente ringsum bei 11–13 px liegen. Genau deshalb stachen „Weiter →" und „Planung abschließen" aus der Planungshilfe heraus. Eine Regel statt 683 Inline-Angaben. Wer eine eigene Größe mitbringt, behält sie: Ein Inline-Style schlägt jede Regel, und diese hier hat bewusst die niedrigste Spezifität (0,0,1), damit auch jede Klassenregel gewinnt. WARUM 12 UND NICHT 13 PX (09.08.2026 nachgezogen): Mit --fs-md (13px) wirkten Knopfbeschriftungen und Auswahlfelder weiterhin zu schwer — sie stehen fett (600/700) neben Erläuterungen in 11px und lagen damit ÜBER den Schrittnamen der Planungshilfe (12px). Jetzt liegen Bedienelemente auf derselben Stufe wie diese und eine Stufe unter den Feldbeschriftungen (13px). Auf kleinen Bildschirmen passt dadurch spürbar mehr auf eine Seite. NICHT VERWECHSELN: Die Bedienelemente wachsen sehr wohl mit dem Vergrößerungsschalter — an der ausgelieferten Fassung nachgemessen, 100 → 125 % ergibt bei allen exakt Faktor 1,25. Dass der Knopf dabei kaum größer AUSSIEHT, liegt an seinen festen Innenabständen (10/20px): Der Kasten bleibt fast gleich, während die Schriftleiste daneben sichtbar umbricht. */ /* Das `html` davor ist KEIN Schmuck — ohne es ist die Regel wirkungslos. Tailwinds Preflight bringt mit button,input,optgroup,select,textarea { … font-size:100% … } dieselbe Spezifität (0,0,1) mit, wird von Tailwind Play aber ZUR LAUFZEIT hinter style_v2.css in den Kopf gehängt. Bei Gleichstand gewinnt das spätere Stylesheet — `font-size:100%` heißt „erbe vom Elternteil", also 16px. Mit `html` davor steht die Regel bei (0,0,2) und gewinnt. Klassenregeln (0,1,0) und Inline-Styles schlagen sie weiterhin, wie beabsichtigt. ACHTUNG BEIM PRÜFEN: Ohne geladenes Tailwind ist der Fehler NICHT reproduzierbar — ein Messaufbau ohne `vendor/tailwind-play-3.4.js` zeigt fälschlich die richtige Größe. Gleiches Muster wie beim `svg{display:block}` aus demselben Preflight. */ html button, html select, html input, html textarea { font-size: var(--fs-sm); } /* ============================================================================ ÜBERSCHRIFTEN-SKALA ZUM ÄNDERN: Nur die sechs Zeilen unten anfassen. Jede Ebene besteht aus GRÖSSE (ein --fs-*-Token) und GEWICHT (ein --weight-*-Token). Beide Skalen sind im :root-Block weiter unten dokumentiert. Keine Zahlen hier eintragen — sonst wächst die Überschrift nicht mit dem Schriftgrößen-Schalter mit. WARUM ES DIESE REGEL BRAUCHT: Tailwinds Preflight setzt h1,h2,h3,h4,h5,h6 { font-size:inherit; font-weight:inherit } und wird zur Laufzeit HINTER style_v2.css geladen. Ohne Gegenregel rendern alle Überschriften mit 16px und Gewicht 400 — also wie Fließtext. Gemessen am 09.08.2026: von 123 Überschriften im Programm brachten 61 eine eigene Größe mit, die übrigen 62 sahen aus wie normaler Text. Das `html` davor ist Pflicht: (0,0,2) schlägt Preflight (0,0,1). Klassenregeln und Inline-Styles gewinnen weiterhin — bestehende Überschriften mit eigener Größe bleiben also unberührt. WARUM KLEINER STATT GRÖSSER: Eine Überschrift muss nicht groß sein, um als Überschrift zu lesen — das Gewicht trägt die Hierarchie. Der Fließtext liegt hier bei 13px, Hinweise bei 11px; 16px sind in diesem Umfeld bereits viel. h3 (35 der 62 Fälle) geht deshalb von 16px/400 auf 15px/600: deutlicher als Überschrift erkennbar UND platzsparender als vorher. Dasselbe bei h4. Ebene Größe Gewicht px Verwendung h1 --fs-3xl strong 20 Seitentitel (3×) h2 --fs-2xl strong 18 Dialogtitel (17×) h3 --fs-lg bold 15 Abschnittstitel (35×) h4 --fs-base bold 14 Untertitel (7×) h5 --fs-md bold 13 wie Fließtext, nur fett h6 --fs-sm bold 12 kleinste Ebene ABSTÄNDE BLEIBEN BEI NULL. Preflight setzt zusätzlich `margin:0` auf alle Überschriften; das ist hier absichtlich NICHT zurückgenommen. Die Abstände kommen im ganzen Programm von den umgebenden Behältern (flex/grid mit gap). Wer hier Ränder ergänzt, verschiebt Layouts an 123 Stellen gleichzeitig. ============================================================================ */ html h1 { font-size: var(--fs-3xl); font-weight: var(--weight-strong); } html h2 { font-size: var(--fs-2xl); font-weight: var(--weight-strong); } html h3 { font-size: var(--fs-lg); font-weight: var(--weight-bold); } html h4 { font-size: var(--fs-base); font-weight: var(--weight-bold); } html h5 { font-size: var(--fs-md); font-weight: var(--weight-bold); } html h6 { font-size: var(--fs-sm); font-weight: var(--weight-bold); } /* BEREICHE, DIE NICHT MITWACHSEN. Kopfzeile, Navigation, Seitenleiste und die scrollenden Listen haben eine feste Höhe; wachsende Schrift bricht dort das Gerüst. Das ersetzt `TP_FONT_SCALE_STABLE_LAYOUT_SELECTOR` aus script.js, wo dieselbe Liste als Zeichenkette stand und bei JEDEM Element per el.matches() geprüft wurde. `#phase-wizard-modal` stand dort ebenfalls drin, gehört hier aber NICHT hinein: Die Planungshilfe SOLL mitwachsen — sie war nur vom Laufzeit-Durchlauf ausgenommen, weil sie ihre Vergrößerung über eigene CSS-Regeln bekam. WARUM HIER ALLE ZWÖLF TOKEN NOCH EINMAL STEHEN — und `--tp-font-scale: 1` allein NICHT genügt (im Browser nachgemessen, erster Versuch ist daran gescheitert): Der Wert einer benutzerdefinierten Eigenschaft wird DORT ausgerechnet, wo sie deklariert ist. `--fs-sm` steht in `:root`, wird also mit dem Faktor des Wurzelelements zu `calc(0.75rem * 1.25)` aufgelöst — und dieser fertige Wert wird vererbt. Ein späteres `--tp-font-scale: 1` weiter unten im Baum ändert daran nichts mehr, weil `--fs-sm` nicht neu ausgerechnet wird. Deshalb setzen diese Container die Größen selbst, ohne Faktor. Bei Änderungen an der Skala: beide Blöcke anfassen. */ .app-header, .main-nav, #desktop-sidebar, .tp-no-font-scale, .tournament-list-scroll, .template-list-scroll, .hierarchy-team { --tp-font-scale: 1; --fs-3xs: 0.5625rem; --fs-2xs: 0.625rem; --fs-xs: 0.6875rem; --fs-sm: 0.75rem; --fs-md: 0.8125rem; --fs-base: 0.875rem; --fs-lg: 0.9375rem; --fs-xl: 1rem; --fs-2xl: 1.125rem; --fs-3xl: 1.25rem; --fs-4xl: 1.375rem; --fs-5xl: 1.5rem; } .first-phase-next-step-card { scroll-margin-top: 120px; } body.dark-mode .first-phase-next-step-card { background: #1e293b !important; border-color: rgba(255, 255, 255, 0.1) !important; } body.dark-mode .first-phase-next-step-card h3 { color: #f1f5f9 !important; } body.dark-mode .first-phase-next-step-card p { color: #94a3b8 !important; } body.dark-mode .first-phase-secondary-action { background: rgba(15, 23, 42, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: #cbd5e1 !important; } @media (max-width: 700px) { .first-phase-next-step-card { flex-direction: column !important; align-items: stretch !important; margin-left: 10px !important; margin-right: 10px !important; } .first-phase-next-step-card > div:last-child { flex-wrap: wrap !important; } .first-phase-next-step-card button { flex: 1 1 180px !important; justify-content: center !important; } } #guest-mode-banner { box-sizing: border-box !important; background: #ede9fe !important; opacity: 1 !important; z-index: 1200 !important; box-shadow: 0 1px 8px rgba(15, 23, 42, 0.08) !important; isolation: isolate; } body.dark-mode #guest-mode-banner { background: #211b3d !important; } #guest-mode-banner > span { min-width: 0; text-align: center; } @media (min-width: 900px) { #guest-mode-banner { margin-left: var(--seitenleiste-breite) !important; width: calc(100% - var(--seitenleiste-breite)) !important; } } .tp-font-size-control { width: 100%; border: 1px solid var(--border-color, #e2e8f0); background-color: var(--bg-card, #ffffff); color: var(--text-main, #1e293b); border-radius: 8px; padding: 7px 10px; font-size: var(--fs-md); font-weight: var(--weight-bold); outline: none; cursor: pointer; text-align: center; /* Kein Aufklapp-Pfeil – schafft vollen Platz für die Zahl. Das Dropdown öffnet trotzdem weiterhin per Klick (appearance:none entfernt nur die Pfeil-Grafik). */ appearance: none; -webkit-appearance: none; -moz-appearance: none; } body.dark-mode .tp-font-size-control { background-color: #1e293b; border-color: #334155; color: #e2e8f0; } .dark-mode .tp-segmented-control { background: rgba(15, 23, 42, 0.9); border: 1px solid rgba(255,255,255,0.07); padding: 3px; border-radius: 10px; } body.dark-mode .tp-segmented-item { color: var(--text-body) !important; background: transparent !important; border: none !important; } body.dark-mode .tp-segmented-item.active { background: var(--primary-fill-bg) !important; color: var(--primary-fill-fg) !important; border: 1px solid var(--primary-fill-border) !important; } *, *::before, *::after { box-sizing: inherit; } body { font-weight: var(--weight-normal); -moz-osx-font-smoothing: grayscale; user-select: none; -webkit-user-select: none; caret-color: transparent; } input, textarea, .inline-input, [contenteditable="true"] { user-select: text !important; -webkit-user-select: text !important; caret-color: auto !important; } button, input, select, textarea { font-family: inherit; font-weight: inherit; } :root { /* ============================================================================ EBENEN (z-index) — DIE LEITER ============================================================================ Gemessen am 31.08.2026: 216 z-index-Angaben mit 51 verschiedenen Werten, davon 93 ueber 100.000, Hoechstwert 2147483647 (das Maximum eines 32-Bit-Ganzwerts). Ursache ist keine Absicht, sondern ein Fehlen: Es gab keine Leiter, also hat sich jede neue Funktion ihre eigene Zahl fuer „ganz sicher oben" ausgedacht. DIESE WERTE SIND NICHT FREI GEWAEHLT. Jeder entspricht genau dem Anker der Gruppe, die heute schon dort liegt — neuer Code, der ein Token benutzt, landet damit zwischen dem Bestand an der richtigen Stelle, ohne dass eine einzige alte Zahl angefasst werden muss. NEUER CODE NIMMT AUSSCHLIESSLICH DIESE TOKEN. `pruefe-ebenen.js` haelt fest, wie viele rohe Zahlen jede Datei noch hat; die Zahl darf nur fallen. Der Bestand ist BEWUSST noch nicht umgestellt: Zwischen 99.999 und 320.000 und zwischen 999.997 und 1.000.002 liegen Werte, deren Reihenfolge garantiert ist (ein Toast MUSS ueber dem Dialog liegen, aus dem er kommt). Sie auf eine Sprosse zusammenzuziehen wuerde diese Garantie durch die DOM-Reihenfolge ersetzen — eine Aenderung, die sich erst im Betrieb zeigt. Das gehoert einzeln gemessen. ============================================================================ */ /* Breite der Seitenleiste. Als Token, weil DREI Stellen sie kennen muessen: die Leiste selbst, der Inhaltsbereich daneben und das Gast-Banner. Vorher stand die 220 dreimal fest im Blatt — eine davon zu aendern haette den Inhalt unter die Leiste geschoben. Der schmale Zustand aendert nur dieses eine Token (siehe body.seitenleiste-schmal). */ --seitenleiste-breite: 220px; /* Gemeinsame Box der drei Symbole am rechten Rand der Seitenleiste (Einklappen, Stift, Abmelden) — sie haelt sie auf einer Achse. */ --tp-rechte-symbolbox: 28px; --z-inhalt: 10; /* im Fluss gestapelt: Spalten, Marker, Statusstreifen */ --z-haftend: 100; /* haftende Kopfzeilen und Leisten */ --z-rahmen: 1000; /* Kopfzeile, Seitenleiste, Gast-Banner, Fusszeilen-Kennzeichen */ --z-menue: 10000; /* Aufklapper, Untermenues, Tooltips */ --z-dialog: 100000; /* Dialoge */ --z-dialog-2: 200000; /* Waehler, die AUS einem Dialog aufgehen (Phasenwahl, Farbwahl) */ --z-antwort: 400000; /* Antworten, die ueber JEDEM Dialog liegen muessen: Freigabe-Hinweis, Anmelde-Aufforderung. Gemessen am 31.08.2026 lagen sie auf 100000 und verschwanden damit hinter der Planungshilfe (100050) und hinter den Druckdialogen (200000) - der Nutzer klickte auf einen Pro-Hinweis oder auf "Excel" und es passierte SCHEINBAR nichts, obwohl der Dialog im Dokument stand. 400000 raeumt jeden Dialog (hoechster Bestand: 320000), bleibt aber unter Toasts und Meldungen: Ein Hinweis, der WAEHREND der Aufforderung kommt, soll weiter obenauf liegen. */ --z-schwebend: 1000002; /* Toasts und Popover — liegen ueber JEDEM Dialog */ --z-meldung: 10000000; /* Alerts, Bestaetigungen, Zahlenfelder — die oberste Ebene */ /* Color Palette - Fresh Mint (Teal) Theme */ --primary-hue: 175; /* Teal */ --color-primary: #0f8378; --accent-hue: 35; /* Soft Gold */ /* Backgrounds */ --bg-app: #ffffff; --bg-header: #ffffff; --bg-card: #ffffff; --bg-secondary: #f8fafc; --bg-subtle: #f1f5f9; --bg-base: #f8fafc; --bg-elevated: #ffffff; --bg-hover: #f1f5f9; --bg-input: #ffffff; /* Borders */ --border-subtle: #f1f5f9; /* Text */ --text-main: #1e293b; /* Neutral Dark Slate */ --text-secondary: #334155; /* Neutral Slate 500 */ --text-inverted: #ffffff; /* Brand Colors */ --brand-primary: var(--primary-strong); /* Rich Teal */ --brand-secondary: hsl(var(--primary-hue), 25%, 90%); /* Light Mint accents */ --accent-gold: hsl(var(--accent-hue), 90%, 55%); /* Semantic Status Colors */ --color-success: #16a34a; --bg-success: #f0fdf4; --text-success-bold: #166534; --border-success-subtle: #bbf7d0; --color-danger: #dc2626; --bg-danger: #fef2f2; /* Rot und Grün als SCHRIFT brauchen eigene Token: --color-danger wird im Dunkelmodus dunkler (#dc2626) – als Knopffläche richtig, als Text auf dunklem Grund aber schlechter lesbar. */ --accent-red-text: #dc2626; --text-success: #16a34a; /* ------------------------------------------------------------------ ZIELPALETTE — sieben Familien, je vier Rollen. Jede Familie hat GENAU EINEN Ton pro Rolle. Wer eine fünfte Nuance zu brauchen glaubt, hat in Wirklichkeit eine Bedeutung übersehen. Vollfläche --color- kräftig, für Knöpfe Fläche --accent--bg getönt, für Kästen Rahmen --accent--border Schrift --accent--text Marke Türkis --color-primary / --primary-strong / --primary-soft-bg / --primary-soft-border ← EINZIGE AUSNAHME beim Namen TÜRKIS: FLÄCHE UND SCHRIFT SIND ZWEI ROLLEN — nicht vermischen. --color-primary #0f8378 NUR als Fläche (Knöpfe, gefüllte Marken-Flächen) --primary-strong #0f766e / dunkel #5eead4 NUR als Schrift und Symbole Bis 09.08.2026 trug beides #0d9488 und erreichte in BEIDEN Rollen nur 3,74:1. Ein einziger Wert kann das nicht lösen: Im Dunkelmodus muss eine Fläche unter weißer Schrift DUNKLER werden, Schrift auf dunklem Grund aber HELLER. 189 Stellen benutzten die Fläche als Schrift und sind auf --primary-strong umgestellt; danach durfte die Fläche dunkler werden. Gemessen: Fläche #0f8378 weiße Schrift 4,63:1 hebt sich ab von heller Seite 4,42 · dunkler Karte 3,16 Schrift --primary-strong hell 5,47 auf Weiß · dunkel 9,89 auf der Karte Ein Wert für BEIDE Modi ist Absicht: #0f7d72 wäre bei weißer Schrift etwas besser (5,00), höbe sich im Dunkelmodus aber nur mit 2,92 ab — unter den 3:1 für Bedienelemente. #0f8378 schafft beide Schwellen in beiden Modi. WER HIER ETWAS ÄNDERT prüft bitte drei Zahlen: weiße Schrift auf der Fläche (≥4,5), Abhebung der Fläche vom Grund (≥3), und --primary-strong als Schrift (≥4,5 in beiden Modi). Türkis ist die Marke und heißt durchgängig `--primary-*`, nicht `-teal-`. Bis 09.08.2026 gab es BEIDES nebeneinander und damit ZWEI Töne pro Rolle: Fläche #f0fdfa neben #ccfbf1, Rahmen #99f6e4 neben #5eead4. Genau das verletzte die Regel oben, und im Programm sah es nach „verschiedensten Grüntönen" aus. Der blassere Ton hat jeweils gewonnen (Entscheidung des Nutzers), `--accent-teal-bg` und `--accent-teal-border` sind entfallen — 51 Verweise umgestellt. NICHT wieder einführen. Erfolg Grün --color-success / -green- Hinweis Bernstein --color-warning / -amber- (Gelb und Orange gehen hier auf) Gefahr Rot --color-danger / -red- (Pink geht hier auf) Info Blau --color-info / -blue- Beta Violett --color-violet / -violet- Neutral --surface-* / --border-* / --text-* ------------------------------------------------------------------ */ --color-warning: #f59e0b; --color-info: #3b82f6; --color-violet: #7c3aed; --accent-amber-text: #b45309; /* Die Zahl im Stepper – EINE Stelle für alle Stepper (Phasen-Editor, Planungshilfe, Schiri-Bereich). Vorher trugen einige `--text-strong`, wodurch sie im Dunkelmodus weiß statt grün waren, während alle anderen grün blieben. */ --stepper-value: #0f766e; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025); /* Light mode card shadow for visibility */ --card-shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1); --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 8px; --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* SCHRIFTSTÄRKEN — es gibt GENAU DIESE VIER, mehr kann die Schrift nicht. In fonts/ liegen vier Inter-Schnitte (Regular 400, Medium 500, SemiBold 600, Bold 700), keine variable Schrift. Gemessen (Inter, 20px, gleicher Text): 400 → 301,44 px · 500 → 304,76 · 600 → 308,05 · 700 → 311,35. Alles über 700 fällt nach der CSS-Zuordnungsregel auf 700 zurück: 800, 850, 900 und 950 sehen IDENTISCH aus wie 700 — sie sehen im Quelltext nur nach einer Abstufung aus, die es auf dem Bildschirm nicht gibt. Ebenso 650 → 700. Wer eine fünfte Stufe zu brauchen glaubt, braucht in Wahrheit eine andere Größe oder Farbe. Neue Zahlenwerte bitte NICHT einführen — `node pruefe-schrift.js` meldet sie. */ --weight-normal: 400; --weight-medium: 500; --weight-bold: 600; --weight-strong: 700; /* SCHRIFTGRÖSSEN — zwölf Stufen für Text, 9 bis 24 px. Vor der Umstellung standen hier 177 verschiedene Werte an 3.306 Stellen, kein einziger über ein Token, dazu px und rem gemischt (11,5px neben 0,72rem). WARUM rem UND WARUM calc: Die Größen tragen den Vergrößerungsfaktor selbst. Vorher konnte `--tp-font-scale` gar nicht wirken, weil die Größen fest im style-Attribut standen — die Vergrößerung war deshalb DREIFACH gebaut: eine Prozentregel, 24 Textsuch-Regeln mit !important (nur für die Planungshilfe) und ein Laufzeit-Durchlauf durch den DOM. Alle drei sind entfallen. ACHTUNG: rem reagiert NICHT auf die Schriftgröße eines Containers; eine Regel wie `.dialog { font-size: 112% }` vergrößert rem-Kinder nicht. Der Faktor MUSS deshalb im Token stecken. Bereiche, die NICHT mitwachsen sollen, setzen `--tp-font-scale: 1` (siehe unten bei .tp-no-font-scale) — die Kinder erben das. Über 24 px wird bewusst NICHT tokenisiert: Das sind Emoji (📺 📝 ⚠️), Timer-Ziffern und Ergebniszahlen, keine Fließtexte. Sie gehören nicht auf eine Textskala; eine Zwölf-Stufen-Skala hätte 4rem auf 24 px gestaucht (−62 %). Neue Zwischengrößen bitte NICHT einführen — `node pruefe-schrift.js` meldet sie. */ --fs-3xs: calc(0.5625rem * var(--tp-font-scale)); /* 9px */ --fs-2xs: calc(0.625rem * var(--tp-font-scale)); /* 10px */ --fs-xs: calc(0.6875rem * var(--tp-font-scale)); /* 11px */ --fs-sm: calc(0.75rem * var(--tp-font-scale)); /* 12px */ --fs-md: calc(0.8125rem * var(--tp-font-scale)); /* 13px */ --fs-base: calc(0.875rem * var(--tp-font-scale)); /* 14px */ --fs-lg: calc(0.9375rem * var(--tp-font-scale)); /* 15px */ --fs-xl: calc(1rem * var(--tp-font-scale)); /* 16px */ --fs-2xl: calc(1.125rem * var(--tp-font-scale)); /* 18px */ --fs-3xl: calc(1.25rem * var(--tp-font-scale)); /* 20px */ --fs-4xl: calc(1.375rem * var(--tp-font-scale)); /* 22px */ --fs-5xl: calc(1.5rem * var(--tp-font-scale)); /* 24px */ --header-item-height: 44px; --border-color: #e2e8f0; --stripe-width: 6px; /* =================================================================== FARB-TOKEN FÜR INLINE-STYLES (angelegt 02.08.2026) ------------------------------------------------------------------- In den JS-Dateien stecken rund 3.000 fest eingebaute Farben in style="…"-Attributen. Ein Inline-Style schlägt JEDE Regel aus dieser Datei – der einzige Weg dagegen war bisher !important (davon gibt es inzwischen über 1.600). Die Werte hier unten sind der Ausweg: Die Inline-Styles verweisen künftig auf diese Variablen statt auf feste Farben. Sie gewinnen weiterhin gegen alles, der WERT kommt aber aus genau einer Zeile – und der Dunkelmodus greift automatisch. REGEL: Der Hellwert ist exakt das Literal, das er ersetzt. Damit ist jede Umstellung im Hellmodus nachweislich wirkungslos; nur der Dunkelmodus ändert sich (zum Besseren). Warum eigene Flächen-Token statt --bg-subtle/--bg-secondary: Deren Dunkelwert ist `transparent`. Sie zu verwenden würde im Dunkelmodus über 570 Flächen durchsichtig machen. Deshalb --surface-*. =================================================================== */ /* =================================================================== GRAUSTUFEN FÜR TEXT — fünf, nicht sechs (seit 09.08.2026). `--text-muted` (#64748b) ist entfallen und in `--text-body` (#475569) aufgegangen. Beide trugen im DUNKELMODUS ohnehin denselben Wert (#94a3b8), im Hellmodus lagen sie eine Rampenstufe auseinander und wurden für dieselbe Rolle benutzt — Erläuterungstexte unter einer Beschriftung. Der dunklere Ton hat gewonnen (Entscheidung des Nutzers). Damit steigt der Kontrast dieser 593 Stellen auf weißem Grund von 4,76:1 auf 7,58:1. Begründung: Erläuterungen wie „Wie viele Gruppen gespielt werden." liest gerade, wer unsicher ist — da ist Lesbarkeit wichtiger als Leichtigkeit. Die verbleibende Rampe, jeweils Kontrast auf Weiß: --text-strong #0f172a 17,85:1 Überschriften, Werte --text-main #1e293b 14,63:1 Fließtext im Hauptbereich --text-secondary #334155 10,35:1 Beschriftungen --text-body #475569 7,58:1 Erläuterungen, Bedienelemente --text-subtle #647186 4,94:1 Labels, inaktive Zustände `--text-subtle` trug bis 09.08.2026 #94a3b8 und erreichte damit nur 2,56:1 — unter den 3:1, die selbst für große Schrift gefordert sind, bei 601 Stellen (u. a. den noch nicht erreichten Schritten der Planungshilfe, 12px). Der neue Wert ist der HELLSTE, der auf allen gängigen Flächen 4,5:1 schafft: weiß 4,94 · --surface-page 4,72 · --surface-soft 4,51 · --primary-soft-bg 4,74 Dunkelmodus entsprechend #64748b → #8b98ab (auf --bg-card 5,00, auf der Seitenfläche 6,10; vorher 3,07 bzw. 3,76). FOLGE FÜRS AUGE: Der Ton ist deutlich kräftiger als vorher, die Abstufung zu `--text-body` dadurch geringer. Das ist der Preis der Lesbarkeit. Wer ihn zurücknehmen will, findet die Zwischenstufen hier: #818da0 = 3,36:1, #78849a = 3,77:1 — beide reichen nur für Schrift ab 18px. ACHTUNG: Eigene Dokumente (reports-print.js, live-display-control-center.html, auth.js/schedule-view.js-Druckfenster, Landingpage) bringen ihr EIGENES --text-muted mit und wurden bewusst nicht angefasst. =================================================================== */ --text-subtle: #647186; /* schwächster Text, Labels (645×) */ --text-body: #475569; /* Erläuterungen + Bedienelemente (689×) */ --text-strong: #0f172a; /* betonte Überschrift (200×) */ --border-strong: #cbd5e1; /* kräftigere Trennlinie (198×) */ --surface-soft: #f1f5f9; /* leicht abgesetzte Fläche (308×) */ --surface-page: #f8fafc; /* Seitenhintergrund (268×) */ --primary-strong: #0d6b63; /* dunkles Teal, Text auf hell (157×); 26.09.2026 von #0f766e abgedunkelt: 4,48 -> 5,2:1 bei Protanopie (PLANUNG_Design.md) */ --primary-soft-bg: #f0fdfa; /* blasse Teal-Fläche (124×) */ --primary-soft-border: #99f6e4; /* blasse Teal-Linie (64×) */ /* =================================================================== ROLLEN-EBENE: DIE GEFÜLLTE MARKENFLÄCHE (angelegt 10.08.2026) ------------------------------------------------------------------- Die Token oben legen WERTE fest. Diese hier legen eine ROLLE fest: „satt gefüllte Markenfläche mit Beschriftung" — Knöpfe, Badges, aktive Segmente. 109 Stellen in 16 Dateien verweisen darauf. WARUM ES SIE BRAUCHT: Vorher stand die Entscheidung „dieser Knopf ist die Hauptaktion" 109-mal ausbuchstabiert im style-Attribut (`background:var(--color-primary); color:white`) — in sechs Schreibweisen für Weiß. Eine Gestaltungsänderung war deshalb keine Farbänderung, sondern eine Änderung an 109 Kopien derselben Entscheidung. Genau das hat die Token-Umstellung von 08/2026 für WERTE gelöst und für ROLLEN offen gelassen. WAS DAS BRINGT: Der komplette Wechsel von „satt gefüllt" auf den weichen Schiri-Look sind jetzt diese drei Zeilen: --primary-fill-bg: var(--primary-soft-bg); --primary-fill-fg: var(--primary-strong); --primary-fill-hover: var(--primary-soft-border); Die Hellwerte unten sind ABSICHTLICH exakt der bisherige Zustand (--color-primary + Weiß, Hover auf --primary-strong). Damit ist die Einführung im Hellmodus beweisbar wirkungslos; sichtbar wird erst, wer die drei Zeilen ändert. DUNKELMODUS BRAUCHT EINE EIGENE FASSUNG — und zwar zwingend. `--primary-fill-bg: var(--primary-soft-bg)` wird dort aufgelöst, wo es DEFINIERT ist, also auf :root. `body.dark-mode` überschreibt --primary-soft-bg erst eine Ebene tiefer (auf ); der bereits eingesetzte Hellwert wird von dort nur noch weitervererbt. Ohne den Zwillingsblock in `body.dark-mode` weiter unten bekäme der Dunkelmodus die HELLEN Werte — gemessen: Fläche #f0fdfa statt rgba(13,148,136,.15), Schrift #0f766e statt #5eead4. WER HIER EINE ZEILE ÄNDERT, ändert sie unten mit. NICHT ERFASST und mit Absicht: Flächen OHNE Beschriftung, die dieselbe Farbe tragen — Schalter-Kugeln, der 6px-Statusstreifen an Spielkarten, die 4px-Unterstreichung am aktiven Reiter. Sie sind Zustand, nicht Handlung, und dürfen satt bleiben. =================================================================== */ /* WEICHE FASSUNG aktiv seit 10.08.2026. Die satte Fassung stand hier: --primary-fill-bg: var(--color-primary); --primary-fill-fg: #ffffff; --primary-fill-hover: var(--primary-strong); --primary-fill-border: transparent; Zum Zurückschalten diese vier Zeilen wieder eintragen. */ --primary-fill-bg: var(--primary-soft-bg); --primary-fill-fg: var(--primary-strong); --primary-fill-hover: var(--primary-soft-border); --primary-fill-border: var(--primary-soft-border); /* Blasse Akzent-Töne (03.08.2026). Sie färben Hinweis-, Warn- und Erfolgsflächen. Im Dunkelmodus wird daraus jeweils eine TÖNUNG derselben Farbfamilie auf dunklem Grund – dieselbe Bedeutung, nur nicht mehr leuchtend hell. */ --accent-amber-bg: #fffbeb; --accent-amber-bg-strong: #fef3c7; --accent-amber-border: #fde68a; --accent-red-bg: #fef2f2; --accent-red-bg-strong: #fee2e2; --accent-red-border: #fecaca; --accent-blue-bg: #dbeafe; --accent-blue-bg-soft: #eff6ff; --accent-green-bg: #f0fdf4; --accent-green-bg-strong: #d1fae5; --accent-orange-bg: #fff7ed; --accent-orange-border: #fed7aa; --accent-pink-bg: #fce7f3; --surface-muted: #fafafa; /* sehr helle Nebenfläche */ --border-soft: #e8eef4; /* zarte Linie, u. a. Vorlagen-Karten */ /* Akzent-RAHMEN und -SCHRIFT. Ohne diese blieben Infokästen mit dunkelblauer oder violetter Schrift im Dunkelmodus unlesbar – die Fläche wurde dunkel, die Schrift blieb dunkelblau. */ --accent-blue-border: #bfdbfe; --accent-blue-text: #1e3a8a; --accent-violet-bg: #f5f3ff; --accent-violet-border: #ddd6fe; --accent-violet-text: #5b21b6; --accent-violet-bg-soft: #faf5ff; --accent-green-text: #065f46; /* Referee Mode Specific */ --ref-bg-app: hsl(var(--primary-hue), 20%, 90%); --ref-bg-overlay: hsla(var(--primary-hue), 20%, 90%, 0.7); --ref-card-bg: #ffffff; --ref-card-border: rgba(226, 232, 240, 0.8); --ref-card-shadow: 0 15px 35px rgba(0, 0, 0, 0.06); --ref-text-main: #1e293b; --ref-text-muted: #64748b; } /* KONTUR DER WEICHEN KNÖPFE. Gemessen: die weiche Fläche (#f0fdfa) hebt sich von einer weißen Karte mit 1,04:1 ab und vom Seitenhintergrund (#f8fafc) mit 1,00:1 — also gar nicht. Ohne Kontur wäre nur die Schrift zu sehen und der Knopf sähe nicht mehr nach Knopf aus. Deshalb trägt der Rahmen hier die Form, nicht die Fläche. WARUM box-shadow statt border: 92 der 125 Stellen bringen `border:none` im style-Attribut mit (Spezifität 1000) — eine border-Regel käme dagegen nicht an. `box-shadow: inset` ist davon unberührt und ändert die Größe nicht, ein echter Rahmen würde jeden Knopf um 2px wachsen lassen. WARUM Textsuche ausnahmsweise in Ordnung: Dieser Selektor sucht keine Farbe, sondern das TOKEN — er trifft genau die Elemente, die sich selbst als gefüllte Markenfläche ausgewiesen haben. Das ist eine Klasse in anderer Schreibweise, nicht das Raten aus einem Farbliteral. In der satten Fassung ist --primary-fill-border `transparent`, die Regel also wirkungslos — sie darf beim Zurückschalten stehen bleiben. 11 Stellen bringen einen eigenen box-shadow mit und behalten ihn. AUSNAHME `data-fill-flat`: Segment-Schalter („Direkt zuweisen | Lostöpfe", „Fest | Zufällig") sitzen bereits in einem gerahmten Behälter mit `overflow:hidden`. Dort ergäbe die Kontur eine zweite Kante dicht neben der ersten — sie sah aus wie ein Fehler. Wer weitere solche Schalter baut, setzt das Attribut mit; wer die Kontur überall loswerden will, setzt stattdessen --primary-fill-border auf `transparent`. */ [style*="var(--primary-fill-bg)"]:not([data-fill-flat]) { box-shadow: inset 0 0 0 1px var(--primary-fill-border); } body.dark-mode { /* Referee Mode Overrides */ --ref-bg-app: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #1e293b 100%); --ref-bg-overlay: rgba(15, 23, 42, 0.7); --ref-card-bg: #1e293b; --ref-card-border: rgba(255, 255, 255, 0.1); --ref-card-shadow: 0 15px 35px rgba(0, 0, 0, 0.4); --ref-text-main: #f1f5f9; --ref-text-muted: #94a3b8; } /* Labs View Placeholder Standardization */ .labs-input::placeholder, #labs-cat-input::placeholder, #labs-tournament-name::placeholder { color: #577c79 !important; opacity: 1 !important; } body.dark-mode .labs-input::placeholder, body.dark-mode #labs-cat-input::placeholder, body.dark-mode #labs-tournament-name::placeholder { color: rgba(255, 255, 255, 0.4) !important; opacity: 1 !important; } .labs-input { color: #577c79 !important; border: none !important; background: transparent !important; outline: none !important; } body.dark-mode .labs-input { color: #ffffff !important; border: none !important; background: transparent !important; } .labs-bordered-input { border: 1.5px solid #e2e8f0 !important; border-radius: 12px !important; background: white !important; padding: 10px 15px !important; transition: all 0.2s !important; color: var(--text-main) !important; opacity: 0.8 !important; } body.dark-mode .labs-bordered-input { border-color: rgba(255, 255, 255, 0.1) !important; background: rgba(15, 23, 42, 0.5) !important; color: white !important; opacity: 1 !important; } .labs-select.no-arrow { background-image: none !important; padding-right: 16px !important; } /* Labs Group Cards & Stripes */ .labs-group-card { background: #ffffff; border-radius: 8px; border: 1px solid rgba(13,148,136,0.2); box-shadow: none; } .labs-card-stripe { background: rgba(13, 148, 136, 0.2); } body.dark-mode .labs-card-stripe { background: var(--color-primary) !important; } /* Labs Add Button (Manual Add) */ .labs-add-btn { border: 1.5px solid #e2e8f0; color: #64748b; background: transparent; } body.dark-mode .labs-add-btn { border: none !important; color: #ffffff !important; background: rgba(255, 255, 255, 0.08) !important; } .labs-add-btn:hover { border-color: #cbd5e1; background: rgba(0, 0, 0, 0.02); } .labs-add-grp-btn:hover { transform: translateY(-2px); } .labs-add-btn:active { transform: scale(0.98); } body.dark-mode .labs-add-btn:hover { background: rgba(255, 255, 255, 0.12) !important; } /* Info Icons (v2.2.27) */ .wiz-info-i { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #e2e8f0; /* War #64748b — auf der grauen Flaeche des Kreises nur 2,45:1. */ color: var(--text-body); font-size: var(--fs-xs); font-weight: var(--weight-strong); cursor: pointer; transition: all 0.2s; border: 1px solid #cbd5e1; text-decoration: none !important; line-height: 1; padding: 0; box-sizing: border-box; } .wiz-info-i:hover { background: var(--primary-fill-bg); color: var(--primary-fill-fg); border-color: var(--color-primary); } body.dark-mode .wiz-info-i { background: rgba(255, 255, 255, 0.1); color: #94a3b8; border-color: rgba(255, 255, 255, 0.2); } /* Labs Wheel Picker & Settings UI */ .micro-wheel { height: 80px; overflow-y: auto; scrollbar-width: none; mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent); cursor: grab; scroll-snap-type: y mandatory; scroll-padding: 0; scroll-behavior: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; position: relative; z-index: 2; } .micro-wheel::-webkit-scrollbar { display: none; } .micro-num { height: 28px; min-height: 28px; line-height: 28px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-base); font-weight: var(--weight-medium); color: #94a3b8; transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); scroll-snap-align: center; scroll-snap-stop: always; opacity: 0.5; overflow: hidden; white-space: nowrap; box-sizing: border-box; margin: 0 !important; } .micro-num.active { color: var(--primary-strong); font-size: var(--fs-2xl); font-weight: var(--weight-medium); opacity: 1; } /* Score Wheel Mode */ .score-wheel-mode .micro-wheel { height: 92px; } .score-wheel-mode .micro-num { height: 32px; min-height: 32px; line-height: 32px; font-size: var(--fs-lg); } .score-wheel-mode .micro-num.active { font-size: var(--fs-3xl); font-weight: var(--weight-medium); } .score-input-grid { display: flex; flex-direction: column; gap: 10px; } .score-grid-wheel-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 15px; width: 100%; } .score-grid-label { text-align: center; font-weight: var(--weight-medium); font-size: var(--fs-lg); color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .score-grid-wheel { display: flex; justify-content: center; } .score-grid-colon { font-size: var(--fs-5xl); font-weight: var(--weight-bold); color: #64748b; padding-bottom: 2px; } .score-wheel-inline .labs-wheel-container { padding: 5px; border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 12px; height: 92px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; position: relative; } .labs-wheel-container { display: flex; flex-direction: column; align-items: center; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px; padding: 10px; width: 100%; box-sizing: border-box; } .labs-wheel-btn { width: 30px; height: 30px; border-radius: 10px; border: 1px solid #e2e8f0; background: white; color: #64748b; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; font-weight: var(--weight-medium); font-size: var(--fs-2xl); flex-shrink: 0; } .labs-wheel-controls { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 8px; } @media (max-width: 599px) { .wiz-scoring-grid .labs-wheel-btn { display: none !important; } .wiz-scoring-grid .labs-wheel-controls { gap: 0 !important; } } .labs-wheel-btn:hover { border-color: var(--color-primary); color: var(--primary-strong); } .labs-time-display { display: flex; align-items: center; gap: 4px; font-weight: var(--weight-medium); background: white; padding: 5px 12px; border-radius: 12px; border: 1px solid #e2e8f0; } .labs-time-colon { color: #cbd5e1; font-weight: var(--weight-strong); } /* iOS Switch */ .ios-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .ios-switch input { opacity: 0; width: 0; height: 0; } .ios-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #e2e8f0; transition: .4s; border-radius: 24px; } .ios-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; top: 3px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } input:checked+.ios-slider { background-color: rgba(13, 148, 136, 0.2); } input:checked+.ios-slider:before { transform: translateX(20px); } /* Labs Settings Cards */ .labs-settings-card { background: white; border-radius: 8px; margin-bottom: 20px; box-shadow: none; border: 1px solid #e8eef4; overflow: hidden; transition: all 0.3s; } .wiz-card-frame { background: #ffffff; border: 1px solid #e8eef4; border-radius: 8px; overflow: hidden; box-shadow: none; } .labs-settings-header { padding: 16px 20px 8px 20px; display: flex; justify-content: space-between; align-items: center; cursor: default; } .labs-settings-body { padding: 12px 20px 20px 20px; } .labs-settings-title { display: flex; align-items: center; gap: 10px; font-weight: var(--weight-medium); color: var(--text-main); font-family: var(--font-heading); font-size: var(--fs-lg); } .labs-label { display: block; opacity: 0.8; } /* Quick-Pool (High-Density Player Chips) */ .quick-pool-container { padding: 10px; animation: slideUpFade 0.3s ease-out; } @keyframes slideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUpFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .quick-pool-header { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; margin-bottom: 10px; padding: 6px 12px; cursor: pointer; user-select: none; -webkit-user-select: none; background: #f8fafc; border-radius: 8px; transition: all 0.2s; } .quick-pool-header:hover { background: #f1f5f9; } .quick-pool-header:hover span:first-child { color: var(--primary-strong); } .quick-pool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); gap: 8px; margin-bottom: 20px; padding: 0 5px; } .quick-pool-chip { padding: 8px 6px; border-radius: 10px; font-size: var(--fs-xs); font-weight: var(--weight-bold); text-align: center; cursor: pointer; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 1.5px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } .quick-pool-chip:hover { transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); } .quick-pool-chip:active { transform: scale(0.92); } .quick-pool-chip.inactive { background: #ffffff !important; color: #475569 !important; border: 1.5px solid #e2e8f0 !important; font-weight: var(--weight-bold); } .quick-pool-chip.active { border-color: rgba(0, 0, 0, 0.05); } .quick-pool-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px white; } .status-dot-playing { background: #22c55e; } .status-dot-waiting { background: #f59e0b; } .quick-pool-dashboard { max-height: 250px; overflow-y: auto; scrollbar-width: thin; padding: 12px; } .quick-pool-dashboard::-webkit-scrollbar { width: 4px; } .quick-pool-dashboard::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; } body.dark-mode .quick-pool-header { background: rgba(255, 255, 255, 0.03); } /* Fix drag flickering: when a parent has .drag-over, ignore its children */ .drag-over * { pointer-events: none !important; } /* Specific body class added during drag to disable pointer events on elements causing flicker */ body.is-dragging .quick-pool-grid, body.is-dragging .quick-pool-chip:not(.dragging), body.is-dragging .quick-pool-chip:not(.dragging) *, body.is-dragging .player-card:not(.dragging), body.is-dragging .player-card:not(.dragging) * { pointer-events: none !important; } /* The dragged item itself MUST retain pointer events to keep the drag operation alive */ body.is-dragging .quick-pool-chip.dragging, body.is-dragging .player-card.dragging { pointer-events: auto !important; } body.dark-mode .quick-pool-header:hover { background: rgba(255, 255, 255, 0.06); } body.dark-mode .quick-pool-chip.inactive { background: rgba(30, 41, 59, 0.8) !important; color: #94a3b8 !important; border: 1.5px solid rgba(255, 255, 255, 0.1) !important; } body.dark-mode .quick-pool-chip.active { border-color: rgba(255, 255, 255, 0.15); } body.dark-mode .quick-pool-status-dot { box-shadow: 0 0 0 2px #1e293b; } .labs-field-group { margin-top: 12px; margin-bottom: 24px; } .labs-select { width: 100%; padding: 12px 40px 12px 16px; border-radius: 12px; border: 1.5px solid #e2e8f0; font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: var(--fs-lg); outline: none; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); background-color: white !important; color: var(--text-main); opacity: 0.8; appearance: none !important; -webkit-appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 18px !important; cursor: pointer; } .labs-text-input { width: 100%; padding: 12px 15px; border-radius: 10px; border: 1px solid #e2e8f0; font-family: var(--font-body); font-weight: var(--weight-medium); font-size: var(--fs-lg); outline: none; transition: all 0.2s; background: white; color: var(--text-main); opacity: 0.8; } .labs-select:focus, .labs-text-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(30, 148, 136, 0.1); } .labs-hint { font-size: var(--fs-sm); color: #94a3b8; margin-top: 6px; display: block; } .labs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } /* Dark Mode Overrides */ body.dark-mode .micro-num.active { color: #ffffff; } body.dark-mode .labs-wheel-container { background: rgba(15, 23, 42, 0.3); border-color: rgba(255, 255, 255, 0.05); } body.dark-mode .labs-wheel-btn { background: rgba(15, 23, 42, 0.5); border-color: rgba(255, 255, 255, 0.1); color: #94a3b8; } body.dark-mode .labs-time-display { background: #1e293b; border-color: #334155; color: #f1f5f9; } body.dark-mode .ios-slider { background-color: #475569 !important; } body.dark-mode input:checked+.ios-slider { background-color: var(--color-primary) !important; } body.dark-mode .labs-settings-card { background: rgba(30, 41, 59, 0.9); border: 1px solid rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); } body.dark-mode .wiz-card-frame { background: rgba(30, 41, 59, 0.9); border-color: rgba(255, 255, 255, 0.1); } body.dark-mode .labs-settings-header { background: rgba(15, 23, 42, 0.5); } body.dark-mode .labs-settings-title { color: #f1f5f9; } body.dark-mode .labs-select { background-color: rgba(15, 23, 42, 0.6) !important; border-color: rgba(255, 255, 255, 0.08); color: var(--text-main); opacity: 0.8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; } body.dark-mode .labs-text-input { background: rgba(15, 23, 42, 0.5); border-color: rgba(255, 255, 255, 0.1); color: var(--text-main); opacity: 0.8; } body.dark-mode .labs-select:focus, body.dark-mode .labs-text-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2); } .wiz-inline-select { appearance: none !important; -webkit-appearance: none !important; background: transparent !important; background-image: none !important; background-color: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; padding-right: 4px !important; } body.dark-mode select { color-scheme: dark; } body.dark-mode .wiz-inline-select { color-scheme: dark; background: var(--bg-card) !important; background-color: var(--bg-card) !important; background-image: none !important; border: none !important; box-shadow: none !important; } .card-stripe { align-self: stretch; } /* Match status styling - Now handled via .card-stripe div in JS */ .match-row.match-live, .hall-field-card.match-live, .ref-field-card.match-live, .match-row.match-finished, .hall-field-card.match-finished, .ref-field-card.match-finished, .match-row.match-pending, .hall-field-card.match-pending, .ref-field-card.match-pending { box-shadow: none !important; border-left: none !important; } /* ============================================ DARK MODE - Premium gradient like landing page ============================================ */ body.dark-mode { /* Native Bedienelemente EINMAL zentral auf dunkel stellen (02.08.2026). color-scheme vererbt sich, deshalb genügt diese eine Zeile für Datums- und Zeitwähler samt Aufklapp-Kalender, Auswahllisten, Bildlaufleisten und Browser-Ausfüllhilfen. Vorher stand color-scheme an fünf Einzelstellen (select, .wiz-inline-select, input[type=date|time|datetime-local], #phase-wizard-modal select) – jedes neue Feld brauchte eine weitere Ausnahme. */ color-scheme: dark; /* Unified Design Tokens */ --radius-sm: 6px; /* Tags, Badges, kleine Elemente */ --radius-md: 8px; /* Buttons, Inputs, Selects */ --radius-lg: 8px; /* Karten, Modals, Accordions */ /* Primary Colors — Teal accent (Variant C) */ --color-primary: #0f8378; --color-primary-hover: #0f766e; --color-secondary: #374151; --color-secondary-hover: #4b5563; --color-danger: #dc2626; --color-danger-hover: #b91c1c; /* Elevation system — 3 tiers */ --bg-base: #0f172a; --bg-elevated: #1e293b; --bg-hover: #263244; /* Background Colors */ --bg-app: #0f172a; --bg-header: rgba(15, 23, 42, 0.95); --bg-card: rgba(30, 41, 59, 0.9); --bg-secondary: transparent; --bg-subtle: transparent; --bg-input: rgba(30, 41, 59, 0.9); --bg-button-secondary: rgba(51, 65, 85, 0.9); /* Border Colors */ --border-color: rgba(255, 255, 255, 0.08); --border-subtle: rgba(255, 255, 255, 0.1); --border-input: rgba(255, 255, 255, 0.2); /* Text Colors */ --text-main: #e2e8f0; --text-secondary: #cbd5e1; --text-inverted: #1e293b; /* Dunkel-Fassung der Inline-Style-Token (Gegenstück zum Block im :root). Hier – und nur hier – wird künftig entschieden, wie die App im Dunkelmodus aussieht. */ --text-subtle: #8b98ab; --text-body: #94a3b8; --text-strong: #f8fafc; --border-strong: rgba(255, 255, 255, 0.16); --surface-soft: #1e293b; --surface-page: #0f172a; --primary-strong: #5eead4; --primary-soft-bg: rgba(13, 148, 136, 0.15); --primary-soft-border: rgba(45, 212, 191, 0.35); /* ZWILLING zur Rollen-Ebene aus dem :root (dort ausführlich erklärt). Er MUSS hier stehen: ein `var(--primary-soft-bg)` im :root wird schon dort eingesetzt, mit dem Hellwert — die drei Zeilen darüber kämen nie an. Ohne diesen Block sähe der Dunkelmodus aus wie der Hellmodus. Die Werte sind absichtlich dieselben VERWEISE wie oben; nur lösen sie sich hier gegen die Dunkelwerte auf. Immer beide Blöcke ändern. */ --primary-fill-bg: var(--primary-soft-bg); --primary-fill-fg: var(--primary-strong); --primary-fill-hover: var(--primary-soft-border); --primary-fill-border: var(--primary-soft-border); /* Dunkel-Fassung der Akzent-Töne: getönte Flächen statt leuchtender Pastelltöne. */ --accent-amber-bg: rgba(245, 158, 11, 0.14); --accent-amber-bg-strong: rgba(245, 158, 11, 0.22); --accent-amber-border: rgba(245, 158, 11, 0.40); --accent-red-bg: rgba(239, 68, 68, 0.14); --accent-red-bg-strong: rgba(239, 68, 68, 0.22); --accent-red-border: rgba(239, 68, 68, 0.40); --accent-blue-bg: rgba(59, 130, 246, 0.16); --accent-blue-bg-soft: rgba(59, 130, 246, 0.10); --accent-green-bg: rgba(34, 197, 94, 0.12); --accent-green-bg-strong: rgba(34, 197, 94, 0.20); --accent-orange-bg: rgba(234, 88, 12, 0.14); --accent-orange-border: rgba(234, 88, 12, 0.40); --accent-pink-bg: rgba(236, 72, 153, 0.16); --surface-muted: #1a2434; --border-soft: rgba(255, 255, 255, 0.10); --accent-blue-border: rgba(59, 130, 246, 0.35); --accent-blue-text: #93c5fd; --accent-violet-bg: rgba(139, 92, 246, 0.16); --accent-violet-border: rgba(139, 92, 246, 0.40); --accent-violet-text: #c4b5fd; --accent-violet-bg-soft: rgba(139, 92, 246, 0.10); --accent-green-text: #6ee7b7; --accent-red-text: #fca5a5; --text-success: #4ade80; /* Zielpalette, Dunkel-Fassung: Schrift wird heller, Flächen bleiben getönt. */ --color-warning: #fbbf24; --color-info: #60a5fa; --color-violet: #a78bfa; --accent-amber-text: #fcd34d; --stepper-value: #2dd4bf; /* Diese beiden hatten bisher GAR KEINE Dunkel-Fassung – dunkelgrüne Schrift bzw. ein fast weißer Rahmen auf dunklem Grund. */ --text-success-bold: #86efac; --border-success-subtle: rgba(34, 197, 94, 0.40); --brand-primary: var(--primary-strong); --brand-secondary: rgba(51, 65, 85, 0.9); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2); /* Disable light mode card shadow in dark mode */ --card-shadow-light: none; } body.dark-mode .app-header { background: rgba(15, 23, 42, 0.95); border-bottom: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); } body.dark-mode .card:not(.settings-card) { background: rgba(30, 41, 59, 0.9); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); } body.dark-mode .card-header { border-bottom-color: rgba(255, 255, 255, 0.1); } body.dark-mode .main-nav { background: rgba(30, 41, 59, 0.98) !important; border-color: rgba(255, 255, 255, 0.15) !important; } /* Hier standen bis zum 21.09.2026 auch `font-size: var(--fs-lg)` und `font-weight: var(--weight-medium)` — beides Wiederholungen der Grundregel und beides ohne Bezug zum Dunkelmodus. Sie sind dann auch prompt auseinandergelaufen: `@media (max-width: 640px)` setzte `.nav-btn` auf --fs-xl (16 px), aber diese Regel hier ist spezifischer (0,2,1 gegen 0,1,0) — im Dunkelmodus stand das Burger-Menue auf einem Handy also auf 15 px, im Hellmodus auf 16. Entfernt: Der Dunkelmodus faerbt, er misst nicht. */ body.dark-mode .nav-btn { color: #e2e8f0; background: transparent !important; } body.dark-mode .nav-btn:hover { background: transparent !important; /* schlägt body.dark-mode button:hover (0,2,2) !important */ color: #2dd4bf; } body.dark-mode .nav-btn.active { background: rgba(13, 148, 136, 0.15); color: #2dd4bf; } /* Hamburger-Button: transparent mit dezenter Rahmung */ body.dark-mode .nav-toggle { background: transparent !important; color: #94a3b8 !important; border-color: rgba(255, 255, 255, 0.2) !important; } /* Sidebar-Buttons: transparenter Hintergrund — auch auf :hover Spezifität (0,3,1) schlägt body.dark-mode button:hover (0,2,2) mit !important */ body.dark-mode .sidebar-nav-btn, body.dark-mode .sidebar-submenu-btn, body.dark-mode .sidebar-tournament-nav-btn { background: transparent !important; } /* Nur Nav-Buttons innerhalb sidebar-item-row brauchen transparenten Hover — sidebar-submenu-btn steht außerhalb der Row und soll eigenen Hover-Hintergrund behalten. */ body.dark-mode .sidebar-nav-btn:hover, body.dark-mode .sidebar-tournament-nav-btn:hover { background: transparent !important; } /* Desktop-Icon-Nav-Buttons (inkl. Dark-Mode-Toggle): transparent im Ruhezustand */ body.dark-mode .auth-btn { color: #e2e8f0; border-color: rgba(255, 255, 255, 0.2); } body.dark-mode .logo-area h1, body.dark-mode .logo-area .mobile-logo, body.dark-mode .app-logo-text { color: #ffffff !important; } body.dark-mode .current-tournament-display { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); } body.dark-mode .tournament-name { color: #e2e8f0; } body.dark-mode input, body.dark-mode select, body.dark-mode textarea { background: rgba(30, 41, 59, 0.8) !important; border-color: rgba(255, 255, 255, 0.2) !important; color: #e2e8f0 !important; } /* Specific overrides for form elements that may have browser defaults */ body.dark-mode .form-group input, body.dark-mode .form-group select, body.dark-mode .form-section input, body.dark-mode .form-section select, body.dark-mode input[type="time"], body.dark-mode input[type="date"], body.dark-mode input[type="datetime-local"] { background: rgba(30, 41, 59, 0.9) !important; border-color: rgba(255, 255, 255, 0.2) !important; color: #e2e8f0 !important; color-scheme: dark !important; } /* Kalender-/Uhr-Symbol in Datums- und Zeitfeldern. `filter: invert(1)` ist hier BEWUSST ENTFERNT (02.08.2026): Seit `color-scheme: dark` zeichnet der Browser das Symbol von sich aus hell. Das zusätzliche Invertieren drehte es wieder auf Schwarz – genau deshalb waren Kalender- und Uhrensymbol im Dunkelmodus dunkel. Zwei Mechanismen für dieselbe Sache; color-scheme ist der richtige. */ body.dark-mode input[type="time"]::-webkit-calendar-picker-indicator, body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator, body.dark-mode input[type="datetime-local"]::-webkit-calendar-picker-indicator { cursor: pointer; } /* Force dark color scheme for all date/time inputs - affects the popup */ body.dark-mode input[type="time"], body.dark-mode input[type="date"], body.dark-mode input[type="datetime-local"] { color-scheme: dark; } body.dark-mode input::placeholder { color: #64748b; } body.dark-mode .btn.secondary { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: #e2e8f0; } body.dark-mode .btn.primary { background: var(--primary-fill-bg) !important; color: var(--primary-fill-fg) !important; border-color: transparent !important; box-shadow: none !important; } body.dark-mode .table th { color: #94a3b8; border-bottom-color: rgba(255, 255, 255, 0.1); } body.dark-mode .table td { color: #e2e8f0; border-bottom-color: rgba(255, 255, 255, 0.05); } body.dark-mode .match-row { /* Inline styles control background, border, and box-shadow */ visibility: inherit; } body.dark-mode .match-row.played { opacity: 1 !important; } body.dark-mode .match-row:hover { filter: brightness(1.1); } /* Live match row — subtle yellow tint in dark mode */ body.dark-mode .match-tabular-row.match-live, body.dark-mode .mobile-only-card.match-live { background: rgba(251, 191, 36, 0.06) !important; } /* Abgeschlossene Zeile im Dunkelmodus: Sie soll zurücktreten — aber NICHT über Durchsichtigkeit. Bis 22.08.2026 stand hier `opacity: 0.75`. Das dimmt die ganze Zeile mitsamt allem, was seine Farben selbst mitbringt: Der Niveau-/Gruppen-Chip fiel dadurch von 8,0–10,4:1 auf 2,9–3,1:1 — unlesbar, und zwar erst NACH dem Eintragen des Ergebnisses. Ein Nachziehen am Chip hilft nicht: opacity auf dem Vorfahren bildet eine eigene Ebene, ein Kind kann darin nicht wieder deckender werden. Und Rechnen hilft auch nicht — erst ab etwa 0,9 käme der Chip über 4,5:1, und dann sieht man von der Abdunklung nichts mehr. Beides zusammen geht nicht. Das Zurücktreten tragen jetzt die Mittel, die es im Hellmodus ohnehin allein tragen: der teal Kantenstreifen und der Statuspunkt (schedule-view.js, `stripeColor`). Die Tabellenansicht im Hellmodus kennt gar keine Abdunklung — die Modi sind damit gleich. Wer den Effekt zurückwill, muss ihn in FARBE ausdrücken (etwas gedämpftere Flächen- und Textfarbe für die Zeile), nicht in Deckkraft. */ /* Empty State / Welcome Card */ body.dark-mode #empty-state-view, body.dark-mode .empty-state-card { background: rgba(30, 41, 59, 0.9) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } body.dark-mode #empty-state-view h2, body.dark-mode .empty-state-card h2 { color: #e2e8f0 !important; } body.dark-mode #empty-state-view p, body.dark-mode .empty-state-card p { color: #94a3b8 !important; } /* ============================================ SCHEDULE GROUPING & HEADERS (NullNull-Plan) ============================================ */ .phase-section { margin-bottom: 30px; background: transparent; } .phase-header { font-size: var(--fs-2xl); font-weight: var(--weight-medium); color: var(--primary-strong); margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid rgba(13, 148, 136, 0.1); display: flex; align-items: center; justify-content: space-between; } body.dark-mode .phase-header { color: #2dd4bf; border-bottom-color: rgba(13, 148, 136, 0.25); } .round-section { margin-bottom: 20px; } .round-header { font-size: var(--fs-base); font-weight: var(--weight-medium); color: #64748b; margin-bottom: 10px; margin-top: 15px; padding-left: 10px; border-left: 3px solid #cbd5e1; text-transform: uppercase; letter-spacing: 0.05em; } body.dark-mode .round-header { color: #94a3b8; border-left-color: #475569; } /* Schedule Controls Toolbar (Embedded in Phase) */ .schedule-controls-toolbar { display: flex; gap: 10px; margin-bottom: 15px; padding: 10px; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 8px; align-items: center; flex-wrap: wrap; } body.dark-mode .schedule-controls-toolbar { background: rgba(30, 41, 59, 0.5); border-color: rgba(255, 255, 255, 0.1); } .schedule-control-btn { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; font-size: var(--fs-base); font-weight: var(--weight-medium); cursor: pointer; border: 1px solid transparent; transition: all 0.2s; background: white; color: #475569; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } body.dark-mode .schedule-control-btn { background: rgba(30, 41, 59, 1); color: #cbd5e1; border-color: rgba(255, 255, 255, 0.05); } .schedule-control-btn:hover { border-color: var(--color-primary); color: var(--primary-strong); transform: translateY(-1px); } .schedule-control-btn.primary { background: var(--primary-fill-bg); color: var(--primary-fill-fg); } .schedule-control-btn.primary:hover { filter: brightness(1.1); border-color: transparent; color: white; } /* Section Headers and Labels */ body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode label { color: #e2e8f0; font-weight: var(--weight-medium); } body.dark-mode .card-header h2 { color: #f1f5f9; font-weight: var(--weight-medium); } body.dark-mode .form-label, body.dark-mode .form-group label { color: #cbd5e1; } /* Group Cards */ body.dark-mode .group-card { background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; } body.dark-mode .group-card input { background: rgba(15, 23, 42, 0.8) !important; border-color: rgba(255, 255, 255, 0.2) !important; color: #e2e8f0 !important; border-radius: 8px !important; } /* Group name input specific styling */ body.dark-mode .group-name-input { border-radius: 8px !important; } /* Team name input in group cards */ body.dark-mode .group-card .team-row-card input { border-radius: 8px !important; } /* Class select dropdown - full width, less height, rounded corners */ body.dark-mode .class-select, body.dark-mode .group-card select { background: rgba(15, 23, 42, 0.8) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: #e2e8f0 !important; border-radius: 8px !important; padding: 0.35rem 0.5rem !important; } /* Global dropdown/select styling - rounded corners for ALL selects */ select { border-radius: 8px !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; padding-right: 32px !important; } body.dark-mode select { background-color: rgba(15, 23, 42, 0.8) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: #e2e8f0 !important; border-radius: 8px !important; } /* Team Rows */ body.dark-mode .team-row { background: rgba(30, 41, 59, 0.6); border-color: rgba(255, 255, 255, 0.1); } /* Team Row Cards - transparent background in groups */ body.dark-mode .team-row-card { background: transparent !important; } body.dark-mode .team-row input, body.dark-mode .team-row select { background: rgba(15, 23, 42, 0.9) !important; color: #e2e8f0 !important; } /* Ranking Criteria */ body.dark-mode .ranking-criteria-list, body.dark-mode .ranking-criteria-item { background: rgba(30, 41, 59, 0.8) !important; border-color: rgba(255, 255, 255, 0.15) !important; } body.dark-mode .ranking-criteria-item select { background: rgba(51, 65, 85, 0.9) !important; color: #e2e8f0 !important; } /* Form Sections - Transparent with rounded border */ body.dark-mode .form-section, body.dark-mode .settings-section { background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 12px !important; padding: 16px !important; margin-bottom: 16px; } body.dark-mode [style*="background:#f8fafc"]:not(:where([style*="background:var("],[style*="background: var("])), body.dark-mode [style*="background: #f8fafc"]:not(:where([style*="background:var("],[style*="background: var("])) { background: rgba(30, 41, 59, 0.8) !important; } body.dark-mode [style*="background:white"]:not(:where([style*="background:var("],[style*="background: var("])), body.dark-mode [style*="background: white"]:not(:where([style*="background:var("],[style*="background: var("])), body.dark-mode [style*="background:#ffffff"]:not(:where([style*="background:var("],[style*="background: var("])), body.dark-mode [style*="background: #ffffff"]:not(:where([style*="background:var("],[style*="background: var("])) { background: rgba(30, 41, 59, 0.9) !important; } /* Text in colored cards */ body.dark-mode [style*="color:#15803d"]:not(:where([style*="color:var("],[style*="color: var("])) { color: #2dd4bf !important; } body.dark-mode [style*="color:#92400e"]:not(:where([style*="color:var("],[style*="color: var("])) { color: #fbbf24 !important; } body.dark-mode [style*="color:#64748b"]:not(:where([style*="color:var("],[style*="color: var("])) { color: #94a3b8 !important; } /* Dividers and borders */ body.dark-mode hr, body.dark-mode .divider { border-color: rgba(255, 255, 255, 0.1); } body.dark-mode [style*="border:1px solid #e2e8f0"], body.dark-mode [style*="border: 1px solid #e2e8f0"] { border-color: rgba(255, 255, 255, 0.15) !important; } /* Modals and Keypads */ body.dark-mode .modal, body.dark-mode .keypad-content, body.dark-mode .keypad-modal .keypad-content { background: rgba(30, 41, 59, 0.98) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; color: #e2e8f0 !important; } body.dark-mode .keypad-header, body.dark-mode .modal-header { background: rgba(15, 23, 42, 0.9) !important; color: #e2e8f0 !important; border-bottom-color: rgba(255, 255, 255, 0.1) !important; } body.dark-mode .keypad-header h3, body.dark-mode .modal-header h3 { color: #f1f5f9 !important; } body.dark-mode .modal-overlay { background: rgba(0, 0, 0, 0.8); }body.dark-mode .wheel-container, body.dark-mode .wheel-item{ background: rgba(30, 41, 59, 0.95) !important; color: #e2e8f0 !important; } body.dark-mode .wheel-item.selected { background: rgba(13, 148, 136, 0.3) !important; color: #2dd4bf !important; } body.dark-mode .keypad-body { background: rgba(30, 41, 59, 0.9) !important; } /* Card headers with white backgrounds - EXCEPT groups-section which should be transparent */ body.dark-mode .card-header, body.dark-mode .section-header { background: rgba(30, 41, 59, 0.95) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 8px !important; padding: 15px !important; font-weight: var(--weight-medium); } /* Groups section header should be transparent with more spacing */ body.dark-mode .groups-section .section-header { background: transparent !important; border: none !important; padding: 0 0 16px 0 !important; } /* Schedule / Match Cards */ body.dark-mode .schedule-card, body.dark-mode .match-card, body.dark-mode .schedule-item { background: rgba(30, 41, 59, 0.85) !important; /* border controlled by inline JS styles for glow effects */ color: #e2e8f0 !important; } /* Hier stand eine Pauschalregel (Abbau 22.08.2026) — Begruendung bei .match-finished. */ /* Tournament list rows - dark mode */ body.dark-mode .tournament-row { background: rgba(30, 41, 59, 0.9) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; } body.dark-mode .tournament-row.active-row { background: rgba(30, 41, 59, 0.95) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; box-shadow: none !important; } /* Hier stand eine Pauschalregel (Abbau 22.08.2026) — Begruendung bei .match-finished. */ body.dark-mode .schedule-card .team-name, body.dark-mode .match-card .team-name { color: #2dd4bf !important; } /* Small buttons (btn-xs) - dark mode */ body.dark-mode .btn-xs { background: rgba(51, 65, 85, 0.95) !important; color: #e2e8f0 !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; } body.dark-mode .btn-xs:hover { background: rgba(71, 85, 105, 0.95) !important; } body.dark-mode .btn-xs.primary { background: var(--primary-fill-bg) !important; color: var(--primary-fill-fg) !important; border-color: var(--primary-fill-border) !important; } body.dark-mode .btn-xs.danger { background: rgba(220, 38, 38, 0.2) !important; color: #fca5a5 !important; border-color: rgba(220, 38, 38, 0.5) !important; } /* Danger icon buttons (delete icons) */ body.dark-mode .btn-icon.danger, body.dark-mode .danger { color: #fca5a5 !important; opacity: 0.8; } body.dark-mode .btn-icon.danger:hover, body.dark-mode .danger:hover { color: var(--accent-red-text) !important; opacity: 1; }/* Regel entfernt 23.08.2026 — .field-card wird im Projekt nirgends gesetzt (nur field-card-header, field-card-body und hall-field-card). */ /* Hall Field Cards - Minimal dark mode styling - inline JS handles bg, border, box-shadow */ body.dark-mode .hall-field-card { /* background, border, box-shadow controlled by inline styles in script.js */ /* Fallback only */ }/* Regel entfernt 23.08.2026 — .field-card wird im Projekt nirgends gesetzt (nur field-card-header, field-card-body und hall-field-card). */ body.dark-mode .time-badge.active, body.dark-mode .time-slot.active { background: var(--primary-fill-bg) !important; color: var(--primary-fill-fg) !important; } /* Standings / Tabellen headers */ body.dark-mode .standings-card, body.dark-mode .standings-header { background: rgba(30, 41, 59, 0.9) !important; } body.dark-mode .standings-card h3, body.dark-mode .standings-header h3 { color: #f1f5f9 !important; } /* Buttons with light backgrounds */ body.dark-mode .btn-light, body.dark-mode .btn-outline { background: rgba(255, 255, 255, 0.1) !important; color: #e2e8f0 !important; border-color: rgba(255, 255, 255, 0.2) !important; } /* Override ANY element with inline white/light background */ body.dark-mode [style*="background:#f0fdf4"]:not(:where([style*="background:var("],[style*="background: var("])), body.dark-mode [style*="background: #f0fdf4"]:not(:where([style*="background:var("],[style*="background: var("])), body.dark-mode [style*="background:#e0f2fe"]:not(:where([style*="background:var("],[style*="background: var("])), body.dark-mode [style*="background: #e0f2fe"]:not(:where([style*="background:var("],[style*="background: var("])), body.dark-mode [style*="background:#eff6ff"]:not(:where([style*="background:var("],[style*="background: var("])), body.dark-mode [style*="background: #eff6ff"]:not(:where([style*="background:var("],[style*="background: var("])), body.dark-mode [style*="background:#f0f9ff"]:not(:where([style*="background:var("],[style*="background: var("])), body.dark-mode [style*="background: #f0f9ff"]:not(:where([style*="background:var("],[style*="background: var("])) { background: rgba(22, 163, 74, 0.15) !important; } /* Light gray backgrounds */ body.dark-mode [style*="background:#f1f5f9"]:not(:where([style*="background:var("],[style*="background: var("])), body.dark-mode [style*="background: #f1f5f9"]:not(:where([style*="background:var("],[style*="background: var("])), body.dark-mode [style*="background:#f8fafc"]:not(:where([style*="background:var("],[style*="background: var("])), body.dark-mode [style*="background: #f8fafc"]:not(:where([style*="background:var("],[style*="background: var("])), body.dark-mode [style*="background:#e2e8f0"]:not(:where([style*="background:var("],[style*="background: var("])), body.dark-mode [style*="background: #e2e8f0"]:not(:where([style*="background:var("],[style*="background: var("])) { background: rgba(30, 41, 59, 0.8) !important; } /* Make text in these containers readable */ body.dark-mode [style*="background:#f0fdf4"]:not(:where([style*="background:var("],[style*="background: var("])) *, body.dark-mode [style*="background: #f0fdf4"]:not(:where([style*="background:var("],[style*="background: var("])) *, body.dark-mode [style*="background:#e0f2fe"]:not(:where([style*="background:var("],[style*="background: var("])) *, body.dark-mode [style*="background: #e0f2fe"]:not(:where([style*="background:var("],[style*="background: var("])) *, body.dark-mode [style*="background:#eff6ff"]:not(:where([style*="background:var("],[style*="background: var("])) *, body.dark-mode [style*="background: #eff6ff"]:not(:where([style*="background:var("],[style*="background: var("])) *, body.dark-mode [style*="background:#f0f9ff"]:not(:where([style*="background:var("],[style*="background: var("])) *, body.dark-mode [style*="background: #f0f9ff"]:not(:where([style*="background:var("],[style*="background: var("])) * { color: #e2e8f0 !important; } /* Purple gradient (time slider) stays as-is but ensure text is readable */ body.dark-mode [style*="background:linear-gradient"] *:not(:where([style*="color:var("],[style*="color: var("])) { color: white !important; } /* Ensure all cards have dark background (except settings-card) */ body.dark-mode section.card:not(.settings-card), body.dark-mode div.card:not(.settings-card), body.dark-mode article.card:not(.settings-card), body.dark-mode .tab-content .card:not(.settings-card) { background: rgba(30, 41, 59, 0.9) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } /* Settings card - transparent so accordions stand out */ body.dark-mode .settings-card, body.dark-mode #schedule>.card, body.dark-mode #standings>.card, body.dark-mode #hall-view>.card { background: transparent !important; border: none !important; } /* Menu items in dropdowns */ body.dark-mode .dropdown-menu, body.dark-mode .dropdown-item { background: rgba(30, 41, 59, 0.98) !important; color: #e2e8f0 !important; } body.dark-mode .dropdown-item:hover { background: rgba(51, 65, 85, 0.9) !important; } /* Placeholder text */ body.dark-mode .placeholder-text { color: #64748b; } /* ============================================ JAVASCRIPT-APPLIED DARK MODE CLASSES These classes are added by JS to inline-styled elements ============================================ */ /* Override for any element with light inline background */ body.dark-mode .dark-mode-override { background: rgba(30, 41, 59, 0.9) !important; border-color: rgba(255, 255, 255, 0.15) !important; } /* Pauschalregel entfernt 23.08.2026 (`.dark-mode-override, .dark-mode-override *`). Belegt durch `node pruefe-lesbarkeit.js --pauschal`: Die Flaeche war 8× sichtbar mit Text, und ohne die Regel aendert sich KEINE einzige Schriftfarbe — die Farbtoken liefern im Dunkelmodus laengst denselben Ton. Die Ueberschriften-Regel darunter bleibt: die setzt einen anderen, helleren Ton. */ body.dark-mode .dark-mode-override h1, body.dark-mode .dark-mode-override h2, body.dark-mode .dark-mode-override h3, body.dark-mode .dark-mode-override h4 { color: #f1f5f9 !important; } /* Standings Toolbar Separator (Dark Mode) */ body.dark-mode .standings-toolbar .toolbar-tabs { border-color: rgba(255, 255, 255, 0.15) !important; } /* Styled modals and keypads */ body.dark-mode .dark-mode-styled { background: rgba(30, 41, 59, 0.98) !important; color: #e2e8f0 !important; } /* .keypad-modal is the full-screen overlay — must stay transparent so backdrop-filter blur is visible. Higher specificity (3 vs 2 classes) wins. */ body.dark-mode .keypad-modal.dark-mode-styled { background: rgba(0, 0, 0, 0.3) !important; color: inherit !important; } body.dark-mode .dark-mode-styled * { color: #e2e8f0 !important; }body.dark-mode .wheel-item, body.dark-mode [class*="wheel"]{ background: rgba(30, 41, 59, 0.95) !important; color: #e2e8f0 !important; } body.dark-mode .wheel-item { border-color: rgba(255, 255, 255, 0.1) !important; } /* Match/Schedule card text - ensure readability */ /* NOTE: background for .match-row is controlled by inline styles in script.js */ body.dark-mode .schedule-list>div, body.dark-mode .match-card { background: rgba(30, 41, 59, 0.85) !important; } /* Note: body.dark-mode .match-row styles are controlled by inline JS */ /* Hier stand eine Pauschalregel (Abbau 22.08.2026) — Begruendung bei .match-finished. */ /* Team names in schedule */ body.dark-mode .team-a, body.dark-mode .team-b, body.dark-mode [style*="color:#16a34a"]:not(:where([style*="color:var("],[style*="color: var("])), body.dark-mode [style*="color: #16a34a"]:not(:where([style*="color:var("],[style*="color: var("])), body.dark-mode [style*="color:#15803d"]:not(:where([style*="color:var("],[style*="color: var("])), body.dark-mode [style*="color: #15803d"]:not(:where([style*="color:var("],[style*="color: var("])) { color: #2dd4bf !important; } /* Score inputs and displays */ body.dark-mode .score-input, body.dark-mode .score-display { background: rgba(15, 23, 42, 0.9) !important; color: #e2e8f0 !important; border-color: rgba(255, 255, 255, 0.2) !important; } /* Labs Dark Mode Fix — [style] erhöht Spezifität auf 0,3,1 und schlägt die globale div[style*="background:white"]-Regel (0,2,2), die sonst den weißen Rand setzt */ body.dark-mode .labs-group-card, body.dark-mode .labs-group-card[style] { background: rgba(30, 41, 59, 0.9) !important; border: 1px solid rgba(45, 212, 191, 0.35) !important; backdrop-filter: blur(10px); } body.dark-mode .labs-group-card input { background: transparent !important; border: none !important; color: #e2e8f0 !important; } body.dark-mode .labs-group-card .team-class-tag { background: rgba(13, 148, 136, 0.15); border: 1px solid rgba(13, 148, 136, 0.35); color: #2dd4bf !important; } body.dark-mode div[style*="background: white"]:not(:where([style*="background:var("],[style*="background: var("])), body.dark-mode div[style*="background:white"]:not(:where([style*="background:var("],[style*="background: var("])) { background: rgba(30, 41, 59, 0.9) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } body.dark-mode .keypad-header h2, body.dark-mode .keypad-header h3 { color: #f1f5f9 !important; } body.dark-mode .keypad-content p, body.dark-mode .keypad-content span, body.dark-mode .print-options-body label { color: #cbd5e1 !important; } /* ============================================ MOBILE RESPONSIVENESS TWEAKS ============================================ */ .group-card { overflow-x: auto !important; } /* Reduce internal padding for table cards to fit content */ .group-card>div, .group-card>div { padding: 4px 4px !important; } /* COMPACT TABLE - Fixed Layout for Alignment */ .mock-table { width: auto !important; max-width: 100% !important; table-layout: auto !important; border-collapse: collapse !important; margin: 0 auto !important; } .mock-table th, .mock-table td { padding: 2px 1px !important; font-size: var(--fs-sm) !important; white-space: nowrap !important; text-align: center !important; overflow: hidden !important; border-bottom: 1px solid var(--border-color) !important; /* Separator line between rows */ } /* Remove border from the last row to avoid double border at bottom of card */ .mock-table tr:last-child th, .mock-table tr:last-child td { border-bottom: none !important; } /* COLUMN CONFIGURATION (1-based indices) */ /* 1. Rank (#) */ .mock-table th:nth-child(1), .mock-table td:nth-child(1) { width: 24px !important; } /* 2. Team Name - Takes remaining space */ .mock-table th:nth-child(2), .mock-table td:nth-child(2) { width: auto !important; text-align: left !important; text-overflow: ellipsis !important; padding-left: 2px !important; } /* 3. Played (Sp) */ .mock-table th:nth-child(3), .mock-table td:nth-child(3) { width: 28px !important; } /* 4. Goals (Tore) */ .mock-table th:nth-child(4), .mock-table td:nth-child(4) { width: 44px !important; } /* 5. Diff */ .mock-table th:nth-child(5), .mock-table td:nth-child(5) { width: 28px !important; } /* 6. Points (Pkt) */ .mock-table th:nth-child(6), .mock-table td:nth-child(6) { width: 28px !important; } /* Target last two columns generically */ .mock-table th:last-child, .mock-table td:last-child { width: 28px !important; /* Stats button */ } .mock-table th:nth-last-child(2), .mock-table td:nth-last-child(2) { width: 30px !important; } body.dark-mode .keypad-content label { color: #cbd5e1 !important; } /* Green match cards (completed) */ body.dark-mode .dark-mode-override[style*="background:#f0fdf4"]:not(:where([style*="background:var("],[style*="background: var("])), body.dark-mode .dark-mode-override[style*="background:#dcfce7"]:not(:where([style*="background:var("],[style*="background: var("])), body.dark-mode .dark-mode-override[style*="background: #f0fdf4"]:not(:where([style*="background:var("],[style*="background: var("])), body.dark-mode .dark-mode-override[style*="background: #dcfce7"]:not(:where([style*="background:var("],[style*="background: var("])) { background: rgba(34, 197, 94, 0.2) !important; border-color: rgba(34, 197, 94, 0.4) !important; }body.dark-mode [class*="fairplay"]{ background: rgba(30, 41, 59, 0.9) !important; border-color: rgba(255, 255, 255, 0.15) !important; } /* Hier stand `body.dark-mode [class*="fairplay"] * { color: #e2e8f0 !important }` (Abbau 23.08.2026) — Begruendung bei .match-finished. Sie war bis heute nicht pruefbar: Ohne ein Turnier MIT Fairplay-Wertung gibt es weder .fairplay-badge in den Tabellen noch .fairplay-active an der Karte, der Waechter mass also ins Leere. Seit der Fairplay-Fall in FAELLE steht, sind es 52 sichtbare Ziele — und ohne diese Regel bleiben alle lesbar. */ /* Fairplay points table in settings (white box) */ body.dark-mode table, body.dark-mode .table-wrapper { background: rgba(30, 41, 59, 0.8) !important; } /* Explicitly transparent for Mock Tables (Standings) in Dark Mode */ body.dark-mode .mock-table { background: transparent !important; } body.dark-mode .btn-stats { background: transparent !important; } /* Print dialogs - checkbox labels and options */ body.dark-mode .print-option, body.dark-mode .print-checkbox, body.dark-mode label[for], body.dark-mode input[type="checkbox"]+label, body.dark-mode input[type="radio"]+label { color: #e2e8f0 !important; } body.dark-mode .print-option, body.dark-mode .checkbox-option { background: rgba(30, 41, 59, 0.8) !important; border-color: rgba(255, 255, 255, 0.15) !important; } /* All nested white div containers */ body.dark-mode div[style*="background:white"]:not(:where([style*="background:var("],[style*="background: var("])), body.dark-mode div[style*="background: white"]:not(:where([style*="background:var("],[style*="background: var("])), body.dark-mode div[style*="background:#fff"]:not(:where([style*="background:var("],[style*="background: var("])), body.dark-mode div[style*="background: #fff"]:not(:where([style*="background:var("],[style*="background: var("])), body.dark-mode div[style*="background:#ffffff"]:not(:where([style*="background:var("],[style*="background: var("])), body.dark-mode div[style*="background: #ffffff"]:not(:where([style*="background:var("],[style*="background: var("])) { background: rgba(30, 41, 59, 0.95) !important; } /* Pauschalregel entfernt 23.08.2026 (weisse Inline-Flaechen, 6 Schreibweisen). Sie war die groesste von allen und faerbte jeden Nachfahren einer weiss gesetzten Flaeche um. Belegt durch `node pruefe-lesbarkeit.js --pauschal`: 390× sichtbar mit Text, und ohne sie aendert sich KEINE Schriftfarbe. Die Regel darueber, die solche Flaechen selbst dunkel einfaerbt, bleibt — sie ist der Grund, warum die Schrift inzwischen von allein stimmt. *//* Regel entfernt 23.08.2026 — Selektoren ohne Ziel: body.dark-mode .extended-input, body.dark-mode .fairplay-input, body.d *//* Regel entfernt 23.08.2026 — Selektoren ohne Ziel: body.dark-mode .extended-input *, body.dark-mode .fairplay-input *, bo */ /* Counter rows in fairplay modal */ body.dark-mode .counter-row, body.dark-mode .violation-row { background: rgba(51, 65, 85, 0.8) !important; border-color: rgba(255, 255, 255, 0.1) !important; } /* Ensure ALL white/light grey elements inside modals get dark treatment. :not(.keypad-content) schützt das Content-Wrapper-Div selbst vor dem Transparent-Override, damit body.dark-mode .keypad-content { background: rgba(30,41,59,0.98) } greift. */ body.dark-mode .keypad-content div[style], body.dark-mode .modal-content div[style], body.dark-mode .keypad-modal div[style]:not(.keypad-content) { background: transparent !important; } /* Force all text inside modals to be light */ body.dark-mode .keypad-content, body.dark-mode .keypad-content *:not(button):not(.btn):not([class*="primary"]) { color: #e2e8f0 !important; } /* Fix input fields inside modals */ /* Specific dark mode overrides for teal and light-green backgrounds frequently used in Labs */ /* Specific dark mode overrides for teal and light-green backgrounds frequently used in Labs -> Blue Harmonization */ /* Glassmorphism for Labs sections */ body.dark-mode .labs-section-container, body.dark-mode div[style*="border: 1px solid #e2e8f0"] { background: rgba(30, 41, 59, 0.8) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Fairplay Punkte/Striche input boxes in settings */ body.dark-mode input[type="number"], body.dark-mode .fairplay-point-input, body.dark-mode .striche-input { background: rgba(30, 41, 59, 0.9) !important; color: #e2e8f0 !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; } /* Any remaining white input boxes */ body.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not(.btn):not(.labs-input) { background: rgba(30, 41, 59, 0.9) !important; color: #e2e8f0 !important; border-color: rgba(255, 255, 255, 0.25) !important; } /* Basis-Stil für alle Buttons im Dunkelmodus. Spezifischere Regeln (mit Klasse oder ID) überschreiben dies automatisch — kein :not() nötig. Spezifität (0,1,2) — bewusst niedrig, damit Klassen-Overrides (0,3,1) weiterhin greifen. AUSNAHMEN (ergänzt 02.08.2026): Knöpfe, die ihre Farbe SELBST mitbringen, werden hier nicht mehr übermalt. Das betrifft zwei Fälle: 1. `background:var(--…)` – seit der Token-Umstellung ist so ein Hintergrund bereits dunkelmodus-tauglich; ihn grau zu übermalen war der Grund, warum „Bestätigen" und „Auswahl fertig" im Dunkelmodus grau statt grün waren – samt fremdem Rahmen. 2. `background:none` / `background:transparent` – ausdrücklich KEIN Hintergrund. Genau deshalb hatte das X oben rechts in „Zeitplan verschieben" plötzlich eine Kachel. Knöpfe mit noch fest verdrahteter Farbe bleiben bewusst beim alten Verhalten: Sie werden erst ausgenommen, wenn ihre Datei auf Token umgestellt ist. Damit wächst die Ausnahme automatisch mit der Umstellung mit, statt auf einen Schlag Risiko zu erzeugen. Die Ausnahmen stehen bewusst in `:not(:where(…))` und NICHT in einer Kette aus sechs einzelnen `:not(…)`. Grund: `:where()` steuert null Spezifität bei, die Regel bleibt also bei (0,1,2) wie oben dokumentiert. Mit der Kette wäre sie auf (0,8,2) gesprungen und hätte Regeln überfahren, die sich auf die niedrige Spezifität verlassen – konkret `body.dark-mode .sidebar-nav-btn/.sidebar-submenu-btn` (0,3,1) weiter oben, wodurch sämtliche Menüpunkte samt Pfeilen plötzlich einen grauen Kasten bekamen. */ body.dark-mode button:not(:where([style*="background:var("], [style*="background: var("], [style*="background:none"], [style*="background: none"], [style*="background:transparent"], [style*="background: transparent"])), body.dark-mode .btn-secondary, body.dark-mode .btn-outline, body.dark-mode .btn-generate { background: rgba(51, 65, 85, 0.9) !important; color: #e2e8f0 !important; border-color: rgba(255, 255, 255, 0.2) !important; } /* Dieselben Ausnahmen wie oben – sonst wird ein eigenfarbiger Knopf beim Überfahren doch wieder grau, was noch verwirrender wäre als durchgehend grau. */ body.dark-mode button:not(:where([style*="background:var("], [style*="background: var("], [style*="background:none"], [style*="background: none"], [style*="background:transparent"], [style*="background: transparent"])):hover { background: rgba(71, 85, 105, 0.9) !important; } /* Social-Theme-Farbkreise: ID-Selektor (Spezifität 1,1,1) schlägt alle Klassen-Regeln. Inline-background würde durch body.dark-mode button !important überschrieben, daher hier explizit die jeweilige Themenfarbe erzwingen. */ /* Spielplan erstellen + Turnierphase: teal Hintergrund beibehalten (ID-Spezifität schlägt globale button-Regel) */ /* #labs-action-generate ist seit 26.09.2026 ein Hauptschritt (.tp-knopf-haupt) — die ID-Regel hier hätte die Knopfart überstimmt; deshalb trägt sie dieselben Werte. */ body.dark-mode #labs-action-generate { background: var(--gestalt-haupt-bg) !important; color: var(--gestalt-haupt-fg) !important; border-color: transparent !important; } body.dark-mode #labs-action-generate:hover { background: var(--gestalt-haupt-hover) !important; } body.dark-mode #add-phase-btn { background: var(--primary-fill-bg) !important; color: var(--primary-fill-fg) !important; border-color: transparent !important; } body.dark-mode #add-phase-btn:hover { background: #0f766e !important; } /* Delete/Danger buttons - Same grey as input fields with white text (both modes) */ .btn-delete, .btn-danger, button.danger, .btn-icon.danger { background: rgba(15, 23, 42, 0.8) !important; color: white !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; } .btn-delete:hover, .btn-danger:hover, button.danger:hover, .btn-icon.danger:hover { background: rgba(30, 41, 59, 0.9) !important; border-color: rgba(255, 255, 255, 0.3) !important; } body.dark-mode .btn-delete, body.dark-mode .btn-danger, body.dark-mode button.danger, body.dark-mode .btn-icon.danger { background: rgba(15, 23, 42, 0.8) !important; color: white !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; } body.dark-mode .btn-delete:hover, body.dark-mode .btn-danger:hover, body.dark-mode button.danger:hover, body.dark-mode .btn-icon.danger:hover { background: rgba(30, 41, 59, 0.9) !important; border-color: rgba(255, 255, 255, 0.3) !important; } /* Dark mode toggle buttons - spielplan/felderplan */ body.dark-mode #toggle-spielplan, body.dark-mode #toggle-felderplan { background: transparent !important; } /* Active toggle button in dark mode */ body.dark-mode #toggle-spielplan.active, body.dark-mode #toggle-felderplan.active { background: rgba(13, 148, 136, 0.22) !important; border: 1px solid rgba(45, 212, 191, 0.55) !important; box-shadow: 0 0 0 1px rgba(13, 148, 136, 0.2) inset !important; } /* Light mode toggle buttons */ #toggle-spielplan.active, #toggle-felderplan.active { background: rgba(13, 148, 136, 0.1); } /* Toggle container background for dark mode */ body.dark-mode #schedule-view-toggle>div:first-child { background: rgba(15, 23, 42, 0.8) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 10px !important; padding: 3px !important; } /* Burger menu button in dark mode */ body.dark-mode #schedule-burger-btn { background: transparent !important; border-color: rgba(255, 255, 255, 0.3) !important; color: #94a3b8 !important; } body.dark-mode #schedule-burger-btn:hover { background: rgba(255, 255, 255, 0.1) !important; color: #e2e8f0 !important; } /* Generieren button and similar styled buttons - FORCE WHITE TEXT TOKEN-VORRANG: Die Textsuche trifft JEDEN Knopf, dessen Inline-Style irgendwo das Wort "background" enthält – also auch Mülleimer- und ✕-Knöpfe mit transparentem Grund. Deren Symbolfarbe wurde dadurch weiß statt grau bzw. rot. Wer seine Schriftfarbe selbst als Token mitbringt, behält sie jetzt. `:where()` steuert null Spezifität bei, die Regel bleibt also bei (0,2,1). */ body.dark-mode button[style*="background"]:not(:where([style*="color:var("], [style*="color: var("])), body.dark-mode button.btn-generate, body.dark-mode button.btn-secondary, body.dark-mode .btn-outline { color: #ffffff !important; } /* Wheelpicker - COMPREHENSIVE DARK MODE FIX */ body.dark-mode .wheel-picker-content { background: #1e293b !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6) !important; } /* body.dark-mode .keypad-modal div[style] { background: transparent } has specificity (0,3,2) and beats the rule above (0,2,1). Override with ID selector (1,x,x) to guarantee the card keeps its dark background. */ /* ===== PHASE-WIZARD-MODAL: Dunkler Hintergrund ===== */ /* Haupt-Modalbox (spec 1,1,2 > 0,3,2) */ body.dark-mode #phase-wizard-modal > div { background: #1e293b !important; } /* Header, Tab-Leiste, Footer (spec 1,1,3 > 0,3,2) */ body.dark-mode #phase-wizard-modal > div > div { background: #1e293b !important; border-color: rgba(255, 255, 255, 0.08) !important; } /* Inhaltsbereich (spec 2,1,1 > 0,3,2) — etwas dunkler als Header */ body.dark-mode #phase-wizard-modal #wiz-tabbed-content { /* Wie die Tab-Leiste (var(--bg-card)) – einheitlich wie im Wizard (kein separater grauer/dunkler Content-Hintergrund mehr). */ background: var(--bg-card) !important; } /* Tab-Buttons: transparent im Ruhezustand, Teal wenn aktiv */ body.dark-mode #phase-wizard-modal button[id^="tab-btn-"] { background: transparent !important; color: #94a3b8 !important; border: none !important; } body.dark-mode #phase-wizard-modal button[id^="tab-btn-"].active-tab { background: rgba(13, 148, 136, 0.2) !important; color: #2dd4bf !important; } /* Close-Button, Nav-Buttons (‹ ›) und + Niveau / X-Buttons: transparent halten. Nach JS-Manipulation via this.style.opacity normalisiert der Browser "background:none" → "background: none" (mit Leerzeichen), deshalb beide Varianten abdecken. Hover + Focus explizit, um body.dark-mode button:hover zu überschreiben. */ body.dark-mode #phase-wizard-modal button[style*="background:none"], body.dark-mode #phase-wizard-modal button[style*="background: none"], body.dark-mode #phase-wizard-modal button[style*="background:none"]:hover, body.dark-mode #phase-wizard-modal button[style*="background: none"]:hover, body.dark-mode #phase-wizard-modal button[style*="background:none"]:focus, body.dark-mode #phase-wizard-modal button[style*="background: none"]:focus, body.dark-mode #phase-wizard-modal button[style*="background:transparent"], body.dark-mode #phase-wizard-modal button[style*="background: transparent"], body.dark-mode #phase-wizard-modal button[style*="background:transparent"]:hover, body.dark-mode #phase-wizard-modal button[style*="background: transparent"]:hover, body.dark-mode #phase-wizard-modal button[style*="background:transparent"]:focus, body.dark-mode #phase-wizard-modal button[style*="background: transparent"]:focus { background: transparent !important; border: none !important; box-shadow: none !important; } /* "Speichern & Schließen" Teal-Button beibehalten */ body.dark-mode #phase-wizard-modal button[style*="background:#0d9488"]:not(:where([style*="background:var("],[style*="background: var("])), body.dark-mode #phase-wizard-modal button[style*="background: #0d9488"]:not(:where([style*="background:var("],[style*="background: var("])) { background: var(--primary-fill-bg) !important; color: var(--primary-fill-fg) !important; } /* ── PHASE-WIZARD: Trennlinien dezent ──────────────────────────────── */ /* Robust: greift sowohl bei Original-Syntax als auch nach JS-Normalisierung (Browser schreibt "height: 0px" wenn display via JS geändert wird) */ body.dark-mode #phase-wizard-modal [style*="height:0"], body.dark-mode #phase-wizard-modal [style*="height: 0"] { border-color: rgba(255, 255, 255, 0.08) !important; } /* Trennlinien mit border-bottom-Inline-Style */ body.dark-mode #phase-wizard-modal [style*="border-bottom:1px solid #f1f5f9"], body.dark-mode #phase-wizard-modal [style*="border-bottom:1px solid #e2e8f0"] { border-bottom-color: rgba(255, 255, 255, 0.08) !important; } /* Spezifische Trennlinien, die via JS ihren display-Wert ändern */ body.dark-mode #wiz-row-pairing-divider, body.dark-mode #wiz-row-standard-rounds-sep { border-color: rgba(255, 255, 255, 0.08) !important; } /* ── PHASE-WIZARD: Zeilenbeschriftungen & allgemeine Textfarben ───── */ body.dark-mode #phase-wizard-modal [style*="color:#334155"]:not(:where([style*="color:var("],[style*="color: var("])), body.dark-mode #phase-wizard-modal [style*="color: #334155"]:not(:where([style*="color:var("],[style*="color: var("])) { color: #cbd5e1 !important; } body.dark-mode #phase-wizard-modal [style*="color:#64748b"]:not(:where([style*="color:var("],[style*="color: var("])), body.dark-mode #phase-wizard-modal [style*="color: #64748b"]:not(:where([style*="color:var("],[style*="color: var("])) { color: #94a3b8 !important; } /* ── PHASE-WIZARD: Einheitlicher Hintergrund (Dark Mode) ─────────── */ /* Alle Karten, Selects, Inputs und helle Bereiche → einheitliches var(--bg-card) */ body.dark-mode #phase-wizard-modal .wiz-card-frame { background: var(--bg-card) !important; border: none !important; } body.dark-mode #phase-wizard-modal .labs-settings-header { background: transparent !important; } body.dark-mode #phase-wizard-modal .labs-settings-title { color: var(--text-main) !important; } body.dark-mode #phase-wizard-modal select { background: #1e293b !important; background-color: #1e293b !important; border: none !important; color-scheme: dark; } /* Native Dropdown-Popup: Optionen dunkel rendern */ body.dark-mode select option { background-color: #1e293b; color: #e2e8f0; } /* ── PHASE-WIZARD: Info-Box K.O.-Planung ─────────────────────────── */ /* ── PHASE-WIZARD: Radio-Cards (Teilnehmer & Herkunft) ────────────── */ body.dark-mode #phase-wizard-modal .wiz-radio-card { background: rgba(30, 41, 59, 0.8) !important; border-color: rgba(255, 255, 255, 0.1) !important; } body.dark-mode #phase-wizard-modal .wiz-radio-card:hover { background: rgba(13, 148, 136, 0.1) !important; border-color: rgba(13, 148, 136, 0.5) !important; } body.dark-mode #phase-wizard-modal .wiz-radio-card.active { background: rgba(13, 148, 136, 0.12) !important; border-color: var(--color-primary) !important; } body.dark-mode #phase-wizard-modal .wiz-radio-card-title { color: #e2e8f0 !important; } body.dark-mode #phase-wizard-modal .wiz-radio-card.active .wiz-radio-card-title { color: #2dd4bf !important; } body.dark-mode #phase-wizard-modal .wiz-radio-card-desc { color: #94a3b8 !important; } body.dark-mode #phase-wizard-modal .wiz-radio-card-icon { background: rgba(255, 255, 255, 0.06) !important; color: #94a3b8 !important; } body.dark-mode #phase-wizard-modal .wiz-radio-card.active .wiz-radio-card-icon { background: var(--primary-fill-bg) !important; color: var(--primary-fill-fg) !important; } /* ── PHASE-WIZARD: Smart-Info-Box ────────────────────────────────── */ body.dark-mode #phase-wizard-modal .wiz-smart-info { background: rgba(13, 148, 136, 0.08) !important; border-color: rgba(13, 148, 136, 0.25) !important; } /* ── PHASE-WIZARD: Klassen-Chips ─────────────────────────────────── */ body.dark-mode #phase-wizard-modal .wiz-plan-class-chip { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #cbd5e1 !important; } /* HIER STANDEN 26 REGELN für die Schriftvergrößerung der Planungshilfe (entfernt 08.08.2026). Zwei Prozentregeln und 24 Textsuch-Regeln der Form html.tp-font-large #phase-wizard-modal [style*='font-size:12px'] { font-size: 13.5px !important; } — eine je Größenwert, und nur für die Planungshilfe. Alle übrigen der damals 177 Größen wuchsen gar nicht mit. Sie sind überflüssig, seit die Größen über Token laufen: --fs-* trägt calc(… * var(--tp-font-scale)) und wirkt damit ÜBERALL, nicht nur hier. Die beiden Prozentregeln hätten ohnehin nichts genutzt — rem reagiert nicht auf die Schriftgröße eines Containers. NICHT wieder hinzufügen. */ /* Phase editor: mobile layout that survives the largest font size at ~350px. */ @media (max-width: 760px) { #phase-wizard-modal { padding: 6px !important; align-items: stretch !important; justify-content: center !important; } #phase-wizard-modal > div { width: calc(100vw - 12px) !important; max-width: calc(100vw - 12px) !important; height: calc(100dvh - 12px) !important; max-height: calc(100dvh - 12px) !important; border-radius: 14px !important; } /* Kopfzeile. Diese sechs Regeln hingen vorher an `> div > div:first-child` und griffen KEINE EINZIGE: erstes Kind der Dialogkarte ist ein verstecktes , also gibt es dort gar kein div:first-child. Jetzt an den Klassen, die der Editor selbst vergibt (.wiz-head-row / .wiz-head-main) – unabhängig von der Kindreihenfolge. */ #phase-wizard-modal .wiz-head-row { padding: 10px 12px !important; gap: 8px !important; } #phase-wizard-modal .wiz-head-main { min-width: 0 !important; flex: 1 1 auto !important; } /* Phasenname und Modus kürzen, statt die Zeile zu sprengen. */ #phase-wizard-modal .wiz-head-row input, #phase-wizard-modal .wiz-head-mode { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #phase-wizard-modal .wiz-head-row button { min-width: 36px !important; min-height: 36px !important; } #phase-wizard-modal button[title*="Einstellungen auf alle"] { padding: 6px 8px !important; max-width: 118px !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Schrittleiste. Stand als `> div > div:nth-child(3)` da – das zählte das versteckte mit und kippt, sobald jemand ein Element im Kopf ergänzt. Jetzt an der Klasse. */ #phase-wizard-modal .wiz-tabbar-wrap { padding: 0 12px !important; } #phase-wizard-modal .wizard-tab-bar { gap: 4px !important; overflow-x: auto !important; scrollbar-width: none !important; } /* 8px 12px stammen aus der Zeit, als jeder Schritt seine Beschriftung trug – bei sechs Kreisen sind das 144px reiner Innenabstand und die Leiste muss scrollen. 6px ringsum ergeben immer noch ein 36px hohes Tippziel, aber die Leiste passt bei 375px in eine Zeile. */ #phase-wizard-modal button[id^="tab-btn-"] { padding: 6px !important; min-width: max-content !important; flex: 0 0 auto !important; } /* Sehr schmal: die Modus-Angabe im Kopf weglassen. Sie drängt dort das Namensfeld zusammen, obwohl sie im Einstellungen-Tab ohnehin ausgeschrieben steht. */ @media (max-width: 480px) { #phase-wizard-modal .wiz-head-mode { display: none !important; } } #phase-wizard-modal #wiz-tabbed-content { padding: 16px 12px !important; } #phase-wizard-modal .labs-settings-header { padding-left: 0 !important; } #phase-wizard-modal .wiz-card-frame { overflow: hidden !important; border-radius: 12px !important; } /* NUR Legacy-Zeilen (.wiz-responsive-row): Die neuen Wizard-Stil-Zeilen (Label links, Control rechts, inline geflext) handhaben schmale Breiten selbst und dürfen NICHT aufgebrochen werden — sonst rutschen Stepper/Selects unters Label. */ #phase-wizard-modal .wiz-responsive-row, #phase-wizard-modal [id*="wrapper"] > div[style*="display:flex"] { height: auto !important; min-height: 0 !important; padding: 12px 16px !important; align-items: stretch !important; flex-wrap: wrap !important; gap: 8px !important; } #phase-wizard-modal .wiz-responsive-label, #phase-wizard-modal .wiz-card-frame .wiz-responsive-label { width: 100% !important; flex: 0 0 100% !important; padding-right: 0 !important; justify-content: flex-start !important; gap: 8px !important; min-width: 0 !important; white-space: normal !important; overflow-wrap: anywhere !important; } #phase-wizard-modal .wiz-responsive-row > div:not(.wiz-responsive-label) { flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; justify-content: flex-start !important; align-items: center !important; flex-wrap: wrap !important; } /* 100%-Breite NUR in Legacy-Zeilen: Die Wizard-Stil-Felder (width:220px, rechtsbündig) sollen wie im Wizard einheitlich breit bleiben. */ #phase-wizard-modal .wiz-responsive-row select, #phase-wizard-modal .wiz-responsive-row input:not([type="checkbox"]), #phase-wizard-modal .wiz-responsive-row textarea { width: 100% !important; min-width: 0 !important; white-space: normal !important; text-overflow: clip !important; } /* Checkboxen (Niveau-/Klassen-Matrix) behalten ihre feste Größe – 100%-Breite zentriert das Kästchen und drängt die restliche Zeile aus dem Sichtbereich. */ #phase-wizard-modal .wiz-card-frame input[type="checkbox"] { width: 18px !important; height: 18px !important; flex: 0 0 18px !important; } /* Niveau-Matrix-Zeilen dürfen bei schmaler Breite sauber umbrechen. */ #phase-wizard-modal #wiz-plan-levels-list > div, #phase-wizard-modal #dd-plan-levels-list > div { flex-wrap: wrap !important; } #phase-wizard-modal .labs-stepper-compact { max-width: 100% !important; background-color: var(--bg-card); } #phase-wizard-modal [style*="width:96px"], #phase-wizard-modal [style*="width: 96px"] { width: auto !important; max-width: 100% !important; flex: 0 0 auto !important; } #phase-wizard-modal div[style*="width:40px"], #phase-wizard-modal div[style*="width: 40px"] { display: none !important; width: 0 !important; flex: 0 0 0 !important; } #phase-wizard-modal [id*="wheel"][style*="display:flex"], #phase-wizard-modal [id*="wheel"][style*="display: flex"], #phase-wizard-modal [id*="stepper"][style*="display:flex"], #phase-wizard-modal [id*="stepper"][style*="display: flex"], #phase-wizard-modal .labs-stepper-compact { display: inline-flex !important; flex: 0 0 auto !important; align-self: flex-start !important; } #phase-wizard-modal .wiz-card-frame [style*="justify-content:start"], #phase-wizard-modal .wiz-card-frame [style*="justify-content:flex-start"], #phase-wizard-modal .wiz-card-frame [style*="justify-content: flex-start"] { justify-content: flex-start !important; } #phase-wizard-modal .wiz-card-frame [style*="flex:1; display:flex"], #phase-wizard-modal .wiz-card-frame [style*="flex: 1; display: flex"], #phase-wizard-modal .wiz-card-frame [style*="flex:1;display:flex"], #phase-wizard-modal .wiz-card-frame [style*="flex: 1; display:flex"] { flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; justify-content: flex-start !important; align-items: center !important; flex-wrap: wrap !important; } #phase-wizard-modal .wiz-card-frame [style*="gap:16px"], #phase-wizard-modal .wiz-card-frame [style*="gap: 16px"], #phase-wizard-modal .wiz-card-frame [style*="gap:12px"], #phase-wizard-modal .wiz-card-frame [style*="gap: 12px"] { gap: 8px !important; } #phase-wizard-modal button[onclick*="onWizPenaltyRemove"] { display: inline-flex !important; width: 44px !important; min-width: 44px !important; flex: 0 0 44px !important; align-self: center !important; margin-left: auto !important; } #phase-wizard-modal [style*="display:flex"] > button[onclick*="onWizPenaltyRemove"] { order: 3 !important; } #phase-wizard-modal .wiz-card-frame > div:has(> button[onclick*="onWizPenaltyRemove"]) { display: grid !important; grid-template-columns: minmax(0, 1fr) 44px !important; align-items: center !important; gap: 8px !important; height: auto !important; min-height: 0 !important; padding: 12px 16px !important; } #phase-wizard-modal .wiz-card-frame > div:has(> button[onclick*="onWizPenaltyRemove"]) > div:first-child { grid-column: 1 / -1 !important; width: 100% !important; flex: none !important; } #phase-wizard-modal .wiz-card-frame > div:has(> button[onclick*="onWizPenaltyRemove"]) > div:nth-child(2) { grid-column: 1 !important; width: auto !important; flex: none !important; justify-content: flex-start !important; } #phase-wizard-modal .wiz-card-frame > div:has(> button[onclick*="onWizPenaltyRemove"]) > button { grid-column: 2 !important; } #phase-wizard-modal button[onclick*="onLabsClassRemove"], #phase-wizard-modal button[onclick*="onLabsLevelRemove"] { display: inline-flex !important; width: 44px !important; min-width: 44px !important; flex: 0 0 44px !important; align-self: center !important; margin-left: auto !important; } #phase-wizard-modal #wiz-tab-classes [style*="display:grid"], #phase-wizard-modal #wiz-tab-classes [style*="display: grid"] { display: grid !important; grid-template-columns: 1fr !important; } #phase-wizard-modal #wiz-tab-classes [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } #phase-wizard-modal #wiz-tab-classes p, #phase-wizard-modal #wiz-tab-classes div, #phase-wizard-modal #wiz-tab-classes span { max-width: 100% !important; white-space: normal !important; overflow-wrap: anywhere !important; } /* Unified info cards (header icon + bullet rows) keep their row layout on mobile; the old badge-row overrides were removed with the redesign (v2.3.x). */ /* wiz-wheel-phase-fields-wrapper + rounds-container-standard entfernt: sind jetzt Wizard-Stil-Zeilen (Stepper rechts) und dürfen nicht auf 100% gezogen werden. ppteam + rounds-alt ebenfalls entfernt (2026-07-03): sind jetzt Wizard-Zeilen (Label links, Stepper rechts via space-between, ohne .wiz-responsive-label) – der alte 100%-Zwang stapelte Label und Stepper übereinander. advancing-row ist dauerhaft ausgeblendet (auto-berechnet), braucht die Regel nicht mehr. */ /* Feld-Namen: nebeneinander wie im Wizard (Inputs bringen flex:1 1 140px inline mit); die alte Stapel-Regel (ein Input pro Zeile) wurde mit dem Redesign entfernt. */ #phase-wizard-modal .wiz-mode-cards { grid-template-columns: 1fr !important; } #phase-wizard-modal .wiz-mode-card-title, #phase-wizard-modal .wiz-mode-card-desc { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.25 !important; } #phase-wizard-modal .wiz-radio-card { padding: 12px !important; gap: 10px !important; } #phase-wizard-modal .wiz-radio-card-content { min-width: 0 !important; } #phase-wizard-modal #wiz-plan-status-pinned-container { padding: 8px 12px !important; } #phase-wizard-modal > div > div:last-child { padding: 12px !important; gap: 10px !important; justify-content: stretch !important; } #phase-wizard-modal > div > div:last-child button { flex: 1 1 0 !important; min-width: 0 !important; padding: 12px 10px !important; line-height: 1.15 !important; white-space: normal !important; } } @media (max-width: 380px) { #phase-wizard-modal { padding: 4px !important; } #phase-wizard-modal > div { width: calc(100vw - 8px) !important; max-width: calc(100vw - 8px) !important; height: calc(100dvh - 8px) !important; max-height: calc(100dvh - 8px) !important; } #phase-wizard-modal #wiz-tabbed-content { padding: 14px 10px !important; } #phase-wizard-modal .wiz-card-frame > div[style*="display:flex"], #phase-wizard-modal [id^="wiz-row-"][style*="display:flex"], #phase-wizard-modal [id*="wrapper"] > div[style*="display:flex"] { padding: 12px !important; } #phase-wizard-modal button[title*="Einstellungen auf alle"] { max-width: 98px !important; } } /* ── BESCHRIFTUNG + AUSWAHLFELD: auf schmalen Geräten untereinander ────────────── Beide Assistenten setzen ihre Zeilen als
Überschrift + Erklärung
Das `flex-shrink:0` am Auswahlfeld ist der Fehler: Ein unsichtbar ueber dem Chip, statt eines eigenen Menues. */ .tp-kader-chip { position: relative; display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; max-width: 130px; padding: 3px 9px; border: 1px solid var(--border-color); border-radius: 999px; background: var(--surface-page); color: var(--text-body); font-size: var(--fs-xs); font-weight: var(--weight-strong); white-space: nowrap; } .tp-kader-chip > span { overflow: hidden; text-overflow: ellipsis; } .tp-kader-chip.ist-gesetzt { border-color: var(--primary-soft-border); background: var(--primary-soft-bg); color: var(--primary-strong); } .tp-kader-chip.ist-symbol { padding: 4px 6px; border-radius: 7px; color: var(--text-body); } .tp-kader-chip select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } /* Anwesenheit und Entfernen: kleine Symbole, die erst beim Zeigen Farbe bekommen — sonst schreit jede Zeile mit fuenf bunten Knoepfen um Aufmerksamkeit. */ .tp-kader-symbolknopf { background: none; border: none; cursor: pointer; color: var(--text-subtle); padding: 2px 4px; line-height: 1; flex-shrink: 0; transition: color 0.15s; } .tp-kader-symbolknopf:hover { color: var(--primary-strong); } .tp-kader-symbolknopf.ist-zurueck { color: var(--text-success); } /* Die Bezeichnung eines Kader-Abschnitts ist antippbar, sieht aber wie Text aus: Sie gehoert der Phase, nicht dem Team — ein Klick benennt sie fuer ALLE Teams um. Ein Knopf, der wie ein Knopf aussaehe, versprach hier zu viel. */ .tp-kader-abschnittname { display: inline-flex; align-items: center; gap: 5px; border: none; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } .tp-kader-abschnittname:hover { color: var(--primary-strong); } /* Vorhandene Personen zum Antippen. Blass = steht schon in einem anderen Team; ein Klick nimmt sie mit herueber. */ .tp-kader-vorschlaege { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; } .tp-kader-vorschlag { padding: 4px 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg-card); color: var(--text-body); font-size: var(--fs-md); cursor: pointer; transition: all 0.15s; } .tp-kader-vorschlag.ist-blass { border-style: dashed; background: var(--surface-page); color: var(--text-body); font-style: italic; } .tp-kader-vorschlag:hover { border-color: var(--color-primary); background: var(--primary-soft-bg); color: var(--primary-strong); font-style: normal; } /* ========================================================================== DIE KADER-KARTE ALS ZWEI REITER (Aufbau: players-teams.js) Bis zum 04.09.2026 lag alles in einer Bahn: Kopf, Umschalter, Anwesenheits- Verweis, Block „Team", Personen, Anlegen, Kader-Abschnitte, Fuss. Sieben Bloecke vor der ersten Person — man musste scrollen, um zu sehen, wofuer man die Karte geoeffnet hat. Jetzt traegt der Reiter „Kader" nur Liste und Anlege-Zeile; was man einmal einstellt, liegt unter „Einstellungen". ========================================================================== */ /* Was vom Block „Team" beim Arbeiten gebraucht wird: Phase und Klasse, in einer Zeile. Dafuer musste bisher der ganze Block offen stehen. */ .tp-kader-kontext { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin: 10px 0 2px; font-size: var(--fs-xs); /* --text-subtle, NICHT --text-muted: Letzteres gibt es in dieser App gar nicht — es steht nur in landing.css, und die laedt app.html nicht. Die Zeile bekam dadurch ueberhaupt keine Farbe. pruefe-variablen.js konnte das nicht melden, weil es bis 04.09.2026 nur .js-Dateien las. */ color: var(--text-subtle); } /* Die beiden Wege nach draussen — Klassen-Ansicht und Anwesenheit. Beide sind „weiter schauen", also dieselbe Form, als Paar, UNTER der Liste. Ueber ihr standen sie vor dem Inhalt, um den es geht. */ .tp-kader-bruecken { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 2px; } /* .tp-kader-alleklassen traegt `margin: 0 0 4px auto` — allein steht der Verweis damit rechts. Zu zweit in einer Reihe schoebe das auto beide auseinander. */ .tp-kader-bruecken .tp-kader-alleklassen { margin: 0; } /* Der Anlege-Kasten als Zeile statt als gestrichelter Rahmen: Direkt unter der Liste erklaert die Stelle schon, wozu die zwei Felder da sind. */ .tp-teamkarte-anlegen.ist-schmal { border: none; border-top: 1px solid var(--border-color); border-radius: 0; padding: 12px 0 0; margin-top: 12px; } .tp-teamkarte-anlegen.ist-schmal .pa-schnell { border: 1px solid var(--border-color); background: var(--surface-soft); } /* Der Satz „Vorname und Nachname getrennt…" steht im gemeinsamen Baustein schnellAnlageHtml und wird an seinen anderen Stellen gebraucht. Hier, unter der Liste und mit beschrifteten Feldern, kostet er nur Hoehe. */ .tp-teamkarte-anlegen.ist-schmal .pa-schnell-hinweis { display: none; } /* Ein leerer Kader-Abschnitt ist eine Zeile, kein Block: Die 0 dahinter sagt dasselbe wie eine zweite Zeile „Noch niemand". */ .tp-kader-teil.ist-leer { opacity: 0.55; } /* --- Das „…"-Menue der Personenzeile ---------------------------------------- Gebaut aus .pt-dropdown-popover (togglePlayerMenu), damit es im Dunkelmodus schon geregelt ist. Zwei Eintraege sind AUSWAHLEN: Ein unsichtbares