/* ============================================================
   ARMA — Branding-Kit MODERN 1.1.0 (../devo/docs/branding-skit-modern.md, Vorbild „Rapport")
   Wird NACH seynstahl-base.css, dem <style> in index.html geladen
   und überschreibt nur das Aussehen — kein Markup, keine Funktion.
   Entfernen = <link> in index.html löschen → Handbuch-Design (kantig).
   Bleibt aus dem Kit 2.4.0: Wabe-Logo, Gelb #ffcc00, Schwarz, Claim, deutsche Texte.
   index.html setzt *{border-radius:0!important} — deshalb tragen Radien hier !important.
   ============================================================ */

: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-muted:#66665f; --m-faint:#8e8e86;
  --m-yellow:#ffcc00; --m-good:#2f7a52; --m-bad:#c8431f; --m-info:#2e7dd1; --m-pine:#2f5c50; --m-orange:#d9770a;
  --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-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-on-ink:#ffffff; --m-hover:#ffffff; --m-hair:transparent;
  --m-dock:#1a1a1a; --m-dock-rim:transparent;
  color-scheme:light;

  /* klassische Tokens auf MODERN umbiegen → nicht angefasste Teile folgen mit */
  --sy-bg:var(--m-bg); --sy-surface:var(--m-glass-2); --sy-line:var(--m-line); --sy-chip:var(--m-well);
  --sy-hl:var(--m-well); --sy-border-strong:var(--m-line-2); --sy-ink-soft:var(--m-muted);
  --sy-shadow:var(--m-shadow); --sy-shadow-lg:var(--m-shadow-pop); --sy-ease:var(--m-ease);
  --sy-font-head:var(--m-font); --sy-font-body:var(--m-font);
}
body[data-area="arma"]{ --arma-card:var(--m-glass-2); --arma-border:var(--m-line); --arma-border-strong:var(--m-line-2);
  --arma-input-bg:var(--m-glass-2); --arma-text-muted:var(--m-muted); }

/* ---------- Grundfläche ---------- */
body{ font-family:var(--m-font); font-weight:500; font-size:14px; line-height:1.45; color:var(--m-ink);
      background:var(--m-bg); -webkit-tap-highlight-color:transparent; -webkit-font-smoothing:antialiased; }
html body{ font-family:var(--m-font); }   /* beta.js hängt später body{font-family:Palanquin} an — diese Regel (höhere Spezifität) hält die Schrift bei Urbanist, wie in PENSUM */
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%),
             radial-gradient(30vw 24vw at 30% 0%, #ffffff80, transparent 70%); }
h1,h2,h3,h4{ font-family:var(--m-font); text-transform:none; letter-spacing:-.015em; font-weight:600; }
:focus-visible{ outline:none; box-shadow:var(--m-ring) !important; }
.muted{ color:var(--m-muted); }
.wrap{ max-width:1440px; padding:8px clamp(16px,1.6vw,28px) 40px; }
td, .tile .n, .bn, .sp-big .n, .ih-n{ font-variant-numeric:tabular-nums; }

/* ---------- Kopf: gemeinsame Regeln in seynstahl-modern.css; hier nur die Logo-Kachel ---------- */
.sy-topbar .sy-logo{ height:40px; width:40px; box-sizing:border-box; padding:7px; background:#000; border:1px solid var(--m-hair);
  border-radius:var(--m-r-sm) !important; object-fit:contain; }

/* ---------- Sidebar: schwebendes schwarzes Panel (Desktop) ---------- */
.shell{ gap:clamp(12px,1.4vw,22px); padding-left:clamp(12px,1.4vw,22px); }
.side{ width:232px; flex:0 0 232px; top:12px; height:calc(100dvh - 24px); margin-bottom:12px; background:var(--m-dock); color:#fff;
  border:1px solid var(--m-dock-rim); border-radius:var(--m-r-card) !important; box-shadow:0 20px 40px -18px #00000073;
  scrollbar-width:none; padding-bottom:10px; }
.side::-webkit-scrollbar{ display:none; }
.side .brand{ padding:20px 18px 16px; border-bottom:1px solid #ffffff1a; }
.side .brand-logo{ width:198px; height:50px; max-width:100%; display:block; object-fit:contain; object-position:left center; }   /* wie .drawer-l .drawer-logo in SOLARIS */
.theme-toggle{ margin:14px 12px 0; padding:10px 12px 10px 16px; border:1px solid #ffffff24; border-radius:var(--m-r-pill) !important; background:transparent;
  font-family:var(--m-font); font-size:13px; font-weight:600; letter-spacing:0; text-transform:none; color:#d6d4cf; transition:background .15s; }
.theme-toggle:hover{ background:#ffffff14; }
.tt-switch{ width:44px; height:26px; flex:0 0 44px; border:0; background:#ffffff29; border-radius:var(--m-r-pill) !important; }
.tt-knob{ top:3px; left:3px; width:20px; height:20px; background:#fff; border-radius:50% !important; transition:transform .3s var(--m-ease); }
/* geteilte Snippets nur über ihre ids rund machen (Skripte selbst bleiben unverändert) */

@media (min-width:901px){
  /* wie SOLARIS: Sidebar fix über die volle Höhe, #appView (Kopf + Inhalt) rückt rechts daneben */
  :root{ --side-w:236px; }
  #appView{ padding-left:calc(var(--side-w) + 24px); }
  .shell{ padding-left:0; gap:0; }
  .side{ position:fixed; left:12px; top:12px; bottom:12px; height:calc(100dvh - 24px); width:var(--side-w); margin:0; z-index:30; overscroll-behavior:contain; }
  html:has(> #sentynel-stage-banner) .side{ top:34px; height:calc(100dvh - 46px); }
  /* wie SOLARIS: .side = Spalte aus drei Blöcken — Kopf (.brand), Bereiche (.side-sec), Fuß (.side-foot, klebt unten) */
  .side{ display:flex; flex-direction:column; }
  .side-foot{ margin-top:auto; padding:6px 0 16px; border-top:1px solid #ffffff1a; display:flex; flex-direction:column; gap:8px; }
  #side .side-foot #sentynel-back{ margin:6px 10px 0 !important; width:auto !important; min-height:40px; }   /* 10 px Rand + 40 px Höhe wie PENSUM */
  #side #sentynel-back{ flex:0 0 auto; }
  .sy-topbar .sy-logo{ display:none; }                    /* Logo steht oben in der Sidebar */
  .side .theme-toggle{ display:none; }                    /* Nachtmodus sitzt oben rechts */
}

@media (max-width:900px){
  .side{ display:flex; flex-direction:column; }
  .side-foot{ margin-top:auto; padding:6px 0 16px; border-top:1px solid #ffffff1a; display:flex; flex-direction:column; gap:8px; }
  .side-foot .theme-toggle{ margin:6px 12px 0; }
}

/* „? Version" wie SOLARIS: gelber Kreis statt Symbol */
.ver-link{ cursor:pointer; }

/* ---------- Karten / Panels (Glas) ---------- */
.lead,.tile,.dcard,.panel,.warncard,.login,.sp-prog,.sp-live-card,.mobile-readonly-grid .fld,.create-form{
  background:var(--m-glass); border:1px solid var(--m-rim); border-radius:var(--m-r-card) !important; box-shadow:var(--m-shadow);
  backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2); }
.dcard,.panel{ padding:18px 20px; }
.lead{ border-left:1px solid var(--m-rim); padding:14px 18px; }
.lead::before{ content:""; display:inline-block; width:8px; height:8px; border-radius:50% !important; background:var(--m-yellow); margin-right:10px; vertical-align:1px; }
.warncard{ border-left:1px solid var(--m-rim); }
.warncard.hot{ border:2px solid var(--m-bad); }
.warncard.ok{ border-color:color-mix(in srgb, var(--m-good) 45%, transparent); }
.mobile-readonly-grid .fld{ border-radius:var(--m-r-tile) !important; }
.dcard h3,.panel h3,.section h3,.create-form h3{ font-size:15px; font-weight:600; letter-spacing:-.005em; text-transform:none; border-bottom:0; padding-bottom:0; margin-bottom:12px;
  display:flex; align-items:center; gap:10px; }
.dcard h3::before,.panel h3::before{ width:8px; height:8px; margin:0; border-radius:50% !important; background:var(--m-yellow); vertical-align:0; flex:0 0 8px; }
.section{ border-top:1px solid var(--m-line); }
.histpanel{ border-left:0; border-radius:var(--m-r-tile) !important; background:var(--m-glass-2); border:1px solid var(--m-line); }

/* Seitenkopf */
.pagehead{ gap:14px; margin:6px 0 20px; }
.pagehead-ico{ width:46px; height:46px; flex:0 0 46px; background:var(--m-dock); border:1px solid var(--m-hair); border-bottom:1px solid var(--m-hair); border-radius:50% !important; }
.pagehead-ico svg{ width:20px; height:20px; color:var(--m-yellow); }
.pagehead h2{ font-size:clamp(26px,2.4vw,34px); font-weight:600; letter-spacing:-.025em; line-height:1.05; text-transform:none; }
.dsec{ font-family:var(--m-font); font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--m-muted); margin:24px 0 10px; }

/* Kennzahl-Kacheln (Dashboard) */
.tiles{ gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); }
button.tile{ background:var(--m-glass); border:1px solid var(--m-rim); border-left:1px solid var(--m-rim); border-radius:22px !important; box-shadow:var(--m-shadow);
  padding:16px 18px; gap:14px; transition:transform .2s var(--m-ease), box-shadow .2s, background .15s; }
@media (hover:hover){ button.tile:hover{ transform:translateY(-2px); box-shadow:var(--m-shadow-lift); border-left-color:var(--m-rim); background:var(--m-glass-2); } }
button.tile:active{ transform:scale(.985); background:var(--m-glass-2); border-left-color:var(--m-rim); }
button.tile.warn{ border-color:color-mix(in srgb, var(--m-bad) 55%, transparent); }
.ti{ width:46px; height:46px; flex:0 0 46px; align-items:center; justify-content:center; border-radius:50% !important;
  background:var(--m-glass-2); border:1px solid var(--m-line); color:var(--m-ink); }
.ti svg{ width:21px; height:21px; stroke-width:1.8; }
.tile.warn .ti{ background:color-mix(in srgb, var(--m-bad) 12%, transparent); border-color:color-mix(in srgb, var(--m-bad) 35%, transparent); color:var(--m-bad); }
.tile .n{ font-family:var(--m-font); font-weight:600; font-size:30px; letter-spacing:-.03em; line-height:1; color:var(--m-ink); }
.tile.warn .n{ color:var(--m-bad); }
.tile .l{ font-family:var(--m-font); font-size:12.5px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--m-muted); }
.tile-ico{ background:var(--m-glass-2); border:1px solid var(--m-line); border-bottom:1px solid var(--m-line); border-radius:50% !important; }
.tile-ico svg{ color:var(--m-ink); }
.dash-grid{ gap:16px; }

/* Balken, Donut, Fristen, Feed */
.bt, .sp-bar{ height:8px; background:var(--m-well); border-radius:var(--m-r-pill) !important; overflow:hidden; }
.bt i{ border-radius:var(--m-r-pill) !important; transform-origin:left; animation:m-grow .6s var(--m-ease) both; }
@keyframes m-grow{ from{ transform:scaleX(0); } }
.bn{ font-weight:600; }
.fr-row{ border-radius:var(--m-r-sm) !important; transition:background .15s; }
.activity li{ border-radius:var(--m-r-sm) !important; transition:background .15s; }
.act-ico{ width:36px; height:36px; flex:0 0 36px; border-radius:50% !important; background:var(--m-well); }
.kal-cell{ border-radius:var(--m-r-sm) !important; }

/* ---------- Buttons ---------- */
.btn{ font-family:var(--m-font); text-transform:none; letter-spacing:0; font-size:13.5px; font-weight:600; min-height:42px; padding:0 18px; line-height:1.2;
  background:var(--m-ink); color:var(--m-on-ink); border:1px solid transparent; border-radius:var(--m-r-pill) !important; box-shadow:none;
  transition:filter .15s, transform .1s var(--m-ease), background .15s, color .15s; }
.btn:hover{ background:var(--m-ink); filter:brightness(1.25); }
.btn:not(:disabled):hover{ transform:none !important; box-shadow:none !important; }
.btn:not(:disabled):active{ transform:scale(.97) !important; }
.btn.acc{ background:var(--m-yellow); color:#1a1a1a; border-color:transparent; }
.btn.ghost{ background:var(--m-glass-2); color:var(--m-ink); border:1px solid var(--m-line-2); }
.btn.ghost:hover{ filter:none; background:var(--m-hover); }
.btn.danger{ background:var(--m-bad); color:#fff; border-color:transparent; }
.btn.sm{ min-height:34px; padding:0 14px; font-size:12.5px; }
.bulk-move-btn,.frist-bulk-move-btn,.detail-move-btn{ background:var(--m-good); color:#fff; border-color:transparent; }
.btn:disabled, .btn.ghost:disabled, .btn.danger:disabled{ opacity:.45; filter:none; cursor:not-allowed; }
.btn:disabled{ background:var(--m-ink) !important; color:var(--m-on-ink) !important; border-color:transparent !important; }
.btn.ghost:disabled{ background:var(--m-glass-2) !important; color:var(--m-ink) !important; border-color:var(--m-line-2) !important; }
.btn.danger:disabled{ background:var(--m-bad) !important; color:#fff !important; }
.btn.select-mode-btn.acc{ background:var(--m-yellow); color:#1a1a1a; border-color:transparent; }
.icon-btn{ width:36px; height:36px; padding:0; align-items:center; justify-content:center; border-radius:50% !important; color:var(--m-muted); transition:background .15s, color .15s; }
.icon-btn:hover{ background:var(--m-well); color:var(--m-ink); transform:none !important; box-shadow:none !important; }
.icon-btn:active{ transform:scale(.94) !important; }
.photo-print-btn, .lightbox-close{ border-radius:50% !important; }
.ih-step{ border:1px solid var(--m-line-2); border-radius:var(--m-r-pill) !important; overflow:hidden; background:var(--m-glass-2); }
.ih-step button{ background:transparent; color:var(--m-ink); }
.ih-step button:hover:not(:disabled){ background:var(--m-well); }
.ih-link{ color:var(--m-ink); text-underline-offset:3px; }

/* Reiter (Mehr-/Detail-Tabs, Datenbank-Kategorien): Chips, aktiv = schwarze Pille */
.more-tabs, .detail-tabs{ gap:6px; }
.more-tabs button,.detail-tabs button{ font-family:var(--m-font); font-size:13px; font-weight:600; letter-spacing:0; text-transform:none; height:36px; padding:0 15px;
  background:var(--m-glass-2); color:var(--m-ink); border:1px solid var(--m-line); border-radius:var(--m-r-pill) !important; transition:background .15s, color .15s; }
.more-tabs button:hover,.detail-tabs button:hover{ background:var(--m-hover); }
.more-tabs button.active,.detail-tabs button.active{ background:var(--m-ink); color:var(--m-on-ink); border-color:transparent; }

/* ---------- Felder ---------- */
input,select,textarea{ font-family:var(--m-font); border:1px solid var(--m-line-2); background:var(--m-glass-2); color:var(--m-ink); border-radius:14px !important; }
input:not([type=checkbox]):not([type=radio]):not([type=file]),select{ min-height:42px; padding:0 14px; }
textarea{ padding:10px 14px; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--m-ink); box-shadow:var(--m-ring); }
input[type=checkbox]{ accent-color:var(--m-ink); border-radius:4px !important; }
input[type=file]::file-selector-button{ border-radius:var(--m-r-pill) !important; }
.fld>label{ font-family:var(--m-font); font-size:12.5px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--m-muted); }
#detailFieldsWrap.view-mode .fld label{ font-family:var(--m-font); font-size:12.5px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--m-muted); }
#q, #fristenSearch{ border-radius:var(--m-r-pill) !important; padding-left:18px; }
.status-select{ border-radius:var(--m-r-pill) !important; border-left:1px solid currentColor !important; }
.view-menu{ background:var(--m-solid); border:1px solid var(--m-rim); border-radius:var(--m-r-tile) !important; box-shadow:var(--m-shadow-pop); padding:8px; }
.view-menu label{ border-radius:10px !important; padding:7px 9px; }
.db-cat-select{ border-radius:14px !important; }

/* ---------- Tabellen ---------- */
table{ background:var(--m-glass); border:1px solid var(--m-rim); border-radius:22px !important; box-shadow:var(--m-shadow); border-collapse:separate; border-spacing:0; overflow:hidden; }
.tablewrap{ border-radius:22px !important; }
.tablewrap table{ border-radius:22px !important; }
th{ background:transparent; color:var(--m-muted); font-family:var(--m-font); font-size:12px; font-weight:600; letter-spacing:0; text-transform:none;
  border-bottom:1px solid var(--m-line); }
th, td{ border-bottom:1px solid var(--m-line); }
tbody tr:last-child td{ border-bottom:0; }
tbody tr{ transition:background-color .15s; }
tbody tr:hover{ background:var(--m-well); }
.th-sort.active svg{ color:var(--m-ink); }
.reg-thumb{ border-radius:var(--m-r-sm) !important; }
.photo-box,.mobile-summary-photo{ border-radius:var(--m-r-tile) !important; overflow:hidden; }

/* Status-Pillen: Zustandsfarben bleiben, runde Pille + Punkt */
.pill,.frist-badge{ border-left:0; border-radius:var(--m-r-pill) !important; padding:3px 10px; font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.pill::before,.frist-badge::before{ content:""; width:7px; height:7px; flex:0 0 7px; border-radius:50% !important; background:currentColor; }
.pill.big{ padding:5px 14px; }

/* ---------- Fenster ---------- */
.overlay{ background:#14121042; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:16px; }
.modal{ background:var(--m-solid); border:1px solid var(--m-rim); border-radius:var(--m-r-card) !important; box-shadow:var(--m-shadow-pop); overflow:hidden; }
.modal .head{ background:transparent; color:var(--m-ink); border-bottom:1px solid var(--m-line); padding:14px 14px 14px 20px; gap:12px; border-radius:0 !important; }
.modal .head::before{ display:none; }
.modal .head h2{ color:var(--m-ink); font-size:20px; font-weight:700; letter-spacing:-.015em; text-transform:none; }
.modal .head .sy-wabe{ width:34px; height:34px; flex:0 0 34px; padding:5px; background:#000; border:1px solid var(--m-hair); border-radius:10px !important; box-sizing:border-box; }
.modal .head .btn.ghost{ background:var(--m-glass-2); color:var(--m-ink); border-color:var(--m-line-2); }
.modal .head .btn.ghost:hover{ background:var(--m-ink); color:var(--m-on-ink); border-color:var(--m-ink); }
.modal .body{ background:var(--m-solid); padding:16px 20px 10px; }
.modal .foot{ background:var(--m-solid); border-top:1px solid var(--m-line); }
.lightbox-overlay{ backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }

/* ---------- Toast, Login, Sonepar ---------- */
.toast{ background:#1a1a1a; color:#fff; border-left:0; border-radius:var(--m-r-pill) !important; box-shadow:var(--m-shadow-pop); padding:12px 20px; font-weight:600; }
.login{ border-top:1px solid var(--m-rim); padding:34px 30px; max-width:380px; }
.login .sy-wabe-login{ width:56px; height:56px; padding:8px; background:#000; border-radius:16px !important; box-sizing:border-box; }
.login h1{ font-size:26px; font-weight:700; letter-spacing:-.02em; }
.login .claim{ font-size:12.5px; }
.login .btn{ background:var(--m-yellow); color:#1a1a1a; min-height:46px; }
.sp-live{ background:#1a1a1a; border-left:0; border-radius:14px !important; }
.sp-scan{ border-radius:10px !important; }
.sp-kat{ border-radius:var(--m-r-sm) !important; }
.sp-h{ font-family:var(--m-font); font-size:11.5px; font-weight:700; letter-spacing:.06em; }
.sp-dot{ border-radius:50% !important; }

/* Reiterwechsel: kurzes Einblenden (nur beim Anzeigen; Live-Refresh blendet nicht neu ein) */
[id^="tab-"]:not(.hidden){ animation:m-fade .3s var(--m-ease); }
@keyframes m-fade{ from{ opacity:0; transform:translateY(6px); } }

/* ---------- Tablet/Handy ≤ 900 px: Sidebar als schwebende Schublade, Leiste als Dock ---------- */
@media (max-width:900px){
  .shell{ padding-left:0; gap:0; }
  .side{ width:min(84vw,320px); left:10px; top:10px; bottom:10px; height:calc(100dvh - 20px); margin:0; z-index:60;
    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; height:calc(100dvh - 42px); }
  .side.open{ transform:translateX(0); }
  /* Handy wie SOLARIS: Schublade hell (Fläche --m-solid), schwarzer Kopf, dunkle Schrift, aktiver Eintrag = schwarze Pille */
  .side{ background:var(--m-solid); color:var(--m-ink); }
  .side .brand{ background:var(--m-dock); border-bottom:0; }
  .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-well); }
  .navlink.active{ background:var(--m-ink); color:var(--m-on-ink); }
  .navlink.active::before{ display:none; }
  .navlink .dnav-n{ background:var(--m-well); color:var(--m-muted); }
  .navlink.active .dnav-n{ background:var(--m-yellow); color:#1a1a1a; }
  .navlink.active svg{ color:var(--m-yellow); opacity:1; }
  .side-foot{ border-top:1px solid var(--m-line); }
  .theme-toggle{ color:var(--m-ink); border-color:var(--m-line-2); }
  .theme-toggle:hover{ background:var(--m-well); }
  .tt-switch{ background:var(--m-line-2); }
  .side-backdrop.show{ background:#14121066; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
  .mainarea{ padding-bottom:calc(100px + env(safe-area-inset-bottom,0px)); }

  .bottomnav{ left:12px; right:12px; max-width:440px; margin:0 auto; bottom:calc(12px + env(safe-area-inset-bottom,0px));
    height:64px; padding:0 8px; border-top:0; border:1px solid var(--m-dock-rim); border-radius:var(--m-r-pill) !important;
    background:var(--m-dock); box-shadow:var(--m-shadow-pop); justify-content:space-around; }
  .bottomnav button{ position:relative; width:48px; height:48px; flex:0 0 48px; border-radius:50% !important; color:#d6d4cf; transition:background .15s, color .15s, transform .1s var(--m-ease); }
  .bottomnav button svg{ width:22px; height:22px; }
  .bottomnav button:active{ background:#ffffff1f; transform:scale(.94); }
  .bottomnav button.active{ color:var(--m-yellow); background:#ffffff1a; }
  .bottomnav button.active::after{ content:""; position:absolute; left:50%; bottom:4px; width:5px; height:5px; margin-left:-2.5px; border-radius:50% !important; background:var(--m-yellow); }
  .bottomnav button.scan{ width:58px; height:58px; flex:0 0 58px; margin-top:-22px; background:var(--m-yellow); color:#1a1a1a;
    border:4px solid var(--m-bg); box-shadow:0 10px 24px -8px #00000080; }
  .bottomnav button.scan:active{ transform:scale(.94); background:var(--m-yellow); }
  #signum-btn{ bottom:calc(90px + env(safe-area-inset-bottom,0px)) !important; }
  .toast{ bottom:calc(90px + env(safe-area-inset-bottom,0px)); }
}
@media (pointer:coarse){
  .icon-btn{ width:44px; height:44px; }
  .btn{ min-height:46px; }
  .btn.sm{ min-height:40px; }
}

/* ---------- Handy ≤ 640 px ---------- */
@media (max-width:640px){
  .sy-topbar .sy-logo{ width:36px; height:36px; padding:6px; flex:0 0 auto; }
  .wrap{ padding:6px max(14px, env(safe-area-inset-right)) 32px max(14px, env(safe-area-inset-left)); }
  .pagehead h2{ font-size:28px; }
  .pagehead-ico{ width:40px; height:40px; flex-basis:40px; }
  .tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  button.tile{ padding:14px; gap:10px; flex-direction:column; align-items:flex-start; border-radius:var(--m-r-tile) !important; }
  .ti{ width:40px; height:40px; flex-basis:40px; }
  .tile .n{ font-size:24px; }
  .dash-grid{ gap:12px; }
  .dcard,.panel{ padding:14px 16px; border-radius:22px !important; }
  input:not([type=checkbox]):not([type=radio]):not([type=file]),select{ min-height:46px; height:46px; }
  #q,#fristenSearch,#tab-register #q,#tab-fristen #fristenSearch{ border-radius:var(--m-r-pill) !important; }

  /* Listen als Karten: Glas, rund, beim Antippen leicht gelb */
  #tab-register tbody tr,#tab-fristen tbody tr,#tab-datenbank tbody tr{ background:var(--m-glass-2); border:1px solid var(--m-rim);
    border-left:1px solid var(--m-rim); border-radius:var(--m-r-tile) !important; box-shadow:var(--m-shadow); }
  #tab-register tbody tr:active,#tab-fristen tbody tr:active{ background:color-mix(in srgb, var(--m-yellow) 14%, var(--m-glass-2));
    border-color:color-mix(in srgb, var(--m-yellow) 60%, transparent); box-shadow:var(--m-shadow); transform:scale(.985); }
  #tab-register tbody tr.row-selected,#tab-fristen tbody tr.row-selected{ border-color:var(--m-yellow); border-left-color:var(--m-yellow);
    background:color-mix(in srgb, var(--m-yellow) 14%, var(--m-glass-2)) !important; }
  #tab-register tbody tr:hover,#tab-fristen tbody tr:hover{ background:var(--m-glass-2); }
  #tab-register table,#tab-fristen table,#tab-datenbank table{ border:0; border-radius:0 !important; overflow:visible; background:transparent; box-shadow:none; }
  #tab-register .tablewrap,#tab-fristen .tablewrap,#tab-datenbank .tablewrap{ border-radius:0 !important; }
  .mobile-action-grid button{ background:var(--m-ink); color:var(--m-on-ink); border:0; border-radius:var(--m-r-tile) !important;
    font-family:var(--m-font); font-size:13px; font-weight:600; letter-spacing:0; text-transform:none; }

  /* Fenster → Bottom-Sheet mit Griff */
  .overlay{ padding:0; align-items:flex-end; }
  .modal{ min-height:0; max-height:94dvh; border-radius:var(--m-r-card) var(--m-r-card) 0 0 !important; border-bottom:0; }
  .modal .head{ padding:22px 12px 12px 16px; position:sticky; }
  .modal .head::after{ content:""; position:absolute; left:50%; top:8px; width:36px; height:4px; margin-left:-18px; border-radius:4px !important; background:var(--m-line-2); }
  .modal .head h2{ font-size:18px; }
  .modal .body{ padding:14px 16px 10px; }
  .modal .foot{ padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); }
  .toast{ max-width:calc(100vw - 28px); }
}

/* ============================================================
   NACHTMODUS — <html data-theme="dark"> (Schalter in der Sidebar, Wahl in arma_theme)
   ============================================================ */
:root[data-theme="dark"]{
  color-scheme: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-muted:#a3a6a0; --m-faint:#8e918c;
  --m-good:#6cc59a; --m-bad:#f08a68; --m-info:#6fa8e8; --m-pine:#6cc59a; --m-orange:#f0a24a;
  --m-on-ink:#1a1a1a; --m-hover:#ffffff22; --m-hair:#ffffff29;
  --m-dock:#000; --m-dock-rim:#ffffff1f;
  --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;
  --sy-bg:var(--m-bg); --sy-surface:var(--m-glass-2); --sy-line:var(--m-line); --sy-chip:var(--m-well);
  --sy-hl:var(--m-well); --sy-border-strong:var(--m-line-2); --sy-ink-soft:var(--m-muted);
  --sy-ink:var(--m-ink); --sy-ink-head:var(--m-ink); --sy-ro-ink:var(--m-ink);
  --sy-shadow:var(--m-shadow); --sy-shadow-lg:var(--m-shadow-pop);
}
:root[data-theme="dark"] body{ background:var(--m-bg); color:var(--m-ink); }
:root[data-theme="dark"] body::before{
  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%); }
:root[data-theme="dark"] .tt-switch{ background:var(--m-yellow); border:0; }
:root[data-theme="dark"] .tt-knob{ background:#1a1a1a; transform:translateX(18px); }
:root[data-theme="dark"] .overlay{ background:#0009; }
:root[data-theme="dark"] .side-backdrop.show{ background:#000a; }
:root[data-theme="dark"] .toast{ background:#000; box-shadow:var(--m-shadow-pop); }
:root[data-theme="dark"] .sp-live{ background:#000; border:1px solid var(--m-hair); }
:root[data-theme="dark"] tbody tr:hover{ background:var(--m-well); }
:root[data-theme="dark"] input[type=checkbox]{ accent-color:var(--m-yellow); }
:root[data-theme="dark"] select option{ background:#1c201e; color:#f1eee8; }
:root[data-theme="dark"] .btn.select-mode-btn.acc{ background:var(--m-yellow); color:#1a1a1a; border-color:transparent; }
:root[data-theme="dark"] .pagehead-ico, :root[data-theme="dark"] .sy-topbar .sy-logo{ background:#000; }
/* Status-Pillen: gleicher Farbton, heller, getönter Grund (≥ 4.5:1 auf #111412) */
:root[data-theme="dark"] .pill, :root[data-theme="dark"] .frist-badge{ background:color-mix(in srgb, currentColor 16%, transparent); }
:root[data-theme="dark"] .pill.aktiv, :root[data-theme="dark"] .frist-badge.green{ color:#6cc59a; }
:root[data-theme="dark"] .pill.reparatur, :root[data-theme="dark"] .frist-badge.orange{ color:#f0a24a; }
:root[data-theme="dark"] .pill.verloren, :root[data-theme="dark"] .frist-badge.red{ color:#f08a68; }
:root[data-theme="dark"] .pill.magazin{ color:#a9bccf; }
:root[data-theme="dark"] .pill.ausgemustert{ color:#a3a6a0; }
:root[data-theme="dark"] .pill.alt{ color:#b9a3e6; }
:root[data-theme="dark"] .pill.neu{ color:#6fa8e8; }
:root[data-theme="dark"] .warncard.hot{ border-color:var(--m-bad); }

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ transition-duration:0s !important; animation-duration:0s !important; }
}

/* „Zur Startseite“ und BETA im Menüfuß wie PENSUM (≤ 900 px: Schublade; dort sind beta.js-Band und der Standardknopf per index.html ausgeblendet) */
.drawer-beta{ display:none; }
@media (max-width:900px){
  #side #sentynel-back{ display:inline-flex !important; position:static !important; width:auto !important; justify-content:center; margin:6px 10px 0 !important; min-height:40px; }
  .drawer-beta{ align-self:flex-start; 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; }
  html:has(> #sentynel-stage-banner) .drawer-beta{ display:inline-flex; }   /* BETA nur auf STAGE */
}
@media (max-width:640px){
  .drawer-beta{ align-self:center; margin:0 auto; padding:3px 10px; border-radius:var(--m-r-pill); }
}