/* ===================================================================== app.css — Redesign Phase 2 (Oktober 2026): App-Shell + öffentliche Seiten --------------------------------------------------------------------- Gilt NUR unter body.bpm-app (Start/Feed, Turnier, Teams, Regeln, Teamseite …). Admin-Seiten (verwaltung.php, verwaltenspiel.php, macher.php) laden diese Datei nicht und tragen die Klasse nicht — dort ändert sich nichts. Farben kommen ausschließlich aus den Tokens in style.css :root (rot/gold/silber/bronze, Hell/Dunkel); hier werden nur neutrale Hilfstöne abgeleitet. Animationen: nur transform/opacity, "Bewegung reduzieren" schaltet sie ab (ganz unten). ===================================================================== */ :root { --bpm-sat: env(safe-area-inset-top, 0px); --bpm-sal: env(safe-area-inset-left, 0px); --bpm-sar: env(safe-area-inset-right, 0px); } /* Native App: die App rückt das WebView selbst unter die Statusleiste/seitlich ein → env()-Werte nicht doppelt anwenden */ html.bpm-native { --bpm-sat: 0px; --bpm-sal: 0px; --bpm-sar: 0px; } body.bpm-app { --app-hdr-h: 64px; --app-hdr-hs: 52px; --app-tab-h: 62px; --header-h: var(--app-hdr-h); --nav-h: calc(var(--app-tab-h) + env(safe-area-inset-bottom, 0px)); --app-col: 560px; --app-fill: rgba(120,120,128,.12); --app-fill2: rgba(120,120,128,.06); --app-line: var(--c-border); --app-thumb: #fff; --app-red-t: var(--c-primary); --app-glass: rgba(255,255,255,.86); --app-glass-b: rgba(0,0,0,.07); --app-sh: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(20,10,10,.07); --app-sh-lg: 0 -8px 40px rgba(0,0,0,.18); --app-ease: cubic-bezier(.2,.85,.25,1); --app-spring: cubic-bezier(.34,1.5,.64,1); --app-cup-red: #e3262b; --app-cup-blue: #2f6ff2; --app-ok: #1f8f3c; padding-top: calc(var(--app-hdr-h) + var(--bpm-sat) + 6px); padding-bottom: calc(var(--nav-h) + 16px); overflow-x: hidden; } @media (prefers-color-scheme: dark) { body.bpm-app { --app-fill: rgba(255,255,255,.08); --app-fill2: rgba(255,255,255,.04); --app-thumb: #3a2836; --app-red-t: #ff6470; --app-glass: rgba(32,20,32,.84); --app-glass-b: rgba(255,255,255,.12); --app-sh: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.35); --app-ok: #4cd964; } } html.bpm-app-html { scroll-padding-top: calc(var(--app-hdr-hs, 52px) + 60px); } /* --------------------------------------------------------------------- Kopfzeile --------------------------------------------------------------------- */ body.bpm-app .app-hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: calc(var(--app-hdr-h) + var(--bpm-sat)); padding: var(--bpm-sat) max(12px, var(--bpm-sar)) 0 max(14px, var(--bpm-sal)); display: flex; align-items: center; gap: 10px; background: var(--app-glass); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); border-bottom: 1px solid transparent; transform-origin: top center; transition: border-color .3s, height .3s var(--app-ease); view-transition-name: app-hdr; } html.app-scrolled body.bpm-app .app-hdr { height: calc(var(--app-hdr-hs) + var(--bpm-sat)); border-bottom-color: var(--app-glass-b); } body.bpm-app .app-hdr-logo { flex: none; width: 40px; height: 40px; display: block; transition: transform .3s var(--app-ease); } body.bpm-app .app-hdr-logo img { width: 40px; height: 40px; object-fit: contain; border-radius: 0; } html.app-scrolled body.bpm-app .app-hdr-logo { transform: scale(.8); } body.bpm-app .app-hdr-ttl { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; } body.bpm-app .app-hdr-ttl h1 { margin: 0; font-family: var(--font); font-weight: 400; color: var(--c-text); font-size: clamp(16px, 4.9vw, 20px); line-height: 1.1; text-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.bpm-app .app-mode-chip { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; max-width: 100%; margin-top: 3px; padding: 0; border: 0; background: none; cursor: pointer; font: 12px/1.15 var(--font); color: var(--c-text-2); text-decoration: none; white-space: nowrap; transition: opacity .25s, transform .3s var(--app-ease); transform-origin: left center; } body.bpm-app .app-mode-chip b { font-weight: 400; color: var(--app-red-t); } body.bpm-app .app-mode-chip i { font-style: normal; color: var(--app-red-t); opacity: .8; } html.app-scrolled body.bpm-app .app-mode-chip { opacity: 0; transform: translateY(-4px) scale(.92); pointer-events: none; position: absolute; } body.bpm-app .app-ibtn { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; color: var(--app-red-t); background: var(--app-fill); position: relative; transition: transform .2s var(--app-spring), background .2s; } body.bpm-app .app-ibtn:active { transform: scale(.9); } body.bpm-app .app-eq { display: flex; gap: 2px; align-items: flex-end; height: 16px; } body.bpm-app .app-eq i { display: block; width: 3px; height: 16px; background: currentColor; border-radius: 2px; transform-origin: bottom; transform: scaleY(.3); } body.bpm-app .app-eq i:nth-child(2) { transform: scaleY(.55); } body.bpm-app .app-eq i:nth-child(3) { transform: scaleY(.4); } body.bpm-app .app-eq i:nth-child(4) { transform: scaleY(.7); } body.bpm-app .app-np-btn.is-playing .app-eq i { animation: appEq 1s ease-in-out infinite; } body.bpm-app .app-np-btn.is-playing .app-eq i:nth-child(2) { animation-delay: -.4s; } body.bpm-app .app-np-btn.is-playing .app-eq i:nth-child(3) { animation-delay: -.7s; } body.bpm-app .app-np-btn.is-playing .app-eq i:nth-child(4) { animation-delay: -.2s; } @keyframes appEq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } } /* Avatar-Platz rechts (hier hängt _identity_sheet.php #id-fab-wrap hinein) */ body.bpm-app .app-hdr-av { flex: none; width: 44px; height: 44px; position: relative; } body.bpm-app .app-av-btn { display: block; width: 44px; height: 44px; border-radius: 50%; padding: 2px; background: conic-gradient(var(--c-primary), var(--c-gold), var(--c-primary)); transition: transform .25s var(--app-spring); } body.bpm-app .app-av-btn:active { transform: scale(.9); } body.bpm-app .app-av { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--c-card); color: var(--c-text-2); border: 2px solid var(--c-card); font: 14px/1 var(--font); } body.bpm-app .app-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; } body.bpm-app #id-fab-wrap.in-hdr { position: absolute !important; inset: 0 !important; width: 44px !important; height: 44px !important; bottom: auto !important; right: auto !important; z-index: 1 !important; view-transition-name: none; } body.bpm-app #id-fab-wrap.in-hdr #id-btn { width: 44px !important; height: 44px !important; border: 2px solid var(--c-card) !important; box-shadow: 0 0 0 2px var(--c-gold), 0 2px 8px rgba(0,0,0,.15) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } body.bpm-app #id-fab-wrap.in-hdr.is-guest #id-btn { background: var(--c-card) !important; box-shadow: 0 0 0 2px var(--c-primary), 0 2px 8px rgba(0,0,0,.12) !important; } body.bpm-app #id-fab-wrap.in-hdr.is-guest #id-btn svg { stroke: var(--c-text-2); } body.bpm-app #id-fab-wrap.in-hdr #id-btn span { font-size: 14px !important; } body.bpm-app #id-fab-wrap.in-hdr #mention-badge, body.bpm-app #id-fab-wrap.in-hdr #confirm-badge { transform: scale(.85); } /* "Hier einloggen"-Hinweis: kleine Blase UNTER der Kopfzeile, am Avatar verankert (Pfeil nach oben), rechtsbündig im 16-px-Rand; überdeckt Titel/Modus-Chip nicht, blendet nach wenigen Sekunden bzw. per ✕ aus (merkt sich localStorage). */ body.bpm-app #id-fab-wrap.in-hdr #login-hint { left: auto !important; right: 4px !important; top: calc(100% + 12px) !important; transform: translateY(-6px) !important; max-width: calc(100vw - 32px); border-radius: 14px !important; padding: 0 36px 0 14px !important; height: 40px; line-height: 40px; overflow: visible; text-overflow: ellipsis; background: var(--c-primary) !important; font-family: var(--font); font-weight: 400 !important; box-shadow: 0 8px 20px color-mix(in srgb, var(--c-primary) 35%, transparent) !important; } body.bpm-app #id-fab-wrap.in-hdr #login-hint[style*="opacity: 1"] { transform: translateY(0) !important; } body.bpm-app #id-fab-wrap.in-hdr #login-hint > span { left: auto !important; right: 11px; top: -7px !important; transform: none !important; border-left: 7px solid transparent !important; border-right: 7px solid transparent !important; border-top: 0 !important; border-bottom: 8px solid var(--c-primary) !important; } body.bpm-app #id-fab-wrap.in-hdr #login-hint > button { top: 50% !important; right: 2px !important; transform: translateY(-50%); width: 36px !important; height: 36px !important; background: transparent !important; border: 0 !important; font-size: 16px !important; } /* --------------------------------------------------------------------- Untere Tab-Leiste --------------------------------------------------------------------- */ body.bpm-app > footer { display: none; } body.bpm-app .app-tabbar { position: fixed; z-index: 100; left: 0; right: 0; bottom: 0; padding: 6px max(10px, var(--bpm-sar)) calc(4px + env(safe-area-inset-bottom, 0px)) max(10px, var(--bpm-sal)); background: var(--app-glass); -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px); border-top: 1px solid var(--app-glass-b); view-transition-name: app-tabbar; } body.bpm-app .app-tabs { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); max-width: var(--app-col); margin: 0 auto; } body.bpm-app .app-tab-ind { position: absolute; top: 0; left: 0; width: 25%; height: 52px; display: flex; justify-content: center; pointer-events: none; transform: translateX(calc(var(--app-tab-i, 0) * 100%)); transition: transform .5s var(--app-spring), opacity .2s; } body.bpm-app .app-tabs[style*="--app-tab-i:-1"] .app-tab-ind { opacity: 0; } body.bpm-app .app-tabs.no-anim .app-tab-ind { transition: none; } body.bpm-app .app-tab-ind::before { content: ""; width: 64px; height: 32px; margin-top: 2px; border-radius: 16px; background: color-mix(in srgb, var(--c-primary) 14%, transparent); } body.bpm-app .app-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; min-height: 52px; padding-top: 6px; text-decoration: none; color: var(--c-text-2); font: 12px/1 var(--font); transition: color .25s; -webkit-tap-highlight-color: transparent; } body.bpm-app .app-tab svg { width: 24px; height: 24px; transition: transform .35s var(--app-spring); } body.bpm-app .app-tab.on { color: var(--app-red-t); } body.bpm-app .app-tab.on svg { transform: translateY(-1px) scale(1.08); } body.bpm-app .app-tab:active svg { transform: scale(.88); } body.bpm-app .app-live-dot { position: absolute; top: 4px; left: calc(50% + 9px); width: 10px; height: 10px; border-radius: 50%; background: var(--c-primary); border: 2px solid var(--c-card); animation: appDot 1.6s ease-in-out infinite; } body.bpm-app .app-live-dot[hidden] { display: none; } @keyframes appDot { 50% { transform: scale(1.3); } } /* "Neuer Beitrag"-Hinweis am Start-Tab (_pulseFeedNav()) */ body.bpm-app .app-tab.feed-nav-pulse::after { content: ""; position: absolute; top: 5px; left: calc(50% + 9px); width: 9px; height: 9px; border-radius: 50%; background: var(--c-gold); border: 2px solid var(--c-card); animation: appDot 1.6s ease-in-out infinite; } /* Seitenwechsel: Kopf- und Tab-Leiste stehen still, nur der Inhalt gleitet */ ::view-transition-old(app-hdr), ::view-transition-old(app-tabbar) { animation: none; opacity: 0; } ::view-transition-new(app-hdr), ::view-transition-new(app-tabbar) { animation: none; } ::view-transition-group(app-hdr), ::view-transition-group(app-tabbar) { animation-duration: 0s; } /* --------------------------------------------------------------------- Allgemeine Bausteine --------------------------------------------------------------------- */ body.bpm-app .page-wrap { max-width: var(--app-col); margin: 0 auto; } body.bpm-app .app-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 18px 16px 10px; } body.bpm-app .app-sec-h h2 { margin: 0; font: 400 20px/1.15 var(--font); color: var(--c-text); } body.bpm-app .app-sec-h .sub { font-size: 13px; color: var(--c-text-2); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } body.bpm-app .app-card { background: var(--c-card); border-radius: 20px; box-shadow: var(--app-sh); padding: 14px 16px; margin: 0 16px 12px; position: relative; } body.bpm-app .app-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 14px; border: 0; cursor: pointer; font: 16px/1 var(--font); text-decoration: none; transition: transform .18s var(--app-spring), filter .2s; } body.bpm-app .app-btn:active { transform: scale(.96); } body.bpm-app .app-btn.pri { background: var(--c-primary); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--c-primary) 30%, transparent); } body.bpm-app .app-btn.sec { background: var(--app-fill); color: var(--c-text); } body.bpm-app .app-btn.sm { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: 12px; } body.bpm-app .app-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--app-fill); color: var(--app-red-t); } body.bpm-app .app-ic.red { background: var(--c-primary); color: #fff; } body.bpm-app .app-ic.gold { background: color-mix(in srgb, var(--c-gold) 18%, transparent); color: var(--c-gold-text); } body.bpm-app .app-row { display: flex; align-items: center; gap: 12px; } body.bpm-app .app-row .grow { flex: 1; min-width: 0; } body.bpm-app .app-t1 { font: 16px/1.2 var(--font); color: var(--c-text); } body.bpm-app .app-muted { color: var(--c-text-2); font-size: 13px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } body.bpm-app .app-x { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border: 0; background: none; color: var(--c-text-2); cursor: pointer; display: grid; place-items: center; border-radius: 50%; } /* Einblenden: gestaffelt (common.js setzt --i), Reiter-Wechsel mit Richtung */ body.bpm-app .app-st { animation: appRise .55s var(--app-ease) backwards; animation-delay: calc(var(--i, 0) * 55ms); } @keyframes appRise { from { opacity: 0; transform: translateY(14px) scale(.985); } } /* Reiterwechsel: die Slide-Animation darf die Seite nicht verbreitern (Header rutschte kurz) */ html:has(body.bpm-app) { overflow-x: clip; } body.bpm-app .tabcontent { overflow-x: clip; } body.bpm-app .app-view-in { animation: appViewIn .4s var(--app-ease) backwards; } body.bpm-app .app-view-in.from-left { animation-name: appViewInL; } @keyframes appViewIn { from { opacity: 0; transform: translateX(26px); } } @keyframes appViewInL { from { opacity: 0; transform: translateX(-26px); } } /* --------------------------------------------------------------------- Segment-Leiste (Reiter innerhalb einer Seite) mit gleitendem Daumen --------------------------------------------------------------------- */ body.bpm-app .tab-switcher { position: sticky; top: calc(var(--app-hdr-hs) + var(--bpm-sat)); z-index: 50; padding: 6px 16px 10px; margin: 0 0 4px; background: color-mix(in srgb, var(--c-bg) 88%, transparent) !important; -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; } body.bpm-app .tab-switcher-track, body.bpm-app .tab-switcher-track.glass { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--app-fill); border: 0; border-radius: 14px; padding: 4px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } body.bpm-app .tab-slider { display: none; } body.bpm-app .app-seg-thumb { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 10px; background: var(--app-thumb); box-shadow: 0 2px 8px rgba(0,0,0,.12); transition: transform .4s var(--app-spring), width .4s var(--app-spring), opacity .2s; pointer-events: none; } body.bpm-app .tab-btn { min-height: 38px; padding: 0 4px; border-radius: 10px; gap: 6px; font: 400 clamp(13px, 3.9vw, 15px)/1 var(--font); color: var(--c-text-2); transition: color .25s; } body.bpm-app .tab-btn svg { width: 15px; height: 15px; } body.bpm-app .tab-btn.active { color: var(--c-text); } body.bpm-app .tab-btn.active svg { color: var(--app-red-t); } /* --------------------------------------------------------------------- Pull-to-Refresh mit Maskottchen Bechi (Element hängt an , SVG aus common.js) Ablauf: ziehen (Bechi taucht unter der Kopfzeile auf, duckt sich, schaut neugierig) → Schwelle (Arme hoch, ^^-Augen, lacht) → loslassen (Absprung mit Salto + Funken) → laden (Hüpf-Schleife, Prost-Arme, Schaumbläschen) → fertig (zwinkert, winkt, gleitet weg). Nur transform/opacity; reduzierte Bewegung: statisches Bechi im Chip mit Fortschrittsring. --------------------------------------------------------------------- */ html.bpm-app-html .app-ptr { --d: 0px; --p: 0; --b-line: #3b0609; --b-red: #e3262b; --b-red-d: #b8161c; --b-rim: #f6f3f0; --b-shoe: #2b2b30; --b-sh: rgba(0,0,0,.16); position: fixed; z-index: 99; left: 50%; top: calc(var(--app-hdr-hs, 52px) + var(--bpm-sat)); width: 56px; height: 68px; margin-left: -28px; pointer-events: none; transform: translateY(calc(var(--d) - 54px)) scale(calc(.5 + var(--p) * .5)); transform-origin: 50% 0; opacity: 0; visibility: hidden; } @media (prefers-color-scheme: dark) { html.bpm-app-html .app-ptr { --b-sh: rgba(0,0,0,.5); --b-rim: #f1ede9; } } html.bpm-app-html .app-ptr.is-pulling, html.bpm-app-html .app-ptr.is-back, html.bpm-app-html .app-ptr.is-drop, html.bpm-app-html .app-ptr.is-done { visibility: visible; opacity: min(1, calc(var(--p) * 2.4)); } html.bpm-app-html .app-ptr.is-drop { opacity: 1; transition: transform .3s cubic-bezier(.2,.9,.3,1.2); } html.bpm-app-html .app-ptr.is-back { transition: transform .35s cubic-bezier(.3,.9,.4,1), opacity .3s; } html.bpm-app-html .app-ptr.is-done { opacity: 1; transition: transform .4s cubic-bezier(.5,0,.75,0) .52s, opacity .22s ease .66s; } /* Bechi: Teile */ html.bpm-app-html .app-ptr-bechi { position: absolute; left: 0; top: 0; width: 56px; height: 68px; overflow: visible; } .app-ptr-bechi g, .app-ptr-bechi path, .app-ptr-bechi ellipse, .app-ptr-bechi circle { transform-box: view-box; } .app-ptr-bechi .cup { fill: var(--b-red); stroke: var(--b-line); stroke-width: 1.6; stroke-linejoin: round; } .app-ptr-bechi .ridge { stroke: var(--b-red-d); stroke-width: 1.6; fill: none; stroke-linecap: round; } .app-ptr-bechi .shine { stroke: #fff; stroke-opacity: .32; stroke-width: 2.4; fill: none; stroke-linecap: round; } .app-ptr-bechi .rim, .app-ptr-bechi .rim-top { fill: var(--b-rim); stroke: var(--b-line); stroke-width: 1.5; stroke-linejoin: round; } .app-ptr-bechi .rim-in { fill: #8e1116; } .app-ptr-bechi .lim { fill: none; stroke: var(--b-red); stroke-width: 3.2; stroke-linecap: round; } .app-ptr-bechi .lo { fill: none; stroke: var(--b-line); stroke-width: 5.6; stroke-linecap: round; } .app-ptr-bechi .hand { fill: var(--b-red); stroke: var(--b-line); stroke-width: 1.3; } .app-ptr-bechi .shoe { fill: var(--b-shoe); stroke: var(--b-line); stroke-width: 1; stroke-linejoin: round; } .app-ptr-bechi .pupil { fill: #1a0a0b; } .app-ptr-bechi .glint { fill: #fff; } .app-ptr-bechi .cheek { fill: #ff8f8f; opacity: .75; } .app-ptr-bechi .b-happy, .app-ptr-bechi .b-wink, .app-ptr-bechi .b-m-smile { fill: none; stroke: #1a0a0b; stroke-width: 1.8; stroke-linecap: round; } .app-ptr-bechi .b-m-o { fill: #4a070b; } .app-ptr-bechi .b-m-joy .mo { fill: #4a070b; stroke: #1a0a0b; stroke-width: 1; stroke-linejoin: round; } .app-ptr-bechi .tongue { fill: #ff7a86; } .app-ptr-bechi .b-foam circle { fill: #fff; stroke: rgba(120,80,40,.35); stroke-width: .6; } .app-ptr-bechi .b-shadow { fill: var(--b-sh); transform-origin: 32px 74px; } .app-ptr-bechi .spk { stroke-width: 2.2; stroke-linecap: round; fill: none; opacity: 0; } .app-ptr-bechi .spk0 { stroke: #ffc53d; } .app-ptr-bechi .spk1 { stroke: var(--b-red); } /* Drehpunkte (viewBox-Einheiten) */ .app-ptr-bechi .b-jump, .app-ptr-bechi .b-loop { transform-origin: 32px 40px; } .app-ptr-bechi .b-pose { transform-origin: 32px 70px; } .app-ptr-bechi .b-arm-l { transform-origin: 16px 33px; } .app-ptr-bechi .b-arm-r { transform-origin: 48px 33px; } .app-ptr-bechi .b-leg-l { transform-origin: 26.5px 58px; } .app-ptr-bechi .b-leg-r { transform-origin: 37.5px 58px; } .app-ptr-bechi .b-eye-l { transform-origin: 25.5px 32px; } .app-ptr-bechi .b-eye-r { transform-origin: 38.5px 32px; } .app-ptr-bechi .b-face { transform-origin: 32px 36px; } /* Grundzustand: neugierig (o-Mund, große Augen) */ .app-ptr-bechi .b-happy, .app-ptr-bechi .b-wink, .app-ptr-bechi .b-m-smile, .app-ptr-bechi .b-m-joy, .app-ptr-bechi .b-foam circle { opacity: 0; } .app-ptr-bechi .b-happy, .app-ptr-bechi .b-wink, .app-ptr-bechi .b-m, .app-ptr-bechi .b-eye { transition: opacity .12s, transform .18s; } .app-ptr-bechi .b-arm, .app-ptr-bechi .b-pose { transition: transform .22s cubic-bezier(.3,1.5,.5,1); } /* 1) Ziehen: Bechi duckt sich (spannt sich), kippt auf, Arme gehen mit, Blick nach oben */ .app-ptr.is-pulling .b-pose, .app-ptr.is-back .b-pose { transition: none; transform: rotate(calc((1 - var(--p)) * -14deg)) scale(calc(1 + var(--p) * .07), calc(1 - var(--p) * .09)); } .app-ptr.is-pulling .b-arm-l, .app-ptr.is-back .b-arm-l { transition: none; transform: rotate(calc(var(--p) * 38deg)); } .app-ptr.is-pulling .b-arm-r, .app-ptr.is-back .b-arm-r { transition: none; transform: rotate(calc(var(--p) * -38deg)); } .app-ptr.is-pulling .b-face { transform: translateY(calc(var(--p) * -1.2px)); } .app-ptr.is-pulling .b-eye { animation: appBechiBlink 2.6s 1s infinite; } @keyframes appBechiBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.12); } } /* Schwelle: freut sich — ^^-Augen, Lachmund, Arme hoch, kleiner Hopser */ .app-ptr.is-pulling.is-armed .b-arm-l { transition: transform .22s cubic-bezier(.3,1.6,.5,1); transform: rotate(118deg); } .app-ptr.is-pulling.is-armed .b-arm-r { transition: transform .22s cubic-bezier(.3,1.6,.5,1); transform: rotate(-118deg); } .app-ptr.is-armed .b-eye { opacity: 0; transform: scaleY(.3); animation: none; } .app-ptr.is-armed .b-happy { opacity: 1; } .app-ptr.is-armed .b-m-o { opacity: 0; } .app-ptr.is-armed .b-m-joy { opacity: 1; } .app-ptr.is-pulling.is-armed .b-jump { animation: appBechiYay .42s cubic-bezier(.3,1.4,.5,1); } @keyframes appBechiYay { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-5px) scale(.94, 1.08); } 100% { transform: translateY(0) scale(1); } } /* 2) Loslassen: Absprung mit Squash & Stretch, Salto, Landung; danach Hüpf-Schleife */ .app-ptr.is-drop .b-pose { transform: none; transition: transform .16s ease-out; } .app-ptr.is-drop .b-jump { animation: appBechiJump .62s cubic-bezier(.3,.6,.4,1) both; } @keyframes appBechiJump { 0% { transform: translateY(0) scale(1.1, .86); } 14% { transform: translateY(2px) scale(1.18, .78); } 34% { transform: translateY(-12px) scale(.86, 1.16) rotate(0deg); } 66% { transform: translateY(-15px) scale(.96, 1.02) rotate(-360deg); } 84% { transform: translateY(1px) scale(1.16, .84) rotate(-360deg); } 100% { transform: translateY(0) scale(1) rotate(-360deg); } } .app-ptr.is-drop .b-shadow { animation: appBechiShJ .62s cubic-bezier(.3,.6,.4,1) both, appBechiShL .6s linear .62s infinite; } @keyframes appBechiShJ { 0%, 14%, 84%, 100% { transform: scale(1.15, 1); opacity: 1; } 50% { transform: scale(.55, 1); opacity: .5; } } @keyframes appBechiShL { 0%, 100% { transform: scale(1.1, 1); opacity: 1; } 50% { transform: scale(.7, 1); opacity: .55; } } .app-ptr.is-drop .spk { animation: appBechiSpark .5s cubic-bezier(.2,.8,.3,1) .1s both; } .app-ptr.is-drop .spk1 { animation-delay: .14s; } @keyframes appBechiSpark { 0% { opacity: 0; transform: translateY(14px) scaleY(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-4px) scaleY(1); } } .app-ptr.is-drop .b-loop { animation: appBechiHop .6s cubic-bezier(.4,0,.6,1) .62s infinite; } @keyframes appBechiHop { 0%, 100% { transform: translateY(0) scale(1.08, .92) rotate(0); } 30% { transform: translateY(-7px) scale(.95, 1.06) rotate(-5deg); } 50% { transform: translateY(-8px) scale(1) rotate(0); } 70% { transform: translateY(-7px) scale(.95, 1.06) rotate(5deg); } } /* Laden: Prost-Arme im Wechsel, Beine strampeln, Schaum blubbert, ^^ + Lachen bleiben */ .app-ptr.is-drop .b-arm-l { animation: appBechiArmL .6s ease-in-out .62s infinite; transform: rotate(118deg); } .app-ptr.is-drop .b-arm-r { animation: appBechiArmR .6s ease-in-out .62s infinite; transform: rotate(-118deg); } @keyframes appBechiArmL { 0%, 100% { transform: rotate(130deg); } 50% { transform: rotate(70deg); } } @keyframes appBechiArmR { 0%, 100% { transform: rotate(-70deg); } 50% { transform: rotate(-130deg); } } .app-ptr.is-drop .b-leg-l { animation: appBechiLeg .6s ease-in-out .62s infinite; } .app-ptr.is-drop .b-leg-r { animation: appBechiLeg .6s ease-in-out .92s infinite; } @keyframes appBechiLeg { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(16deg); } } .app-ptr.is-drop .b-foam circle { animation: appBechiFoam 1.2s ease-out .55s infinite; } .app-ptr.is-drop .b-foam circle:nth-child(2) { animation-delay: .85s; } .app-ptr.is-drop .b-foam circle:nth-child(3) { animation-delay: 1.15s; } @keyframes appBechiFoam { 0% { opacity: 0; transform: translateY(2px) scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-9px) scale(1.1); } } /* 3) Fertig: zwinkert, winkt, lächelt — und gleitet nach oben weg */ .app-ptr.is-done .b-eye-r { opacity: 0; transform: scaleY(.2); } .app-ptr.is-done .b-wink { opacity: 1; } .app-ptr.is-done .b-m-o { opacity: 0; } .app-ptr.is-done .b-m-smile { opacity: 1; } .app-ptr.is-done .b-arm-l { transform: rotate(18deg); } .app-ptr.is-done .b-arm-r { animation: appBechiWave .5s ease-in-out 2 both; } @keyframes appBechiWave { 0%, 100% { transform: rotate(-120deg); } 50% { transform: rotate(-150deg); } } .app-ptr.is-done .b-pose { animation: appBechiDone .5s cubic-bezier(.3,1.5,.5,1) both; } @keyframes appBechiDone { 0% { transform: scale(1.08, .92); } 45% { transform: translateY(-3px) scale(.96, 1.05) rotate(4deg); } 100% { transform: rotate(4deg); } } /* Reduzierte Bewegung: statisches Bechi im Chip, Fortschritt über den Ring */ html.bpm-app-html .app-ptr-in { display: none; } html.bpm-app-html .app-ptr.rm { width: 52px; height: 52px; margin-left: -26px; transition: opacity .2s !important; } html.bpm-app-html .app-ptr.rm .app-ptr-in { display: block; position: absolute; inset: 0; border-radius: 50%; background: var(--c-card, #fff); border: 1px solid var(--glass-border, rgba(0,0,0,.08)); box-shadow: 0 8px 22px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.35) inset; } html.bpm-app-html .app-ptr-ring { position: absolute; inset: -1px; width: 54px; height: 54px; transform: rotate(-90deg); overflow: visible; } html.bpm-app-html .app-ptr-ring circle { fill: none; stroke-width: 3; stroke-linecap: round; } html.bpm-app-html .app-ptr-ring .trk { stroke: var(--c-border, rgba(0,0,0,.1)); opacity: .7; } html.bpm-app-html .app-ptr-ring .arc { stroke: var(--c-primary, #b41717); stroke-dasharray: 125.66; stroke-dashoffset: calc(125.66 - var(--p) * 125.66); } html.bpm-app-html .app-ptr.rm.is-drop .app-ptr-ring .arc { stroke-dashoffset: 40; } html.bpm-app-html .app-ptr.rm.is-done .app-ptr-ring .arc { stroke: #34c759; stroke-dashoffset: 0; } html.bpm-app-html .app-ptr.rm .app-ptr-bechi { left: 11px; top: 7px; width: 30px; height: 36.4px; } html.bpm-app-html .app-ptr.rm .app-ptr-bechi, html.bpm-app-html .app-ptr.rm .app-ptr-bechi * { animation: none !important; transition: none !important; } html.bpm-app-html .app-ptr.rm .b-pose, html.bpm-app-html .app-ptr.rm .b-arm, html.bpm-app-html .app-ptr.rm .b-face { transform: none !important; } html.bpm-app-html .app-ptr.rm .b-shadow, html.bpm-app-html .app-ptr.rm .b-sparks, html.bpm-app-html .app-ptr.rm .b-foam { display: none; } /* --------------------------------------------------------------------- Sheets (gemeinsame Optik): Profil/"Mehr", Team-Karte, Vergleich, Musik --------------------------------------------------------------------- */ body.bpm-app .app-sheet-pos { align-items: flex-end !important; justify-content: center !important; padding: calc(var(--app-hdr-hs) + 8px) 0 0 !important; } body.bpm-app .app-sheet-card { max-width: var(--app-col) !important; width: 100% !important; max-height: 92vh !important; border-radius: 26px 26px 0 0 !important; margin: 0 !important; background: var(--c-bg) !important; border: 0 !important; box-shadow: var(--app-sh-lg) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; opacity: 1 !important; transform: translateY(105%) !important; transition: transform .45s var(--app-ease) !important; padding-bottom: env(safe-area-inset-bottom, 0px); overscroll-behavior: contain; } body.bpm-app .is-open > .app-sheet-pos .app-sheet-card, body.bpm-app .is-open .app-sheet-card { transform: translateY(0) !important; } body.bpm-app .app-sheet-card::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--app-line); margin: 10px auto 4px; flex: none; } body.bpm-app #team-ov-close { display: none !important; } body.bpm-app .app-sheet-x { position: absolute; top: 12px; right: 12px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--app-fill); color: var(--c-text); } /* Profil / "Mehr" (#avq-overlay) */ body.bpm-app #avq-card { gap: 12px !important; padding: 0 16px 20px; overflow-y: auto; max-width: var(--app-col) !important; } body.bpm-app #avq-card > * { flex: none; } body.bpm-app .avq-head { display: flex; align-items: center; gap: 8px; padding: 0 0 2px; } body.bpm-app .avq-head h2 { flex: 1; margin: 0; font: 400 21px/1.2 var(--font); color: var(--c-text); } body.bpm-app .avq-head .app-sheet-x { position: static; } body.bpm-app #avq-peek { background: linear-gradient(140deg, var(--c-primary), var(--c-primary-dark)) !important; border: 0 !important; color: #fff; border-radius: 22px !important; box-shadow: 0 10px 28px color-mix(in srgb, var(--c-primary-dark) 30%, transparent) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 16px !important; flex-direction: row !important; align-items: center !important; gap: 14px !important; text-align: left !important; } body.bpm-app #avq-peek #avq-avatar-wrap { width: 58px !important; height: 58px !important; border: 2px solid rgba(255,255,255,.85) !important; flex: none; margin: 0 !important; } body.bpm-app #avq-peek #avq-name { color: #fff !important; text-align: left !important; font-size: 20px !important; } body.bpm-app #avq-peek #avq-sub { color: rgba(255,255,255,.85) !important; text-align: left !important; font-size: 13px !important; } body.bpm-app #avq-peek .avq-peek-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } body.bpm-app #avq-peek #avq-stats { margin-top: 4px; } body.bpm-app #avq-peek #avq-corner button { background: rgba(255,255,255,.18) !important; color: #fff !important; border-color: rgba(255,255,255,.3) !important; top: 10px !important; } body.bpm-app #avq-peek #avq-cover, body.bpm-app #avq-peek #avq-scrim { display: none !important; } body.bpm-app #avq-peek.is-guest { background: var(--c-card) !important; color: var(--c-text); flex-direction: column !important; text-align: center !important; box-shadow: var(--app-sh) !important; padding: 22px 18px 18px !important; } body.bpm-app .avq-guest-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--app-fill); color: var(--c-text-2); } body.bpm-app .avq-guest-t { font: 400 20px/1.2 var(--font); color: var(--c-text); } body.bpm-app .avq-guest-s { font-size: 14px; color: var(--c-text-2); line-height: 1.45; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } body.bpm-app #avq-highlight > div { border-radius: 20px !important; background: var(--c-card) !important; border-color: var(--app-line) !important; box-shadow: var(--app-sh) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } body.bpm-app #avq-tiles > div { gap: 10px !important; } body.bpm-app #avq-tiles > div > div { background: var(--c-card) !important; border: 0 !important; border-radius: 18px !important; box-shadow: var(--app-sh) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; min-height: 92px; color: var(--c-text) !important; transition: transform .2s var(--app-spring); } body.bpm-app #avq-tiles > div > div:active { transform: scale(.96); } body.bpm-app #avq-actions { background: var(--c-card) !important; border: 0 !important; border-radius: 18px !important; box-shadow: var(--app-sh) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } body.bpm-app #avq-actions > div { min-height: 56px; padding: 8px 14px !important; border-bottom-color: var(--app-line) !important; font-weight: 400 !important; font-size: 15px !important; } body.bpm-app #avq-actions > div:active { background: var(--app-fill2); } body.bpm-app .avq-li-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--app-fill); color: var(--app-red-t); } body.bpm-app .avq-li-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } body.bpm-app .avq-li-txt small { font-size: 12.5px; color: var(--c-text-2); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.bpm-app .avq-li-chev { color: var(--c-text-2); flex: none; } body.bpm-app #avq-danger button { border-radius: 16px !important; min-height: 48px; background: color-mix(in srgb, var(--c-primary) 10%, transparent) !important; color: var(--app-red-t) !important; font-weight: 400 !important; } body.bpm-app .avq-fb { display: none; padding: 4px 14px 14px; } body.bpm-app .avq-fb.on { display: block; animation: appRise .35s var(--app-ease) backwards; } body.bpm-app .avq-fb textarea { width: 100%; min-height: 96px; resize: none; border: 0; outline: 0; border-radius: 14px; padding: 12px 14px; background: var(--c-bg); color: var(--c-text); font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; box-shadow: inset 0 0 0 1px var(--app-line); } body.bpm-app .avq-fb textarea:focus { box-shadow: inset 0 0 0 2px var(--c-primary); } body.bpm-app .avq-foot { text-align: center; font-size: 12.5px; color: var(--c-text-2); } /* Team-Karte & Vergleich als Bottom-Sheet */ body.bpm-app #team-ov-card { overflow-y: auto !important; } body.bpm-app #tcmp-card { overflow-y: auto !important; padding: 0 18px 22px !important; } body.bpm-app .app-cmp { margin: 14px 0 4px; } body.bpm-app .app-cmp-row { margin: 12px 0; } body.bpm-app .app-cmp-lab { display: flex; justify-content: space-between; align-items: baseline; font: 15px/1 var(--font); color: var(--c-text); margin-bottom: 6px; } body.bpm-app .app-cmp-lab span { color: var(--c-text-2); font: 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: .04em; text-transform: uppercase; } body.bpm-app .app-cmp-lab b { font-weight: 400; } body.bpm-app .app-cmp-lab b.w { color: var(--app-ok); } body.bpm-app .app-cmp-bar { display: flex; gap: 3px; height: 10px; } body.bpm-app .app-cmp-bar > div { flex: 1; border-radius: 5px; background: var(--app-fill); overflow: hidden; display: flex; } body.bpm-app .app-cmp-bar > div:first-child { justify-content: flex-end; } body.bpm-app .app-cmp-bar i { display: block; height: 100%; border-radius: 5px; transform-origin: right center; transform: scaleX(0); transition: transform .9s var(--app-ease); } body.bpm-app .app-cmp-bar > div:last-child i { transform-origin: left center; } body.bpm-app .app-cmp.go .app-cmp-bar i { transform: scaleX(1); } /* Badge-Tipp/Popups bekommen die Rundungen des neuen Designs */ body.bpm-app #badge-tip-card { border-radius: 20px !important; } /* --------------------------------------------------------------------- START (Feed) --------------------------------------------------------------------- */ body.bpm-app.app-page-start .tab-switcher { display: none; } body.bpm-app.app-page-teams .tab-btn[onclick*="Seite1"] { display: none; } body.bpm-app .app-live-list { display: flex; flex-direction: column; gap: 10px; margin: 0 16px 6px; } body.bpm-app .app-lcard { display: block; text-decoration: none; color: var(--c-text); background: var(--c-card); border-radius: 20px; padding: 12px 14px; box-shadow: var(--app-sh), inset 0 0 0 1.5px color-mix(in srgb, var(--c-primary) 45%, transparent); transition: transform .2s var(--app-spring); } body.bpm-app .app-lcard:active { transform: scale(.98); } body.bpm-app .app-lcard.is-pend { box-shadow: var(--app-sh); } body.bpm-app .app-lcard-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; color: var(--c-text-2); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } body.bpm-app .app-lcard-h .sp { flex: 1; } body.bpm-app .app-live-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--c-primary); color: #fff; font: 12px/1 var(--font); letter-spacing: .6px; } body.bpm-app .app-live-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: appPulse 1.4s ease-out infinite; } body.bpm-app .app-live-pill.pend { background: color-mix(in srgb, var(--c-gold) 28%, transparent); color: var(--c-gold-text); } body.bpm-app .app-live-pill.pend::before { display: none; } @keyframes appPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.9); } 70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } 100% { box-shadow: none; } } body.bpm-app .app-lrow { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; min-height: 44px; } body.bpm-app .app-lrow .nm { font: 16px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.bpm-app .app-tav { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; flex: none; color: #fff; font: 13px/1 var(--font); background-size: cover; background-position: center; } /* Ergebnis-Kacheln (Variante A): je Team ein Kästchen in Becherfarbe (rot = links/oben, blau = rechts/unten) mit weißer Ziffer — lesbar auf heller, dunkler und roter Fläche */ body.bpm-app .app-sc { min-width: 40px; height: 36px; padding: 0 8px; border-radius: 11px; display: inline-grid; place-items: center; font: 22px/1 var(--font); color: #fff; font-variant-numeric: tabular-nums; background: var(--app-cup-red); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 2px 6px rgba(0,0,0,.15); } body.bpm-app .app-sc.b { background: var(--app-cup-blue); } body.bpm-app .app-sc.win { background: var(--c-gold); color: #3a2a00; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); } body.bpm-app .app-sc.lose { opacity: .55; } body.bpm-app .app-sc.pend { color: var(--c-text-2); background: var(--app-fill); box-shadow: none; } body.bpm-app .app-sc.bump { animation: appBump .6s var(--app-spring); } @keyframes appBump { 30% { transform: scale(1.35); } } body.bpm-app .app-npbar { display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); margin: 0 16px 12px; padding: 10px 12px; min-height: 60px; border-radius: 18px; background: var(--c-card); box-shadow: var(--app-sh); border: 0; text-align: left; cursor: pointer; color: var(--c-text); } body.bpm-app .app-npbar[hidden] { display: none; } body.bpm-app .app-npbar .grow { flex: 1; min-width: 0; } /* langer Songtitel darf den Balken nicht über den Rand schieben (Handy 384 px) */ body.bpm-app .app-npbar .app-btn { flex: none; } body.bpm-app { overflow-x: clip; } body.bpm-app .app-vinyl { width: 40px; height: 40px; border-radius: 50%; flex: none; background: radial-gradient(circle, var(--c-primary) 0 18%, #111 19% 22%, #222 23% 40%, #111 41% 43%, #2a2a2a 44% 100%); animation: appSpin 3.5s linear infinite; } @keyframes appSpin { to { transform: rotate(360deg); } } body.bpm-app .app-npbar b { display: block; font: 15px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.bpm-app .app-npbar .grow span { font-size: 12.5px; color: var(--c-text-2); } body.bpm-app .app-push .app-row { align-items: flex-start; } body.bpm-app .app-push-acts { display: flex; gap: 10px; margin-top: 12px; } /* Feed-Karten im neuen Kartenstil */ body.bpm-app #feed-list { padding: 0 16px; } body.bpm-app #feed-list > .card { margin: 0 0 14px; border-radius: 22px; border: 0 !important; box-shadow: var(--app-sh); } body.bpm-app #feed-list > .card[data-pinned="1"] { box-shadow: var(--app-sh), inset 0 0 0 2px color-mix(in srgb, var(--c-gold) 60%, transparent); } body.bpm-app #feed-list > .card [data-emoji], body.bpm-app #feed-list > .card [data-comment-btn] { min-height: 36px; border-radius: 999px !important; padding: 0 12px !important; transition: background .2s, transform .2s var(--app-spring) !important; } body.bpm-app #feed-list > .card [data-emoji]:active { transform: scale(.92); } body.bpm-app [data-emoji].app-pop > span:first-child { display: inline-block; animation: appPop .5s var(--app-spring); } @keyframes appPop { 40% { transform: scale(1.7) rotate(-12deg); } } body.bpm-app .poll-bar { transform-origin: left center; animation: appBar .8s var(--app-ease) backwards; } @keyframes appBar { from { transform: scaleX(0); } } body.bpm-app [data-poll-opt] { border-radius: 12px !important; min-height: 46px; } body.bpm-app .app-fab-post { position: fixed; z-index: 90; right: max(16px, var(--bpm-sar)); bottom: calc(var(--nav-h) + 14px); display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 20px; border-radius: 25px; border: 0; cursor: pointer; background: var(--c-primary); color: #fff; font: 16px/1 var(--font); box-shadow: 0 10px 26px color-mix(in srgb, var(--c-primary) 40%, transparent); transition: transform .3s var(--app-spring), opacity .3s; } body.bpm-app .app-fab-post:active { transform: scale(.94); } html.app-scrolled body.bpm-app .app-fab-post { transform: translateY(0); } body.bpm-app:not(.app-page-start) .app-fab-post { opacity: 0; pointer-events: none; transform: scale(.6); } /* --------------------------------------------------------------------- TEAMS --------------------------------------------------------------------- */ body.bpm-app .app-search { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; margin: 4px 16px 10px; border-radius: 14px; background: var(--c-card); box-shadow: var(--app-sh); color: var(--c-text-2); } body.bpm-app .app-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--c-text); font: 16px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } body.bpm-app .app-chips { display: flex; gap: 8px; padding: 0 16px 12px; overflow-x: auto; scrollbar-width: none; } body.bpm-app .app-chips::-webkit-scrollbar { display: none; } body.bpm-app .app-chip { flex: none; height: 38px; padding: 0 15px; border-radius: 999px; border: 0; cursor: pointer; background: var(--c-card); box-shadow: inset 0 0 0 1px var(--app-line); color: var(--c-text); font: 14px/1 var(--font); white-space: nowrap; transition: background .2s, color .2s, transform .2s var(--app-spring); } body.bpm-app .app-chip:active { transform: scale(.95); } body.bpm-app .app-chip.on { background: var(--c-text); color: var(--c-bg); box-shadow: none; } body.bpm-app .app-tlist { padding: 0 16px; } body.bpm-app .app-trow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 68px; padding: 10px 12px 10px 14px; margin-bottom: 8px; border-radius: 18px; background: var(--c-card); box-shadow: var(--app-sh); border: 0; text-align: left; cursor: pointer; color: var(--c-text); transition: transform .2s var(--app-spring), opacity .25s; } body.bpm-app .app-trow:active { transform: scale(.98); } body.bpm-app .app-trow[hidden] { display: none; } body.bpm-app .app-trow .app-tav { width: 46px; height: 46px; font-size: 16px; } body.bpm-app .app-trow .grow { flex: 1; min-width: 0; } body.bpm-app .app-trow b { display: block; font: 400 16px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.bpm-app .app-trow small { display: block; font-size: 13px; color: var(--c-text-2); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.bpm-app .app-trow .bdg { display: flex; gap: 2px; font-size: 16px; flex: none; } body.bpm-app .app-trow .bdg span { cursor: pointer; padding: 2px; } body.bpm-app .app-chip { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; } body.bpm-app .app-chip .app-dir { font-style: normal; font-size: 13px; line-height: 1; opacity: .85; } body.bpm-app .app-chip[aria-pressed="true"][data-f] { background: var(--c-gold); color: #3a2a00; box-shadow: none; } body.bpm-app .app-tf-lbl { padding: 0 18px 4px; font: 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-2); } body.bpm-app .app-tmeta { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 18px; font-size: 13px; color: var(--c-text-2); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } body.bpm-app .app-tlink { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--c-primary); font: 600 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; cursor: pointer; } body.bpm-app .app-tlink[hidden] { display: none; } body.bpm-app .app-trow .app-mx { display: inline-block; margin-top: 4px; padding: 3px 8px; border-radius: 999px; font: 600 11.5px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: color-mix(in srgb, var(--c-gold) 24%, transparent); color: var(--c-gold-text); } body.bpm-app .app-trow .app-mx[hidden] { display: none; } body.bpm-app .app-empty .app-treset2 { margin-top: 12px; } body.bpm-app .app-tftoggle { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 16px 6px; padding: 0 14px; border: 0; border-radius: 14px; cursor: pointer; background: var(--c-card); box-shadow: var(--app-sh); color: var(--c-text); font: 15px/1 var(--font); text-align: left; } body.bpm-app .app-tftoggle .app-tfarrow { margin-left: auto; color: var(--c-text-2); transition: transform .3s var(--app-ease, ease); } body.bpm-app .app-tftoggle.open .app-tfarrow { transform: rotate(180deg); } body.bpm-app .app-tfbadge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--c-gold); color: #3a2a00; font: 700 12px/22px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-align: center; box-sizing: border-box; } body.bpm-app .app-tfbadge[hidden] { display: none; } body.bpm-app .app-tpanel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; } body.bpm-app .app-tpanel.open { grid-template-rows: 1fr; } body.bpm-app .app-tpanel-in { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s .3s; padding-top: 6px; margin-top: -6px; } body.bpm-app .app-tpanel.open .app-tpanel-in { visibility: visible; transition-delay: 0s; } body.bpm-app .app-oldc[hidden] { display: none !important; } body.bpm-app .app-tgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 10px; padding: 6px 12px 8px; } body.bpm-app .app-tgrid > .app-empty { grid-column: 1 / -1; } body.bpm-app .app-oldc { -webkit-tap-highlight-color: transparent; transition: transform .2s var(--app-spring, ease), opacity .25s; } body.bpm-app .app-oldc:active { transform: scale(.98); } body.bpm-app .app-oldc:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; } /* Team-Kacheln (aktiv + inaktiv): überall exakt gleiche Außenmaße; Inhalt sitzt in festen Slots und wird gekürzt, nie größer */ body.bpm-app .app-oldc { position: relative; box-sizing: border-box; height: 180px; min-width: 0; overflow: hidden; cursor: pointer; border-radius: 18px; border: 3px solid transparent; border-top-color: var(--tc); background: var(--c-card); box-shadow: 0 2px 10px rgba(0,0,0,.08); } body.bpm-app .app-oldc.has-foto { border-color: var(--tc); background: #222; box-shadow: 0 2px 12px rgba(0,0,0,.18); } body.bpm-app .app-oldc .tl-img { position: absolute; inset: 0; width: 100%; height: 100%; } body.bpm-app .app-oldc .tl-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.3) 0%, rgba(0,0,0,.8) 100%); } body.bpm-app .app-oldc .tl-in { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; height: 100%; padding: 10px 8px 0; box-sizing: border-box; min-width: 0; } body.bpm-app .app-oldc > * { min-width: 0; } body.bpm-app .app-oldc .tl-av { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--tc); display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 700; color: #fff; line-height: 1; } body.bpm-app .app-oldc.has-foto .tl-av { background: none; } body.bpm-app .app-oldc .tl-chips { flex: none; height: 22px; margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 4px; overflow: hidden; max-width: 100%; } body.bpm-app .app-oldc .tl-chip { flex: none; cursor: pointer; font-size: 10px; line-height: 14px; padding: 1px 5px; border-radius: 7px; font-weight: 700; white-space: nowrap; } body.bpm-app .app-oldc .tl-chip.g { background: rgba(252,194,0,.15); color: #b8860b; border: 1px solid rgba(252,194,0,.4); } body.bpm-app .app-oldc .tl-chip.v { background: rgba(162,132,94,.15); color: #a2845e; border: 1px solid rgba(162,132,94,.35); } body.bpm-app .app-oldc.has-foto .tl-chip.g { background: rgba(252,194,0,.25); color: #fcc200; border-color: rgba(252,194,0,.5); } body.bpm-app .app-oldc .tl-nm, body.bpm-app .app-oldc .tl-mem, body.bpm-app .app-oldc .tl-meta { flex: none; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.bpm-app .app-oldc .tl-nm { height: 20px; line-height: 20px; font-size: clamp(12px, 3.6vw, 15px); font-weight: 700; color: var(--c-text); } body.bpm-app .app-oldc .tl-mem, body.bpm-app .app-oldc .tl-meta { height: 16px; line-height: 16px; font-size: clamp(10px, 2.8vw, 12px); color: var(--c-text-2); } body.bpm-app .app-oldc.has-foto .tl-nm { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); } body.bpm-app .app-oldc.has-foto .tl-mem, body.bpm-app .app-oldc.has-foto .tl-meta { color: rgba(255,255,255,.78); } body.bpm-app .app-oldc .tl-mxw { flex: none; height: 24px; width: 100%; display: flex; align-items: center; justify-content: center; margin-top: 2px; overflow: hidden; } body.bpm-app .app-oldc .app-mx { display: inline-block; max-width: 100%; margin: 0; padding: 3px 8px; border-radius: 999px; font: 600 11.5px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, var(--c-gold) 24%, transparent); color: var(--c-gold-text); } body.bpm-app .app-oldc .app-mx[hidden] { display: none; } body.bpm-app .app-oldc.has-foto .app-mx { background: rgba(0,0,0,.45); color: #FCC200; } @media (prefers-reduced-motion: reduce) { body.bpm-app .app-tpanel, body.bpm-app .app-tftoggle .app-tfarrow { transition: none; } } body.bpm-app .app-chev { color: var(--c-text-2); flex: none; } body.bpm-app .app-empty { text-align: center; color: var(--c-text-2); padding: 24px 16px; font-size: 14px; } body.bpm-app #Seite3 .coll-hdr { margin: 8px 0 0; padding: 10px 16px 6px; font-weight: 400; letter-spacing: .06em; } /* --------------------------------------------------------------------- TURNIER --------------------------------------------------------------------- */ /* Spielkarten: Rundungen + Schatten, Live-Rahmen */ body.bpm-app .match-card { border-radius: 18px; box-shadow: var(--app-sh); border-color: transparent; } body.bpm-app .match-card.is-live { box-shadow: var(--app-sh), inset 0 0 0 1.5px color-mix(in srgb, var(--c-primary) 50%, transparent); } /* Tabelle: Top-2 gold + HF-Marker; Zeilen gleiten bei Positionswechsel (common.js FLIP) */ body.bpm-app .app-q-mark { display: inline-block; margin-left: 6px; padding: 3px 6px; border-radius: 6px; vertical-align: 2px; font: 10.5px/1 var(--font); background: color-mix(in srgb, var(--c-gold) 22%, transparent); color: var(--c-gold-text); } body.bpm-app .app-legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 0 16px 12px; font-size: 12.5px; color: var(--c-text-2); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } body.bpm-app .app-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c-gold); margin-right: 5px; vertical-align: -1px; } /* KO-Bracket */ body.bpm-app .app-ko { padding: 0 16px; } body.bpm-app .app-bracket { display: grid; grid-template-columns: minmax(0,1fr) 30px minmax(0,1fr); align-items: center; } body.bpm-app .app-bcol { display: flex; flex-direction: column; gap: 46px; min-width: 0; } body.bpm-app .app-bcol.one { gap: 0; } body.bpm-app .app-bm { background: var(--c-card); border-radius: 16px; box-shadow: var(--app-sh); padding: 8px 10px; position: relative; min-width: 0; cursor: pointer; } body.bpm-app .app-bm .lbl { font: 11.5px/1 var(--font); color: var(--c-text-2); margin: 2px 2px 6px; display: flex; align-items: center; gap: 6px; } body.bpm-app .app-bm.is-live { box-shadow: var(--app-sh), inset 0 0 0 1.5px color-mix(in srgb, var(--c-primary) 55%, transparent); } body.bpm-app .app-bt { display: flex; align-items: center; gap: 8px; min-height: 36px; font: 14px/1.1 var(--font); color: var(--c-text); } body.bpm-app .app-bt .app-tav { width: 24px; height: 24px; font-size: 10px; } body.bpm-app .app-bt .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.bpm-app .app-bt .sc { font-variant-numeric: tabular-nums; min-width: 18px; text-align: right; } body.bpm-app .app-bt.l { opacity: .45; } body.bpm-app .app-bt.tbd .nm { color: var(--c-text-2); } body.bpm-app .app-bt.w .sc { color: var(--c-gold-text); } body.bpm-app .app-bconn { height: 180px; position: relative; } body.bpm-app .app-bconn svg { width: 100%; height: 100%; overflow: visible; } body.bpm-app .app-bconn path { fill: none; stroke: var(--app-line); stroke-width: 2; } body.bpm-app .app-bconn path.lit { stroke: var(--c-gold); stroke-dasharray: 200; stroke-dashoffset: 200; animation: appDraw .9s var(--app-ease) forwards .2s; } @keyframes appDraw { to { stroke-dashoffset: 0; } } body.bpm-app .app-bm.final { box-shadow: var(--app-sh), 0 0 0 6px color-mix(in srgb, var(--c-gold) 12%, transparent), inset 0 0 0 2px color-mix(in srgb, var(--c-gold) 60%, transparent); } body.bpm-app .app-bm.final .lbl { color: var(--c-gold-text); } body.bpm-app .app-trophy { display: grid; place-items: center; margin: 0 auto 6px; color: var(--c-gold); animation: appTrophy .9s var(--app-spring) backwards .3s; } @keyframes appTrophy { from { transform: translateY(20px) scale(.4) rotate(-15deg); opacity: 0; } } body.bpm-app .app-ko-note { font-size: 13px; color: var(--c-text-2); margin: 14px 4px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } body.bpm-app .app-ko-champ { text-align: center; margin: 16px 0 6px; } body.bpm-app .app-ko-champ b { display: block; font: 400 24px/1.2 var(--font); color: var(--c-text); } body.bpm-app .app-ko-champ span { font-size: 12px; letter-spacing: 2px; color: var(--c-gold-text); font-family: var(--font); } /* --------------------------------------------------------------------- REGELN --------------------------------------------------------------------- */ body.bpm-app .app-rc { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 8px; scrollbar-width: none; overscroll-behavior-x: contain; } body.bpm-app .app-rc::-webkit-scrollbar { display: none; } body.bpm-app .app-rcard { flex: 0 0 calc(100% - 24px); scroll-snap-align: center; background: var(--c-card); border-radius: 24px; box-shadow: var(--app-sh); overflow: hidden; transition: transform .35s var(--app-ease), opacity .35s; } body.bpm-app .app-rcard.off { transform: scale(.95); opacity: .55; } body.bpm-app .app-rimg { height: 190px; background: #2a1a1f center/cover no-repeat; position: relative; } body.bpm-app .app-rimg .bdg { position: absolute; left: 12px; top: 12px; height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font: 13px/28px var(--font); } body.bpm-app .app-rbody { padding: 14px 16px 16px; } body.bpm-app .app-rbody h3 { margin: 0; font: 400 22px/1.2 var(--font); color: var(--c-text); } body.bpm-app .app-rbody p { margin: 8px 0 14px; min-height: 66px; color: var(--c-text); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } body.bpm-app .app-rplay { display: flex; align-items: center; gap: 12px; } body.bpm-app .app-prog { flex: 1; height: 6px; border-radius: 3px; background: var(--app-fill); overflow: hidden; } body.bpm-app .app-prog i { display: block; height: 100%; width: 100%; background: var(--c-primary); border-radius: 3px; transform-origin: left center; transform: scaleX(0); } body.bpm-app .app-rnav { display: flex; align-items: center; justify-content: space-between; margin: 6px 16px 4px; } body.bpm-app .app-rnav .app-ibtn { background: var(--c-card); box-shadow: var(--app-sh); color: var(--c-text); } body.bpm-app .app-rnav .app-ibtn:disabled { opacity: .35; } body.bpm-app .app-rdots { display: flex; gap: 5px; } body.bpm-app .app-rdots i { width: 7px; height: 7px; border-radius: 4px; background: var(--app-line); transition: transform .3s var(--app-spring), background .3s; } body.bpm-app .app-rdots i.on { background: var(--c-primary); transform: scaleX(2.6); margin: 0 7px; } body.bpm-app .app-rlist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 16px; } body.bpm-app .app-rlist button { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 12px; border-radius: 14px; border: 0; cursor: pointer; background: var(--c-card); box-shadow: var(--app-sh); text-align: left; color: var(--c-text); font: 14px/1.15 var(--font); transition: transform .2s var(--app-spring); } body.bpm-app .app-rlist button:active { transform: scale(.96); } body.bpm-app .app-rlist button.on { box-shadow: var(--app-sh), inset 0 0 0 1.5px var(--c-primary); } body.bpm-app .app-rlist small { color: var(--c-text-2); font: 11px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; display: block; margin-bottom: 3px; } body.bpm-app .app-rall { display: flex; align-items: center; gap: 12px; } /* --------------------------------------------------------------------- Breite Bildschirme: Inhalt mittig, Leisten bleiben vollbreit --------------------------------------------------------------------- */ @media (min-width: 700px) { body.bpm-app .app-hdr { padding-left: calc((100vw - var(--app-col)) / 2 + 14px); padding-right: calc((100vw - var(--app-col)) / 2 + 12px); } body.bpm-app #feed-list, body.bpm-app .app-live-list, body.bpm-app .app-tlist, body.bpm-app .app-rlist { width: 100%; box-sizing: border-box; max-width: var(--app-col); margin-left: auto; margin-right: auto; } body.bpm-app .app-sec-h { max-width: var(--app-col); margin-left: auto; margin-right: auto; box-sizing: border-box; padding: 0 16px; } body.bpm-app .app-sec-h, body.bpm-app .app-card, body.bpm-app .app-npbar { max-width: var(--app-col); } } /* Tablet quer (>= 900 px): Inhalt bleibt in einer lesbaren Spalte, Karten dürfen mehr Platz nutzen */ @media (min-width: 900px) and (orientation: landscape) { body.bpm-app { --app-col: 640px; } } /* --------------------------------------------------------------------- Bewegung reduzieren --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { body.bpm-app *, body.bpm-app *::before, body.bpm-app *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } body.bpm-app .app-cmp-bar i, body.bpm-app .app-bconn path.lit { transform: none; stroke-dashoffset: 0; } } /* Tabelle (turnier.php): direkte KO-Plätze gold statt rosa, mit Stufen-Marker (HF/F/VF) */ body.bpm-app .standings-card { border-radius: 20px; box-shadow: var(--app-sh); } body.bpm-app .standings-row.rank-1-row, body.bpm-app .standings-row.rank-2-row { background: color-mix(in srgb, var(--c-gold) 9%, transparent); position: relative; } body.bpm-app .standings-row.rank-1-row .rank-num, body.bpm-app .standings-row.rank-2-row .rank-num { color: var(--c-gold-text); font-weight: 400; } body.bpm-app #Seite2 .standings-row.rank-1-row::before, body.bpm-app #Seite2 .standings-row.rank-2-row::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--c-gold); } body.bpm-app #Seite2 .standings-row.rank-1-row .rank-num::after, body.bpm-app #Seite2 .standings-row.rank-2-row .rank-num::after { content: var(--app-q, none); display: block; margin-top: 2px; padding: 2px 4px; border-radius: 5px; font: 9.5px/1 var(--font); background: color-mix(in srgb, var(--c-gold) 24%, transparent); color: var(--c-gold-text); } body.bpm-app .standings-row.app-up { animation: appUp 1.4s ease-out; } @keyframes appUp { 0%, 40% { background-color: color-mix(in srgb, var(--c-success) 22%, transparent); } } /* --------------------------------------------------------------------- Spielstand klar lesbar (Variante A, Besitzerwunsch Okt. 2026): je Team eine Kachel in Becherfarbe (rot #e3262b = Team 1/links, blau #2f6ff2 = Team 2/rechts) mit weißer Ziffer und weißem Rand. Weiß auf Rot ≈ 4,4:1, auf Blau ≈ 4,6:1 (große Schrift ≥ 3:1 erfüllt). Seite + Farbe + Position unterscheiden die Teams; Gold nur für den Sieger. --------------------------------------------------------------------- */ body.bpm-app .app-sc-pair { display: inline-flex; gap: 4px; flex: none; } body.bpm-app .app-sc.sm { min-width: 30px; height: 28px; font-size: 16px; border-radius: 8px; padding: 0 6px; } body.bpm-app .lt-score { gap: 10px; } body.bpm-app .lt-score .n { min-width: 62px; height: 60px; padding: 0 8px; border-radius: 16px; display: inline-grid; place-items: center; color: #fff; background: var(--app-cup-red); box-shadow: inset 0 0 0 2.5px rgba(255,255,255,.92), 0 6px 16px rgba(0,0,0,.25); } body.bpm-app .lt-score .n:last-child { background: var(--app-cup-blue); } body.bpm-app .lt-score .n.zero { color: var(--app-cup-red); background: #fff; } body.bpm-app .lt-score .n.zero:last-child { color: var(--app-cup-blue); } body.bpm-app .lt-score .c { opacity: .8; } body.bpm-app .lt-fin .lt-score .n { color: #fff; } body.bpm-app .match-score[data-score], body.bpm-app .live-score[data-score] { min-width: 32px; height: 30px; padding: 0 6px; border-radius: 9px; display: inline-grid; place-items: center; color: #fff !important; text-shadow: none !important; font-style: normal !important; font-size: 17px; background: var(--app-cup-red); box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); } body.bpm-app .match-score[data-score="2"], body.bpm-app .live-score[data-score="2"] { background: var(--app-cup-blue); } body.bpm-app .match-score[data-score].winner, body.bpm-app .live-score[data-score].winner { background: var(--c-gold); color: #3a2a00 !important; } body.bpm-app .match-score[data-score].pending { background: var(--app-fill); color: var(--c-text-2) !important; box-shadow: none; } body.bpm-app .match-score[data-score].score-unconfirmed, body.bpm-app .live-score[data-score].score-unconfirmed { box-shadow: inset 0 0 0 2px var(--c-gold); } @media (max-width: 374px) { body.bpm-app .lt-score { gap: 6px; font-size: 32px; } body.bpm-app .lt-score .n { min-width: 50px; height: 50px; border-radius: 13px; padding: 0 6px; } } /* Schwebende Aktions-Knöpfe (+ Beitrag, Team bearbeiten): genug Platz unten, damit der letzte Inhalt über sie hinaus scrollen kann und nichts dauerhaft verdeckt bleibt */ body.bpm-app:has(.app-fab-post), body.bpm-app:has(.btn-edit-float) { padding-bottom: calc(var(--nav-h) + 84px); } /* Tap-Ziele ≥ 44 px ohne das Layout zu verändern */ body.bpm-app .app-mode-chip { padding: 15px 4px 15px 0; margin: -12px 0 -15px; } body.bpm-app .app-hdr-logo { width: 44px; height: 44px; display: grid; place-items: center; margin: 0 -2px; } /* --------------------------------------------------------------------- Detail-Karte eines Spiels (im Spiel-Sheet des Spiele-Reiters, #sp-store) Kopfzeile (Status · Gruppen-/KO-Chip), zwei Teamzeilen mit Ergebnis-Kacheln, Bestätigen-Zeilen, Live-Teil aus live_ticker.js. --------------------------------------------------------------------- */ body.bpm-app .match-card.mc-compact { padding: 9px 12px 6px; border-radius: 16px; border: 0; box-shadow: var(--app-sh); justify-content: flex-start; } body.bpm-app .match-card.mc-compact.is-current { box-shadow: var(--app-sh), inset 0 0 0 1.5px var(--c-primary); } body.bpm-app .match-card.mc-compact.is-live { animation: appMcPulse 2.2s ease-in-out infinite; } @keyframes appMcPulse { 50% { box-shadow: var(--app-sh), inset 0 0 0 1.5px var(--c-primary), 0 0 0 4px color-mix(in srgb, var(--c-primary) 14%, transparent); } } body.bpm-app .mc-head { display: flex; align-items: center; gap: 8px; min-height: 22px; margin-bottom: 2px; } body.bpm-app .mc-st { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; font: 11px/1 var(--font); letter-spacing: .3px; background: var(--app-fill); color: var(--c-text-2); } body.bpm-app .mc-st--live { background: var(--c-primary); color: #fff; } body.bpm-app .mc-st--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: appPulse 1.4s ease-out infinite; } body.bpm-app .mc-st--ready { background: color-mix(in srgb, var(--c-primary) 12%, transparent); color: var(--app-red-t); } body.bpm-app .mc-st--pend { background: color-mix(in srgb, var(--c-gold) 24%, transparent); color: var(--c-gold-text); } body.bpm-app .mc-st--done { background: color-mix(in srgb, var(--c-success) 15%, transparent); color: var(--app-ok); } body.bpm-app .mc-meta { flex: 1; min-width: 0; font-size: 12px; color: var(--c-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } body.bpm-app .mc-head .match-group-chip, body.bpm-app .mc-head .ko-slot-chip { position: static; transform: none; flex: none; } body.bpm-app .mc-compact .match-row { min-height: 38px; padding: 3px 0; gap: 10px; border-bottom: 0; font-size: 15px; font-weight: 400; font-family: var(--font); } body.bpm-app .mc-compact .team-pip { width: 26px; height: 26px; border: 0; border-radius: 50%; object-fit: cover; } body.bpm-app .mc-compact .rival-divider { margin: 0; padding: 0; min-height: 0; } body.bpm-app .mc-compact .rival-divider:not(:has(.rival-pill)):not(:has(.cf-panel)) { display: none; } body.bpm-app .mc-compact .mc-live-acts { padding: 6px 0 6px; } body.bpm-app .mc-compact .mc-live-btn { height: 44px; border-radius: 12px; font-weight: 400; font-family: var(--font); font-size: 13.5px; } body.bpm-app .mc-compact .cf-row { padding: 0 0 4px 36px; } body.bpm-app .match-card.bpm-score-pop .match-score { animation: appBump .6s var(--app-spring); } /* noch dichter: mehr Spiele ohne Scrollen */ body.bpm-app .mc-compact .match-row { min-height: 34px; padding: 2px 0; } body.bpm-app .mc-compact .team-pip { width: 22px; height: 22px; } body.bpm-app .mc-compact .match-score[data-score] { height: 27px; min-width: 30px; font-size: 16px; border-radius: 8px; } body.bpm-app .mc-compact .cf-row { padding-left: 32px; } /* --------------------------------------------------------------------- Spiele-Reiter (11/2026, Konzept A „Runden-Band“): oben ein goldener Satz, darunter das Band (eine Kachel je Runde), darunter NUR die Spiele der gewählten Runde als Tafeln. Laufende Spiele = ruhige rote Anzeigetafel, vorläufige Ergebnisse = gold, eigenes/gefolgtes Team = gold. Markup: _spiele_tab.php · Verhalten: spiele_tab.js --------------------------------------------------------------------- */ body.bpm-app .sp, body.bpm-app .sp-sh, body.bpm-app .sp-empty--orga { --sp-b1: #b41717; --sp-b2: #8a0e0e; --sp-bl: rgba(255,255,255,.16); --sp-bs: rgba(255,255,255,.74); --sp-gold-soft: rgba(252,194,0,.2); --sp-live: #d0192f; --sp-on-gold: #2a1d00; } body.bpm-app .sp { margin: 0 16px; min-width: 0; } @media (prefers-color-scheme: dark) { body.bpm-app .sp, body.bpm-app .sp-sh, body.bpm-app .sp-empty--orga { --sp-b1: #9e1218; --sp-b2: #4f070b; --sp-bl: rgba(255,255,255,.13); --sp-gold-soft: rgba(252,194,0,.13); --sp-live: #ff3d55; } } body.bpm-app .sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 14px; font: 17px/1.1 var(--font); cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform .2s var(--app-spring); } body.bpm-app .sp-btn:active { transform: scale(.97); } body.bpm-app .sp-btn--gold { background: var(--c-gold); color: #2a1d00; } body.bpm-app .sp-btn--red { background: var(--c-primary); color: #fff; } body.bpm-app .sp button:focus-visible, body.bpm-app .sp-sh button:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; } /* Rundenwahl + Fortschritt in EINER Zeile (v3, statt fester Leiste unten): „Runde 5 von 20 · 8 von 20 gespielt“, darunter eine Linie (rot bis zur letzten fertigen Runde) mit einem Punkt je Runde. Ab 15 Runden werden die Punkte zu Segmenten, nur die gewählte Runde trägt ihre Nummer. Jede Runde ist eine unsichtbare 44 px hohe Tap-Fläche (Tippen/Darüberstreichen). */ body.bpm-app .sp-band-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 12px 0 0; } body.bpm-app .sp-band-h b { font: 15px/1.2 var(--font); font-weight: 400; color: var(--c-text); } body.bpm-app .sp-band-h span { font-size: 12.5px; color: var(--c-text-2); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } body.bpm-app .sp-band { position: relative; display: flex; align-items: center; height: 44px; margin: 0 -4px; padding: 0 4px; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } body.bpm-app .sp-band-ln { position: absolute; left: calc(4px + (100% - 8px) / var(--n) / 2); right: calc(4px + (100% - 8px) / var(--n) / 2); top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--app-fill); overflow: hidden; pointer-events: none; } body.bpm-app .sp-band.is-seg .sp-band-ln { display: none; } body.bpm-app .sp-band.is-seg { padding: 0 10px; } /* Platz für die Nummer an der ersten/letzten Runde */ body.bpm-app .sp-band-ln > i { display: block; height: 100%; background: linear-gradient(90deg, var(--sp-b1), #d83a2a); transform-origin: 0 50%; } body.bpm-app .sp-rd { position: relative; flex: 1 1 0; min-width: 0; height: 44px; margin: 0; padding: 0; border: 0; background: none; color: var(--c-text); display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; } body.bpm-app .sp-rd > * { grid-area: 1 / 1; pointer-events: none; } body.bpm-app .sp-rd s { /* der sichtbare Punkt bzw. das Segment */ position: relative; display: block; width: 14px; height: 14px; border-radius: 50%; text-decoration: none; background: var(--c-card); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-text-2) 45%, transparent); transition: transform .25s var(--app-spring), background-color .2s; } body.bpm-app .sp-rd b { position: relative; z-index: 1; font: 13px/1 var(--font); font-weight: 400; color: #fff; font-variant-numeric: tabular-nums; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .25s var(--app-spring); } body.bpm-app .sp-rd i { position: relative; z-index: 1; font-style: normal; font-size: 9px; line-height: 1; color: #fff; } body.bpm-app .sp-rd.is-done s { background: color-mix(in srgb, var(--c-text-2) 70%, transparent); box-shadow: none; } body.bpm-app .sp-rd.is-live s { background: var(--sp-live); box-shadow: none; } body.bpm-app .sp-rd.is-live s::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--sp-live); animation: spDotPing 1.8s ease-out infinite; } @keyframes spDotPing { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(2.3); opacity: 0; } } body.bpm-app .sp-rd.is-prov s { background: var(--c-gold); box-shadow: none; } body.bpm-app .sp-rd.is-mine s { box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-gold); } body.bpm-app .sp-rd.is-open.is-mine s { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-text-2) 45%, transparent), 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-gold); } /* ausgewählt: groß und rot mit Nummer */ body.bpm-app .sp-rd.is-sel { z-index: 2; } body.bpm-app .sp-rd.is-sel s { background: linear-gradient(160deg, #c62020, var(--sp-b2)); box-shadow: 0 3px 10px rgba(138,14,14,.35); transform: scale(2); } body.bpm-app .sp-rd.is-sel.is-mine s { box-shadow: 0 3px 10px rgba(138,14,14,.35), 0 0 0 1px var(--c-bg), 0 0 0 2px var(--c-gold); } body.bpm-app .sp-rd.is-sel s::after { display: none; } body.bpm-app .sp-rd.is-sel b { opacity: 1; transform: none; } body.bpm-app .sp-rd.is-sel i { display: none; } body.bpm-app .sp-rd:focus-visible { outline: none; } body.bpm-app .sp-rd:focus-visible s { outline: 2px solid var(--c-gold); outline-offset: 3px; } /* viele Runden: Segmente statt Punkte (passt bis 30+ Runden auf 360 px), Nummer nur an der gewählten Runde */ body.bpm-app .sp-band.is-seg .sp-rd s { width: calc(100% - 2px); height: 8px; border-radius: 3px; } body.bpm-app .sp-band.is-seg .sp-rd i { display: none; } body.bpm-app .sp-band.is-seg .sp-rd.is-mine s { box-shadow: inset 0 -2.5px 0 var(--c-gold); } body.bpm-app .sp-band.is-seg .sp-rd.is-live s::after { animation: spBlink 1.6s ease-in-out infinite; } body.bpm-app .sp-band.is-seg .sp-rd.is-sel s { width: 26px; height: 24px; border-radius: 8px; transform: none; flex: none; } body.bpm-app .sp-band.is-seg .sp-rd.is-sel { overflow: visible; } body.bpm-app .sp-band.is-seg .sp-rd.is-sel s, body.bpm-app .sp-band.is-seg .sp-rd.is-sel b { position: absolute; left: 50%; top: 50%; margin: -12px 0 0 -13px; } body.bpm-app .sp-band.is-seg .sp-rd.is-sel b { width: 26px; height: 24px; line-height: 24px; text-align: center; } body.bpm-app .sp-band.is-scrub .sp-rd s, body.bpm-app .sp-band.is-scrub .sp-rd b { transition: none; } @keyframes spBlink { 50% { opacity: .3; } } /* Runde: Kopf, Tafeln, Vorschau */ body.bpm-app .sp-pan-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 10px 0 10px; } body.bpm-app .sp-pan-h h2 { margin: 0; font: 22px/1.15 var(--font); color: var(--c-text); } body.bpm-app .sp-pan-h span { font-size: 13px; color: var(--c-text-2); text-align: right; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } body.bpm-app .sp-pans { touch-action: pan-y pinch-zoom; } body.bpm-app .sp-pan { will-change: auto; } body.bpm-app .sp-pan.sp-in { animation: spIn .32s var(--app-ease) both; } body.bpm-app .sp-pan.sp-in-r { animation: spInR .3s var(--app-ease) both; } body.bpm-app .sp-pan.sp-in-l { animation: spInL .3s var(--app-ease) both; } @keyframes spIn { from { opacity: 0; transform: translateY(6px); } } @keyframes spInR { from { opacity: 0; transform: translate3d(48px, 0, 0); } } @keyframes spInL { from { opacity: 0; transform: translate3d(-48px, 0, 0); } } body.bpm-app .sp-tafs { display: grid; gap: 10px; } @media (min-width: 900px) { body.bpm-app .sp-tafs, body.bpm-app .sp-nexts { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } } /* Breitbild/TV: Tafeln nebeneinander */ body.bpm-app .sp-taf { position: relative; display: grid; grid-template-columns: var(--sp-c, 68px) minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 12px 16px 12px 10px; border-radius: 20px; background: var(--c-card); color: var(--c-text); box-shadow: var(--app-sh); overflow: hidden; } body.bpm-app .sp-taf > *:not(.sp-hit):not(.sp-act) { pointer-events: none; } body.bpm-app .sp-hit { position: absolute; inset: 0; z-index: 0; width: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; } body.bpm-app .sp-hit:focus-visible { outline: 2px solid var(--c-gold); outline-offset: -3px; } body.bpm-app .sp-taf > :not(.sp-hit) { position: relative; z-index: 1; } body.bpm-app .sp-tn { grid-row: 1 / span 3; align-self: stretch; display: grid; align-content: start; justify-items: center; gap: 0; padding: 0 6px 0 0; min-width: 0; border-right: 1px solid var(--app-line); } body.bpm-app .sp-taf.no-hd .sp-tn { grid-row: 1 / span 2; } body.bpm-app .sp-tn .sp-pill { margin-top: 5px; } /* Status-Schild unter „TISCH N“/„SPIEL N“ */ body.bpm-app .sp-tn small { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--c-text-2); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } body.bpm-app .sp-tn b { font: 32px/1.05 var(--font); font-weight: 400; font-variant-numeric: tabular-nums; } body.bpm-app .sp-taf.is-open .sp-tn b, body.bpm-app .sp-taf.is-done .sp-tn b { color: var(--c-text-2); font-size: 24px; } body.bpm-app .sp-st { display: flex; align-items: center; gap: 6px; min-height: 20px; min-width: 0; } body.bpm-app .sp-meta { margin-left: auto; min-width: 0; font-size: 11.5px; color: var(--c-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* Status-Schild wie am Kiosk (gp-badge): Versalien, gesperrt */ body.bpm-app .sp-pill { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; max-width: 100%; box-sizing: border-box; padding: 3px 4px 2px; border-radius: 9px; font: 9.5px/1.15 var(--font); letter-spacing: .03em; text-transform: uppercase; text-align: center; } body.bpm-app .sp-pill--live { background: #fff; color: #b41717; } body.bpm-app .sp-pill--live::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: spBlink 1.6s ease-in-out infinite; } body.bpm-app .sp-pill--at { background: rgba(255,255,255,.18); color: #fff; } body.bpm-app .sp-pill--you { background: var(--c-gold); color: #2a1d00; } body.bpm-app .sp-pill--pend { background: var(--sp-gold-soft); color: var(--c-gold-text); } body.bpm-app .sp-pill--soon { background: color-mix(in srgb, var(--c-primary) 11%, transparent); color: var(--app-red-t); } body.bpm-app .sp-pill.is-you { background: var(--c-gold); color: #2a1d00; } body.bpm-app .sp-pill--done { background: color-mix(in srgb, var(--c-success, #34c759) 15%, transparent); color: var(--app-ok); } /* Gruppen-Chip (Kiosk: „Tisch 1 · Gruppe A“), gleiche Farben wie die Gruppen-Symbole auf der Startseite */ body.bpm-app .sp-gr { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 7px; font: 11px/1 var(--font); letter-spacing: .02em; white-space: nowrap; background: var(--app-fill); color: var(--c-text-2); } body.bpm-app .sp-gr::before { content: ""; width: 7px; height: 7px; margin-right: 5px; border-radius: 2px; background: var(--sp-grc, var(--c-text-2)); } body.bpm-app .sp-gr--a { --sp-grc: #d0192f; } body.bpm-app .sp-gr--b { --sp-grc: #2f6ff2; } body.bpm-app .sp-gr--c { --sp-grc: #1f8f4a; } body.bpm-app .sp-gr--d { --sp-grc: #d9a400; } body.bpm-app .sp-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 9px; align-items: center; min-height: 28px; } body.bpm-app .sp-av { width: 18px; height: 18px; border-radius: 50%; display: block; flex: none; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.12); } body.bpm-app .sp-nm { font: 17px/1.25 var(--font); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } body.bpm-app .sp-row.is-mine .sp-nm { color: var(--c-gold-text); } body.bpm-app .sp-taf .match-score[data-score] { min-width: 26px; height: auto; padding: 0; border-radius: 0; background: none !important; box-shadow: none !important; display: block; text-align: right; font: 22px/1.15 var(--font); font-variant-numeric: tabular-nums; color: var(--c-text) !important; text-shadow: none !important; } body.bpm-app .sp-taf .match-score[data-score].pending { visibility: hidden; } /* noch kein Wurf: kein Stand (wie Hallen-Board) */ body.bpm-app .sp-act { grid-column: 2 / -1; display: flex; gap: 8px; margin-top: 8px; } body.bpm-app .sp-act .sp-btn { flex: 1; } /* läuft / am Tisch = rote Anzeigetafel wie am Kiosk (gp-card): Verlauf + warmer Schein oben rechts */ body.bpm-app .sp-taf.is-live { background: linear-gradient(155deg, #c62020 0%, var(--sp-b1) 42%, var(--sp-b2) 100%); color: #fff; box-shadow: 0 4px 10px rgba(138,14,14,.16), 0 12px 30px rgba(120,10,10,.24); } body.bpm-app .sp-taf.is-live::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(60% 70% at 100% 0%, rgba(255,150,40,.3), transparent 70%); } body.bpm-app .sp-taf.is-live .sp-tn { border-right-color: var(--sp-bl); } body.bpm-app .sp-taf.is-live .sp-tn small, body.bpm-app .sp-taf.is-live .sp-meta { color: var(--sp-bs); } body.bpm-app .sp-taf.is-live .sp-gr { background: rgba(255,255,255,.16); color: #fff; } body.bpm-app .sp-taf.is-live .sp-gr::before { display: none; } @media (max-width: 430px) { body.bpm-app .sp-meta { display: none; } body.bpm-app .sp-taf.hd-m .sp-st { display: none; } /* live ohne Gruppen-Chip: Kopfzeile wäre leer */ body.bpm-app .sp-taf.hd-m .sp-tn, body.bpm-app .sp-taf.hd-m .sp-mt { grid-row: 1 / span 2; } } /* schmal: Mini-Tisch zeigt das Tickern schon */ body.bpm-app .sp-taf.is-live .match-score[data-score] { color: var(--c-gold) !important; } body.bpm-app .sp-taf.is-live .sp-av { box-shadow: 0 0 0 1.5px rgba(255,255,255,.55); } body.bpm-app .sp-taf.is-live .sp-row.is-mine .sp-nm { color: var(--c-gold); } body.bpm-app .sp-taf.is-live.is-mine { box-shadow: 0 12px 30px rgba(120,10,10,.26), inset 0 0 0 2.5px var(--c-gold); } /* am Tisch, noch kein Wurf/kein Ticker (kein .is-go): helle Karte mit rotem Rand wie „AM TISCH“ am Kiosk (gp-card.is-at-table); erst LIVE (getickert bzw. Wurf gefallen) wird die Tafel rot. spiele_tab.js schaltet .is-go live um. */ body.bpm-app .sp-taf.is-live:not(.is-go) { background: var(--c-card); color: var(--c-text); box-shadow: var(--app-sh), inset 0 0 0 2px color-mix(in srgb, var(--c-primary) 55%, transparent); } body.bpm-app .sp-taf.is-live:not(.is-go)::before { display: none; } body.bpm-app .sp-taf.is-live:not(.is-go) .sp-tn { border-right-color: var(--app-line); } body.bpm-app .sp-taf.is-live:not(.is-go) .sp-tn small, body.bpm-app .sp-taf.is-live:not(.is-go) .sp-meta { color: var(--c-text-2); } body.bpm-app .sp-taf.is-live:not(.is-go) .sp-tn b { color: var(--app-red-t); } body.bpm-app .sp-taf.is-live:not(.is-go) .sp-pill--at { background: color-mix(in srgb, var(--c-primary) 11%, transparent); color: var(--app-red-t); } body.bpm-app .sp-taf.is-live:not(.is-go) .sp-gr { background: var(--app-fill); color: var(--c-text-2); } body.bpm-app .sp-taf.is-live:not(.is-go) .sp-gr::before { display: block; } body.bpm-app .sp-taf.is-live:not(.is-go) .sp-av { box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.12); } body.bpm-app .sp-taf.is-live:not(.is-go) .sp-row.is-mine .sp-nm { color: var(--c-gold-text); } body.bpm-app .sp-taf.is-live.is-mine:not(.is-go) { background: linear-gradient(var(--sp-gold-soft), var(--sp-gold-soft)), var(--c-card); box-shadow: var(--app-sh), inset 0 0 0 2.5px var(--c-gold); } /* vorläufig = gold, bis beide bestätigt haben */ body.bpm-app .sp-taf.is-pend { background: linear-gradient(var(--sp-gold-soft), var(--sp-gold-soft)), var(--c-card); box-shadow: var(--app-sh), inset 0 0 0 2px var(--c-gold); } body.bpm-app .sp-taf.is-pend .match-score[data-score] { color: var(--c-text) !important; } /* steht noch an: ruhige helle Karte, feiner roter Rand wie „Am Tisch“ am Kiosk; eigenes/gefolgtes Team gold hinterlegt */ body.bpm-app .sp-taf.is-open { box-shadow: var(--app-sh), inset 0 0 0 1px color-mix(in srgb, var(--c-primary) 14%, transparent); } body.bpm-app .sp-taf.is-open.is-mine { background: linear-gradient(var(--sp-gold-soft), var(--sp-gold-soft)), var(--c-card); box-shadow: var(--app-sh), inset 0 0 0 2px var(--c-gold); } /* gespielt: gedämpft und flacher, Sieger hervorgehoben (Name + Zahl), Haken in der Spielspalte */ body.bpm-app .sp-taf.is-done { padding-top: 10px; padding-bottom: 10px; background: color-mix(in srgb, var(--c-card) 55%, transparent); box-shadow: inset 0 0 0 1px var(--app-line); gap: 3px 10px; } body.bpm-app .sp-taf.is-done .sp-row { min-height: 25px; } body.bpm-app .sp-taf.is-done .sp-nm { font-size: 15.5px; color: var(--c-text-2); } body.bpm-app .sp-taf.is-done .match-score[data-score] { font-size: 18px; color: var(--c-text-2) !important; } body.bpm-app .sp-taf.is-done .sp-row.is-win .sp-nm { color: var(--c-text); } body.bpm-app .sp-taf.is-done .sp-row.is-win .match-score[data-score] { color: var(--c-text) !important; } body.bpm-app .sp-taf.is-done .sp-row.is-win .sp-av { box-shadow: 0 0 0 2px var(--c-card), 0 0 0 3.5px var(--c-gold); } body.bpm-app .sp-taf.is-done .sp-row:not(.is-win) .sp-av { opacity: .55; } body.bpm-app .sp-taf.is-done.is-mine { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-gold) 70%, transparent); } body.bpm-app .sp-taf.is-done .sp-row.is-mine .sp-nm { color: var(--c-gold-text); } body.bpm-app .sp-taf.bpm-score-pop .match-score { animation: appBump .6s var(--app-spring); } body.bpm-app .sp-taf.bpm-card-focus { animation: bpmCardFocus 1.3s ease-out 2; } /* Mini-Tisch (getickerte Spiele): hochkant rechts, Team-1-Rack oben neben Zeile 1, Team-2-Rack unten neben Zeile 2, Spitzen zueinander, Mittellinie wie am Kiosk-Tisch. Höhe = Kopfzeile + zwei Teamzeilen → die Tafel wächst nicht. */ body.bpm-app .sp-taf.has-mt { grid-template-columns: var(--sp-c, 68px) minmax(0, 1fr) auto; } body.bpm-app .sp-taf.has-mt.no-hd .sp-mt { grid-row: 1 / span 2; } body.bpm-app .sp-mt { --c: 9px; grid-column: 3; grid-row: 1 / span 3; align-self: center; display: grid; grid-template-rows: auto auto; justify-items: center; row-gap: 5px; padding: 3px 4px; border-radius: 11px; background: linear-gradient(0deg, transparent calc(50% - .5px), rgba(255,255,255,.26) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)), rgba(40,0,4,.34); box-shadow: inset 0 2px 7px rgba(0,0,0,.28); } body.bpm-app .sp-mt[hidden] { display: none; } body.bpm-app .sp-mt-r { position: relative; width: calc(var(--c) * 4.25); height: calc(var(--c) * 3.875); } body.bpm-app .sp-cup { position: absolute; left: 0; top: 0; width: var(--c); height: var(--c); border-radius: 50%; transition: transform .7s cubic-bezier(.34,1.3,.5,1), opacity .3s; } body.bpm-app .sp-cup::before, body.bpm-app .sp-cup::after { content: ""; position: absolute; inset: 0; border-radius: 50%; } body.bpm-app .sp-cup::before { box-shadow: inset 0 0 0 1px rgba(255,255,255,.34); } /* Ring (bleibt, wenn getroffen) */ body.bpm-app .sp-cup::after { /* Becher (Teamfarbe) */ background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.5), transparent 55%), var(--sp-cc, #e3262b); box-shadow: 0 0 0 1px rgba(255,255,255,.75), 0 1px 2px rgba(0,0,0,.3); transition: transform .32s var(--app-spring), opacity .25s; } body.bpm-app .sp-mt-r[data-s="1"] .sp-cup { --sp-cc: #e0262b; } /* wie am Kiosk (tv-rack data-cup-color): Team 1 rot, Team 2 blau */ body.bpm-app .sp-mt-r[data-s="2"] .sp-cup { --sp-cc: #2563eb; } body.bpm-app .sp-cup.hit::after { opacity: 0; transform: scale(.3); } body.bpm-app .sp-cup.off { opacity: 0; transform: scale(0) !important; } body.bpm-app .sp-mt-r.no-tr .sp-cup, body.bpm-app .sp-mt-r.no-tr .sp-cup::after { transition: none; } body.bpm-app .sp-cup.sp-pop::before { animation: spCupPop .6s ease-out; } @keyframes spCupPop { 0% { transform: scale(1); opacity: 1; box-shadow: inset 0 0 0 2px #fff; } 100% { transform: scale(2.1); opacity: 0; box-shadow: inset 0 0 0 1px #fff; } } /* Vorschau „Als Nächstes“ / „Danach“: ruhige Karten im Tafel-Stil, Paarungen wie die Chips am Kiosk */ body.bpm-app .sp-nexts { display: grid; gap: 10px; margin-top: 16px; } body.bpm-app .sp-next { display: grid; gap: 2px; width: 100%; margin: 0; padding: 10px 14px 8px; border: 0; border-radius: 18px; text-align: left; cursor: pointer; background: var(--c-card); color: var(--c-text); box-shadow: var(--app-sh), inset 0 0 0 1px var(--app-line); font: 14px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; transition: transform .2s var(--app-spring); } body.bpm-app .sp-next:active { transform: scale(.985); } body.bpm-app .sp-next-h { display: flex; align-items: center; gap: 8px; min-height: 26px; margin-bottom: 2px; } body.bpm-app .sp-next-h b { font: 12px/1 var(--font); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--app-red-t); } body.bpm-app .sp-next-chip { font: 12px/1 var(--font); padding: 4px 8px 3px; border-radius: 999px; background: var(--app-fill); color: var(--c-text-2); } body.bpm-app .sp-next-go { margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--c-text-2); border-bottom: 2px solid var(--c-text-2); transform: rotate(-45deg); opacity: .6; } body.bpm-app .sp-next-r { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 34px; border-top: 1px solid var(--app-line); } body.bpm-app .sp-next-r:first-of-type { border-top: 0; } body.bpm-app .sp-next-t { display: flex; align-items: center; gap: 7px; min-width: 0; font: 15px/1.2 var(--font); } body.bpm-app .sp-next-t > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } body.bpm-app .sp-next-t--2 { justify-content: flex-end; text-align: right; } body.bpm-app .sp-next-t .sp-av { width: 14px; height: 14px; } body.bpm-app .sp-next-t.is-mine { color: var(--c-gold-text); } body.bpm-app .sp-next-vs { font: 10.5px/1 var(--font); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-2); opacity: .8; } body.bpm-app .sp-next-tag { font: 11px/1 var(--font); min-width: 20px; padding: 4px 6px 3px; border-radius: 6px; text-align: center; background: var(--app-fill); color: var(--c-text-2); } body.bpm-app .sp-next-tag[class*="sp-gr--"] { color: #fff; background: var(--sp-grc); } body.bpm-app .sp-next-tag.is-t { background: linear-gradient(160deg, var(--sp-b1), var(--sp-b2)); color: #fff; } body.bpm-app .sp-next-r.is-mine { background: linear-gradient(90deg, var(--sp-gold-soft), transparent 80%); margin: 0 -14px; padding: 0 14px; } /* Leerzustände */ body.bpm-app .sp-empty { display: grid; justify-items: center; gap: 10px; padding: 36px 8px 18px; text-align: center; } body.bpm-app .sp-empty b { font: 22px/1.2 var(--font); font-weight: 400; text-wrap: balance; color: var(--c-text); } body.bpm-app .sp-empty p { margin: 0; max-width: 32ch; color: var(--c-text-2); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } body.bpm-app .sp-empty .sp-btn { margin-top: 4px; min-width: 220px; } body.bpm-app .sp-empty--fin { padding: 18px 8px 6px; } body.bpm-app .sp-empty--orga { margin: 0 16px 14px; padding: 20px 12px; border-radius: 20px; background: var(--c-card); box-shadow: var(--app-sh); } body.bpm-app .sp-ring { width: 64px; height: 64px; border-radius: 50%; border: 2px dashed var(--app-line); display: grid; place-items: center; color: var(--c-text-2); font: 24px/1 var(--font); } body.bpm-app .sp-ring--ok { border: 0; background: var(--sp-gold-soft); color: var(--c-gold-text); } body.bpm-app .sp-ring--ok svg { width: 28px; height: 28px; } /* Spiel-Sheet (Detail-Karte aus #sp-store, Live-Teil aus live_ticker.js) */ body.bpm-app .sp-sh { position: fixed; inset: 0; z-index: calc(var(--z-content-overlay, 400) - 10); } body.bpm-app .sp-sh-bd { position: absolute; inset: 0; background: rgba(10,4,6,.45); opacity: 0; transition: opacity .28s; } body.bpm-app .sp-sh-card { position: absolute; left: 50%; bottom: 0; width: min(100%, var(--app-col, 560px)); max-height: 86vh; overflow-y: auto; overscroll-behavior: contain; padding: 8px 18px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 26px 26px 0 0; background: var(--c-card); color: var(--c-text); box-shadow: var(--app-sh-lg); transform: translate(-50%, 100%); transition: transform .32s var(--app-ease); } body.bpm-app .sp-sh.is-on .sp-sh-bd { opacity: 1; } body.bpm-app .sp-sh.is-on .sp-sh-card { transform: translate(-50%, 0); } body.bpm-app .sp-sh.is-instant .sp-sh-bd, body.bpm-app .sp-sh.is-instant .sp-sh-card { transition: none; } body.bpm-app .sp-sh-grab { width: 38px; height: 5px; border-radius: 3px; background: var(--app-fill); margin: 0 auto 6px; } body.bpm-app .sp-sh-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } body.bpm-app .sp-sh-h h2 { margin: 0; min-width: 0; font: 13.5px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--c-text-2); } body.bpm-app .sp-sh-x { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--app-fill); color: var(--c-text); cursor: pointer; } body.bpm-app .sp-sh .match-card { margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none !important; animation: none; } body.bpm-app .sp-sh .match-card::before { display: none; } body.bpm-app .sp-sh .mc-head { margin-bottom: 6px; } body.bpm-app .sp-sh .mc-meta, body.bpm-app .sp-sh .mc-you { display: none; } body.bpm-app .sp-sh .mc-compact .match-row { min-height: 44px; font-size: 20px; gap: 12px; } body.bpm-app .sp-sh .mc-compact .team-pip { width: 26px; height: 26px; } body.bpm-app .sp-sh .mc-compact .match-score[data-score] { height: 34px; min-width: 40px; font-size: 20px; border-radius: 10px; } body.bpm-app .sp-sh .mc-compact .cf-row { padding-left: 38px; } body.bpm-app .sp-sh .mc-lt { margin-top: 6px; } body.bpm-app .sp-sh-fol:empty { display: none; } body.bpm-app .sp-sh-fol { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--app-line); } body.bpm-app .sp-fol { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; max-width: 100%; padding: 0 12px; border: 0; border-radius: 12px; background: var(--app-fill); color: var(--c-text); font: 13.5px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; } body.bpm-app .sp-fol span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } body.bpm-app .sp-fol b { font-family: var(--font); font-weight: 400; } body.bpm-app .sp-fol svg { flex: none; color: var(--c-text-2); } body.bpm-app .sp-fol.is-on { background: var(--sp-gold-soft, rgba(252,194,0,.2)); color: var(--c-gold-text); } body.bpm-app .sp-fol.is-on svg { color: var(--c-gold); } @media (prefers-reduced-motion: reduce) { body.bpm-app .sp-rd.is-live i::before, body.bpm-app .sp-pill--live::before, body.bpm-app .sp-pan.sp-in, body.bpm-app .sp-pan.sp-in-l, body.bpm-app .sp-pan.sp-in-r, body.bpm-app .sp-cup.sp-pop::before, body.bpm-app .sp-rd.is-live s::after, body.bpm-app .sp-taf.bpm-card-focus { animation: none; } body.bpm-app .sp-rd, body.bpm-app .sp-btn, body.bpm-app .sp-sh-bd, body.bpm-app .sp-sh-card, body.bpm-app .sp-next, body.bpm-app .sp-cup, body.bpm-app .sp-cup::after, body.bpm-app .sp-rd s, body.bpm-app .sp-rd b { transition: none; } body.bpm-app .sp-taf.bpm-card-focus { outline: 3px solid var(--c-primary); outline-offset: 2px; } } /* Start: "Jetzt live" nebeneinander + Gruppen-Symbol (28.10.) */ body.bpm-app .app-live-list:has(.app-lcard:nth-child(2)) { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } body.bpm-app .app-live-list:has(.app-lcard:nth-child(2)) .app-lcard { padding: 10px 10px 8px; min-width: 0; } body.bpm-app .app-live-list:has(.app-lcard:nth-child(2)) .app-lrow { grid-template-columns: 28px 1fr auto; gap: 7px; min-height: 38px; } body.bpm-app .app-live-list:has(.app-lcard:nth-child(2)) .app-lrow .nm { font-size: 14px; } body.bpm-app .app-live-list:has(.app-lcard:nth-child(2)) .app-tav { width: 28px; height: 28px; font-size: 10px; } body.bpm-app .app-live-list:has(.app-lcard:nth-child(2)) .app-sc { min-width: 32px; height: 30px; padding: 0 5px; font-size: 18px; border-radius: 9px; } body.bpm-app .app-gb { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--c-primary); color: #fff; font: 13px/1 var(--font); } body.bpm-app .app-gb-a { background: #b41717; } body.bpm-app .app-gb-b { background: #1d4fb0; } body.bpm-app .app-gb-c { background: #1f8f4a; } body.bpm-app .app-gb-d { background: #b8860b; } /* Schließen-X bleibt sichtbar, auch wenn der Sheet-Inhalt scrollt (28.10.) */ body.bpm-app .app-sheet-card > .app-sheet-x { position: sticky; top: 10px; margin: 0 12px -40px auto; z-index: 8; box-shadow: 0 2px 10px rgba(0,0,0,.18); background: var(--c-card); } /* Tablet/Desktop: die alte Seitenleisten-Aufteilung (style.css ≥ 768 px) gilt für die App-Oberfläche nicht (28.10.) */ @media screen and (min-width: 768px) and (min-height: 500px) { body.bpm-app { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } } /* Regeln (regeln.php) auf breiten Bildschirmen in der Spalte halten (28.10.) */ @media (min-width: 700px) { body.bpm-app #app-rc, body.bpm-app .app-rnav, body.bpm-app .rules-intro, body.bpm-app .mascot-card, body.bpm-app .app-rall-wrap { max-width: var(--app-col); margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; } body.bpm-app .app-rnav, body.bpm-app .app-card { margin-left: auto; margin-right: auto; } } /* ── Tablet quer (>= 900 px): Platz nutzen statt nur zentrieren (28.10.) ── */ @media (min-width: 900px) and (orientation: landscape) { body.bpm-app .page-wrap { max-width: 1180px; } body.bpm-app .tab-switcher { max-width: var(--app-col); margin-left: auto; margin-right: auto; } /* Start: links "Jetzt live" & Hinweise, rechts der Feed */ body.bpm-app #Seite1:has(> #feed-list):not([style*="none"]) { display: grid !important; grid-template-columns: 400px minmax(0, 1fr); gap: 0 28px; align-items: start; } body.bpm-app #Seite1:has(> #feed-list):not([style*="none"]) > * { grid-column: 1; } body.bpm-app #Seite1:has(> #feed-list):not([style*="none"]) > #feed-list { grid-column: 2; grid-row: 1 / span 40; max-width: none; } body.bpm-app #Seite1:has(> #feed-list):not([style*="none"]) > #feed-end, body.bpm-app #Seite1:has(> #feed-list):not([style*="none"]) > #feed-cta, body.bpm-app #Seite1:has(> #feed-list):not([style*="none"]) > #feed-loading, body.bpm-app #Seite1:has(> #feed-list):not([style*="none"]) > #feed-sentinel { grid-column: 2; } body.bpm-app #Seite1:has(> #feed-list) > .app-sec-h, body.bpm-app #Seite1:has(> #feed-list) .app-live-list, body.bpm-app #Seite1:has(> #feed-list) > .app-card { max-width: none; } body.bpm-app #Seite1:has(> #feed-list) .app-live-list:has(.app-lcard:nth-child(2)) { grid-template-columns: 1fr; } /* Tabelle: beide Gruppen nebeneinander */ body.bpm-app:has(#Seite2 .standings-card) #Seite2[style*="flex"] { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; } body.bpm-app #Seite2 > .app-legend, body.bpm-app #Seite2 > br { grid-column: 1 / -1; } /* Teams: Karten in zwei Spalten */ body.bpm-app .app-tlist { max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px 16px; } body.bpm-app .app-sec-h, body.bpm-app .app-search, body.bpm-app .app-chips { max-width: none; } } /* ===================================================================== Querformat: Kopfzeile + Navigation als schmale Leiste links (Handy & Tablet), damit der Inhalt die ganze Höhe nutzt. Titel/Modus-Chip entfallen dort (das Logo reicht), Musik + Avatar sitzen unten in der Leiste. ===================================================================== */ @media (orientation: landscape) and (min-width: 600px) { body.bpm-app { --app-rail: 92px; --app-rail-tab: 64px; --app-hdr-h: 0px; --app-hdr-hs: 0px; --app-tab-h: 0px; --nav-h: 0px; --header-h: 0px; padding-top: calc(var(--bpm-sat) + 10px); padding-bottom: 16px; padding-left: calc(var(--app-rail) + var(--bpm-sal)) !important; } html body.bpm-app .app-hdr, html.app-scrolled body.bpm-app .app-hdr { left: 0; right: auto; top: 0; bottom: 0; width: calc(var(--app-rail) + var(--bpm-sal)); height: auto !important; padding: calc(var(--bpm-sat) + 12px) 0 calc(env(safe-area-inset-bottom, 0px) + 12px) var(--bpm-sal); flex-direction: column; align-items: center; gap: 12px; border-bottom: 0; border-right: 1px solid var(--app-glass-b); } html.app-scrolled body.bpm-app .app-hdr-logo { transform: none; } body.bpm-app .app-hdr-ttl { display: none; } body.bpm-app .app-hdr .app-np-btn { margin-top: auto; } /* Tabs: senkrecht, mittig in der Leiste (liegen über dem Leistenhintergrund der Kopfzeile) */ body.bpm-app .app-tabbar { left: 0; right: auto; bottom: auto; top: 50%; width: calc(var(--app-rail) + var(--bpm-sal)); transform: translateY(-50%); padding: 0 0 0 var(--bpm-sal); background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; } body.bpm-app .app-tabs { grid-template-columns: 1fr; grid-auto-rows: var(--app-rail-tab); max-width: none; margin: 0; } body.bpm-app .app-tab-ind { width: 100%; height: var(--app-rail-tab); align-items: center; transform: translateY(calc(var(--app-tab-i, 0) * 100%)); } body.bpm-app .app-tab-ind::before { width: 60px; height: calc(var(--app-rail-tab) - 8px); margin-top: 0; border-radius: 18px; } body.bpm-app .app-tab { min-height: 0; justify-content: center; padding-top: 0; gap: 4px; } body.bpm-app .app-live-dot { top: 8px; left: calc(50% + 12px); } /* Hier-einloggen-Blase rechts neben den Avatar statt darunter */ body.bpm-app #id-fab-wrap.in-hdr #login-hint { left: calc(100% + 14px) !important; right: auto !important; top: 50% !important; transform: translateY(-50%) !important; white-space: nowrap; } body.bpm-app #id-fab-wrap.in-hdr #login-hint[style*="opacity: 1"] { transform: translateY(-50%) !important; } body.bpm-app #id-fab-wrap.in-hdr #login-hint > span { display: none; } /* Pull-to-Refresh sitzt oben im Inhaltsbereich */ html.bpm-app-html .app-ptr { top: calc(var(--bpm-sat) + 4px); left: calc(50% + var(--app-rail, 92px) / 2); } html.bpm-app-html { scroll-padding-top: 70px; } } /* Niedrige Bildschirme (Handy quer): kompaktere Leiste */ @media (orientation: landscape) and (min-width: 600px) and (max-height: 560px) { body.bpm-app { --app-rail: 76px; --app-rail-tab: 42px; } body.bpm-app .app-tabbar { top: calc(var(--bpm-sat) + 56px); transform: none; } html body.bpm-app .app-hdr, html.app-scrolled body.bpm-app .app-hdr { gap: 8px; padding-top: calc(var(--bpm-sat) + 8px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); } body.bpm-app .app-hdr-logo, body.bpm-app .app-hdr-logo img { width: 34px; height: 34px; } body.bpm-app .app-tab svg { width: 22px; height: 22px; } body.bpm-app .app-tab { font-size: 10.5px; gap: 2px; } body.bpm-app .app-tab-ind::before { width: 52px; } body.bpm-app .app-hdr .app-ibtn, body.bpm-app .app-hdr-av, body.bpm-app .app-av-btn, body.bpm-app #id-fab-wrap.in-hdr, body.bpm-app #id-fab-wrap.in-hdr #id-btn { width: 38px !important; height: 38px !important; } } /* Mehr-Menü: "Bearbeiten" als Pille in der Team-Karte; drei Kacheln (Mein Team · Meine Spiele · Beitrag) */ body.bpm-app #avq-peek .avq-edit { order: 3; flex: none; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px; border-radius: 99px; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.2); color: #fff; cursor: pointer; font: 13px/1 var(--font); transition: transform .2s var(--app-spring), background .2s; } body.bpm-app #avq-peek .avq-edit:active { transform: scale(.94); background: rgba(255,255,255,.32); } body.bpm-app #avq-tiles > div > div { padding: 12px 6px 10px !important; font-size: 12px !important; gap: 6px !important; } /* Regeln kompakter (28.10.): flachere Bilder, engere Karten, kleinere Übersicht */ body.bpm-app .app-rimg { height: 128px; } body.bpm-app .app-rbody { padding: 11px 14px 12px; } body.bpm-app .app-rbody h3 { font-size: 19px; } body.bpm-app .app-rbody p { margin: 5px 0 10px; min-height: 0; font-size: 14px; line-height: 1.4; } body.bpm-app .app-rlist { gap: 6px; } body.bpm-app .app-rlist button { min-height: 42px; padding: 4px 10px; font-size: 13px; border-radius: 12px; } body.bpm-app .app-rlist small { margin-bottom: 1px; } @media (orientation: landscape) and (min-width: 700px) { body.bpm-app .app-rimg { height: 150px; } } body.bpm-app .app-rc { align-items: flex-start; } /* Tabelle: Umbrüche nur an Leerzeichen (max. 2 Zeilen), kein Wort wird mitten drin getrennt */ body.bpm-app .standings-name { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; word-break: normal; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.bpm-app .standings-name.long { font-size: min(3.7vw, 15.5px); } /* Mehr: Team-Karte kompakter (Avatar kleiner, Zeile Stats einzeilig, Bearbeiten-Pille klein) */ body.bpm-app #avq-peek { padding: 11px 13px !important; gap: 11px !important; border-radius: 20px !important; } body.bpm-app #avq-peek #avq-avatar-wrap { width: 46px !important; height: 46px !important; } body.bpm-app #avq-peek #avq-name { font-size: 18px !important; line-height: 1.15; } body.bpm-app #avq-peek #avq-sub { font-size: 12px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.bpm-app #avq-peek .avq-peek-txt { gap: 1px !important; } body.bpm-app #avq-peek .avq-edit { height: 30px; padding: 0 10px 0 8px; font-size: 12px; align-self: center; gap: 5px; } /* Mehr: Konto-Pillen in der Team-Karte kleiner (Bechi · Team · Team anmelden), damit die Karte nicht hoch wird */ body.bpm-app #avq-peek #avq-stats { margin-top: 4px !important; } body.bpm-app #avq-peek #avq-stats > div { gap: 5px !important; margin-top: 3px !important; } body.bpm-app #avq-peek #avq-stats > div > div { min-height: 26px !important; padding: 2px 9px 2px 3px !important; font-size: 11.5px !important; gap: 5px !important; } body.bpm-app #avq-peek #avq-stats > div > div > span:first-child { width: 20px !important; height: 20px !important; } body.bpm-app #avq-peek #avq-stats > div > div svg { width: 12px !important; height: 12px !important; } body.bpm-app #avq-peek:not(.is-guest) { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 11px; row-gap: 0; grid-template-areas: "av nm ed" "av sb ed" "pl pl pl"; align-items: center; } body.bpm-app #avq-peek:not(.is-guest) .avq-peek-txt { display: contents; } body.bpm-app #avq-peek:not(.is-guest) #avq-avatar-wrap { grid-area: av; } body.bpm-app #avq-peek:not(.is-guest) #avq-name { grid-area: nm; align-self: end; } body.bpm-app #avq-peek:not(.is-guest) #avq-sub { grid-area: sb; align-self: start; } body.bpm-app #avq-peek:not(.is-guest) #avq-stats { grid-area: pl; margin-top: 8px !important; } body.bpm-app #avq-peek:not(.is-guest) .avq-edit { grid-area: ed; } body.bpm-app #avq-peek:not(.is-guest) #avq-stats[style*="none"] { margin: 0 !important; } /* Tabelle (App): gleich breite Rangspalte für alle Zeilen (Pille statt Kreis), Platz 1/2 ohne Hintergrund – Zahl und HF-Marke nebeneinander; etwas schmalere Zahlenspalten, damit Namen wie „Testteam 6“ nicht umbrechen */ body.bpm-app #Seite2 .rank-num { width: 48px; height: 30px; border-radius: 15px; font-size: 14px; } body.bpm-app #Seite2 .standings-th-rank { width: 48px; } body.bpm-app #Seite2 .standings-row.rank-1-row .rank-num, body.bpm-app #Seite2 .standings-row.rank-2-row .rank-num { background: none; box-shadow: none; gap: 5px; padding: 0; justify-content: center; font-size: 15px; } body.bpm-app #Seite2 .standings-row.rank-1-row .rank-num::after, body.bpm-app #Seite2 .standings-row.rank-2-row .rank-num::after { margin-top: 0; } body.bpm-app #Seite2 .standings-stat, body.bpm-app #Seite2 .standings-th { min-width: min(8.4vw, 38px); } body.bpm-app #Seite2 .standings-row, body.bpm-app #Seite2 .standings-table-hdr { gap: 8px; } /* Tabelle: gelber Balken links und HF-Feld weg – die goldene Zahl reicht */ body.bpm-app #Seite2 .standings-row.rank-1-row::before, body.bpm-app #Seite2 .standings-row.rank-2-row::before { display: none; } body.bpm-app #Seite2 .standings-row.rank-1-row .rank-num::after, body.bpm-app #Seite2 .standings-row.rank-2-row .rank-num::after { display: none; } /* Dunkelmodus: Kommentar-Knopf im Feed hatte keine Schriftfarbe (Icon war schwarz auf dunkel) */ body.bpm-app [data-comment-btn] { color: var(--c-text-2) !important; } body.bpm-app [data-comment-btn] .comment-count { color: var(--c-text) !important; } body.bpm-app #feed-list > .card [data-emoji], body.bpm-app #feed-list > .card [data-comment-btn] { border-color: color-mix(in srgb, var(--c-text) 22%, transparent) !important; } /* Kommentar-Sheet: im Dunkelmodus heller Glas-Hintergrund wie die anderen Sheets, deutlicher abgesetzt vom Feed */ @media (prefers-color-scheme: dark) { body.bpm-app #comment-sheet-card { background: #2a1f2a !important; border-top: 1px solid rgba(255,255,255,.14) !important; box-shadow: 0 -14px 44px rgba(0,0,0,.55) !important; } body.bpm-app #comment-sheet-bd { background: rgba(0,0,0,.45) !important; } body.bpm-app #comment-input { background: #3a2c3a !important; color: var(--c-text) !important; border-color: rgba(255,255,255,.18) !important; } body.bpm-app #comment-input::placeholder { color: var(--c-text-2) !important; opacity: 1; } body.bpm-app #comment-list { color: var(--c-text); } } /* --------------------------------------------------------------------- Aufklapp-Gruppen (29.10.): Regeln + Team-Seite zeigen nur das Wichtigste, der Rest steckt in
. Nur Struktur hier – den Hintergrund liefert die jeweilige Karte (.app-card bzw. .profile-section). --------------------------------------------------------------------- */ body.bpm-app .app-acc { padding: 0; overflow: hidden; } body.bpm-app .app-acc > summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; color: var(--c-text); } body.bpm-app .app-acc > summary::-webkit-details-marker { display: none; } body.bpm-app .app-acc > summary:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; border-radius: inherit; } body.bpm-app .app-acc > summary:active { background: var(--app-fill2); } body.bpm-app .app-acc .app-ic { width: 40px; height: 40px; border-radius: 12px; } body.bpm-app .app-acc-tx { flex: 1; min-width: 0; } body.bpm-app .app-acc-sub { display: block; margin-top: 2px; font: 13px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--c-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.bpm-app .app-acc-chev { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--app-fill); color: var(--c-text-2); transition: transform .3s var(--app-ease); } body.bpm-app .app-acc[open] > summary .app-acc-chev { transform: rotate(180deg); } body.bpm-app .app-acc-body { padding: 2px 14px 14px; animation: appAccIn .32s var(--app-ease); } @keyframes appAccIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } body.bpm-app #old-teams > #old-grid { padding-left: 0 !important; padding-right: 0 !important; flex: 1 1 auto; width: 100%; min-width: 0; box-sizing: border-box; } /* --------------------------------------------------------------------- Lade-Intro "Anpfiff" (nur beim ersten Öffnen pro Turnier; Steuerung: bpmIntroStart() in common.js, Markup #bpm-intro aus bpmAppHeader, Klasse html.bpm-intro aus bpmAppHead). Nur transform/opacity. --------------------------------------------------------------------- */ .bpmi { display: none; } html.bpm-intro { overflow: hidden; background: #fbf8f8; } html.bpm-intro .bpmi { --i-bg: #fbf8f8; --i-glow1: rgba(180,23,23,.10); --i-glow2: rgba(252,194,0,.20); --i-text: #1c1c1e; --i-sub: #6c6c70; --i-num: #b41717; --i-ring: rgba(0,0,0,.16); --i-dot: #f0b400; --i-shadow: rgba(60,10,10,.18); position: fixed; inset: 0; z-index: 10001; display: grid; place-items: center; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; background: radial-gradient(ellipse 80% 45% at 50% 0%, var(--i-glow1), transparent 70%), radial-gradient(ellipse 70% 40% at 50% 100%, var(--i-glow2), transparent 70%), var(--i-bg); } @media (prefers-color-scheme: dark) { html.bpm-intro { background: #150b10; } html.bpm-intro .bpmi { --i-bg: #150b10; --i-glow1: rgba(196,29,34,.34); --i-glow2: rgba(252,194,0,.08); --i-text: #f6eef0; --i-sub: #b3a1aa; --i-num: #FCC200; --i-ring: rgba(255,255,255,.22); --i-dot: #FCC200; --i-shadow: rgba(0,0,0,.5); } } .bpmi.out { animation: bpmiOut .25s ease forwards; pointer-events: none; } .bpmi.out .bpmi-stage { animation: bpmiStageOut .25s ease forwards; } @keyframes bpmiOut { to { opacity: 0; } } @keyframes bpmiStageOut { to { transform: scale(1.03); } } @keyframes bpmiFade { from { opacity: 0; } } @keyframes bpmiRise { from { opacity: 0; transform: translateY(10px); } } .bpmi-stage { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 0 24px; max-width: 100%; transform-origin: 50% 45%; } .bpmi-logo { width: 64px; height: 63px; animation: bpmiFade .3s ease .1s both; } .bpmi-pitch { position: relative; width: 170px; height: 170px; animation: bpmiBob 1.1s ease-in-out .95s infinite; } @keyframes bpmiBob { 0%, 100% { transform: none; } 50% { transform: translateY(-5px); } } .bpmi-hop { position: absolute; left: 13px; bottom: 10px; width: 144px; height: 136px; animation: bpmiHop .7s linear both; } .bpmi-bechi { width: 100%; height: 100%; background: url(bechi-240.webp) center / contain no-repeat; transform-origin: 50% 100%; animation: bpmiSquash .7s linear both; } /* Bild nur als CSS-Hintergrund: wird nur geladen, wenn html.bpm-intro gilt */ @keyframes bpmiHop { 0% { opacity: 0; transform: translate(150px, 230px) rotate(14deg); animation-timing-function: cubic-bezier(.25,.6,.4,1); } 12% { opacity: 1; } 48% { transform: translate(44px, -30px) rotate(-6deg); animation-timing-function: cubic-bezier(.55,0,.8,.5); } 72% { transform: translate(0, 0) rotate(0deg); animation-timing-function: cubic-bezier(.3,.7,.5,1); } 85% { transform: translate(0, -12px); animation-timing-function: cubic-bezier(.5,0,.7,.5); } 100% { opacity: 1; transform: translate(0, 0); } } @keyframes bpmiSquash { 0%, 70% { transform: none; } 75% { transform: scale(1.08, .9); } 86% { transform: scale(.97, 1.03); } 100% { transform: none; } } .bpmi-shadow { position: absolute; left: 45px; bottom: 4px; width: 80px; height: 12px; border-radius: 50%; background: var(--i-shadow); opacity: .7; animation: bpmiShadow .7s linear both; } @keyframes bpmiShadow { 0%, 40% { opacity: 0; transform: scaleX(.3); } 72% { opacity: .7; transform: scaleX(1.05); } 85% { opacity: .5; transform: scaleX(.85); } 100% { opacity: .7; transform: none; } } .bpmi-name { font-family: var(--font); font-size: 30px; line-height: 1.1; color: var(--i-text); text-wrap: balance; overflow-wrap: anywhere; animation: bpmiRise .36s cubic-bezier(.2,.8,.2,1) .62s both; } .bpmi-name em { font-style: normal; color: var(--i-num); } .bpmi-sub { font-family: var(--font); font-size: 14px; color: var(--i-sub); letter-spacing: .02em; min-height: 1.2em; animation: bpmiFade .3s ease .75s both; } .bpmi-dots { display: flex; gap: 10px; margin-top: 4px; animation: bpmiFade .2s ease .3s both; } .bpmi-dots i { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--i-ring); display: grid; place-items: center; } .bpmi-dots b { width: 13px; height: 13px; border-radius: 50%; background: var(--i-dot); animation: bpmiDot .22s cubic-bezier(.3,1.6,.5,1) backwards; } .bpmi-dots i:nth-child(1) b { animation-delay: .5s; } .bpmi-dots i:nth-child(2) b { animation-delay: 1.0s; } .bpmi-dots i:nth-child(3) b { animation-delay: 1.5s; } .bpmi-dots i:nth-child(4) b { animation-delay: 2.0s; } .bpmi-dots i:nth-child(5) b { animation-delay: 2.5s; } .bpmi-dots i:nth-child(n+6) b { animation: bpmiDotHold 60s both; } .bpmi.done .bpmi-dots i:nth-child(6) b { animation: bpmiDot .2s cubic-bezier(.3,1.6,.5,1) backwards; } .bpmi.done .bpmi-dots i:nth-child(7) b { animation: bpmiDot .2s cubic-bezier(.3,1.6,.5,1) .08s backwards; } @keyframes bpmiDot { from { transform: scale(0); } } @keyframes bpmiDotHold { from, to { transform: scale(0); } } .bpmi-by { position: absolute; left: 0; right: 0; bottom: calc(52px + env(safe-area-inset-bottom, 0px)); text-align: center; font-family: var(--font); font-size: 15px; letter-spacing: .02em; color: var(--i-sub); animation: bpmiFade .35s ease .95s both; } .bpmi-by b { font-weight: 400; color: var(--i-num); } .bpmi-skip { position: absolute; left: 0; right: 0; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); text-align: center; font: 12px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--i-sub); opacity: .7; animation: bpmiFade .3s ease .55s both; } /* Bewegung reduziert: Endbild steht, nur die Fläche blendet sanft ein (≤ 300 ms) */ @media (prefers-reduced-motion: reduce) { html.bpm-intro .bpmi { animation: bpmiFade .3s ease both; } .bpmi-stage *, .bpmi-skip, .bpmi-by { animation: none !important; } .bpmi.out { animation: bpmiOut .2s ease forwards; } .bpmi.out .bpmi-stage { animation: none; } }