/* ============================================================ Kickdesk · iOS-26-Look "Liquid Glass" — Mobile-Layer Baut auf design/dash.css auf (Tokens). Keine Hex-Werte hier, nur abgeleitete Glas-Materialien via color-mix. Varianten über ============================================================ */ :root{ /* Glas-Material (Variante A "Matt" = Standard, gut lesbar) */ --glass-bg: color-mix(in srgb, var(--surface) 80%, transparent); --glass-bg-strong: color-mix(in srgb, var(--surface) 90%, transparent); --glass-blur: 16px; --glass-sat: 150%; --glass-edge: rgba(255,255,255,0.60); /* Lichtkante oben */ --glass-line: var(--line); --glass-shadow: 0 8px 32px rgba(15,31,20,0.14), 0 2px 8px rgba(15,31,20,0.08); --r-glass: 28px; /* konzentrisch zu Geräteecken */ --tab-active-bg: color-mix(in srgb, var(--brand) 13%, transparent); --tab-active-ink: var(--brand); /* Eigener (nicht von --glass-bg abgeleiteter) Wert: 80% Deckkraft reichte bei Karten dicht unter der Bottom-Nav nicht, deren Box-Shadow schimmerte als rechteckige "Geisterkante" durch die runde Pille (siehe kd-eltern.css, dort fuer Eltern/Spieler-Screens bereits auf 96% gefixt). Globaler Fix, damit ALLE Rollen (Trainer/Admin/Jugendvorstand) dieselbe sauber lesbare Bottom-Nav wie Eltern/Spieler bekommen, nicht nur die ~40 Templates mit body.kd-mobil. #bottomnav-konsistenz 2026-07-10 */ --tabbar-bg: color-mix(in srgb, var(--surface) 96%, transparent); --tabbar-ink: var(--ink-subtle); } [data-theme="dark"]{ --glass-edge: rgba(255,255,255,0.14); --glass-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.4); } /* Plattform-Tokens statt app-spezifischer Sonderlayouts: FCERheine und die generische Kickdesk-App teilen dasselbe Markup. iOS folgt dem seit iOS 26 eingefuehrten Liquid-Glass-Material; die Variablen bilden zugleich die stabile Anpassungsschicht fuer die naechste iOS-Version. Android bleibt bei Material 3: weniger Blur, klare Surface/Elevation-Hierarchie und etwas kompaktere, adaptive Radien. */ html[data-kd-platform="ios"]{ --kd-platform-control-radius:999px; --kd-platform-card-radius:22px; --kd-platform-motion: cubic-bezier(.2,.8,.2,1); } html[data-kd-platform="android"]{ --glass-bg:color-mix(in srgb, var(--surface) 98%, transparent); --glass-bg-strong:var(--surface); --glass-blur:0px; --glass-sat:100%; --glass-edge:transparent; --glass-shadow:0 3px 8px rgba(15,31,20,.18); --r-glass:28px; --tabbar-bg:var(--surface); --kd-platform-control-radius:24px; --kd-platform-card-radius:20px; --kd-platform-motion:cubic-bezier(.2,0,0,1); } /* Variante B "Klar" — mehr Transluzenz, stärkerer Blur */ [data-glass="klar"]{ --glass-bg: color-mix(in srgb, var(--surface) 58%, transparent); --glass-bg-strong: color-mix(in srgb, var(--surface) 76%, transparent); --glass-blur: 26px; --glass-sat: 180%; } /* Variante C "Getönt" — Markenrot als getöntes Glas in der Tab-Bar */ [data-glass="getoent"]{ --tabbar-bg: color-mix(in srgb, var(--brand) 72%, transparent); --tabbar-ink: rgba(255,255,255,0.66); --tab-active-bg: rgba(255,255,255,0.20); --tab-active-ink: #FFFFFF; } /* Bedienungshilfen: Transparenz reduzieren → solide Flächen */ @media (prefers-reduced-transparency: reduce){ :root{ --glass-bg:var(--surface); --glass-bg-strong:var(--surface); --tabbar-bg:var(--surface); } } [data-transparenz="reduziert"]{ --glass-bg:var(--surface); --glass-bg-strong:var(--surface); --tabbar-bg:var(--surface); } /* ---------- Hintergrund-Wash (gibt dem Glas etwas zum Brechen) ---------- */ .g-body{ background: radial-gradient(120% 60% at 85% -8%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 60%), radial-gradient(100% 50% at -10% 30%, color-mix(in srgb, var(--info) 5%, transparent), transparent 55%), var(--bg); min-height:100vh; } /* ---------- Statusleiste + Home-Indikator (Mock) ---------- */ .g-sb{ position:fixed; top:0; left:0; right:0; z-index:60; display:flex; align-items:center; justify-content:space-between; padding:14px 26px 0; font-size:14px; font-weight:700; color:var(--ink); pointer-events:none; } .g-sb svg{ display:block; } .g-home{ position:fixed; bottom:7px; left:50%; transform:translateX(-50%); width:120px; height:5px; border-radius:3px; background:color-mix(in srgb, var(--ink) 82%, transparent); z-index:60; pointer-events:none; } /* ---------- Kopfbereich: großer Titel, wird beim Scrollen zu Glas ---------- */ .g-head{ position:sticky; top:0; z-index:40; padding:52px 18px 10px; background:transparent; transition:background .25s, box-shadow .25s; } .g-head::after{ content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .25s; background:var(--glass-bg-strong); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); border-bottom:1px solid var(--glass-line); box-shadow:inset 0 1px 0 var(--glass-edge); } .g-head.is-scrolled::after{ opacity:1; } .g-head__row{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; } .g-head__kicker{ font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--brand); } .g-head__title{ font-family:var(--font-display); font-size:27px; font-weight:900; letter-spacing:-.02em; color:var(--ink); margin:2px 0 0; line-height:1.05; } .g-head__sub{ font-size:12.5px; color:var(--ink-muted); margin-top:3px; } /* Runde Glas-Icon-Buttons im Kopf (konzentrisch) */ .g-iconbtn{ width:40px; height:40px; border-radius:50%; border:1px solid var(--glass-line); position:relative; background:var(--glass-bg); color:var(--ink); display:grid; place-items:center; cursor:pointer; flex:0 0 auto; -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); box-shadow:inset 0 1px 0 var(--glass-edge), var(--shadow-sm); } .g-iconbtn .badge-dot{ position:absolute; top:8px; right:9px; width:8px; height:8px; border-radius:50%; background:var(--crit); border:2px solid var(--surface); } /* ---------- Schwebende Glas-Tab-Bar ---------- */ .g-tabbar{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:50; display:flex; gap:2px; padding:5px; border-radius:999px; width:calc(100% - 28px); max-width:412px; background:var(--tabbar-bg); border:1px solid var(--glass-line); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); box-shadow:inset 0 1px 0 var(--glass-edge), var(--glass-shadow); transition:width .3s cubic-bezier(.4,0,.2,1), padding .3s; } .g-tab{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:48px; padding:6px 4px; border-radius:999px; border:0; background:transparent; cursor:pointer; font:inherit; font-size:9.5px; font-weight:700; color:var(--tabbar-ink); text-decoration:none; transition:background .2s, color .2s; } .g-tab svg{ width:22px; height:22px; } .g-tab.on{ background:var(--tab-active-bg); color:var(--tab-active-ink); } /* Schrumpf-Zustand beim Scrollen (iOS 26: Tab-Bar gibt Inhalt Raum) */ .g-tabbar.mini{ width:auto; padding:4px; } .g-tabbar.mini .g-tab{ min-height:40px; padding:6px 13px; } .g-tabbar.mini .g-tab span{ display:none; } /* ---------- Schwebender Aktions-Button (Glas + Marke) ---------- */ .g-fab{ position:fixed; right:16px; bottom:96px; z-index:50; width:54px; height:54px; border-radius:50%; border:1px solid color-mix(in srgb, var(--brand) 40%, transparent); background:color-mix(in srgb, var(--brand) 88%, transparent); color:var(--brand-ink); display:grid; place-items:center; cursor:pointer; -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), var(--glass-shadow); } .g-fab svg{ width:24px; height:24px; } /* ---------- Inhalt ---------- */ .g-scroll{ padding:10px 14px 130px; display:flex; flex-direction:column; gap:12px; } /* Karten bleiben solide (Lesbarkeit — "Hintergründe verfestigen") */ .g-card{ background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-sm); overflow:hidden; } .g-card__head{ display:flex; align-items:center; gap:9px; padding:13px 16px 0; } .g-card__head .ic{ color:var(--ink-muted); } .g-card__head strong{ font-size:13.5px; font-weight:800; flex:1; } .g-card__link{ font-size:12px; font-weight:700; color:var(--brand); text-decoration:none; } .g-card__body{ padding:8px 16px 14px; } /* Hero-Karte in getöntem Markenglas */ .g-hero{ position:relative; border-radius:var(--r-glass); padding:18px; overflow:hidden; color:#fff; background:linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 74%, #000)); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), var(--shadow-md); } .g-hero__kicker{ font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; opacity:.85; } .g-hero__title{ font-family:var(--font-display); font-size:19px; font-weight:900; margin:3px 0 1px; } .g-hero__meta{ font-size:12px; opacity:.85; } .g-hero__cta{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; padding:10px 16px; min-height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.18); color:#fff; font:inherit; font-size:13px; font-weight:700; cursor:pointer; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:inset 0 1px 0 rgba(255,255,255,.35); } /* KPI-Kacheln */ .g-kpis{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; } .g-kpis--4{ grid-template-columns:repeat(4,1fr); } .g-kpi{ background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:13px 14px; box-shadow:var(--shadow-sm); text-decoration:none; color:inherit; display:block; } .g-kpi__lbl{ display:block; font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-subtle); } .g-kpi__num{ display:block; font-family:var(--font-display); font-size:26px; font-weight:900; line-height:1.05; margin-top:4px; color:var(--ink); } .g-kpi__hint{ display:block; font-size:11px; font-weight:600; margin-top:3px; color:var(--ink-muted); } .g-kpi__hint--up{ color:var(--ok); } .g-kpi__hint--warn{ color:var(--wait); } .g-kpi__hint--crit{ color:var(--crit); } /* Zeilen */ .g-row{ display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--line); min-height:44px; } .g-row:last-child{ border-bottom:0; } .g-row__ic{ width:36px; height:36px; border-radius:12px; display:grid; place-items:center; background:var(--surface-2); color:var(--ink-muted); flex:0 0 auto; } .g-row__b{ flex:1; min-width:0; } .g-row__t{ display:block; font-size:13.5px; font-weight:700; color:var(--ink); } .g-row__m{ display:block; font-size:11.5px; color:var(--ink-muted); margin-top:1px; } .g-ava{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-size:12px; color:#fff; background:var(--brand); flex:0 0 auto; } /* Pills */ .g-pill{ font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; flex:0 0 auto; } .g-pill--ok{ color:var(--ok); background:color-mix(in srgb, var(--ok) 14%, transparent); } .g-pill--wait{ color:var(--wait); background:color-mix(in srgb, var(--wait) 16%, transparent); } .g-pill--crit{ color:var(--crit); background:color-mix(in srgb, var(--crit) 13%, transparent); } .g-pill--info{ color:var(--info); background:color-mix(in srgb, var(--info) 13%, transparent); } .g-pill--neutral{ color:var(--ink-muted); background:var(--surface-2); border:1px solid var(--line); } /* Segmented Control aus Glas */ .g-seg{ display:flex; padding:3px; gap:2px; border-radius:999px; background:var(--glass-bg); border:1px solid var(--glass-line); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); box-shadow:inset 0 1px 0 var(--glass-edge); } .g-seg button{ flex:1; min-height:38px; border:0; border-radius:999px; background:transparent; color:var(--ink-muted); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; } .g-seg button[aria-pressed="true"]{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); } [data-theme="dark"] .g-seg button[aria-pressed="true"]{ background:#2A2A28; } /* Zu-/Absage-Chips (min. 44px Hit-Target) */ .g-chip{ font:inherit; font-size:12.5px; font-weight:700; min-height:44px; padding:9px 17px; border-radius:999px; border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink-muted); cursor:pointer; } .g-chip.on{ background:var(--brand); border-color:var(--brand); color:var(--brand-ink); } .g-chip.on--ok{ background:var(--ok); border-color:var(--ok); color:#fff; } /* Buttons */ .g-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:11px 18px; border-radius:999px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; text-decoration:none; } .g-btn--primary{ background:var(--brand); border-color:transparent; color:var(--brand-ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), var(--shadow-sm); } .g-btn--block{ width:100%; } /* Fortschritt */ .g-prog{ display:flex; height:6px; border-radius:3px; overflow:hidden; background:var(--surface-2); } /* Icons (Sprite-Konvention) */ .ic{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .ic--sm{ width:16px; height:16px; } .ic--lg{ width:24px; height:24px; } /* ============================================================ Overlay: bestehende Mobile-Chrome-Klassen (.kd-appheader / .kd-bottomnav aus tokens.css) in den Glas-Look ziehen — reines CSS, kein Template-Markup geaendert. Ersatzregeln uebernommen aus design/iOS26 Mannschaft Mobile.html (