/* ============================================================ KD-ELTERN · Eltern-Screens 1:1 nach design-handoff/Kickdesk-Eltern-Handoff Komponenten-Klassen VERBATIM aus den Prototypen (Start-Screens, Kalender, Nachrichten, Menü, Passwesen, Benachrichtigungen, Sicherheit). Tokens kommen aus tokens.css (--bg/--surface/--ink/--brand/--r-*…). Scope: .kd-proto (Inhalt) + body.kd-mobil (Mobile-Chrome-Overrides, gemeinsam fuer Eltern- UND Spieler-Rolle — page_class setzt kd-mobil). QA: design-handoff/Kickdesk-Eltern-Handoff/qa/qa_screens.py ============================================================ */ /* Status-Tokens Passwesen (Prototyp :root) */ body.kd-mobil{ --st-fehlt:var(--crit); --st-ange:var(--wait); --st-hoch:var(--info); --st-pruef:#7C3AED; --st-ok:var(--ok); --verein:#7C3AED; } [data-theme="dark"] body.kd-mobil{ --st-pruef:#A78BFA; --verein:#A78BFA; } .kd-proto{ font-family:var(--font-body); color:var(--ink); font-size:16px; line-height:normal; } /* app.css setzt global line-height 1.5 + text-rendering optimizeLegibility — Prototyp nutzt Browser-Defaults; sonst weicht jede Glyphen-Position ab. */ .kd-proto *{ line-height:normal; } .kd-proto, .kd-proto *{ text-rendering:auto; } body.kd-mobil .kd-bottomnav, body.kd-mobil .kd-bottomnav *{ text-rendering:auto; } /* Graustufen-Antialiasing wie im Prototyp-Render (statt LCD-Subpixel): opacity < 1 erzwingt Layer-Blending -> Chromium deaktiviert LCD-Text zuverlaessig (transform tat das nur bei nicht-opaken Layern und bricht zudem position:fixed der Kinder). Visuell nicht wahrnehmbar. */ .kd-proto{ transform:translateZ(0); } .kd-proto .greet__name{ line-height:1.1; } .kd-proto .ic{ width:20px; height:20px; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .kd-proto .ic--sm{ width:16px; height:16px; } .kd-proto .ic--lg{ width:24px; height:24px; } /* ---- Badges (kd-ds.css) ---- */ .kd-proto .badge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:5px 10px; border-radius:var(--r-pill); line-height:1; } .kd-proto .badge .dot{ width:7px; height:7px; border-radius:50%; } .kd-proto .badge--ok{ color:var(--ok); background:color-mix(in srgb,var(--ok) 14%,transparent);} .kd-proto .badge--ok .dot{background:var(--ok);} .kd-proto .badge--wait{ color:var(--wait); background:color-mix(in srgb,var(--wait) 16%,transparent);} .kd-proto .badge--wait .dot{background:var(--wait);} .kd-proto .badge--crit{ color:var(--crit); background:color-mix(in srgb,var(--crit) 14%,transparent);} .kd-proto .badge--crit .dot{background:var(--crit);} .kd-proto .badge--info{ color:var(--info); background:color-mix(in srgb,var(--info) 14%,transparent);} .kd-proto .badge--info .dot{background:var(--info);} .kd-proto .badge--neutral{ color:var(--neutral); background:color-mix(in srgb,var(--neutral) 16%,transparent);} .kd-proto .badge--neutral .dot{background:var(--neutral);} /* ---- Buttons (kd-ds.css) ---- */ .kd-proto .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-weight:600; font-size:14px; padding:11px 18px; border-radius:var(--r-pill); border:1px solid transparent; cursor:pointer; min-height:44px; white-space:nowrap; text-decoration:none; transition:filter .15s,border-color .15s,transform .1s; } .kd-proto .btn:active{ transform:translateY(1px); } .kd-proto .btn--primary{ background:var(--brand); color:var(--brand-ink); } .kd-proto .btn--primary:hover{ filter:brightness(1.06); } .kd-proto .btn--secondary{ background:var(--surface); color:var(--ink); border-color:var(--line-strong); } .kd-proto .btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); } .kd-proto .btn--sm{ padding:8px 13px; font-size:13px; min-height:38px; } .kd-proto .btn--block{ width:100%; } /* ---- Sektionen (kd-ds.css) ---- */ .kd-proto .sec{ margin-top:22px; } .kd-proto .stack{ display:flex; flex-direction:column; gap:8px; } .kd-proto .kd-seclabel{ display:flex; align-items:center; justify-content:space-between; margin:0 0 10px; } .kd-proto .kd-seclabel h4{ margin:0; font-size:13px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-subtle); } .kd-proto .kd-seclabel a{ font-size:13px; font-weight:600; color:var(--brand); text-decoration:none; display:inline-flex; align-items:center; gap:3px; } /* ---- Start: Greeting-Header (Start-Screens.html) ---- */ .kd-proto .greet{ display:flex; align-items:center; justify-content:space-between; padding:10px 2px 16px; } .kd-proto .greet__hi{ font-size:13px; color:var(--ink-muted); } .kd-proto .greet__name{ font-family:var(--font-display); font-size:23px; letter-spacing:-0.02em; line-height:1.1; } .kd-proto .greet__right{ display:flex; gap:8px; align-items:center; } .kd-proto .iconbtn{ width:40px; height:40px; border-radius:12px; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; color:var(--ink); position:relative; } .kd-proto .iconbtn .ic{ width:20px; height:20px; } .kd-proto .iconbtn .nb{ position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--crit); color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center; border:2px solid var(--bg); } .kd-proto .club-ava{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--brand); } .kd-proto .club-ava svg{ width:26px; height:26px; } /* ---- Start: Hero-Event (Start-Screens.html) ---- */ .kd-proto .hero-ev{ border-radius:var(--r-lg); padding:16px; background:color-mix(in srgb,var(--brand) 12%,var(--surface)); border:1px solid color-mix(in srgb,var(--brand) 26%,transparent); } .kd-proto .hero-ev--clickable{ cursor:pointer; } .kd-proto .hero-ev--clickable:active{ background:color-mix(in srgb,var(--brand) 18%,var(--surface)); } .kd-proto .hero-ev__top{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--brand); } .kd-proto .hero-ev__title{ font-size:19px; font-weight:700; margin-top:8px; } .kd-proto .hero-ev__meta{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:8px; font-size:13px; color:var(--ink-muted); } .kd-proto .hero-ev__meta span{ display:inline-flex; align-items:center; gap:5px; } .kd-proto .hero-ev__foot{ display:flex; align-items:center; gap:10px; margin-top:14px; } .kd-proto .hero-ev__resp{ font-size:13px; color:var(--ink-muted); } .kd-proto .hero-ev__resp b{ color:var(--ink); } /* ---- Start: Kind-Karte (Start-Screens.html) ---- */ .kd-proto .kid{ display:flex; align-items:center; gap:13px; padding:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); text-decoration:none; color:inherit; } .kd-proto .kid + .kid{ margin-top:8px; } .kd-proto .kid__ava{ width:46px; height:46px; border-radius:14px; flex:0 0 auto; display:grid; place-items:center; font-weight:700; color:#fff; font-size:15px; } .kd-proto .kid__body{ flex:1; min-width:0; } .kd-proto .kid__name{ font-size:15px; font-weight:700; } .kd-proto .kid__team{ font-size:12.5px; color:var(--ink-muted); margin-top:1px; } .kd-proto .kid__next{ font-size:12px; color:var(--ink-muted); margin-top:6px; display:flex; align-items:center; gap:5px; } /* ---- Start: Nachrichten-Zeile (Start-Screens.html) ---- */ .kd-proto .msg{ display:flex; gap:12px; padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); text-decoration:none; color:inherit; } .kd-proto .msg + .msg{ margin-top:8px; } .kd-proto .msg__ic{ width:38px; height:38px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center; } .kd-proto .msg__body{ flex:1; min-width:0; } .kd-proto .msg__top{ display:flex; align-items:center; gap:8px; } .kd-proto .msg__title{ font-size:14px; font-weight:600; } .kd-proto .msg__txt{ font-size:12.5px; color:var(--ink-muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .kd-proto .msg__time{ font-size:11px; color:var(--ink-subtle); margin-left:auto; flex:0 0 auto; } /* ============================================================ Mobile-Chrome (≤1024px): Prototyp zeigt keinen Topbar — Greet-Header übernimmt. BottomNav exakt wie .bnav im Prototyp. Desktop (>1024px) bleibt unverändert (Sidebar + Topbar). ============================================================ */ @media (max-width: 1024px) { body.kd-mobil .kd-topbar{ display:none !important; } body.kd-mobil .kd-appheader{ display:none !important; } body.kd-mobil{ background:var(--bg); } /* Safe-Area zentral (CLAUDE-CODE-Kinder-Hub Teil B): Inhalt beginnt unterhalb der Notch; unten Luft für Bottom-Nav + Home-Indicator. */ body.kd-mobil main.kd-mob-main, body.kd-mobil main{ padding:env(safe-area-inset-top, 0px) 0 calc(76px + env(safe-area-inset-bottom, 0px)) !important; margin:0; max-width:none; } /* Seiten MIT sticky apphead: der Kopf trägt env() selbst — kein doppeltes Padding am Scroll-Container (Bug-2-Vermeidung). */ body.kd-mobil main.kd-mob-main:has(.apphead), body.kd-mobil main:has(.apphead){ padding-top:0 !important; } /* Scrim über der Notch nur ohne apphead (sonst füllt der Kopf-BG sie) */ body.kd-mobil:not(:has(.apphead))::before{ content:''; position:fixed; top:0; left:0; right:0; height:env(safe-area-inset-top, 0px); background:var(--bg); z-index:60; pointer-events:none; } /* Ankerziele landen nicht unter dem sticky Kopf */ body.kd-mobil [id]{ scroll-margin-top:calc(env(safe-area-inset-top, 0px) + 64px); } /* Innenabstand wie .screen im Prototyp; Landscape: Notch seitlich */ body.kd-mobil .kd-proto{ padding:6px max(16px, env(safe-area-inset-left, 0px)) 0; padding-right:max(16px, env(safe-area-inset-right, 0px)); } body.kd-mobil .kd-proto--fullbleed{ padding:0; } /* BottomNav: schwebende, zentrierte Pille (Modern-Handoff). Position/Radius wie ios26-glass.css (hier nochmal gesetzt, siehe Begruendung oben), Material bewusst NAH-OPAK statt echtem Glas: bei den duennen Eltern/Spieler-Screens (viel Weissraum, Karten dicht unter der Pille) schimmerte der Box-Shadow der Karte darunter durch den durchsichtigen Blur als stoerende rechteckige "Geisterkante" unter der runden Pille durch (2026-07-09-Feedback "noch nicht schoen"). 96% Deckkraft behaelt den schwebenden Glas-Look (Rand/Schatten/Lichtkante), ohne dass Inhalt dahinter sichtbar wird. */ body.kd-mobil .kd-bottomnav{ display:flex !important; position:fixed; left:50%; right:auto; bottom:22px; transform:translateX(-50%) translateZ(0); z-index:70; width:calc(100% - 28px); max-width:412px; border-radius:999px; overflow:hidden; background:color-mix(in srgb, var(--surface) 96%, transparent); border:1px solid var(--glass-line, var(--line)); -webkit-backdrop-filter:blur(var(--glass-blur, 16px)) saturate(var(--glass-sat, 150%)); backdrop-filter:blur(var(--glass-blur, 16px)) saturate(var(--glass-sat, 150%)); box-shadow:inset 0 1px 0 var(--glass-edge, rgba(255,255,255,.6)), var(--glass-shadow, 0 8px 32px rgba(15,31,20,.14)); padding:5px !important; gap:0; } body.kd-mobil .kd-bottomnav a, body.kd-mobil .kd-bottomnav button{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 2px; border:0; border-radius:999px; color:var(--tabbar-ink, var(--ink-subtle)); font-family:var(--font-body); font-size:10.5px; font-weight:600; text-decoration:none; cursor:pointer; min-height:44px; line-height:normal; } body.kd-mobil .kd-bottomnav a svg, body.kd-mobil .kd-bottomnav button svg{ width:23px; height:23px; } body.kd-mobil .kd-bottomnav a[aria-current="page"]{ background:var(--tab-active-bg, color-mix(in srgb,var(--brand) 13%,transparent)); color:var(--tab-active-ink, var(--brand)); } body.kd-mobil .kd-bottomnav a[aria-current="page"]::before{ display:none; } } /* ============================================================ Screen 04 · Termine (Prototyp Kickdesk Kalender.html, Rolle Eltern) ============================================================ */ /* transform:none — sonst wird .kd-proto (transform:translateZ(0)) zum Containing Block fuer den position:fixed-FAB (Neue Nachricht), der dann relativ zum (bei kurzer Liste niedrigen) Wrapper statt zum Viewport positioniert wird und die Zeilen-Aktionen (Loeschen/Archivieren) verdeckt. */ .kd-proto--fullbleed{ padding:0; transform:none; } .kd-proto .apphead{ background:var(--surface); border-bottom:1px solid var(--line); padding:calc(var(--apphead-pt, 6px) + env(safe-area-inset-top, 0px)) var(--apphead-px, 14px) var(--apphead-pb, 12px); position:sticky; top:0; z-index:5; } .kd-proto .apphead__row{ display:flex; align-items:center; gap:10px; } .kd-proto .apphead__title{ flex:1; } .kd-proto .apphead__title h2{ margin:0; font-size:20px; font-weight:700; letter-spacing:-0.02em; } .kd-proto .apphead__title .sub{ font-size:12px; color:var(--ink-muted); margin-top:1px; } .kd-proto .apphead .nb{ top:-5px; right:-5px; min-width:16px; height:16px; border-radius:8px; background:var(--brand); color:var(--brand-ink); border:2px solid var(--surface); } .kd-proto .kalscreen{ padding:16px 14px 80px; } .kd-proto .daygrp{ margin-top:18px; } .kd-proto .daygrp:first-child{ margin-top:0; } .kd-proto .dayhd{ display:flex; align-items:baseline; gap:8px; margin-bottom:9px; padding-left:2px; } .kd-proto .dayhd .d{ font-size:13px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); } .kd-proto .dayhd .d.today{ color:var(--brand); } .kd-proto .dayhd .w{ font-size:12px; color:var(--ink-subtle); } .kd-proto .ev{ display:flex; gap:12px; padding:13px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); } .kd-proto .ev + .ev{ margin-top:8px; } .kd-proto .ev--clickable{ cursor:pointer; } .kd-proto .ev--clickable:active{ background:var(--surface-2); } .kd-proto .ev__time{ flex:0 0 auto; width:44px; text-align:center; } .kd-proto .ev__time .h{ font-size:15px; font-weight:700; letter-spacing:-0.02em; } .kd-proto .ev__time .dur{ font-size:10.5px; color:var(--ink-subtle); margin-top:1px; } .kd-proto .ev__bar{ width:3px; border-radius:2px; flex:0 0 auto; background:var(--neutral); } .kd-proto .ev__bar--train{ background:var(--brand); } .kd-proto .ev__bar--spiel{ background:var(--info); } .kd-proto .ev__bar--event{ background:var(--wait); } .kd-proto .ev__bar--abgesagt{ background:var(--crit); opacity:.5; } .kd-proto .ev__body{ flex:1; min-width:0; } .kd-proto .ev__title{ font-size:14.5px; font-weight:600; display:flex; align-items:center; gap:7px; } .kd-proto .ev__meta{ font-size:12px; color:var(--ink-muted); margin-top:3px; display:flex; flex-wrap:wrap; gap:4px 12px; } .kd-proto .ev__meta span{ display:inline-flex; align-items:center; gap:4px; } .kd-proto .ev__meta a{ display:inline-flex; align-items:center; gap:4px; color:var(--info); text-decoration:none; font-weight:600; } .kd-proto .ev__tag{ font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2px 7px; border-radius:var(--r-pill); } .kd-proto .ev__tag--train{ color:var(--brand); background:color-mix(in srgb,var(--brand) 14%,transparent); } .kd-proto .ev__tag--spiel{ color:var(--info); background:color-mix(in srgb,var(--info) 14%,transparent); } .kd-proto .ev__tag--event{ color:var(--wait); background:color-mix(in srgb,var(--wait) 16%,transparent); } .kd-proto .ev__tag--abgesagt{ color:var(--crit); background:color-mix(in srgb,var(--crit) 14%,transparent); } .kd-proto .ev__right{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:0 0 auto; } .kd-proto .ev--abgesagt .ev__title{ text-decoration:line-through; color:var(--ink-muted); } .kd-proto .ev--pause{ background:color-mix(in srgb,var(--crit) 5%,var(--surface)); } /* Zu-/Absage-Buttons: visuell kompakt, Hit-Target 44px (Padding-Trick) */ .kd-proto .ev__acts{ display:flex; } .kd-proto .evbtn{ width:44px; height:44px; margin:-11px 0; padding:0; display:grid; place-items:center; background:transparent; border:none; cursor:pointer; } .kd-proto .evbtn span{ width:32px; height:22px; border-radius:11px; border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink-muted); display:grid; place-items:center; } .kd-proto .evbtn .ic{ width:13px; height:13px; } .kd-proto .evbtn--zu span{ color:var(--ok); border-color:color-mix(in srgb,var(--ok) 50%,transparent); } .kd-proto .evbtn--ab span{ color:var(--crit); border-color:color-mix(in srgb,var(--crit) 50%,transparent); } .kd-proto .evbtn:active span{ transform:scale(.94); } .kd-proto .ev__right .badge{ cursor:pointer; } /* Filter-Bottom-Sheet (Prototyp .sheet) */ /* pointer-events: Wrap durchlässig (QA klickt Termin-Buttons bei offenem Sheet), nur das Sheet selbst fängt Eingaben. */ .kd-proto .sheet-wrap{ position:fixed; inset:0; z-index:1000; display:none; pointer-events:none; } .kd-proto .sheet-wrap.open{ display:block; } .kd-proto .sheet-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.4); } .kd-proto .sheet{ position:absolute; left:0; right:0; bottom:0; background:var(--surface); border-radius:var(--r-xl) var(--r-xl) 0 0; box-shadow:var(--shadow-lg); padding:8px 18px calc(22px + env(safe-area-inset-bottom, 0px)); pointer-events:auto; } .kd-proto .sheet__grip{ width:40px; height:4px; border-radius:2px; background:var(--line-strong); margin:8px auto 14px; } .kd-proto .sheet__hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .kd-proto .sheet__hd h3{ margin:0; font-size:17px; } .kd-proto .flbl{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-subtle); margin:14px 0 8px; } .kd-proto .chiprow{ display:flex; flex-wrap:wrap; gap:8px; } .kd-proto .chip{ font-size:13px; font-weight:600; padding:8px 13px; border-radius:var(--r-pill); border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-muted); cursor:pointer; text-decoration:none; min-height:36px; display:inline-flex; align-items:center; } .kd-proto .chip--on{ background:var(--brand); color:var(--brand-ink); border-color:var(--brand); } /* [hidden] gewinnt gegen Komponenten-display (acts/nb-Badge) */ .kd-proto [hidden]{ display:none !important; } /* Overlay-Wrapper ist SELBST .kd-proto (kein Nachfahre) -> obige Regel greift nicht. Eigene Regel, damit der Confirm-Sheet (z.B. Konto löschen) nie offen im Seitenfluss landet, falls die UA-[hidden]-Regel überstimmt wird (#433). */ .kd-proto--overlay[hidden]{ display:none !important; } /* kd-bnav12 (12px-Bottom-Padding der Prototyp-Nav) ist seit der schwebenden Glas-Pille (2026-07-09) obsolet — die Pille klebt nicht mehr am Rand, die Safe-Area-Zugabe machte sie auf Menue-Seiten wieder zu hoch. Die page_class bleibt in den Templates harmlos stehen. */ /* ============================================================ Screen 06 · Nachrichten (Prototyp Kickdesk Nachrichten.html) ============================================================ */ /* Nur 06 (h2 direkt in der Row) — 04 hat h2 in .apphead__title (20px) */ .kd-proto .apphead__row > h2{ flex:1; margin:0; font-size:22px; font-weight:700; letter-spacing:-0.02em; } .kd-proto .filterchips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; } .kd-proto .fchip{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-muted); font:inherit; font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:var(--r-pill); cursor:pointer; min-height:34px; } .kd-proto .fchip[aria-pressed="true"]{ background:var(--ink); color:var(--bg); border-color:var(--ink); } .kd-proto .fchip .cnt{ min-width:17px; height:17px; padding:0 4px; border-radius:9px; font-size:10.5px; font-weight:700; display:grid; place-items:center; background:var(--brand); color:var(--brand-ink); } .kd-proto .fchip[aria-pressed="true"] .cnt{ background:var(--bg); color:var(--ink); } .kd-proto .msgscreen{ padding:0 0 80px; } .kd-proto .mrow{ display:flex; gap:12px; padding:14px; border-bottom:1px solid var(--line); cursor:pointer; background:var(--bg); text-decoration:none; color:inherit; } .kd-proto .mrow:hover{ background:var(--surface-2); } .kd-proto .mrow--unread{ background:color-mix(in srgb,var(--brand) 5%,var(--bg)); } .kd-proto .mrow__ic{ width:44px; height:44px; border-radius:13px; flex:0 0 auto; display:grid; place-items:center; position:relative; } .kd-proto .mrow__ic .ic{ width:22px; height:22px; } .kd-proto .cat-verein{ background:color-mix(in srgb,var(--verein) 15%,transparent); color:var(--verein); } .kd-proto .cat-team{ background:color-mix(in srgb,var(--info) 15%,transparent); color:var(--info); } .kd-proto .cat-system{ background:var(--surface-2); color:var(--ink-muted); } .kd-proto .mrow__body{ flex:1; min-width:0; } .kd-proto .mrow__top{ display:flex; align-items:center; gap:8px; } .kd-proto .mrow__sender{ font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .kd-proto .mrow__time{ font-size:11.5px; color:var(--ink-subtle); margin-left:auto; flex:0 0 auto; } .kd-proto .mrow__cat{ font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:2px 6px; border-radius:var(--r-pill); flex:0 0 auto; } .kd-proto .cat-verein-tag{ color:var(--verein); background:color-mix(in srgb,var(--verein) 13%,transparent); } .kd-proto .cat-team-tag{ color:var(--info); background:color-mix(in srgb,var(--info) 13%,transparent); } .kd-proto .cat-system-tag{ color:var(--ink-muted); background:var(--surface-2); } .kd-proto .cat-passwesen{ background:color-mix(in srgb,var(--wait) 15%,transparent); color:var(--wait); } .kd-proto .cat-passwesen-tag{ color:var(--wait); background:color-mix(in srgb,var(--wait) 13%,transparent); } .kd-proto .mrow__title{ font-size:14px; font-weight:600; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .kd-proto .mrow--unread .mrow__title{ font-weight:700; } .kd-proto .mrow__prev{ font-size:12.5px; color:var(--ink-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .kd-proto .mrow__rail{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:0 0 auto; justify-content:center; } .kd-proto .unreaddot{ width:9px; height:9px; border-radius:50%; background:var(--brand); } /* mrow-item: Wrapper für Nachrichtenzeile + Aktions-Buttons */ .kd-proto .mrow-item{ position:relative; border-bottom:1px solid var(--line); } .kd-proto .mrow-item .mrow{ border-bottom:none; padding-right:96px; } .kd-proto .mrow-item--arch .mrow{ opacity:.55; } .kd-proto .mrow-acts{ position:absolute; right:0; top:0; bottom:0; display:flex; align-items:center; gap:4px; padding:0 8px; } .kd-proto .mrow-act{ width:38px; height:38px; border:none; border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink-muted); display:grid; place-items:center; cursor:pointer; padding:0; flex:0 0 auto; } .kd-proto .mrow-act:hover{ background:var(--surface-3, var(--line)); } .kd-proto .mrow-act--del:hover{ background:color-mix(in srgb,var(--crit) 15%,transparent); color:var(--crit); } .kd-proto .mrow-act--arch:hover{ background:color-mix(in srgb,var(--info) 15%,transparent); color:var(--info); } .kd-proto .mrow-act .ic{ width:18px; height:18px; } .kd-proto .empty{ display:none; flex-direction:column; align-items:center; text-align:center; padding:60px 30px; } .kd-proto .empty.show{ display:flex; } .kd-proto .empty__ic{ width:64px; height:64px; border-radius:18px; background:var(--surface-2); color:var(--ink-muted); display:grid; place-items:center; margin-bottom:16px; } .kd-proto .empty__ic .ic{ width:30px; height:30px; } .kd-proto .empty h3{ font-size:18px; margin:0 0 6px; } .kd-proto .empty p{ font-size:13.5px; color:var(--ink-muted); margin:0 0 18px; max-width:30ch; } /* Compose-FAB: fixiert über der BottomNav (Prototyp: 18px über .screen-Ende) */ .kd-proto .fab{ position:fixed; right:18px; bottom:calc(88px + env(safe-area-inset-bottom, 0px)); height:50px; padding:0 18px; border-radius:16px; border:none; background:var(--brand); color:var(--brand-ink); display:inline-flex; align-items:center; gap:8px; font:inherit; font-weight:700; font-size:14px; cursor:pointer; box-shadow:var(--shadow-md); z-index:60; } .kd-proto .fab .ic{ width:20px; height:20px; } .kd-proto .sheet__sub{ font-size:12.5px; color:var(--ink-muted); margin:0 0 12px; } .kd-proto .recip{ display:flex; align-items:center; gap:13px; padding:13px; border:1px solid var(--line); border-radius:var(--r-md); cursor:pointer; text-decoration:none; color:inherit; } .kd-proto .recip + .recip{ margin-top:8px; } .kd-proto .recip:hover{ background:var(--surface-2); } .kd-proto .recip__ic{ width:40px; height:40px; border-radius:12px; flex:0 0 auto; display:grid; place-items:center; } .kd-proto .recip__ic .ic{ width:20px; height:20px; } .kd-proto .recip__body{ flex:1; min-width:0; } .kd-proto .recip__t{ font-size:14.5px; font-weight:600; } .kd-proto .recip__s{ font-size:12px; color:var(--ink-muted); margin-top:1px; } .kd-proto .recip__go{ color:var(--ink-subtle); flex:0 0 auto; } .kd-proto .rc-team{ background:color-mix(in srgb,var(--info) 15%,transparent); color:var(--info); } .kd-proto .rc-trainer{ background:color-mix(in srgb,var(--brand) 14%,transparent); color:var(--brand); } .kd-proto .rc-pass{ background:color-mix(in srgb,var(--crit) 13%,transparent); color:var(--crit); } .kd-proto .rc-office{ background:color-mix(in srgb,var(--verein) 14%,transparent); color:var(--verein); } .kd-proto .rc-person{ background:var(--surface-2); color:var(--ink-muted); } /* Overlay-Wrapper für fixed-positionierte Kinder (FAB/Sheets): .kd-proto hat transform (AA-Fix) — das bricht position:fixed der Kinder. Der Overlay-Wrapper bleibt untransformiert; AA-Layer je Kind. */ .kd-proto--overlay{ transform:none; padding:0 !important; } /* Composited Layer nutzt LCD-Text nur, wenn opake Flaechen ihn komplett bedecken — 99%-transparente Hintergruende (visuell identisch) verhindern das fuer vollflaechige Bereiche (apphead/mrow/bottomnav). */ .kd-proto .apphead{ background:color-mix(in srgb, var(--surface) 99%, transparent); } .kd-proto .mrow{ background:color-mix(in srgb, var(--bg) 99%, transparent); } .kd-proto .mrow--unread{ background:rgba(31, 191, 61, 0); background:color-mix(in srgb, color-mix(in srgb, var(--brand) 5%, var(--bg)) 99%, transparent); } /* ============================================================ Screen 07 · Dokumente (Prototyp Kickdesk Passwesen.html, Eltern) ============================================================ */ .kd-proto .apphead__sub{ font-size:12px; color:var(--ink-muted); margin-top:1px; } .kd-proto .kidsel{ display:flex; gap:7px; margin-top:12px; } .kd-proto .kidchip{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-muted); font:inherit; font-size:13px; font-weight:600; padding:6px 12px 6px 6px; border-radius:var(--r-pill); cursor:pointer; text-decoration:none; min-height:36px; } .kd-proto .kidchip[aria-pressed="true"]{ border-color:var(--brand); color:var(--ink); background:color-mix(in srgb,var(--brand) 8%,transparent); } .kd-proto .kidchip .av{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:700; color:#fff; } .kd-proto .sb{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:var(--r-pill); line-height:1; } .kd-proto .sb .dot{ width:7px; height:7px; border-radius:50%; } .kd-proto .sb-fehlt{ color:var(--st-fehlt); background:color-mix(in srgb,var(--st-fehlt) 14%,transparent); } .kd-proto .sb-fehlt .dot{ background:var(--st-fehlt); } .kd-proto .sb-ange{ color:var(--st-ange); background:color-mix(in srgb,var(--st-ange) 16%,transparent); } .kd-proto .sb-ange .dot{ background:var(--st-ange); } .kd-proto .sb-hoch{ color:var(--st-hoch); background:color-mix(in srgb,var(--st-hoch) 14%,transparent); } .kd-proto .sb-hoch .dot{ background:var(--st-hoch); } .kd-proto .sb-pruef{ color:var(--st-pruef); background:color-mix(in srgb,var(--st-pruef) 14%,transparent); } .kd-proto .sb-pruef .dot{ background:var(--st-pruef); } .kd-proto .sb-ok{ color:var(--st-ok); background:color-mix(in srgb,var(--st-ok) 14%,transparent); } .kd-proto .sb-ok .dot{ background:var(--st-ok); } .kd-proto .summary{ display:flex; gap:13px; align-items:center; padding:15px; border-radius:var(--r-lg); background:color-mix(in srgb,var(--st-fehlt) 8%,var(--surface)); border:1px solid color-mix(in srgb,var(--st-fehlt) 28%,transparent); } .kd-proto .summary.done{ background:color-mix(in srgb,var(--st-ok) 8%,var(--surface)); border-color:color-mix(in srgb,var(--st-ok) 28%,transparent); } .kd-proto .summary.pending{ background:color-mix(in srgb,var(--st-ange) 8%,var(--surface)); border-color:color-mix(in srgb,var(--st-ange) 28%,transparent); } .kd-proto .summary__ic{ width:44px; height:44px; border-radius:13px; flex:0 0 auto; display:grid; place-items:center; background:color-mix(in srgb,var(--st-fehlt) 15%,transparent); color:var(--st-fehlt); } .kd-proto .summary.done .summary__ic{ background:color-mix(in srgb,var(--st-ok) 15%,transparent); color:var(--st-ok); } .kd-proto .summary.pending .summary__ic{ background:color-mix(in srgb,var(--st-ange) 15%,transparent); color:var(--st-ange); } .kd-proto .summary__t{ font-size:15px; font-weight:700; } .kd-proto .summary__s{ font-size:12.5px; color:var(--ink-muted); margin-top:2px; } .kd-proto .subhd{ display:flex; align-items:center; justify-content:space-between; margin:20px 0 10px; } .kd-proto .subhd h4{ margin:0; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-subtle); } .kd-proto .doc{ display:flex; gap:13px; padding:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); } .kd-proto .doc + .doc{ margin-top:8px; } .kd-proto .doc__ic{ width:40px; height:40px; border-radius:12px; flex:0 0 auto; display:grid; place-items:center; background:var(--surface-2); color:var(--ink-muted); } .kd-proto .doc__body{ flex:1; min-width:0; } .kd-proto .doc__top{ display:flex; align-items:center; gap:8px; } .kd-proto .doc__name{ font-size:14.5px; font-weight:600; } .kd-proto .doc__why{ font-size:12px; color:var(--ink-muted); margin-top:3px; } .kd-proto .doc__act{ margin-top:10px; } /* ============================================================ Screen 03 · Menü (Prototyp Kickdesk Menü.html, Rolle Eltern) ============================================================ */ .kd-proto .pcard{ display:flex; align-items:center; gap:14px; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); text-decoration:none; color:inherit; } .kd-proto .pcard__ava{ width:54px; height:54px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; font-weight:800; font-size:18px; color:var(--brand-ink); background:var(--brand); } .kd-proto .pcard__body{ flex:1; min-width:0; } .kd-proto .pcard__name{ font-size:17px; font-weight:700; } .kd-proto .pcard__role{ font-size:12.5px; color:var(--ink-muted); margin-top:2px; display:inline-flex; align-items:center; gap:6px; } .kd-proto .pcard__switch{ display:flex; align-items:center; gap:4px; font-size:12.5px; font-weight:600; color:var(--brand); margin-top:8px; cursor:pointer; } .kd-proto .pcard__switch .ic{ width:15px; height:15px; } .kd-proto .pcard__go{ color:var(--ink-subtle); flex:0 0 auto; } .kd-proto .push{ display:flex; align-items:center; gap:13px; padding:15px; border-radius:var(--r-lg); margin-top:14px; background:color-mix(in srgb,var(--brand) 10%,var(--surface)); border:1px solid color-mix(in srgb,var(--brand) 26%,transparent); } .kd-proto .push__ic{ width:42px; height:42px; border-radius:12px; flex:0 0 auto; display:grid; place-items:center; background:var(--brand); color:var(--brand-ink); } .kd-proto .push__body{ flex:1; } .kd-proto .push__t{ font-size:14.5px; font-weight:700; } .kd-proto .push__s{ font-size:12px; color:var(--ink-muted); margin-top:2px; } .kd-proto .toggle{ width:48px; height:29px; border-radius:15px; border:none; background:var(--line-strong); position:relative; cursor:pointer; flex:0 0 auto; padding:0; } .kd-proto .toggle::after{ content:""; position:absolute; top:3px; left:3px; width:23px; height:23px; border-radius:50%; background:#fff; transition:transform .18s; } .kd-proto .toggle[aria-pressed="true"]{ background:var(--brand); } .kd-proto .toggle[aria-pressed="true"]::after{ transform:translateX(19px); } .kd-proto .langrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); margin-top:12px; } .kd-proto .langrow__l{ display:flex; align-items:center; gap:11px; font-size:14.5px; font-weight:600; } .kd-proto .langrow__l .ic{ color:var(--ink-muted); } .kd-proto .langseg{ display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; } .kd-proto .langseg a, .kd-proto .langseg button{ border:none; background:transparent; color:var(--ink-muted); font:inherit; font-size:12.5px; font-weight:700; padding:6px 12px; border-radius:var(--r-pill); cursor:pointer; } .kd-proto .langseg a[aria-pressed="true"], .kd-proto .langseg button[aria-pressed="true"]{ background:var(--brand); color:var(--brand-ink); } .kd-proto .group{ margin-top:22px; } .kd-proto .group__lbl{ font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-subtle); padding:0 4px 8px; } .kd-proto .group__items{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; } .kd-proto .mi{ display:flex; align-items:center; gap:13px; padding:13px 14px; cursor:pointer; text-decoration:none; color:inherit; min-height:44px; } .kd-proto .mi + .mi{ border-top:1px solid var(--line); } .kd-proto .mi:hover{ background:var(--surface-2); } .kd-proto .mi__ic{ width:34px; height:34px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center; background:var(--surface-2); color:var(--ink-muted); } .kd-proto .mi__ic .ic{ width:19px; height:19px; } .kd-proto .mi__t{ flex:1; font-size:14.5px; font-weight:600; } .kd-proto .mi__go{ color:var(--ink-subtle); flex:0 0 auto; } .kd-proto .signout{ display:block; width:100%; margin-top:20px; padding:13px; border-radius:var(--r-md); border:1px solid var(--line-strong); background:var(--surface); color:var(--crit); font:inherit; font-weight:600; font-size:14px; cursor:pointer; text-align:center; text-decoration:none; } .kd-proto .ver{ text-align:center; font-size:11.5px; color:var(--ink-subtle); margin-top:14px; } /* ============================================================ Screen 08 · Benachrichtigungen (Prototyp Kickdesk Benachrichtigungen.html) ============================================================ */ body.kd-mobil{ --sev-krit:var(--crit); --sev-antw:var(--wait); --sev-wich:var(--info); --sev-info:var(--neutral); } .kd-proto .apphead__ey{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); } .kd-proto .chleg{ display:flex; gap:8px; margin-top:12px; } .kd-proto .chleg__item{ flex:1; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:10px 11px; } .kd-proto .chleg__h{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; } .kd-proto .chleg__h .ic{ width:15px; height:15px; } .kd-proto .chleg__s{ font-size:11px; color:var(--ink-muted); margin-top:3px; line-height:1.35; } .kd-proto .grouplbl{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-subtle); margin:20px 4px 9px; display:flex; align-items:center; gap:7px; } .kd-proto .grouplbl .sd{ width:8px; height:8px; border-radius:50%; } .kd-proto .grouplbl .cnt{ margin-left:auto; font-weight:600; color:var(--ink-subtle); letter-spacing:0; text-transform:none; } .kd-proto .nrow{ display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--surface); border:1px solid var(--line); } .kd-proto .nrow:first-child{ border-radius:var(--r-md) var(--r-md) 0 0; } .kd-proto .nrow:last-child{ border-radius:0 0 var(--r-md) var(--r-md); } .kd-proto .nrow + .nrow{ border-top:0; } .kd-proto .nrow__body{ flex:1; min-width:0; } .kd-proto .nrow__t{ font-size:13.5px; font-weight:600; line-height:1.3; } .kd-proto .nrow__s{ font-size:11.5px; color:var(--ink-muted); margin-top:2px; display:flex; align-items:center; gap:5px; } .kd-proto .modeseg{ display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:2px; flex:0 0 auto; } .kd-proto .modeseg button{ border:none; background:transparent; color:var(--ink-subtle); font:inherit; font-size:11px; font-weight:700; padding:6px 9px; border-radius:var(--r-pill); cursor:pointer; min-width:38px; } .kd-proto .modeseg button[aria-pressed="true"]{ color:var(--ink); box-shadow:var(--shadow-sm); } .kd-proto .modeseg button[data-mode="push"][aria-pressed="true"]{ background:var(--brand); color:var(--brand-ink); box-shadow:none; } .kd-proto .modeseg button[data-mode="inbox"][aria-pressed="true"]{ background:var(--surface); } .kd-proto .modeseg button[data-mode="off"][aria-pressed="true"]{ background:var(--surface); } .kd-proto .locked{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--crit); background:color-mix(in srgb,var(--crit) 13%,transparent); padding:6px 10px; border-radius:var(--r-pill); flex:0 0 auto; } .kd-proto .locked .ic{ width:13px; height:13px; } .kd-proto .opt{ display:flex; align-items:center; gap:13px; padding:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); margin-top:10px; } .kd-proto .opt__ic{ width:38px; height:38px; border-radius:11px; flex:0 0 auto; display:grid; place-items:center; background:var(--surface-2); color:var(--ink-muted); } .kd-proto .opt__body{ flex:1; min-width:0; } .kd-proto .opt__t{ font-size:14px; font-weight:600; } .kd-proto .opt__s{ font-size:11.5px; color:var(--ink-muted); margin-top:2px; } .kd-proto .privacy{ display:flex; gap:10px; align-items:flex-start; margin-top:18px; padding:13px 14px; border-radius:var(--r-md); background:color-mix(in srgb,var(--ok) 9%,var(--surface)); border:1px solid color-mix(in srgb,var(--ok) 22%,transparent); } .kd-proto .privacy .ic{ width:18px; height:18px; color:var(--ok); flex:0 0 auto; margin-top:1px; } .kd-proto .privacy p{ margin:0; font-size:12px; color:var(--ink-muted); line-height:1.45; } .kd-proto .privacy b{ color:var(--ink); } /* Screen 05 · Teamseite: Aktionsleiste (Prototyp .actionbar) — fixiert über der BottomNav */ .kd-proto .kd-actionbar{ position:fixed; left:0; right:0; bottom:calc(70px + env(safe-area-inset-bottom, 0px)); z-index:60; display:flex; gap:10px; padding:10px 14px; background:var(--surface); border-top:1px solid var(--line); } .kd-proto .kd-actionbar .btn{ flex:1; } /* ============================================================ Screen 10 · Sicherheit & Datenschutz (Prototyp) ============================================================ */ .kd-proto .row{ display:flex; align-items:center; gap:13px; padding:13px 14px; } .kd-proto .row + .row{ border-top:1px solid var(--line); } .kd-proto .row__ic{ width:36px; height:36px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center; background:var(--surface-2); color:var(--ink-muted); } .kd-proto .row__ic .ic{ width:19px; height:19px; } .kd-proto .row__body{ flex:1; min-width:0; } .kd-proto .row__t{ font-size:14px; font-weight:600; } .kd-proto .row__s{ font-size:11.5px; color:var(--ink-muted); margin-top:2px; } .kd-proto .row__go{ color:var(--ink-subtle); flex:0 0 auto; cursor:pointer; } .kd-proto .row__act{ border:none; background:transparent; color:var(--brand); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; flex:0 0 auto; padding:6px 4px; min-height:44px; margin:-8px 0; } .kd-proto .row__act--danger{ color:var(--crit); } /* aria-checked-Variante des Toggles (role=switch, QA-Kontrakt) */ .kd-proto .toggle[aria-checked="true"]{ background:var(--brand); } .kd-proto .toggle[aria-checked="true"]::after{ transform:translateX(19px); } /* 2FA-Karte; --aus = neutral (Feature noch nicht eingerichtet) */ .kd-proto .fa{ display:flex; align-items:center; gap:13px; padding:15px; border-radius:var(--r-lg); background:color-mix(in srgb,var(--ok) 10%,var(--surface)); border:1px solid color-mix(in srgb,var(--ok) 26%,transparent); } .kd-proto .fa__ic{ width:42px; height:42px; border-radius:12px; flex:0 0 auto; display:grid; place-items:center; background:var(--ok); color:#fff; } .kd-proto .fa__body{ flex:1; min-width:0; } .kd-proto .fa__t{ font-size:14.5px; font-weight:700; display:flex; align-items:center; gap:7px; } .kd-proto .fa__s{ font-size:12px; color:var(--ink-muted); margin-top:2px; } .kd-proto .fa__badge{ font-size:10.5px; font-weight:700; color:var(--ok); background:color-mix(in srgb,var(--ok) 16%,transparent); padding:2px 8px; border-radius:var(--r-pill); } .kd-proto .fa--aus{ background:color-mix(in srgb,var(--neutral) 8%,var(--surface)); border-color:color-mix(in srgb,var(--neutral) 24%,transparent); } .kd-proto .fa--aus .fa__ic{ background:var(--surface-2); color:var(--ink-muted); } .kd-proto .fa--aus .fa__badge{ color:var(--ink-muted); background:var(--surface-2); } /* Sichtbarkeits-Karte */ .kd-proto .vis{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; } .kd-proto .visrow{ display:flex; align-items:flex-start; gap:12px; padding:13px 14px; } .kd-proto .visrow + .visrow{ border-top:1px solid var(--line); } .kd-proto .visrow__ic{ width:34px; height:34px; border-radius:9px; flex:0 0 auto; display:grid; place-items:center; } .kd-proto .visrow__ic .ic{ width:18px; height:18px; } .kd-proto .visrow--can .visrow__ic{ background:color-mix(in srgb,var(--info) 13%,transparent); color:var(--info); } .kd-proto .visrow--no .visrow__ic{ background:var(--surface-2); color:var(--ink-subtle); } .kd-proto .visrow__body{ flex:1; min-width:0; } .kd-proto .visrow__who{ font-size:13.5px; font-weight:600; } .kd-proto .visrow__what{ font-size:11.5px; color:var(--ink-muted); margin-top:2px; line-height:1.4; } .kd-proto .visrow__tag{ font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:var(--r-pill); flex:0 0 auto; align-self:center; } .kd-proto .visrow--can .visrow__tag{ color:var(--info); background:color-mix(in srgb,var(--info) 13%,transparent); } .kd-proto .visrow--no .visrow__tag{ color:var(--ink-subtle); background:var(--surface-2); } /* Danger-Zone */ .kd-proto .danger{ margin-top:20px; border:1px solid color-mix(in srgb,var(--crit) 30%,transparent); border-radius:var(--r-md); overflow:hidden; } .kd-proto .danger__lbl{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--crit); padding:12px 14px 8px; background:color-mix(in srgb,var(--crit) 7%,var(--surface)); } .kd-proto .danger .group__items{ border:0; border-radius:0; } /* Confirm-Sheet + Toast (Prototyp .scrim/.sheet/.toast) */ .kd-proto .scrim{ position:fixed; inset:0; background:rgba(0,0,0,0.42); opacity:0; pointer-events:none; transition:opacity .2s; z-index:1000; } .kd-proto .scrim.show{ opacity:1; pointer-events:auto; } .kd-proto .confirmsheet{ position:fixed; left:0; right:0; bottom:0; z-index:1001; background:var(--surface); border-radius:var(--r-xl) var(--r-xl) 0 0; padding:8px 18px max(18px, env(safe-area-inset-bottom)); transform:translateY(110%); transition:transform .24s cubic-bezier(.2,.8,.2,1); box-shadow:0 -10px 40px rgba(0,0,0,.2); } .kd-proto .confirmsheet.show{ transform:translateY(0); } .kd-proto .sheet__grab{ width:40px; height:4px; border-radius:2px; background:var(--line-strong); margin:6px auto 14px; } .kd-proto .sheet__ic{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; margin:0 auto 12px; } .kd-proto .sheet__t{ font-size:17px; font-weight:700; text-align:center; } .kd-proto .sheet__s{ font-size:13px; color:var(--ink-muted); text-align:center; line-height:1.5; margin:7px auto 18px; max-width:32ch; } .kd-proto .sheet__btns{ display:flex; flex-direction:column; gap:9px; } .kd-proto .kd-toast{ position:fixed; left:14px; right:14px; bottom:calc(86px + env(safe-area-inset-bottom, 0px)); z-index:1010; display:flex; align-items:center; gap:10px; padding:13px 15px; border-radius:var(--r-md); background:var(--ink); color:var(--bg); box-shadow:var(--shadow-lg); font-size:13px; font-weight:600; opacity:0; transform:translateY(12px); transition:opacity .2s, transform .2s; pointer-events:none; } .kd-proto .kd-toast.show{ opacity:1; transform:translateY(0); } .kd-proto .kd-toast .ic{ width:18px; height:18px; color:var(--ok); } /* ============================================================ Screen 09 · Suche (Prototyp Kickdesk Suche.html, Vollbild-Overlay) ============================================================ */ body.kd-suche .kd-bottomnav{ display:none !important; } @media (max-width: 1024px) { body.kd-suche main.kd-mob-main, body.kd-suche main{ padding-bottom:24px !important; } } .kd-proto .sfield{ display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:0 12px; height:44px; } .kd-proto .sfield .ic{ color:var(--ink-subtle); flex:0 0 auto; } .kd-proto .sfield input{ flex:1; border:none; background:transparent; font:inherit; font-size:15px; color:var(--ink); outline:none; min-width:0; } .kd-proto .sfield input::placeholder{ color:var(--ink-subtle); } .kd-proto .sfield__clear{ border:none; background:var(--line-strong); color:var(--bg); width:20px; height:20px; border-radius:50%; display:none; place-items:center; cursor:pointer; flex:0 0 auto; padding:0; } .kd-proto .sfield__clear .ic{ width:12px; height:12px; color:#fff; } .kd-proto .sfield--has .sfield__clear{ display:grid; } .kd-proto .suchchips{ display:flex; gap:7px; overflow-x:auto; padding:11px 2px 1px; scrollbar-width:none; } .kd-proto .suchchips::-webkit-scrollbar{ display:none; } .kd-proto .suchchips .chip{ border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-muted); font:inherit; font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:var(--r-pill); cursor:pointer; white-space:nowrap; flex:0 0 auto; text-decoration:none; min-height:0; display:inline-flex; align-items:center; } .kd-proto .suchchips .chip[aria-pressed="true"]{ background:var(--ink); color:var(--bg); border-color:var(--ink); } .kd-proto .seclabel{ display:flex; align-items:center; justify-content:space-between; margin:18px 4px 9px; } .kd-proto .seclabel h4{ margin:0; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-subtle); } .kd-proto .seclabel a{ font-size:12.5px; font-weight:600; color:var(--brand); text-decoration:none; } .kd-proto .res{ display:flex; align-items:center; gap:12px; padding:11px 12px; background:var(--surface); border:1px solid var(--line); cursor:pointer; text-decoration:none; color:inherit; } .kd-proto .resgroup .res:first-child{ border-radius:var(--r-md) var(--r-md) 0 0; } .kd-proto .resgroup .res:last-child{ border-radius:0 0 var(--r-md) var(--r-md); } .kd-proto .resgroup .res:only-child{ border-radius:var(--r-md); } .kd-proto .res + .res{ border-top:0; } .kd-proto .res:hover{ background:var(--surface-2); } .kd-proto .res__ava{ width:38px; height:38px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; font-weight:700; font-size:13px; color:#fff; } .kd-proto .res__ava.t-person{ background:var(--neutral); } .kd-proto .res__ic{ width:38px; height:38px; border-radius:11px; flex:0 0 auto; display:grid; place-items:center; } .kd-proto .t-team .res__ic{ background:color-mix(in srgb,var(--brand) 14%,transparent); color:var(--brand); } .kd-proto .t-termin .res__ic{ background:color-mix(in srgb,var(--info) 14%,transparent); color:var(--info); } .kd-proto .t-dokument .res__ic{ background:color-mix(in srgb,var(--wait) 16%,transparent); color:var(--wait); } .kd-proto .t-nachricht .res__ic{ background:color-mix(in srgb,var(--neutral) 16%,transparent); color:var(--neutral); } .kd-proto .res__body{ flex:1; min-width:0; } .kd-proto .res__name{ font-size:14px; font-weight:600; line-height:1.25; } .kd-proto .res__meta{ font-size:12px; color:var(--ink-muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .kd-proto .res mark{ background:color-mix(in srgb,var(--brand) 28%,transparent); color:inherit; border-radius:3px; padding:0 1px; } .kd-proto .res__go{ color:var(--ink-subtle); flex:0 0 auto; } .kd-proto .qa-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .kd-proto .qa-tile{ display:flex; align-items:center; gap:10px; padding:13px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); cursor:pointer; text-decoration:none; color:inherit; } .kd-proto .qa-tile:hover{ border-color:var(--brand); } .kd-proto .qa-tile__ic{ width:34px; height:34px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center; background:var(--surface-2); color:var(--ink-muted); } .kd-proto .qa-tile__t{ font-size:13px; font-weight:600; } .kd-proto .nores{ text-align:center; padding:50px 24px; color:var(--ink-muted); } .kd-proto .nores__ic{ width:56px; height:56px; border-radius:16px; background:var(--surface-2); color:var(--ink-subtle); display:grid; place-items:center; margin:0 auto 14px; } .kd-proto .nores__ic .ic{ width:28px; height:28px; } .kd-proto .nores h3{ font-size:16px; margin:0 0 5px; color:var(--ink); } .kd-proto .nores p{ font-size:13px; margin:0; } .kd-proto .res__qa{ width:36px; height:36px; border-radius:10px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-muted); display:grid; place-items:center; flex:0 0 auto; } .kd-proto .res__qa .ic{ width:17px; height:17px; } /* ============================================================ Abschnitt-5-Checks: Fokus-Ringe + Hit-Targets ============================================================ */ .kd-proto :focus-visible, body.kd-mobil .kd-bottomnav a:focus-visible{ outline:2px solid var(--info); outline-offset:2px; border-radius:4px; } /* Toggle (48x29) bekommt unsichtbare 44px-Hit-Area */ .kd-proto .toggle::before{ content:""; position:absolute; inset:-8px -4px; } /* ============================================================ Spieler-Screens: c-task / c-entity (kd-ds.css, Start-Prototyp) ============================================================ */ .kd-proto .c-task{ display:flex; align-items:center; gap:12px; padding:13px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); } .kd-proto .c-task + .c-task{ margin-top:8px; } .kd-proto .c-task__icon{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto; } .kd-proto .c-task__body{ flex:1; min-width:0; } .kd-proto .c-task__title{ font-size:14px; font-weight:600; } .kd-proto .c-task__meta{ font-size:12px; color:var(--ink-muted); margin-top:2px; } .kd-proto .c-task__act{ color:var(--ink-subtle); } .kd-proto .c-entity{ display:flex; align-items:center; gap:12px; padding:11px 14px; background:var(--surface); border:1px solid var(--line); } .kd-proto .c-entity__avatar{ width:38px; height:38px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; font-weight:700; font-size:13px; color:#fff; background:var(--neutral); } .kd-proto .c-entity__body{ flex:1; min-width:0; } .kd-proto .c-entity__name{ font-size:14px; font-weight:600; } .kd-proto .c-entity__meta{ font-size:12px; color:var(--ink-muted); margin-top:1px; } /* Heute-Karte: aktiver Zu-/Absage-Button zeigt den Status (gefüllt) */ .kd-proto .evbtn--zu.evbtn--aktiv span{ background:var(--ok); color:#fff; border-color:var(--ok); } .kd-proto .evbtn--ab.evbtn--aktiv span{ background:var(--crit); color:#fff; border-color:var(--crit); } /* ============================================================ Kinder-Hub (Kickdesk Meine Kinder.html): kid-Karten, krow-Zeilen, RSVP-Inline-Buttons, addkid, Solo-Direkteinstieg ============================================================ */ .kd-proto.kdh .kid{ display:block; padding:0; gap:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; } .kd-proto.kdh .kid + .kid{ margin-top:12px !important; } .kd-proto.kdh .kid__hd{ display:flex; align-items:center; gap:12px; padding:14px 14px 12px; cursor:pointer; text-decoration:none; color:inherit; } .kd-proto.kdh .kid__hd:hover{ background:var(--surface-2); } .kd-proto.kdh .kid__ava{ width:46px; height:46px; border-radius:50% !important; flex:0 0 auto; display:grid; place-items:center; font-weight:700; font-size:15px; color:#fff; } .kd-proto.kdh .kid__id{ flex:1; min-width:0; } .kd-proto.kdh .kid__name{ font-size:16px; font-weight:700; letter-spacing:-0.01em; } .kd-proto.kdh .kid__team{ font-size:12.5px; color:var(--ink-muted); margin-top:2px; display:flex; align-items:center; gap:5px; } .kd-proto.kdh .kid__team .ic{ width:13px; height:13px; } .kd-proto.kdh .kid__go{ color:var(--ink-subtle); flex:0 0 auto; } .kd-proto.kdh .kid__rows{ border-top:1px solid var(--line); } .kd-proto.kdh .krow{ display:flex; align-items:center; gap:11px; padding:11px 14px; font-size:13px; } .kd-proto.kdh .krow + .krow{ border-top:1px solid var(--line); } .kd-proto.kdh .krow .ic{ width:17px; height:17px; flex:0 0 auto; color:var(--ink-subtle); } .kd-proto.kdh .krow__t{ flex:1; min-width:0; color:var(--ink-muted); } .kd-proto.kdh .krow__t b{ color:var(--ink); font-weight:600; } .kd-proto.kdh .krow--act{ cursor:pointer; text-decoration:none; color:inherit; } .kd-proto.kdh .krow--act:hover{ background:var(--surface-2); } .kd-proto.kdh .krow--warn .ic{ color:var(--wait); } .kd-proto.kdh .krow--crit .ic{ color:var(--crit); } .kd-proto.kdh .kid__acts{ display:flex; gap:8px; padding:12px 14px 14px; border-top:1px solid var(--line); } .kd-proto.kdh .kid__acts .btn{ flex:1; } .kd-proto.kdh .rsvp{ display:inline-flex; gap:6px; flex:0 0 auto; } .kd-proto.kdh .rsvp button{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-muted); display:grid; place-items:center; cursor:pointer; margin:-5px 0; } .kd-proto.kdh .rsvp button .ic{ width:15px; height:15px; color:inherit; } .kd-proto.kdh .rsvp button::before{ content:''; position:absolute; inset:-5px; } .kd-proto.kdh .rsvp button{ position:relative; } .kd-proto.kdh .addkid{ margin-top:14px; display:flex; align-items:center; gap:11px; width:100%; padding:13px 14px; font:inherit; font-size:13.5px; font-weight:600; color:var(--ink-muted); background:transparent; border:1.5px dashed var(--line-strong); border-radius:var(--r-md); cursor:pointer; text-align:left; text-decoration:none; } .kd-proto.kdh .addkid:hover{ color:var(--ink); border-color:var(--ink-subtle); } .kd-proto.kdh .addkid .ic{ width:18px; height:18px; flex:0 0 auto; } .kd-proto.kdh .solo__hero{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:18px 0 16px; } .kd-proto.kdh .solo__ava{ width:72px; height:72px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:23px; color:#fff; } .kd-proto.kdh .solo__name{ font-size:19px; font-weight:700; margin-top:10px; letter-spacing:-0.01em; } .kd-proto.kdh .solo__team{ font-size:13px; color:var(--ink-muted); margin-top:3px; } .kd-proto.kdh .subhd{ display:flex; align-items:center; justify-content:space-between; margin:18px 0 10px; } .kd-proto.kdh .subhd h4{ margin:0; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-subtle); } /* ============================================================ Trainer-Teamseite (Kickdesk Teamseite.html, Scope .kdt): apphead-Nav, statstrip, taskbar/taskpill, tabs, quick, att ============================================================ */ .kd-proto.kdt .apphead{ padding:0; } .kd-proto.kdt .apphead__nav{ display:flex; align-items:center; gap:10px; padding:calc(6px + env(safe-area-inset-top, 0px)) 14px 10px; } .kd-proto.kdt .apphead__back{ width:38px; height:38px; border-radius:11px; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; color:var(--ink); flex:0 0 auto; } .kd-proto.kdt .apphead__title{ flex:1; min-width:0; } .kd-proto.kdt .apphead__ey{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-subtle); } .kd-proto.kdt .apphead__name{ font-size:18px; font-weight:700; line-height:1.15; display:flex; align-items:center; gap:8px; } .kd-proto.kdt .apphead__crest{ width:24px; height:24px; border-radius:7px; background:var(--brand); display:grid; place-items:center; flex:0 0 auto; } .kd-proto.kdt .apphead__crest svg{ width:16px; height:16px; color:#fff; } .kd-proto.kdt .statstrip{ display:flex; gap:0; padding:0 14px 12px; } .kd-proto.kdt .statstrip > div{ flex:1; } .kd-proto.kdt .statstrip .n{ font-family:var(--font-display); font-size:18px; letter-spacing:-0.02em; font-weight:700; } .kd-proto.kdt .statstrip .l{ font-size:11px; color:var(--ink-muted); margin-top:1px; } .kd-proto.kdt .statstrip .sep{ flex:0 0 1px; background:var(--line); margin:2px 0; } /* Team-Kacheln (Spieler → Kader-Tab, Trainer → Trainerliste) — ersetzen die statstrip auf spieler_team.html durch klickbare Karten, Issue #1058-Folge. */ .kd-proto.kdt .team-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 14px 12px; } .kd-proto.kdt .team-tile{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:14px 8px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); text-decoration:none; color:inherit; font:inherit; cursor:pointer; } .kd-proto.kdt .team-tile:active{ background:var(--surface-2); } .kd-proto.kdt .team-tile__ic{ color:var(--brand); margin-bottom:2px; } .kd-proto.kdt .team-tile__ic svg{ width:20px; height:20px; } .kd-proto.kdt .team-tile__n{ font-family:var(--font-display); font-size:19px; letter-spacing:-0.02em; font-weight:700; } .kd-proto.kdt .team-tile__l{ font-size:12px; color:var(--ink-muted); } .kd-proto.kdt .taskbar{ display:flex; align-items:center; gap:6px; padding:6px 12px 12px; overflow-x:auto; overflow-y:hidden; } .kd-proto.kdt .taskbar::-webkit-scrollbar{ height:0; } .kd-proto.kdt .taskpill{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:var(--r-pill); border:1px solid var(--line-strong); background:var(--surface); font:inherit; font-size:12px; font-weight:600; color:var(--ink); cursor:pointer; text-decoration:none; } .kd-proto.kdt .taskpill .cnt{ min-width:17px; height:17px; padding:0 4px; border-radius:9px; font-size:10.5px; font-weight:700; display:grid; place-items:center; color:#fff; } .kd-proto.kdt .taskpill--wait .cnt{ background:var(--wait); } .kd-proto.kdt .taskpill--crit .cnt{ background:var(--crit); } .kd-proto.kdt .taskpill--info .cnt{ background:var(--info); } .kd-proto.kdt .taskpill svg{ color:var(--ink-muted); } .kd-proto.kdt .tabs{ display:flex; gap:4px; padding:0 10px; overflow-x:auto; border-top:1px solid var(--line); } .kd-proto.kdt .tabs::-webkit-scrollbar{ height:0; } .kd-proto.kdt .tab{ flex:0 0 auto; border:none; background:transparent; font:inherit; font-size:13.5px; font-weight:600; color:var(--ink-muted); padding:13px 10px 11px; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; } .kd-proto.kdt .tab[aria-selected="true"]{ color:var(--brand); border-bottom-color:var(--brand); } .kd-proto.kdt .panel[hidden]{ display:none !important; } .kd-proto.kdt .sec{ margin-top:20px; } .kd-proto.kdt .subhead{ display:flex; align-items:center; justify-content:space-between; margin:0 0 10px; } .kd-proto.kdt .subhead h4{ margin:0; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-subtle); } .kd-proto.kdt .subhead .muted{ font-size:12px; color:var(--ink-subtle); } .kd-proto.kdt .quick{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; } .kd-proto.kdt .quick a{ display:flex; align-items:center; gap:10px; padding:13px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); font-size:13.5px; font-weight:600; color:var(--ink); text-decoration:none; cursor:pointer; } .kd-proto.kdt .quick a svg{ color:var(--brand); } .kd-proto.kdt .quick a.quick--primary{ background:var(--brand); border-color:var(--brand); color:var(--brand-ink); } .kd-proto.kdt .quick a.quick--primary svg{ color:var(--brand-ink); } .kd-proto.kdt .att{ display:flex; gap:6px; flex:0 0 auto; } .kd-proto.kdt .att a, .kd-proto.kdt .att button{ width:38px; height:38px; border-radius:11px; border:1px solid var(--line-strong); background:var(--surface); display:grid; place-items:center; color:var(--ink-subtle); cursor:pointer; } .kd-proto.kdt .att .on-yes{ background:var(--ok); border-color:var(--ok); color:#fff; } .kd-proto.kdt .att .on-no{ background:var(--crit); border-color:var(--crit); color:#fff; } .kd-proto.kdt .att .ic{ width:18px; height:18px; } /* Teamseiten-hero-ev weicht minimal vom Start-Screen ab (Proto: 15px/18px/7px/13px) */ .kd-proto.kdt .hero-ev{ padding:15px; } .kd-proto.kdt .hero-ev__top{ gap:7px; } .kd-proto.kdt .hero-ev__title{ font-size:18px; margin-top:7px; } .kd-proto.kdt .hero-ev__meta{ margin-top:7px; } .kd-proto.kdt .hero-ev__foot{ margin-top:13px; flex-wrap:wrap; } .kd-proto.kdt .statstrip .n{ font-weight:400; } /* ============================================================ Trainer-Kalender (Kickdesk Kalender.html, Rolle Trainer, Scope .kdk): Modus-Seg, Konflikt-Karte, Weekstrip, Platz-Lanes, Slots ============================================================ */ /* Einzelne, gleichwertige Pill-Chips (statt eines Segmented-Control mit unsichtbaren Zell-Grenzen) — dieselbe Optik wie die Filter-Chips ("Alle"/"Eigene Teams"/Kind-Namen) weiter unten auf derselben Seite. Bei zentriertem Text in gleich breiten Flex-Zellen wirkten unterschiedlich lange Labels ("Training" vs. "Spiele") vorher ungleichmäßig verteilt, obwohl die Zellen technisch gleich breit waren. Content-Breite + fester Gap macht die Abstände jetzt visuell konsistent. */ .kd-proto.kdk .modeseg{ display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-top:12px; padding-bottom:2px; } .kd-proto.kdk .modeseg::-webkit-scrollbar{ display:none; } .kd-proto.kdk .modeseg a, .kd-proto.kdk .modeseg button{ flex:0 0 auto; border:1.5px solid var(--line); background:var(--surface-2); color:var(--ink-muted); font:inherit; font-size:13px; font-weight:600; padding:8px 14px; border-radius:var(--r-pill); cursor:pointer; min-height:36px; display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; white-space:nowrap; } .kd-proto.kdk .modeseg [aria-pressed="true"]{ background:var(--brand); color:var(--brand-ink); border-color:var(--brand); box-shadow:var(--shadow-sm); } .kd-proto.kdk .modeseg [aria-pressed="true"] .ic{ color:var(--brand-ink); } .kd-proto.kdk .conflict{ display:flex; gap:12px; padding:14px; border-radius:var(--r-md); margin-bottom:16px; background:color-mix(in srgb,var(--crit) 9%,transparent); border:1px solid color-mix(in srgb,var(--crit) 30%,transparent); } .kd-proto.kdk .conflict__ic{ width:38px; height:38px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center; background:color-mix(in srgb,var(--crit) 16%,transparent); color:var(--crit); } .kd-proto.kdk .conflict__body{ flex:1; min-width:0; } .kd-proto.kdk .conflict__t{ font-size:14px; font-weight:700; color:var(--crit); } .kd-proto.kdk .conflict__s{ font-size:12.5px; color:var(--ink-muted); margin-top:2px; } .kd-proto.kdk .conflict__act{ margin-top:10px; display:flex; gap:8px; } .kd-proto.kdk .weekstrip{ display:flex; gap:6px; margin-bottom:16px; } .kd-proto.kdk .wday{ flex:1; border:1px solid var(--line); border-radius:var(--r-md); padding:8px 4px 7px; text-align:center; background:var(--surface); cursor:pointer; font:inherit; text-decoration:none; color:inherit; display:block; } .kd-proto.kdk .wday[aria-pressed="true"]{ border-color:var(--brand); background:color-mix(in srgb,var(--brand) 8%,transparent); } .kd-proto.kdk .wday .wd{ font-size:11px; font-weight:700; color:var(--ink-muted); } .kd-proto.kdk .wday .wn{ font-size:14px; font-weight:700; margin-top:1px; } .kd-proto.kdk .wday .occ{ height:4px; border-radius:2px; margin-top:6px; background:var(--line-strong); overflow:hidden; } .kd-proto.kdk .wday .occ i{ display:block; height:100%; background:var(--brand); } .kd-proto.kdk .wday.has-conf .occ i{ background:var(--crit); } .kd-proto.kdk .lane{ margin-top:14px; } .kd-proto.kdk .lane__hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; } .kd-proto.kdk .lane__hd h4{ margin:0; font-size:13px; font-weight:700; } .kd-proto.kdk .lane__hd .util{ font-size:11.5px; color:var(--ink-muted); } .kd-proto.kdk .slot{ display:flex; gap:10px; align-items:center; padding:11px 12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); } .kd-proto.kdk .slot + .slot{ margin-top:7px; } .kd-proto.kdk .slot--conf{ border-color:color-mix(in srgb,var(--crit) 45%,transparent); background:color-mix(in srgb,var(--crit) 6%,transparent); } .kd-proto.kdk .slot__time{ font-size:12.5px; font-weight:700; width:84px; flex:0 0 auto; } .kd-proto.kdk .slot__body{ flex:1; min-width:0; } .kd-proto.kdk .slot__t{ font-size:13.5px; font-weight:600; } .kd-proto.kdk .slot__m{ font-size:11.5px; color:var(--ink-muted); margin-top:1px; } .kd-proto.kdk .subhd{ display:flex; align-items:center; justify-content:space-between; margin:0 0 10px; } .kd-proto.kdk .subhd h4{ margin:0; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-subtle); } /* ============================================================ Trainer-Passwesen (Kickdesk Passwesen.html, Rolle Trainer, .kdp): prow-Zeilen, donecard, Pipeline-Punkte, Detail-Sheet ============================================================ */ .kd-proto.kdp .prow{ display:flex; align-items:center; gap:12px; padding:13px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); cursor:pointer; } .kd-proto.kdp .prow + .prow{ margin-top:8px; } .kd-proto.kdp .prow:hover{ background:var(--surface-2); } .kd-proto.kdp .prow__ava{ width:40px; height:40px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; font-weight:700; font-size:13px; color:#fff; } .kd-proto.kdp .prow__body{ flex:1; min-width:0; } .kd-proto.kdp .prow__name{ font-size:14.5px; font-weight:600; } .kd-proto.kdp .prow__next{ font-size:12px; color:var(--ink-muted); margin-top:2px; display:inline-flex; align-items:center; gap:5px; } .kd-proto.kdp .prow__next .ic{ width:13px; height:13px; } .kd-proto.kdp .donecard{ display:flex; align-items:center; gap:12px; padding:13px 14px; background:color-mix(in srgb,var(--st-ok) 7%,transparent); border:1px solid color-mix(in srgb,var(--st-ok) 22%,transparent); border-radius:var(--r-md); margin-top:8px; } .kd-proto.kdp .donecard .ic{ color:var(--st-ok); flex:0 0 auto; } .kd-proto.kdp .donecard span{ font-size:13.5px; color:var(--ink-muted); } .kd-proto.kdp .donecard b{ color:var(--ink); } .kd-proto.kdp .sheet .av{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:14px; color:#fff; flex:0 0 auto; } .kd-proto.kdp .sheet__hd{ display:flex; align-items:center; gap:12px; } .kd-proto.kdp .sheet__hd h3{ margin:0; font-size:17px; } .kd-proto.kdp .sheet__hd .r{ font-size:12px; color:var(--ink-muted); margin-top:1px; } .kd-proto.kdp .pipe{ display:flex; align-items:flex-start; padding:4px 0 2px; } .kd-proto.kdp .pipe__step{ flex:1; display:flex; flex-direction:column; align-items:center; position:relative; } .kd-proto.kdp .pipe__dot{ width:22px; height:22px; border-radius:50%; background:var(--surface-2); border:2px solid var(--line-strong); display:grid; place-items:center; z-index:2; } .kd-proto.kdp .pipe__dot .ic{ width:12px; height:12px; color:#fff; } .kd-proto.kdp .pipe__step.done .pipe__dot{ background:var(--st-ok); border-color:var(--st-ok); } .kd-proto.kdp .pipe__step.cur .pipe__dot{ background:var(--st-pruef); border-color:var(--st-pruef); box-shadow:0 0 0 4px color-mix(in srgb,var(--st-pruef) 18%,transparent); } .kd-proto.kdp .pipe__line{ position:absolute; top:10px; left:-50%; width:100%; height:2px; background:var(--line-strong); z-index:1; } .kd-proto.kdp .pipe__step.done .pipe__line, .kd-proto.kdp .pipe__step.cur .pipe__line{ background:var(--st-ok); } .kd-proto.kdp .pipe__step:first-child .pipe__line{ display:none; } .kd-proto.kdp .pipe__lbl{ font-size:9.5px; font-weight:600; color:var(--ink-muted); margin-top:6px; text-align:center; line-height:1.2; } .kd-proto.kdp .pipe__step.cur .pipe__lbl{ color:var(--st-pruef); } /* Trainer-Passwesen: fchip-Padding 11px (Eltern-Variante: 13px) */ .kd-proto.kdp .fchip{ padding:7px 11px; text-decoration:none; } /* prow als