/* Helfer-Tool · Designsystem v1.6 (DESIGN.md)
   TV-Blau #006DA5 als Aktionsfarbe, TV-Gelb #FFCE00 als sparsamer Akzent, ruhige neutrale Flächen.
   Liquid-Glass-Annäherung nur für die Funktionsschicht (Tab-Leiste, Kopfleiste beim Scrollen, Popover);
   Karten, Tabellen, Formulare und Protokolle bleiben opak. */

/* ---------- Tokens ---------- */
:root{
  color-scheme:light dark;
  /* Marke: Originalfarben aus Logo_TVW.svg. Eine Vereinsfarbe (theme.css) setzt --accent bzw. --accent-dark. */
  --tvw-blau:#006da5;
  --tvw-gelb:#ffce00;
  --brand-primary:var(--accent,var(--tvw-blau));
  --brand-secondary:var(--tvw-gelb);
  --brand-accent:var(--tvw-gelb);
  --brand-on-primary:#ffffff;
  --brand-on-secondary:#1d1d1f;
  --brand-mark:var(--accent,var(--tvw-blau));
  --brand-tint:color-mix(in srgb,var(--brand-primary) 11%,transparent);
  --brand-tint-strong:color-mix(in srgb,var(--brand-primary) 18%,transparent);
  --brand-hover:color-mix(in srgb,var(--brand-primary) 86%,#000);
  /* Markenfarbe als Schrift auf getönten Flächen (Chips, getönte Knöpfe): hell etwas dunkler, damit 4.5:1 auch auf Grau hält */
  --brand-ink:color-mix(in srgb,var(--brand-primary) 84%,#000);
  --count-on-active:rgb(0 0 0 / 22%);

  --surface-base:#f5f5f7;
  --surface-card:#ffffff;
  --surface-elevated:#ffffff;
  --surface-sunken:#ededf0;
  --surface-sidebar:#ffffff;
  --text-primary:#1d1d1f;
  --text-secondary:#636366;
  --separator:#d1d1d6;
  --card-border:rgb(0 0 0 / 7%);
  --card-shadow:0 1px 2px rgb(0 0 0 / 4%),0 2px 8px rgb(0 0 0 / 3%);
  --field-bg:#ffffff;
  --field-border:#8e8e93;

  /* Statusfarben auf AA-Kontrast als Chip-Text angepasst (DESIGN.md: «an Kontrastanforderungen anzupassen») */
  --status-success:#1f7a35;
  --status-warning:#8a5c00;
  --status-danger:#d70015;
  --success-bg:color-mix(in srgb,var(--status-success) 11%,var(--surface-card));
  --warning-bg:color-mix(in srgb,#ffd60a 22%,var(--surface-card));
  --danger-bg:color-mix(in srgb,var(--status-danger) 9%,var(--surface-card));

  --glass-fill:rgb(255 255 255 / 80%);
  --glass-border:rgb(255 255 255 / 58%);
  --glass-shadow:0 8px 24px rgb(0 0 0 / 9%);
  --scrim:rgb(0 0 0 / 32%);

  --code-bg:#1c1c1e;--code-text:#f5f5f7;--code-muted:#aeaeb2;--code-warn:#ffd60a;--code-err:#ff6961;
  --qr-bg:#ffffff;

  /* Raster: 4-pt */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;
  --radius-card:16px;--radius-control:12px;--radius-sm:8px;--radius-pill:999px;
  --ease-standard:cubic-bezier(.2,.8,.2,1);
  --t-press:120ms;--t-hover:160ms;--t-swap:200ms;--t-sheet:280ms;

  --gutter:16px;
  --top-h:52px;--nav-h:58px;--side-w:0px;
  --content-max:1200px;--form-max:640px;--read-max:760px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Kompatibilität mit älteren Vorlagen */
  --bg:var(--surface-base);--surface:var(--surface-card);--surface2:var(--surface-sunken);--border:var(--separator);
  --text:var(--text-primary);--muted:var(--text-secondary);--accent2:var(--brand-primary);
  --green:var(--status-success);--amber:var(--status-warning);--red:var(--status-danger);
  --on-danger:#ffffff;
  --switch-knob:#ffffff;
  --shadow-knob:0 2px 6px rgb(0 0 0 / .2);
  --shadow-seg:0 1px 3px rgb(0 0 0 / 12%);
  --shadow-sheet:0 -8px 32px rgb(0 0 0 / 18%);
  --shadow-pop:0 12px 32px rgb(0 0 0 / .28),0 2px 6px rgb(0 0 0 / .16);
  --danger-fill:#d70015;
  --danger-fill-hover:#b80012;
  --on-accent:#3d2f00;
  --chevron:#8e8e93;
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23636366' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --search-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23636366' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){
  :root{
    --brand-primary:var(--accent-dark,#4cb4e5);
    --brand-on-primary:#1d1d1f;
    --brand-hover:color-mix(in srgb,var(--brand-primary) 86%,#fff);
    --brand-ink:var(--brand-primary);
    --count-on-active:rgb(0 0 0 / 14%);
    --surface-base:#000000;
    --surface-card:#1c1c1e;
    --surface-elevated:#2c2c2e;
    --surface-sunken:#2c2c2e;
    --surface-sidebar:#0f0f10;
    --text-primary:#f5f5f7;
    --text-secondary:#aeaeb2;
    --separator:#38383a;
    --card-border:#2c2c2e;
    --card-shadow:none;
    --field-bg:#1c1c1e;
    --field-border:#76767b;
    --status-success:#30d158;
    --status-warning:#ffd60a;
    --status-danger:#ff6961;
    --success-bg:color-mix(in srgb,var(--status-success) 16%,var(--surface-card));
    --warning-bg:color-mix(in srgb,var(--status-warning) 14%,var(--surface-card));
    --danger-bg:color-mix(in srgb,var(--status-danger) 16%,var(--surface-card));
    --glass-fill:rgb(34 34 38 / 84%);
    --glass-border:rgb(255 255 255 / 14%);
    --glass-shadow:0 8px 24px rgb(0 0 0 / 28%);
    --scrim:rgb(0 0 0 / 55%);
    --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aeaeb2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --search-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aeaeb2' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}
}
@media (prefers-contrast:more){
  :root{--text-secondary:#48484a;--separator:#8e8e93;--card-border:#8e8e93;--field-border:#636366}
}
@media (prefers-contrast:more) and (prefers-color-scheme:dark){
  :root{--text-secondary:#d1d1d6;--separator:#8e8e93;--card-border:#8e8e93;--field-border:#aeaeb2}
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--top-h) + var(--s4));scroll-padding-bottom:calc(var(--nav-h) + var(--s8))}
body{margin:0;min-height:100dvh;background:var(--surface-base);color:var(--text-primary);font:400 1rem/1.5 var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:var(--brand-primary);text-decoration:none;text-underline-offset:.18em}
@media (hover:hover){a:hover{text-decoration:underline}}
/* Unterstreichen beim Überfahren nur für Textlinks; ganze Zeilen, Menüs, Knöpfe und Karten zeigen den Hover über die Fläche
   (:is statt :where, damit die Ausnahme gegen a:hover gewinnt) */
@media (hover:hover){:is(.btn,.card,.tabs a,.sidenav a,.tabbar a,.list a,.brand,.iconbtn,.sidefoot a,.al-main,.popitem,.alertrow,.docs nav a,.skip):hover{text-decoration:none}}
h1,h2,h3{color:var(--text-primary);margin:0;text-wrap:balance}
h1{font-size:1.5rem;line-height:1.15;font-weight:700;letter-spacing:-.015em;margin:var(--s1) 0 var(--s2)}
h2{font-size:1.1875rem;line-height:1.25;font-weight:700;letter-spacing:-.01em;margin:var(--s6) 0 var(--s2)}
h3{font-size:1rem;line-height:1.3;font-weight:600;margin:var(--s4) 0 var(--s2)}
p{margin:var(--s2) 0}
small,.small{font-size:.875rem}
.muted{color:var(--text-secondary)}
.right{text-align:right}.nowrap{white-space:nowrap}.center{text-align:center}.grow{flex:1;min-width:0}
.inline{display:inline}
.w20{max-width:20rem}
hr{border:0;border-top:1px solid var(--separator);margin:var(--s6) 0}
code{font-family:var(--mono);font-size:.9em}
svg.i{width:1.25em;height:1.25em;flex:none;vertical-align:-.25em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Fokusring folgt der Form des Elements (kein eigener Radius, sonst werden Pillen eckig) */
:focus-visible{outline:3px solid var(--brand-primary);outline-offset:2px}
a,button,input,select,textarea,label,summary{touch-action:manipulation}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:var(--s2);top:-100px;background:var(--brand-primary);color:var(--brand-on-primary);padding:var(--s3) var(--s4);z-index:100;border-radius:var(--radius-sm);font-weight:600}
.skip:focus{top:calc(var(--s2) + env(safe-area-inset-top,0px))}
@media (min-width:600px){
  :root{--gutter:24px;--side-w:80px}
  h1{font-size:1.75rem}
}
@media (min-width:1024px){:root{--gutter:32px;--side-w:224px}}

/* ---------- Gerüst ---------- */
.shell{min-width:0}
.app{width:100%;max-width:calc(var(--content-max) + 2 * var(--gutter));margin:0 auto;
  padding:var(--s1) max(var(--gutter),env(safe-area-inset-right)) calc(var(--s8) + env(safe-area-inset-bottom,0px)) max(var(--gutter),env(safe-area-inset-left));
  container:main/inline-size;
}
.app:focus{outline:none}
body.has-nav .app{padding-bottom:calc(var(--nav-h) + var(--s8) + env(safe-area-inset-bottom,0px))}
.pagefoot{margin-top:var(--s8);padding-top:var(--s4);border-top:1px solid var(--separator);text-align:center;font-size:.875rem;color:var(--text-secondary)}
.pagefoot a{color:var(--text-secondary);padding:var(--s2) var(--s1);display:inline-flex;align-items:center;min-height:44px}
/* Versionsangabe (nur Superuser): eigene Zeile unter den Links */
.pagefoot .buildinfo{display:block;margin-top:var(--s1);font-size:.8125rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* Banner über allem */
.banner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--s2);padding:var(--s2) var(--gutter);padding-top:max(var(--s2),env(safe-area-inset-top,0px));font-weight:600;font-size:.875rem;text-align:center}
.banner+.banner{padding-top:var(--s2)}
.banner.test{background:var(--warning-bg);color:var(--text-primary)}
.banner.test svg{color:var(--status-warning)}
.banner.maint{background:var(--danger-bg);color:var(--status-danger)}
.banner.view{background:var(--brand-tint);color:var(--text-primary)}
.banner.view svg{color:var(--brand-primary)}
.banner .link{min-height:32px;padding:0 var(--s1);font-weight:700}
.banner form{display:inline}

/* Kopfleiste: opak, beim Überlagern scrollender Inhalte Glas */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:var(--s2);min-height:calc(var(--top-h) + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left));
  background:var(--surface-base);border-bottom:1px solid transparent;transition:background-color var(--t-hover) var(--ease-standard),border-color var(--t-hover) var(--ease-standard)}
.topbar.scrolled{background:var(--surface-card);border-bottom-color:var(--separator)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .topbar.scrolled{background:var(--glass-fill);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15)}
}
.brand{display:flex;align-items:center;gap:var(--s2);min-width:0;color:var(--text-primary);min-height:44px}
.brand .mark{width:30px;height:30px;flex:none;display:block}
.brand .mark-logo{height:32px;width:auto;max-width:96px;object-fit:contain;flex:none}
.brand-text{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.brand-name{font-weight:700;font-size:1rem;letter-spacing:-.01em}
.brand-sub{font-size:.75rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vselect{display:flex;margin:0}
.vselect select{min-height:44px;max-width:10rem;padding:0 2rem 0 var(--s3);border-radius:var(--radius-pill);font-size:.9375rem;font-weight:600;background-color:var(--surface-card)}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--text-primary);position:relative;transition:background-color var(--t-hover) var(--ease-standard)}
.iconbtn svg.i{width:22px;height:22px}
@media (hover:hover){.iconbtn:hover{background:var(--surface-sunken)}}
.iconbtn:active{background:var(--surface-sunken)}
.iconbtn[aria-current=page],.iconbtn.active{color:var(--brand-ink);background:var(--brand-tint)}

/* Ansichtswahl (Popover) */
.viewmenu{position:relative}
.viewmenu summary{list-style:none;cursor:pointer}
.viewmenu summary::-webkit-details-marker{display:none}
.viewmenu .pop{position:absolute;right:0;top:calc(100% + var(--s2));width:min(260px,calc(100vw - 2 * var(--gutter)));border-radius:var(--radius-control);padding:var(--s2);z-index:40}
.viewmenu[open] .pop{animation:pop var(--t-swap) var(--ease-standard)}
.viewmenu .pop p{margin:var(--s1) var(--s3) var(--s2);line-height:1.35}
.rowmenu .popitem,.viewmenu .popitem{display:flex;width:100%;align-items:center;justify-content:space-between;gap:var(--s2);min-height:44px;padding:0 var(--s3);border:0;border-radius:var(--radius-sm);background:none;color:var(--text-primary);font:inherit;text-align:left;cursor:pointer}
@media (hover:hover){.rowmenu .popitem:hover,.viewmenu .popitem:hover{background:var(--surface-sunken)}}
.rowmenu .popitem:active,.viewmenu .popitem:active{background:var(--surface-sunken)}
.viewmenu .popitem[aria-current=true]{color:var(--brand-primary);font-weight:600}

/* Glas: einheitliche Materialschicht mit opakem Fallback */
.glass-chrome{background:var(--surface-elevated);border:1px solid var(--separator);box-shadow:var(--glass-shadow)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .glass-chrome{background:var(--glass-fill);border-color:var(--glass-border);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15)}
}
@media (prefers-reduced-transparency:reduce),(forced-colors:active),(prefers-contrast:more){
  .glass-chrome,.topbar.scrolled{background:var(--surface-card);border-color:var(--separator);-webkit-backdrop-filter:none;backdrop-filter:none}
  .glass-chrome{box-shadow:none}
}

/* Tab-Leiste (Smartphone): schwebend, höchstens fünf Ziele */
.tabbar{position:fixed;z-index:30;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(10px + env(safe-area-inset-bottom,0px));
  height:var(--nav-h);border-radius:29px;display:flex;align-items:stretch;gap:2px;padding:5px;max-width:480px;margin:0 auto;
  view-transition-name:tabbar;
}
.tabbar a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border-radius:24px;color:var(--text-secondary);font-size:.6875rem;font-weight:600;letter-spacing:.01em;
  transition:background-color var(--t-hover) var(--ease-standard),color var(--t-hover) var(--ease-standard),transform var(--t-press) var(--ease-standard)}
.tabbar a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabbar svg.i{width:22px;height:22px}
.tabbar a[aria-current=page]{color:var(--brand-ink);background:var(--brand-tint)}
.tabbar a:active{transform:scale(.96)}

/* Seitenleiste ab 600 px: Leiste mit Symbolen, ab 1024 px mit Beschriftung */
.sidebar{display:none;view-transition-name:sidebar}
.navlabel{display:none}
@media (min-width:600px){
  body.has-nav{padding-left:var(--side-w)}
  body.has-nav .app{padding-bottom:var(--s10)}
  .tabbar{display:none}
  .sidebar{display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;width:var(--side-w);z-index:20;background:var(--surface-sidebar);border-right:1px solid var(--separator);
    padding:calc(var(--s4) + env(safe-area-inset-top,0px)) var(--s2) calc(var(--s4) + env(safe-area-inset-bottom,0px)) max(var(--s2),env(safe-area-inset-left));overflow-y:auto}
  .sidebar .brand{justify-content:center;padding:0 0 var(--s4)}
  .sidebar .brand-text{display:none}
  .sidenav{display:flex;flex-direction:column;gap:var(--s1)}
  .sidenav a,.sidefoot a,.sidefoot button{display:flex;flex-direction:column;align-items:center;gap:var(--s1);padding:var(--s2) var(--s1);min-height:52px;justify-content:center;border-radius:var(--radius-control);
    color:var(--text-secondary);font:600 .6875rem/1.2 var(--font);text-align:center;background:none;border:0;cursor:pointer;width:100%;
    transition:background-color var(--t-hover) var(--ease-standard),color var(--t-hover) var(--ease-standard)}
  .sidenav svg.i,.sidefoot svg.i{width:22px;height:22px}
  @media (hover:hover){.sidenav a:hover,.sidefoot a:hover,.sidefoot button:hover{background:var(--surface-sunken);color:var(--text-primary)}}
  .sidenav a[aria-current=page]{color:var(--brand-ink);background:var(--brand-tint)}
  .sidefoot{margin-top:auto;padding-top:var(--s4);display:flex;flex-direction:column;gap:var(--s1)}
  .sidefoot form{margin:0}
  body.has-nav .topbar .brand,.only-compact{display:none}
  body.has-nav .topbar{position:static;min-height:0;padding-top:max(var(--s3),env(safe-area-inset-top,0px));justify-content:flex-end}
  body.has-nav .topbar:not(:has(.vselect,.viewmenu)){padding-top:var(--s2)}
}
@media (min-width:1024px){
  .sidebar{padding-left:max(var(--s3),env(safe-area-inset-left));padding-right:var(--s3)}
  .sidebar .brand{justify-content:flex-start;padding:0 var(--s2) var(--s5)}
  .sidebar .brand-text{display:flex}
  .navlabel{display:block;margin:var(--s4) var(--s3) var(--s1);font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary)}
  .sidenav{gap:2px}
  .sidenav a,.sidefoot a,.sidefoot button{flex-direction:row;justify-content:flex-start;gap:var(--s3);min-height:44px;padding:var(--s2) var(--s3);font-size:.9375rem;font-weight:500;color:var(--text-primary);text-align:left}
  .sidenav svg.i,.sidefoot svg.i{width:20px;height:20px;color:var(--text-secondary)}
  .sidenav a[aria-current=page]{font-weight:600}
  .sidenav a[aria-current=page] svg.i{color:var(--brand-primary)}
  .sidefoot a,.sidefoot button{color:var(--text-secondary)}
}

/* ---------- Seitenkopf und Abschnitte ---------- */
.pagehead{display:flex;align-items:center;justify-content:space-between;gap:var(--s2) var(--s3);margin:var(--s2) 0 var(--s3);flex-wrap:wrap}
.pagehead>div:first-child{min-width:0;flex:1 1 12rem}
.pagehead h1{margin:0}
.pagehead p{margin:var(--s1) 0 0;max-width:var(--read-max)}
.pagehead .actions{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end;flex:0 1 auto}
.sechead{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin:var(--s6) 0 var(--s2);min-height:36px}
.sechead h2{margin:0;font-size:1.1875rem}
.sechead-title{display:flex;align-items:center;gap:var(--s1);min-width:0}
.sechead-title h2{min-width:0;overflow-wrap:anywhere}
.sechead-title .btn.ico{color:var(--text-secondary)}
@media (hover:hover){.sechead-title .btn.ico:hover{color:var(--brand-primary)}}
.sechead-title .btn.ico:focus-visible{color:var(--brand-primary)}
.sechead-title .btn.ico svg.i{width:18px;height:18px}
.sechead .more{font-weight:600;font-size:.875rem;display:inline-flex;align-items:center;gap:2px;min-height:44px;margin:-4px 0}
.eyebrow{font-size:.8125rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 var(--s1)}
.date-head{font-size:.875rem;font-weight:600;color:var(--text-secondary);margin:var(--s4) 0 var(--s2);padding:0 var(--s1)}

/* ---------- Karten ---------- */
.card{display:block;background:var(--surface-card);color:var(--text-primary);border:1px solid var(--card-border);border-radius:var(--radius-card);box-shadow:var(--card-shadow);padding:var(--s4);margin:var(--s2) 0}
@media (min-width:600px){.card{padding:var(--s5)}}
.card>h2:first-child,.card>h3:first-child,.card>:first-child>h2:first-child{margin-top:0}
.card h2{font-size:1.0625rem;margin:var(--s5) 0 var(--s2)}
.card.hl{border-color:var(--brand-primary);box-shadow:inset 0 0 0 1px var(--brand-primary)}
.card.warn{background:var(--warning-bg);border-color:color-mix(in srgb,var(--status-warning) 45%,transparent)}
/* Dunkel: gelb gemischt mit Grau wird oliv; die Fläche bleibt neutral, Rand und Titel tragen die Warnfarbe */
@media (prefers-color-scheme:dark){.card.warn{background:var(--surface-card);border-color:color-mix(in srgb,var(--status-warning) 55%,transparent)}.card.warn>h2{color:var(--status-warning)}}
a.card{transition:transform var(--t-press) var(--ease-standard),background-color var(--t-hover) var(--ease-standard)}
a.card:active{transform:scale(.985)}
.row{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.stack>*+*{margin-top:var(--s3)}
.grid{display:grid;gap:var(--s2) var(--s3);grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.grid>.card{margin:0}
.narrow{max-width:440px;margin:var(--s6) auto}
.app>form.card,.app>form:not([data-filter]):not(.inline-form):not(.row),.formwrap{max-width:var(--form-max)}
/* Leerzustand: kompakt in einer Zeile (Symbol · Text · Aktion), bei wenig Platz umbrechend */
.empty{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:var(--s3) var(--s4)}
.empty .empty-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--brand-tint);color:var(--brand-ink)}
.empty .empty-ico svg.i{width:20px;height:20px}
.empty>strong{flex:1 1 9rem;min-width:0;font-size:.9375rem;color:var(--text-primary);font-weight:600;line-height:1.3}
.empty>strong small{display:block;font-weight:400;font-size:.8125rem;color:var(--text-secondary)}
.empty>p{flex:1 1 100%;margin:0;color:var(--text-secondary);font-size:.875rem}
.empty>.btn{flex:none;margin-left:auto}

/* Hero «Meine Helferstunden» */
.hero{padding:var(--s4)}
.hero h2{font-size:.9375rem;font-weight:600;margin:0;display:flex;align-items:center;gap:var(--s2)}
.hero .hours{margin:var(--s2) 0;display:flex;align-items:baseline;gap:var(--s2);font-variant-numeric:tabular-nums;flex-wrap:wrap}
.hero .hours b{font-size:2.25rem;line-height:1;font-weight:700;letter-spacing:-.02em;color:var(--brand-primary)}
.hero .hours span{font-size:1.0625rem;color:var(--text-secondary)}
.hero .meta{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s2);font-size:.875rem;color:var(--text-secondary)}

/* Begrüssung */
.greet{padding:var(--s1) 0 0}
.greet h1{margin:0}
.greet p{font-size:.9375rem;margin:2px 0 0;color:var(--text-secondary)}

/* Listenzeilen: gruppierte Listen (inset grouped) */
.list{background:var(--surface-card);border:1px solid var(--card-border);border-radius:var(--radius-card);box-shadow:var(--card-shadow);margin:var(--s2) 0;overflow:hidden;padding:0;list-style:none}
.list>li{margin:0}
.list .li,.list>a,.list>li>a,.list>li>.li{display:flex;align-items:center;gap:var(--s3);min-height:48px;padding:var(--s2) var(--s4);color:var(--text-primary);position:relative;
  transition:background-color var(--t-hover) var(--ease-standard)}
.list>*+*>.li,.list>*+*>a,.list>a+a,.list>li+li>.li{border-top:1px solid var(--separator)}
@media (hover:hover){.list a:hover{background:var(--surface-sunken)}}
.list a:active{background:var(--surface-sunken)}
.list .li-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.list .li-title{font-weight:600;font-size:1rem;line-height:1.3}
.list .li-sub{font-size:.8125rem;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.list .li-end{flex:none;display:flex;align-items:center;gap:var(--s2);color:var(--text-secondary);font-size:.875rem;font-variant-numeric:tabular-nums}
.list a .li-end::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);margin-left:var(--s1);opacity:.7}

/* Datums-Kachel */
.datetile{flex:none;width:42px;min-height:42px;border-radius:var(--radius-control);background:var(--brand-tint);color:var(--brand-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;font-variant-numeric:tabular-nums}
.datetile small{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.datetile b{font-size:1.0625rem;font-weight:700}
.datetile.muted{background:var(--surface-sunken);color:var(--text-secondary)}

/* Ältere Einsatz-Zeilen (item) */
.item{display:flex;align-items:center;gap:var(--s4);min-height:72px;padding:var(--s4)}
.item .ico{flex:none;width:48px;height:48px;border-radius:50%;background:var(--brand-tint);color:var(--brand-ink);display:flex;align-items:center;justify-content:center}
.item .ico svg{width:24px;height:24px}
.item strong{font-size:1.0625rem;font-weight:600}
.item .chev{flex:none;color:var(--text-secondary)}
.cta{margin:var(--s4) 0 0}

/* ---------- Buttons ---------- */
.btn,button{font:inherit}
.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:44px;padding:0 var(--s4);border-radius:var(--radius-pill);border:1px solid transparent;position:relative;
  background:var(--brand-tint);color:var(--brand-ink);font-weight:600;line-height:1.2;text-align:center;cursor:pointer;text-decoration:none;user-select:none;-webkit-user-select:none;
  transition:transform var(--t-press) var(--ease-standard),background-color var(--t-hover) var(--ease-standard),opacity var(--t-hover) var(--ease-standard)}
@media (hover:hover){.btn:hover{background:var(--brand-tint-strong);color:var(--brand-hover)}}
.btn:active{transform:scale(.985)}
.btn.primary{background:var(--brand-primary);color:var(--brand-on-primary)}
@media (hover:hover){.btn.primary:hover{background:var(--brand-hover);color:var(--brand-on-primary)}}
.btn.danger{background:var(--danger-bg);color:var(--status-danger)}
@media (hover:hover){.btn.danger:hover{background:color-mix(in srgb,var(--status-danger) 16%,var(--surface-card));color:var(--status-danger)}}
@media (hover:hover){.btn.ok:hover{color:var(--status-success)}}
@media (hover:hover){.btn.danger.primary:hover,.sheet .btn.danger:hover{background:var(--danger-fill-hover);color:var(--on-danger)}}
.btn.danger.primary,.sheet .btn.danger{background:var(--danger-fill);color:var(--on-danger)}
.btn.ok{background:var(--success-bg);color:var(--status-success)}
.btn.ghost{background:none;color:var(--brand-primary)}
@media (hover:hover){.btn.ghost:hover{background:var(--brand-tint)}}
/* Kleine Knöpfe sind optisch 36 px hoch; die unsichtbare Fläche (::after) hält das 44-px-Touch-Ziel ein. */
.btn.small{min-height:36px;padding:0 var(--s3);font-size:.875rem;gap:6px}
.btn.small::after,.btn.ico::after,.tabs a::after,.tabs button::after{content:"";position:absolute;inset:-4px}
.btn.small svg.i{width:18px;height:18px}
/* Symbolknöpfe: Beschriftung als Tooltip (title) und für Screenreader (.bl) */
.btn.ico{width:40px;min-height:40px;height:40px;padding:0;flex:none}
.btn.ico::after{inset:-2px}
.btn.ico .bl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.btn.ico[data-loading] svg.i{display:none}
/* .ico-m: auf dem Smartphone nur Symbol, ab Tablet mit Beschriftung */
@media (max-width:599px){
  .btn.ico-m{width:40px;min-height:40px;height:40px;padding:0;flex:none}
  .btn.ico-m::after{content:"";position:absolute;inset:-2px}
  .btn.ico-m .bl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .btn.ico-m[data-loading] svg.i{display:none}
}
.btn.block{width:100%}
.btn svg.i{width:20px;height:20px}
.btn[disabled],button[disabled],.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none}
.btn[data-loading]{pointer-events:none;opacity:.85}
.btn[data-loading]::before{content:"";width:1em;height:1em;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite;flex:none}
.link{background:none;border:0;color:var(--brand-primary);cursor:pointer;padding:var(--s2) 0;min-height:44px;font-weight:600}
.acts,.actions{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}

/* ---------- Formulare ---------- */
label{display:block;font-weight:600;font-size:.875rem;margin:var(--s3) 0 var(--s1);color:var(--text-primary)}
input,select,textarea{width:100%;min-height:44px;padding:var(--s2) var(--s3);border-radius:var(--radius-control);border:1px solid var(--field-border);background:var(--field-bg);color:var(--text-primary);font:inherit;
  transition:border-color var(--t-hover) var(--ease-standard),box-shadow var(--t-hover) var(--ease-standard)}
input:focus,select:focus,textarea:focus{outline:2px solid transparent;outline-offset:2px;border-color:var(--brand-primary);box-shadow:0 0 0 1px var(--brand-primary),0 0 0 4px var(--brand-tint-strong)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid transparent;outline-offset:2px;border-radius:var(--radius-control)}
select{appearance:none;-webkit-appearance:none;padding-right:2.5rem;cursor:pointer;
  background-repeat:no-repeat;background-position:right .75rem center;background-size:16px}
select[multiple]{background-image:none;padding-right:var(--s4)}
input[type=search]{border-radius:var(--radius-pill);padding-left:2.75rem;
  background-repeat:no-repeat;background-position:1rem center;background-size:18px;
  background-image:var(--search-icon);
}
input[type=file]{padding:var(--s2) var(--s3)}
input[type=file]::file-selector-button{font:inherit;font-weight:600;border:0;border-radius:var(--radius-pill);background:var(--brand-tint);color:var(--brand-ink);padding:var(--s2) var(--s4);margin-right:var(--s3);cursor:pointer}
input[readonly]{background:var(--surface-sunken)}
textarea{min-height:96px;line-height:1.45;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--text-secondary);opacity:1}
input[type=checkbox],input[type=radio]{width:22px;height:22px;min-height:0;margin:0;flex:none;accent-color:var(--brand-primary);box-shadow:none}
.check{display:flex;align-items:center;gap:var(--s3);font-weight:400;font-size:1rem;color:var(--text-primary);margin:var(--s1) 0;min-height:44px;cursor:pointer}
/* Schalter (iOS-Muster): checkbox mit role=switch; Zeile mit Text links, Schalter rechts */
input[type=checkbox].switch{appearance:none;-webkit-appearance:none;width:51px;height:31px;border-radius:var(--radius-pill);background:var(--field-border);position:relative;cursor:pointer;flex:none;transition:background-color var(--t-hover) var(--ease-standard)}
input[type=checkbox].switch::before{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;box-shadow:var(--shadow-knob);transition:transform 200ms cubic-bezier(.22,1,.36,1);background:var(--switch-knob)}
input[type=checkbox].switch:checked{background:var(--brand-primary)}
input[type=checkbox].switch:checked::before{transform:translateX(20px)}
input[type=checkbox].switch:focus-visible{outline:3px solid var(--brand-primary);outline-offset:2px;border-radius:var(--radius-pill)}
@media (prefers-reduced-motion:reduce){input[type=checkbox].switch,input[type=checkbox].switch::before{transition:none}}
.switchrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:44px;margin:var(--s4) 0 var(--s2);font-weight:400;cursor:pointer}
.switchrow-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.switchrow-title{font-weight:600;color:var(--text-primary)}
.switchrow .hint{margin:0}
.abm-until input{max-width:20rem}
.abm:has(.switch:not(:checked)) .abm-until{display:none}
.check input{margin:0}
form{margin:0}
form.inline-form{display:inline-flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.hint{font-size:.875rem;color:var(--text-secondary);margin:var(--s1) 0 var(--s2)}
fieldset{border:1px solid var(--card-border);border-radius:var(--radius-card);padding:var(--s1) var(--s4) var(--s4);margin:var(--s3) 0;background:var(--surface-card);min-width:0}
.card fieldset{background:transparent;border-color:var(--separator)}
legend{padding:0 var(--s2);color:var(--text-secondary);font-weight:600;font-size:.9375rem}
input:user-invalid,select:user-invalid,textarea:user-invalid{border-color:var(--status-danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--status-danger) 18%,transparent)}
.field-error{color:var(--status-danger);margin:var(--s1) 0 0;display:flex;gap:6px;align-items:flex-start;font-size:.875rem;font-weight:500}
.pwfield{position:relative}
.pwfield input{padding-right:3rem}
.pwfield .pwtoggle{position:absolute;right:1px;top:1px;height:42px;width:44px;display:flex;align-items:center;justify-content:center;border:0;background:none;color:var(--text-secondary);border-radius:var(--radius-control);cursor:pointer}
@media (hover:hover){.pwfield .pwtoggle:hover{color:var(--text-primary)}}

/* ---------- Status-Chips ---------- */
.badge{display:inline-flex;align-items:center;gap:var(--s1);min-height:22px;font-size:.75rem;font-weight:600;line-height:1.2;padding:2px 8px;border-radius:var(--radius-pill);background:var(--surface-sunken);color:var(--text-secondary);vertical-align:middle;white-space:nowrap}
.badge svg.i{width:13px;height:13px}
.badge.ok{background:var(--success-bg);color:var(--status-success)}
.badge.warn{background:var(--warning-bg);color:var(--status-warning)}
.badge.err{background:var(--danger-bg);color:var(--status-danger)}
.badge.info{background:var(--brand-tint);color:var(--brand-ink)}
.badge.accent{background:var(--brand-secondary);color:var(--brand-on-secondary)}
@media (prefers-color-scheme:dark){.badge.warn{color:var(--status-warning)}}
.dot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--text-secondary);margin-right:var(--s1)}
.dot.on{background:var(--status-success)}

/* ---------- Meldungen ---------- */
.flashes:empty{display:none}
.flash{display:flex;align-items:flex-start;gap:var(--s2);margin:var(--s2) 0;padding:var(--s2) var(--s3);font-size:.9375rem;border-radius:var(--radius-control);background:var(--surface-card);border:1px solid var(--card-border);color:var(--text-primary);overflow-wrap:anywhere;max-width:var(--read-max)}
.flash svg.i{margin-top:2px;color:var(--brand-primary)}
.flash.ok{background:var(--success-bg);border-color:color-mix(in srgb,var(--status-success) 35%,transparent)}
.flash.ok svg.i{color:var(--status-success)}
.flash.error{background:var(--danger-bg);border-color:color-mix(in srgb,var(--status-danger) 35%,transparent)}
.flash.error svg.i{color:var(--status-danger)}
.flash.warn{background:var(--warning-bg);border-color:color-mix(in srgb,var(--status-warning) 35%,transparent)}
.flash.warn svg.i{color:var(--status-warning)}

/* ---------- Tabellen: als Karten, ab 760 px Inhaltsbreite als Tabelle (Container-Query, nicht Gerätetyp) ---------- */
table,tbody,tr,td{display:block;width:100%}
thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
table{font-size:.9375rem;font-variant-numeric:tabular-nums;border-collapse:collapse}
tr{padding:var(--s3) var(--s4);margin:0 0 var(--s2);background:var(--surface-card);border:1px solid var(--card-border);border-radius:var(--radius-card)}
.card tr{padding:var(--s3) 0;margin:0;background:none;border:0;border-radius:0;border-top:1px solid var(--separator)}
.card tbody tr:first-child{border-top:0;padding-top:0}
th,td{text-align:left;padding:3px 0;vertical-align:top}
td[data-label]{display:grid;grid-template-columns:5.5rem minmax(0,1fr);column-gap:var(--s3);align-items:baseline;overflow-wrap:break-word;padding:2px 0}
td[data-label]::before{content:attr(data-label);color:var(--text-secondary);font-weight:600;font-size:.8125rem}
td[data-label]>.cell{min-width:0}
td[data-empty]{display:none}
td[data-label]:first-child{display:block;font-size:1rem;font-weight:600;padding-bottom:var(--s1)}
td[data-label]:first-child::before{display:none}
td:not([data-label]):not([colspan]){display:flex;justify-content:flex-end;flex-wrap:wrap;gap:var(--s2);padding-top:var(--s2)}
td:not([data-label]):not([colspan]) .btn:not(.ico){min-height:36px;padding:0 var(--s3);font-size:.875rem}
th{color:var(--text-secondary);font-weight:600;font-size:.8125rem}
@container main (min-width:760px){
  table{display:table;width:100%}
  td,td[data-label]{overflow-wrap:break-word}
  thead{position:static;width:auto;height:auto;overflow:visible;clip:auto;display:table-header-group}
  tbody{display:table-row-group}
  tr,.card tr{display:table-row;padding:0;margin:0;background:none;border:0;border-radius:0}
  th,td,td[data-label],td[data-label]:first-child,td[data-empty],td:not([data-label]):not([colspan]){display:table-cell;width:auto;padding:var(--s2) var(--s3);border-bottom:1px solid var(--separator);text-align:left;font-size:inherit;font-weight:inherit;vertical-align:middle}
  th:first-child,td:first-child{padding-left:0}
  th:last-child,td:last-child{padding-right:0}
  tbody tr:last-child td{border-bottom:0}
  th{position:sticky;top:0;z-index:1;background:var(--surface-card);font-weight:600;font-size:.8125rem;letter-spacing:.02em;text-transform:uppercase;color:var(--text-secondary);padding-top:var(--s2);padding-bottom:var(--s2)}
  td[data-label]::before{display:none}
  td.right{text-align:right}
  td:not([data-label]):not([colspan])>*{vertical-align:middle}
  tbody tr{transition:background-color var(--t-hover) var(--ease-standard)}
  @media (hover:hover){tbody tr:hover td{background:color-mix(in srgb,var(--surface-sunken) 50%,transparent)}}
}

/* ---------- Einsatzkarte ---------- */
/* Eine Zeile: Zeit · Titel mit Status · Hauptaktion als runder Symbolknopf */
.task{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3);margin:var(--s2) 0;transition:transform var(--t-swap) var(--ease-standard),opacity var(--t-swap) var(--ease-standard);flex-wrap:wrap}
.task .when{flex:none;min-width:3.5rem;text-align:center;background:var(--surface-sunken);border-radius:var(--radius-sm);padding:6px var(--s1);font-weight:700;font-size:.9375rem;font-variant-numeric:tabular-nums;line-height:1.2}
.task .when small{display:block;color:var(--text-secondary);font-weight:500;font-size:.8125rem;margin-top:1px}
.task.hl .when{background:var(--brand-tint);color:var(--brand-ink)}
.task .body{min-width:0;align-self:center;flex:1 1 8rem}
.task .title{font-weight:600;font-size:1rem;line-height:1.3;margin:0}
.task .eventinfo,.task .info{margin:2px 0 0;font-size:.8125rem;color:var(--text-secondary)}
.task .eventinfo strong{color:var(--text-primary);font-weight:600}
.task .chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) 6px;margin-top:var(--s1);min-width:0}
.task .dur{font-size:.8125rem;color:var(--text-secondary);font-variant-numeric:tabular-nums;margin-right:2px}
.task .acts{margin-top:var(--s2);gap:6px}
.task .main-act{flex:none;align-self:center;display:flex;gap:6px;margin-left:auto}
.task .main-act .btn{min-height:44px;padding:0 var(--s3) 0 10px}
@media (max-width:599px){.task .main-act .btn.ico-m{width:44px;height:44px}}
.task .why{display:flex;gap:6px;align-items:flex-start;color:var(--text-secondary);font-size:.8125rem;margin:var(--s1) 0 0}
.task .why svg.i{margin-top:1px;width:15px;height:15px}
.task.past{opacity:.8}
@media (min-width:600px){.task{padding:var(--s3) var(--s4)}}
/* Check-in-Code nur auf Abruf (Symbolknopf verlinkt auf #qr-…) */
.qrbox{display:none;margin-top:var(--s3)}
.qrbox:target{display:block;animation:fade var(--t-swap) var(--ease-standard)}

/* Fortschritt: Wert immer zusätzlich als Text */
.progress{height:6px;background:var(--surface-sunken);border-radius:var(--radius-pill);overflow:hidden}
.progress>span{display:block;height:100%;background:var(--brand-primary);border-radius:var(--radius-pill);transform-origin:left;animation:grow 420ms var(--ease-standard)}
.progress.p0>span{width:0}.progress.p10>span{width:10%}.progress.p20>span{width:20%}.progress.p30>span{width:30%}.progress.p40>span{width:40%}.progress.p50>span{width:50%}.progress.p60>span{width:60%}.progress.p70>span{width:70%}.progress.p80>span{width:80%}.progress.p90>span{width:90%}.progress.p100>span{width:100%;background:var(--status-success)}

/* Kennzahlen */
.stat{background:var(--surface-card);border:1px solid var(--card-border);border-radius:var(--radius-card);box-shadow:var(--card-shadow);padding:var(--s4)}
.stat b{display:block;font-size:2rem;line-height:1.1;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stats{display:grid;gap:var(--s2);grid-template-columns:repeat(2,minmax(0,1fr));margin:var(--s3) 0}
.stats .stat{padding:var(--s3) var(--s4);font-size:.8125rem;color:var(--text-secondary);overflow-wrap:anywhere;display:flex;flex-direction:column;gap:2px}
.stats .stat b{font-size:1.5rem;color:var(--text-primary)}
.stats .stat .lbl{font-weight:600;color:var(--text-secondary);align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.stats .stat .lbl svg.i{color:var(--brand-primary);width:16px;height:16px;margin-right:6px;vertical-align:-.2em}
.stats .stat a{font-weight:600}
.stats .stat.text b{font-size:1rem;line-height:1.3}
@container main (min-width:720px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Filterchips */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:var(--s2) 0}
.tabs a,.tabs button{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 var(--s3);border-radius:var(--radius-pill);background:var(--surface-card);border:1px solid var(--card-border);
  color:var(--text-primary);font:600 .875rem/1 var(--font);cursor:pointer;
  transition:transform var(--t-press) var(--ease-standard),background-color var(--t-hover) var(--ease-standard),color var(--t-hover) var(--ease-standard)}
@media (hover:hover){.tabs a:hover,.tabs button:hover{background:var(--surface-sunken)}}
.tabs a:active,.tabs button:active{transform:scale(.985)}
.tabs a[aria-current=page],.tabs button[aria-current=page],.tabs [aria-pressed=true]{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--brand-on-primary)}
/* Filter: Chips und Auswahl teilen sich eine Zeile, die Auswahl nimmt den Rest */
.filterbar{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin:var(--s2) 0 var(--s3)}
.filterbar .tabs{margin:0;flex-wrap:nowrap}
.filterbar>div:not(.tabs){flex:1 1 7rem;min-width:0}
.filterbar select{width:100%;max-width:20rem;border-radius:var(--radius-pill);padding:0 2rem 0 var(--s3);font-size:.875rem;font-weight:600;min-height:44px}
/* ---------- Dialog / Sheet ---------- */
.sheet{border:0;padding:0;background:var(--surface-elevated);color:var(--text-primary);width:100%;max-width:100%;margin:auto auto 0;border-radius:var(--radius-card) var(--radius-card) 0 0;
  box-shadow:var(--shadow-sheet);max-height:85dvh;overscroll-behavior:contain}
.sheet form{padding:var(--s5) max(var(--s5),env(safe-area-inset-right)) calc(var(--s5) + env(safe-area-inset-bottom,0px)) max(var(--s5),env(safe-area-inset-left))}
.sheet h2{margin:0 0 var(--s2);font-size:1.125rem}
.sheet p{margin:0 0 var(--s4);color:var(--text-secondary);overflow-wrap:anywhere}
.sheet-actions{display:flex;flex-direction:column-reverse;gap:var(--s2)}
.sheet-actions .btn{width:100%}
.sheet::backdrop{background:var(--scrim)}
.sheet[open]{animation:sheet-up var(--t-sheet) var(--ease-standard)}
.sheet[open]::backdrop{animation:fade var(--t-sheet) var(--ease-standard)}
@media (min-width:600px){
  .sheet{max-width:440px;margin:auto;border-radius:var(--radius-card)}
  .sheet-actions{flex-direction:row;justify-content:flex-end}
  .sheet-actions .btn{width:auto}
  .sheet[open]{animation:pop var(--t-sheet) var(--ease-standard)}
}

/* ---------- Anmeldung ---------- */
.auth{max-width:400px;margin:var(--s4) auto var(--s6)}
.auth-head{text-align:center;margin-bottom:var(--s4)}
.auth-head .mark,.auth-head .mark-logo{width:56px;height:56px;display:block;margin:0 auto var(--s3)}
.auth-head .mark-logo{width:auto;max-width:180px;object-fit:contain}
.auth-head h1{margin:0}
.auth-head p{margin:var(--s1) 0 0;color:var(--text-secondary);font-size:.9375rem}
.auth .card{padding:var(--s5)}
.auth .card label:first-of-type{margin-top:0}
.auth .divider{display:flex;align-items:center;gap:var(--s3);color:var(--text-secondary);font-size:.8125rem;margin:var(--s4) 0}
.auth .divider::before,.auth .divider::after{content:"";flex:1;border-top:1px solid var(--separator)}
.logo{width:64px;height:64px;border-radius:var(--radius-card);background:var(--surface-card);border:1px solid var(--card-border);display:flex;align-items:center;justify-content:center;margin:0 auto var(--s4);color:var(--brand-primary)}

/* ---------- Diverses ---------- */
.qr{background:var(--qr-bg);padding:var(--s3);border-radius:var(--radius-control);display:inline-block;border:1px solid var(--separator)}
.qr img{display:block;width:200px;height:200px}
.docs{display:grid;gap:var(--s3)}
@media (min-width:900px){.docs{grid-template-columns:240px minmax(0,1fr);gap:var(--s6)}}
.docs nav a{display:flex;align-items:center;padding:var(--s2) var(--s3);border-radius:var(--radius-sm);color:var(--text-primary);min-height:44px}
@media (hover:hover){.docs nav a:hover{background:var(--surface-sunken)}}
.docs nav a:active{background:var(--surface-sunken)}
.docs nav a[aria-current=page]{background:var(--brand-tint);color:var(--brand-ink);font-weight:600}
.docs article{max-width:var(--read-max);line-height:1.55}
.docs article h1{margin-top:0}
.docs article table td,.docs article table th{border:1px solid var(--separator);padding:var(--s2) var(--s3)}
.docs code{background:var(--surface-sunken);padding:.1rem .35rem;border-radius:5px}
.docs pre{background:var(--surface-sunken);padding:var(--s4);border-radius:var(--radius-control);overflow-x:auto}
.policy{list-style:none;margin:var(--s2) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);font-size:.9375rem}
.policy li::before{content:"○ ";color:var(--text-secondary)}
.policy li.ok{color:var(--status-success)}
.policy li.ok::before{content:"✓ "}
.policy li.bad{color:var(--status-danger)}
.policy li.bad::before{content:"✗ "}

/* Serverlog und Router-Log (sensible Daten): opak, nie durchscheinend */
.serverlog{font:.8125rem/1.5 var(--mono);height:65vh;min-height:14rem;overflow-y:auto;overflow-x:hidden;overflow-wrap:anywhere;white-space:pre-wrap;background:var(--code-bg);color:var(--code-text);border-color:var(--code-bg)}
.serverlog .sl-t{color:var(--code-muted)}
.serverlog .sl-WARN{color:var(--code-warn)}
.serverlog .sl-ERROR{color:var(--code-err)}
.mono{font:.8125rem/1.4 var(--mono);overflow-wrap:anywhere}
.set>.setrow{padding-top:var(--s2)}
.set>.setrow+.setrow{border-top:1px solid var(--separator)}
.set>.setrow .hint{margin-bottom:var(--s2)}

/* Anmeldelink */
.linkbox{margin:var(--s3) 0;padding:var(--s4);border:1px solid var(--separator);border-radius:var(--radius-control);background:var(--surface-sunken)}
.linkbox label{margin-top:0}
.linkbox textarea{min-height:0;resize:none;overflow-wrap:anywhere;word-break:break-all;background:var(--surface-card)}

/* Einsatzdetails (Ersatzperson) und Tausch */
.details dl,.swapdl{margin:var(--s2) 0 0}
.details dl>div,.swapdl>div{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:var(--s3);padding:var(--s2) 0;border-top:1px solid var(--separator)}
.details dl>div:first-child,.swapdl>div:first-child{border-top:0}
.details dt,.swapdl dt{color:var(--text-secondary);font-size:.9375rem}
.details dd,.swapdl dd{margin:0;overflow-wrap:anywhere}
@media (max-width:420px){.swapdl>div,.details dl>div{grid-template-columns:1fr;gap:2px}}
.choices{border:0;padding:0;margin:var(--s2) 0;background:none}
.choice{display:flex;align-items:flex-start;gap:var(--s3);margin:var(--s2) 0;padding:var(--s3);border:1px solid var(--card-border);border-radius:var(--radius-control);background:var(--surface-card);font-weight:400;font-size:1rem;color:var(--text-primary);cursor:pointer;
  transition:border-color var(--t-hover) var(--ease-standard),background-color var(--t-hover) var(--ease-standard)}
.choice input{margin:2px 0 0;flex:none}
.choice:has(input:checked){border-color:var(--brand-ink);background:var(--brand-tint)}
.choice.disabled{opacity:.6;cursor:not-allowed}

/* Nachrichten */
.msg h2{margin:0;font-size:1.0625rem}
.msg .row.small{gap:var(--s2);margin:var(--s2) 0}
.msgbody{white-space:pre-wrap;overflow-wrap:anywhere;margin:var(--s2) 0 0}

.shifttbl .progress{margin-top:var(--s1)}

/* Profil: weitere Bereiche nur auf dem Smartphone (sonst in der Seitenleiste) */
@media (min-width:600px){.only-phone{display:none!important}}

/* ---------- Zustände und Bewegung ---------- */
.htmx-request{opacity:.7;transition:opacity var(--t-swap) var(--ease-standard)}
.htmx-added{animation:fade var(--t-swap) var(--ease-standard)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(4px) scale(.98)}}
@keyframes sheet-up{from{opacity:.6;transform:translateY(24px)}}
@keyframes grow{from{transform:scaleX(0)}}
@keyframes rise{from{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:no-preference){.flash{animation:rise var(--t-swap) var(--ease-standard)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .btn[data-loading]::before{animation:none;border-right-color:currentColor;opacity:.5}
}
@media (forced-colors:active){
  .tabbar a[aria-current=page],.sidenav a[aria-current=page],.tabs a[aria-current=page]{outline:2px solid CanvasText}
  .btn{border-color:ButtonText}
}

@media print{
  .topbar,.tabbar,.sidebar,.banner,.docs nav,.noprint,.pagefoot{display:none!important}
  body.has-nav{padding-left:0}
  .app{margin:0!important;padding:0!important;max-width:none}
  body{background:#fff;color:#000}
  .card,tr,.list{border:1px solid #999;background:#fff;box-shadow:none}
  a{color:#000}
}

/* Übersicht: Stunden und nächster Einsatz nebeneinander, sobald Platz ist */
.home-top{grid-template-columns:minmax(0,1fr);gap:0 var(--s4);align-items:start}
.home-top>.hero{margin-top:var(--s3)}
.home-top .sechead:first-child{margin-top:var(--s4)}
@media (min-width:900px){.home-top{grid-template-columns:repeat(2,minmax(0,1fr))}.home-top .sechead:first-child{margin-top:var(--s1)}}

/* Admin-Dashboard */
.stats a.stat{transition:background-color var(--t-hover) var(--ease-standard),transform var(--t-press) var(--ease-standard)}
@media (hover:hover){.stats a.stat:hover{text-decoration:none;background:var(--surface-sunken)}}
.stats a.stat:active{transform:scale(.985)}
#dash-events h3{font-size:.875rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em}
.card .list{box-shadow:none;margin:var(--s2) 0 var(--s3)}
.pastlist summary{list-style:none;cursor:pointer;margin:0 0 var(--s2)}
.pastlist summary::-webkit-details-marker{display:none}

/* ---------- Kompakte Zeilen-Muster ---------- */
/* Zeile mit Text links und Symbolknöpfen rechts: bricht nicht um, Text kürzt sich */
.row.nowrap-row{flex-wrap:nowrap}
.row.nowrap-row>:first-child{min-width:0;flex:1}
.row.nowrap-row>:not(:first-child){flex:none;display:flex;gap:6px;align-items:center}
.card .row.nowrap-row+.row.nowrap-row{border-top:1px solid var(--separator);padding-top:var(--s2);margin-top:var(--s2)}
/* Suchfeld mit Symbolknopf in einer Zeile */
.searchrow{display:flex;gap:var(--s2);align-items:center;margin:var(--s2) 0 var(--s3);max-width:var(--form-max)}
.searchrow>input,.searchrow>.grow{flex:1;min-width:0}
.searchrow>div:not(.grow){flex:1 1 0;min-width:0;max-width:14rem}
.searchrow select{border-radius:var(--radius-pill)}
/* Feld mit Kopierknopf */
.copyrow{display:flex;gap:var(--s2);align-items:center}
.copyrow input{flex:1;min-width:0;font-size:.875rem}
.copyrow+p:empty{margin:0}
/* «Alle ansehen ›» */
.sechead .more svg.i{width:16px;height:16px}
.pastlist summary svg.i{width:16px;height:16px;transition:transform var(--t-hover) var(--ease-standard)}
.pastlist[open] summary svg.i{transform:rotate(90deg)}
.list .li-ico{flex:none;width:32px;height:32px;border-radius:var(--radius-sm);background:var(--brand-tint);color:var(--brand-ink);display:flex;align-items:center;justify-content:center}
.list .li-ico svg.i{width:18px;height:18px}
.stats .stat>span:last-child{font-size:.75rem;line-height:1.3}
.onlinelist .li-title{font-weight:500;font-size:.9375rem}
.onlinelist>li>a{min-height:44px;padding-top:6px;padding-bottom:6px}
.onlinelist .dot{margin:0}
@media (min-width:760px){.onlinelist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.onlinelist>li+li>a{border-top:0}.onlinelist>li>a{border-bottom:1px solid var(--separator)}}

/* Admin: Aufgabe eines Anlasses. Kopf mit Bearbeiten, darunter Zuweisung in einer Zeile */
.admintask{padding:var(--s3) var(--s4)}
.admintask .title{font-size:1rem;margin:0}
.admintask .meta{margin:2px 0 var(--s1)}
.assignrow{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-top:var(--s2)}
.assignrow select{flex:1 1 11rem;width:auto;min-width:0;max-width:22rem}
.assignrow .check{flex-basis:100%;margin:0;min-height:40px;font-size:.875rem}
/* Ganze Karte als Ziel des Titel-Links; Formulare darin bleiben bedienbar */
/* Arbeitsbereich eines Anlasses (Präfix ws-): Zurück-Link, Kopf mit Menü, Tabs, Übersicht mit Stand und nächsten Schritten */
.ws-back{margin:var(--s1) 0 0}
.ws-back a{display:inline-flex;align-items:center;gap:2px;min-height:44px;font-weight:600;font-size:.9375rem}
.ws-back svg.i{width:18px;height:18px;margin-left:-4px}
.ws-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);margin:0 0 var(--s3)}
.ws-titles{min-width:0}
.ws-head h1{margin:0;overflow-wrap:anywhere}
.ws-meta{margin:4px 0 0;color:var(--text-secondary);font-size:.9375rem}
.ws-meta .badge{vertical-align:1px}
.ws-tabs{margin:0 0 var(--s4);flex-wrap:nowrap;overflow-x:auto;padding:4px 2px;scrollbar-width:none;scroll-snap-type:x proximity}
.ws-tabs::-webkit-scrollbar{display:none}
.ws-tabs.more-right{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
.ws-tabs.more-left{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent)}
.ws-tabs.more-left.more-right{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.ws-tabs a{flex:none;scroll-snap-align:start}
.ws-card{margin-bottom:var(--s4)}
.ws-card>h2{font-size:1.0625rem;margin:0 0 var(--s2)}
.ws-fill{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.ws-big{margin:0;font-size:1.25rem;font-weight:600;line-height:1.3}
.ws-big b{font-variant-numeric:tabular-nums}
.ws-fill-side{margin:0;font-size:.9375rem}
.ws-bar{height:8px;margin-top:var(--s2)}
.ws-facts{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);font-size:.875rem;color:var(--text-secondary)}
.ws-facts li{display:inline-flex;align-items:center;gap:6px}
.ws-facts svg.i{width:16px;height:16px}
.ws-distribute{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--separator)}
.ws-distribute p{margin:0;flex:1 1 16rem}
.ws-stand .evsoll{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--separator)}
.ws-steps{list-style:none;margin:0;padding:0}
.ws-steps li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);padding:var(--s2) 0;border-top:1px solid var(--separator)}
.ws-steps li:first-child{border-top:0;padding-top:0}
.ws-step-ico{flex:none;width:32px;height:32px;border-radius:var(--radius-sm);background:var(--brand-tint);color:var(--brand-ink);display:flex;align-items:center;justify-content:center}
.ws-step-ico svg.i{width:18px;height:18px}
.ws-step-text{flex:1 1 12rem;min-width:0}
.ws-steps .btn{flex:none}
/* Event-Leitung in der Übersicht: Zeile «Leitung» bzw. Schritt «Bestimmen» klappt das Formular an Ort und Stelle auf */
.ws-lead{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--separator)}
.ws-steps li.ws-step-details{display:block}
.leitedit-sum{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);list-style:none;cursor:pointer;border-radius:var(--radius-sm)}
.leitedit-sum::-webkit-details-marker{display:none}
.leitedit-sum .btn{flex:none}
@media (hover:hover){.leitedit-sum:hover .btn{background:var(--brand-tint-strong);color:var(--brand-hover)}}
.leitedit-body{margin:var(--s2) 0 0 calc(32px + var(--s3));padding-top:var(--s2);border-top:1px solid var(--separator)}
.leitedit-body>p{margin:0 0 var(--s1)}
.leitedit-body .searchrow{margin:var(--s2) 0 0}
@media (max-width:599px){.leitedit-sum .btn{margin-left:calc(32px + var(--s3))}.leitedit-body{margin-left:0}}
.ws-people{list-style:none;margin:var(--s2) 0;padding:0}
.ws-people li{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:44px}
.ws-person{display:inline-flex;align-items:center;gap:var(--s2);font-weight:600}
.ws-person svg.i{width:18px;height:18px;color:var(--text-secondary)}
.ws-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s2)}
.ws-lead{margin:0 0 var(--s3)}
.ws-more{margin-top:var(--s4)}
.shiftsec-sub{flex-basis:100%;font-size:.875rem;font-weight:400;color:var(--text-secondary)}
.shiftsec.is-empty{margin-bottom:var(--s3)}
@media (max-width:599px){.ws-steps li>.btn{margin-left:calc(32px + var(--s3))}}
/* Anlassliste der Verwaltung (Präfix al-): ein Block mit Monats-Trennzeilen; Handy kompakt, Desktop als Tabelle.
   Kein overflow:hidden am Block, damit das Menü ⋮ nicht abgeschnitten wird. */
.al-bar{margin:var(--s2) 0 var(--s4)}
.al-bar .tabs{margin:0}
.al-list{background:var(--surface-card);border:1px solid var(--card-border);border-radius:var(--radius-card);box-shadow:var(--card-shadow)}
.al-head{display:none}
.al-month{margin:0;padding:var(--s2) var(--s4);font-size:.8125rem;font-weight:600;color:var(--text-secondary);background:color-mix(in srgb,var(--surface-sunken) 55%,var(--surface-card));border-top:1px solid var(--separator)}
.al-list>.al-month:first-of-type{border-top:0;border-radius:var(--radius-card) var(--radius-card) 0 0}
.al-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 52px;align-items:center;border-top:1px solid var(--separator)}
.al-rows{list-style:none;margin:0;padding:0}
.al-rows>.al-row:first-child{border-top-color:transparent}
.al-main{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-areas:"date text" "date fill";column-gap:var(--s3);row-gap:6px;align-items:center;min-height:72px;padding:var(--s3) 0 var(--s3) var(--s4);color:inherit;transition:background-color var(--t-hover) var(--ease-standard)}
@media (hover:hover){.al-main:hover{text-decoration:none}}
@media (hover:hover){.al-row:has(.al-main:hover){background:color-mix(in srgb,var(--surface-sunken) 60%,var(--surface-card))}}
.al-main:focus-visible{outline-offset:-3px;border-radius:var(--radius-sm)}
.list a:focus-visible,.setlist .set>summary:focus-visible,.setlist .setlink:focus-visible{outline-offset:-3px;border-radius:var(--radius-sm)}
.al-list>.al-rows:last-child>.al-row:last-child{border-radius:0 0 var(--radius-card) var(--radius-card)}
.al-date{grid-area:date;align-self:start;width:48px;height:52px;border-radius:var(--radius-control);background:var(--brand-tint);color:var(--brand-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05}
.al-date b{font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums}
.al-date small{font-size:.75rem;font-weight:600}
.is-soon .al-date{background:var(--brand-primary);color:var(--brand-on-primary)}
.is-past .al-date,.is-cancelled .al-date{background:var(--surface-sunken);color:var(--text-secondary)}
.is-past .al-title,.is-cancelled .al-title{color:var(--text-secondary)}
.al-text{grid-area:text;min-width:0;display:flex;flex-direction:column;gap:2px}
.al-title{font-weight:600;font-size:1.0625rem;line-height:1.3;overflow-wrap:anywhere}
.al-sub{font-size:.875rem;color:var(--text-secondary)}
.al-sub .badge{vertical-align:1px}
.al-soon{color:var(--brand-primary);font-weight:600}
.al-fill{grid-area:fill;min-width:0;display:flex;flex-direction:column;gap:5px}
.al-fill .badge{align-self:flex-start}
.al-num{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);font-size:.875rem;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.al-num b{color:var(--text-primary);font-weight:700}
.al-open{color:var(--status-warning);font-weight:600}
.al-full{display:inline-flex;align-items:center;gap:3px;color:var(--status-success);font-weight:600}
.al-full svg.i{width:14px;height:14px}
.al-note{font-size:.875rem;color:var(--text-secondary)}
.al-fill .progress{height:6px}
.al-row>.rowmenu{justify-self:center}
.al-invite{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:0 var(--s4) var(--s3) calc(var(--s4) + 48px + var(--s3));font-size:.875rem}
.al-invite>span:first-child{flex-basis:100%}
.al-invite-acts{display:flex;gap:var(--s2);flex-wrap:wrap}
@media (min-width:760px){
  .al-head{display:grid;grid-template-columns:56px minmax(0,1fr) 220px 52px;column-gap:var(--s4);padding:var(--s3) 0 var(--s2) var(--s4);font-size:.8125rem;font-weight:600;color:var(--text-secondary);border-bottom:1px solid var(--separator)}
  .al-list>.al-head+.al-month{border-top:0}
  .al-list>.al-month:first-of-type{border-radius:0}
  .al-main{grid-template-columns:56px minmax(0,1fr) 220px;grid-template-areas:"date text fill";column-gap:var(--s4);padding-right:var(--s4)}
  .al-date{align-self:center;width:56px;height:56px}
  .al-date b{font-size:1.375rem}
  .al-invite{padding-left:calc(var(--s4) * 2 + 56px)}
  .al-invite>span:first-child{flex-basis:auto;margin-right:var(--s2)}
}
.rowmenu{position:relative;flex:none}
.rowmenu summary{list-style:none;cursor:pointer}
.rowmenu summary::-webkit-details-marker{display:none}
.rowmenu[open] summary{background:var(--brand-tint)}
.rowmenu .pop{position:absolute;right:0;top:calc(100% + 4px);width:min(250px,calc(100vw - 2 * var(--gutter)));border-radius:var(--radius-control);padding:var(--s1);z-index:40;background:var(--surface-elevated);border:1px solid var(--separator);box-shadow:var(--shadow-pop)}
.rowmenu .pop.up{top:auto;bottom:calc(100% + 4px)}
.rowmenu[open] .pop{animation:pop var(--t-swap) var(--ease-standard)}
.rowmenu .popitem{justify-content:flex-start;gap:var(--s3);text-decoration:none}
.rowmenu .popitem svg.i{width:18px;height:18px;color:var(--text-secondary)}
.rowmenu .popitem.danger,.rowmenu .popitem.danger svg.i{color:var(--status-danger)}
.rowmenu hr{margin:var(--s1) var(--s2)}
/* Bestenliste: Rang-Kreis, Name, Stunden rechts, dünner Balken darunter (relativ zur Spitze) */
.lb-sub{margin:2px 0 var(--s3)}
.lb{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.lb-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;grid-template-areas:"rank name hours" "rank bar bar";column-gap:var(--s3);row-gap:6px;align-items:center;padding:var(--s2) var(--s3) var(--s2) var(--s2);border-radius:var(--radius-control)}
.lb-rank{grid-area:rank;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface-sunken);color:var(--text-secondary);font-weight:700;font-size:.875rem;font-variant-numeric:tabular-nums}
.lb-row.m1 .lb-rank{background:var(--tvw-gelb);color:var(--on-accent)}
.lb-row.m23 .lb-rank{background:var(--brand-tint);color:var(--brand-ink)}
.lb-name{grid-area:name;min-width:0;display:flex;align-items:center;gap:6px;font-weight:600}
.lb-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-hours{grid-area:hours;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.lb-bar{grid-area:bar;height:4px}
.lb-row.m1 .lb-bar>span{background:var(--tvw-gelb)}
.lb-row.is-self{background:var(--brand-tint)}
.lb-row.is-self .lb-bar{background:color-mix(in srgb,var(--brand-primary) 14%,transparent)}
.lb-you{flex:none;display:inline-block;padding:0 7px;border-radius:var(--radius-pill);background:var(--brand-primary);color:var(--brand-on-primary);font-size:.75rem;font-weight:700;line-height:1.5;vertical-align:1px}
.lb-gap{text-align:center;color:var(--text-secondary);line-height:1;padding:2px 0;letter-spacing:.2em}
.lb-more{margin:var(--s3) 0 0 calc(32px + var(--s3) + var(--s2));font-size:.875rem;color:var(--text-secondary)}
.lb-empty{display:flex;gap:var(--s3);align-items:flex-start;margin:0;color:var(--text-secondary)}
.lb-empty svg.i{flex:none;color:var(--brand-primary);margin-top:2px}
.evcard{position:relative;transition:background-color var(--t-hover) var(--ease-standard)}
.evcard a.stretch::after{content:"";position:absolute;inset:0;border-radius:inherit}
.evcard form,.evcard .btn{position:relative;z-index:1}
@media (hover:hover){.evcard:has(a.stretch:hover){background:color-mix(in srgb,var(--surface-sunken) 45%,var(--surface-card))}}

/* ---------- Seitenwechsel: kurzer Überblendeffekt (htmx View Transitions), Navigation bleibt ruhig stehen ---------- */
::view-transition-old(root){animation:vt-out 140ms var(--ease-standard) both}
::view-transition-new(root){animation:vt-in 200ms var(--ease-standard) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* Feldfehler: Text unter dem Feld, nicht nur Farbe */
.field-error::before{content:"!";flex:none;display:inline-grid;place-items:center;width:1.125rem;height:1.125rem;margin-top:1px;border-radius:50%;background:var(--status-danger);font-size:.75rem;font-weight:700;color:var(--on-danger)}
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--status-danger)}
@media (prefers-color-scheme:dark){.btn.danger.primary,.sheet .btn.danger{background:var(--danger-fill);color:var(--on-danger)}@media (hover:hover){.btn.danger.primary:hover,.sheet .btn.danger:hover{background:var(--danger-fill-hover)}}}
input[type=checkbox]:focus,input[type=radio]:focus{box-shadow:none;border-color:var(--field-border)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:3px solid var(--brand-primary);outline-offset:2px;border-radius:4px}
input[type=radio]:focus-visible{border-radius:50%}
/* Touch-Ziele (DESIGN.md: mind. 44 px): Auswahl im Filter voll hoch, Chips gleich ausgerichtet, Fusszeilen-Links */
.filterbar .tabs a{min-height:40px}
.filterbar .tabs a::after{inset:-2px}

/* ---------- Sammelkarte: gleiche Aufgaben mit allen Plätzen ---------- */
.slots{list-style:none;margin:var(--s2) 0 0;padding:0;border-top:1px solid var(--separator)}
.slot{display:flex;align-items:center;gap:var(--s2);min-height:40px;padding:4px 0;border-bottom:1px solid var(--separator);font-size:.9375rem;scroll-margin-top:calc(var(--top-h) + var(--s6))}
.slot:last-child{border-bottom:0}
.slot-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--text-secondary)}
.slot-ico svg.i{width:18px;height:18px}
.slot-ico.ok{color:var(--status-success)}
.slot-ico.warn{color:var(--status-warning)}
/* Freier Platz: leerer, gestrichelter Kreis (Form trägt die Bedeutung, nicht nur die Farbe) */
.slot-ico.open::before{content:"";width:16px;height:16px;border-radius:50%;border:2px dashed color-mix(in srgb,var(--brand-primary) 70%,var(--text-secondary))}
.slot-who{flex:1;min-width:0;overflow-wrap:anywhere}
.slot.me .slot-who{font-weight:600}
.slot-end{flex:none;display:flex;align-items:center;gap:6px}
.slot-end .acts{margin:0;gap:6px;flex-wrap:wrap}
.slot:target{background:var(--brand-tint);border-radius:var(--radius-sm);animation:fade var(--t-swap) var(--ease-standard)}
.task.group .main-act{align-self:flex-start;margin-top:2px}
/* Admin: Plätze einer Aufgabengruppe, je Zeile Person · Zuweisen · Bearbeiten */
.aslots{list-style:none;margin:var(--s2) 0 0;padding:0;border-top:1px solid var(--separator)}
.aslots>li{padding:6px 0;border-bottom:1px solid var(--separator);scroll-margin-top:calc(var(--top-h) + var(--s6))}
.aslots>li:last-child{border-bottom:0;padding-bottom:0}
.aslots .assignrow{margin:0;flex-wrap:wrap}
.aslots .assignrow select{flex:1 1 9rem}
.aslot-info{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:2px 0 0}
.admintask-head .meta .badge{vertical-align:baseline}
/* Eigener Platz: beschriftete Aktionen in eigener Zeile, bündig unter dem Text */
.slot:has(.slot-end .acts){flex-wrap:wrap;padding-bottom:var(--s2)}
.slot-end:has(.acts){flex-basis:100%;padding-left:0;flex-wrap:wrap}
@media (min-width:600px){.slot-end:has(.acts){padding-left:32px}}
.task .acts .btn.small{padding:0 var(--s3) 0 10px}

/* Verwaltungsmodus: Bringliste und Anlass-Titel */
.addbring{margin-top:var(--s3)}
.addbring summary{list-style:none;cursor:pointer}
.addbring summary::-webkit-details-marker{display:none}
.addbring[open] summary{margin-bottom:var(--s1)}
.sollhow{margin:0 0 var(--s3);max-width:var(--read-max)}
.sollhow summary{cursor:pointer;color:var(--brand-primary);font-size:.9375rem;font-weight:600;min-height:44px;display:flex;align-items:center}
.sollhow p{margin:0}
.evtitle{margin:var(--s4) 0 var(--s1);font-size:1.375rem}
.bringgroup{scroll-margin-top:calc(var(--top-h) + var(--s4))}
/* Bringliste verwalten: gleiche Einträge als ein Block («Kuchen ×4»), darunter je Platz eine Auswahl;
   gespeichert wird wie bei den Aufgaben über den Knopf, der erst bei einer Änderung erscheint */
.bringadmin{list-style:none;margin:0;padding:0}
.bringadmin>li{padding:var(--s3) 0;border-bottom:1px solid var(--separator)}
.bringadmin>li:first-child{padding-top:0}
.bringadmin>li:last-child{border-bottom:0;padding-bottom:0}
.bringrow-h{display:flex;align-items:flex-start;gap:var(--s2)}
.bringrow-h p{flex:1;min-width:0;margin:0;overflow-wrap:anywhere}
.bringrow-h .badge{flex:none}
.bringrow-n{color:var(--text-secondary);font-weight:600;font-variant-numeric:tabular-nums}
.bringslots{list-style:none;margin:var(--s2) 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.bringslots .assignrow{margin:0;flex-wrap:nowrap}
.bringslots select{flex:1;min-width:0;max-width:24rem}
.bringrow-acts{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2);margin-top:var(--s2)}
/* Benachrichtigen einmal pro Aufgabe statt pro Platz (wirkt nur mit JavaScript; ohne bleibt es eingeschaltet) */
.notify-all{margin:var(--s2) 0 0;font-size:.875rem;color:var(--text-secondary)}
html:not(.js) .notify-all{display:none}
.btn.ghost.danger{color:var(--status-danger)}
@media (hover:hover){.btn.ghost.danger:hover{background:var(--danger-bg)}}

/* ---------- Verwaltung eines Anlasses ---------- */
.evhead h2{margin:0;font-size:1.25rem}
.evhead>p{margin:2px 0 0}
.evfill{margin-top:var(--s3)}
.evfill p{margin:0 0 6px;font-size:.9375rem;font-variant-numeric:tabular-nums}
.evclubs{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s2)}
/* Werkzeuge: beschriftete Kacheln, 3 je Zeile auf dem Smartphone, sonst in einer Reihe */
.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin:var(--s3) 0}
@media (min-width:760px){.tools{grid-template-columns:repeat(6,minmax(0,1fr))}}
.tools form{display:contents}
.tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:72px;padding:var(--s2) 6px;border-radius:var(--radius-control);
  background:var(--surface-card);border:1px solid var(--card-border);box-shadow:var(--card-shadow);color:var(--text-primary);font:600 .8125rem/1.2 var(--font);text-align:center;cursor:pointer;
  transition:background-color var(--t-hover) var(--ease-standard),transform var(--t-press) var(--ease-standard)}
.tool svg.i{width:22px;height:22px;color:var(--brand-primary)}
.tool:active{transform:scale(.97)}
.tool.primary{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--brand-on-primary)}
.tool.primary svg.i{color:currentColor}
.gridbox{margin:var(--s2) 0}
.gridbox>summary{cursor:pointer;font-weight:600;color:var(--brand-primary);min-height:44px;display:flex;align-items:center}
/* Einstellungen: aufklappbare Zeilen wie eine gruppierte iOS-Liste */
.setlist{background:var(--surface-card);border:1px solid var(--card-border);border-radius:var(--radius-card);box-shadow:var(--card-shadow);overflow:hidden}
.set>summary{list-style:none;display:flex;align-items:center;gap:var(--s3);min-height:56px;padding:var(--s2) var(--s4);cursor:pointer;transition:background-color var(--t-hover) var(--ease-standard)}
.set>summary::-webkit-details-marker{display:none}
.set>summary::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--text-secondary);border-bottom:2px solid var(--text-secondary);transform:rotate(45deg);margin:-4px 4px 0 0;transition:transform var(--t-hover) var(--ease-standard)}
.set[open]>summary::after{transform:rotate(-135deg);margin-top:4px}
@media (hover:hover){.set>summary:hover{background:var(--surface-sunken)}}
.set>summary:active{background:var(--surface-sunken)}
.setlist>.set+.set{border-top:1px solid var(--separator)}
.set[open]{background:color-mix(in srgb,var(--surface-sunken) 35%,var(--surface-card))}
.set>:not(summary){margin-left:var(--s4);margin-right:var(--s4)}
.set>:last-child:not(summary){margin-bottom:var(--s4)}
.setlink{display:flex;align-items:center;gap:var(--s3);min-height:56px;padding:var(--s2) var(--s4);color:inherit;transition:background-color var(--t-hover) var(--ease-standard)}
.setlink::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--text-secondary);border-bottom:2px solid var(--text-secondary);transform:rotate(-45deg);margin-right:4px}
@media (hover:hover){.setlink:hover{background:var(--surface-sunken);text-decoration:none}}
.setlink:active{background:var(--surface-sunken)}
.set.setlink>span{margin:0}
.shiftsec{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin:var(--s5) 0 var(--s2);flex-wrap:wrap}
.shiftsec>.row{margin:0;flex:none;gap:6px}
.shiftsec .tasksection{margin:0;flex:1 1 14rem;display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.shiftsec .tasksection svg.i{width:16px;height:16px;color:var(--brand-primary)}
.shiftsec-empty{margin:0 0 var(--s3)}
/* Mehrere Aufgaben einer Schicht: Anzahl links, Titel, Zeiten (auf dem Handy unter dem Titel) */
.multihead{display:none}
.multilist{list-style:none;margin:var(--s3) 0 0;padding:0}
.multirow{position:relative;display:grid;grid-template-columns:4.5rem 1fr 1fr;grid-template-areas:"cnt title title" "cnt from to";gap:6px var(--s3);align-items:center;padding:var(--s2);border-top:1px solid var(--separator);border-radius:var(--radius-sm);transition:background-color var(--t-hover) var(--ease-standard)}
.multirow .cnt{grid-area:cnt;text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
.multirow .mr-title{grid-area:title;min-width:0;display:flex;flex-direction:column;gap:1px}
.multirow .mr-from{grid-area:from}.multirow .mr-to{grid-area:to}
.mr-name{font-weight:600;overflow-wrap:anywhere}
.mr-sub{font-size:.8125rem;color:var(--text-secondary)}
.multirow:has(.cnt:not(:placeholder-shown)){background:var(--brand-tint);border-top-color:transparent}
.multisum{margin:var(--s3) 0;font-weight:600;font-variant-numeric:tabular-nums}
@media (min-width:700px){
  .multihead{display:grid;grid-template-columns:5rem 1fr 8rem 8rem;gap:var(--s3);padding:0 var(--s2);font-size:.8125rem;font-weight:600;color:var(--text-secondary)}
  .multirow{grid-template-columns:5rem 1fr 8rem 8rem;grid-template-areas:"cnt title from to"}
}
/* Reservierung abgelaufen (app.js): Eintrag gedämpft, Karte zeigt Hinweis und Link statt Bestätigen */
[data-res-item].is-expired .li-title{color:var(--text-secondary)}
[data-res-item].is-expired .datetile{opacity:.6}
[data-res-card].is-expired .list{margin-bottom:var(--s3)}
.evedit-sub{margin:-4px 0 var(--s3)}
/* Einstellungen im Arbeitsbereich: so breit wie die anderen Tabs (nicht auf die Formularbreite begrenzt) */
.app>form.card.evedit.ws-form:not(.inline-form){max-width:none}
.evtabs{margin:0 0 var(--s4)}
/* Tabs folgen den Schaltern sofort (Tab «Anlass»); gespeichert wird erst mit dem Formular */
body:has(#e_sh:not(:checked)) .evtabs [data-tab=schichten],body:has(#e_cv:not(:checked)) .evtabs [data-tab=vereine]{display:none}
body:has(.evflags input.switch[name=tasks]:not(:checked)) .evtabs :is([data-tab=schichten],[data-tab=aufgaben]),body:has(#e_br:not(:checked)) .evtabs [data-tab=bringliste]{display:none}
.evflags:has(input.switch[name=tasks]:not(:checked)) .needs-tasks,.evflags:has(input.switch[name=cross]:not(:checked)) .needs-cross{display:none}
.switchrow.sub{margin-left:var(--s4);padding-left:var(--s3);border-left:1px solid var(--separator)}
.evflags .needs-cross{margin:0 0 var(--s2) var(--s4)}
.evtabs a{animation:tabin var(--t-swap) var(--ease-standard)}
@keyframes tabin{from{opacity:0;transform:scale(.96)}}
@media (prefers-reduced-motion:reduce){.evtabs a{animation:none}}
.tabcount{font-size:.75rem;font-weight:600;min-width:1.25rem;padding:0 6px;border-radius:var(--radius-pill);background:color-mix(in srgb,currentColor 14%,transparent);text-align:center;font-variant-numeric:tabular-nums}
.set-ico{flex:none;width:32px;height:32px;border-radius:var(--radius-sm);background:var(--brand-tint);color:var(--brand-ink);display:flex;align-items:center;justify-content:center}
.set-ico svg.i{width:18px;height:18px}
.set-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.set-title{font-weight:600}
.set-sub{font-size:.8125rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set[open] .set-sub{white-space:normal}
.set .row.nowrap-row{padding:var(--s2) 0;border-bottom:1px solid var(--separator)}
.danger-zone{margin-top:var(--s5);background:var(--surface-card);border:1px solid color-mix(in srgb,var(--status-danger) 35%,var(--card-border));border-radius:var(--radius-card)}
.danger-zone .set-ico{background:var(--danger-bg);color:var(--status-danger)}
.danger-zone .set-title{color:var(--status-danger)}
@media (prefers-reduced-motion:reduce){.set>summary::after{transition:none}}

/* ---------- Vereinsseite ---------- */
#dash-events .more{font-weight:600;font-size:.875rem;display:inline-flex;align-items:center;gap:2px;min-height:44px}
#dash-events .more svg.i{width:16px;height:16px}
.admingroups{display:grid;gap:0 var(--s4);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.admingroups{grid-template-columns:repeat(3,minmax(0,1fr))}}
.grouplabel{font-size:.8125rem;font-weight:600;color:var(--text-secondary);margin:var(--s3) var(--s1) var(--s1)}
.admingroups .list{margin-top:0}
/* Live-Bereiche in aufklappbaren Zeilen: ohne eigene Karte und doppelte Überschrift */
.set>.card{background:none;border:0;box-shadow:none;padding:0;margin-top:0}
.set>.card>h2,.set>.card>.row.between>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Blätter-Navigation */
.pager{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--separator)}
.pager .btn.small{gap:2px;padding:0 var(--s3)}
.pager .btn.small svg.i{width:16px;height:16px}
.pager-info{font-size:.875rem;font-weight:600;text-align:center;font-variant-numeric:tabular-nums}
.pager-range{font-weight:400;color:var(--text-secondary)}
.pager-range::before{content:" · "}
@media (max-width:420px){.pager-range{display:block}.pager-range::before{content:none}}
.pager-one{margin:var(--s2) 0 0}

/* Hinweis «nicht zugestellt»: wie eine Menüzeile, aber rot */
.alertrow{display:flex;align-items:center;gap:var(--s3);min-height:56px;padding:var(--s2) var(--s4);margin:var(--s3) 0;border-radius:var(--radius-card);
  background:var(--danger-bg);border:1px solid color-mix(in srgb,var(--status-danger) 40%,transparent);color:var(--text-primary);transition:background-color var(--t-hover) var(--ease-standard)}
@media (hover:hover){.alertrow:hover{text-decoration:none;background:color-mix(in srgb,var(--status-danger) 14%,var(--surface-card))}}
.alertrow:active{background:color-mix(in srgb,var(--status-danger) 14%,var(--surface-card))}
.alertrow .set-ico{background:var(--status-danger);color:var(--on-danger)}
.alertrow .set-title{color:var(--status-danger)}
.alertrow .li-end::after{content:"";width:8px;height:8px;border-right:2px solid var(--status-danger);border-top:2px solid var(--status-danger);transform:rotate(45deg);display:block}
/* Liste unzustellbarer Nachrichten */
.outbox-all{display:flex;justify-content:flex-end;margin-bottom:var(--s2)}
.outbox .outbox-row{flex-wrap:wrap;align-items:flex-start}
.outbox .li-ico.danger{background:var(--danger-bg);color:var(--status-danger)}
.outbox-err{overflow-wrap:anywhere}
.outbox-acts{flex-basis:100%;display:flex;flex-wrap:wrap;gap:var(--s2);padding-left:44px}
.outbox-acts select{width:auto;min-height:44px;padding:0 2rem 0 var(--s3);font-size:.875rem;border-radius:var(--radius-pill)}
.li-text .progress{display:block;margin-top:6px;max-width:28rem}
@media (max-width:599px){.outbox-acts{padding-left:0}}
.outbox-msg:empty{display:none}
.outbox-msg{margin:0 0 var(--s2)}

/* Auge in der Kopfleiste: gewählte Ansicht steht klein darunter */
.viewmenu summary.has-label{flex-direction:column;gap:1px;width:auto;min-width:44px;height:auto;min-height:44px;padding:3px 8px;border-radius:var(--radius-control)}
.viewmenu summary.has-label svg.i{width:20px;height:20px}
.vm-label{font-size:.6875rem;font-weight:700;line-height:1.1;letter-spacing:.01em;white-space:nowrap}

/* Profil als Menü */
.profilemenu>section+section{margin-top:var(--s2)}
.profilemenu .setlist+.list{margin-top:var(--s2)}
.set h3.grouplabel{margin:var(--s3) 0 var(--s1)}
.set>form>p:last-child{margin-bottom:0}
.set fieldset{background:var(--surface-card)}
.logoutrow{margin:var(--s6) 0 0}
.logoutrow .btn{color:var(--status-danger);background:var(--danger-bg)}
.set .subblock{margin-top:var(--s4);padding-top:var(--s1);border-top:1px solid var(--separator)}

/* Schichten eines Anlasses */
.shiftsbox h2{display:flex;align-items:center;gap:var(--s2)}
.shiftsbox .shiftlist{margin:var(--s2) 0}
.shiftform{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:0 var(--s2);align-items:end;margin-top:var(--s2)}
.shiftform label{margin-top:var(--s2)}
.shiftform .btn{grid-column:1/-1;justify-self:start;margin-top:var(--s3)}
@media (min-width:600px){.shiftform{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto}.shiftform .btn{grid-column:auto;margin-top:0}}
.shiftlist .shiftday{padding:var(--s2) var(--s4) var(--s1);font-size:.8125rem;font-weight:600;color:var(--text-secondary);background:var(--surface-sunken)}
.shiftlist .shiftday+li>.li{border-top:0}
/* Tag in eigener Zeile über Name, Von, Bis */
.shiftform .sh-date{grid-column:1/-1}
@media (min-width:600px){.shiftform .sh-date{grid-column:auto}.shiftform:has(.sh-date){grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto}}
/* Schichtleitung je Schicht */
.shiftlist .leadrow{display:flex;gap:var(--s2);align-items:center;padding:0 var(--s4) var(--s2) calc(var(--s4) + 44px)}
.shiftlist .leadrow select{flex:1;min-width:0;max-width:20rem;min-height:44px;padding:0 2rem 0 var(--s3);font-size:.875rem;border-radius:var(--radius-pill)}
@media (max-width:599px){.shiftlist .leadrow{padding-left:var(--s4)}}
.shiftform .sh-lead{grid-column:1/-1}
/* Kontakt der Schichtleitung beim eigenen Einsatz */
.task .contact{display:flex;gap:6px;align-items:flex-start;margin:var(--s2) 0 0;font-size:.875rem;color:var(--text-secondary)}
.task .contact svg.i{width:16px;height:16px;margin-top:1px;flex:none}
.task .contact strong{color:var(--text-primary);font-weight:600}
.slot-end .contact{flex-basis:100%;margin:0 0 var(--s1)}
.shiftpeople .shiftstatus{flex-wrap:wrap;justify-content:flex-end}
@media (max-width:599px){.shiftpeople .li{flex-wrap:nowrap}.shiftpeople .shiftstatus{justify-content:flex-start;flex-basis:auto;padding-left:0}}

/* Superuser: Vereine eines Anlasses als Pillen (+ zuordnen, − entfernen) */
.vpills{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s3) 0 0}
.vpills form{display:contents}
.vpill{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 var(--s2) 0 var(--s3);border-radius:var(--radius-pill);
  border:1px solid var(--card-border);background:var(--surface-card);color:var(--text-primary);font:600 .875rem/1.2 var(--font);position:relative;
  transition:transform var(--t-press) var(--ease-standard),background-color var(--t-hover) var(--ease-standard),border-color var(--t-hover) var(--ease-standard),color var(--t-hover) var(--ease-standard)}
button.vpill{cursor:pointer}
button.vpill::after{content:"";position:absolute;inset:-4px 0}
@media (hover:hover){button.vpill:hover{background:var(--surface-sunken)}}
button.vpill:active{transform:scale(.97)}
.vpill.on{background:var(--brand-tint);border-color:color-mix(in srgb,var(--brand-primary) 45%,transparent);color:var(--brand-ink)}
@media (hover:hover){button.vpill.on:hover{background:color-mix(in srgb,var(--brand-primary) 18%,transparent)}}
.vpill.invited{border-style:dashed}
.vpill.lead{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--brand-on-primary);padding-right:var(--s3)}
.vpill.locked{padding-right:var(--s3)}
.vpill svg.i{width:15px;height:15px;flex:none}
.vp-act{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--surface-sunken);color:var(--text-secondary)}
.vpill.on .vp-act{background:color-mix(in srgb,var(--brand-primary) 16%,transparent);color:var(--brand-primary)}
@media (hover:hover){button.vpill:not(.on):hover .vp-act{background:var(--brand-primary);color:var(--brand-on-primary)}}
.vp-note{font-weight:500;font-size:.75rem;opacity:.85}
.vp-msg{margin:var(--s2) 0 0;font-size:.8125rem;color:var(--status-success)}
.vp-msg.err{color:var(--status-danger)}
.vp-more{margin-top:var(--s3)}
.vp-more>form{margin-top:var(--s2)}
@media (prefers-reduced-motion:reduce){.vpill{transition:none}button.vpill:active{transform:none}}

/* Gemeinsamer Anlass: Stunden-Soll je Verein */
.evsoll{margin-top:var(--s4);padding-top:var(--s1);border-top:1px solid var(--separator)}
.evsoll .grouplabel{margin-left:0}
.sollist{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.sollist .progress{margin-top:6px}
.sl-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--s1) var(--s3)}
.sl-name{font-weight:600;min-width:0;overflow-wrap:anywhere}
.sollist .mine .sl-name::after{content:" · dein Verein";font-weight:400;color:var(--text-secondary);font-size:.8125rem}
.sl-num{font-size:.9375rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.sl-sub{margin:4px 0 0;font-size:.8125rem;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.sl-gap{color:var(--status-warning)}
.sollform{display:grid;grid-template-columns:minmax(0,1fr) 7rem minmax(4.5rem,auto);gap:var(--s2) var(--s3);align-items:center;margin:var(--s3) 0}
.sl-calc{font-size:.8125rem;color:var(--text-secondary);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.sl-sum{margin:0 0 var(--s2);font-size:.875rem;font-weight:600;font-variant-numeric:tabular-nums}
.sl-sum.over{color:var(--status-danger)}
.sl-share{font-weight:500;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.sl-total{margin:0 0 var(--s2);font-size:.8125rem;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.sollform label{margin:0}
.unitfield{display:flex;align-items:center;gap:var(--s2)}
.unitfield input{text-align:right;font-variant-numeric:tabular-nums}
.unitfield span{color:var(--text-secondary);font-weight:600}

/* Offene Ausschreibung */
.poolnote{display:flex;gap:var(--s2);align-items:flex-start;margin:0 0 var(--s3);padding:var(--s2) var(--s3);border-radius:var(--radius-control);background:var(--brand-tint);color:var(--text-primary);font-size:.875rem}
.poolnote svg.i{flex:none;width:18px;height:18px;color:var(--brand-primary);margin-top:2px}

/* Einladungen zu Anlässen in der Übersicht: Knöpfe unter dem Text, ab genug Breite daneben */
.evinvites .li{flex-wrap:wrap}
.evinvites .li .evinv-acts{flex:1 1 100%;display:flex;justify-content:flex-end;align-items:center;gap:var(--s2);flex-wrap:wrap}
@container main (min-width:900px){.evinvites .li{flex-wrap:nowrap}.evinvites .li .evinv-acts{flex:none}}

/* Verwaltung gemeinsamer Anlässe: Aufgaben pro Verein */
.grouplabel.tasksection{font-size:1rem;color:var(--text-primary);margin:var(--s5) var(--s1) var(--s2);padding-bottom:var(--s1);border-bottom:1px solid var(--separator)}
.grouplabel.tasksection .small{font-weight:500}
.assignrow.ro{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:44px}

/* ---------- Einsätze, Bringliste und Mitglieder: Listen ---------- */
/* Auswahlpfeil je Farbschema (Token --select-arrow) */
select:not([multiple]){background-image:var(--select-arrow)}

/* Status-Chips in Einsatzkarten brechen um, statt die Seite zu verbreitern */
.task .chips .badge{white-space:normal;max-width:100%;overflow-wrap:anywhere;text-align:left;line-height:1.3;padding-top:3px;padding-bottom:3px}
.task .title .badge{white-space:normal}

/* Einsätze: Anlässe auf- und zuklappen */
.evhead-row{align-items:center}
.evtoggle-h{flex:1;min-width:0;margin:0;font-size:1.1875rem}
.evtoggle{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--s2);align-items:start;width:100%;min-height:44px;padding:var(--s1) 0;border:0;background:none;color:var(--text-primary);font:inherit;font-weight:700;line-height:1.3;text-align:left;cursor:pointer;border-radius:var(--radius-sm)}
.evtoggle>svg.i{width:18px;height:18px;margin-top:calc((1.3em - 18px) / 2);color:var(--text-secondary);transform:rotate(90deg);transition:transform var(--t-hover) var(--ease-standard)}
.evtoggle[aria-expanded=false]>svg.i{transform:none}
/* Titel und Badges fliessen gemeinsam: kurzer Titel mit Badge auf einer Zeile, langer Titel bricht neben dem Pfeil um */
.evtoggle-m{min-width:0}
.evtoggle-t{overflow-wrap:anywhere;margin-right:var(--s2)}
.evtoggle .badge{font-size:.75rem;vertical-align:.15em;margin:2px var(--s1) 0 0}
@media (hover:hover){.evtoggle:hover .evtoggle-t{color:var(--brand-primary)}}
.evhead-acts{display:flex;gap:2px;flex:none}
/* Handy: schmalere Symbolknöpfe (Trefferfläche bleibt über ::after 44 px), damit lange Anlassnamen neben dem Pfeil Platz haben */
@media (max-width:599px){.evhead-acts .btn.small{width:36px;min-width:36px;padding:0}.evhead-acts .btn.small::after{inset:-4px}}
.evhead-acts .btn.ico{color:var(--text-secondary)}
@media (hover:hover){.evhead-acts .btn.ico:hover{color:var(--brand-primary)}}
.eventgroup+.eventgroup{border-top:1px solid var(--separator);margin-top:var(--s4)}
.eventgroup+.eventgroup .sechead{margin-top:var(--s3)}
.evbody{padding-bottom:var(--s2)}
.evbody-acts{margin:0 0 var(--s2)}
.evall{display:flex;justify-content:flex-end;margin:var(--s2) 0 calc(-1 * var(--s2))}
html:not(.js) .evall{display:none}
@media (prefers-reduced-motion:reduce){.evtoggle>svg.i{transition:none}}

/* Übersicht: weitere eigene Einsätze als kompakte Liste */
.upcoming-rest{margin-top:0}
#meine .grouplabel{margin:var(--s3) var(--s1) var(--s1)}
#meine .task.hl,#meine .task{margin-bottom:var(--s2)}

/* Hinweisflächen (gelb) mit Liste: keine Karte in der Karte, Zeilen mit Trennlinie */
.card.warn .list{background:none;border:0;border-top:1px solid color-mix(in srgb,var(--status-warning) 30%,transparent);border-radius:0;box-shadow:none;margin:var(--s3) 0 0;overflow:visible}
.card.warn .list .li,.card.warn .list>li>a,.card.warn .list>a{padding-left:0;padding-right:0}
.card.warn .list>*+*>.li,.card.warn .list>*+*>a{border-top-color:color-mix(in srgb,var(--status-warning) 30%,transparent)}
@media (hover:hover){.card.warn .list a:hover{background:none}}
@media (hover:hover){.card.warn .list a:hover .li-title{color:var(--brand-primary)}}

/* Bringliste: gleiche Einträge zusammengefasst */
.bring-scope{margin:-2px var(--s1) var(--s2)}
.bringlist>li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);padding:var(--s3) var(--s4)}
.bringlist>li+li{border-top:1px solid var(--separator)}
.bb-main{flex:1 1 14rem;min-width:0}
.bb-title{margin:0;line-height:1.35}
.bb-title strong{font-weight:600}
.bb-count{display:flex;align-items:center;gap:var(--s2);margin-top:6px;font-variant-numeric:tabular-nums}
.bb-count .progress{flex:1;max-width:12rem}
.bb-names{display:flex;gap:4px;align-items:flex-start;margin:4px 0 0}
.bb-names svg.i{width:15px;height:15px;margin-top:2px;color:var(--status-success);flex:none}
.bb-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-left:auto}

/* Mitglieder: Handy als Liste, ab genug Platz als Tabelle */
.avatar{position:relative;flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--brand-tint);color:var(--brand-ink);font-size:.8125rem;font-weight:700;letter-spacing:.02em}
.avatar-on{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--status-success);border:2px solid var(--surface-card)}
/* Rolle neben dem Namen, Kontakt einzeilig: alle Zeilen gleich hoch */
.mlist .li-title .badge{font-size:.6875rem;vertical-align:.1em;margin-left:2px}
.mlist .li-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtable{display:none}
@container main (min-width:760px){.mlist{display:none}.mtable{display:block}}
.searchrow input[type=search]{max-width:none}

/* Arbeitsbereich: Tab-Leiste erst ab zwei Bereichen */
.ws-tabs.is-single{display:none}

/* Anmeldung: Marke nur einmal (grosser Kopf), Kopfleiste ohne zweites Logo */
body:not(.has-nav):has(.auth) .topbar .brand{display:none}
body:not(.has-nav):has(.auth) .topbar{min-height:calc(var(--s4) + env(safe-area-inset-top,0px))}

/* ---------- Einsatzliste, Schicht, Soll und Zuweisen ---------- */
/* Zurück-Links überall gleich (Chevron, 44 px Trefferfläche) */
.ws-back+.pagehead,.ws-back+h1{margin-top:var(--s1)}

/* Einsatzliste der Event-Leitung: ein Block je Aufgabe */
.leitblock{padding:var(--s3) var(--s4)}
.leit-head{display:flex;align-items:center;gap:var(--s3)}
.leit-when{flex:none;min-width:3.5rem;text-align:center;background:var(--surface-sunken);border-radius:var(--radius-sm);padding:6px var(--s1);line-height:1.2;font-variant-numeric:tabular-nums}
.leit-when b{display:block;font-size:.9375rem}
.leit-when small{display:block;color:var(--text-secondary);font-size:.8125rem}
.leit-title{flex:1;min-width:0}
.leit-title h2{margin:0;font-size:1rem}
.leit-title p{margin:1px 0 0}
.leit-people{list-style:none;margin:var(--s3) 0 0;padding:0;border-top:1px solid var(--separator)}
.leit-people>li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--separator)}
.leit-people>li:last-child{border-bottom:0}
.leit-person{flex:1 1 12rem;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--s3)}
.leit-name{font-weight:600}
.leit-tel{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;font-variant-numeric:tabular-nums}
.leit-tel svg.i{width:16px;height:16px}
.leit-ci{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.leit-open{display:flex;align-items:center;gap:6px;margin:var(--s2) 0 0;color:var(--status-warning);font-weight:600}
.leit-open svg.i{width:16px;height:16px}

/* Schicht: Status in der Zeile, Telefonnummer antippbar */
.shiftpeople .li-text .leit-tel{min-height:32px;font-size:.875rem;align-self:flex-start}
.avatar-open{background:none;border:2px dashed color-mix(in srgb,var(--brand-primary) 60%,var(--text-secondary))}
@media (max-width:599px){
  .shiftpeople .li:has(.shiftstatus form){flex-wrap:wrap}
  .shiftpeople .li:has(.shiftstatus form) .shiftstatus{flex-basis:100%;justify-content:flex-start;padding-left:48px}
}

/* Soll-Liste: Name, Stunden und Balken statt Tabelle */
.sollrows{list-style:none;margin:var(--s2) 0 0;padding:0}
.sollrows>li{padding:var(--s2) 0;border-top:1px solid var(--separator)}
.sollrows>li:first-child{border-top:0}
.sr-line{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);margin-bottom:6px}
.sr-name{font-weight:600;min-width:0;overflow-wrap:anywhere}
.sr-num{flex:none;font-variant-numeric:tabular-nums;color:var(--text-secondary);font-size:.9375rem;white-space:nowrap}
.sr-num b{color:var(--text-primary)}

/* Zuweisen: Speichern-Knopf erst nach einer Änderung (mit JS), dann beschriftet und hervorgehoben */
.js .assignrow:not(.is-changed) .assign-save{display:none}
.js .assignrow.is-changed .assign-save{width:auto;padding:0 var(--s3)}
.js .assignrow.is-changed .assign-save .bl{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
.js .assignrow.is-changed .assign-save svg.i{display:inline-block}
.js .aslots .assignrow.is-changed>a.btn.ico{display:none}

/* ---------- Mitgliederfilter und Helferstunden ---------- */
.memberfilter{max-width:var(--form-max);margin:var(--s2) 0 var(--s3)}
.memberfilter .searchrow{margin:0 0 var(--s2)}
.memberfilter .tabs{margin:0}
.tabs [aria-current=page] .tabcount,.tabs [aria-pressed=true] .tabcount{background:var(--count-on-active)}
/* Übersicht: Helferstunden als kompakte Zeile (Status, keine Hero-Kennzahl) */
.hourscard{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"text more" "bar bar";gap:var(--s2) var(--s3);align-items:center;padding:var(--s3) var(--s4);margin-top:var(--s4)}
.hc-text{grid-area:text;min-width:0}
.hourscard h2{margin:0;font-size:.875rem;font-weight:600;color:var(--text-secondary)}
.hc-num{margin:2px 0 0;font-variant-numeric:tabular-nums;color:var(--text-secondary)}
.hc-num b{font-size:1.25rem;color:var(--text-primary)}
.hourscard .progress{grid-area:bar}
.hc-more{grid-area:more;display:inline-flex;align-items:center;gap:2px;min-height:44px;font-weight:600;font-size:.875rem}
.hc-more svg.i{width:16px;height:16px}
@media (min-width:600px){.hourscard{grid-template-columns:minmax(0,14rem) minmax(0,1fr) auto;grid-template-areas:"text bar more"}}
.leit-intro{margin:calc(-1 * var(--s1)) 0 var(--s3)}

/* ---------- Personen, Aufgabenformular und Gefahrenbereiche ---------- */
/* Person verwalten: Kopf mit Kürzel, Kontakt als Knöpfe, Bereiche wie im Profil */
.personhead{display:flex;align-items:center;gap:var(--s3);margin:var(--s2) 0 var(--s2)}
.avatar-lg{width:56px;height:56px;font-size:1.125rem}
.ph-text{min-width:0}
.ph-text h1{margin:0;overflow-wrap:anywhere}
.ph-text p{margin:2px 0 0}
.ph-contact{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s2) 0 var(--s3)}
.ph-contact .btn{max-width:100%;min-width:0}
.ph-mail{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-soll{margin:0 0 var(--s4)}
.ph-sets{margin-bottom:0}
.set>form>.row.nowrap-row,.set>.row.nowrap-row{padding:var(--s2) 0}

/* Aufgabe erfassen/bearbeiten: Datum, Von, Bis kompakt nebeneinander */
.taskgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s3)}
.taskgrid .tg-date,.taskgrid .tg-wide{grid-column:1/-1}
@media (min-width:600px){
  .taskgrid{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr))}
  .taskgrid .tg-date{grid-column:auto}
}

/* Einsatz-Zusammenfassung (Ersatz, Tausch) */
.tasksum{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4)}
.tasksum .li-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.tasksum .li-title{font-weight:600}
.tasksum .li-sub{font-size:.8125rem;color:var(--text-secondary)}
.narrow .ws-back{margin-top:0}
.narrow h2.grouplabel{margin:var(--s3) var(--s1) var(--s1)}

/* Gefahrenbereiche (Austritt, Aufgabe löschen, Aufräumen) einheitlich: eingeklappt, rot umrandet */
.danger-zone>summary .set-title{color:var(--status-danger)}
.danger-zone>:not(summary){margin-left:var(--s4);margin-right:var(--s4)}
.danger-zone>:last-child:not(summary){margin-bottom:var(--s4)}
.danger-zone[open]{background:color-mix(in srgb,var(--danger-bg) 40%,var(--surface-card))}
/* Übersicht «Ich bringe mit»: gleiche Einträge zusammengefasst */
.bring-count{font-variant-numeric:tabular-nums;color:var(--brand-primary)}

/* ---------- Sicherungen, Protokoll und Kalender-Abo ---------- */
/* Sicherungen: eine Zeile je Datei, Wiederherstellen erst nach Aufklappen */
.backuplist{list-style:none;margin:var(--s2) 0 0;padding:0}
.backuplist>li{padding:var(--s2) 0;border-top:1px solid var(--separator)}
.backuplist>li:first-child{border-top:0}
.bk-row{display:flex;align-items:center;gap:var(--s3)}
.bk-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.bk-when{font-weight:600;font-variant-numeric:tabular-nums}
.bk-text .small{overflow-wrap:anywhere}
.bk-restore>summary{list-style:none;margin-top:var(--s1)}
.bk-restore>summary::-webkit-details-marker{display:none}
@media (hover:hover){.bk-restore[open]>summary:hover{background:var(--danger-bg);color:var(--status-danger)}}
.bk-restore[open]>summary{background:var(--danger-bg)}
.bk-restore form{margin:var(--s2) 0 var(--s1);padding:var(--s3);border-radius:var(--radius-control);background:color-mix(in srgb,var(--danger-bg) 55%,var(--surface-card))}
.bk-restore label{margin-top:0}
.bk-restore .copyrow input{font-family:var(--mono);letter-spacing:.04em}

/* Protokoll: Filter in einer Zeile, am Handy zwei Auswahlen nebeneinander und Suche darunter */
.logfilter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);margin:var(--s2) 0 var(--s3)}
.logfilter input[type=search]{grid-column:1/-1}
@media (min-width:760px){.logfilter{grid-template-columns:minmax(0,12rem) minmax(0,12rem) minmax(0,1fr)}.logfilter input[type=search]{grid-column:auto}}
.logfilter select,.logfilter input{min-height:44px}
.bk-restore[open]>summary.btn.ghost{color:var(--status-danger)}
/* Kalender-Abo: Direktlink (webcal://) unter dem Feld */
.cal-acts{margin:var(--s2) 0 0}

/* ---------- Fehlerseiten und grosse Schrift ---------- */
.errpage{max-width:440px;margin:var(--s8) auto var(--s6);text-align:center}
.err-ico{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--surface-sunken);color:var(--text-secondary);margin-bottom:var(--s3)}
.err-ico svg.i{width:26px;height:26px}
.errpage h1{margin:0 0 var(--s2)}
.err-msg{font-size:1.0625rem;font-weight:600;margin:0 0 var(--s2)}
.errpage .btn{margin-top:var(--s2)}
.errpage .mono{font-size:.8125rem}

/* Grosse Schrift (bis 200 %): nichts abschneiden, nichts seitlich scrollen; lange deutsche Wörter dürfen in Titeln getrennt werden */
h1,h2,h3,.task .title,.li-title,.evtoggle-t,.al-title{hyphens:auto;-webkit-hyphens:auto}
.task .body,.li-text,.ws-titles,.pagehead>div:first-child{overflow-wrap:break-word}
/* Tab-Leiste: Reicht der Platz bei sehr grosser Schrift nicht für die Beschriftung, nur Symbole zeigen
   (em in Media Queries folgt der Schriftgrösse aus den Geräte-Einstellungen; die Beschriftung bleibt für Screenreader) */
@media (max-width:18em){
  .tabbar a span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .tabbar svg.i{width:26px;height:26px}
}

/* ---------- Druck und Handbuch ---------- */
/* Einsatzliste drucken: kompakt, Blöcke nicht trennen, keine Knöpfe */
@media print{
  .leitblock{break-inside:avoid;page-break-inside:avoid;padding:6px 10px;margin:0 0 8px;border-radius:6px}
  .leit-ci .btn,.leit-ci form{display:none!important}
  .leit-tel{min-height:0;color:#000;font-weight:400}
  .leit-tel svg.i{display:none}
  .leit-people>li{padding:3px 0}
  .badge{border:1px solid #999;background:none!important;color:#000!important}
  h1{font-size:18pt}
}
/* Handbuch: Inhaltsverzeichnis am Handy eingeklappt, Artikel direkt unter der Suche */
.docs nav form{margin-bottom:var(--s2)}
.docs-toc-sum{list-style:none;display:flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s3);border-radius:var(--radius-control);background:var(--surface-card);border:1px solid var(--card-border);font-weight:600;cursor:pointer}
.docs-toc-sum::-webkit-details-marker{display:none}
.docs-toc-sum svg.i{width:18px;height:18px;color:var(--brand-primary)}
.docs-toc[open] .docs-toc-sum{margin-bottom:var(--s2)}
.docs nav h3{font-size:.8125rem;color:var(--text-secondary);margin:var(--s3) var(--s3) var(--s1)}
@media (min-width:900px){.js .docs-toc-sum{display:none}}

/* ---------- Hinweise in der Übersicht ---------- */
/* Hinweis «Mobilnummer eintragen» in der Übersicht */
.contacthint{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);border-color:color-mix(in srgb,var(--brand-primary) 35%,var(--card-border))}
.contacthint .empty-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--brand-tint);color:var(--brand-ink)}
.ch-text{flex:1 1 14rem;min-width:0}
.ch-text h2{margin:0;font-size:1rem}
.ch-text p{margin:2px 0 0;color:var(--text-secondary)}
.contacthint .btn{margin-left:auto}
/* Anmeldelink nach «Person hinzufügen» (ohne Kontakt): zum Kopieren statt im Fliesstext */
.flashlink{max-width:var(--read-max);margin:var(--s2) 0}
.flashlink .copyrow input{font-size:.8125rem}

/* ---------- Schwebende Bestätigen-Leiste (Einsätze) ---------- */
/* Über der Tab-Leiste (Handy) bzw. am unteren Rand (ab 600 px); Glas wie die Navigationsschicht */
.resbar{position:fixed;z-index:29;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));
  bottom:calc(var(--nav-h) + 10px + 8px + env(safe-area-inset-bottom,0px));max-width:480px;margin:0 auto;
  display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s2) var(--s2) var(--s4);border-radius:22px}
.resbar .rb-text{flex:1;min-width:0}
.resbar h2{margin:0;font-size:.9375rem;line-height:1.25}
.resbar p{display:flex;align-items:center;gap:4px;margin:1px 0 0;color:var(--text-secondary)}
.resbar p svg.i{width:14px;height:14px;color:var(--status-warning)}
.resbar b{color:var(--text-primary);font-variant-numeric:tabular-nums}
.resbar form{flex:none;margin:0}
.resbar .btn{min-height:44px;white-space:nowrap}
@media (min-width:600px){.resbar{bottom:calc(16px + env(safe-area-inset-bottom,0px));left:calc(var(--side-w) + 16px);right:16px;max-width:560px}}
/* Platz unten, damit das letzte Element nie unter der Leiste liegt */
body:has(.resbar) .app{padding-bottom:calc(var(--nav-h) + 96px + env(safe-area-inset-bottom,0px))}
@media (min-width:600px){body:has(.resbar) .app{padding-bottom:110px}}
/* Meldungen zu Hintergrund-Aktionen: unten, über Tab-Leiste und Bestätigen-Leiste */
.toast{position:fixed;z-index:31;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));max-width:480px;margin:0 auto;
  bottom:calc(var(--nav-h) + 18px + env(safe-area-inset-bottom,0px));pointer-events:none}
.toast .flash{pointer-events:auto;margin:0;box-shadow:var(--glass-shadow);cursor:pointer}
body:has(.resbar) .toast{bottom:calc(var(--nav-h) + 18px + 76px + env(safe-area-inset-bottom,0px))}
@media (min-width:600px){
  .toast{bottom:calc(16px + env(safe-area-inset-bottom,0px));left:calc(var(--side-w) + 16px);right:16px;max-width:560px}
  body:has(.resbar) .toast{bottom:calc(16px + 76px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:no-preference){.toast .flash{animation:rise var(--t-swap) var(--ease-standard)}}
/* «Noch Hilfe gesucht»: Anzahl freier Plätze neben dem Datum, damit der Anlassname die ganze Breite hat */
.free-sub{display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--s2)}

/* ---------- Einstellungsformulare (Verein, global, Vorlage) ---------- */
/* Zeile: geltender Wert im Feld, Einheit daneben; «angepasst» und «Standard: … wiederherstellen» bei eigenem Wert */
.set-badge{flex:none;font-size:.75rem}
.set .setswitch{margin:var(--s1) 0}
.set .setswitch .hint{margin:0}
.setfield{display:flex;align-items:center;gap:var(--s2)}
.setfield>input,.setfield>select{flex:1;min-width:0}
.setfield.is-short>input{flex:0 0 9.5rem;width:9.5rem}
.setfield>input.num{text-align:right;font-variant-numeric:tabular-nums}
.setunit{min-width:0;color:var(--text-secondary);font-size:.9375rem}
.segfield{border:0;margin:0;padding:0;min-width:0}
.segfield>legend{padding:0;margin:var(--s3) 0 var(--s1);font-weight:600;font-size:.875rem;color:var(--text-primary)}
.segctl{display:flex;flex-wrap:wrap;gap:2px;padding:2px;border-radius:var(--radius-control);background:var(--surface-sunken);max-width:var(--form-max)}
.segctl label{position:relative;flex:1 1 auto;margin:0;font-weight:500;font-size:.9375rem;cursor:pointer}
.segctl input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.segctl span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--s3);border-radius:calc(var(--radius-control) - 2px);color:var(--text-secondary);text-align:center}
.segctl input:checked+span{background:var(--surface-card);color:var(--text-primary);font-weight:600;box-shadow:var(--shadow-seg)}
.segctl input:focus-visible+span{outline:3px solid var(--brand-primary);outline-offset:1px}
@media (hover:hover){.segctl label:hover input:not(:checked)+span{color:var(--text-primary)}}
.setreset{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s2);margin:0 0 var(--s2);font-size:.8125rem;color:var(--text-secondary)}
.linkbtn{position:relative;display:inline-flex;align-items:center;min-height:32px;padding:0;border:0;background:none;color:var(--brand-ink);font:inherit;font-weight:600;cursor:pointer}
.linkbtn::after{content:"";position:absolute;inset:-6px -4px}
@media (hover:hover){.linkbtn:hover{text-decoration:underline}}
/* Speicherleiste: klebt unten über der Tab-Leiste; mit JavaScript erst sichtbar, wenn etwas geändert ist */
.savebar{position:sticky;z-index:20;bottom:calc(var(--nav-h) + 18px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:var(--s2);margin-top:var(--s4);padding:var(--s2) var(--s2) var(--s2) var(--s4);border-radius:22px;max-width:var(--form-max)}
.savebar-count{flex:1;min-width:0;font-weight:600;font-size:.9375rem}
.savebar .btn{min-height:44px}
.js form[data-settings]:not(.is-dirty) .savebar{display:none}
html:not(.js) .savebar-reset{display:none}
@media (min-width:600px){.savebar{bottom:calc(16px + env(safe-area-inset-bottom,0px))}}

/* Eigener Einsatz: Aktionen im Menü «⋯» oben rechts statt einer Knopfzeile */
.task-menu{flex:none;align-self:flex-start;margin:-6px -6px 0 0}
.rowmenu form{display:block;margin:0}
.task .chips:not(:has(*)){display:none}
.task .eventinfo{margin:2px 0 0}

/* Übersicht «Meine Einsätze»: Zeile mit Link (Datum, Titel, Zeit) und Menü «⋯» rechts, senkrecht zentriert.
   Die Liste darf nicht abschneiden, damit das Menü über den Rand hinaus aufgehen kann. */
.mylist{overflow:visible}
.mylist>.mrow{display:flex;flex-wrap:wrap;align-items:center;position:relative}
.mylist>.mrow+.mrow{border-top:1px solid var(--separator)}
.mylist>.mrow>a.mrow-main{flex:1 1 0;min-width:0;border-top:0}
.mylist>.mrow:first-child>a.mrow-main{border-top-left-radius:var(--radius-card)}
.mylist>.mrow:last-child>a.mrow-main{border-bottom-left-radius:var(--radius-card)}
.mylist>.mrow>.minemenu{align-self:center;margin-right:var(--s2)}
.mylist>.mrow>.qrbox{flex-basis:100%;padding:0 var(--s4) var(--s3)}
.mylist .mrow-main .badge{flex:none}
.rowmenu .popinfo{margin:0;padding:var(--s2) var(--s3);font-size:.875rem;color:var(--text-secondary)}
.rowmenu .popinfo strong{color:var(--text-primary)}

/* Runde 3: Geräteübersicht im Profil, Rundnachricht */
.devlist{list-style:none;margin:0 0 var(--s3);padding:0;display:grid;gap:var(--s2)}
.devlist li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s1) var(--s3);align-items:baseline}
/* Nachrichten: neue Nachricht verfassen (admin_messages.html). Empfänger als gruppierte Liste, gewählte Zeile getönt;
   Auswahl von Anlass/Schicht/Person erscheint in der gewählten Zeile. Zähler und Empfängerzahl aktualisiert app.js. */
.rcpt{border:0;padding:0;margin:var(--s3) 0 var(--s4);background:none;min-width:0}
.rcpt>legend{padding:0;margin:0;font-size:.875rem;font-weight:600;color:var(--text-primary)}
.rcpt-group{margin:var(--s3) 0 var(--s1);font-size:.8125rem;font-weight:600;color:var(--text-secondary)}
.rcpt-list{border:1px solid var(--separator);border-radius:var(--radius-control);overflow:hidden}
.rcpt-row{transition:background-color var(--t-hover) var(--ease-standard)}
.rcpt-row+.rcpt-row{border-top:1px solid var(--separator)}
.rcpt-row:has(input:checked){background:var(--brand-tint)}
.rcpt-opt{display:flex;align-items:center;gap:var(--s3);min-height:52px;margin:0;padding:var(--s2) var(--s4);font-size:1rem;font-weight:400;cursor:pointer}
@media (hover:hover){.rcpt-row:not(:has(input:checked)) .rcpt-opt:hover{background:var(--surface-sunken)}}
.rcpt-row:not(:has(input:checked)) .rcpt-opt:active{background:var(--surface-sunken)}
.rcpt-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rcpt-title{font-weight:600;line-height:1.3}
.rcpt-sub{font-size:.8125rem;line-height:1.35;color:var(--text-secondary)}
.rcpt-n{min-width:2.25rem;justify-content:center;font-variant-numeric:tabular-nums;transition:background-color var(--t-hover) var(--ease-standard),color var(--t-hover) var(--ease-standard)}
.rcpt-row:has(input:checked) .rcpt-n{background:var(--brand-primary);color:var(--brand-on-primary)}
.rcpt-pick{padding:0 var(--s4) var(--s3) calc(var(--s4) + 22px + var(--s3))}
.rcpt-pick select{width:100%;max-width:32rem}
@supports selector(:has(*)){.rcpt-row:not(:has(input:checked)) .rcpt-pick{display:none}}
@media (max-width:420px){.rcpt-pick{padding-left:var(--s4)}}
.compose-text label{margin-top:0}
.compose-text textarea{min-height:120px}
.compose-meta{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);margin-top:var(--s1)}
.compose-count{flex:none;font-variant-numeric:tabular-nums}
.compose-count.near{color:var(--status-warning);font-weight:600}
.compose-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--separator)}
.compose-sum{margin:0;color:var(--text-secondary)}
.compose-sum strong{color:var(--text-primary);font-variant-numeric:tabular-nums}
.compose-sum.warn,.compose-sum.warn strong{color:var(--status-warning)}
.compose-limits{margin:var(--s3) 0 0}
@media (max-width:599px){.compose-foot .btn{flex:1 1 100%}}
.card h2 .badge{margin-left:var(--s1)}

/* Runde 4: Eingabefelder nie unter 16 px auf Touch-Geräten (iOS vergrössert sonst beim Antippen die ganze Seite) */
@media (pointer:coarse){input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea,.vselect select,.filterbar select,.outbox-acts select,.shiftlist .leadrow select,.copyrow input,.flashlink .copyrow input{font-size:max(1rem,16px)}}
/* Datum nie unter 13 px (DESIGN.md): Monatskürzel in der Datumskachel */
.datetile small{font-size:.8125rem;letter-spacing:.01em}
/* Arbeitsbereich «Aufgaben»: Abschnitte auf- und zuklappen (grosse Anlässe laden den Inhalt nach) */
.wstoggle{font:inherit;text-align:left;align-items:center;padding:0;min-height:44px}
.wstoggle .evtoggle-m{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.shiftsec .tasksection .wstoggle>svg.i{color:var(--text-secondary);margin-top:0}
.wsbody{padding-bottom:0}
/* Einsatzliste: Zwischenüberschrift je Schicht innerhalb eines Tages */
.shift-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:.8125rem;font-weight:600;color:var(--text-secondary);margin:var(--s3) var(--s1) var(--s1)}
.shift-head svg.i{width:15px;height:15px;color:var(--brand-primary)}
.shift-head span{font-weight:400}
.shift-head a{display:inline-flex;align-items:center;gap:4px;margin-left:auto;min-height:32px;padding:0 var(--s1);font-weight:500}
/* Superuser › Person: Kanäle als Gruppe */
fieldset.checks{border:0;padding:0;margin:var(--s3) 0 0}
fieldset.checks>legend{padding:0;font-weight:600;font-size:.9375rem}

/* ---------- UI-Runde 2026-11-10: Verwaltung und Superuser ---------- */
/* Fundament */
/* Unternavigation der Seitenleiste: nur ab 1024 px und nur im aktiven Bereich */
.subnav{display:none}
@media (min-width:1024px){
  .subnav{display:flex;flex-direction:column;gap:2px;margin-left:calc(20px + var(--s3))}
  .sidenav .subnav a{min-height:44px;font-size:.875rem;font-weight:400;color:var(--text-secondary)}
  @media (pointer:fine){.subnav{gap:0}.sidenav .subnav a{min-height:32px;padding-top:var(--s1);padding-bottom:var(--s1)}}
  .sidenav .subnav a[aria-current=page]{background:none;color:var(--brand-ink);font-weight:600}
}/* Admin: Uebersicht und Auswertung */
.sollrows{max-width:var(--read-max)}
.sollrows a.sr-name{display:inline-flex;align-items:center;min-height:44px}
.outbox-err{color:var(--status-danger)}
#outbox-list:focus{outline:none}
.app>#outbox-list>.empty{background:var(--surface-card);border:1px solid var(--card-border);border-radius:var(--radius-card)}
.stats .stat .lbl{white-space:normal;overflow:visible;text-overflow:clip}
.stats a.stat{position:relative}
.stats a.stat::after{content:"";position:absolute;top:calc(var(--s3) + 5px);right:var(--s3);width:7px;height:7px;border-right:2px solid var(--text-secondary);border-top:2px solid var(--text-secondary);transform:rotate(45deg);opacity:.7}
.stats a.stat .lbl{padding-right:var(--s4)}
.statnums .li-end{color:var(--text-primary);font-weight:600}
/* Admin: Personen und Formulare */
.ph-soll,.ph-sets,.ph-sets+.danger-zone{max-width:var(--form-max)}
.savebar .multisum{margin:0}
/* Admin: Einstellungen und Nachrichten */
.set>.setrow.is-sub{margin-left:calc(var(--s4)*2);padding-left:var(--s3);border-left:1px solid var(--separator);border-top:0}
.set-changed{display:none}
.set.is-changed .set-changed{display:inline-flex}
.setfield>textarea{flex:1;min-width:0}
.compose-warn{display:flex;align-items:flex-start;gap:var(--s2);max-width:var(--form-max);margin:0 0 var(--s4);padding:var(--s3) var(--s4);box-shadow:none}
.compose-warn svg.i{flex:none;margin-top:2px;color:var(--status-warning)}
.tplcount{margin:var(--s1) 0 var(--s3)}
/* Super: Stammdaten */
/* Tabellen: Name als Link mit voller Trefferhöhe, solange die Tabelle als Karten läuft */
td:first-child a.rowlink{display:flex;align-items:center;min-height:44px}
@container main (min-width:760px){td:first-child a.rowlink{display:inline;min-height:0}}
/* Alle Anlässe: Titel als Überschrift in der Kartenzeile, vergangene eingeklappt */
.sev-head h3{margin:0;min-width:0;flex:1 1 12rem;font-size:1rem}
.sev-head h3 .muted{font-weight:400}
.pastevents{margin-top:var(--s5)}
/* Person: Zeile ohne Aufklappen (ausgetreten, leer), Trennlinie vor «Mitgliedschaft beenden» */
.setlist>div.set>.setrow:only-child{padding:var(--s3) 0;margin-bottom:0}
.setlist .set>hr{margin-top:var(--s3);margin-bottom:var(--s3)}
/* Super: Betrieb */
.readwrap{max-width:var(--read-max)}
th.right{text-align:right}
.setlist textarea[rows="2"]{min-height:44px}
.logacts{margin:0 0 var(--s3)}
.card h2.gw-h{margin:0}
.preout,#gw-status{white-space:pre-wrap;overflow-wrap:anywhere;margin:var(--s3) 0 0;padding:var(--s3);border-radius:var(--radius-control);background:var(--surface-sunken);max-height:40vh;overflow:auto}
/* Einstellungen durchsuchen (v3.10): Feld über der Liste; app.js blendet Zeilen und Gruppen ohne Treffer aus */
.setsearch{max-width:var(--form-max);margin:0 0 var(--s3)}
.setsearch input[type=search]{max-width:none}
.setsearch-state{margin:var(--s2) var(--s4) 0}
.setsearch-state:empty{display:none}
html:not(.js) .setsearch{display:none}
.is-nomatch{display:none!important}
.setnote{max-width:var(--form-max);margin:var(--s4) var(--s4) 0}
.bringset{max-width:var(--form-max);margin:0 0 var(--s5)}
.bringset .savebar{margin-top:var(--s2)}
/* Audit 2026-11-11 (v3.11) */
/* Windows-Kontrastmodus: Schalter und Auswahlknöpfe zeigen ihren Zustand mit Systemfarben statt nur über die Fläche */
@media (forced-colors:active){
  input[type=checkbox].switch{border:1px solid ButtonText;background:Canvas}
  input[type=checkbox].switch::before{background:ButtonText;box-shadow:none}
  input[type=checkbox].switch:checked{background:Highlight}
  input[type=checkbox].switch:checked::before{background:HighlightText}
  .segctl input:checked+span{outline:2px solid Highlight;outline-offset:-2px}
}
/* gesperrte Schalter sehen gesperrt aus */
input[type=checkbox].switch:disabled{opacity:.45;cursor:not-allowed}
.switchrow:has(.switch:disabled){cursor:default}
/* Zeit auf der Einsatzkarte: sichtbare Fassung ohne eigene Box (Screenreader lesen die Fassung «08:00 bis 12:00») */
.when-v{display:contents}
/* Fehler im Toast bleiben stehen und haben einen Schliessen-Knopf */
.toast .flash.error{cursor:default;align-items:center}
.toast-x{flex:none;position:relative;margin:-10px -10px -10px auto;width:44px;height:44px;border:0;border-radius:50%;background:none;color:inherit;font:inherit;font-size:1.375rem;line-height:1;cursor:pointer}
.toast-x:focus-visible{outline:2px solid currentColor;outline-offset:-6px}
/* Begründungen und vergangene Einsätze bleiben lesbar: nur Auswahlpunkt und Titel dämpfen, nicht den ganzen Block */
.choice.disabled{opacity:1}
.choice.disabled>input,.choice.disabled strong{opacity:.6}
.task.past{opacity:1}
.task.past .title,.task.past .when{color:var(--text-secondary)}
/* Soll-Anteile am schmalen Handy: Vereinsname über die ganze Breite, Feld und Stunden darunter */
@media (max-width:420px){
  .sollform{grid-template-columns:minmax(0,1fr) auto}
  .sollform>label{grid-column:1/-1;margin-bottom:calc(var(--s1) * -1)}
}
/* Marken in einzeiligen Zeilen dürfen umbrechen statt die Zeile zu sprengen */
.row.nowrap-row .badge{white-space:normal}
/* Telefon in der Schichtliste und «Schichtliste» in der Einsatzliste: Trefferfläche 44 px bei gleicher Optik */
.shiftpeople .li-text .leit-tel,.shift-head a{position:relative}
.shiftpeople .li-text .leit-tel::after,.shift-head a::after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px}
/* Audit 2026-11-11, Politur (v3.11.1) */
/* Kontakt in der Mitgliederliste bricht um statt abgeschnitten zu werden */
.mlist .li-sub{white-space:normal;overflow:visible;overflow-wrap:anywhere}
/* Vereinslogo: Platz schon vor dem Laden freihalten */
.brand .mark-logo{min-width:32px}
.emptyhint a{white-space:nowrap}