/* ============================================================
   PENSUM — Branding-Kit MODERN 1.1.0 (docs/branding-kit-modern.md)
   Stylesheet des Aufgaben-Boards (static/board.html). Tokens --m-* wie im Kit,
   Muster: Kopf, Tabs, KPI-Leiste, Toolbar, Board, Liste, Bottom-Sheet, Toast.
   Interaktionen angelehnt an das „Rapport“-Pipeline-Board (nur Idee, kein Code übernommen).
   ============================================================ */

:root{
  --m-bg:#efede8; --m-mesh-a:#ffcc0030; --m-mesh-b:#d9d6cf;
  --m-glass:#ffffffb8; --m-glass-2:#ffffffe6; --m-solid:#f6f4ef; --m-well:#1a1a1a0d; --m-rim:#ffffffd9;
  --m-line:#1a1a1a14; --m-line-2:#1a1a1a29;
  --m-ink:#1a1a1a; --m-on-ink:#ffffff; --m-muted:#66665f; --m-faint:#8e8e86; --m-hover:#ffffff; --m-hair:transparent;
  --m-yellow:#ffcc00; --m-good:#2f7a52; --m-bad:#c8431f; --m-info:#2e7dd1; --m-pine:#2f5c50;
  --m-r-card:26px; --m-r-tile:18px; --m-r-sm:12px; --m-r-pill:999px;
  --m-shadow:0 1px 0 #ffffffb3 inset, 0 24px 48px -30px #46321e47;
  --m-shadow-lift:0 1px 0 #ffffffb3 inset, 0 28px 50px -24px #46321e59;
  --m-shadow-pop:0 24px 60px -18px #281e1452, 0 2px 6px #281e1414;
  --m-overlay:#14121042;
  --m-ease:cubic-bezier(.2,.8,.2,1);
  --m-font:"Urbanist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --m-ring:0 0 0 3px #ffcc0099;
  --m-gutter:clamp(16px,1.6vw,28px);
  /* Stufen-Stimmungen (Kit §2 „Coloured cards“): Farbe = Stufe */
  --st-neu:#ffcc00;      --on-neu:#1a1a1a;
  --st-todo:#2f5c50;     --on-todo:#ffffff;
  --st-in_prozess:#1a1a1a; --on-in_prozess:#ffffff;
  --st-fertig:#2e7dd1;   --on-fertig:#ffffff;
  --st-abgelehnt:#c8431f; --on-abgelehnt:#ffffff;
  --st-akzeptiert:#2f7a52; --on-akzeptiert:#ffffff;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --m-bg:#111412; --m-mesh-a:#ffcc0018; --m-mesh-b:#2a2d2a;
  --m-glass:#ffffff0d; --m-glass-2:#ffffff16; --m-solid:#1c201e; --m-well:#ffffff0f; --m-rim:#ffffff14;
  --m-line:#ffffff14; --m-line-2:#ffffff29;
  --m-ink:#f1eee8; --m-on-ink:#1a1a1a; --m-muted:#a3a6a0; --m-faint:#8e918c; --m-hover:#ffffff22; --m-hair:#ffffff29;
  --m-good:#6cc59a; --m-bad:#f08a68; --m-info:#6fa8e8; --m-pine:#6cc59a;
  --m-shadow:0 1px 0 #ffffff0d inset, 0 24px 48px -30px #000000b3;
  --m-shadow-lift:0 1px 0 #ffffff14 inset, 0 28px 50px -24px #000000d9;
  --m-shadow-pop:0 24px 60px -18px #000000b3, 0 0 0 1px #ffffff14;
  --m-overlay:#0009;
  --st-todo:#3d7465; --st-in_prozess:#2a2f2c; --st-fertig:#3b78bf; --st-abgelehnt:#c8431f; --st-akzeptiert:#2f7a52;
  color-scheme:dark;
}

*{ box-sizing:border-box; }
html{ overflow-x:clip; }
/* beta.js setzt body auf Palanquin und das BETA-Band oben mittig (deckt hier die Tabs):
   Schrift bleibt Urbanist, Band wandert nach unten mittig zwischen Zurück- und SIGNUM-Knopf. */
html body{ font-family:var(--m-font); }
body{ margin:0; font-weight:500; font-size:14px; line-height:1.45; color:var(--m-ink);
      background:var(--m-bg); -webkit-tap-highlight-color:transparent; height:100dvh; overflow:hidden; display:flex; flex-direction:column;
      transition:background-color .15s; }
body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(42vw 34vw at 88% -6%, var(--m-mesh-a), transparent 70%),
             radial-gradient(46vw 40vw at -8% 104%, var(--m-mesh-b), transparent 70%); }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
:focus-visible{ outline:none; box-shadow:var(--m-ring) !important; }
[hidden]{ display:none !important; }
.muted{ color:var(--m-muted); } .faint{ color:var(--m-faint); }
.kicker{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--m-muted); margin:0 0 8px; }
.num{ font-variant-numeric:tabular-nums; }

/* ---------- Kopf ---------- */
.sy-topbar{ flex:none; width:100%; }   /* Kopf: gemeinsame Regeln in seynstahl-modern.css */
.brand{ display:flex; align-items:center; gap:12px; min-width:0; text-decoration:none; color:inherit; }
.sy-topbar .sy-logo{ width:40px; height:40px; box-sizing:border-box; padding:7px; background:#000; border:1px solid var(--m-hair); border-radius:var(--m-r-sm) !important; flex:none; object-fit:contain; }
.tabs{ display:flex; gap:4px; margin:0 auto; padding:4px; border-radius:var(--m-r-pill); background:var(--m-glass);
       border:1px solid var(--m-rim); box-shadow:var(--m-shadow); }
.tabs button{ border:0; background:transparent; border-radius:var(--m-r-pill); padding:10px 17px; font-size:13.5px; font-weight:600;
              white-space:nowrap; transition:background .15s, color .15s; }
.tabs button:hover{ background:var(--m-well); }
.tabs button[aria-current="page"]{ background:var(--m-ink); color:var(--m-on-ink); }
.ibtn{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--m-glass);
       border:1px solid var(--m-line-2); text-decoration:none; color:inherit; transition:background .15s, color .15s, transform .1s; }
.ibtn:hover{ background:var(--m-ink); color:var(--m-on-ink); }
.ibtn:active{ transform:scale(.95); }
.ibtn svg{ width:18px; height:18px; }

/* ---------- Seite ---------- */
/* Feste Ansicht: Kopf oben, der Rest füllt das Fenster; gescrollt wird nur in Spalten, Listen und Fenstern. */
main{ flex:1; min-height:0; width:100%; max-width:1440px; margin:0 auto; display:flex; flex-direction:column;
      padding:8px var(--m-gutter) calc(60px + env(safe-area-inset-bottom)); }  /* unten Platz für die schwebenden Knöpfe */
main > section{ flex:1; min-height:0; display:flex; flex-direction:column; }
main > section[hidden]{ display:none; }
#liste, #uTab, #katGrid{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
#katGrid{ align-content:start; padding:2px; }
.head, .toolbar, .vorschau{ flex:none; }
.head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin:14px 0 18px; }
.head h1{ font-size:clamp(28px,2.6vw,38px); font-weight:600; letter-spacing:-.025em; line-height:1.04; margin:0; }
.head p{ margin:6px 0 0; color:var(--m-muted); }
.kpis{ display:flex; gap:22px; flex-wrap:wrap; }
.kpi{ display:flex; align-items:center; gap:10px; }
.kpi i{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--m-glass); border:1px solid var(--m-rim);
        box-shadow:var(--m-shadow); font-style:normal; }
.kpi i::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--k,var(--m-ink)); }
.kpi b{ display:block; font-size:21px; font-weight:600; letter-spacing:-.01em; line-height:1.05; font-variant-numeric:tabular-nums; }
.kpi small{ color:var(--m-muted); font-size:12px; }
.vorschau{ background:#ffcc0026; border:1px solid #ffcc0080; border-radius:var(--m-r-tile); padding:10px 14px; margin-bottom:12px; font-weight:600; }

/* ---------- Toolbar ---------- */
.toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.search{ position:relative; width:260px; }
.search svg{ position:absolute; left:15px; top:50%; translate:0 -50%; width:17px; height:17px; color:var(--m-faint); pointer-events:none; }
.search input{ width:100%; height:42px; padding:0 14px 0 40px; border-radius:var(--m-r-pill); background:var(--m-glass-2);
               border:1px solid var(--m-line-2); font-size:14px; }
.search input:focus{ border-color:var(--m-ink); }
.chips{ display:flex; gap:6px; min-width:0; overflow-x:auto; scrollbar-width:none; }
.chips::-webkit-scrollbar{ display:none; }
.chip{ height:36px; padding:0 12px 0 4px; display:inline-flex; align-items:center; gap:7px; flex:none; border-radius:var(--m-r-pill);
       background:var(--m-glass); border:1px solid var(--m-line-2); font-size:12.5px; font-weight:600; white-space:nowrap;
       transition:background .15s, color .15s; }
.chip.nur-text{ padding:0 14px; }
.chip:hover{ background:var(--m-glass-2); }
.chip[aria-pressed="true"]{ background:var(--m-ink); color:var(--m-on-ink); border-color:var(--m-ink); }
.chip[aria-pressed="true"] .av{ box-shadow:0 0 0 2px var(--m-on-ink); }
.chip:disabled{ opacity:.45; cursor:not-allowed; }
.spacer{ flex:1; }
.seg{ display:inline-flex; padding:4px; background:var(--m-well); border-radius:var(--m-r-pill); }
.seg button{ border:0; background:transparent; height:34px; padding:0 16px; border-radius:var(--m-r-pill); font-size:13px; font-weight:600; color:var(--m-muted); }
.seg button[aria-pressed="true"]{ background:var(--m-glass-2); color:var(--m-ink); box-shadow:0 1px 3px #0000001f; }
.btn{ height:42px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:var(--m-r-pill);
      border:1px solid transparent; background:var(--m-ink); color:var(--m-on-ink); font-size:13.5px; font-weight:600; white-space:nowrap;
      transition:filter .15s, transform .1s var(--m-ease), background .15s; text-decoration:none; }
.btn:hover{ filter:brightness(1.25); }
.btn:active{ transform:scale(.97); }
.btn:disabled{ opacity:.45; pointer-events:none; }
.btn svg{ width:16px; height:16px; }
.btn--sec{ background:var(--m-glass-2); color:var(--m-ink); border-color:var(--m-line-2); }
.btn--sec:hover{ filter:none; background:var(--m-hover); }
.btn--brand{ background:var(--m-yellow); color:#1a1a1a; }
.btn--good{ background:var(--m-good); color:#fff; } .btn--bad{ background:var(--m-bad); color:#fff; }
:root[data-theme="dark"] .btn--good, :root[data-theme="dark"] .btn--bad{ color:#1a1a1a; }
.btn--sm{ height:34px; padding:0 14px; font-size:12.5px; }
.btn--ghost{ background:transparent; color:var(--m-muted); border:0; }
.btn--ghost:hover{ color:var(--m-ink); background:var(--m-well); filter:none; }

/* ---------- Avatare ---------- */
.av{ width:26px; height:26px; border-radius:50%; display:inline-grid; place-items:center; flex:none; font-size:10.5px; font-weight:700;
     background:hsl(var(--h,40) 45% 82%); color:#1a1a1a; letter-spacing:0; }
.av-stack{ display:flex; }
.av-stack .av{ box-shadow:0 0 0 2px var(--ring,var(--m-solid)); }
.av-stack .av + .av{ margin-left:-7px; }
.av.pruefer{ background:#1a1a1a; color:#ffcc00; }
:root[data-theme="dark"] .av.pruefer{ background:#000; box-shadow:0 0 0 2px var(--ring,var(--m-solid)), 0 0 0 3px var(--m-hair); }

/* ---------- Board ---------- */
.board{ flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 132px; gap:14px; }
.cols{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; min-height:0; }
.col{ --t:var(--st-neu); position:relative; display:flex; flex-direction:column; min-width:0; min-height:0; padding:12px 10px 0;
      border-radius:var(--m-r-card); background:var(--m-glass); border:1px solid var(--m-rim); box-shadow:var(--m-shadow);
      backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2); container-type:inline-size; }
.col[data-stufe="todo"]{ --t:var(--st-todo); } .col[data-stufe="in_prozess"]{ --t:var(--st-in_prozess); } .col[data-stufe="fertig"]{ --t:var(--st-fertig); }
.col::before, .end::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; opacity:0;
  background:#ffcc0014; box-shadow:inset 0 0 0 2px #ffcc00b3; transition:opacity .2s var(--m-ease); }
.col.is-over::before, .end.is-over::before, .end.is-hit::before{ opacity:1; }
.col.is-nein::before, .end.is-nein::before{ opacity:1; background:color-mix(in srgb, var(--m-bad) 8%, transparent);
  box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--m-bad) 55%, transparent); }
.col-head{ display:flex; align-items:center; gap:8px; min-height:40px; padding:0 4px 10px 6px; }
.col-dot{ width:12px; height:12px; border-radius:50%; flex:none; background:var(--t);
          box-shadow:0 0 0 3px color-mix(in srgb, var(--t) 22%, transparent); }
:root[data-theme="dark"] .col[data-stufe="in_prozess"] .col-dot{ background:#f1eee8; }
.col-name{ font-size:14.5px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.count{ min-width:24px; height:22px; padding:0 7px; display:inline-grid; place-items:center; border-radius:var(--m-r-pill);
        background:var(--m-well); font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.col-add{ margin-left:auto; width:30px; height:30px; }
.col-body{ position:relative; flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; overflow-y:auto;
  margin:0 -2px; padding:6px 2px 14px; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--m-line-2) transparent;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 26px), #0000); mask-image:linear-gradient(#000 calc(100% - 26px), #0000); }
.col-leer{ border:1.5px dashed var(--m-line-2); border-radius:var(--m-r-tile); min-height:120px; display:grid; place-content:center;
           justify-items:center; gap:4px; color:var(--m-muted); font-size:12.5px; font-weight:600; text-align:center; padding:12px; }

/* Karte */
.card{ position:relative; flex:none; border-radius:var(--m-r-tile); cursor:grab; outline:none; touch-action:pan-x pan-y;
       -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.card:focus-visible{ box-shadow:none !important; outline:2px solid var(--m-ink); outline-offset:3px; }
.card.is-placeholder{ background:var(--m-well); box-shadow:inset 0 0 0 1.5px var(--m-line-2); }
.card.is-placeholder > .face{ visibility:hidden; }
.card.is-pressing > .face{ opacity:.82; }
.face{ --t:var(--st-neu); --on:var(--on-neu); position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:4px; min-height:148px; padding:12px 12px 13px 16px;
       border-radius:var(--m-r-tile); background:var(--t); color:var(--on); --ring:var(--t);
       box-shadow:inset 0 1px #ffffff2e, 0 14px 24px -20px #1e140a80; transition:transform .2s var(--m-ease), box-shadow .2s var(--m-ease), opacity .2s; }
.face[data-stufe="todo"]{ --t:var(--st-todo); --on:var(--on-todo); }
.face[data-stufe="in_prozess"]{ --t:var(--st-in_prozess); --on:var(--on-in_prozess); }
.face[data-stufe="fertig"]{ --t:var(--st-fertig); --on:var(--on-fertig); }
.face[data-stufe="abgelehnt"]{ --t:var(--st-abgelehnt); --on:var(--on-abgelehnt); }
.face[data-stufe="akzeptiert"]{ --t:var(--st-akzeptiert); --on:var(--on-akzeptiert); }
:root[data-theme="dark"] .face[data-stufe="in_prozess"]{ box-shadow:inset 0 0 0 1px #ffffff1f; }
@media (hover:hover){ .card:not(.is-placeholder):hover > .face{ transform:translateY(-2px); box-shadow:inset 0 1px #ffffff2e, 0 22px 30px -20px #1e140a99; } }
.face-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:2px; }
.face-meta{ font-size:12px; font-weight:600; opacity:.78; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.face-meta.is-over{ opacity:1; padding:2px 8px; margin-left:-6px; border-radius:var(--m-r-pill); background:color-mix(in srgb, var(--on) 18%, transparent); }
.face-more{ width:32px; height:32px; border-radius:50%; flex:none; display:grid; place-items:center; color:inherit; background:transparent;
            border:1px solid color-mix(in srgb, var(--on) 30%, transparent); }
.face-more:hover{ background:color-mix(in srgb, var(--on) 14%, transparent); }
.face-more svg{ width:16px; height:16px; }
.face-title{ font-size:16.5px; font-weight:700; letter-spacing:-.015em; line-height:1.18; overflow-wrap:anywhere;
             display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.face-sub{ font-size:12.5px; opacity:.74; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.face-pill{ justify-self:start; font-size:11px; font-weight:700; padding:3px 9px; border-radius:var(--m-r-pill);
            background:color-mix(in srgb, var(--on) 16%, transparent); }
.bar{ height:6px; border-radius:var(--m-r-pill); background:color-mix(in srgb, var(--on) 20%, transparent); overflow:hidden; margin-top:6px; }
.bar i{ display:block; height:100%; border-radius:inherit; background:var(--on); transform-origin:0 50%; }
.face-foot{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:6px 8px; min-width:0; margin-top:8px; align-self:end; }   /* schmale Spalte: Zahlen rutschen unter die Köpfe, nichts ragt aus der Karte */
.face-stats{ display:flex; align-items:center; gap:10px; margin-left:auto; font-size:12px; font-weight:600; }
.face-stats span{ display:inline-flex; align-items:center; gap:4px; }
.face-stats svg{ width:14px; height:14px; opacity:.8; }
.lamp{ width:10px; height:10px; border-radius:50%; flex:none; box-shadow:0 0 0 2px color-mix(in srgb, var(--on) 55%, transparent); }
.lamp[data-a="gruen"]{ background:#3fbf7f; } .lamp[data-a="gelb"]{ background:#ffcc00; } .lamp[data-a="rot"]{ background:#ff5a36; } .lamp[data-a="grau"]{ background:#9a9a92; }
/* Alarm (Kit §5): Frist überschritten / abgelehnt → roter Ring + Glühen */
.card.alarm > .face, :root[data-theme="dark"] .card.alarm > .face[data-stufe]{ box-shadow:0 0 0 2px var(--m-bad), 0 0 18px 2px color-mix(in srgb, var(--m-bad) 45%, transparent); animation:glow 1.8s ease-in-out infinite; }
@keyframes glow{ 50%{ box-shadow:0 0 0 2px var(--m-bad), 0 0 4px 0 color-mix(in srgb, var(--m-bad) 20%, transparent); } }

/* Fliegende Karte beim Ziehen */
.fly{ position:fixed; top:0; left:0; z-index:85; pointer-events:none; will-change:transform; }
.fly > .face{ position:absolute; inset:0; }
.fly::before{ content:""; position:absolute; inset:10px 8px -6px; border-radius:var(--m-r-tile); opacity:0; transition:opacity .25s var(--m-ease);
              box-shadow:0 34px 50px -18px #1e140a80, 0 10px 20px -10px #1e140a4d; }
:root[data-theme="dark"] .fly::before{ box-shadow:0 34px 60px -14px #000c; }
.fly.is-lifted::before{ opacity:1; }
:root.dragging, :root.dragging *{ cursor:grabbing !important; -webkit-user-select:none !important; user-select:none !important; }

/* Ergebnis-Felder (Akzeptiert / Abgelehnt) */
.ends{ display:grid; grid-template-rows:1fr 1fr; gap:14px; min-height:0; z-index:3; }
.end{ --t:var(--m-good); position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
      padding:14px 8px; text-align:center; border-radius:var(--m-r-card); border:1.5px dashed var(--m-line-2); background:var(--m-glass);
      transition:border-color .2s; }
.end[data-ende="abgelehnt"]{ --t:var(--m-bad); }
.end-ico{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--t); color:#fff; flex:none; }
:root[data-theme="dark"] .end-ico{ color:#1a1a1a; }
.end-ico svg{ width:22px; height:22px; }
.end-txt{ display:grid; gap:2px; }
.end-txt b{ font-size:15px; font-weight:700; }
.end-txt small{ color:var(--m-muted); font-size:11.5px; line-height:1.35; }
.end-hint{ font-size:11.5px; font-weight:700; color:var(--m-muted); opacity:0; transition:opacity .2s; }
:root.dragging .end{ border-color:color-mix(in srgb, var(--t) 60%, transparent); }
:root.dragging .end-hint{ opacity:1; }
.end{ cursor:pointer; } .end:hover{ border-color:var(--m-line-2); background:var(--m-glass-2); }

/* ---------- Liste / Tabellen ---------- */
.panel{ background:var(--m-glass); border:1px solid var(--m-rim); border-radius:var(--m-r-card); box-shadow:var(--m-shadow);
        padding:8px 10px; backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2); }
table.tab{ width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; }
.tab th{ text-align:left; font-size:12px; font-weight:600; color:var(--m-muted); padding:10px 12px; border-bottom:1px solid var(--m-line); white-space:nowrap; }
.tab td{ padding:10px 12px; vertical-align:middle; }
.tab tbody tr{ cursor:pointer; transition:background .15s; }
.tab tbody tr:hover td{ background:var(--m-well); }
.tab tbody tr:hover td:first-child{ border-radius:12px 0 0 12px; } .tab tbody tr:hover td:last-child{ border-radius:0 12px 12px 0; }
.tab .r{ text-align:right; }
.spill{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 8px; border-radius:var(--m-r-pill); background:var(--m-well);
        font-size:12px; font-weight:600; white-space:nowrap; }
.spill i{ width:8px; height:8px; border-radius:50%; background:var(--t,var(--m-ink)); }
.ampelbar{ display:flex; gap:3px; height:10px; min-width:90px; }
.ampelbar i{ border-radius:var(--m-r-pill); min-width:4px; }
.minibar{ height:6px; border-radius:var(--m-r-pill); background:var(--m-well); overflow:hidden; min-width:80px; }
.minibar i{ display:block; height:100%; background:var(--m-ink); border-radius:inherit; }
.leer{ text-align:center; padding:40px 16px; color:var(--m-muted); }
.leer i{ width:46px; height:46px; border-radius:50%; background:var(--m-well); display:grid; place-items:center; margin:0 auto 10px; font-style:normal; font-size:20px; }

/* Katalog-Kacheln */
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap:16px; }
.tile{ text-align:left; display:grid; gap:6px; padding:18px; border-radius:var(--m-r-card); background:var(--m-glass); border:1px solid var(--m-rim);
       box-shadow:var(--m-shadow); transition:transform .2s var(--m-ease), box-shadow .2s var(--m-ease); }
@media (hover:hover){ .tile:hover{ transform:translateY(-2px); box-shadow:var(--m-shadow-lift); } }
.tile:active{ transform:scale(.985); }
.tile b{ font-size:16px; font-weight:600; letter-spacing:-.005em; }
.tile .kenn{ font-size:12px; font-weight:700; color:var(--m-muted); letter-spacing:.02em; }
.tile.inaktiv{ opacity:.55; }

/* ---------- Sheet (Modal / Bottom-Sheet) ---------- */
body.modal-open{ overflow:hidden; }
/* SIGNUM-Knopf bleibt immer bedienbar und ist verschiebbar (Skript in board.html); Zurück-Pille und BETA
   weichen nur dem offenen Sheet. */
body.modal-open #sentynel-back, body.modal-open #sy-beta{ display:none !important; }
.ov{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:24px; background:var(--m-overlay);
     backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; transition:opacity .3s var(--m-ease); }
.ov.on{ opacity:1; }
.sheet{ position:relative; width:min(760px,100%); max-height:min(88dvh, 980px); display:flex; flex-direction:column; background:var(--m-solid);
        border:1px solid var(--m-rim); border-radius:var(--m-r-card); box-shadow:var(--m-shadow-pop); overflow:hidden;
        transform:translateY(16px); transition:transform .32s var(--m-ease); }
.ov.on .sheet{ transform:none; }
.sheet-grip{ display:none; }
.sheet-head{ display:flex; align-items:center; gap:10px; padding:16px 18px 6px 22px; }
.sheet-head h2{ margin:0; font-size:21px; font-weight:700; letter-spacing:-.02em; flex:1; min-width:0; }
.sheet-body{ padding:8px 22px 22px; overflow-y:auto; overscroll-behavior:contain; display:grid; gap:18px; }
.sheet-foot{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; padding:12px 22px calc(12px + env(safe-area-inset-bottom));
             border-top:1px solid var(--m-line); background:var(--m-solid); }
.sheet-foot .links{ margin-right:auto; }

/* Karten-Kopf im Sheet */
.dk{ --t:var(--st-neu); --on:var(--on-neu); --ring:var(--t); background:var(--t); color:var(--on); border-radius:24px; padding:18px 20px; display:grid; gap:4px; }
.dk[data-stufe="todo"]{ --t:var(--st-todo); --on:var(--on-todo); } .dk[data-stufe="in_prozess"]{ --t:var(--st-in_prozess); --on:var(--on-in_prozess); }
.dk[data-stufe="fertig"]{ --t:var(--st-fertig); --on:var(--on-fertig); } .dk[data-stufe="abgelehnt"]{ --t:var(--st-abgelehnt); --on:var(--on-abgelehnt); }
.dk[data-stufe="akzeptiert"]{ --t:var(--st-akzeptiert); --on:var(--on-akzeptiert); }
:root[data-theme="dark"] .dk[data-stufe="in_prozess"]{ box-shadow:inset 0 0 0 1px #ffffff1f; }
.dk-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12.5px; font-weight:600; opacity:.85; }
.dk h3{ margin:4px 0 0; font-size:24px; line-height:1.12; letter-spacing:-.02em; font-weight:700; overflow-wrap:anywhere; }
.dk-foot{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-top:12px; }
.dk-pct{ font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.dk-pct small{ font-size:12px; font-weight:600; opacity:.8; margin-left:4px; }
.steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:0; padding:0; list-style:none; }
.step{ display:grid; gap:7px; width:100%; padding:6px 2px 4px; border:0; background:transparent; text-align:left; border-radius:10px; }
.step:disabled{ cursor:default; }
.step-bar{ height:8px; border-radius:var(--m-r-pill); background:var(--m-well); overflow:hidden; }
.step-bar i{ display:block; height:100%; background:var(--t,var(--m-ink)); border-radius:inherit; transform-origin:0 50%; transition:transform .5s var(--m-ease); }
.step-lab{ font-size:11.5px; font-weight:600; color:var(--m-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.step[aria-current] .step-lab{ color:var(--m-ink); font-weight:700; }
.step:not(:disabled):hover .step-lab{ color:var(--m-ink); }
.banner{ border-radius:var(--m-r-tile); padding:12px 14px; font-weight:600; display:grid; gap:2px; }
.banner--bad{ background:var(--m-bad); color:#fff; }
:root[data-theme="dark"] .banner--bad{ color:#1a1a1a; }
.banner--hint{ background:#ffcc0026; border:1px solid #ffcc0066; }
.banner small{ font-weight:500; opacity:.9; }
.sec{ display:grid; gap:10px; }
.fields{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fields .full{ grid-column:1 / -1; }
label.f{ display:grid; gap:6px; font-size:12.5px; font-weight:600; color:var(--m-muted); }
.inp, select.inp, textarea.inp{ width:100%; min-height:44px; padding:10px 14px; border-radius:14px; background:var(--m-glass-2);
  border:1px solid var(--m-line-2); color:var(--m-ink); font-size:14px; font-weight:500; }
textarea.inp{ min-height:84px; resize:vertical; line-height:1.4; }
.inp:focus{ border-color:var(--m-ink); }
.inp[readonly]{ background:transparent; border-style:dashed; }
:root[data-theme="dark"] select.inp option{ background:#1c201e; }
.saved{ font-size:12px; font-weight:600; color:var(--m-good); opacity:0; transition:opacity .2s; }
.saved.on{ opacity:1; }
.checks{ display:grid; gap:6px; }
.check{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; background:var(--m-glass-2); border:1px solid var(--m-line); }
.check input{ width:20px; height:20px; accent-color:var(--m-ink); flex:none; }
.check span{ flex:1; min-width:0; overflow-wrap:anywhere; }
.check.done span{ text-decoration:line-through; color:var(--m-muted); }
.pills{ display:flex; flex-wrap:wrap; gap:6px; }
.pickbox{ max-height:170px; overflow-y:auto; padding:2px; display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start; }
.feed{ display:grid; gap:10px; }
.feed-row{ display:flex; gap:10px; }
.feed-row div{ min-width:0; overflow-wrap:anywhere; }
.feed-row small{ display:block; color:var(--m-faint); font-size:12px; }
details.log summary{ cursor:pointer; font-weight:600; padding:6px 0; }
.log table{ width:100%; font-size:12.5px; border-collapse:collapse; }
.log td{ padding:6px 8px; border-top:1px solid var(--m-line); vertical-align:top; overflow-wrap:anywhere; }
.log del{ color:var(--m-bad); } .log ins{ color:var(--m-good); text-decoration:none; font-weight:600; }

/* Handy: bei offenem Fenster sitzt der (noch nicht verschobene) SIGNUM-Knopf über dem Fuß statt auf den Knöpfen */
@media (max-width:760px){ body.modal-open #signum-btn{ bottom:calc(84px + env(safe-area-inset-bottom)) !important; } }

/* Platzhalter: hell, aber lesbar (Beispiele) */
::placeholder{ color:var(--m-faint); opacity:.7; font-weight:500; }
:root[data-theme="dark"] ::placeholder{ opacity:.8; }

/* Auswahlfeld mit scrollbarer Liste (Bearbeiter / Mitwirkende / Prüfer) */
/* Gleichmäßiger Abstand: Beschriftung → Feld 6 px, Feld → nächste Beschriftung 12 px (wie .fields); gleiche Beschriftung wie label.f */
#nPicker, #pPick{ display:grid; gap:12px; }
.dd{ gap:6px; }
.dd > .kicker{ margin:0; font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--m-muted); }
.dd-btn{ min-height:44px; }
.dd-btn{ display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; cursor:pointer; }
.dd-btn:hover{ background:var(--m-hover); }
.dd-txt{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dd-txt .ph{ color:var(--m-faint); opacity:.8; }
.dd-btn svg{ flex:none; transition:transform .2s var(--m-ease); }
.dd-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
.dd-panel{ border:1px solid var(--m-line-2); border-radius:14px; background:var(--m-glass-2); padding:8px; display:grid; gap:6px; }
.dd-suche{ min-height:38px; border-radius:var(--m-r-pill); }
.dd-list{ max-height:220px; overflow-y:auto; overscroll-behavior:contain; display:grid; gap:2px; scrollbar-width:thin; scrollbar-color:var(--m-line-2) transparent; }
.dd-row{ display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:6px 10px; border:0; border-radius:10px; background:transparent; text-align:left; font-weight:600; }
.dd-row:hover:not(:disabled){ background:var(--m-well); }
.dd-row[aria-selected="true"]{ background:var(--m-well); }
.dd-row:disabled{ opacity:.4; cursor:not-allowed; }
.dd-box{ width:20px; height:20px; border-radius:6px; flex:none; display:grid; place-items:center; border:1.5px solid var(--m-line-2); font-size:13px; font-weight:700; }
.dd-row[aria-selected="true"] .dd-box{ background:var(--m-ink); border-color:var(--m-ink); color:var(--m-on-ink); }
.dd-leer{ padding:10px; color:var(--m-muted); }

/* Checkliste im Formular: eine Zeile + „Punkt“-Knopf */
.crows{ display:grid; gap:8px; }
.crow{ display:flex; gap:6px; align-items:center; }
.crow .inp{ flex:1; min-width:0; }
.mess[hidden]{ display:none !important; }

/* ---------- Toast, Login, Fuß ---------- */
.toast{ position:fixed; left:50%; bottom:calc(76px + env(safe-area-inset-bottom)); z-index:100; translate:-50% 12px; opacity:0;
        background:var(--m-ink); color:var(--m-on-ink); padding:12px 20px; border-radius:var(--m-r-pill); font-weight:600; font-size:13.5px;
        box-shadow:var(--m-shadow-pop); transition:opacity .25s var(--m-ease), translate .25s var(--m-ease); pointer-events:none; max-width:calc(100vw - 32px); }
.toast.on{ opacity:1; translate:-50% 0; }
.login{ flex:1; min-height:0; overflow-y:auto; display:grid; place-items:center; padding:20px; }
.login form{ width:min(380px,100%); display:grid; gap:12px; padding:34px 30px; background:var(--m-glass); border:1px solid var(--m-rim);
             border-radius:var(--m-r-card); box-shadow:var(--m-shadow); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.login img{ width:46px; height:46px; padding:6px; background:#000; border-radius:var(--m-r-sm); }
.login h1{ margin:4px 0; font-size:24px; letter-spacing:-.02em; }
.err{ color:var(--m-bad); font-size:13px; min-height:18px; }

/* ---------- Tablet (≤ 1180 px): Spalten wischen, Ergebnisfelder darunter ---------- */
@media (max-width:1180px){
  .board{ grid-template-columns:none; grid-template-rows:minmax(0,1fr) auto; }
  .cols{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(268px, calc(33.333% - 9.4px)); overflow-x:auto;
         scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; min-height:0; padding:0 2px 4px; }
  .cols::-webkit-scrollbar{ display:none; }
  .col{ scroll-snap-align:start; background:var(--m-glass-2); }
  :root.dragging .cols{ scroll-snap-type:none; }
  .ends{ grid-template-rows:none; grid-template-columns:1fr 1fr; }
  :root.dragging .ends{ position:sticky; bottom:12px; }
  .end{ flex-direction:row; justify-content:flex-start; text-align:left; min-height:74px; padding:12px 16px; background:var(--m-glass-2); }
  .end-ico{ width:42px; height:42px; }
  .end-hint{ margin-left:auto; }
  .tabs{ margin:0; }
}

/* ---------- Handy (≤ 760 px) ---------- */
@media (max-width:760px){
  :root{ --m-gutter:max(14px, env(safe-area-inset-left)); }
  .tabs{ order:3; flex:100%; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; background:transparent; border:0; box-shadow:none; padding:0;
         -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),#0000); mask-image:linear-gradient(90deg,#000 calc(100% - 24px),#0000); }
  .tabs::-webkit-scrollbar{ display:none; }
  .tabs button{ scroll-snap-align:start; background:var(--m-glass); }
  .head{ display:grid; gap:8px; margin:4px 0 10px; }
  .head h1{ font-size:24px; }
  .head p{ display:none; }
  .kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
  .kpi{ gap:6px; } .kpi i{ width:30px; height:30px; } .kpi i::before{ width:8px; height:8px; }
  .kpi b{ font-size:16px; } .kpi small{ font-size:10px; line-height:1.1; white-space:nowrap; }
  .kpi > div{ min-width:0; }
  main{ padding-bottom:calc(68px + env(safe-area-inset-bottom)); }
  .search{ flex:100%; width:auto; }
  .chips{ flex:100%; margin:0 -14px; padding:2px 14px; }
  .spacer{ display:none; }
  .toolbar .btn{ margin-left:auto; }
  .cols{ grid-auto-columns:calc(100% - 40px); gap:10px; margin:0 -14px; padding:0 14px 4px; scroll-padding:0 14px; }
  .ends{ gap:10px; }
  .end{ min-height:66px; padding:10px 12px; gap:10px; }
  .end-hint{ display:none; }
  :root.dragging .ends{ bottom:calc(12px + env(safe-area-inset-bottom)); }
  .fields{ grid-template-columns:1fr; }
  .inp, select.inp, textarea.inp, .search input{ font-size:16px; }
  /* Sheet → Bottom-Sheet */
  .ov{ padding:0; place-items:end stretch; }
  .sheet{ width:100%; max-height:92dvh; border-radius:26px 26px 0 0; transform:translateY(100%); }
  .sheet-grip{ display:block; width:36px; height:4px; border-radius:var(--m-r-pill); background:var(--m-line-2); margin:8px auto 0; }
  .sheet-head{ padding:10px 14px 4px 16px; }
  .sheet-body{ padding:6px 16px 18px; }
  .sheet-foot{ padding:10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .dk h3{ font-size:21px; } .dk-pct{ font-size:26px; }
  /* Tabellen → Karten */
  table.tab, .tab tbody{ display:block; }
  .tab thead{ display:none; }
  .tab tbody tr{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; padding:12px 10px; border-bottom:1px solid var(--m-line); }
  .tab tbody tr:last-child{ border-bottom:0; }
  .tab td{ display:block; padding:0; min-width:0; }
  .tab td[data-l]::before{ content:attr(data-l) ": "; color:var(--m-muted); font-size:12px; }
  .tab td.main{ grid-column:1 / -1; font-weight:600; }
}
@media (max-width:480px){ .step-lab{ font-size:10.5px; } }
/* Kleine, niedrige Handys: Titel und Personenfilter weichen, damit das Board Platz behält */
@media (max-width:760px) and (max-height:720px){
  .head h1, .chips{ display:none; }
  .end{ min-height:56px; padding:8px 12px; } .end-ico{ width:34px; height:34px; }
  .sy-topbar{ padding-top:10px; }
}
@media (pointer:coarse){
  .chip{ height:44px; } .ibtn{ width:44px; height:44px; } .btn{ height:46px; } .btn--sm{ height:40px; }
  .face-more{ width:40px; height:40px; margin:-4px -4px -4px 0; } .col-add{ width:40px; height:40px; }
  .step{ padding:10px 2px 8px; } .seg button{ height:40px; }
}
@container (max-width:270px){ .col-head{ flex-wrap:wrap; } }
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ transition-duration:0s !important; animation:none !important; }
}

/* ---------- Sidebar (wie ARMA/SOLARIS): Kopf .brand · Bereiche .side-sec · Fuß .side-foot (Administration, ? Version) ---------- */
.side{ display:flex; flex-direction:column; width:236px; background:#1a1a1a; color:#fff; border:1px solid #ffffff1f; border-radius:var(--m-r-card);
  box-shadow:0 20px 40px -18px #00000073; overflow-y:auto; scrollbar-width:none; z-index:60; }
.side::-webkit-scrollbar{ display:none; }
/* Kopf der Sidebar wie .drawer-head in SOLARIS: Block, Innenabstand 20 18 16, feine Linie darunter; Logo 198×50 px */
.side .drawer-head{ display:block; flex:0 0 auto; padding:20px 18px 16px; border-bottom:1px solid #ffffff1a; }   /* Hintergrund = Sidebar (Logo ist transparent) */
.side .drawer-logo{ width:198px; height:50px; max-width:100%; object-fit:contain; display:block; }
.side-foot{ margin-top:auto; padding:6px 0 16px; border-top:1px solid #ffffff1a; display:flex; flex-direction:column; gap:8px; }
.side-backdrop{ position:fixed; inset:0; z-index:55; background:#14121066; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
@media (min-width:901px){
  .side{ position:fixed; left:12px; top:12px; bottom:12px; }
  html:has(> #sentynel-stage-banner) .side{ top:34px; }
  body.has-side{ padding-left:260px; }
  body.has-side .sy-topbar .sy-logo{ display:none; }   /* Logo steht in der Sidebar; im Kopf nur Name + Zeile darunter wie SOLARIS */
}
@media (max-width:900px){
  .side{ position:fixed; left:10px; top:10px; bottom:10px; width:min(84vw,320px); transform:translateX(calc(-100% - 24px)); transition:transform .35s var(--m-ease); box-shadow:var(--m-shadow-pop); }
  html:has(> #sentynel-stage-banner) .side{ top:32px; }
  .side.open{ transform:none; }
  /* Handy wie ARMA: Schublade hell, schwarzer Kopf, aktiver Eintrag = dunkle Pille */
  .side{ background:var(--m-solid); color:var(--m-ink); border-color:var(--m-line); }
  .side .drawer-head{ background:#1a1a1a; border-radius:0; }   /* Handy: Kopf in Dock-Farbe (Schublade selbst ist hell) */
  .grouplabel{ color:var(--m-muted); }
  .navlink{ min-height:48px; font-size:15px; color:var(--m-ink); }
  .navlink:hover{ background:var(--m-well); color:var(--m-ink); }
  .navlink.active{ background:var(--m-ink); color:var(--m-on-ink); }
  .side-foot{ border-top:1px solid var(--m-line); }
}

/* „Zur Startseite“ (sentynel_back.js) im Sidebar-Fuß: im Fluss statt schwebend */
#side #sentynel-back{ position:static !important; left:auto !important; right:auto !important; bottom:auto !important; top:auto !important;
  width:auto !important; justify-content:center; margin:6px 12px 0 !important; flex:0 0 auto; border-radius:var(--m-r-pill); }
#sentynel-back-luft{ display:none; }

/* Handy: Nachtmodus-Schalter (wie „Dark Mode“ in SOLARIS) und BETA-Marke im Schubladenfuß; Mond-Knopf und schwebendes BETA-Band entfallen dort */
.side-theme, .drawer-beta{ display:none; }
@media (max-width:900px){
  #sy-beta{ display:none !important; }
}
@media (max-width:640px){
  .side-theme{ display:inline-flex; align-items:center; gap:12px; align-self:flex-start; margin:6px 22px 0; padding:4px 0; border:0; background:none;
    color:var(--m-ink); font-size:13px; font-weight:700; letter-spacing:.04em; }
  .tt-track{ width:46px; height:26px; flex:0 0 46px; display:inline-flex; align-items:center; padding:3px; border-radius:var(--m-r-pill);
    border:2px solid var(--m-line-2); background:var(--m-well); transition:border-color .2s, background .2s; }
  .tt-thumb{ width:16px; height:16px; border-radius:50%; background:var(--m-faint); transition:transform .25s var(--m-ease), background .25s; }
  .side-theme[aria-pressed="true"] .tt-track{ border-color:var(--m-yellow); background:#1a1a1a; }
  .side-theme[aria-pressed="true"] .tt-thumb{ transform:translateX(20px); background:var(--m-yellow); }
}
@media (max-width:900px){
  .drawer-beta{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px; margin:6px 22px 0; background:var(--m-yellow); color:#1a1a1a;
    font-weight:600; font-size:11px; letter-spacing:.06em; padding:5px 10px; }
  .drawer-beta b{ letter-spacing:.16em; font-size:12.5px; }
}

/* ---------- Handy-Leiste (≤ 900 px) wie SOLARIS: schwarz, gelber Rand oben, links Übersicht · Mitte gelbes „+“ (Neue Aufgabe) · rechts Menü ---------- */
.mnav{ display:none; }
@media (max-width:900px){
  .mnav[hidden]{ display:none !important; }
  .mnav{ display:grid; grid-template-columns:1fr 92px 1fr; position:fixed; left:0; right:0; bottom:0; z-index:40;
    height:calc(62px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:#000; border-top:3px solid var(--m-yellow); }
  .mnav-btn{ height:59px; padding:0; border-radius:0; background:none; border:0; color:#cfcfcf; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    font-family:'Palanquin Dark','Palanquin',system-ui,sans-serif; font-weight:600; font-size:.6rem; line-height:normal; letter-spacing:.16em; text-transform:uppercase;
    cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .mnav-btn svg{ width:24px; height:24px; }
  .mnav-btn[aria-expanded="true"]{ color:var(--m-yellow); }
  .mnav-btn[hidden], .mnav-plus[hidden]{ display:flex !important; visibility:hidden; }   /* Platz bleibt, „+“ bleibt mittig */
  .mnav-plus{ justify-self:center; width:58px; height:58px; margin-top:-22px; display:grid; place-items:center; cursor:pointer; padding:0; border-radius:50%;
    background:var(--m-yellow); color:#1a1a1a; border:4px solid var(--m-bg); box-shadow:0 10px 24px -8px #00000080; transition:transform .1s var(--m-ease);
    -webkit-tap-highlight-color:transparent; }   /* rund wie in SOLARIS (modern); Leiste selbst bleibt schwarz mit gelbem Rand */
  .mnav-plus svg{ width:30px; height:30px; }
  .mnav-plus:active{ transform:scale(.94); }
  body.modal-open .mnav{ display:none; }
  main{ padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
  .toast{ bottom:calc(86px + env(safe-area-inset-bottom)); }
}

/* Handy-Kopf (≤ 640 px): gemeinsame Regeln in seynstahl-modern.css; hier nur die Logo-Kachel */
@media (max-width:640px){ .sy-topbar .sy-logo{ width:36px; height:36px; padding:6px; } }

/* Zähler an den Sidebar-Punkten (wie .dnav-n in SOLARIS): runde Pille, aktiv = gelb */
@media (max-width:900px){ .dnav-n{ background:var(--m-well); color:var(--m-muted); } .navlink.active .dnav-n{ background:var(--m-yellow); color:#1a1a1a; } }

/* ---------- Fuß wie ARMA: Fuß-Innenabstand 6 0 16, Zeilen = normale Menüzeilen (Rand 2 10, 10/14, Schrift 14/600, Lücke 12) ---------- */
.side-foot .ver-link::after{ display:none; }
.ver-q{ margin:0; }
.side-foot .side-theme{ display:none; }
@media (max-width:640px){
  .side-foot .side-theme{ display:flex; width:100%; margin:0; min-height:42px; padding:8px 14px; align-self:stretch; flex-direction:row-reverse; justify-content:space-between; gap:10px;
    border-radius:14px; font-size:14px; font-weight:600; }
  .side-foot .navlink{ min-height:48px; font-size:15px; }   /* Handy-Schublade wie ARMA: 48 px / 15 px */
  .drawer-beta{ align-self:center; margin:0 auto; padding:3px 10px; border-radius:var(--m-r-pill); }
}
#side #sentynel-back{ margin:6px 10px 0 !important; min-height:40px; }

/* Sidebar-Kopf: SEYNSTAHL-Logo wie in SOLARIS (.drawer-logo) */