rendert (sondern direkt

als Top-Container). Verhindert dass die fixe BottomNav den letzten Eintrag im Content abschneidet. */ body:has(.kd-bottomnav) > div:not(.kd-side):not(.kd-side-backdrop):not(.kd-mob-drawer):not(.kd-mob-drawer-backdrop):not(.kd-appheader):not(.kd-bottomnav):not(.kd-sheet):not(.kd-topbar):last-of-type { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } /* Fallback fuer Browser ohne :has() Support (iOS Safari < 15.4) und fuer Templates die KEIN main.page-pad / main.kd-mob-main als Top-Container nutzen (z.B. direkter

in {% block content %}). Body-Klasse kd-layout-v2 setzt der Desktop-Shell beim Boot; Eltern- Mobile bekommt sie nicht — daher zusaetzlich body als Fallback. */ body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } /* Auf Desktop (>720px) ist die BottomNav per Default versteckt — dort darf das Body-Padding weg, sonst entsteht unnoetige Luft. */ /* Hilfe-Launcher (#kd-help-launcher aus _partials/ticket_fab.html, inline bottom:20px/right:20px/z-index:990) ueber die BottomNav heben und auf die linke Seite verschieben, damit er nicht den rechten .fab (+ Termin, z-index:60) ueberlagert. !important, weil der Launcher seine Position inline gesetzt hat — eine vorherige Version dieser Regel zielte faelschlich auf #ticket-fab (den inneren, nicht positionierten Button) und griff dadurch nie; der Launcher blieb bei inline bottom:20px und ueberlappte die BottomNav. #ticket-fab hat selbst keine position, daher wirkungslos, wenn man es dort statt am Wrapper ansetzt. */ #kd-help-launcher { bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; right: auto !important; left: 16px !important; z-index: 55 !important; /* unter BottomNav (70) und .fab (60) */ } } /* ── Menü-Sidebar: Profilkarte / Push / Sprache (Redesign 2026 Schritt 3) ── */ .kd-mnu-ic{ width:18px; height:18px; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .kd-mnu-pcard{ display:flex; align-items:center; gap:12px; padding:14px; margin:0 -2px 4px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg,12px); } .kd-mnu-pcard__ava{ width:46px; height:46px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; font-weight:800; font-size:16px; background:var(--brand); color:var(--brand-ink,#fff); } .kd-mnu-pcard__body{ flex:1; min-width:0; } .kd-mnu-pcard__name{ font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .kd-mnu-pcard__role{ font-size:12px; color:var(--ink-muted); margin-top:2px; } .kd-mnu-pcard__switch{ display:inline-flex; align-items:center; gap:5px; margin-top:6px; font-size:12px; font-weight:600; color:var(--brand); text-decoration:none; } .kd-mnu-pcard__go{ color:var(--ink-subtle,#aaa); } .kd-mnu-push{ display:flex; align-items:center; gap:12px; padding:12px 14px; margin:4px -2px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md,8px); text-decoration:none; color:inherit; transition:background .15s; } .kd-mnu-push:hover{ background:var(--surface-2,var(--surface)); } .kd-mnu-push__ic{ width:34px; height:34px; border-radius:9px; flex:0 0 auto; display:grid; place-items:center; background:color-mix(in srgb,var(--brand) 12%,transparent); color:var(--brand); } .kd-mnu-push__body{ flex:1; min-width:0; } .kd-mnu-push__t{ font-size:13.5px; font-weight:700; } .kd-mnu-push__s{ font-size:11.5px; color:var(--ink-muted); margin-top:2px; } .kd-mnu-push__chev{ flex:0 0 auto; color:var(--ink-muted); } .kd-mnu-langrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; margin:4px -2px 8px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md,8px); } .kd-mnu-langrow__l{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--ink); } .kd-mnu-langseg{ display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-pill,999px); padding:3px; gap:2px; } .kd-mnu-langseg__btn{ border:none; background:transparent; color:var(--ink-muted); font-family:inherit; font-size:12px; font-weight:700; padding:5px 11px; border-radius:var(--r-pill,999px); cursor:pointer; text-decoration:none; display:inline-block; } .kd-mnu-langseg__btn.is-active{ background:var(--brand); color:var(--brand-ink,#fff); } /* ── Greeting-Header Start-Screens (Redesign 2026 Schritt 4) ── */ .kd-greet{ display:flex; align-items:flex-start; justify-content:space-between; padding:10px 2px 18px; } .kd-greet__date{ font-size:12.5px; color:var(--ink-muted); font-weight:600; } .kd-greet__name{ font-family:var(--font-display,inherit); font-size:22px; letter-spacing:-0.02em; font-weight:700; line-height:1.1; margin-top:3px; } .kd-greet__right{ display:flex; gap:8px; align-items:center; } .kd-greet__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; text-decoration:none; } .kd-greet__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-greet__club-ava{ width:40px; height:40px; border-radius:12px; background:var(--brand); display:grid; place-items:center; text-decoration:none; color:var(--brand-ink,#fff); overflow:hidden; } /* ── Nachrichten Inbox – Message Rows (Redesign 2026 Schritt 6) ── */ :root{ --verein:#7C3AED; } [data-theme="dark"]{ --verein:#A78BFA; } .mrow{ display:flex; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; background:var(--bg); } .mrow:hover{ background:var(--surface-2); } .mrow--unread{ background:color-mix(in srgb,var(--brand) 5%,var(--bg)); } .mrow__ic{ width:44px; height:44px; border-radius:13px; flex:0 0 auto; display:grid; place-items:center; } .mrow__ic svg{ width:22px; height:22px; } .cat-verein{ background:color-mix(in srgb,var(--verein) 15%,transparent); color:var(--verein); } .cat-team { background:color-mix(in srgb,var(--info) 15%,transparent); color:var(--info); } .cat-system{ background:var(--surface-2); color:var(--ink-muted); } .mrow__body{ flex:1; min-width:0; } .mrow__top{ display:flex; align-items:center; gap:6px; } .mrow__sender{ font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; } .mrow__time{ font-size:11.5px; color:var(--ink-subtle); flex:0 0 auto; } .mrow__cat{ font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:2px 7px; border-radius:var(--r-pill); flex:0 0 auto; } .cat-verein-tag{ color:var(--verein); background:color-mix(in srgb,var(--verein) 13%,transparent); } .cat-team-tag { color:var(--info); background:color-mix(in srgb,var(--info) 13%,transparent); } .cat-system-tag{ color:var(--ink-muted); background:var(--surface-2); } .mrow__title{ font-size:14px; font-weight:600; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mrow--unread .mrow__title{ font-weight:700; } .mrow__prev{ font-size:12.5px; color:var(--ink-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mrow__rail{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:0 0 auto; justify-content:center; } .unreaddot{ width:9px; height:9px; border-radius:50%; background:var(--brand); } /* ── Filter-Chips Inbox ── */ .kd-filterchips{ display:flex; gap:7px; padding:10px 14px; overflow-x:auto; background:var(--surface); border-bottom:1px solid var(--line); } .kd-filterchips::-webkit-scrollbar{ height:0; } .kd-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:6px 13px; border-radius:var(--r-pill); cursor:pointer; text-decoration:none; min-height:34px; } .kd-fchip.is-on{ background:var(--ink); color:var(--bg); border-color:var(--ink); } .kd-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-fchip.is-on .kd-fchip__cnt{ background:var(--bg); color:var(--ink); } /* ── Compose FAB (Nachrichten) ── */ .kd-compose-fab{ position:fixed; right:18px; bottom:calc(82px + 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:40; text-decoration:none; } .kd-compose-fab svg{ width:20px; height:20px; } @media(min-width:1025px){ .kd-compose-fab{ bottom:24px; } } /* ── Compose Bottom-Sheet ── */ .kd-sheet-wrap{ position:fixed; inset:0; z-index:200; display:none; } .kd-sheet-wrap.is-open{ display:block; } .kd-sheet-bd{ position:absolute; inset:0; background:rgba(0,0,0,.42); } .kd-sheet{ position:absolute; left:0; right:0; bottom:0; background:var(--surface); border-radius:var(--r-xl,20px) var(--r-xl,20px) 0 0; box-shadow:var(--shadow-lg); padding:8px 16px 28px; transform:translateY(100%); transition:transform .26s cubic-bezier(.2,.8,.2,1); max-height:80vh; overflow-y:auto; } .kd-sheet-wrap.is-open .kd-sheet{ transform:translateY(0); } .kd-sheet__grip{ width:40px; height:4px; border-radius:2px; background:var(--line-strong); margin:8px auto 14px; } .kd-sheet__hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; } .kd-sheet__hd h3{ margin:0; font-size:17px; font-weight:700; } .kd-sheet__close{ width:34px; height:34px; border:none; background:var(--surface-2); border-radius:10px; display:grid; place-items:center; cursor:pointer; color:var(--ink); } .kd-sheet__sub{ font-size:12.5px; color:var(--ink-muted); margin:0 0 12px; } .kd-recip{ display:flex; align-items:center; gap:13px; padding:13px; border:1px solid var(--line); border-radius:var(--r-md,10px); text-decoration:none; color:inherit; } .kd-recip + .kd-recip{ margin-top:8px; } .kd-recip:hover{ background:var(--surface-2); } .kd-recip__ic{ width:40px; height:40px; border-radius:12px; flex:0 0 auto; display:grid; place-items:center; } .kd-recip__ic svg{ width:20px; height:20px; } .kd-recip__body{ flex:1; min-width:0; } .kd-recip__t{ font-size:14.5px; font-weight:600; } .kd-recip__s{ font-size:12px; color:var(--ink-muted); margin-top:1px; } .rc-team { background:color-mix(in srgb,var(--info) 15%,transparent); color:var(--info); } .rc-trainer{ background:color-mix(in srgb,var(--brand) 14%,transparent); color:var(--brand); } .rc-pass { background:color-mix(in srgb,var(--crit) 13%,transparent); color:var(--crit); } .rc-office { background:color-mix(in srgb,var(--verein) 14%,transparent); color:var(--verein); } /* ── Alias-Layer: Template-Namen → kanonische Token ────────────── Kein Template ändern nötig — Aliasse überbrücken den Mismatch. Betrifft: betriebszentrale.html, vereinszentrale.html und weitere. ────────────────────────────────────────────────────────────── */ :root { --surface-1: var(--surface); --border: var(--line); --success: var(--ok); --warning: var(--wait); --danger: var(--crit); }