/* ========================================================================= Dart-Scoring-Prototyp - dunkles Design-System (aufgeraeumt) Fokus: Tablet-Bedienbarkeit (Kap. 13), Scoring-View im Querformat. ========================================================================= */ :root { /* Flaechen (dunkle Rampe, leicht blaeulich) */ --bg: #0b0f14; --surface: #131922; --surface-2: #1a222d; --surface-3: #232e3b; --border: #232d3a; --border-strong: #33404f; /* Text */ --text: #eef2f8; --text-dim: #9aa6b6; --text-faint: #67717f; /* Akzent = kuehles Cyan; good = gruen (Checkout/Sieg), bad = rot (Bust) */ --accent: #4cc2ff; --accent-ink: #052534; --accent-tint:rgba(76, 194, 255, 0.14); --good: #34d399; --good-ink: #04241a; --good-tint: rgba(52, 211, 153, 0.14); --bad: #ff5470; --bad-ink: #2b0910; --bad-tint: rgba(255, 84, 112, 0.15); --warn: #ffb020; --warn-ink: #1c1200; /* Turniere: eigene Akzentfarbe (Violett) fuer die Hervorhebung auf der Startseite */ --tourn: #a78bfa; --tourn-tint: rgba(167, 139, 250, 0.16); --medal-gold: rgba(255, 196, 0, 0.14); --medal-silver: rgba(190, 199, 210, 0.14); --medal-bronze: rgba(207, 131, 63, 0.16); --gold: #f4b400; --silver: #b9c2cf; --bronze: #cd7f4a; --zebra: rgba(255, 255, 255, 0.028); --scrim: rgba(5, 9, 14, 0.66); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-2: 0 6px 22px -10px rgba(0, 0, 0, 0.55); --shadow-pop: 0 20px 50px -12px rgba(0, 0, 0, 0.72); --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); /* Abstands-Skala */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 22px; --s6: 32px; --s7: 48px; --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-pill: 999px; --t-fast: 120ms ease; --t-med: 200ms ease; --tap: 48px; /* minimale Touch-Zielgroesse */ --maxw: 1120px; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; } /* Dunkel ist Standard (Vereinsbetrieb / Halle). Heller Modus NUR wenn der Nutzer ihn ueber den Umschalter in der Kopfzeile waehlt -> . Nicht an prefers-color-scheme gekoppelt, damit hell-eingestellte Geraete die App trotzdem dunkel zeigen. */ :root[data-theme="light"] { --bg: #f5f7fa; --surface: #ffffff; --surface-2: #eef1f6; --surface-3: #e2e7ee; --border: #dde3ec; --border-strong: #c2ccd9; --text: #0f151d; --text-dim: #55616f; --text-faint: #8b95a2; --accent: #0a86c9; --accent-ink: #ffffff; --accent-tint:rgba(10, 134, 201, 0.12); --good: #0e9f6e; --good-ink: #ffffff; --good-tint: rgba(14, 159, 110, 0.12); --bad: #e11d48; --bad-ink: #ffffff; --bad-tint: rgba(225, 29, 72, 0.10); --warn: #b45309; --warn-ink: #ffffff; --tourn: #7c3aed; --tourn-tint: rgba(124, 58, 237, 0.12); --medal-gold: rgba(234, 179, 8, 0.20); --medal-silver: rgba(148, 163, 184, 0.22); --medal-bronze: rgba(180, 83, 9, 0.16); --gold: #d99e00; --silver: #9aa7b6; --bronze: #b06b39; --zebra: rgba(15, 23, 42, 0.035); --scrim: rgba(15, 23, 32, 0.38); --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.08); --shadow-2: 0 6px 20px -10px rgba(15, 23, 42, 0.18); --shadow-pop: 0 18px 48px -14px rgba(15, 23, 42, 0.26); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); min-height: 100vh; -webkit-text-size-adjust: 100%; } body { overflow-x: hidden; } h1, h2, h3 { margin: 0 0 var(--s3); line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; } h1 { font-size: 1.4rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; } p { margin: 0 0 var(--s3); } :focus-visible { outline: none; box-shadow: var(--ring); } @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } .muted { color: var(--text-dim); font-size: 0.85rem; } .faint { color: var(--text-faint); } .center { text-align: center; } .hidden { display: none !important; } /* ---------- Taskleiste (persistent) ---------- */ /* Vor dem Start von app.js: die richtige obere Leiste sofort zeigen, damit die Browser-Version (Marke + BETA + "Start") nicht kurz aufblitzt. Die Klassen werden im gesetzt und von app.js wieder entfernt, sobald die echten body-Klassen (native / download-only) stehen. */ html.boot-webonly .taskbar, html.boot-webonly #botnav, html.boot-webonly #fab, html.boot-webonly #app-ver, html.boot-feature .taskbar, html.boot-feature #botnav, html.boot-feature #fab, html.boot-feature #app-ver { display: none !important; } html.boot-native .tb-brand, html.boot-native .proto-badge, html.boot-native .tb-tab { display: none !important; } html.boot-native .taskbar { padding: 10px 14px; -webkit-backdrop-filter: none; backdrop-filter: none; } html.boot-native .tb-applogo { display: block; width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; } html.boot-native .tb-appbar-title { display: block; flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .taskbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding: 10px var(--s4); background: var(--surface); background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .tb-brand { font-size: 1.02rem; font-weight: 800; letter-spacing: -0.01em; display: flex; align-items: center; gap: var(--s2); } .tb-logo { height: 22px; width: 22px; object-fit: contain; flex: none; } .proto-badge { font-size: 0.58rem; background: var(--warn); color: var(--warn-ink); padding: 2px 8px; border-radius: var(--radius-pill); font-weight: 800; letter-spacing: 0.04em; } .tb-nav { display: flex; gap: var(--s2); } .tb-tab { min-height: 38px; padding: 0 var(--s4); border-radius: var(--radius-pill); border: 1px solid transparent; background: var(--surface-2); color: var(--text-dim); font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: color var(--t-fast), background var(--t-fast); } .tb-tab:hover { color: var(--text); background: var(--surface-3); } .tb-tab.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .tb-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; min-height: 38px; border-radius: var(--radius-pill); border: 1px solid transparent; background: var(--surface-2); color: var(--text-dim); font-size: 1rem; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); } .tb-icon-btn:hover { background: var(--surface-3); color: var(--text); } /* Mod-Schalter: eingeschaltet = Akzent gefüllt, ausgeschaltet = nur Umriss. */ #mod-toggle.is-on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } #mod-toggle:not(.is-on) { color: var(--text-faint); } #mod-toggle[hidden] { display: none; } /* ---------- App-Rahmen ---------- */ #app { max-width: var(--maxw); margin: 0 auto; padding: var(--s5) var(--s4) var(--s7); } .page-title { font-size: 1.35rem; font-weight: 800; margin: 0 0 var(--s5); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); border: 1px solid transparent; border-radius: var(--radius); padding: 0 var(--s5); min-height: var(--tap); font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; cursor: pointer; background: var(--accent); color: var(--accent-ink); text-decoration: none; transition: background var(--t-fast), border-color var(--t-fast), opacity var(--t-fast), transform var(--t-fast); } .btn:hover { filter: brightness(1.05); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.4; cursor: not-allowed; filter: none; transform: none; } .btn.secondary { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); } .btn.secondary:hover { background: var(--surface-3); filter: none; } .btn.ghost { background: transparent; color: var(--accent); border-color: var(--accent); } .btn.ghost:hover { background: var(--accent-tint); filter: none; } .btn.subtle { background: transparent; color: var(--text-dim); border-color: var(--border); font-weight: 600; } .btn.subtle:hover { color: var(--text); background: var(--surface-2); filter: none; } .btn.danger { background: var(--bad); color: var(--bad-ink); } .btn.full { width: 100%; } .btn.small { min-height: 38px; padding: 0 var(--s4); font-size: 0.85rem; } .btn.big { min-height: 60px; font-size: 1.15rem; } .btn-row { display: flex; gap: var(--s3); flex-wrap: wrap; } .btn-row.end { justify-content: flex-end; } /* ---------- Karten ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s5); box-shadow: var(--shadow-2); } .card + .card { margin-top: var(--s4); } .card.danger-zone { border-color: var(--bad); background: var(--bad-tint); box-shadow: none; } .card.danger-zone h3 { color: var(--bad); } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s4); } /* ---------- Formularelemente ---------- */ label.field { display: block; font-size: 0.82rem; color: var(--text-dim); margin: var(--s4) 0 var(--s1); } label.field:first-child { margin-top: 0; } input[type=text], input[type=password], input[type=number], input[type=datetime-local], select, textarea { width: 100%; padding: 0 var(--s4); min-height: var(--tap); border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font-size: 1rem; /* 16px: verhindert auf iOS den Auto-Zoom beim Fokus */ transition: border-color var(--t-fast), box-shadow var(--t-fast); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); } /* Mehrzeilig: iOS/Android geben Textareas sonst eigenes (oft dunkles, winziges) Chrome – hier explizit auf das App-Design ziehen. */ textarea { -webkit-appearance: none; appearance: none; padding: var(--s3) var(--s4); min-height: 96px; line-height: 1.45; font-family: inherit; resize: vertical; color-scheme: light dark; } textarea::placeholder { color: var(--text-faint); } .inline-fields { display: flex; gap: var(--s3); flex-wrap: wrap; } .inline-fields > div { flex: 1; min-width: 150px; } /* Segmented control (Wizard) */ .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s2); } .seg.wrap { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); } .seg button { min-height: 52px; border: 1px solid transparent; border-radius: calc(var(--radius) - 4px); background: transparent; color: var(--text-dim); font-size: 1rem; font-weight: 700; cursor: pointer; } .seg button.on { background: var(--accent); color: var(--accent-ink); } /* Stepper (Anzahl Legs/Saetze) */ .stepper { display: flex; align-items: center; gap: var(--s3); } .stepper button { width: var(--tap); height: var(--tap); border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font-size: 1.5rem; font-weight: 800; cursor: pointer; } .stepper .value { font-size: 1.6rem; font-weight: 800; min-width: 2ch; text-align: center; } /* Reiter innerhalb einer Box (z. B. Anmelden / Neuer Spieler) */ .mini-tabs { display: flex; gap: var(--s2); margin-bottom: var(--s4); } .mini-tab { flex: 1; min-height: 42px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: transparent; color: var(--text-dim); font-size: 0.92rem; font-weight: 700; cursor: pointer; } .mini-tab.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } /* Untereinander gestapelte Aktions-Buttons (z. B. Spiel beenden) */ .stack-actions { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s4); } .stack-actions .btn { width: 100%; } /* ---------- Listen (Spiele) ---------- */ .list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); } .list-item { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s3) var(--s4); flex-wrap: wrap; } .list-item .li-main { min-width: 180px; flex: 1; } .list-item .li-title { font-weight: 700; } .list-item .li-sub { color: var(--text-dim); font-size: 0.82rem; margin-top: 2px; } /* Turnier-Partien: ganze Zeile klickbar, keine Buttons. */ .tmatch .mp-vs { color: var(--text-dim); font-weight: 400; margin: 0 var(--s2); } .tmatch .mp-name.win { color: var(--good); } .tmatch.is-clickable { cursor: pointer; transition: background 0.12s, border-color 0.12s; } .tmatch.is-clickable::after { content: "›"; color: var(--text-dim); font-size: 1.3rem; line-height: 1; margin-left: var(--s2); } .tmatch.is-clickable:hover { background: var(--surface-3, var(--surface-2)); border-color: var(--accent); } .tmatch.is-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .tmatch.is-live { border-color: var(--accent); } .tmatch.is-done { opacity: 0.7; } .tmatch.is-done.is-clickable:hover { opacity: 1; } .badge { display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; padding: 3px 9px; border-radius: var(--radius-pill); vertical-align: middle; } .badge.wait { background: var(--accent-tint); color: var(--accent); } .badge.live { background: var(--good-tint); color: var(--good); } .badge.mod { background: var(--accent-tint); color: var(--accent); } .empty-state { color: var(--text-faint); font-style: italic; padding: var(--s3) 0; } .error-msg { background: var(--bad-tint); border: 1px solid var(--bad); color: var(--bad); padding: var(--s3) var(--s4); border-radius: var(--radius); font-size: 0.9rem; } /* ---------- Home: Kachel-Look ---------- */ .home-section { font-size: 0.95rem; color: var(--text-dim); margin: var(--s5) 0 var(--s3); } .tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s3); } .tile { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); text-align: left; box-shadow: var(--shadow-1); } .game-tile .gt-title { font-weight: 800; font-size: 1.05rem; } .game-tile .gt-sub { color: var(--text-dim); font-size: 0.8rem; } .game-tile .btn-row { margin-top: var(--s1); } .tile.is-clickable { cursor: pointer; transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); } .tile.is-clickable:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-2); } .tile.is-clickable:focus-visible { box-shadow: var(--ring); } .tile.is-clickable .btn-row button { position: relative; z-index: 1; } /* ---------- Spiel-Lobby (Einzelspiel wartet auf Gegner) ---------- */ .lobby-vs { display: flex; align-items: center; justify-content: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s2); } .lobby-vs .lobby-name { font-weight: 800; font-size: 1.3rem; } .lobby-vs .lobby-name.pending { opacity: 0.7; font-weight: 600; font-size: 1rem; } .lobby-vs .lobby-x { color: var(--text-dim); font-weight: 700; text-transform: uppercase; font-size: 0.8rem; } /* ---------- Start-Hub: große Navigations-Kacheln ---------- */ .hub { max-width: 720px; margin: 0 auto; padding-top: clamp(var(--s5), 6vh, var(--s7)); } .hub-head { font-size: 1.4rem; font-weight: 800; text-align: center; margin: 0 0 var(--s2); color: var(--text); } .hub-club { text-align: center; color: var(--text-dim); font-weight: 600; margin: 0 0 var(--s6, var(--s5)); } .hub-head + .hub-grid { margin-top: var(--s6, var(--s5)); } .hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--s3), 2.5vw, var(--s5)); } .hub-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); min-height: 184px; padding: var(--s5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); cursor: pointer; text-align: center; overflow: hidden; box-shadow: var(--shadow-1); -webkit-tap-highlight-color: transparent; transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med), background var(--t-med); } .hub-tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0; transition: opacity var(--t-med); } .hub-tile:hover { transform: translateY(-3px); border-color: var(--accent); background: var(--surface-2); box-shadow: var(--shadow-2); } .hub-tile:hover::before { opacity: 1; } .hub-tile:active { transform: translateY(-1px); } .hub-tile:focus-visible { box-shadow: var(--ring); } .hub-icon { font-size: 1.9rem; line-height: 1; } .hub-title { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; } .hub-sub { font-size: 0.82rem; color: var(--text-dim); max-width: 26ch; line-height: 1.45; } .hub-count-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--s2); margin-top: var(--s2); } .hub-counts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2); margin-top: var(--s2); } .hub-count-wrap .hub-counts { margin-top: 0; } .hub-counts-cap { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); } .hub-count { font-size: 0.78rem; font-weight: 800; color: var(--accent-ink); background: var(--accent); border-radius: var(--radius-pill); padding: 2px 12px; } .hub-count.alt { color: var(--text); background: var(--surface-3); border: 1px solid var(--border-strong); } /* Ungerade letzte Kachel (z.B. 5.) über die volle Breite */ .hub-tile:last-child:nth-child(odd) { grid-column: 1 / -1; } @media (max-width: 560px) { .hub-grid { grid-template-columns: 1fr; } .hub-tile { min-height: 128px; } .hub-icon { font-size: 1.8rem; } .hub-title { font-size: 1.3rem; } } /* Android-App: Download-/Update-Zeile unter dem Kachelraster */ .app-dl[hidden] { display: none; } .app-dl { margin-top: var(--s4); display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .app-dl-icon { font-size: 1.5rem; flex: 0 0 auto; } .app-dl-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; } .app-dl-txt .muted { font-size: 0.8rem; } .app-dl .btn { flex: 0 0 auto; } .app-dl-bar { display: block; height: 8px; margin-top: 5px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; } .app-dl-bar-fill { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.15s linear; } /* ---------- Tabelle / Rangliste ---------- */ .lb-table { width: 100%; font-size: 0.92rem; } .lb-table thead th { color: var(--text); font-weight: 700; white-space: nowrap; border-bottom: 2px solid var(--border-strong); padding: var(--s2) var(--s3); } .lb-table td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--border); vertical-align: middle; } .lb-table tbody tr { cursor: default; } .lb-table tbody tr:nth-child(even) td { background: var(--zebra); } .lb-rank { text-align: right; color: var(--text-dim); font-variant-numeric: tabular-nums; width: 1%; } .lb-name { width: 100%; font-weight: 600; } .lb-points { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .lb-medals { white-space: nowrap; font-variant-numeric: tabular-nums; } .lb-table td:nth-child(4), .lb-table td:nth-child(6), .lb-table th:nth-child(3), .lb-table th:nth-child(4), .lb-table th:nth-child(6) { text-align: right; white-space: nowrap; } .lb-table tr.is-gold td { background: var(--medal-gold) !important; } .lb-table tr.is-silver td { background: var(--medal-silver) !important; } .lb-table tr.is-bronze td { background: var(--medal-bronze) !important; } .lb-table tr.is-gold .lb-rank, .lb-table tr.is-silver .lb-rank, .lb-table tr.is-bronze .lb-rank { color: var(--text); font-weight: 700; white-space: nowrap; } .lb-legend { margin-top: var(--s4); } .lb-legend summary { cursor: pointer; color: var(--text-dim); font-size: 0.9rem; } .lb-legend summary:hover { color: var(--text); } .lb-legend ul { margin: var(--s3) 0 var(--s2); padding-left: var(--s5); } .lb-legend li { margin: 3px 0; } body.native .lb-legend { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); padding: var(--s3) var(--s4); } body.native .lb-legend summary { font-weight: 700; } @media (max-width: 480px) { .lb-table { font-size: 0.82rem; } .lb-table thead th, .lb-table td { padding: 7px var(--s2); } } /* ---------- Vereinsmeister-Verlauf (abgeschlossene Saisons) ---------- */ .season-list { display: flex; flex-direction: column; gap: var(--s2); } .season-item { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); overflow: hidden; } .season-item > summary { cursor: pointer; list-style: none; padding: var(--s3); display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; } .season-item > summary::-webkit-details-marker { display: none; } .season-item > summary::before { content: "▸"; color: var(--text-dim); } .season-item[open] > summary::before { content: "▾"; } .season-item[open] > summary { border-bottom: 1px solid var(--border); } .season-name { font-weight: 800; } .season-champ { font-size: 0.95rem; } .season-period { margin-left: auto; font-size: 0.85rem; } .season-body { padding: var(--s3); } @media (max-width: 480px) { .season-period { margin-left: 0; width: 100%; } } /* ---------- Wizard ---------- */ .wiz-progress { display: flex; gap: var(--s2); margin-bottom: var(--s5); } .wiz-progress .dot { flex: 1; height: 5px; border-radius: var(--radius-pill); background: var(--surface-3); } .wiz-progress .dot.on { background: var(--accent); } .wiz-progress .dot.done { background: var(--good); } .wiz-step h2 { margin-bottom: var(--s2); } .wiz-step .muted { margin-bottom: var(--s5); } .wiz-body { margin-bottom: var(--s6); } .wiz-foot { display: flex; justify-content: space-between; gap: var(--s3); } .summary-list { list-style: none; margin: 0 0 var(--s4); padding: 0; } .summary-list li { display: flex; justify-content: space-between; padding: var(--s3) 0; border-bottom: 1px solid var(--border); } .summary-list li span:first-child { color: var(--text-dim); } .summary-list li span:last-child { font-weight: 700; } /* ---------- Statistik-Kacheln ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s3); } .stat-tile { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s4) var(--s3); text-align: center; } .stat-tile .val { font-size: 1.5rem; font-weight: 800; color: var(--good); } .stat-tile .lbl { font-size: 0.72rem; color: var(--text-dim); margin-top: 2px; } /* Inhalt (Kacheln bzw. Grafik) links, Zeitraum-Auswahl als schmale Spalte rechts daneben – genutzt bei „Durchschnitte & Aufnahmen" und „Average-Verlauf". */ .throw-layout { display: flex; gap: var(--s4); align-items: flex-start; margin-top: var(--s3); } .throw-layout .throw-stats { flex: 1 1 auto; min-width: 0; } .throw-layout > .seg.wrap { flex: 0 0 auto; grid-template-columns: 1fr; align-self: flex-start; min-width: 5.5rem; } @media (max-width: 560px) { .throw-layout { flex-direction: column-reverse; } .throw-layout > .seg.wrap { flex: 1 1 auto; width: 100%; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); } } /* Statistik-Seite: Platz für die per Ajax nachgeladenen Blöcke reservieren, damit die Seite beim Füllen nicht „hüpft" (Layout-Shift). */ #throw-stats { min-height: 168px; } #avg-chart-wrap { min-height: 208px; } #opp-wrap { min-height: 150px; } #tstats-wrap { min-height: 150px; } #thist-wrap { min-height: 96px; } #trstats-wrap { min-height: 128px; } #throw-stats > .muted, #avg-chart-wrap > .muted, #opp-wrap > .muted, #tstats-wrap > .muted, #thist-wrap > .muted, #trstats-wrap > .muted { padding-top: var(--s3); } /* ========================================================================= SCORING-VIEW (Kap. 6 + 9) - Vollbild, Keypad am unteren Rand ========================================================================= */ /* Im Spiel wird die obere Taskleiste ausgeblendet. */ body.in-game .taskbar { display: none; } body.in-game #app { max-width: none; padding: 0; } .score-screen { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--bg); } .score-screen.score-loading { align-items: center; justify-content: center; } .score-loading-inner { color: var(--text-faint); font-size: 0.9rem; } /* Schlanke Scoring-Kopfleiste: ‹ zurück · Meta · „⋯"-Menü (ersetzt die alte Button-Reihe). Feste Höhe, bricht nie um, Optik wie die Taskleiste. */ .score-head { flex: 0 0 auto; display: flex; align-items: center; flex-wrap: nowrap; gap: var(--s2); /* iOS: unter Statusleiste / Dynamic Island frei halten – der Bedienbereich bleibt volle 48 px, die Safe-Area kommt als Polster obendrauf. */ min-height: calc(48px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) calc(var(--s2) + env(safe-area-inset-right, 0px)) 0 calc(var(--s2) + env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--border); background: var(--surface); } .score-head .btn { flex: 0 0 auto; } .score-head .sh-icon { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text-dim); font: inherit; font-size: 1.05rem; font-weight: 700; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); } .score-head .sh-icon:active { background: var(--surface-3); } .score-head .sh-icon:hover { color: var(--accent); border-color: var(--accent); } .score-head .sh-back { border-color: transparent; background: transparent; font-size: 1.5rem; } .score-head .sh-more { letter-spacing: 0.06em; } .score-head .meta { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--s2) var(--s3); color: var(--text-dim); font-size: 0.82rem; white-space: nowrap; overflow: hidden; } .score-head .meta span { overflow: hidden; text-overflow: ellipsis; } .score-head .meta span:first-child { flex: 0 0 auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px 10px; color: var(--text); font-weight: 700; } .score-head .meta strong { color: var(--text); } .score-head .spacer { flex: 0 0 auto; } /* „⋯"-Menü der Scoring-Ansicht */ .ssm-list { display: flex; flex-direction: column; margin: var(--s2) 0; } .ssm-row { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: 13px var(--s2); background: none; border: 0; border-top: 1px solid var(--border); color: var(--text); font: inherit; font-size: 0.95rem; font-weight: 600; text-align: left; cursor: pointer; } .ssm-row:first-child { border-top: 0; } .ssm-row:active { background: var(--surface-2); } .ssm-row.danger { color: var(--bad); } .ssm-row .ssm-i { width: 24px; text-align: center; font-size: 1.05rem; } /* Hauptbereich: Hochformat = Spalte (Eingabe unten), Querformat = Reihe (Eingabe rechts) */ .score-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } /* Bereich zwischen Kopf und Keypad: Kopfzahlen fix, Aufnahmen scrollen */ .score-board-area { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: var(--s3) var(--s4) var(--s3); } .score-board-area > #board-cards { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } /* Spielerkarten */ .scoreboard { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); } @media (max-width: 560px) { .scoreboard { grid-template-columns: 1fr; } } .player-panel { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-lg); padding: var(--s4); text-align: center; position: relative; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .player-panel.active-turn { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); } .player-panel .turn-ribbon { position: absolute; top: -1px; left: 50%; transform: translate(-50%, -55%); background: var(--accent); color: var(--accent-ink); font-size: 0.66rem; font-weight: 900; letter-spacing: 0.08em; padding: 4px 14px; border-radius: var(--radius-pill); } .player-panel .p-name { font-size: 1.1rem; font-weight: 800; margin-top: var(--s1); } .player-panel .p-nick { color: var(--text-dim); font-size: 0.8rem; } .player-panel .p-remaining { font-size: 3.6rem; font-weight: 900; line-height: 1; margin: var(--s2) 0; color: var(--good); font-variant-numeric: tabular-nums; } .player-panel.active-turn .p-remaining { color: var(--accent); } .player-panel .p-meta { display: flex; justify-content: center; gap: var(--s4); font-size: 0.8rem; color: var(--text-dim); flex-wrap: wrap; } .h2h-line { text-align: center; color: var(--text-dim); font-size: 0.82rem; margin-top: var(--s3); } .checkout-hint { text-align: center; background: var(--good-tint); border: 1px solid var(--good); color: var(--good); border-radius: var(--radius); padding: var(--s3); margin-top: var(--s3); font-weight: 700; letter-spacing: 0.02em; } /* Eingabefeld + Keypad. Hochformat: am unteren Rand. Querformat: rechte Spalte. */ .score-entry { flex: 0 0 auto; background: var(--surface); border-top: 1px solid var(--border); padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom, 0px)); } .score-entry { scrollbar-gutter: stable; } /* Scrollbalken reserviert -> keine Breiten-Sprünge */ #entry-wrap, #entry-keys { max-width: 620px; margin-left: auto; margin-right: auto; } /* Hinweiszeile ist immer vorhanden (nur unsichtbar), damit die Höhe konstant bleibt */ .entry-tagline { height: 20px; margin-bottom: var(--s1); overflow: hidden; } .entry-tag { display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; border-radius: var(--radius-pill); padding: 2px 10px; white-space: nowrap; } .entry-tag.mode-restscore { color: var(--good); background: var(--good-tint); } .entry-tag.mode-checkout { color: var(--accent); background: var(--accent-tint); letter-spacing: 0.02em; } .entry-tag.is-hidden { visibility: hidden; } /* Feste Höhe + Flex-Zentrierung -> ändert nie die Größe, Zahl mittig */ .entry-display { box-sizing: border-box; display: flex; align-items: center; justify-content: center; height: 60px; padding: 0 var(--s4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); font-size: 2.1rem; font-weight: 900; letter-spacing: 0.01em; line-height: 1; margin-bottom: var(--s2); font-variant-numeric: tabular-nums; overflow: hidden; } /* Schnellauswahl IMMER links, Ziffernblock rechts – nie umbrechend, mit Abstand dazwischen */ .pad-row { display: flex; flex-wrap: nowrap; gap: var(--s4); align-items: start; } .keypad, .quickpad { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s1); /* enge Tastenabstände -> Knöpfe selbst breiter */ } .keypad button, .quickpad button { height: 66px; /* fest -> Tastengröße ändert sich nie */ font-weight: 800; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; font-variant-numeric: tabular-nums; transition: background var(--t-fast), transform var(--t-fast); } .keypad button { font-size: 1.85rem; position: relative; } .keypad button:active, .quickpad button:active { background: var(--surface-3); transform: scale(0.97); } .keypad .key-clear { color: var(--bad); } .keypad .key-undo { color: var(--accent); } .quickpad button { font-size: 1.35rem; color: var(--text-dim); background: var(--surface); } /* 1/2/3 als Checkout-Auswahl markiert (nur die tatsächlich möglichen Pfeilzahlen) */ .keypad button.checkout-armed { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); } .keypad button.checkout-armed::after { content: ''; position: absolute; top: 4px; right: 5px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--accent); } /* Restscore + Bestaetigen nebeneinander; Bestaetigen deutlich groesser */ .keypad-actions { display: flex; gap: var(--s2); margin-top: var(--s2); } .keypad-actions button { border-radius: var(--radius); font-weight: 800; cursor: pointer; min-width: 0; white-space: nowrap; overflow: hidden; } .keypad-actions .key-restscore { flex: 1 1 0; height: 68px; /* gleiche Höhe wie Bestätigen */ font-size: 0.95rem; background: var(--good-tint); border: 1px solid var(--good); color: var(--good); transition: background var(--t-fast); } .keypad-actions .key-restscore.on { background: var(--good); color: var(--good-ink); } .keypad-actions .key-restscore:disabled { opacity: 0.4; background: transparent; border-color: var(--border); color: var(--text-faint); cursor: not-allowed; } .keypad-actions .key-confirm { flex: 2 1 0; height: 68px; font-size: 1.4rem; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); transition: background var(--t-fast); } .keypad-actions .key-confirm:active { transform: translateY(1px); } .keypad-actions .key-confirm:disabled { background: var(--surface-3); color: var(--text-faint); border-color: var(--border); cursor: not-allowed; } /* Ausbullen-Popup: erscheint über dem Board, sobald ein Leg nach X Aufnahmen ohne Checkout offen ist. Leg-Sieger wird per Bull gewählt. */ .bulloff-modal { text-align: center; } .bulloff-modal .bo-emoji { font-size: 2.4rem; line-height: 1; } .bulloff-modal h3 { margin: var(--s2) 0 var(--s2); font-size: 1.4rem; } .bulloff-modal .muted { margin: 0 0 var(--s4); font-size: 0.88rem; } .bulloff-modal .bo-pick { display: flex; flex-direction: column; gap: var(--s2); } .bulloff-modal .bo-pick .btn { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; padding: 10px var(--s4); font-size: 1.1rem; font-weight: 800; line-height: 1.15; } .bulloff-modal .bo-pick .btn span { font-size: 0.7rem; font-weight: 600; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.04em; } /* Einstell-Zeile „Label · Stepper" (Ausbullen-Aufnahmen im Assistenten) */ .stepper-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s2); } /* Einstell-Zeile „Label · Stepper" (Ausbullen-Aufnahmen im Assistenten) */ .stepper-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s2); } /* PDC-Scoreboard: Kopf (Name + Restpunkte) fix, Aufnahmen-Spalten scrollen */ .pdc-board { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-1); } .pdc-heads { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 2.8rem 1fr; /* mittlere Spalte fluchtet mit der Darts-Spalte der Tabelle */ } /* Mitte: gewonnene Legs (und ggf. Sätze) zwischen den Restpunkten */ .pdc-heads .pdc-gutter { border-bottom: 1px solid var(--border-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: var(--s2) 0; } .pg-legs, .pg-sets { font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; display: flex; align-items: baseline; justify-content: center; gap: 3px; white-space: nowrap; /* "1–1" immer nebeneinander, nie umbrechen */ } .pg-legs { font-size: 1.4rem; } .pg-sets { font-size: 1rem; margin-top: 3px; } .pg-legs span, .pg-sets span { font-weight: 700; opacity: 0.5; } .pg-lbl { font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); } .pdc-col { text-align: center; padding: var(--s3) var(--s2); border-bottom: 1px solid var(--border-strong); } .pdc-heads > * + * { border-left: 1px solid var(--border); } .pdc-col.col-active { background: var(--accent-tint); box-shadow: inset 0 3px 0 var(--accent); } .pc-name { font-size: 1.05rem; font-weight: 800; } .pc-name .muted { font-weight: 400; } .pdc-col.col-active .pc-name { color: var(--accent); } .turn-tag { display: inline-block; margin-left: var(--s2); font-size: 0.6rem; font-weight: 900; letter-spacing: 0.08em; background: var(--accent); color: var(--accent-ink); padding: 2px 10px; border-radius: var(--radius-pill); vertical-align: middle; } .pc-remain { font-size: 3.2rem; font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; color: var(--good); font-variant-numeric: tabular-nums; } .pdc-col.col-active .pc-remain { color: var(--accent); } .pc-stats { display: flex; justify-content: center; gap: var(--s3); margin-top: 4px; } .pc-stats .ps { display: flex; flex-direction: column; align-items: center; line-height: 1.15; } .pc-stats .ps-val { font-size: 0.95rem; font-weight: 800; font-variant-numeric: tabular-nums; } .pc-stats .ps-lbl { font-size: 0.58rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; } /* Doppel: die zwei Spieler einer Seite, aktueller Werfer hervorgehoben */ .pc-team { font-size: 0.82rem; color: var(--text-dim); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; } .pc-team .is-throw { color: var(--accent); font-weight: 800; } .pc-team .is-throw::before { content: "▸ "; } .pc-team-sep { opacity: 0.5; } .board-extra { flex: 0 0 auto; padding: var(--s2) var(--s3) 0; } .board-extra .checkout-hint, .board-extra .h2h-line { margin-top: var(--s2); } /* Scrollbereich: erscheint sobald die Aufnahmen sonst das Keypad beruehren wuerden */ .pdc-visits { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; } .pdc-visits table { width: 100%; border-collapse: collapse; } .pdc-visits td { text-align: center; padding: var(--s2) var(--s3); font-size: 2.8rem; font-weight: 700; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--border); cursor: pointer; } .pdc-visits td.v { width: 46%; } /* mittlere Spalte: geworfene Darts der Runde (3 / 6 / 9 …) – halb so gross wie die Scores, nur gedimmt */ .pdc-visits td.rd { width: 3rem; font-size: 1rem; font-weight: 700; color: var(--text-dim); cursor: default; } .pdc-visits td + td { border-left: 1px solid var(--border); } .pdc-visits tr:nth-child(even) td { background: var(--surface-2); } .pdc-visits td.empty { cursor: default; color: var(--text-faint); } .pdc-visits td.bust { color: var(--bad); } .pdc-visits td.checkout { color: var(--good); font-weight: 900; } @media (min-width: 900px) { .pdc-visits td { font-size: 3.8rem; } .pdc-visits td.rd { font-size: 1.4rem; } } @media (min-width: 1300px) { .pdc-visits td { font-size: 4.4rem; } .pdc-visits td.rd { font-size: 1.7rem; } } /* Kleine Screens (Handy hoch/quer): Board-Zahlen kompakter, sonst ueberlappen die Aufnahmen-Zeilen. Tablets (>=640px) bleiben unveraendert gross. */ @media (max-width: 639px) { .pdc-visits td { font-size: 1.9rem; padding: var(--s2); } .pdc-visits td.rd { font-size: 0.85rem; } .pc-remain { font-size: 2.4rem; } .pc-name { font-size: 0.95rem; } .pc-stats { gap: var(--s2); } .pdc-col { padding: var(--s2); } } @media (max-height: 500px) { .pdc-visits td { font-size: 1.6rem; padding: var(--s1) var(--s2); } .pdc-visits td.rd { font-size: 0.8rem; } .pc-remain { font-size: 2rem; } .pdc-col { padding: var(--s1) var(--s2); } } /* Zelle: geworfene Punktzahl gross, aktueller Reststand kleiner (gleiche Dicke und Farbe) etwas weiter rechts daneben */ .pdc-visits td .v-score { display: inline-block; } .pdc-visits td .v-rem { display: inline-block; margin-left: 1.1em; font-size: 0.68em; font-weight: 700; font-variant-numeric: tabular-nums; } /* Turnier: alle laufenden Spiele als Kachelwand (nebeneinander + untereinander) */ .twall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s4); align-items: start; } .twall-cell { display: flex; flex-direction: column; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; } .twall-label { padding: var(--s2) var(--s3); font-weight: 700; font-size: 0.9rem; background: var(--surface-2); border-bottom: 1px solid var(--border); } .twall-cell { --twrow: 2rem; } .twall-cell .pdc-board { border: 0; border-radius: 0; } .twall-cell .pc-remain { font-size: 2rem; } .twall-cell .pc-name { font-size: 0.9rem; } .twall-cell .pdc-col { padding: var(--s2); } .twall-cell .pg-legs { font-size: 1.05rem; } .twall-cell .pg-sets { font-size: 0.8rem; } .twall-cell .pg-lbl { font-size: 0.44rem; } /* Bis 8 Aufnahmen: Container = Inhaltshoehe (8 gerenderte Zeilen), nichts wird abgeschnitten. Ab der 9. Aufnahme: feste 8-Zeilen-Hoehe + Scrollbalken. */ .twall-visits { overflow: hidden; scrollbar-gutter: auto; } .twall-visits.has-scroll { height: calc(var(--twrow) * 8 + 4px); overflow-y: auto; } .twall-cell .pdc-visits td { height: var(--twrow); padding: 0 var(--s2); font-size: 1.15rem; line-height: var(--twrow); } .twall-cell .pdc-visits td.rd { font-size: 0.5rem; } .twall-cell .pdc-visits td .v-rem { margin-left: 0.6em; } /* ------------------------------------------------------------------------- Querformat / Desktop: Scoreboard links, Eingabefeld rechtsbündig daneben. Hochformat behält Spalten-Layout (Eingabe unter dem Scoreboard). ------------------------------------------------------------------------- */ @media (orientation: landscape) and (min-width: 640px) { .score-main { flex-direction: row; } .score-board-area { flex: 1 1 auto; } .score-entry { flex: 0 0 clamp(340px, 42vw, 620px); /* Scoreboard links behält den größeren Anteil */ border-top: none; border-left: 1px solid var(--border-strong); display: flex; flex-direction: column; justify-content: center; overflow-y: auto; scrollbar-gutter: stable; padding: var(--s4); } } @media (min-width: 900px) { .pc-remain { font-size: 4rem; } } /* Zuschauen-Modus: nur das Board, keine Eingabe */ .watch-tag { flex: 0 0 auto; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.06em; color: var(--accent); background: var(--accent-tint); border-radius: var(--radius-pill); padding: 4px 12px; } .score-main.watch { flex-direction: column; } .score-main.watch .score-board-area { display: flex; } .score-main.watch .pdc-visits td { cursor: default; } /* TV-Adresse im „Auf TV zeigen"-Dialog */ .tv-url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.95rem; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: var(--s3); margin: var(--s3) 0; word-break: break-all; user-select: all; } /* Präsentationsansicht: auf großen Bildschirmen (TV/Monitor) alles größer, damit es aus einiger Entfernung lesbar ist. */ @media (min-width: 1000px) { .score-main.watch .pc-name { font-size: 1.7rem; } .score-main.watch .pc-remain { font-size: 6rem; } .score-main.watch .pc-team { font-size: 1.05rem; } .score-main.watch .pdc-visits td { font-size: 2.8rem; padding: var(--s3) var(--s4); } .score-main.watch .pdc-col { padding: var(--s4) var(--s3); } .score-main.watch .pc-stats { gap: var(--s5); } .score-main.watch .pc-stats .ps-val { font-size: 1.5rem; } .score-main.watch .pc-stats .ps-lbl { font-size: 0.8rem; } .score-main.watch .pdc-heads { grid-template-columns: 1fr 5rem 1fr; } .score-main.watch .pdc-visits td.rd { width: 5rem; font-size: 1.1rem; } .score-main.watch .pg-legs { font-size: 2.6rem; } .score-main.watch .pg-sets { font-size: 1.8rem; } .score-main.watch .pg-lbl { font-size: 0.8rem; } } @media (min-width: 1500px) { .score-main.watch .pc-remain { font-size: 8rem; } .score-main.watch .pc-name { font-size: 2.1rem; } .score-main.watch .pdc-visits td { font-size: 3.4rem; } } /* Präsentations-Empfänger (externer Bildschirm per „Bildschirm übertragen"): nur die Tabelle, keine Bedienelemente, randlos & groß skaliert auf die Auflösung des externen Monitors. */ body.tv-receiver .taskbar { display: none !important; } body.tv-receiver #app { max-width: none; padding: 0; } body.tv-receiver .score-screen { border: 0; } /* Kopfzeile: relativ positioniert + rechts Platz fürs Wappen, damit Logo und Meta-Zeile sich nie überlappen. */ body.tv-receiver .score-head { position: relative; flex-wrap: nowrap; align-items: center; min-height: clamp(44px, 7vh, 84px); padding: clamp(4px, 0.8vh, 12px) clamp(12px, 2vw, 28px); padding-right: clamp(64px, 12vw, 220px); } body.tv-receiver .score-head .btn, body.tv-receiver .score-head .sh-icon, body.tv-receiver .score-head .watch-tag { display: none; } body.tv-receiver .score-head .meta { font-size: clamp(0.85rem, 1.5vw, 1.5rem); } body.tv-receiver .tv-head-logo { position: absolute; right: clamp(10px, 2vw, 28px); top: 50%; transform: translateY(-50%); height: clamp(26px, 4.6vh, 56px); width: auto; max-width: clamp(90px, 16vw, 260px); object-fit: contain; } body.tv-receiver .board-extra { display: none; } /* TV: Kopfband flach halten – wenig vertikales Padding, kompakte Statistik – die Restpunkt-Zahl selbst aber gross. Mittlere Spalte breit genug für „1–1". */ body.tv-receiver .score-main.watch .pdc-col { padding: clamp(3px, 0.6vh, 10px) clamp(8px, 1.4vw, 26px); } body.tv-receiver .score-main.watch .pc-name { font-size: clamp(1rem, 2vw, 1.7rem); } body.tv-receiver .score-main.watch .pc-remain { font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1; } body.tv-receiver .score-main.watch .pc-team { font-size: clamp(0.8rem, 1.5vw, 1.3rem); } body.tv-receiver .score-main.watch .pc-stats { gap: clamp(8px, 1.4vw, 22px); margin-top: 2px; line-height: 1.1; } body.tv-receiver .score-main.watch .pc-stats .ps-val { font-size: clamp(0.8rem, 1.5vw, 1.25rem); } body.tv-receiver .score-main.watch .pc-stats .ps-lbl { font-size: clamp(0.45rem, 0.8vw, 0.72rem); } body.tv-receiver .score-main.watch .pdc-visits td { font-size: clamp(1.4rem, 3vw, 2.7rem); padding: clamp(5px, 1vw, 16px); } body.tv-receiver .score-main.watch .pdc-heads { grid-template-columns: 1fr clamp(5rem, 8.5vw, 9rem) 1fr; } body.tv-receiver .score-main.watch .pdc-visits td.rd { width: clamp(3rem, 6vw, 5.5rem); font-size: clamp(0.8rem, 1.5vw, 1.3rem); } body.tv-receiver .score-main.watch .pg-legs { font-size: clamp(1.3rem, 2.6vw, 2.4rem); } body.tv-receiver .score-main.watch .pg-sets { font-size: clamp(1rem, 1.9vw, 1.7rem); } body.tv-receiver .score-main.watch .pg-lbl { font-size: clamp(0.55rem, 1vw, 0.95rem); } body.tv-receiver .result-banner { font-size: clamp(1.6rem, 4.5vw, 4rem); } body.tv-receiver .btn-row { display: none; } body.tv-receiver .score-main.watch .card.center { border: 0; background: transparent; } body.tv-receiver .card.center h2 { font-size: clamp(1.6rem, 4.5vw, 3.4rem); margin: 0; } body.tv-receiver .card.center .muted { font-size: clamp(1rem, 2.4vw, 1.8rem); } /* --- TV: Vereinswappen + Sponsorzeile (nur auf dem Empfänger-Bildschirm) --- */ /* .tv-brand-mark = frei schwebendes Wappen NUR auf den textzentrierten Screens (kein Spiel / Spielende). Auf dem Board sitzt es als .tv-head-logo in der Kopfzeile. */ .tv-brand-mark { position: fixed; top: clamp(14px, 3.4vh, 48px); right: clamp(14px, 2.6vw, 44px); height: clamp(32px, 5.6vh, 68px); width: auto; max-width: 22vw; object-fit: contain; z-index: 40; pointer-events: none; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35)); } .tv-brand-sponsor { position: fixed; left: 0; right: 0; bottom: clamp(4px, 1.2vh, 16px); text-align: center; z-index: 40; pointer-events: none; font-size: clamp(0.72rem, 1.5vw, 1.3rem); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); } /* Werbebanner KLEIN unten während eines Spiels (ersetzt die Sponsorzeile) */ .tv-brand-banner { position: fixed; left: 50%; bottom: clamp(4px, 1.2vh, 16px); transform: translateX(-50%); max-height: clamp(26px, 5.5vh, 60px); max-width: min(60vw, 620px); width: auto; object-fit: contain; z-index: 40; pointer-events: none; } /* Unten genug Luft, damit Banner/Sponsorzeile nicht auf die letzte Zeile läuft */ body.tv-receiver .score-main.watch { padding-bottom: clamp(24px, 6vh, 76px); } /* „Kein aktives Spiel": Wappen + Werbebanner GROSS, zentriert gestapelt */ body.tv-receiver .card.center.tv-idle { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 3.5vh, 44px); } .tv-idle-logo { max-height: clamp(80px, 20vh, 240px); max-width: min(60vw, 520px); width: auto; object-fit: contain; } .tv-idle-banner { max-height: clamp(120px, 40vh, 460px); max-width: min(82vw, 1100px); width: auto; object-fit: contain; } .tv-idle-sponsor { font-size: clamp(1rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); } body:not(.tv-receiver) .tv-brand-mark, body:not(.tv-receiver) .tv-head-logo, body:not(.tv-receiver) .tv-brand-banner, body:not(.tv-receiver) .tv-brand-sponsor { display: none; } /* TV: „am Zug" auf Distanz eindeutig – die aktive Seite ist DURCHGEHEND getönt (Kopf + Aufnahmen-Spalte), oben ein kräftiger Akzentbalken, die Restpunkte leuchten; die inaktive Kopf-Seite ist gedimmt. Kein abgeschnittener Kasten. */ body.tv-receiver .score-main.watch .pdc-heads .pdc-col { transition: opacity 180ms ease; } body.tv-receiver .score-main.watch .pdc-heads .pdc-col:not(.col-active) { opacity: 0.4; } body.tv-receiver .score-main.watch .pdc-col.col-active { background: transparent; box-shadow: inset 0 7px 0 var(--accent); } body.tv-receiver .score-main.watch .pdc-col.col-active .pc-remain { text-shadow: 0 0 22px var(--accent-tint); } body.tv-receiver .pdc-board.active-left .pdc-heads > .pdc-col:first-child, body.tv-receiver .pdc-board.active-right .pdc-heads > .pdc-col:last-child, body.tv-receiver .pdc-board.active-left .pdc-visits td:first-child, body.tv-receiver .pdc-board.active-right .pdc-visits td:last-child { background: var(--accent-tint); } body.tv-receiver .score-main.watch .turn-tag { display: block; width: fit-content; margin: 1px auto 2px; font-size: clamp(0.65rem, 1.3vw, 1.05rem); padding: 3px 14px; } body.tv-receiver .score-main.watch .pdc-visits td { border-bottom-width: 2px; } body.tv-receiver .score-main.watch .pdc-visits td.checkout { background: var(--good-tint) !important; } /* TV: kurzer „LEG"-Jubel beim Legwechsel */ .tv-legshot { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; pointer-events: none; background: var(--scrim); animation: tv-legshot-bg 260ms ease both; } .tv-legshot.out { animation: none; opacity: 0; transition: opacity 380ms ease; } .tv-legshot.out .tv-legshot-in { animation: none; } .tv-legshot-in { text-align: center; animation: tv-legshot-pop 440ms cubic-bezier(0.2, 1.3, 0.35, 1) both; } .tv-legshot-kick { display: block; font-size: clamp(3rem, 12vw, 9rem); font-weight: 900; letter-spacing: 0.04em; line-height: 1; color: var(--accent); } .tv-legshot-name { display: block; margin-top: var(--s3); font-size: clamp(1.4rem, 4vw, 3rem); font-weight: 800; color: var(--text); } @keyframes tv-legshot-bg { from { opacity: 0; } to { opacity: 1; } } @keyframes tv-legshot-pop { 0% { opacity: 0; transform: scale(0.6); } 60% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } } /* TV: Ergebnis-Banner („Game Shot") fährt animiert ein */ body.tv-receiver .result-banner.tv-gameshot { animation: tv-gameshot 620ms cubic-bezier(0.2, 1.2, 0.3, 1) both; } @keyframes tv-gameshot { 0% { opacity: 0; transform: scale(0.7); } 55% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } } /* Volle Verlaufsliste im Sheet */ .hist-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .hist-table th, .hist-table td { text-align: left; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--border); } .hist-table th { color: var(--text-dim); font-weight: 600; } .hist-table tr.bust td { color: var(--bad); } .hist-table tr.checkout td { color: var(--good); font-weight: 700; } .hist-table tbody tr { cursor: pointer; } .hist-table tbody tr:active { background: var(--surface-2); } /* Aus dem Turnier abgemeldeter Teilnehmer: Zeile rot hinterlegt. */ .hist-table tbody tr.retired td, .standings-table tbody tr.retired td, .standings-table tbody tr.retired:nth-child(even) td { background: var(--bad-tint); color: var(--bad); } .retired-tag { display: inline-block; margin-left: var(--s2); padding: 0 6px; border-radius: var(--radius-pill); background: var(--bad); color: var(--bad-ink); font-size: 0.68rem; font-weight: 700; vertical-align: middle; } /* Turnier-Tabellen: passen sich der Breite an – kein Zwang zum Querscrollen. */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Standings brauchen keinen Scrollcontainer: volle Breite, Zahlen kompakt. */ .table-scroll:has(> .standings-table) { overflow-x: visible; } .standings-table { width: 100%; font-size: 0.92rem; table-layout: auto; } .standings-table thead th { color: var(--text); font-weight: 700; border-bottom: 2px solid var(--border-strong); white-space: nowrap; padding: var(--s2) 6px; } .standings-table tbody tr { cursor: default; } .standings-table tbody tr:nth-child(even) td { background: var(--zebra); } .standings-table td { padding: var(--s2) 6px; border-bottom: 1px solid var(--border); } /* Spalte 2 = Name/Team: nimmt den Rest, darf umbrechen */ .standings-table th:nth-child(2), .standings-table td:nth-child(2) { width: 100%; white-space: normal; font-weight: 600; padding-left: var(--s3); padding-right: var(--s3); } /* Zahlenspalten: schmal, zentriert, mit Tabellenziffern */ .standings-table th:not(:nth-child(2)), .standings-table td:not(:nth-child(2)) { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; } .standings-table th:first-child, .standings-table td:first-child { text-align: right; color: var(--text-dim); padding-right: 2px; } .standings-table td:last-child { font-weight: 800; } @media (max-width: 480px) { .standings-table { font-size: 0.84rem; } .standings-table thead th, .standings-table td { padding-top: 7px; padding-bottom: 7px; } .standings-table th:not(:nth-child(2)), .standings-table td:not(:nth-child(2)) { padding-left: 3px; padding-right: 3px; } .standings-table th:nth-child(2), .standings-table td:nth-child(2) { padding-left: var(--s2); padding-right: var(--s2); } } /* Ergebnis */ .result-banner { text-align: center; font-size: 1.5rem; font-weight: 900; color: var(--accent); margin-bottom: var(--s3); } /* ---- Average-Verlauf-Chart (Kap. 4.4) ---- */ #avg-chart-wrap { position: relative; margin-top: var(--s3); } .avgchart { width: 100%; height: auto; display: block; } .avgchart-grid { stroke: var(--border); stroke-width: 1; } .avgchart-base { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 4 3; } .avgchart-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .avgchart-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; } .avgchart-axis { fill: var(--text-dim); font-size: 11px; } .chart-tooltip { position: absolute; transform: translate(-50%, -100%); background: var(--surface-3); border: 1px solid var(--border-strong); color: var(--text); font-size: 0.75rem; padding: 4px 8px; border-radius: 8px; pointer-events: none; white-space: nowrap; z-index: 5; } .chart-tooltip.hidden { display: none; } .mini-stats { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s3); font-size: 0.82rem; color: var(--text-dim); } .mini-stats strong { color: var(--text); } /* ---- Gegnerstatistiken (Kap. 4.5) ---- */ .opp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); } @media (max-width: 460px) { .opp-tiles { grid-template-columns: 1fr; } } /* ---- Turnierbaum (Kap. 5.3 / 6) ---- */ .bracket { display: flex; gap: var(--s4); overflow-x: auto; padding-bottom: var(--s2); align-items: stretch; overscroll-behavior-x: contain; /* nur den horizontalen Baum abfangen */ } .bracket-col { display: flex; flex-direction: column; min-width: 180px; } @media (max-width: 480px) { .bm-p { font-size: 0.82rem; padding: var(--s1) var(--s2); } } /* Schmale Screens (Handy): Turnierbaum untereinander statt horizontal scrollen – je Runde ein Abschnitt, Matches als Liste. */ @media (max-width: 560px) { .bracket { flex-direction: column; gap: var(--s5); overflow-x: visible; } .bracket-col { min-width: 0; width: 100%; } .bracket-round { text-align: left; font-size: 0.8rem; padding-bottom: var(--s2); border-bottom: 1px solid var(--border); margin-bottom: var(--s3); } .bracket-col-body { justify-content: flex-start; gap: var(--s2); } .bracket-match { width: 100%; } } .bracket-round { flex: 0 0 auto; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; color: var(--text-dim); text-align: center; margin-bottom: var(--s3); } /* Nur die Matches werden vertikal verteilt – der Runden-Titel bleibt aussen vor, damit das Folge-Match mittig zwischen seinen beiden Vor-Matches sitzt. */ .bracket-col-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-around; gap: var(--s3); } .bracket-match { position: relative; flex: 0 0 auto; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-2); overflow: hidden; transition: border-color var(--t-fast), background var(--t-fast); } .bracket-match.done { border-color: var(--border); } .bm-p { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); font-size: 0.9rem; min-height: 40px; } .bm-n { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bm-s { flex: 0 0 auto; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 1.4ch; text-align: center; color: var(--text-dim); } .bm-p + .bm-p { border-top: 1px solid var(--border); } .bm-p.win { color: var(--good); font-weight: 800; } .bm-p.win .bm-s { color: var(--good); } /* Turnierbaum: Match direkt antippbar (Playoffs starten ohne Extra-Liste) */ .bracket-match.is-clickable { cursor: pointer; } .bracket-match.is-clickable:hover { background: var(--surface-3); } /* Fokus INSET (kein äußerer Ring) – sonst scrollt der Baum beim Antippen. */ .bracket-match.is-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .bracket-match.is-ready { border-color: var(--accent); } .bracket-match.is-live { border-color: var(--accent); background: var(--accent-tint); } .bracket-match.is-done { opacity: 0.72; } .bracket-match.is-done.is-clickable:hover { opacity: 1; } .bm-tag { display: block; padding: 3px var(--s3) 4px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; border-top: 1px solid var(--border); } .bm-tag.ready { color: var(--accent); } .bm-tag.live { color: var(--accent); } .bracket-match.is-live .bm-tag.live { animation: bm-pulse 1.4s ease-in-out infinite; } @keyframes bm-pulse { 50% { opacity: 0.45; } } /* kleiner grauer Average hinter Spielernamen */ .pname-avg { font-size: 0.8em; color: var(--text-dim); font-weight: 400; } /* Abstand zwischen der Einstellungs-Kachel und Tabelle/Baum/Spielen. */ .t-body { margin-top: var(--s5); } .t-body > * + * { margin-top: var(--s4); } /* Gruppen-Ansicht: links eine Kachel mit ALLEN Tabellen, rechts je Gruppe eine Kachel mit den Spielen (Gruppen nebeneinander). Bei >2 Gruppen: Tabellen-Kachel oben über die volle Breite, Spiele-Kacheln darunter nebeneinander. */ .tgroup-layout { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: flex-start; } .tgroup-layout > .card { flex: 1 1 320px; min-width: 0; margin: 0; } .tgroup-layout.wide-tables > .tgroup-tables { flex-basis: 100%; } /* Board-Zuordnung (Eingabegerät <-> Turniergruppe). */ .tboard-card { display: flex; flex-direction: column; gap: var(--s2); } .tboard-head { display: flex; align-items: center; gap: var(--s2); } .tboard-head b { font-size: 0.98rem; } .tboard-head .btn { margin-left: auto; } .tboard-fgrp { display: flex; flex-direction: column; gap: 6px; margin: var(--s2) 0; } .tboard-fgrp label { font-size: 0.78rem; color: var(--text-dim); } .tboard-next { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s3) var(--s4); background: var(--surface-2); } .tboard-vs { font-size: 1.05rem; font-weight: 700; } .tboard-grp { font-size: 0.82rem; margin-top: 2px; } .tboard-wait { margin: 0; } /* Board-Modus: eigenständige, großformatige Ansicht für ein eingerichtetes Gerät – echtes Vollbild ohne Taskleiste/Botnav/FAB/App-Bar-Buttons (wie needs-login/ download-only), das Gerät zeigt dauerhaft nur noch sein Board. */ body.board-mode .taskbar, body.board-mode #botnav, body.board-mode #fab, body.board-mode .tb-tab, body.board-mode #appbar-account, body.board-mode #appbar-back, body.board-mode #app-ver { display: none !important; } body.board-mode #app { min-height: 100dvh; display: grid; place-items: center; padding: 0; } .board-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--s2); min-height: 70vh; padding: var(--s6) var(--s4); } .board-eyebrow { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); } .board-title { font-size: 1.3rem; font-weight: 700; color: var(--text-dim); margin-bottom: var(--s5); } .board-next { display: flex; flex-direction: column; align-items: center; gap: var(--s4); } .board-vs { font-size: clamp(1.8rem, 6vw, 3.2rem); font-weight: 800; line-height: 1.15; display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; justify-content: center; } .board-vs-sep { font-size: 1rem; font-weight: 500; color: var(--text-faint); text-transform: uppercase; } .board-grp { font-size: 1.05rem; color: var(--text-dim); } .board-startbtn { font-size: 1.15rem; padding: var(--s3) var(--s6); margin-top: var(--s2); } .board-wait { font-size: 1.15rem; color: var(--text-dim); } .board-foot { display: flex; gap: var(--s3); margin-top: var(--s6); } /* Mobil/Tablet-Hochformat: Spiele IMMER unter die Tabelle, nichts nebeneinander. */ @media (max-width: 900px) { .tgroup-layout { flex-direction: column; flex-wrap: nowrap; } .tgroup-layout > .card { flex: 1 1 auto; width: 100%; } } .tgroup-tables h4 { margin: var(--s4) 0 var(--s2); font-size: 0.85rem; color: var(--text-dim); letter-spacing: 0.04em; } .tgroup-tables h4:first-of-type { margin-top: var(--s2); } .tgroup-games h4 { margin: var(--s3) 0 var(--s1); font-size: 0.8rem; color: var(--text-faint); } .tgroup-games .list-item { padding: var(--s2) var(--s3); } /* ---- Spieler-zentrierte Gruppenübersicht: 1 Zeile pro Spieler ---- */ .proster-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); } .proster-count { font-size: 0.75rem; font-weight: 700; color: var(--text-faint); font-variant-numeric: tabular-nums; } .proster { margin-top: var(--s3); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .prow { display: grid; grid-template-columns: 10px 1.6ch 1fr auto auto 12px; align-items: center; gap: var(--s3); width: 100%; padding: 12px var(--s3); border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; border-left: 3px solid var(--border-strong); transition: background var(--t-fast); } .prow + .prow { border-top: 1px solid var(--border); } .prow:hover { background: var(--surface-2); } .prow:focus-visible { outline: none; box-shadow: var(--ring); } .prow.open { border-left-color: var(--text-faint); } .prow.live { border-left-color: var(--accent); } .prow.done { border-left-color: var(--good); } .pr-rank { color: var(--text-faint); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; } .pr-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .pr-prog { font-size: 0.78rem; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; } .pr-sub { font-size: 0.72rem; color: var(--text-faint); white-space: nowrap; } .prow .nrow-chev { color: var(--text-faint); } .pd { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); } .pd.open { background: var(--text-faint); } .pd.live { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); animation: bm-pulse 1.4s ease-in-out infinite; } .pd.done { background: var(--good); } .proster-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: var(--s3) 0 0; font-size: 0.72rem; color: var(--text-faint); } .proster-legend .pd { display: inline-block; margin-right: 4px; vertical-align: middle; animation: none; box-shadow: none; } /* ---- Sheet: alle Gruppen-Partien eines Spielers ---- */ .ps-head { margin-bottom: var(--s3); } .ps-sec + .ps-sec { margin-top: var(--s3); } .ps-kick { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; } .ps-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .psheet-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s3); padding: 12px var(--s3); border-left: 3px solid var(--border-strong); } .psheet-row + .psheet-row { border-top: 1px solid var(--border); } .psheet-row[role="button"] { cursor: pointer; } .psheet-row[role="button"]:hover { background: var(--surface-2); } .psheet-row.won { border-left-color: var(--good); } .psheet-row.lost { border-left-color: var(--bad); } .psheet-row.live { border-left-color: var(--accent); } .psheet-row.open { border-left-color: var(--text-faint); } .ps-day { font-size: 0.7rem; color: var(--text-faint); white-space: nowrap; } .ps-opp { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .ps-res { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .psheet-row.won .ps-res { color: var(--good); } .psheet-row.lost .ps-res { color: var(--bad); } .ps-start { font-size: 0.78rem; font-weight: 700; color: var(--accent); white-space: nowrap; } .ps-live { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; color: var(--accent); white-space: nowrap; } /* Nach der Gruppenphase: Gruppen-Block eingeklappt unter dem Playoff-Baum. */ .tgroup-collapsed { margin-top: var(--s4); } .tgroup-collapsed > summary { cursor: pointer; padding: var(--s3) var(--s4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); font-size: 0.9rem; color: var(--text-dim); list-style: none; } .tgroup-collapsed > summary::-webkit-details-marker { display: none; } .tgroup-collapsed > summary::before { content: '▸ '; } .tgroup-collapsed[open] > summary::before { content: '▾ '; } .tgroup-collapsed[open] > summary { margin-bottom: var(--s4); } /* Anwurf-Auswahl in der Lobby (Bull-Off / Anwurf tauschen) */ .anwurf { margin-top: var(--s4); display: inline-flex; align-items: center; gap: var(--s2); flex-wrap: wrap; justify-content: center; color: var(--text-dim); font-size: 0.9rem; } .anwurf strong { color: var(--text); } /* Niedrige Displays (z. B. Handy quer): Tasten flacher, damit alles passt */ @media (max-height: 560px) { .keypad button, .quickpad button { height: 50px; } .keypad button { font-size: 1.4rem; } .quickpad button { font-size: 1.15rem; } .keypad-actions .key-restscore { height: 52px; } .keypad-actions .key-confirm { height: 52px; font-size: 1.2rem; } .entry-display { height: 46px; font-size: 1.6rem; } .entry-tagline { height: 16px; } .pc-remain { font-size: 2.1rem; } } /* ========================================================================= Overlay: Modal + Bottom-Sheet ========================================================================= */ .overlay { position: fixed; inset: 0; background: var(--scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); display: flex; z-index: 100; } .overlay.modal-mode { align-items: center; justify-content: center; padding: var(--s4); } .overlay.sheet-mode { align-items: flex-end; justify-content: center; } .modal, .sheet { background: var(--surface); border: 1px solid var(--border-strong); width: 100%; max-width: 440px; box-shadow: var(--shadow-pop); } .modal { border-radius: var(--radius-lg); padding: var(--s5); max-height: 88vh; overflow-y: auto; } .sheet { position: relative; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--s6) var(--s5) var(--s6); max-width: 600px; max-height: 82vh; overflow-y: auto; } .sheet::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; transform: translateX(-50%); border-radius: var(--radius-pill); background: var(--border-strong); } .modal h3, .sheet h3 { margin-top: 0; } .modal-actions { display: flex; justify-content: flex-end; gap: var(--s3); margin-top: var(--s5); } .darts-choice { display: flex; gap: var(--s3); margin-top: var(--s4); } .darts-choice button { flex: 1; min-height: 68px; font-size: 1.2rem; font-weight: 900; border-radius: var(--radius); border: 1px solid var(--good); background: transparent; color: var(--good); cursor: pointer; } .darts-choice button:active { background: var(--good); color: var(--good-ink); } /* ---------- Toast ---------- */ .toast { position: fixed; bottom: var(--s5); left: 50%; transform: translateX(-50%); background: var(--surface-3); border: 1px solid var(--border-strong); color: var(--text); padding: var(--s3) var(--s5); border-radius: var(--radius); z-index: 200; max-width: 90vw; font-size: 0.9rem; box-shadow: var(--shadow-pop); } .toast.error { border-color: var(--bad); color: var(--bad); } /* ===== Trainingsspiele (Kap. 8) ===== */ .tr-pick { cursor: pointer; } .tr-pick:hover { border-color: var(--accent); } .tr-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); flex-wrap: wrap; } .tr-instruction { font-size: 1.05rem; margin: var(--s3) 0 var(--s4); } .tr-keys { display: flex; flex-direction: column; gap: var(--s3); } .tr-bigkeys { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: var(--s3); } .tr-bigkeys .btn.big { font-size: 2rem; padding: var(--s4) 0; } .tr-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); } .tr-quick button { padding: var(--s3) 0; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 1.1rem; } .tr-quick button:active { background: var(--surface-3); } .tr-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); } .tr-pad button { padding: var(--s4) 0; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 1.5rem; } .tr-pad button:active { background: var(--surface-3); } .tr-pad .key-clear { color: var(--bad); } .tr-entry-row { display: flex; gap: var(--s3); align-items: stretch; } .tr-entry { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 800; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); font-variant-numeric: tabular-nums; } .tr-entry-row .btn.big { flex: 1; } /* Trainingsstatistiken (Kap. 8.3) */ .trg-summary { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: 0.9rem; color: var(--text-dim); padding-bottom: var(--s4); border-bottom: 1px solid var(--border); } .trg-summary strong { color: var(--text); } .trg-block { padding: var(--s4) 0; border-bottom: 1px solid var(--border); } .trg-block:last-child { border-bottom: none; padding-bottom: 0; } .trg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s3); } .trg-name { font-weight: 800; font-size: 1.02rem; } .trg-tiles { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); } .trg-tiles .stat-tile .val { font-size: 1.25rem; } .trg-tiles .stat-tile .val.good { color: var(--good); } .trg-tiles .stat-tile .val.bad { color: var(--bad); } .trg-chart { margin-top: var(--s3); } .trg-cap { font-size: 0.72rem; color: var(--text-faint); text-align: right; margin-top: 2px; } .avgchart-dot.trg-best { fill: var(--good); stroke: var(--surface); stroke-width: 2; } .trg-log { margin-top: var(--s3); } .trg-log summary { cursor: pointer; font-size: 0.85rem; color: var(--text-dim); } .trg-log summary:hover { color: var(--text); } .trg-log .hist-table { margin-top: var(--s2); } .trg-log .hist-table tbody tr { cursor: default; } /* Around the Clock/World: Ziele antippen + 4. Kachel bestätigen */ .tr-targets { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); } .tr-target { min-height: 68px; border-radius: var(--radius); border: 2px solid var(--border-strong); background: var(--surface-2); color: var(--text); font-size: 1.7rem; font-weight: 800; cursor: pointer; } .tr-target:disabled { opacity: 0.25; cursor: default; } .tr-target.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .tr-targets .tr-confirm { min-height: 68px; height: 100%; } /* Trainings-Play: prominenter Punktestand / Darts – große Kachel über der Eingabe */ .tr-scoreboard { display: flex; gap: var(--s3); margin: var(--s4) 0; } .tr-sb-item { flex: 1; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: var(--s4) var(--s4) var(--s3); text-align: center; } .tr-sb-val { font-size: 3rem; font-weight: 900; line-height: 1; color: var(--good); font-variant-numeric: tabular-nums; } .tr-sb-lbl { font-size: 0.72rem; color: var(--text-dim); margin-top: 6px; letter-spacing: 0.05em; text-transform: uppercase; } /* =========================================================================== Administration (Kap. 11) =========================================================================== */ #admin-tabs.mini-tabs { flex-wrap: wrap; margin-bottom: 0; } /* --- Admin-Panel: nach Kategorien gruppierte Startseite --- */ .adm-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); } .adm-sec-head { display: flex; align-items: center; gap: var(--s2); font-size: 1.25rem; margin: 0 0 var(--s4); } .adm-sec-ic { display: inline-flex; color: var(--accent); } .adm-sec-ic .ntsvg { width: 1.35rem; height: 1.35rem; } .adm-chips { display: flex; flex-wrap: wrap; gap: var(--s2); } .adm-chip { flex: 1 1 auto; min-width: 92px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; text-align: center; } .adm-chip .v { display: block; font-size: 1.3rem; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; } .adm-chip .l { display: block; font-size: 0.66rem; color: var(--text-dim); margin-top: 2px; } .adm-group-t { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 7px 2px; } .adm-list { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; } .adm-row { display: grid; grid-template-columns: 34px 1fr 14px; align-items: center; gap: var(--s3); width: 100%; padding: 14px var(--s4); border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background var(--t-fast); } .adm-row + .adm-row { border-top: 1px solid var(--border); } .adm-row:hover { background: var(--surface-2); } .adm-row:focus-visible { outline: none; box-shadow: var(--ring); } .adm-ic { display: grid; place-items: center; color: var(--text-dim); } .adm-ic .ntsvg { width: 1.25rem; height: 1.25rem; } .adm-row:hover .adm-ic { color: var(--accent); } .adm-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .adm-t { font-weight: 700; font-size: 0.95rem; } .adm-s { font-size: 0.72rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .adm-chev { color: var(--text-faint); font-size: 1.1rem; text-align: center; } /* Bereichs-Ansichten: gleichmäßiger Abstand zwischen den Karten */ #admin-body > * + * { margin-top: var(--s4); } /* Karten-Überschrift mit Icon (Einstellungs-Gruppen) */ .adm-cardhead { display: flex; align-items: center; gap: var(--s2); } .adm-cardhead-ic { display: inline-flex; color: var(--accent); } .adm-cardhead-ic .ntsvg { width: 1.15rem; height: 1.15rem; } /* --- Admin · Spieler: sortierbare Liste --- */ .adm-sortbar { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0; } .adm-sort { border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); font: inherit; font-size: 0.76rem; font-weight: 700; padding: 6px 11px; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; } .adm-sort.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .adm-plist { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .adm-prow { padding: 9px var(--s4); } .adm-prow + .adm-prow { border-top: 1px solid var(--border); } .adm-prow-top { display: flex; align-items: center; gap: var(--s2); } .adm-pname { flex: 1 1 auto; font-weight: 700; font-size: 0.95rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .adm-pname .muted { font-weight: 400; } .adm-pname .badge { margin-left: 4px; } .adm-pact { display: flex; gap: 6px; flex: 0 0 auto; } .adm-iconbtn { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); border-radius: var(--radius); cursor: pointer; } .adm-iconbtn .ntsvg { width: 1.05rem; height: 1.05rem; } .adm-iconbtn:hover { color: var(--accent); border-color: var(--accent); } .adm-iconbtn.danger:hover { color: var(--bad); border-color: var(--bad); } .adm-prow-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: 0.74rem; color: var(--text-faint); } .adm-prow-meta .dot { opacity: 0.5; } .adm-memtoggle { border: 1px solid var(--border-strong); background: none; color: var(--text-dim); font: inherit; font-size: 0.7rem; font-weight: 700; padding: 2px 9px; border-radius: var(--radius-pill); cursor: pointer; } .adm-memtoggle.on { background: var(--accent-tint); color: var(--accent); border-color: transparent; } .adm-psearch-empty { text-align: center; padding: var(--s4) 0 0; } /* Vereinsauswahl: schlank, auf einer Zeile mit dem Namen + Bearbeiten-/Loeschen-Icon */ .adm-select { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; width: clamp(7rem, 34vw, 10.5rem); min-width: 0; } .adm-select select.adm-clubsel { -webkit-appearance: none; appearance: none; width: 100%; min-height: 34px; height: 34px; padding: 0 28px 0 10px; font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer; color-scheme: light dark; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .adm-select select.adm-clubsel:hover { border-color: var(--accent); } .adm-select select.adm-clubsel:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); } .adm-select .adm-select-chev { position: absolute; right: 8px; pointer-events: none; display: inline-flex; color: var(--text-dim); } .adm-select .adm-select-chev .ntsvg { width: 1rem; height: 1rem; } .adm-clubsel option { background: var(--surface); color: var(--text); } .admin-table tbody tr { cursor: default; } .admin-table tbody tr:active { background: transparent; } .admin-table td.num, .admin-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .admin-table td.row-actions { text-align: right; white-space: nowrap; } .admin-table td.row-actions .btn { margin-left: var(--s2); } .admin-table .badge { margin-left: 4px; } .set-row { margin-bottom: var(--s4); } .set-row input, .set-row select { width: 100%; } /* Bild-Einstellung (TV-Logo): Vorschau + Datei wählen + entfernen */ .set-img { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: 4px; } .set-img input[type="file"] { display: none; } /* Vorschau passt sich dem Bild an: quadratisches Logo bleibt kompakt, ein breites Werbebanner wird breit-und-flach gezeigt (sonst schrumpft es zu einem Strich). */ .set-img-prev { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-width: 96px; max-width: min(360px, 100%); min-height: 56px; max-height: 132px; padding: 6px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-2); overflow: hidden; } .set-img-prev img { display: block; width: auto; height: auto; max-width: 100%; max-height: 118px; object-fit: contain; } .set-img-prev.empty { width: 104px; height: 68px; min-height: 0; color: var(--text-faint); font-size: 0.72rem; } .set-img-btns { display: flex; gap: var(--s2); flex-wrap: wrap; } .set-img label.btn { cursor: pointer; margin: 0; } .admin-report { margin: var(--s3) 0 0; padding-left: var(--s5); } .admin-report li { margin: 2px 0; } /* Admin: Spiel anpassen (Leg-Sieger / Anwurf) */ .adj-list { max-height: 52vh; overflow-y: auto; margin: var(--s3) 0; } .adj-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s2); } .adj-lbl { font-size: 0.9rem; color: var(--text-dim); } .adj-sep { margin: var(--s3) 0 var(--s2); font-weight: 800; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); } .adj-row .seg button { font-size: 0.85rem; } /* Turnier-Lobby: vorhandene Spieler hinzufügen (Admin) */ .addp-search { position: relative; margin: var(--s3) 0 var(--s2); } .addp-search-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--text-faint); pointer-events: none; } .addp-search-ic .ntsvg { width: 1.05rem; height: 1.05rem; } .addp-search input[type=search] { width: 100%; height: 44px; padding: 0 40px 0 40px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font-size: 1rem; -webkit-appearance: none; appearance: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .addp-search input[type=search]::placeholder { color: var(--text-faint); } .addp-search input[type=search]:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); } .addp-search input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; height: 16px; width: 16px; background: var(--text-faint); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; cursor: pointer; } .addp-list { max-height: 52vh; overflow-y: auto; margin: 0 0 var(--s3); display: flex; flex-direction: column; gap: var(--s4); } .addp-group { display: flex; flex-direction: column; gap: var(--s2); } .addp-grouphead { display: flex; align-items: center; gap: var(--s2); } .addp-grouphead strong { font-size: 0.95rem; } .addp-gcount { font-size: 0.8rem; color: var(--text-faint); } .addp-allbtn { margin-left: auto; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); border-radius: var(--radius-pill); padding: 5px 14px; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); } .addp-allbtn:hover { border-color: var(--border-strong); } .addp-allbtn.on { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); } .addp-rows { display: flex; flex-direction: column; gap: 6px; } /* Suchfilter blendet Zeilen/Gruppen per [hidden] aus – schlaegt das display:flex unten */ .addp-row[hidden], .addp-group[hidden], .adm-prow[hidden] { display: none !important; } .addp-row { display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); color: var(--text); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); } .addp-row:hover { border-color: var(--border-strong); } .addp-row.is-sel { background: var(--accent-tint); border-color: var(--accent); } .addp-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--text-dim); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.02em; } .addp-row.is-sel .addp-av { background: var(--accent); color: var(--accent-ink); } .addp-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .addp-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .addp-nick { font-size: 0.8rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .addp-box { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--border-strong); position: relative; transition: background var(--t-fast), border-color var(--t-fast); } .addp-row.is-sel .addp-box { background: var(--accent); border-color: var(--accent); } .addp-row.is-sel .addp-box::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); } .addp-empty { text-align: center; padding: var(--s4) 0; } /* Hinweisleiste: Administrator-Sitzung aktiv (außerhalb des Admin-Panels) */ .admin-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; background: var(--accent-tint); color: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-lg); padding: var(--s2) var(--s3); margin-bottom: var(--s4); font-size: 0.9rem; font-weight: 600; } .admin-banner .btn { margin-left: var(--s2); } /* ========================================================================= NATIVE ANDROID-APP (APK) – mobil-natives Layout. Alles hängt an body.native (gesetzt in app.js, wenn Capacitor aktiv ist). Der Browser ist von diesem Block NICHT betroffen. ========================================================================= */ body.native { --botnav-h: 58px; } /* ---- schlanke App-Bar oben: Titel links, runde Aktions-Chips rechts ---- */ .tb-appbar-title { display: none; } #appbar-account { display: none; } body.native .taskbar { padding: calc(10px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px)) 10px calc(14px + env(safe-area-inset-left, 0px)); gap: 8px; background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--border); } body.native .tb-brand { display: none; } /* TKD-Logo oben links (nur native, nur auf den Reiter-Ansichten – auf Unteransichten steht dort der Zurück-Pfeil). */ .tb-applogo { display: none; } body.native .tb-applogo { display: block; width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; } body.native.nt-hasback .tb-applogo { display: none; } body.native .tb-appbar-title { display: block; flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.native .tb-tab[data-nav="home"] { display: none; } body.native .tb-nav { gap: 8px; align-items: center; } body.native #appbar-account { display: inline-flex; } body.native .tb-icon-btn { width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 999px; border: 0; background: var(--surface-2); color: var(--text-dim); font-size: 0.95rem; line-height: 1; } body.native .tb-icon-btn:active { background: var(--surface-3); color: var(--text); } /* ---- Inhalt: volle Breite, Platz für die untere Leiste ---- */ body.native #app { max-width: none; padding: var(--s4) var(--s4) calc(var(--botnav-h) + env(safe-area-inset-bottom, 0px) + var(--s5)); } /* ---- untere Navigationsleiste ---- */ #botnav { display: none; } body.native #botnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: var(--surface); border-top: 1px solid var(--border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); } body.native #botnav .botnav-i { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; color: var(--text-faint); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.01em; padding: 4px 2px; min-height: var(--tap); transition: color var(--t-fast); } body.native #botnav .botnav-i .bi { font-size: 1.15rem; line-height: 1; transition: filter var(--t-fast), transform var(--t-fast); } body.native #botnav .botnav-i.on { color: var(--accent); font-weight: 700; } body.native #botnav .botnav-i.on .bi { filter: drop-shadow(0 0 7px var(--accent)) drop-shadow(0 0 2px var(--accent)); transform: translateY(-1px); } body.native #botnav .botnav-i:active .bi { transform: scale(0.9); } /* ---- FAB ---- */ #fab { display: none; } body.native #fab { display: inline-flex; align-items: center; gap: 6px; position: fixed; right: var(--s4); bottom: calc(var(--botnav-h) + env(safe-area-inset-bottom, 0px) + var(--s4)); z-index: 56; height: 50px; padding: 0 var(--s5); border: 0; border-radius: 16px; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 0.95rem; cursor: pointer; box-shadow: 0 14px 30px -10px rgba(76, 194, 255, 0.5); } body.native #fab[hidden] { display: none; } body.native #fab .fab-plus { font-size: 1.3rem; line-height: 1; margin-top: -2px; } body.native #fab.fab-noplus .fab-plus { display: none; } body.native #fab.fab-noplus { padding: 0 var(--s6); } body.native #fab:active { transform: translateY(1px); } /* ---- Vollbild-Ansichten: keine Leisten ---- */ body.native.in-game #botnav, body.native.in-game #fab, body.native.in-game #app-ver, body.native.nt-cta #app-ver, body.tv-receiver #botnav, body.tv-receiver #fab, body.tv-receiver #app-ver { display: none !important; } /* ---- App-Version unten links, über der Navileiste (nur native) ---- */ #app-ver { display: none; } #app-ver[hidden], body.native #app-ver[hidden] { display: none !important; } body.native #app-ver { display: flex; align-items: center; gap: 7px; position: fixed; left: 14px; bottom: calc(var(--botnav-h) + env(safe-area-inset-bottom, 0px) + 12px); z-index: 54; max-width: calc(100vw - 28px); padding: 0; background: none; border: 0; color: var(--text-dim); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; line-height: 1; pointer-events: none; /* reine Versionsanzeige */ } /* schlichter Akzentpunkt statt Pillen-Rahmen */ body.native #app-ver::before { content: ''; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); opacity: 0.85; } body.native #app-ver .av-line1 { display: block; } body.native #app-ver .av-line2 { display: none; } /* Update verfügbar -> größer, farbig, antippbar (bleibt unten links verankert) */ body.native #app-ver.has-update { pointer-events: auto; left: 8px; right: auto; width: min(340px, calc(100vw - 16px)); max-width: none; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-2); color: var(--text); font-size: 0.8rem; font-weight: 400; display: flex; flex-direction: column; align-items: stretch; gap: 4px; } body.native #app-ver.has-update::before { display: none; } /* Solange ein Update-Banner steht, weicht der FAB, damit nichts überlappt. */ body.native.has-app-update #fab { display: none !important; } body.native #app-ver.has-update .av-line1 { font-weight: 800; font-size: 0.9rem; color: var(--accent); } body.native #app-ver.has-update .av-line2 { display: block; color: var(--text-dim); font-size: 0.74rem; } body.native #app-ver.has-update .btn { margin-top: 4px; width: 100%; } body.native #app-ver .app-dl-icon { display: none; } body.native #app-ver .app-dl-txt { display: flex; flex-direction: column; gap: 4px; } /* ---- Startseite als Feed ---- */ body.native .nfeed { display: flex; flex-direction: column; gap: var(--s4); max-width: 640px; margin: 0 auto; } body.native .nsec { display: flex; flex-direction: column; gap: 7px; } body.native .nkicker { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); } body.native .nchips { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); } body.native .nchip { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 13px 6px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); font-size: 0.72rem; font-weight: 600; cursor: pointer; } body.native .nchip .nci { font-size: 1.15rem; line-height: 1; } body.native .nchip:active { background: var(--surface-2); } body.native .nlist { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } body.native .nlist .empty-state { padding: var(--s4); font-style: normal; font-size: 0.82rem; } body.native .nrow { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 13px; background: none; border: 0; text-align: left; cursor: pointer; color: var(--text); font: inherit; } body.native .nrow + .nrow, body.native .lbrow + .lbrow, body.native .lbmore { border-top: 1px solid var(--border); } body.native .nrow:active { background: var(--surface-2); } body.native .nrow-lead { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; font-size: 0.95rem; } body.native .nrow-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } body.native .nrow-t { font-weight: 600; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.native .nrow-s { font-size: 0.74rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.native .nrow-chev { color: var(--text-faint); flex: 0 0 auto; } body.native .npill { flex: 0 0 auto; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; padding: 3px 8px; border-radius: var(--radius-pill); white-space: nowrap; } body.native .npill.live { background: var(--good-tint); color: var(--good); } body.native .npill.wait { background: var(--accent-tint); color: var(--accent); } body.native .npill.turn { background: var(--accent-tint); color: var(--accent); } body.native .npill.gold { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); } body.native .nsec[hidden] { display: none; } /* Startseite: getrennte Abschnitte „Turniere" und „Spiele". Sobald ein Abschnitt Einträge hat, bekommt die Liste eine leicht leuchtende Umrandung; laufende Zeilen zusätzlich einen Akzentbalken. Rahmenfarbe steckt in --glow: Cyan für Spiele, Violett für Turniere. */ @keyframes home-glow { 0%, 100% { box-shadow: 0 0 0 1px var(--glow), 0 0 13px -6px color-mix(in srgb, var(--glow) 55%, transparent); } 50% { box-shadow: 0 0 0 1px var(--glow), 0 0 22px -3px color-mix(in srgb, var(--glow) 82%, transparent); } } body.native .nlist.is-live { --glow: var(--accent); border-color: var(--glow); animation: home-glow 2.6s ease-in-out infinite; } body.native .nlist.is-live-tourn { --glow: var(--tourn); } body.native .nrow--live { box-shadow: inset 3px 0 0 var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); } /* Laufende Turniere: eigene Akzentfarbe (Violett), hebt sie von Spielen ab. */ body.native .npill.tourn { background: var(--tourn-tint); color: var(--tourn); } body.native .nrow--tourn { box-shadow: inset 3px 0 0 var(--tourn); background: color-mix(in srgb, var(--tourn) 8%, transparent); } body.native .nrow--tourn .nrow-lead { background: var(--tourn-tint); color: var(--tourn); } /* Turnier in der Anmeldephase (noch nicht laufend): gleiche Farbe, etwas dezenter. */ body.native .nrow--tourn:not(.nrow--live) { background: color-mix(in srgb, var(--tourn) 4%, transparent); } /* Vereinsrekorde: dezenter Gold-Rahmen, Besthalter deutlich sichtbar. */ body.native .nlist.is-record { border-color: color-mix(in srgb, var(--warn) 42%, var(--border)); } body.native .nrow--record .rec-holder { color: var(--warn); font-weight: 700; } /* Desktop-Hub: Kachel „Läuft gerade" leuchtet, solange etwas aktiv ist. */ .hub-tile--live { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 24px -6px color-mix(in srgb, var(--accent) 70%, transparent); } @media (prefers-reduced-motion: reduce) { body.native .nlist.is-live { animation: none; box-shadow: 0 0 0 1px var(--glow), 0 0 16px -5px color-mix(in srgb, var(--glow) 60%, transparent); } } /* Startseite: "Nächster Termin" mit Datums-Kästchen + Zusagen-Punkten. */ body.native .nnext { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 13px; background: none; border: 0; text-align: left; cursor: pointer; color: var(--text); font: inherit; } body.native .nnext:active { background: var(--surface-2); } body.native .nnext + .nnext { border-top: 1px solid var(--border); } body.native .nnext { border-left: 4px solid var(--border); } body.native .nnext.k-training { border-left-color: var(--accent); } body.native .nnext.k-match { border-left-color: var(--bad); } body.native .nnext.k-other { border-left-color: var(--warn); } body.native .nnext.k-training .cal-daybox { background: var(--accent-tint); } body.native .nnext.k-match .cal-daybox { background: var(--bad-tint); } body.native .nnext.k-other .cal-daybox { background: color-mix(in srgb, var(--warn) 16%, transparent); } body.native .nnext .cal-daybox { width: 44px; padding: 5px 0; } body.native .nnext .cal-dd { font-size: 1.25rem; } body.native .nnext-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } body.native .nnext-t { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.native .nnext-s { font-size: 0.74rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.native .nnext-counts { display: flex; gap: var(--s3); margin-top: 2px; font-size: 0.8rem; color: var(--text-dim); } body.native .nnext .nrow-chev { color: var(--text-faint); flex: 0 0 auto; } @media (min-width: 400px) { body.native .nnext { padding: 16px 18px; gap: var(--s4); } body.native .nnext-t { font-size: 1.05rem; } body.native .nnext-s { font-size: 0.88rem; } } body.native .lbrow { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: var(--s3); padding: 9px 13px; font-size: 0.85rem; } body.native .lbrow .rk { text-align: right; color: var(--text-faint); font-weight: 700; font-variant-numeric: tabular-nums; } body.native .lbrow.p1 .rk { color: var(--warn); } body.native .lbrow .lbn { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.native .lbrow .lbp { font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; } body.native .lbmore { display: block; width: 100%; padding: 10px 13px; background: none; border: 0; color: var(--text-faint); font: inherit; font-size: 0.8rem; cursor: pointer; text-align: center; } body.native .lbmore:active { background: var(--surface-2); } /* ---- Bottom-Sheets / Toast: über der unteren Leiste, Safe-Area beachten ---- */ body.native .sheet { padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom, 0px)); } body.native .toast { bottom: calc(var(--botnav-h) + env(safe-area-inset-bottom, 0px) + var(--s3)); } /* Sub-Ansichten: der Bildschirmtitel steht schon in der App-Bar */ body.native .page-title { display: none; } body.native .nchip { font-size: 0.75rem; } /* Kein blaues Aufblitzen beim Antippen (untere Leiste, Kacheln, Keypad …) */ body.native, body.native * { -webkit-tap-highlight-color: transparent; } body.native #botnav .botnav-i:focus, body.native #botnav .botnav-i:focus-visible { outline: none; box-shadow: none; } /* --- Neues Spiel: ein Formular statt Schrittassistent (Browser + App) --- */ .ng-form { display: flex; flex-direction: column; gap: var(--s2); } .ng-form > .field { margin-top: var(--s4); } .ng-form > .field:first-of-type { margin-top: 0; } .ng-form .seg { margin-bottom: 2px; } .ng-steppers { display: flex; flex-wrap: wrap; gap: var(--s5); margin-top: var(--s2); } .ng-steppers > div { display: flex; flex-direction: column; gap: var(--s2); } .ng-steppers .field { margin: 0; } .ng-actions { display: flex; gap: var(--s3); margin-top: var(--s5); } .ng-actions .btn { flex: 1 1 auto; } .ng-actions .btn.secondary { flex: 0 0 auto; } /* --- Tablet in der nativen App: Startseite nutzt den Platz --- */ @media (min-width: 700px) { body.native .nfeed { max-width: 900px; gap: var(--s6); } body.native .nkicker { font-size: 0.8rem; } body.native .ng-form { max-width: 640px; margin: 0 auto; } } @media (min-width: 860px) { /* Schnellstart oben voll breit, darunter „Läuft gerade" | „Top 5" nebeneinander */ body.native .nfeed { max-width: 1040px; display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--s5) var(--s6); align-items: start; } body.native .nfeed > .nsec:first-child, body.native .nfeed > #app-dl { grid-column: 1 / -1; } } @media (min-width: 700px) { body.native .nchip { padding: 24px 10px; font-size: 1.05rem; gap: 10px; border-radius: var(--radius-lg); } body.native .nchip .nci { font-size: 2rem; } body.native .nrow { padding: 16px 18px; gap: var(--s4); } body.native .nrow-lead { width: 46px; height: 46px; font-size: 1.35rem; border-radius: 13px; } body.native .nrow-t { font-size: 1.08rem; } body.native .nrow-s { font-size: 0.9rem; } body.native .npill { font-size: 0.72rem; padding: 4px 12px; } body.native .lbrow { grid-template-columns: 30px 1fr auto; padding: 15px 18px; font-size: 1.1rem; } body.native .lbmore { padding: 15px 18px; font-size: 0.98rem; } body.native #botnav { padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); } body.native #botnav .botnav-i { font-size: 0.74rem; } body.native #botnav .botnav-i .bi { font-size: 1.4rem; } body.native #fab { height: 60px; font-size: 1.05rem; border-radius: 18px; } body.native .ng-form { max-width: 640px; margin: 0 auto; } } /* ========================================================================= NATIVE APP - Screens v2: Erstellen (Spiel/Turnier), Tabelle, Login ========================================================================= */ .tb-back { display: none; } body.native .tb-back { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; min-height: 34px; flex: 0 0 auto; border: 0; border-radius: 999px; background: none; color: var(--text); font-size: 1.3rem; line-height: 1; cursor: pointer; margin-right: -2px; } body.native .tb-back:active { background: var(--surface-2); } body.native .tb-back[hidden] { display: none; } body.native.nt-focus #botnav, body.native.nt-focus #fab { display: none !important; } body.native.nt-focus #app { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } body.native .ncreate { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s4); } body.native .ncreate .fgrp { display: flex; flex-direction: column; gap: 8px; } body.native .ncreate .flabel { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); } body.native .ncreate .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 4px; } body.native .ncreate .seg.wrap { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } body.native .ncreate .seg button { border: 0; background: none; color: var(--text-dim); font: inherit; font-size: 0.82rem; font-weight: 600; padding: 12px 6px; border-radius: 10px; white-space: nowrap; cursor: pointer; } body.native .ncreate .seg.big button { font-size: 1.05rem; font-weight: 700; padding: 15px 6px; } body.native .ncreate .seg button.on { background: var(--accent); color: var(--accent-ink); } body.native .ncreate input[type=text], body.native .ncreate input[type=password], body.native .ncreate select { width: 100%; height: 48px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 0.95rem; padding: 0 13px; } body.native .ncreate select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%); background-position: right 16px center, right 11px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; } body.native .ncreate .stepper { display: flex; align-items: center; gap: 12px; } body.native .ncreate .stepper button { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 1.3rem; font-weight: 700; cursor: pointer; } body.native .ncreate .stepper .value { font-size: 1.4rem; font-weight: 800; min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; } body.native .ncreate .tw-optsep { margin: var(--s3) 0 calc(-1 * var(--s1)); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); } body.native .ncta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 57; padding: 12px var(--s4) calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: var(--surface); } body.native .ncta .btn { width: 100%; min-height: 52px; font-size: 1.02rem; border-radius: 14px; } body.native #lb-tabs.mini-tabs { margin: 0 0 var(--s4); } body.native .lbpodium { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s2); align-items: stretch; margin-bottom: var(--s4); } body.native .lbpod { background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px; padding: 12px 6px 11px; text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 3px; font: inherit; color: inherit; cursor: pointer; } body.native .lbpod:active { background: var(--surface-2); } body.native .lbpod.pod1 { border-color: color-mix(in srgb, var(--gold) 70%, var(--border)); } body.native .lbpod.pod2 { border-color: color-mix(in srgb, var(--silver) 70%, var(--border)); } body.native .lbpod.pod3 { border-color: color-mix(in srgb, var(--bronze) 70%, var(--border)); } body.native .lbpod .m { font-size: 1.2rem; line-height: 1; } body.native .lbpod .n { font-size: 0.78rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.native .lbpod .pnick { font-size: 0.58rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } body.native .lbpod .p { font-size: 1rem; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; } body.native .lbpod .p small { display: block; font-size: 0.58rem; font-weight: 600; color: var(--text-faint); } body.native .lbpod .pmed { font-size: 0.62rem; color: var(--text-faint); white-space: nowrap; letter-spacing: normal; display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; align-self: center; justify-content: center; } body.native .lblist { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } body.native .lbrow2 { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: var(--s2) 10px; width: 100%; padding: 11px 14px; font-size: 0.9rem; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } body.native .lbrow2:active { background: var(--surface-2); } body.native .lbrow2 + .lbrow2 { border-top: 1px solid var(--border); } body.native .lbrow2 .rk { text-align: right; color: var(--text-faint); font-weight: 700; font-variant-numeric: tabular-nums; } body.native .lbrow2 .lbmain { min-width: 0; display: flex; flex-direction: column; gap: 2px; } body.native .lbrow2 .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.native .lbrow2 .lbnick { font-weight: 400; font-size: 0.82em; color: var(--text-faint); } body.native .lbrow2 .lbsub { font-size: 0.68rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Average + Platzierungen: rechtsbündig, gestapelt */ body.native .lbrow2 .lbstats { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; white-space: nowrap; } body.native .lbrow2 .lbav { font-size: 0.72rem; color: var(--text-dim); font-variant-numeric: tabular-nums; } body.native .lbrow2 .lbmed { font-size: 0.68rem; color: var(--text-faint); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 7px; letter-spacing: normal; } /* Punkte-Spalte fest breit: 1-, 2- und 3-stellige Werte reservieren gleich viel Platz, damit die Average-/Medaillen-Spalte daneben in allen Zeilen buendig steht. */ body.native .lbrow2 .pt { font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; min-width: 3.6ch; } body.native .lbrow2 .pt small { font-size: 0.54rem; font-weight: 600; color: var(--text-faint); } body.native .lb-hint { font-size: 0.72rem; text-align: center; margin: var(--s3) 0 0; } body.native .lbadmin { display: flex; gap: var(--s2); margin-top: var(--s4); } body.native .lbadmin button { flex: 1; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); font: inherit; font-size: 0.72rem; font-weight: 700; padding: 11px; border-radius: 12px; cursor: pointer; } body.native .lbadmin button.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--border)); } body.native .lbchamp { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px 16px; text-align: center; display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--s4); } body.native .lbchamp .t { font-size: 1.9rem; line-height: 1; } body.native .lbchamp .n { font-size: 1rem; font-weight: 800; } body.native .lbchamp .d { font-size: 0.72rem; color: var(--text-faint); } body.native .lbseason-note { font-size: 0.78rem; color: var(--text-faint); margin: 0 0 var(--s3); } body.native .lg-head { text-align: center; padding: var(--s3) 0 var(--s2); } body.native .lg-head .i { font-size: 2rem; line-height: 1; } body.native .lg-head .t { font-size: 1.05rem; font-weight: 800; margin-top: 4px; } body.native .lg-head .s { font-size: 0.74rem; color: var(--text-faint); } body.native .lg-tabs { display: flex; gap: var(--s2); margin-bottom: var(--s2); } body.native .lg-tabs button { flex: 1; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); font: inherit; font-size: 0.88rem; font-weight: 700; padding: 12px; border-radius: 12px; cursor: pointer; } body.native .lg-tabs button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } body.native .pindisplay { height: 48px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: center; letter-spacing: 8px; font-size: 1.4rem; color: var(--text); font-variant-numeric: tabular-nums; } body.native .pindisplay.empty { color: var(--text-faint); letter-spacing: 0; font-size: 0.85rem; } body.native .pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); } body.native .pinpad button { height: 52px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 1.2rem; font-weight: 700; cursor: pointer; } body.native .pinpad button:active { background: var(--surface-2); } body.native .pinpad button.util { color: var(--text-dim); font-size: 0.9rem; } body.native .pinpad button.ok { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } /* Anmelde-Splash hinter dem Login-Popup (keine eigene Formular-Seite mehr). */ .login-splash { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); text-align: center; min-height: 60vh; padding: var(--s6) var(--s4); } .login-splash .ls-logo { width: 72px; height: 72px; object-fit: contain; opacity: 0.95; } .login-splash .ls-name { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; } .login-splash .ls-sub { color: var(--text-dim); font-size: 0.9rem; max-width: 30ch; } .login-splash .btn { margin-top: var(--s2); min-width: 180px; } /* Login-Popup: Formular-Felder direkt im Modal */ .login-modal .fgrp { display: flex; flex-direction: column; gap: 6px; } .login-modal .flabel { font-size: 0.78rem; color: var(--text-dim); } .login-modal input[type=text], .login-modal input[type=password] { width: 100%; } /* Ersteinrichtung: eigene Seite beim allerersten Start, keine Navigation. */ body.setup-only .taskbar, body.setup-only #botnav, body.setup-only #fab, body.setup-only #app-ver, body.setup-only #appbar-account, body.setup-only #appbar-back { display: none !important; } body.setup-only #app { min-height: 100dvh; display: grid; place-items: start center; padding: var(--s5); } .setup-wrap { width: 100%; max-width: 380px; margin-top: max(6vh, var(--s5)); display: flex; flex-direction: column; align-items: center; text-align: center; } .setup-logo { width: 64px; height: 64px; object-fit: contain; opacity: 0.95; } .setup-title { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; margin: var(--s3) 0 var(--s2); } .setup-sub { color: var(--text-dim); font-size: 0.9rem; line-height: 1.45; margin: 0 0 var(--s5); } .setup-form { width: 100%; display: flex; flex-direction: column; gap: var(--s4); text-align: left; } .setup-form .fgrp { display: flex; flex-direction: column; gap: 6px; } .setup-form .flabel { font-size: 0.78rem; color: var(--text-dim); } .setup-form input { width: 100%; } .setup-opt { color: var(--text-faint); font-weight: 400; } .setup-form .btn { margin-top: var(--s2); } .setup-form .error-msg { margin: 0; } /* Login-Screen (native): fixer CTA sitzt ueber der unteren Leiste */ body.native.nt-cta:not(.nt-focus) .ncta { bottom: calc(var(--botnav-h) + env(safe-area-inset-bottom, 0px)); } body.native.nt-cta:not(.nt-focus) #app { padding-bottom: calc(var(--botnav-h) + 104px + env(safe-area-inset-bottom, 0px)); } /* „Angemeldet bleiben" + „Vereinsgerät"-Ausstieg auf dem Anmeldebildschirm */ .pf-remember { display: flex; align-items: center; gap: 8px; margin-top: var(--s3); font-size: 0.9rem; color: var(--text-dim); cursor: pointer; user-select: none; } .pf-remember input { width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; } .pf-shared { text-align: center; margin: var(--s4) 0 0; } .linklike { background: none; border: 0; padding: 0; cursor: pointer; color: var(--text-dim); font-size: 0.82rem; text-decoration: underline; text-underline-offset: 2px; } .linklike:hover { color: var(--text); } /* Handy-Zwangslogin: nur der Anmeldebildschirm, keine Navigation (Design-Umschalter in der App-Bar bleibt nutzbar). */ body.needs-login #botnav, body.needs-login #fab, body.needs-login .tb-tab, body.needs-login #appbar-account, body.needs-login #appbar-back { display: none !important; } /* ========================================================================= Inline-SVG-Icons (Emoji-Ersatz) - Grunddimension fuer ALLE Umgebungen. Spezifischere Regeln (z. B. body.native .ntsvg, .adm-ic .ntsvg) gewinnen. ========================================================================= */ .ntsvg { width: 1.15rem; height: 1.15rem; vertical-align: -0.18em; flex: none; } .btn .ntsvg, .ssm-row .ntsvg { vertical-align: 0; } /* Farbige Medaille (ersetzt 🥇🥈🥉 - Gold/Silber/Bronze bleiben) */ .medal-ic { display: inline-flex; vertical-align: -0.15em; flex: none; } .medal-ic .ntsvg { width: 1em; height: 1em; vertical-align: 0; } .medal-ic.gold { color: var(--gold); } .medal-ic.silver { color: var(--silver); } .medal-ic.bronze { color: var(--bronze); } /* 1./2./3.-Plätze-Zähler: Symbol + Zahl als Flex-Gruppe mit festem Abstand, damit die Zahl nicht auf dem Medaillensymbol klebt. */ .medtally { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; } .medtally .mt-g { display: inline-flex; align-items: center; gap: 3px; } .medtally .mt-g i { font-style: normal; } /* Kontext-Feinschliff */ .hub-icon { color: var(--accent); } .hub-icon .ntsvg { width: 1.9rem; height: 1.9rem; vertical-align: 0; } .tb-icon-btn .ntsvg { width: 1.2rem; height: 1.2rem; vertical-align: 0; } .admin-banner .ab-ic { display: inline-flex; vertical-align: -0.2em; } .admin-banner .ab-ic .ntsvg { width: 1rem; height: 1rem; } .result-banner .ntsvg { width: 1.1em; height: 1.1em; vertical-align: -0.16em; } .app-dl-icon { color: var(--accent); } .app-dl-icon .ntsvg { width: 1.4rem; height: 1.4rem; vertical-align: 0; } .bo-emoji .ntsvg { width: 2.4rem; height: 2.4rem; color: var(--accent); vertical-align: 0; } .ssm-i { display: inline-flex; align-items: center; justify-content: center; } .ssm-i .ntsvg { width: 1.2rem; height: 1.2rem; } .watch-tag { display: inline-flex; align-items: center; gap: 5px; } .watch-tag .ntsvg { width: 0.95rem; height: 0.95rem; vertical-align: 0; } .leg-avg .ntsvg { width: 0.95em; height: 0.95em; vertical-align: -0.14em; } .rec-holder .ntsvg, .season-champ .ntsvg, .lb-hist .nm .ntsvg { width: 1em; height: 1em; vertical-align: -0.14em; } .entry-tag .ntsvg { width: 0.85rem; height: 0.85rem; vertical-align: -0.15em; } /* ========================================================================= NATIVE APP - Feinschliff: SVG-Icons, Skeletons, Pull-to-Refresh, Reiter-Uebergang, Podium-Medaillen, kein Tap-Highlight ========================================================================= */ /* ---- Icons: einheitliche SVG-Groessen ---- */ body.native .ntsvg { width: 1.15rem; height: 1.15rem; display: block; } body.native #botnav .botnav-i .bi { display: grid; place-items: center; } body.native #botnav .botnav-i .bi .ntsvg { width: 1.5rem; height: 1.5rem; } body.native #fab .fab-plus { display: inline-grid; place-items: center; } body.native #fab .fab-plus .ntsvg { width: 1.35rem; height: 1.35rem; } body.native .tb-back .ntsvg { width: 1.35rem; height: 1.35rem; } body.native #appbar-account .ntsvg, body.native #mod-toggle .ntsvg { width: 1.2rem; height: 1.2rem; } body.native .nchip .nci { display: grid; place-items: center; } body.native .nchip .nci .ntsvg { width: 1.35rem; height: 1.35rem; } body.native .nrow-lead .ntsvg { width: 1.2rem; height: 1.2rem; } body.native .lbchamp .t { display: block; } body.native .lbchamp .t .ntsvg { width: 1.9rem; height: 1.9rem; margin: 0 auto; color: var(--warn); } body.native .lg-head .i { display: block; } body.native .lg-head .i .ntsvg { width: 2rem; height: 2rem; margin: 0 auto; color: var(--accent); } /* ---- Kein blaues Aufblitzen / kein Fokus-Kasten beim Antippen ---- */ body.native, body.native * { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } body.native button, body.native [role="button"], body.native a, body.native .nrow, body.native .nchip, body.native .botnav-i { -webkit-user-select: none; user-select: none; } body.native button:focus:not(:focus-visible), body.native [role="button"]:focus:not(:focus-visible), body.native .nrow:focus:not(:focus-visible), body.native .botnav-i:focus:not(:focus-visible) { outline: none; box-shadow: none; } /* ---- Podium: Rangscheibe statt Emoji-Medaille ---- */ body.native .lbpod .m { width: 26px; height: 26px; margin: 0 auto; border-radius: var(--radius-pill); display: grid; place-items: center; font-size: 0.82rem; font-weight: 800; color: #17130a; background: var(--surface-3); } body.native .lbpod .m.m1 { background: var(--gold); } body.native .lbpod .m.m2 { background: var(--silver); } body.native .lbpod .m.m3 { background: var(--bronze); color: #fff; } /* ---- Skeletons (statt „Lade…") ---- */ body.native .skel { display: flex; flex-direction: column; } body.native .skrow { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 11px; row-gap: 6px; align-items: center; padding: 13px; } body.native .skrow + .skrow { border-top: 1px solid var(--border); } body.native .sk { display: block; border-radius: 7px; background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%); background-size: 220% 100%; animation: sk-shimmer 1.3s ease-in-out infinite; } body.native .sk-ic { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 10px; } body.native .sk-l1 { height: 10px; width: 62%; } body.native .sk-l2 { height: 9px; width: 40%; } @keyframes sk-shimmer { from { background-position: 100% 0; } to { background-position: -120% 0; } } /* ---- Reiter-Uebergang (nur opacity – kein transform: sonst wuerde #app zum Bezugsrahmen fuer den fixierten .ncta / die Leisten) ---- */ body.native #app.nt-anim { animation: nt-fade 150ms ease; } @keyframes nt-fade { from { opacity: 0.4; } to { opacity: 1; } } /* ---- Pull-to-Refresh (unter der App-Bar, per opacity/scale eingeblendet) ---- */ .ptr { position: fixed; left: 50%; top: 64px; width: 34px; height: 34px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; z-index: 54; transform: translateX(-50%) scale(0.4); opacity: 0; pointer-events: none; transition: transform 160ms ease, opacity 160ms ease; box-shadow: var(--shadow-2); } .ptr.show, .ptr.run { opacity: 1; transform: translateX(-50%) scale(1); } .ptr .ptr-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--accent); } .ptr.armed .ptr-spin { border-top-color: var(--good); } .ptr.run .ptr-spin { animation: ptr-rot 0.7s linear infinite; } @keyframes ptr-rot { to { transform: rotate(360deg); } } /* ==== Nur-Download-Seite (normaler Webbrowser) ============================= */ body.download-only .taskbar, body.download-only #botnav, body.download-only #fab, body.download-only #app-ver, body.download-only #toast { display: none !important; } body.download-only #app { min-height: 100dvh; display: grid; place-items: center; padding: var(--s5); } .dl-wrap { max-width: 420px; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: clamp(var(--s5), 6vw, var(--s7)); } .dl-logo { width: 96px; height: 96px; object-fit: contain; } .dl-title { margin: 0; font-size: 1.6rem; letter-spacing: -0.01em; } .dl-sub { margin: 0; color: var(--text-dim); } .dl-btn { margin-top: var(--s2); display: inline-block; width: 100%; padding: 15px var(--s5); border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 1.05rem; text-decoration: none; transition: filter var(--t-fast); } .dl-btn:hover { filter: brightness(1.06); } .dl-btn:active { transform: translateY(1px); } .dl-meta { margin: 0; font-size: 0.85rem; color: var(--text-faint); line-height: 1.5; } .dl-steps { margin: var(--s2) 0 0; padding-left: 1.35em; text-align: left; color: var(--text-dim); font-size: 0.9rem; line-height: 1.55; display: flex; flex-direction: column; gap: var(--s2); } .dl-steps strong { color: var(--text); } .dl-share { display: inline-flex; vertical-align: -0.3em; width: 1.15em; height: 1.15em; margin: 0 2px; color: var(--accent); } .dl-share svg { width: 100%; height: 100%; } /* ==== Trainings-Vereinsrekorde (Bottom-Sheet) ============================= */ .trrec { display: flex; flex-direction: column; gap: var(--s4); max-height: 62vh; overflow-y: auto; } .trrec-grp { display: flex; flex-direction: column; gap: 2px; } .trrec-h { font-weight: 800; font-size: 0.9rem; margin-bottom: var(--s2); } .trrec-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: var(--s2); padding: 7px 4px; border-top: 1px solid var(--border); } .trrec-grp .trrec-row:first-of-type { border-top: 0; } .trrec-rk { text-align: center; font-weight: 700; font-size: 0.9rem; } .trrec-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .trrec-sc { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent); white-space: nowrap; } /* ==== Offline-Status-Chip ================================================= */ #netstat { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--botnav-h) + env(safe-area-inset-bottom, 0px) + 14px); z-index: 70; padding: 8px 15px; border-radius: var(--radius-pill); font-size: 0.82rem; font-weight: 700; text-align: center; max-width: calc(100vw - 24px); box-shadow: var(--shadow-pop); } body:not(.native) #netstat { bottom: 16px; } body.in-game #netstat { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 60px); } #netstat.off { background: var(--bad); color: #fff; } #netstat.on { background: var(--good); color: var(--good-ink); } /* ==== Admin: Verein anlegen ============================================== */ .adm-clubadd { display: flex; gap: var(--s2); margin: var(--s3) 0; } .adm-clubadd input { flex: 1 1 auto; min-width: 0; } .adm-clubadd .btn { flex: 0 0 auto; } /* ==== Admin: Vereine & Teams (Gruppen) ================================== */ .adm-clubgroup { margin-top: var(--s3); } .adm-clubgroup + .adm-clubgroup { margin-top: var(--s4); } .adm-clubhead { background: var(--surface-2); } .adm-clubhead .adm-pname { font-size: 1rem; } .adm-teamrow { padding-left: var(--s6); position: relative; } .adm-teamrow::before { content: ""; position: absolute; left: var(--s4); top: 0; bottom: 0; border-left: 2px solid var(--border); } .adm-teamrow .adm-pname { font-weight: 600; } .adm-teamadd { padding-left: var(--s6); } .adm-teamadd .btn { width: 100%; } /* ==== Trainingsspiel-Icons (Rekord-Sheet / Browser-Kacheln) ============== */ .trrec-h { display: flex; align-items: center; gap: var(--s2); } .trrec-ic { display: inline-flex; color: var(--accent); } .trrec-ic .ntsvg { width: 1.05rem; height: 1.05rem; } .game-tile .gt-title { display: flex; align-items: center; gap: var(--s2); } .gt-ic { display: inline-flex; color: var(--accent); } .gt-ic .ntsvg { width: 1.2rem; height: 1.2rem; } /* ==== Konto-Knopf (App-Bar oben rechts) ================================= */ #appbar-account { position: relative; } .acct-ini { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; } /* Author-display schlaegt das UA-[hidden] – sonst bliebe die (leere) blaue Pille sichtbar, solange niemand angemeldet ist. */ .acct-ini[hidden] { display: none !important; } #appbar-account.is-admin .acct-ini { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--warn); } .acct-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); } .acct-badge { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-pill); flex: 0 0 auto; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 0.95rem; } .acct-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .acct-who b { font-size: 1.02rem; } .acct-role { font-size: 0.78rem; color: var(--text-dim); } /* ==== Kalender (Trainingstage / Spieltage) ============================== */ .cal-wrap { max-width: 640px; margin: 0 auto; } .cal-filter { display: flex; gap: var(--s1); margin-bottom: var(--s3); } .cal-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); } .cal-actions .btn { flex: 0 1 auto; } .cal-fbtn { flex: 1 1 auto; padding: 9px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-dim); font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .cal-fbtn.on { background: var(--accent-tint); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .cal-card { display: flex; gap: var(--s3); padding: var(--s3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: var(--s3); cursor: pointer; } .cal-card:hover { border-color: var(--border-strong); } .cal-card:active { background: var(--surface-2); } /* Farbcodierung nach Terminart: Rand-Streifen + Kästchen-Tönung + Label. */ .cal-card { border-left-width: 4px; border-left-style: solid; border-left-color: var(--border); } .cal-card.k-training { border-left-color: var(--accent); } .cal-card.k-match { border-left-color: var(--bad); } .cal-card.k-other { border-left-color: var(--warn); } .cal-card.k-training .cal-daybox { background: var(--accent-tint); } .cal-card.k-match .cal-daybox { background: var(--bad-tint); } .cal-card.k-other .cal-daybox { background: color-mix(in srgb, var(--warn) 16%, transparent); } .cal-card.k-training .cal-kind { color: var(--accent); } .cal-card.k-match .cal-kind { color: var(--bad); } .cal-card.k-other .cal-kind { color: var(--warn); } /* Abgesagter Termin: gedimmt, Titel durchgestrichen, Rand-Streifen grau. */ .cal-card.is-cancelled { opacity: 0.62; border-left-color: var(--border-strong) !important; } .cal-card.is-cancelled .cal-daybox { background: var(--surface-2) !important; } .cal-card.is-cancelled .cal-kind { color: var(--text-dim) !important; } .cal-card.is-cancelled .cal-title { text-decoration: line-through; text-decoration-thickness: 1px; } .cal-cancelled { display: inline-block; margin-top: 4px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bad); background: var(--bad-tint); border-radius: var(--radius-pill); padding: 2px 10px; } .cal-daybox { flex: 0 0 auto; width: 52px; text-align: center; padding: 6px 0; border-radius: var(--radius-sm); background: var(--surface-2); display: flex; flex-direction: column; align-items: center; align-self: flex-start; } .cal-wd { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); } .cal-dd { font-size: 1.5rem; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; } .cal-mon { font-size: 0.68rem; color: var(--text-dim); } .cal-body { flex: 1 1 auto; min-width: 0; } .cal-kind { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); font-weight: 700; } .cal-rel { color: var(--accent); } .cal-title { font-weight: 700; font-size: 1.02rem; margin-top: 2px; } .cal-meta { color: var(--text-dim); font-size: 0.9rem; margin-top: 4px; line-height: 1.9; } .cal-meta-sep { color: var(--text-faint); } /* Antippbare Adresse -> Karten-App. Auch im Anwesenheits-Modal (in einem

). */ .cal-loc { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 9px 1px 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--accent); font: inherit; font-size: inherit; font-weight: 600; line-height: 1.6; cursor: pointer; vertical-align: -0.28em; -webkit-tap-highlight-color: transparent; } .cal-loc > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .cal-loc .ntsvg { width: 0.95em; height: 0.95em; flex: 0 0 auto; } .cal-loc:hover { border-color: var(--accent); } .cal-loc:active { background: var(--surface-3); } p .cal-loc { vertical-align: -0.28em; } .cal-note { font-size: 0.86rem; margin-top: var(--s2); color: var(--text-dim); } .cal-rsvp { display: flex; gap: var(--s1); margin-top: var(--s3); } .cal-seg { flex: 1 1 0; padding: 10px 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-dim); font: inherit; font-size: 0.84rem; font-weight: 700; cursor: pointer; min-height: var(--tap); } .cal-seg.on.yes { background: var(--good-tint); color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, var(--border)); } .cal-seg.on.maybe { background: var(--warn); color: var(--warn-ink); border-color: var(--warn); } .cal-seg.on.no { background: var(--bad-tint); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); } .cal-countbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-top: var(--s3); width: 100%; padding: 8px 0 0; border: 0; border-top: 1px solid var(--border); background: none; color: var(--text-dim); font: inherit; font-size: 0.86rem; } .cal-cnt { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; font-weight: 700; } .cal-who-toggle { margin-left: auto; color: var(--accent); font-weight: 700; } .cal-admrow { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); padding-top: var(--s2); border-top: 1px dashed var(--border); } .cal-admrow .btn { flex: 1 1 auto; min-width: 0; padding-left: var(--s3); padding-right: var(--s3); white-space: nowrap; } .cal-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--text-faint); } .cal-dot.yes { background: var(--good); } .cal-dot.maybe { background: var(--warn); } .cal-dot.no { background: var(--bad); } .cal-who { margin-top: var(--s2); display: flex; flex-direction: column; gap: 5px; } .cal-who-row { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; } /* Anwesenheits-Modal: alle Spieler nach Status gruppiert. */ .cal-att-sum { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: var(--s3) 0; font-weight: 700; } .cal-att-list { display: flex; flex-direction: column; gap: var(--s3); max-height: 56vh; overflow-y: auto; } .cal-att-grp { display: flex; flex-direction: column; gap: 4px; } .cal-att-head { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); } .cal-att-n { margin-left: 4px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-dim); font-size: 0.72rem; } .cal-att-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--s2); padding: 8px 10px; background: var(--surface-2); border-radius: var(--radius-sm); font-size: 0.92rem; } .cal-att-name { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; } .cal-att-guest { padding: 1px 7px; border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text-faint); font-size: 0.7rem; font-weight: 700; } .cal-att-auto { padding: 1px 7px; border-radius: var(--radius-pill); background: var(--bad-tint); color: var(--bad); font-size: 0.7rem; font-weight: 700; } .cal-att-reason { flex-basis: 100%; font-size: 0.8rem; color: var(--text-dim); font-style: italic; } .cal-att-adm { flex: 0 0 auto; display: flex; gap: 4px; } .cal-att-b { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-dim); font: inherit; font-weight: 800; cursor: pointer; display: grid; place-items: center; line-height: 1; } .cal-att-b:disabled { opacity: 0.45; cursor: default; } .cal-att-b.yes:hover { background: var(--good-tint); color: var(--good); border-color: var(--good); } .cal-att-b.maybe:hover { background: var(--warn); color: var(--warn-ink); border-color: var(--warn); } .cal-att-b.no:hover { background: var(--bad-tint); color: var(--bad); border-color: var(--bad); } .cal-deadline { margin-top: var(--s2); font-size: 0.8rem; font-weight: 700; color: var(--accent); } .cal-deadline.is-past { color: var(--bad); } .cf-form { display: flex; flex-direction: column; margin-bottom: var(--s3); } .cf-form .field { margin-top: var(--s2); } .cf-form input, .cf-form select { width: 100%; } /* .ics-Import: Vorschau der erkannten Termine */ .ics-check { display: flex; align-items: center; gap: 8px; margin: var(--s3) 0 0; font-size: 0.9rem; color: var(--text-dim); } .ics-check input { width: auto; min-height: 0; } .ics-preview { margin-top: var(--s3); font-size: 0.85rem; color: var(--text-dim); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s3); } .ics-sum { color: var(--text); margin-bottom: var(--s2); } .ics-list { display: flex; flex-direction: column; max-height: 44vh; overflow-y: auto; } .ics-row { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--border); } .ics-row:first-child { border-top: 0; } .ics-row .ics-d { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; } .ics-row .ics-s { flex: 1 1 8ch; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ics-row .ics-t { font-size: 0.72rem; font-weight: 700; color: var(--warn); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; } .ics-row.is-skip { opacity: 0.45; } .ics-row.is-skip .ics-s { text-decoration: line-through; } /* Team-Kennzeichnung auf einer Spieltag-Karte (nur Team-Mitglieder sehen ihn). */ .cal-team-badge { display: inline-block; padding: 0 7px; border-radius: var(--radius-pill); background: var(--accent-tint); color: var(--accent); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; } /* Mitglieder-Auswahl im Team-Modal (Admin-Panel). */ .team-mem-list { max-height: 46vh; overflow-y: auto; margin: var(--s2) 0 var(--s1); display: flex; flex-direction: column; } .team-mem { display: flex; align-items: center; gap: 10px; padding: var(--s2) var(--s1); border-bottom: 1px solid var(--border); cursor: pointer; font-size: 0.95rem; } .team-mem:last-child { border-bottom: 0; } .team-mem input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--accent); } /* Spieler-Edit: „Moderator"-Schalter (nur für den vollen Admin sichtbar). */ .ae-modrow { display: flex; align-items: flex-start; gap: 10px; margin-top: var(--s3); padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); cursor: pointer; font-size: 0.9rem; } .ae-modrow input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--accent); } /* Spielende: Aufklappbare Leg-für-Leg-Statistik unter den Spieler-Panels. */ .leg-breakdown { margin-top: var(--s4); border-top: 1px solid var(--border); padding-top: var(--s3); } .leg-breakdown > summary { cursor: pointer; list-style: none; font-weight: 800; font-size: 0.95rem; color: var(--text); } .leg-breakdown > summary::-webkit-details-marker { display: none; } .leg-breakdown > summary::before { content: "▸ "; color: var(--text-dim); } .leg-breakdown[open] > summary::before { content: "▾ "; } .leg-breakdown[open] > summary { margin-bottom: var(--s3); } .leg-table { table-layout: auto; font-size: 0.85rem; } .leg-table th, .leg-table td { white-space: nowrap; padding: var(--s2) var(--s2); } .leg-table tbody tr { cursor: default; } .leg-table td.leg-no { font-weight: 800; color: var(--text-dim); font-variant-numeric: tabular-nums; } .leg-table td { font-variant-numeric: tabular-nums; } .leg-table td.leg-win .leg-avg { font-weight: 800; color: var(--good); } .leg-table .leg-avg { display: block; } .leg-table .leg-sub { display: block; margin-top: 1px; font-size: 0.72rem; font-weight: 600; color: var(--text-faint); } .leg-badge { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--accent-tint); color: var(--accent); font-size: 0.66rem; font-weight: 800; vertical-align: middle; } .leg-hint { margin-top: var(--s2); font-size: 0.78rem; } /* ========================================================================= Telefon-Scoring-Ansicht ("mobile board") – kompakt, zwei gleiche Spalten. Aktiv, wenn body.mobileboard gesetzt ist (Telefon + Ansicht „Mobil"). Umschaltbar im „⋯"-Menü der Scoring-Ansicht. ========================================================================= */ body.mobileboard .score-board-area { padding: var(--s2); } .pdc-mob { flex: 1 1 auto; min-height: 0; position: relative; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-1); } /* kleine Legs-Pille – oben mittig im Board */ .pdc-mob .pm-legs { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 6px; background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 3px 12px; font-size: 0.6rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.5); } .pdc-mob .pm-legs b { color: var(--text); font-size: 0.95rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: 0; } .pdc-mob .pm-legs b span { opacity: 0.45; } .pdc-mob .pm-legs-sets { color: var(--text-faint); } .pdc-mob .pm-legs-sets span { opacity: 0.45; } .pdc-mob .pm-col { min-width: 0; padding: 30px 10px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; } .pdc-mob .pm-col + .pm-col { border-left: 1px solid var(--border); } .pdc-mob .pm-col.col-active { background: var(--accent-tint); } .pdc-mob .pm-name { display: flex; align-items: center; gap: 6px; max-width: 100%; font-weight: 800; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pdc-mob .pm-turn { flex: 0 0 auto; font-size: 0.5rem; font-weight: 900; letter-spacing: 0.08em; background: var(--accent); color: var(--accent-ink); padding: 3px 7px; border-radius: var(--radius-pill); } /* Gesamt-Reststand: nur die Zahl, kein Kasten */ .pdc-mob .pm-score { font-size: 3.4rem; font-weight: 900; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--good); } .pdc-mob .pm-col.col-active .pm-score { color: var(--accent); } .pdc-mob .pm-meta { font-size: 0.68rem; color: var(--text-dim); text-align: center; } /* geworfene Aufnahmen: gerahmte Kacheln, Reihe seitlich scrollbar */ .pdc-mob .pm-throws-wrap { width: 100%; position: relative; margin-top: 2px; } .pdc-mob .pm-throws { display: flex; align-items: center; gap: 5px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; padding: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .pdc-mob .pm-throws::-webkit-scrollbar { display: none; } .pdc-mob .tk { flex: 0 0 auto; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); padding: 4px 9px; font-size: 0.9rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); } .pdc-mob .tk.b { color: var(--bad); border-color: var(--bad); background: var(--bad-tint); } .pdc-mob .tk.co { color: var(--good); border-color: var(--good); background: var(--good-tint); } .pdc-mob .tk.empty { color: var(--text-faint); border-style: dashed; } .pdc-mob .pm-throws-wrap::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 22px; background: linear-gradient(90deg, transparent, var(--surface)); pointer-events: none; } .pdc-mob .pm-col.col-active .pm-throws-wrap::after { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 14%, var(--surface))); } @media (max-height: 560px) { .pdc-mob .pm-score { font-size: 2.6rem; } .pdc-mob .pm-col { padding-top: 24px; gap: 6px; } } /* --- Keypad auf dem Telefon etwas flacher (Tablet/Querformat unverändert) --- */ @media (orientation: portrait) { body.phone .keypad button, body.phone .quickpad button { height: 52px; } body.phone .keypad button { font-size: 1.6rem; } body.phone .quickpad button { font-size: 1.15rem; } body.phone .entry-display { height: 48px; font-size: 1.7rem; margin-bottom: var(--s1); } body.phone .keypad-actions button { height: 54px; } body.phone .keypad-actions .key-confirm { font-size: 1.05rem; } body.phone .score-entry { padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom, 0px)); } body.phone .pad-row { gap: var(--s2); } }