/* ============================================================
     HKL Standards — Frontend v4
     NEU ggü. v3: Kategorien (Naturen) sind KONFIGURIERBAR.
     Prinzip "Trennung von Konfiguration und Code":
       - DEFAULT_NAT  = Voreinstellungen im Code (Standardwerte)
       - Verwaltung   = Editor (ändert die Konfiguration ohne Code)
       - localStorage = lokaler Zwischenspeicher (offline-first)
       - Server-State = zentrale Persistenz (siehe sync-Baustein unten):
         Änderungen werden zusätzlich server-seitig unter /api/state
         gespeichert und über alle Geräte hinweg geteilt.
       - applyNatConfig() schreibt die Farben als CSS-Variablen,
         die App liest sie überall. Eine Änderung wirkt sofort überall.
     ============================================================ */
  :root {
    --bg:#0c1116; --surface:#141d26; --surface-2:#1c2733; --surface-3:#243140;
    --line:#2b3a4c; --line-soft:#212e3d; --text:#e8eef5; --text-dim:#93a4b8; --text-faint:#8296ab;
    --accent:#3d9be0; --accent-deep:#1b73b8;
    /* Natur-Farben: nur Erst-Anzeige. Zur Laufzeit von applyNatConfig() überschrieben. */
    --n-material:#34c98a; --n-geraet:#e8b34a; --n-medikament:#bd8ce8; --n-hinweis:#7f95ab; --n-ueberschrift:#3d9be0;
    --size:#21c1d6; --size-bg:rgba(33,193,214,.12); --size-bd:rgba(33,193,214,.34);
    --warn:#ef8f42; --danger:#e85d5d; --ok:#34c98a;
    --radius:15px; --tap:52px; --maxw:468px; --mono:"SF Mono","JetBrains Mono","Consolas",ui-monospace,monospace;
  }
  html[data-theme="light"] {
    --bg:#eceff3; --surface:#fff; --surface-2:#f2f5f9; --surface-3:#e7edf3;
    --line:#d2dce6; --line-soft:#e2e9f0; --text:#14212e; --text-dim:#526274; --text-faint:#5a6c7f;
    --accent:#1b73b8; --accent-deep:#145a96;
    --size:#0f97aa; --size-bg:rgba(15,151,170,.11); --size-bd:rgba(15,151,170,.30);
    --warn:#c56a15; --danger:#cc3b3b; --ok:#199467;
  }
  * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html,body { margin:0; padding:0; touch-action:manipulation; background:var(--bg); color:var(--text); font-family:"Segoe UI",system-ui,-apple-system,sans-serif; font-size:17px; line-height:1.45; overscroll-behavior-y:none; transition:background .25s,color .25s; }
  .app { max-width:var(--maxw); margin:0 auto; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; position:relative; }

  header.bar { position:sticky; top:0; z-index:50; background:var(--surface); border-bottom:1px solid var(--line); }
  .bar-row { display:flex; align-items:center; gap:10px; padding:11px 13px; }
  .icon-btn { width:44px; height:44px; flex:0 0 44px; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); color:var(--text); font-size:21px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; }
  .icon-btn:active { background:var(--surface-3); }
  .icon-btn[hidden] { display:none; }
  .bar-title { flex:1; min-width:0; }
  .bar-title h1 { margin:0; font-size:17px; font-weight:650; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* Server-Sync-Status: kleiner Punkt im Kopf. */
  .sync-dot { width:9px; height:9px; border-radius:50%; flex:0 0 9px; background:var(--text-faint); transition:background .2s; cursor:pointer; }
  /* Im "nur lokal"-Zustand wird der Punkt zum beschrifteten Pill: Status ist
     damit ohne Hover erkennbar (Touch!) und nicht nur über Farbe codiert. */
  .sync-dot.local { width:auto; height:auto; flex:0 0 auto; border-radius:9px; padding:3px 9px; font-size:11px; font-weight:800; letter-spacing:.02em; color:#1d1206; }
  .sync-dot.ok { background:var(--ok); }
  .sync-dot.saving { background:var(--accent); }
  .sync-dot.local { background:var(--warn); }
  .sync-dot.err { background:var(--danger); }
  .bar-title .crumb { font-size:12px; color:var(--text-dim); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }


  .search-wrap { padding:0 13px 11px; }
  .search { display:flex; align-items:center; gap:9px; background:var(--surface-2); border:1px solid var(--line); border-radius:11px; padding:0 12px; height:45px; }
  .search:focus-within { border-color:var(--accent); }
  .search svg { flex:0 0 17px; opacity:.55; }
  .search input { flex:1; border:none; background:transparent; color:var(--text); font-size:15px; outline:none; height:100%; }
  .search input::placeholder { color:var(--text-faint); }
  /* Suche innerhalb eines Standards */
  .std-search { display:flex; align-items:center; gap:9px; background:var(--surface-2); border:1px solid var(--line); border-radius:11px; padding:0 12px; height:44px; margin-bottom:11px; }
  .std-search svg { flex:0 0 16px; width:16px; height:16px; opacity:.55; }
  .std-search input { flex:1; border:none; background:transparent; color:var(--text); font-size:15px; outline:none; height:100%; }
  .std-search input::placeholder { color:var(--text-faint); }
  .srch-count { font-size:12px; color:var(--text-dim); margin:2px 2px 9px; }
  .srch-hit { border:1px solid var(--line-soft); border-radius:10px; padding:11px 12px; margin-bottom:7px; cursor:pointer; background:var(--surface); }
  .srch-hit:active { background:var(--surface-2); }
  .srch-hit .sh-name { font-size:15px; font-weight:600; }
  .srch-hit .sh-ctx { font-size:12px; color:var(--text-dim); margin-top:3px; }
  .gs-std { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--text-dim); margin:14px 2px 8px; }
  .gs-badge { flex:0 0 auto; font-size:10px; font-weight:700; color:var(--accent); background:rgba(61,155,224,.13); padding:2px 8px; border-radius:6px; }
  .gl-card { display:flex; align-items:flex-start; gap:10px; border:1px solid var(--line-soft); border-radius:11px; padding:11px 13px; margin-bottom:7px; background:var(--surface); }
  .gl-main { flex:1; min-width:0; }
  .gl-term { font-size:15px; font-weight:700; color:var(--text); }
  .gl-def { font-size:13.5px; line-height:1.5; color:var(--text-dim); margin-top:3px; }
  .gl-actions { flex:0 0 auto; display:flex; gap:5px; }
  .gl-actions button { width:32px; height:32px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); color:var(--text-dim); font-size:13px; cursor:pointer; }
  .gl-actions button:active { background:var(--surface-3); }
  .propose-target { font-size:15px; font-weight:600; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:9px 12px; }
  .sg-card { border:1px solid var(--line); border-radius:12px; padding:12px 13px; margin-bottom:9px; background:var(--surface); }
  .sg-card.accepted { opacity:.72; border-color:var(--ok); }
  .sg-card.rejected { opacity:.6; }
  .sg-head { display:flex; align-items:center; gap:8px; }
  .sg-entry { flex:1; font-size:15px; font-weight:700; }
  .sg-status { flex:0 0 auto; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:2px 8px; border-radius:6px; }
  .sg-status.accepted { color:var(--ok); background:rgba(52,201,138,.14); }
  .sg-status.rejected { color:var(--danger,#e0795f); background:rgba(224,121,95,.14); }
  .sg-del { flex:0 0 auto; width:30px; height:30px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); cursor:pointer; }
  .sg-to { font-size:14px; font-weight:600; color:var(--accent); margin-top:5px; }
  .sg-note { font-size:13.5px; line-height:1.5; color:var(--text-dim); margin-top:5px; }
  .sg-by { font-size:11px; color:var(--text-faint); margin-top:6px; }
  .sg-vote { display:flex; gap:8px; margin-top:9px; }
  .sg-vbtn { min-height:36px; padding:6px 14px; font-size:13px; font-weight:600; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); color:var(--text-dim); cursor:pointer; font-variant-numeric:tabular-nums; }
  .sg-vbtn.on { border-color:var(--accent); color:var(--accent); background:rgba(61,155,224,.1); }
  .sg-admin { display:flex; gap:8px; margin-top:10px; }
  .sg-admin .btn { flex:1; min-height:40px; }
  .std-meta-line { font-size:12px; color:var(--text-dim); background:var(--surface); border:1px solid var(--line-soft); border-radius:9px; padding:8px 12px; margin-bottom:12px; }
  .entry.flash { animation:hklflash 1.6s ease-out; }
  @keyframes hklflash { 0%,20% { box-shadow:0 0 0 3px var(--accent); } 100% { box-shadow:0 0 0 0 transparent; } }
  /* Hinweis-Banner (wie ein Eintrag, ohne Checkbox, deutlich abgesetzt, frei einfärbbar) */
  .hint-banner { display:flex; align-items:flex-start; gap:10px; background:var(--surface-2); border:1.5px dashed var(--warn); border-radius:11px; padding:11px 13px; margin-bottom:8px; }
  .hint-banner.filled { background:var(--e-fill); border-style:solid; border-color:var(--e-fill-bd); }
  .hint-banner.filled .hb-text, .hint-banner.filled .hb-ico { color:var(--e-fill-text); }
  .hint-banner .hb-ico { flex:0 0 auto; font-size:17px; line-height:1.35; }
  .hint-banner .hb-text { flex:1; min-width:0; font-size:14px; line-height:1.45; font-weight:500; }
  .hint-banner .hint-actions { display:flex; gap:4px; flex:0 0 auto; }
  .hint-banner .hint-actions button { width:30px; height:30px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--text-dim); font-size:13px; cursor:pointer; }
  .hint-banner.filled .hint-actions button { background:transparent; border-color:var(--e-fill-text); color:var(--e-fill-text); }
  .add-hint-btn { display:block; width:100%; padding:9px; margin-bottom:11px; border:1px dashed var(--line); border-radius:9px; background:transparent; color:var(--text-dim); font-size:13px; font-weight:600; cursor:pointer; }
  .add-hint-btn:active { background:var(--surface-2); }
  textarea.loc-input { resize:vertical; min-height:72px; font-family:inherit; line-height:1.4; }
  .search .clear { background:none; border:none; color:var(--text-dim); font-size:20px; cursor:pointer; padding:4px; display:none; }
  .search .clear.show { display:block; }

  main { flex:1; overflow-y:auto; padding:13px; padding-bottom:44px; -webkit-overflow-scrolling:touch; }
  .screen { display:none; }
  .screen.active { display:block; animation:fade .18s ease; }
  @keyframes fade { from { opacity:0; transform:translateY(4px);} to { opacity:1; transform:none; } }

  .grp { font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--text-faint); margin:17px 4px 8px; display:flex; align-items:center; gap:8px; }
  .grp:first-child { margin-top:2px; }
  .grp .ln { flex:1; height:1px; background:var(--line); }

  .std { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 15px; margin-bottom:8px; display:flex; align-items:center; gap:12px; cursor:pointer; min-height:var(--tap); transition:border-color .15s,transform .05s; }
  .std:active { border-color:var(--accent); transform:scale(.995); }
  .std-badge { font-size:10.5px; font-weight:700; letter-spacing:.03em; padding:4px 8px; border-radius:7px; flex:0 0 auto; background:var(--surface-3); color:var(--text-dim); }
  .std-main { flex:1; min-width:0; }
  .std-title { font-weight:620; font-size:15.5px; letter-spacing:-.01em; }
  .std-file { font-size:12px; color:var(--text-faint); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .std .chev { color:var(--text-faint); font-size:22px; flex:0 0 auto; }

  .rub { background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--n-hinweis); border-radius:13px; padding:15px; margin-bottom:8px; cursor:pointer; display:flex; align-items:center; gap:13px; min-height:var(--tap); transition:transform .05s; }
  .rub:active { transform:scale(.995); }
  .rub.material { border-left-color:var(--n-material); }
  .rub.geraete { border-left-color:var(--n-geraet); }
  .rub.sonstige { border-left-color:var(--n-hinweis); }
  .rub-ico { width:40px; height:40px; flex:0 0 40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; background:var(--surface-2); }
  .rub-main { flex:1; min-width:0; }
  .rub-name { font-weight:620; font-size:15px; }
  .rub-meta { font-size:11.5px; color:var(--text-dim); margin-top:2px; }
  .rub-pill { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:3px 7px; border-radius:5px; flex:0 0 auto; }
  .pill-material { background:rgba(52,201,138,.15); color:var(--n-material); }
  .pill-geraete { background:rgba(232,179,74,.15); color:var(--n-geraet); }
  .pill-sonstige { background:rgba(127,149,171,.15); color:var(--n-hinweis); }

  .sub-head { font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); margin:20px 2px 9px; }

  .uksec { margin:14px 0 4px; border-radius:12px; overflow:hidden; border:1px solid var(--line-soft); }
  .uksec-head { display:flex; align-items:center; gap:10px; padding:11px 13px; cursor:pointer; background:var(--surface-2); border-left:4px solid var(--uk,#7f95ab); }
  .uksec-head:active { background:var(--surface-3); }
  .uksec-ico { font-size:17px; flex:0 0 auto; }
  .uksec-name { flex:1; min-width:0; font-size:13.5px; font-weight:700; color:var(--text); }
  .uksec-count { font-size:11px; color:var(--text-faint); font-variant-numeric:tabular-nums; }
  .uksec-arrow { font-size:13px; color:var(--text-dim); transition:transform .2s; }
  .uksec.collapsed .uksec-arrow { transform:rotate(-90deg); }
  .uksec-body { padding:8px; }
  .uksec.collapsed .uksec-body { display:none; }

  .entry { background:var(--surface); border:1.5px solid var(--e-col,var(--line-soft)); border-radius:11px; margin-bottom:7px; }
  /* Frei gewählte Füllfarbe: ganzer Eintrag eingefärbt, Text/Icons per Kontrast lesbar. */
  .entry.filled { background:var(--e-fill); border-color:var(--e-fill-bd); }
  .entry.filled .e-text, .entry.filled .e-ico, .entry.filled .imp-star, .entry.filled .entry-edit-btn { color:var(--e-fill-text); }
  .entry.filled .chk { border-color:var(--e-fill-text); color:var(--e-fill-text); }
  .entry.filled .entry-edit-btn { background:transparent; border-color:var(--e-fill-text); }
  .entry-row { display:flex; align-items:flex-start; gap:10px; padding:11px 12px; cursor:pointer; min-height:var(--tap); }
  .entry-row:active { background:var(--surface-2); }
  .chk { width:26px; height:26px; flex:0 0 26px; border-radius:8px; margin-top:2px; border:2px solid var(--line); background:transparent; display:flex; align-items:center; justify-content:center; font-size:16px; color:transparent; transition:all .12s; }
  .entry.done .chk { background:var(--ok); border-color:var(--ok); color:#06210f; }
  .entry.done .e-text { color:var(--text-faint); text-decoration:line-through; }

  .mbox { min-width:40px; height:33px; flex:0 0 40px; border-radius:9px; margin-top:1px; background:var(--surface-3); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:800; font-size:15.5px; color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
  .mbox.empty { background:transparent; border-color:transparent; }

  .e-ico { flex:0 0 19px; font-size:14px; margin-top:3px; opacity:.85; text-align:center; }
  .e-main { flex:1; min-width:0; }
  .e-top { display:flex; align-items:baseline; gap:7px; }
  .e-text { font-size:15px; font-weight:500; line-height:1.34; flex:1; }
  .conf { flex:0 0 auto; font-size:13px; color:var(--warn); cursor:help; }
  .edited-mark { flex:0 0 auto; font-size:12px; color:var(--accent); cursor:help; }
  .entry-edit-btn { flex:0 0 auto; width:30px; height:30px; margin:-4px -4px -4px 0; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); color:var(--text-dim); font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; align-self:flex-start; transition:background .15s,color .15s; }
  .entry-edit-btn:active { background:var(--surface-3); }
  /* Sichtbarer Aktions-Einstieg für ALLE (Admin: Schnellmenü, sonst Vorschlag).
     Der Long-Press bleibt als Abkürzung — Gesten ergänzen, ersetzen nie (HIG). */
  .entry-menu-btn { flex:0 0 auto; width:30px; height:30px; margin:-4px -4px -4px 0; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); color:var(--text-dim); font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; align-self:flex-start; transition:background .15s,color .15s; }
  .entry-menu-btn:active { background:var(--surface-3); }
  .entry.filled .entry-menu-btn { background:transparent; border-color:var(--e-fill-text); color:var(--e-fill-text); }
  .entry-edit-btn.edited { color:var(--accent); border-color:var(--accent); }
  .entry-why-btn { flex:0 0 auto; width:30px; height:30px; margin:-4px 0 -4px 0; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; align-self:flex-start; transition:background .15s,transform .15s; }
  .entry-why-btn:active { background:var(--surface-3); }
  .entry.show-why .entry-why-btn { background:var(--size-bg,rgba(232,179,74,.16)); transform:scale(1.05); }
  .entry.filled .entry-why-btn { border-color:var(--e-fill-text); }
  .e-why { display:none; padding:0 12px 12px 12px; font-size:13.5px; line-height:1.5; color:var(--text-dim); }
  .entry.show-why .e-why { display:block; animation:whyIn .18s ease-out; }
  .entry.filled .e-why { color:var(--e-fill-text); opacity:.92; }
  .ew-lbl { display:inline-block; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--warn); background:rgba(239,143,66,.13); padding:1px 7px; border-radius:5px; margin-right:7px; vertical-align:1px; }
  @keyframes whyIn { from{ opacity:0; transform:translateY(-3px); } to{ opacity:1; transform:none; } }
  .chk-reset { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 13px; margin-bottom:9px; background:var(--surface); border:1px solid var(--line); border-radius:11px; }
  .cr-count { font-size:12.5px; font-weight:600; color:var(--ok); }
  .cr-btn { flex:0 0 auto; min-height:36px; padding:7px 13px; font-size:12.5px; font-weight:600; color:var(--text-dim); background:var(--surface-2); border:1px solid var(--line); border-radius:9px; cursor:pointer; }
  .cr-btn:active { background:var(--surface-3); }
  /* Die Angabenzeile hat die volle Breite des Eintrags (siehe ui/detail.js).
     Der linke Einzug hält sie in Flucht mit dem Namen darüber, ohne dass
     ihre Bänder in einer 131-px-Spalte umbrechen müssten. */
  .e-meta { display:flex; flex-wrap:wrap; gap:5px; align-items:center; padding:0 12px 10px 12px; margin-top:-3px; cursor:pointer; }
  .tag { font-size:11px; font-weight:600; padding:2px 8px; border-radius:6px; white-space:nowrap; }
  .tag-spec { color:var(--accent); background:rgba(61,155,224,.13); }
  .tag-loc { color:var(--n-material); background:rgba(52,201,138,.13); }
  .tag-loc.missing { color:var(--text-faint); background:var(--surface-2); }
  .tag-zusatz { color:var(--warn); background:rgba(239,143,66,.13); }
  .size-badge { font-family:var(--mono); font-size:11.5px; font-weight:700; color:var(--size); background:var(--size-bg); border:1px solid var(--size-bd); padding:1px 7px; border-radius:6px; display:inline-flex; align-items:center; gap:4px; }
  .size-badge .st { font-family:"Segoe UI",sans-serif; font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; opacity:.68; }
  .e-thumb { width:34px; height:34px; flex:0 0 34px; border-radius:8px; margin-top:1px; background:var(--surface-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:15px; overflow:hidden; }
  .e-thumb img { width:100%; height:100%; object-fit:cover; }
  .entry.step .e-text { font-weight:500; }

  .legend { background:var(--surface); border:1px solid var(--line); border-radius:12px; margin-bottom:12px; overflow:hidden; }
  .legend summary { padding:12px 14px; font-size:12.5px; font-weight:600; color:var(--text-dim); cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; }
  .legend summary::-webkit-details-marker { display:none; }
  .legend[open] summary { border-bottom:1px solid var(--line-soft); }
  .legend-body { padding:12px 14px; display:flex; flex-direction:column; gap:9px; }
  .lg-row { display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--text-dim); }
  .lg-swatch { width:13px; height:13px; border-radius:4px; flex:0 0 13px; }
  .lg-size { font-family:var(--mono); font-size:10.5px; font-weight:700; color:var(--size); background:var(--size-bg); border:1px solid var(--size-bd); padding:1px 6px; border-radius:5px; }
  .lg-mbox { font-family:var(--mono); font-weight:800; font-size:11px; background:var(--surface-3); border:1px solid var(--line); border-radius:5px; padding:1px 6px; }

  .banner { background:linear-gradient(135deg,var(--surface),var(--surface-2)); border:1px solid var(--line); border-radius:var(--radius); padding:15px; margin-bottom:13px; }
  .banner h2 { margin:0 0 5px; font-size:16.5px; }
  .banner p { margin:0; color:var(--text-dim); font-size:13px; line-height:1.5; }
  .cost-banner { padding:12px 15px; }
  .cost-total { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
  .cost-lbl { font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--text-dim); }
  .cost-val { font-size:20px; font-weight:700; color:var(--size); }
  .cost-sub { margin-top:4px; font-size:12px; color:var(--text-faint); }
  .prog { margin-top:12px; }
  .prog-bar { height:7px; background:var(--surface-3); border-radius:5px; overflow:hidden; }
  .prog-fill { height:100%; width:0%; background:linear-gradient(90deg,var(--n-material),var(--accent)); transition:width .4s; }
  .prog-txt { font-size:11.5px; color:var(--text-dim); margin-top:6px; }

  .filter-row { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
  .filter-row button { flex:1; min-width:60px; padding:9px 6px; font-size:12px; font-weight:600; border-radius:9px; border:1px solid var(--line); background:var(--surface); color:var(--text-dim); cursor:pointer; }
  .filter-row button.on { background:var(--accent-deep); color:#fff; border-color:var(--accent); }

  .mat-row { display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--n-material); border-radius:12px; padding:10px 12px; margin-bottom:7px; cursor:pointer; min-height:var(--tap); }
  .mat-row:active { background:var(--surface-2); }
  .mat-thumb { width:44px; height:44px; flex:0 0 44px; border-radius:9px; background:var(--surface-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:18px; overflow:hidden; }
  .mat-thumb img { width:100%; height:100%; object-fit:cover; }
  .mat-main { flex:1; min-width:0; }
  .mat-name { font-weight:600; font-size:14.5px; line-height:1.3; }
  .mat-sub { font-size:11px; margin-top:3px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .dot { width:7px; height:7px; border-radius:50%; flex:0 0 7px; }
  .dot-ok { background:var(--ok); } .dot-open { background:var(--warn); }
  .mat-sub.ok { color:var(--ok); } .mat-sub.open { color:var(--warn); }
  .mat-count { font-size:10.5px; color:var(--text-faint); font-variant-numeric:tabular-nums; }

  .pcard { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:12px; }
  .pc-name { font-size:16.5px; font-weight:650; }
  .pc-ctx { font-size:11.5px; color:var(--text-dim); margin:3px 0 14px; }
  .flabel { font-size:11.5px; font-weight:650; color:var(--text-dim); margin-bottom:6px; letter-spacing:.02em; }
  .photo-zone { border:2px dashed var(--line); border-radius:12px; height:138px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--text-dim); cursor:pointer; margin-bottom:14px; background:var(--surface-2); overflow:hidden; }
  .photo-zone:active { border-color:var(--accent); }
  .photo-zone .ph-ico { font-size:28px; }
  .photo-zone .ph-sub { font-size:12px; }
  .loc-input { width:100%; padding:12px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); color:var(--text); font-size:15px; margin-bottom:13px; }
  .loc-input:focus { outline:none; border-color:var(--accent); }
  .info-field { background:var(--surface-2); border:1px solid var(--line-soft); border-radius:9px; padding:10px 12px; margin-bottom:13px; }
  .info-field .if-l { font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px; }
  .info-field .if-v { display:flex; flex-wrap:wrap; gap:5px; }
  .p-actions { display:flex; gap:9px; }
  .btn { flex:1; padding:13px; border-radius:11px; border:none; font-size:15px; font-weight:650; cursor:pointer; min-height:var(--tap); }
  .btn-sec { background:var(--surface-2); color:var(--text-dim); border:1px solid var(--line); }
  .btn-pri { background:var(--n-material); color:#06210f; }
  .btn-pri:active { filter:brightness(.93); }

  /* Formulare: Eintrag / Standard hinzufügen & bearbeiten (NEU) */
  .form-grp { margin-bottom:14px; }
  .form-grp:last-of-type { margin-bottom:6px; }
  .form-sel { width:100%; padding:12px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); color:var(--text); font-size:15px; }
  .form-sel:focus { outline:none; border-color:var(--accent); }
  .form-row { display:flex; gap:9px; }
  .form-row > .form-sel, .form-row > .loc-input { flex:1; margin-bottom:0; }
  .natpick { display:flex; flex-wrap:wrap; gap:6px; }
  .natpick button { padding:9px 12px; border-radius:9px; border:1px solid var(--line); background:var(--surface-2); font-size:13px; font-weight:650; cursor:pointer; }
  .natpick button.sel { border-color:currentColor; box-shadow:inset 0 0 0 1px currentColor; }
  .colorpick { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
  .colorpick .cp-sw { width:30px; height:30px; border-radius:8px; border:2px solid transparent; cursor:pointer; padding:0; }
  .colorpick .cp-sw.sel { border-color:var(--text); box-shadow:0 0 0 2px var(--bg) inset; }
  .colorpick .cp-none { padding:7px 11px; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); color:var(--text-dim); font-size:13px; cursor:pointer; }
  .colorpick .cp-none.sel { border-color:var(--accent); color:var(--text); }
  .colorpick .cp-inp { width:38px; height:32px; padding:0; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); cursor:pointer; }
  .add-entry-btn { width:100%; padding:13px; border-radius:11px; border:1px dashed var(--accent); background:var(--surface-2); color:var(--accent); font-size:14px; font-weight:650; cursor:pointer; margin:10px 0 4px; }
  .add-entry-btn:active { background:var(--surface-3); }
  .added-tag { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:2px 6px; border-radius:5px; background:rgba(61,155,224,.16); color:var(--accent); margin-left:6px; }

  .vsec { font-size:13px; font-weight:800; letter-spacing:.02em; color:var(--text); margin:20px 2px 9px; padding-bottom:6px; border-bottom:2px solid var(--line); }
  .vsec:first-of-type { margin-top:8px; }
  .vpanel { background:var(--surface); border:1px solid var(--line); border-radius:12px; margin-bottom:10px; overflow:hidden; }
  .vpanel summary { padding:12px 14px; color:var(--text); cursor:pointer; list-style:none; display:flex; align-items:center; gap:11px; }
  .vpanel summary::-webkit-details-marker { display:none; }
  .vpanel summary::after { content:'\25BE'; flex:0 0 auto; margin-left:2px; color:var(--text-faint); font-size:13px; line-height:1; transition:transform .15s ease; }
  .vpanel[open] summary::after { transform:rotate(180deg); }
  .vpanel summary .vp-ico { flex:0 0 auto; width:22px; text-align:center; font-size:19px; line-height:1.15; }
  .vpanel summary .vp-txt { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .vpanel summary .vp-title { font-size:14px; font-weight:700; color:var(--text); }
  .vpanel summary .vp-desc { font-size:11.5px; font-weight:400; line-height:1.35; color:var(--text-dim); }
  .vpanel summary .vp-badge { flex:0 0 auto; font-size:11px; font-weight:650; color:var(--text-dim); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:3px 9px; white-space:nowrap; }
  .vpanel summary .vp-hint { font-size:11px; color:var(--text-faint); font-weight:400; margin-left:auto; }
  .vpanel[open] summary { border-bottom:1px solid var(--line-soft); }
  .vpanel-body { padding:13px 14px; }
  .hint { color:var(--text-faint); font-size:11px; line-height:1.5; margin:8px 2px 0; }

  .tgl { display:flex; align-items:center; justify-content:space-between; padding:9px 0; font-size:14px; border-bottom:1px solid var(--line-soft); }
  .tgl:last-child { border-bottom:none; }
  .tgl input { appearance:none; width:44px; height:26px; border-radius:14px; background:var(--surface-3); border:1px solid var(--line); position:relative; cursor:pointer; transition:background .15s; flex:0 0 44px; }
  .tgl input:checked { background:var(--accent-deep); border-color:var(--accent); }
  .tgl input::after { content:''; position:absolute; width:20px; height:20px; border-radius:50%; background:#fff; top:2px; left:2px; transition:left .15s; }
  .tgl input:checked::after { left:20px; }

  /* Kategorien-Editor (NEU) */
  .natrow { border:1px solid var(--line-soft); border-radius:10px; padding:11px; margin-bottom:8px; border-left:4px solid #7f95ab; }
  .natrow-head { display:flex; align-items:center; gap:9px; }
  .natrow-head .nat-ico { font-size:19px; flex:0 0 auto; }
  .txtinp { flex:1; min-width:0; padding:8px 10px; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); color:var(--text); font-size:14px; font-weight:600; }
  .txtinp:focus { outline:none; border-color:var(--accent); }
  .colinp { width:40px; height:34px; flex:0 0 40px; padding:0; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); cursor:pointer; }
  .colinp::-webkit-color-swatch-wrapper { padding:3px; }
  .colinp::-webkit-color-swatch { border:none; border-radius:5px; }
  .nat-actions { display:flex; gap:6px; margin-top:9px; }
  .nat-actions button { font-size:11.5px; font-weight:600; padding:7px 10px; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); color:var(--text-dim); cursor:pointer; }
  .nat-actions button.danger-btn { color:var(--danger); border-color:rgba(232,93,93,.35); }
  .nat-foot { display:flex; gap:8px; margin-top:4px; }
  .nat-foot button { flex:1; padding:11px; border-radius:9px; border:1px solid var(--line); font-size:13px; font-weight:650; cursor:pointer; }
  .nat-foot .add-btn { background:var(--accent-deep); color:#fff; border-color:var(--accent); }
  .nat-foot .reset-btn { background:var(--surface-2); color:var(--text-dim); }

  /* Rubrik-Vorlagen-Matrix · Geltungsbereich-Auswahl · Panel-Erklärungen */
  .panel-help { margin:0 0 12px; padding:9px 11px; font-size:12.5px; line-height:1.5; color:var(--text-dim); background:var(--size-bg); border:1px solid var(--size-bd); border-radius:9px; }
  .natbesch { margin-top:8px; border-top:1px solid var(--line-soft); border-bottom:none; padding-bottom:0; }
  .tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:10px; }
  .rubmatrix { border-collapse:collapse; width:100%; font-size:12.5px; }
  .rubmatrix th, .rubmatrix td { border:1px solid var(--line-soft); padding:7px 8px; text-align:center; }
  .rubmatrix thead th { background:var(--surface-2); color:var(--text-dim); font-weight:650; white-space:nowrap; }
  .rubmatrix .rm-name { text-align:left; white-space:nowrap; font-weight:650; }
  .rubmatrix .rm-typ { display:block; font-size:10px; font-weight:400; color:var(--text-faint); }
  .rubmatrix .rm-scope { display:block; font-size:10px; font-weight:400; color:var(--warn); }
  .rubmatrix .rm-cell { cursor:pointer; min-width:34px; color:var(--ok); font-weight:700; user-select:none; }
  .rubmatrix .rm-cell.on { background:rgba(52,201,138,.14); }
  .rubmatrix .rm-cell:active { background:var(--surface-3); }
  .rubmatrix .rm-actions { white-space:nowrap; }
  .scope-pick { display:flex; flex-direction:column; gap:7px; margin-bottom:8px; }
  .scope-btn { text-align:left; padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--text); cursor:pointer; display:flex; flex-direction:column; gap:2px; }
  .scope-btn.sel { border-color:var(--accent); background:rgba(61,155,224,.12); }
  .scope-btn .scope-sub { font-size:11.5px; color:var(--text-dim); font-weight:400; }
  .grp-checks { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0; }
  .grpchk { display:flex; align-items:center; gap:6px; padding:7px 11px; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); font-size:13px; cursor:pointer; }
  .grpchk input { width:18px; height:18px; flex:0 0 18px; }

  .ukrow { border:1px solid var(--line-soft); border-radius:10px; padding:11px; margin-bottom:8px; border-left:4px solid var(--uk,#7f95ab); }
  .ukrow-head { display:flex; align-items:center; gap:9px; }
  .ukrow-head .uk-ico { font-size:16px; }
  .ukrow-head .uk-name { flex:1; min-width:0; font-size:14px; font-weight:650; }
  .ukrow-head .uk-count { font-size:11px; color:var(--text-faint); font-variant-numeric:tabular-nums; }
  .uk-swatches { display:flex; gap:6px; margin:10px 0 9px; flex-wrap:wrap; }
  .uk-sw { width:22px; height:22px; border-radius:6px; cursor:pointer; border:2px solid transparent; }
  .uk-sw.sel { border-color:var(--text); }
  .uk-actions { display:flex; gap:6px; }
  .uk-actions button { font-size:11.5px; font-weight:600; padding:7px 9px; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); color:var(--text-dim); cursor:pointer; }
  .uk-actions button.icon { flex:0 0 auto; width:34px; }

  .vwrow { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:13px; margin-bottom:8px; }
  .vwrow.done { opacity:.62; border-color:var(--line-soft); }
  .vw-txt { font-size:14.5px; font-weight:550; line-height:1.34; }
  .vw-ctx { font-size:11px; color:var(--text-faint); margin-top:4px; }
  .vw-lbl { font-size:11px; color:var(--text-dim); margin:11px 0 6px; font-weight:600; }
  .vw-set { display:flex; flex-wrap:wrap; gap:6px; }
  .vw-set button { font-size:11.5px; font-weight:600; padding:7px 10px; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); cursor:pointer; }
  .vw-set button.sel { border-color:currentColor; }
  .vw-sel { width:100%; padding:10px; border-radius:9px; border:1px solid var(--line); background:var(--surface-2); color:var(--text); font-size:13.5px; }
  .vw-foot { display:flex; gap:8px; margin-top:11px; }
  .vw-foot button { flex:1; padding:10px; border-radius:9px; border:1px solid var(--line); background:var(--surface-2); color:var(--text-dim); font-size:12.5px; font-weight:650; cursor:pointer; }
  .vw-foot button.done-btn { background:rgba(52,201,138,.14); color:var(--ok); border-color:rgba(52,201,138,.3); }
  .nat-chip { font-size:11px; font-weight:700; padding:3px 9px; border-radius:6px; }
  .vw-badge { display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:2px 7px; border-radius:5px; margin-left:7px; }
  .vw-badge.override { background:rgba(61,155,224,.16); color:var(--accent); }
  .vw-badge.reviewed { background:rgba(52,201,138,.16); color:var(--ok); }

  .empty { text-align:center; padding:46px 24px; color:var(--text-dim); }
  .empty .ei { font-size:38px; margin-bottom:12px; opacity:.5; }
  .empty h3 { margin:0 0 6px; font-size:15.5px; color:var(--text); font-weight:600; }
  .empty p { margin:0; font-size:13px; line-height:1.5; }
  .qr-hint { font-size:12px; color:var(--text-faint); text-align:center; padding:16px 14px; border-top:1px solid var(--line); margin-top:8px; line-height:1.5; }
  .foot { text-align:center; font-size:10.5px; color:var(--text-faint); padding:18px 14px; }

  .toast { position:fixed; left:50%; bottom:30px; transform:translateX(-50%) translateY(20px); background:var(--n-material); color:#06210f; font-weight:650; padding:11px 20px; border-radius:30px; font-size:13.5px; opacity:0; pointer-events:none; transition:all .3s; z-index:100; box-shadow:0 8px 24px rgba(0,0,0,.35); max-width:90%; }
  .toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
  .toast.err { background:var(--danger); color:#fff; }
  /* Wichtig-Markierung & Mengen-Hervorhebung (Schnellaktionen) */
  .entry.important { border-width:2.5px; }
  .entry.important .e-text { font-weight:650; }
  .imp-star { margin-right:3px; }
  .mbox.hi { background:var(--warn); border-color:var(--warn); color:#241205; }

  /* Bottom Sheet (Schnellmenü) */
  .sheet-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity .2s; z-index:200; }
  .sheet-overlay.show { opacity:1; pointer-events:auto; }
  .sheet { position:fixed; left:0; right:0; bottom:0; max-width:var(--maxw); margin:0 auto; background:var(--surface); border-top-left-radius:20px; border-top-right-radius:20px; border:1px solid var(--line); border-bottom:none; transform:translateY(115%); transition:transform .26s cubic-bezier(.2,.8,.2,1); z-index:201; padding:8px 14px calc(16px + env(safe-area-inset-bottom)); max-height:82vh; overflow-y:auto; }
  .sheet.show { transform:translateY(0); }
  .sheet-grip { width:38px; height:4px; border-radius:2px; background:var(--line); margin:6px auto 12px; }
  .sheet-title { font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint); margin:0 2px 4px; }
  .sheet-name { font-size:16px; font-weight:650; margin:0 2px 13px; line-height:1.3; }
  .sheet-act { display:flex; align-items:center; gap:12px; width:100%; padding:13px 12px; border:none; border-radius:12px; background:var(--surface-2); color:var(--text); font-size:15px; font-weight:550; cursor:pointer; margin-bottom:8px; text-align:left; }
  .sheet-act:active { background:var(--surface-3); }
  .sheet-act.danger { color:var(--danger); }
  .sheet-act .sa-ico { font-size:19px; flex:0 0 24px; text-align:center; }
  .sheet-act .sa-sub { display:block; font-size:11.5px; color:var(--text-dim); font-weight:400; margin-top:2px; }
  .sheet-group { display:flex; align-items:baseline; gap:8px; padding:12px 4px 5px; }
  .sheet-group:first-of-type { padding-top:2px; }
  .sheet-group .sg-t { font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim); }
  .sheet-group .sg-s { font-size:12px; color:var(--text-faint); font-weight:400; }
  .sheet-chips { display:flex; flex-wrap:wrap; gap:6px; margin:0 2px 12px; }
  .sheet-chips .schip, .schip { font-size:12px; font-weight:600; color:var(--text-dim); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:3px 10px; display:inline-block; }
  /* Regeln & Journal (Verwaltungspolitik) */
  .rule-row { display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); margin-bottom:8px; }
  .rule-row .rule-main { flex:1; min-width:0; font-size:14px; }
  .rule-row .rule-ctx { font-size:12px; color:var(--text-dim); margin-top:2px; overflow-wrap:anywhere; }
  .rule-row .rule-meta { font-size:12px; color:var(--text-faint); margin-top:5px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .rule-row .rule-undo { flex:0 0 auto; min-height:40px; padding:8px 11px; font-size:12.5px; }
  /* Inspektor „Warum so?" */
  .why-help { font-size:12.5px; color:var(--text-dim); line-height:1.45; margin:0 2px 12px; }
  .why-prop { font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim); margin:12px 2px 5px; }
  .why-row { display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; padding:9px 12px; border-radius:10px; background:var(--surface-2); margin-bottom:6px; font-size:13.5px; }
  .why-row .why-src { flex:0 0 auto; color:var(--text-dim); font-size:12.5px; min-width:96px; }
  .why-row .why-val { flex:1 1 auto; min-width:110px; overflow-wrap:anywhere; }
  .why-row .why-meta { flex:0 0 auto; font-size:11.5px; color:var(--text-faint); }
  .why-row.win { border:1px solid var(--accent); }
  .why-row.win .why-val { font-weight:700; }
  .why-row.lose .why-val { text-decoration:line-through; color:var(--text-faint); font-weight:400; }
  .why-row .why-undo { flex:0 0 auto; min-width:36px; min-height:32px; border:1px solid var(--line); border-radius:8px; background:var(--surface-3); color:var(--text); cursor:pointer; }
  .sheet-pick { display:flex; flex-direction:column; gap:8px; margin-bottom:4px; }
  .sheet-pick-btn { padding:13px; border-radius:11px; border:1px solid var(--line); background:var(--surface-2); color:var(--text); font-size:14.5px; font-weight:600; cursor:pointer; text-align:left; display:flex; align-items:center; gap:10px; }
  .sheet-pick-btn:active { background:var(--surface-3); }
  .sheet-pick-btn .ps-sub { font-size:11.5px; color:var(--text-dim); font-weight:400; }
  .sheet-colorrow { display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-bottom:10px; }
  .sheet-sw { width:34px; height:34px; border-radius:9px; cursor:pointer; border:2px solid var(--line-soft); }
  .sheet-colorinp { width:46px; height:38px; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); cursor:pointer; padding:2px; }
  .sheet-close { width:100%; padding:13px; border-radius:12px; background:transparent; color:var(--text-dim); border:1px solid var(--line); font-size:14px; font-weight:600; cursor:pointer; margin-top:4px; }

  /* ============================================================
     Responsive Layout — mobile / tablet / desktop
     Mobile-first (Default oben): eine Spalte, --maxw schmal (Handy).
     Auf breiteren Geräten wächst die Spaltenbreite (--maxw) und die
     Listen-Screens kacheln ihre Karten mehrspaltig (CSS-Grid).
     Reine Formulare, Detail- und Verwaltungs-Screens bleiben
     einspaltig (bessere Lesbarkeit, kein Umbau der Render-Struktur).
     Breakpoints: 640px Tablet-Hochkant · 960px Tablet quer/Laptop ·
     1280px großer Desktop (Breite gedeckelt → max. 3 Karten-Spalten).
     ============================================================ */
  /* ---- Handy zuerst, und zwar gemessen ----
     „Darstellung für Handys optimieren nicht Tablets, das war eine falsche
     Annahme!" — der Betreiber hat recht: Gearbeitet wird am Handy.

     Gemessen bei 360 px Fensterbreite, Materialrubrik, eine Zeile:
       Rand des Bildschirms       13 + 13
       Rahmen der Untergruppe      1 + 1  ·  ihr Innenrand   8 + 8
       Rahmen des Eintrags         1 + 1  ·  sein Innenrand 12 + 12
       vier Spaltenabstände       4 × 10
       Häkchen 26 · Menge 40 · Symbol 19 · Bild 34
       ⋯-Knopf 30 + 7 Abstand
       ────────────────────────────────────────────
       für den NAMEN blieben       98 px von 360 (27 %)

     Unter 430 px werden deshalb alle Innenränder und Abstände enger. Das ist
     kein Schönheitsputz: Jeder gesparte Pixel geht eins zu eins an den Namen,
     und ein Name, der nicht umbricht, spart eine ganze Zeilenhöhe.

     Die Trefferflächen bleiben unangetastet — Häkchen, ⋯-Knopf und alle
     Schalter behalten ihre 44 px. Enger werden LEERRÄUME, nicht Ziele. */
  @media (max-width:430px) {
    main { padding:9px; padding-bottom:44px; }
    .uksec-body { padding:5px; }
    .entry-row { padding:10px 9px; gap:7px; }
    .e-meta { padding:0 9px 9px 9px; }
    /* Eine leere Mengenspalte kostet 40 px in JEDER Zeile, in der gar keine
       Menge steht. Der Preis: Die Zahlen stehen nicht mehr exakt
       untereinander. Auf einem Handy ist der Name mehr wert als die Flucht
       einer Spalte — auf breiteren Geräten bleibt sie erhalten. */
    .mbox.empty { display:none; }
  }

  @media (min-width:640px) {
    :root { --maxw:620px; }
    main { padding:16px; padding-bottom:44px; }
  }
  @media (min-width:960px) {
    :root { --maxw:900px; }
    main { padding:20px; padding-bottom:48px; }
    /* App als zentriertes Panel absetzen statt „gestreckte" Handy-App. */
    .app { border-left:1px solid var(--line-soft); border-right:1px solid var(--line-soft); }
  }
  @media (min-width:1280px) { :root { --maxw:1080px; } }

  /* Listen-Screens kacheln ihre Karten ab Tablet-Breite mehrspaltig.
     Alles belegt per Default die volle Breite (Gruppen-Titel, Banner,
     Filter, Buttons, Leerzustand) — nur bekannte Karten-Typen belegen
     eine einzelne Zelle. So bleibt jeder unbekannte Inhalt sicher voll. */
  @media (min-width:640px) {
    #scr-standards.active, #scr-rubriken.active,
    #scr-catalog.active, #scr-care.active {
      display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
      gap:8px; align-content:start;
    }
    #scr-standards.active > *, #scr-rubriken.active > *,
    #scr-catalog.active > *, #scr-care.active > * { grid-column:1 / -1; }
    #scr-standards.active > .std,
    #scr-rubriken.active > .rub,
    #scr-catalog.active > .mat-row,
    #scr-care.active > .mat-row { grid-column:auto; margin-bottom:0; }
  }

  @media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }

  /* ---- Druck / PDF-Export ---- */
  .print-btn { margin-top:10px; }
  #printRoot { display:none; }
  @media print {
    .app, .toast, .sheet, .sheet-overlay { display:none !important; }
    html, body { background:#fff !important; }
    #printRoot { display:block; color:#111; font-family:"Segoe UI",system-ui,sans-serif; }
    .pr-doc { max-width:100%; }
    .pr-head { border-bottom:2px solid #111; padding-bottom:8px; margin-bottom:14px; }
    .pr-grp { font-size:10pt; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#555; }
    .pr-head h1 { font-size:20pt; margin:2px 0 4px; }
    .pr-ver { font-size:9.5pt; color:#333; }
    .pr-date { font-size:9pt; color:#666; }
    .pr-rub { break-inside:avoid; margin-bottom:12px; }
    .pr-rub h2 { font-size:12.5pt; background:#f0f0f0; padding:4px 8px; border-left:3px solid #111; margin:12px 0 6px; break-after:avoid; }
    .pr-uk { font-size:10pt; font-weight:700; color:#333; margin:7px 0 3px; break-after:avoid; }
    .pr-row { display:flex; gap:8px; align-items:baseline; font-size:10pt; padding:2px 0; border-bottom:1px dotted #ddd; break-inside:avoid; }
    .pr-menge { flex:0 0 34px; font-weight:700; font-variant-numeric:tabular-nums; }
    .pr-name { flex:0 0 auto; font-weight:600; }
    .pr-meta { flex:1; color:#555; font-size:9pt; text-align:right; }
    .pr-foot { margin-top:16px; padding-top:6px; border-top:1px solid #ccc; font-size:8pt; color:#888; text-align:center; }
    @page { margin:14mm 12mm; }
  }

/* ===== Etikett-Scanner ===== */
.scan-cam { position:fixed; inset:0; z-index:1200; background:#000; display:none; }
.scan-cam.show { display:block; }
.scan-cam video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
.scan-reticle { position:absolute; left:50%; top:44%; transform:translate(-50%,-50%);
  width:min(74vw,320px); height:min(74vw,320px); border:3px solid rgba(255,255,255,.92);
  border-radius:18px; box-shadow:0 0 0 100vmax rgba(0,0,0,.5); pointer-events:none; }
.scan-hint { position:absolute; left:0; right:0; top:calc(44% + min(37vw,160px) + 22px); text-align:center;
  color:#fff; font-size:15px; padding:0 24px; text-shadow:0 1px 4px rgba(0,0,0,.85); pointer-events:none; }
.scan-bar { position:absolute; left:0; right:0; bottom:0; display:flex; gap:12px; justify-content:center;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px)); background:linear-gradient(to top,rgba(0,0,0,.65),transparent); }
.scan-bar button { min-width:130px; min-height:48px; border-radius:12px; border:0; font-size:15px; font-weight:600; cursor:pointer; }
.scan-btn-cancel { background:rgba(255,255,255,.18); color:#fff; }
.scan-btn-torch { background:rgba(255,255,255,.18); color:#fff; }
.scan-btn-torch.on { background:#f5c542; color:#161616; }
.scan-cta { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:56px;
  margin:2px 0 14px; border:0; border-radius:14px; background:var(--accent); color:#fff; font-size:17px; font-weight:700; cursor:pointer; }
.scan-this { margin:10px 0; padding:12px 14px; border-radius:12px; background:var(--size-bg); border:1px solid var(--size-bd); font-size:14px; line-height:1.5; }
.scan-this b { font-weight:700; }
.gtin-mono { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; color:var(--text-faint); }
.exp-soon { color:#d98a1f; font-weight:600; }
.exp-expired { color:#d64545; font-weight:700; }

/* ===== On-Device-OCR ===== */
.ocr-cta { min-height:48px; font-size:15px; margin:2px 0 4px; }
.ocr-hint { font-size:12.5px; color:var(--text-faint); line-height:1.45; margin:0 2px 4px; }
.ocr-filled { outline:2px solid var(--size); outline-offset:1px; background:var(--size-bg); }
.ocr-busy { position:fixed; inset:0; z-index:1300; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.55); }
.ocr-busy.show { display:flex; }
.ocr-box { background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:16px; padding:22px 26px; text-align:center; min-width:200px; max-width:80vw; box-shadow:0 10px 40px rgba(0,0,0,.4); }
.ocr-spin { width:34px; height:34px; margin:0 auto 12px; border:3px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:ocr-spin 0.9s linear infinite; }
@keyframes ocr-spin { to { transform:rotate(360deg); } }
.ocr-msg { font-size:14px; font-weight:600; }

/* ===== Referenz-Katalog (Baustein 1) + Aufräum-Assistent (Baustein 2) ===== */
.cat-badge-unb { display:inline-block; font-size:11px; font-weight:800; color:#fff; background:var(--warn); border-radius:8px; padding:1px 7px; margin-right:6px; vertical-align:middle; }
.cat-badge-ok { display:inline-block; font-size:11px; font-weight:800; color:#fff; background:var(--ok); border-radius:8px; padding:1px 7px; margin-right:6px; vertical-align:middle; }
.cat-hit { border:1px solid var(--accent); background:rgba(80,140,255,.08); border-radius:14px; padding:12px 14px; margin:10px 0; }
.cat-hit-head { font-weight:800; margin-bottom:4px; }
.cat-hit-name { font-weight:700; }
.cat-src { font-size:12px; color:var(--muted,#8a93a5); margin-top:8px; word-break:break-word; }
.cat-info { border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin:12px 0; background:var(--surface-2); }
.cat-info-head { font-weight:800; margin-bottom:8px; }
.cl-card { background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:16px; margin:12px 0; }
.cl-pos { font-size:13px; color:var(--muted,#8a93a5); margin-bottom:10px; }
.cl-roh { margin-bottom:12px; }
.cl-roh-t { font-size:15px; font-weight:600; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-top:4px; }
.cl-warn { background:rgba(224,90,90,.12); border:1px solid var(--warn); border-radius:12px; padding:10px 12px; margin-bottom:12px; font-size:14px; }
.cl-fields { display:flex; flex-direction:column; gap:10px; }
.cl-field { display:flex; flex-direction:column; }
.cl-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.cl-actions .btn { flex:1 1 auto; }

/* ═══════════ Foto-Detailansicht (Lightbox) ═══════════ */
.lb { position:fixed; inset:0; z-index:1200; background:rgba(0,0,0,.94); display:none; flex-direction:column; }
.lb.show { display:flex; }
.lb-bar { display:flex; align-items:center; gap:8px; padding:10px 12px; color:#fff; }
.lb-cap { flex:1; font-size:13px; opacity:.85; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-btn { width:42px; height:42px; border-radius:11px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; font-size:19px; font-weight:700; }
.lb-stage { flex:1; overflow:hidden; display:flex; align-items:center; justify-content:center; touch-action:none; }
.lb-img { max-width:100%; max-height:100%; object-fit:contain; transform-origin:center center; transition:transform .08s linear; cursor:zoom-in; user-select:none; -webkit-user-drag:none; }
.lb-hint { text-align:center; color:rgba(255,255,255,.6); font-size:12px; padding:10px 12px 16px; }

/* ═══════════ Übersicht: Bereichs-Umschalter & Sortierung ═══════════ */
.segbar { display:flex; gap:8px; margin:0 0 10px; }
.seg-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:12px 10px; border-radius:13px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--text); font-size:14.5px; font-weight:700; }
.seg-btn.on { border-color:var(--accent); background:rgba(61,155,224,.14); color:var(--accent); }
.seg-n { font-size:11.5px; font-weight:800; opacity:.75; background:rgba(128,128,128,.22); border-radius:8px; padding:1px 6px; }
.sortbar { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; margin:0 0 12px; -webkit-overflow-scrolling:touch; }
.sortchip { flex:0 0 auto; padding:7px 11px; border-radius:999px; border:1px solid var(--line); background:var(--surface-2);
  color:var(--text); font-size:12.5px; font-weight:600; white-space:nowrap; }
.sortchip.on { border-color:var(--accent); background:rgba(61,155,224,.14); color:var(--accent); }
.fav-btn { flex:0 0 auto; width:38px; height:38px; border:0; background:transparent; color:var(--text-dim); font-size:19px; }
.fav-btn.on { color:#f5b301; }
.std-kost { flex:0 0 auto; font-size:12.5px; font-weight:800; color:var(--accent); margin-right:4px; }
.std-badge.nf { background:rgba(224,90,90,.18); color:var(--warn); }
.std.std-nf { border-left:3px solid var(--warn); }

/* ═══════════ Anleitungen ═══════════ */
.g-nf { border:1px solid var(--warn); background:rgba(224,90,90,.12); color:var(--warn); font-weight:700;
  border-radius:13px; padding:11px 14px; margin-bottom:10px; }
.g-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.tag-iv { background:rgba(61,155,224,.14); color:var(--accent); }
.g-step { display:flex; gap:11px; align-items:flex-start; background:var(--surface-2); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:14px; padding:13px 14px; margin-bottom:9px; }
.g-step.done { opacity:.55; }
.g-step.done .g-text { text-decoration:line-through; }
.g-num { flex:0 0 30px; width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; }
.g-body { flex:1; min-width:0; }
.g-text { font-size:15px; line-height:1.45; }
.g-img { margin-top:9px; }
.g-img img { width:100%; max-height:230px; object-fit:cover; border-radius:11px; cursor:zoom-in; }
.g-warn { margin-top:9px; border-radius:10px; padding:8px 11px; font-size:13.5px;
  background:rgba(224,90,90,.12); border:1px solid var(--warn); color:var(--text); }
.g-tipp { margin-top:9px; border-radius:10px; padding:8px 11px; font-size:13.5px;
  background:rgba(61,155,224,.10); border:1px solid var(--line); color:var(--text); }
.g-check { display:flex; align-items:center; gap:9px; margin:10px 0; font-size:14px; }
.g-check input { width:20px; height:20px; }
.gedit-step { border:1px solid var(--line); border-radius:13px; padding:12px; margin-bottom:11px; background:var(--surface-2); }
.ges-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
.ges-tools { display:flex; gap:5px; }
.ges-photo { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:9px 0; }
.ges-photo img { width:84px; height:64px; object-fit:cover; border-radius:9px; cursor:zoom-in; }
.gedit-step .loc-input, .gedit-step textarea { margin-bottom:7px; }

/* ═══════════ Pop-up-Dialoge ═══════════ */
.pop-ov { position:fixed; inset:0; z-index:1150; background:rgba(0,0,0,.62); display:none;
  align-items:center; justify-content:center; padding:18px; }
.pop-ov.show { display:flex; }
.pop-box { width:100%; max-width:430px; max-height:88vh; overflow-y:auto; background:var(--surface);
  border:1px solid var(--line); border-radius:18px; padding:18px 19px; box-shadow:0 18px 60px rgba(0,0,0,.5); }
.pop-box.pop-warnung { border-color:var(--warn); }
.pop-box.pop-info { border-color:var(--accent); }
.pop-head { display:flex; align-items:center; gap:9px; font-size:17px; font-weight:800; margin-bottom:9px; }
.pop-ico { font-size:20px; }
.pop-text { font-size:14.5px; line-height:1.5; color:var(--text); margin-bottom:12px; }
.pop-felder { margin-bottom:14px; }
.pop-actions { display:flex; gap:9px; }
.pop-actions .btn { flex:1; }
.pf-row { border:1px solid var(--line); border-radius:11px; padding:11px; margin-bottom:9px; background:var(--surface-2); }
.pf-head { display:flex; align-items:center; justify-content:space-between; font-size:12.5px; font-weight:800;
  color:var(--text-dim); margin-bottom:8px; }
.pf-row .loc-input, .pf-row .form-sel { margin-bottom:7px; }
.pc-sec { font-size:12.5px; font-weight:800; color:var(--accent); letter-spacing:.04em; text-transform:uppercase;
  margin:18px 0 9px; padding-top:12px; border-top:1px solid var(--line); }

/* ═══════════ Arzt-Varianten ═══════════ */
.vartabs { display:flex; gap:7px; overflow-x:auto; padding-bottom:5px; margin-bottom:8px; }
.vtab { flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:9px 13px;
  border-radius:12px; border:1px solid var(--line); background:var(--surface-2); color:var(--text); text-align:left; }
.vtab.on { border-color:var(--vcol,var(--accent)); background:color-mix(in srgb, var(--vcol,#3d9be0) 16%, transparent); }
.vtab-l { font-size:14px; font-weight:700; }
.vtab-s { font-size:11px; opacity:.7; }
.var-admin { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.vlink { border:0; background:transparent; color:var(--accent); font-size:12.5px; font-weight:700; padding:4px 0; }
.var-note { border-left:3px solid var(--vcol,#8b5cf6); background:color-mix(in srgb, var(--vcol,#8b5cf6) 10%, transparent);
  border-radius:0 11px 11px 0; padding:9px 12px; font-size:13px; margin-bottom:11px; }
.var-badge { display:inline-block; margin-left:7px; padding:1px 7px; border-radius:7px; font-size:10.5px; font-weight:800;
  color:#fff; background:var(--vcol,#8b5cf6); vertical-align:middle; }
.tag-var { background:color-mix(in srgb, var(--vcol,#8b5cf6) 18%, transparent); color:var(--text);
  border:1px solid var(--vcol,#8b5cf6); }
.entry.var-changed { box-shadow:inset 3px 0 0 0 var(--vcol,#8b5cf6); }
.var-extra { border:1px dashed var(--vcol,#8b5cf6); border-radius:14px; padding:11px; margin-top:12px; }
.vx-head { font-size:12.5px; font-weight:800; color:var(--vcol,#8b5cf6); margin-bottom:9px; }
.ve-row { border:1px solid var(--line); border-radius:12px; padding:11px; margin-bottom:9px; background:var(--surface-2); }
.ve-row.ve-hidden { opacity:.55; }
.ve-row.ve-add { border-style:dashed; border-color:var(--accent); }
.ve-base { font-size:14px; font-weight:700; margin-bottom:8px; }
.ve-m { font-size:12px; font-weight:600; opacity:.7; }
.ve-fields { display:flex; flex-direction:column; gap:7px; }
.ve-fields .loc-input { margin:0; }

/* ═══════════ Suche: große Typ-Trenner ═══════════ */
.gs-sect { display:flex; align-items:center; gap:9px; margin:22px 0 10px; padding:11px 13px; border-radius:13px;
  background:var(--surface-2); border:1px solid var(--line); border-left:4px solid var(--accent); }
.gs-sect:first-of-type { margin-top:12px; }
.gs-sect-ico { font-size:18px; }
.gs-sect-t { font-size:15.5px; font-weight:800; letter-spacing:.02em; }
.gs-sect-s { margin-left:auto; font-size:12px; color:var(--text-dim); }
.sh-uses { margin-top:5px; font-size:12px; color:var(--accent); }

/* ═══════════ Material-Zentrale ═══════════ */
.mc-tabs { display:flex; gap:6px; margin:0 0 14px; overflow-x:auto; padding-bottom:4px; }
.mc-tab { flex:1 0 auto; display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 12px;
  border-radius:13px; border:1px solid var(--line); background:var(--surface-2); color:var(--text); min-width:84px; }
.mc-tab.on { border-color:var(--accent); background:rgba(61,155,224,.14); color:var(--accent); }
.mc-tab-ico { font-size:17px; }
.mc-tab-l { font-size:12.5px; font-weight:700; }
.mc-tab-b { font-size:10.5px; font-weight:800; background:rgba(128,128,128,.24); border-radius:7px; padding:0 6px; }
.mc-tab.on .mc-tab-b { background:var(--accent); color:#fff; }
.mc-hint { border-left:3px solid var(--accent); background:rgba(61,155,224,.08); border-radius:0 11px 11px 0;
  padding:10px 13px; font-size:13.5px; line-height:1.5; margin-bottom:12px; }
.mc-actions { display:flex; gap:8px; flex-wrap:wrap; }
.mc-gap { flex:0 0 auto; font-size:11px; font-weight:800; color:var(--warn); background:rgba(224,90,90,.14);
  border-radius:8px; padding:2px 7px; margin-right:6px; }
.mc-tag { display:inline-block; font-size:11px; font-weight:700; border-radius:7px; padding:1px 7px; margin-right:5px;
  background:rgba(128,128,128,.18); color:var(--text); }
.mc-tag.ok { background:rgba(60,170,110,.16); color:var(--ok); }
.mc-tag.warn { background:rgba(224,90,90,.15); color:var(--warn); }
.mc-sec { display:flex; flex-direction:column; gap:2px; margin:20px 0 10px; padding-top:14px; border-top:1px solid var(--line); }
.mc-sec { font-size:15px; font-weight:800; }
.mc-sec-s { font-size:12px; font-weight:500; color:var(--text-dim); }
.mc-todo { display:flex; align-items:center; gap:11px; padding:13px 14px; margin-bottom:8px; border-radius:13px;
  border:1px solid var(--line); background:var(--surface-2); cursor:pointer; }
.mc-todo:hover { border-color:var(--accent); }
.mc-todo-ico { font-size:19px; flex:0 0 auto; }
.mc-todo-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.mc-todo-l { font-size:14.5px; font-weight:700; }
.mc-todo-s { font-size:12px; color:var(--text-dim); }
.mc-todo-n { flex:0 0 auto; font-size:13px; font-weight:800; color:#fff; background:var(--warn);
  border-radius:9px; padding:2px 9px; }
.mc-migr { border:1px dashed var(--accent); border-radius:13px; padding:13px; font-size:13.5px; line-height:1.55; }
.mc-migr-l { margin:8px 0 12px; padding-left:20px; }
.mc-migr .btn { margin-right:8px; margin-top:4px; }
.nat-label-static { flex:1; font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; }

/* ═══════════ Geltungsbereich (sichtbar, statt Nachfrage hinterher) ═══════════ */
.scopebar { border:1px solid var(--accent); background:rgba(61,155,224,.07); border-radius:14px;
  padding:11px 12px; margin-bottom:14px; }
.scope-head { font-size:12.5px; font-weight:800; color:var(--accent); letter-spacing:.03em; margin-bottom:8px; }
.scope-row { display:flex; gap:7px; overflow-x:auto; padding-bottom:3px; }
.scope-chip { flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  padding:8px 12px; border-radius:11px; border:1px solid var(--line); background:var(--surface); color:var(--text); }
.scope-chip.on { border-color:var(--accent); background:rgba(61,155,224,.16); }
.sc-l { font-size:13px; font-weight:700; white-space:nowrap; }
.sc-s { font-size:10.5px; opacity:.7; white-space:nowrap; }
.scopebar .hint { margin:8px 0 0; }
.scope-note { border-left:3px solid var(--accent); background:rgba(61,155,224,.08); border-radius:0 10px 10px 0;
  padding:9px 12px; font-size:12.5px; line-height:1.5; margin:10px 0 4px; }

/* ═══ Geführte Etikett-Erfassung (features/ocrwizard.js) ═══ */
.wiz { position:fixed; inset:0; z-index:1400; background:rgba(0,0,0,.62); display:none; align-items:flex-end; justify-content:center; }
.wiz.show { display:flex; }
.wiz-card { background:var(--surface); width:100%; max-width:560px; max-height:92vh; overflow:auto; border-radius:18px 18px 0 0; box-shadow:0 -8px 40px rgba(0,0,0,.4); }
@media (min-width:600px){ .wiz { align-items:center; } .wiz-card { border-radius:18px; } }
.wiz-body { padding:16px 18px 22px; }
.wiz-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.wiz-title { font-weight:800; font-size:15px; color:var(--text); flex:1; }
.wiz-x { flex:0 0 36px; height:36px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); color:var(--text); font-size:16px; cursor:pointer; }
.wiz-steps { display:flex; gap:6px; width:100%; }
.wiz-dot { flex:1; height:5px; border-radius:3px; background:var(--line); }
.wiz-dot.done { background:var(--accent); opacity:.5; }
.wiz-dot.on { background:var(--accent); }
.wiz-help { color:var(--text-dim); font-size:13.5px; line-height:1.5; margin:2px 0 12px; }
.wiz-shot { border-radius:12px; overflow:hidden; background:#000; margin-bottom:12px; max-height:220px; }
.wiz-shot img { width:100%; max-height:220px; object-fit:contain; cursor:zoom-in; }
.wiz-ok { border:1px solid var(--ok,#2e9e6b); background:rgba(46,158,107,.12); border-radius:12px; padding:10px 12px; margin-bottom:12px; color:var(--text); font-size:13.5px; }
.wiz-sub { color:var(--text-dim); font-size:12.5px; margin-top:4px; }
.wiz-actions { display:flex; gap:8px; margin-top:14px; }
.wiz-actions .btn { flex:1; min-height:48px; }
.wiz-link { display:block; width:100%; margin-top:10px; background:none; border:none; color:var(--accent); font-size:13.5px; text-decoration:underline; cursor:pointer; padding:8px; }
.wiz-busy { display:flex; flex-direction:column; align-items:center; gap:14px; padding:38px 0; }
.wiz-busy-msg { color:var(--text-dim); font-size:13.5px; text-align:center; }
.wiz-list { border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.wiz-row { display:grid; grid-template-columns:110px 1fr; gap:2px 10px; padding:9px 12px; border-bottom:1px solid var(--line); }
.wiz-row:last-child { border-bottom:none; }
.wiz-l { color:var(--text-dim); font-size:12px; text-transform:uppercase; letter-spacing:.4px; }
.wiz-v { font-weight:700; color:var(--text); word-break:break-word; }
.wiz-q { grid-column:2; color:var(--text-dim); font-size:11.5px; }
.wiz-wahl { margin-top:12px; }
.wiz-wahl-t { font-size:13px; color:var(--text-dim); margin-bottom:6px; }
.wiz-chip { border:1px solid var(--accent); background:var(--surface-2); color:var(--text); border-radius:999px; padding:7px 13px; margin:0 6px 6px 0; font-size:13px; cursor:pointer; font-family:ui-monospace,Menlo,monospace; }
.wiz-check { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:13.5px; color:var(--text); }
.wiz-note { color:var(--text-dim); font-size:12.5px; line-height:1.5; margin:10px 0 0; }
.wiz-leer { text-align:center; padding:22px 10px; color:var(--text-dim); }
.wiz-leer .ei { font-size:34px; }
.wiz-leer h3 { color:var(--text); margin:8px 0 6px; font-size:15px; }
/* Merkmalsteil der Prüfseite */
.wiz-merk-t { font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--text-dim); margin:14px 0 6px; }
.wiz-drop { border:none; background:none; color:var(--text-dim); font-size:12px; line-height:1; padding:2px 5px; margin-left:4px; cursor:pointer; border-radius:6px; }
.wiz-drop:hover, .wiz-drop:focus-visible { color:var(--warn); background:var(--surface-2); }
.wiz-chip.wiz-chip-skip { border-color:var(--line); color:var(--text-dim); font-family:inherit; }

/* ═══ Fotogalerie am Material (features/scanner.js) ═══ */
.gal-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:10px; margin-bottom:6px; }
.gal-item { position:relative; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface-2); }
.gal-item img { width:100%; height:104px; object-fit:cover; display:block; cursor:zoom-in; }
.gal-main { position:absolute; top:6px; left:6px; background:var(--accent); color:#fff; font-size:10.5px; font-weight:800; border-radius:6px; padding:2px 6px; }
.gal-tools { position:absolute; top:6px; right:6px; display:flex; gap:4px; }
.gal-tools button { width:28px; height:28px; border-radius:8px; border:none; background:rgba(0,0,0,.6); color:#fff; font-size:13px; cursor:pointer; line-height:1; }
.gal-cap { width:100%; border:none; border-top:1px solid var(--line); background:var(--surface); color:var(--text); font-size:12px; padding:6px 8px; }
.gal-add { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:140px; border:2px dashed var(--line); border-radius:12px; background:var(--surface-2); color:var(--text-dim); cursor:pointer; }
.gal-view { margin:10px 0; }
.gal-view-main { border-radius:12px; overflow:hidden; background:#000; max-height:240px; }
.gal-view-main img { width:100%; max-height:240px; object-fit:contain; cursor:zoom-in; }
.gal-cap-view { color:var(--text-dim); font-size:12.5px; margin-top:5px; }
.gal-strip { display:flex; gap:8px; overflow-x:auto; margin-top:8px; padding-bottom:4px; }
.gal-strip-img { flex:0 0 78px; width:78px; height:60px; object-fit:cover; border-radius:9px; border:1px solid var(--line); cursor:zoom-in; }
.gal-hint { color:var(--text-dim); font-size:11.5px; margin-top:5px; }

/* ═══ Diagnose: Fehler- & Problemanalyse (features/diag.js) ═══ */
.diag-intro { color:var(--text-dim); font-size:13.5px; line-height:1.55; margin:2px 0 12px; }
.diag-sum { border-radius:12px; padding:11px 14px; font-weight:800; margin-bottom:12px; }
.diag-sum.good { border:1px solid var(--ok,#2e9e6b); background:rgba(46,158,107,.12); color:var(--text); }
.diag-sum.bad { border:1px solid var(--warn); background:rgba(224,90,90,.12); color:var(--text); }
.diag-row { border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:8px; background:var(--surface); }
.diag-row.diag-fehler { border-left:4px solid var(--warn); }
.diag-row.diag-meldung { border-left:4px solid var(--accent); }
.diag-row.diag-hinweis { border-left:4px solid #d99a2b; }
.diag-head { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.diag-art { font-size:12px; font-weight:800; color:var(--text); }
.diag-n { font-size:11px; font-weight:800; background:var(--warn); color:#fff; border-radius:999px; padding:1px 7px; }
.diag-when { margin-left:auto; font-size:11.5px; color:var(--text-dim); }
.diag-del { flex:0 0 26px; width:26px; height:26px; border-radius:7px; border:1px solid var(--line); background:var(--surface-2); color:var(--text-dim); font-size:12px; cursor:pointer; line-height:1; }
.diag-text { color:var(--text); font-size:13.5px; line-height:1.45; word-break:break-word; }
.diag-det { margin-top:6px; padding-top:6px; border-top:1px dashed var(--line); color:var(--text-dim); font-size:11.5px; line-height:1.6; word-break:break-word; }
.diag-check { display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:8px; }
.diag-check.bad { border-color:var(--warn); background:rgba(224,90,90,.07); }
.dc-ico { flex:0 0 24px; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; background:var(--ok,#2e9e6b); color:#fff; }
.diag-check.bad .dc-ico { background:var(--warn); }
.dc-t { font-weight:700; color:var(--text); font-size:14px; }
.dc-i { color:var(--text-dim); font-size:12.5px; margin-top:2px; }
.dc-h { color:var(--text); font-size:12.5px; margin-top:5px; padding:6px 8px; border-radius:8px; background:var(--surface-2); }

/* ═══ Duplizieren (features/duplicate.js) ═══ */
.dup-sum { border:1px solid var(--line); background:var(--surface-2); border-radius:12px; padding:10px 12px; margin-top:10px; font-size:13.5px; color:var(--text); line-height:1.5; }

/* Merkmale: „Weitere Angaben" zugeklappt — sonst scrollt man bei jedem
   Produkt an zwanzig Feldern vorbei, die meist leer bleiben. */
.merk-mehr{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.merk-mehr>summary{cursor:pointer;color:var(--accent);font-size:.86rem;
  letter-spacing:.04em;text-transform:uppercase;padding:4px 0;list-style:none}
.merk-mehr>summary::-webkit-details-marker{display:none}
.merk-mehr>summary::before{content:"▸ ";display:inline-block;transition:transform .15s}
.merk-mehr[open]>summary::before{content:"▾ "}

/* ═══ Aufräum-Assistent: Zerlegung (features/matcleanup.js) ═══ */
.cl-filter { display:flex; gap:8px; margin-top:10px; }
.cl-filter .btn { flex:1; min-height:38px; font-size:13px; }
.cl-filter .btn.on { border-color:var(--accent); color:var(--accent); }
.prog-bar { height:6px; border-radius:3px; background:var(--line); overflow:hidden; margin-top:6px; }
.prog-bar span { display:block; height:100%; background:var(--accent); border-radius:3px; }
.cl-flag { color:var(--warn); font-weight:800; }
.cl-hint { color:var(--text-dim); font-size:11.5px; margin-top:3px; line-height:1.4; }
.cl-artrow { margin:12px 0 4px; }
.cl-arts { display:flex; gap:8px; margin-top:6px; }
.cl-art { flex:1; min-height:44px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--text); font-size:13px; cursor:pointer; }
.cl-art.on { border-color:var(--accent); color:var(--accent); font-weight:700; background:rgba(61,155,224,.10); }
.cl-spur { margin-top:12px; border:1px solid var(--line); border-radius:10px; }
.cl-spur > summary { padding:9px 12px; cursor:pointer; color:var(--text-dim); font-size:12.5px; list-style:none; }
.cl-spur > summary::-webkit-details-marker { display:none; }
.cl-spur > summary::before { content:'▸ '; }
.cl-spur[open] > summary::before { content:'▾ '; }
.cl-spur-row { display:grid; grid-template-columns:150px 1fr; gap:10px; padding:5px 12px; font-size:12.5px; border-top:1px solid var(--line); }
.cl-spur-s { color:var(--text-dim); }

/* ═══ Beinah-Dubletten (features/matcenter.js) ═══ */
.mc-dub { border:1px solid var(--line); border-radius:12px; padding:11px 13px; margin-bottom:9px; background:var(--surface); }
.mc-dub-h { display:flex; gap:10px; align-items:center; margin-bottom:7px; }
.mc-dub-n { font-size:11.5px; font-weight:800; color:var(--accent); }
.mc-dub-w { font-size:11.5px; color:var(--text-dim); }
.mc-dub-a, .mc-dub-b { font-size:13.5px; color:var(--text); padding:5px 9px; border-radius:8px; background:var(--surface-2); margin-bottom:5px; word-break:break-word; }
.mc-dub-act { display:flex; gap:8px; margin-top:8px; }
.mc-dub-act .btn { flex:1; min-height:42px; font-size:12.5px; }

/* ═══ Geräte-Stamm (features/geraete.js · matcenter.js) ═══ */
.mc-gbil { display:flex; flex-wrap:wrap; gap:8px 14px; margin:8px 0 12px; font-size:12.5px; color:var(--text-dim); }
.mc-gbil .warn { color:var(--warn); }
.mc-ger { border:1px solid var(--line); border-radius:12px; margin-bottom:8px; background:var(--surface); overflow:hidden; }
.mc-ger.faellig { border-left:4px solid var(--warn); }
.mc-ger-h { display:flex; align-items:center; gap:10px; padding:11px 13px; cursor:pointer; }
.mc-ger-ico { font-size:18px; }
.mc-ger-main { flex:1; min-width:0; }
.mc-ger-n { display:block; font-weight:700; color:var(--text); }
.mc-ger-s { display:block; font-size:12px; color:var(--text-dim); }
.mc-ger-l { font-size:11.5px; color:var(--warn); font-weight:700; }
.mc-ger-ok { color:var(--ok,#2e9e6b); font-weight:800; }
.mc-ger-b { padding:0 13px 13px; border-top:1px solid var(--line); }
.mc-ger-pruef { margin:10px 0; font-size:13px; color:var(--text); }

/* ═══ Zerlegte Anzeige am Eintrag (ui/detail.js) ═══
   Verwendung und Position bekommen eigene, unterscheidbare Marken — sonst
   sieht der zerlegte Eintrag aus wie der alte Wortsalat, nur in Kästchen. */
.tag-ziel  { color:#3d9be0; background:rgba(61,155,224,.13); }
.tag-zweck { color:#7f95ab; background:rgba(127,149,171,.13); }
.tag-bed   { color:#d99a2b; background:rgba(217,154,43,.14); }
.tag-alt   { color:#bd8ce8; background:rgba(189,140,232,.13); }
.tag-warn  { color:var(--warn); background:rgba(224,90,90,.13); font-weight:600; }
.tun-ico   { margin-right:5px; opacity:.85; }
.entry.tun .e-text { font-style:italic; }

/* ═══ Bezeichnungen & Hersteller (features/backup.js) ═══ */
.bez-sec { font-size:12px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--text-dim); margin:14px 0 4px; }
.bez-flag { margin-left:8px; font-size:10.5px; font-weight:700; color:var(--accent); text-transform:none; letter-spacing:0; }
.bez-row { display:grid; grid-template-columns:150px 1fr; gap:10px; align-items:center; margin-bottom:6px; }
.bez-k { font-size:12.5px; color:var(--text-dim); font-family:ui-monospace,Menlo,monospace; }
#bezHerst { width:100%; font-family:ui-monospace,Menlo,monospace; font-size:12.5px; line-height:1.5; }

/* ═══ Rüstliste (features/ruestliste.js) ═══
   Bewusst andere Anmutung als der Standard: Hier wird gelaufen und gegriffen,
   nicht gelesen. Große Trefferflächen, wenig Text, klare Trennung der Wege. */
.ruest-btn { border-color:var(--accent) !important; color:var(--accent) !important; font-weight:700; }
.rl-bilanz { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:8px; font-size:12.5px; color:var(--text-dim); }
.rl-fach { margin:16px 0 6px; }
.rl-fach-t { font-size:13px; font-weight:800; letter-spacing:.4px; color:var(--text); margin-bottom:8px; }
.rl-reserve { opacity:.92; border-top:1px dashed var(--line); padding-top:12px; }
.rl-hinweis { color:var(--text-dim); font-size:12.5px; margin:0 0 8px; }
.rl-ort { margin-bottom:12px; }
.rl-ort-t { display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--text-dim); padding:6px 2px; border-bottom:1px solid var(--line); margin-bottom:4px; }
.rl-ort-n { font-size:11px; font-weight:600; text-transform:none; letter-spacing:0; }
.rl-zeile { display:flex; align-items:center; gap:9px; min-height:52px; padding:8px 11px;
  border:1px solid var(--line); border-left:4px solid var(--e-col,var(--line));
  border-radius:11px; margin-bottom:6px; background:var(--surface); cursor:pointer;
  touch-action:manipulation; }
.rl-zeile.done { opacity:.5; }
.rl-zeile.done .rl-name { text-decoration:line-through; }
.rl-chk { width:24px; height:24px; flex:0 0 24px; border:2px solid var(--line); border-radius:7px;
  display:flex; align-items:center; justify-content:center; font-size:14px; color:transparent; }
.rl-zeile.done .rl-chk { background:var(--accent); border-color:var(--accent); color:#fff; }
.rl-menge { min-width:30px; font-weight:800; font-size:13px; color:var(--text); }
.rl-ico { font-size:16px; }
.rl-name { flex:1; font-size:14px; color:var(--text); line-height:1.35; }
.rl-gr { margin-left:7px; font-size:11.5px; color:var(--text-dim); }
.rl-bed { font-size:11px; color:#d99a2b; white-space:nowrap; }
@media print { .pr-z { font-size:12pt; padding:3px 0; } }

/* ===== Bausteine (features/bausteine.js) ===== */
.bau-zeilen { margin:6px 0 4px; }
.bau-z { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:6px; }
.bau-z.weg .bau-text { text-decoration:line-through; opacity:.55; }
.bau-menge { flex:0 0 74px; max-width:74px; }
.bau-text { flex:1 1 200px; min-width:150px; }
.bau-weg { display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--text-dim);
  white-space:nowrap; min-height:34px; }
.bau-weg input { width:18px; height:18px; }
.bau-abw { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:7px 9px;
  border:1px solid var(--line); border-left:4px solid #d99a2b; border-radius:10px; margin-bottom:6px;
  background:var(--surface); font-size:13px; }
.bau-abw-std { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  color:var(--text-dim); flex:1 1 100%; }
.bau-abw-ist { color:#d99a2b; }
.bau-abw-pfeil { color:var(--text-dim); }
.bau-abw-soll { color:var(--text); font-weight:600; }
.bau-ziel { display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
.bau-ziel select { flex:1 1 160px; min-width:130px; }
.bau-vorz { margin:4px 0 8px; }
.bau-vz { display:flex; gap:9px; align-items:baseline; padding:3px 0; font-size:13.5px;
  color:var(--text); border-bottom:1px dashed var(--line); }
.bau-vm { flex:0 0 38px; font-weight:800; font-size:12px; color:var(--text-dim); }
.vp-badge.warn { background:#d99a2b22; color:#d99a2b; }
.rl-bilanz .warn { color:#d99a2b; }

/* ===== Freigabe mit Siegel (features/freigabe.js) ===== */
.frg-kopf { display:flex; align-items:flex-start; gap:9px; padding:10px 12px; margin:0 0 10px;
  border:1px solid var(--line); border-left:4px solid var(--line); border-radius:11px;
  background:var(--surface); font-size:13px; line-height:1.4; }
.frg-ico { font-size:16px; line-height:1.2; flex:0 0 auto; }
.frg-txt { flex:1; color:var(--text); }
.frg-extra { display:block; font-size:11.5px; color:var(--text-dim); margin-top:2px; }
.frg-kopf.frg-gueltig    { border-left-color:#2e9e5b; }
.frg-kopf.frg-ueberholt  { border-left-color:#d99a2b; background:rgba(217,154,43,.07); }
.frg-kopf.frg-abgelaufen { border-left-color:#d9534f; background:rgba(217,83,79,.07); }
.frg-kopf.frg-entwurf    { border-left-color:var(--text-dim); }
.frg-badge { display:inline-block; margin-left:7px; padding:1px 6px; border-radius:6px;
  font-size:10.5px; font-weight:700; white-space:nowrap; }
.frg-badge.frg-ueberholt  { color:#d99a2b; background:rgba(217,154,43,.14); }
.frg-badge.frg-abgelaufen { color:#d9534f; background:rgba(217,83,79,.14); }
.frg-badge.frg-entwurf    { color:var(--text-dim); background:rgba(127,149,171,.14); }
.frg-feld { display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:6px 2px; border-bottom:1px solid var(--line); font-size:13px; }
.frg-feld span { color:var(--text-dim); }
.frg-diff { display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:7px 9px;
  border:1px solid var(--line); border-left:4px solid var(--line); border-radius:10px;
  margin-bottom:6px; background:var(--surface); font-size:13px; }
.frg-diff.neu { border-left-color:#d99a2b; }
.frg-diff.weg { border-left-color:#7f95ab; opacity:.8; }
.frg-diff-t { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  color:var(--text-dim); flex:0 0 auto; }
.frg-diff-x { flex:1; color:var(--text); }
.frg-diff.weg .frg-diff-x { text-decoration:line-through; }

/* ===== Facettierte Übersicht (features/facetten.js) ===== */
.facbar { margin:0 0 12px; }
.fac-aktiv { display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap; padding:7px 11px; margin-bottom:8px; border-radius:10px;
  background:var(--accent-bg,rgba(61,155,224,.10)); font-size:12.5px; color:var(--text); }
.fac-reset { border:0; background:none; color:var(--accent); font-size:12.5px; font-weight:700;
  cursor:pointer; min-height:32px; padding:0 4px; }
.fac-reihe { display:flex; align-items:flex-start; gap:8px; margin-bottom:6px; }
.fac-name { flex:0 0 78px; padding-top:7px; font-size:10.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim); }
.fac-chips { flex:1; display:flex; flex-wrap:wrap; gap:5px; }
.facchip { display:inline-flex; align-items:center; gap:5px; min-height:32px; padding:4px 10px;
  border:1px solid var(--line); border-radius:16px; background:var(--surface);
  color:var(--text); font-size:12.5px; cursor:pointer; touch-action:manipulation; }
.facchip.on { border-color:var(--accent); background:var(--accent); color:#fff; }
.facchip .fac-n { font-size:10.5px; opacity:.65; font-variant-numeric:tabular-nums; }
.facchip.on .fac-n { opacity:.85; }
.facchip.fac-more { color:var(--text-dim); border-style:dashed; }
@media (max-width:420px){ .fac-name { flex-basis:100%; padding-top:0; } .fac-reihe { flex-wrap:wrap; } }

/* ===== Menü & Funktionen (features/funktionen.js) =====
   Eine Zeile je Funktion: Symbol, Name, Untertitel, dann die Schalter. Der
   Untertitel steht in einer eigenen Zeile, damit auf schmalen Tablets weder
   Name noch Untertitel abgeschnitten werden. */
.fkt-zeile { padding:10px 11px; margin-bottom:8px; border:1px solid var(--line);
  border-radius:12px; background:var(--surface); }
.fkt-zeile.fkt-aus { opacity:.55; }
.fkt-kopf { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.fkt-ico { flex:0 0 3.2em; text-align:center; font-size:16px; }
.fkt-name { flex:1; min-width:0; font-weight:600; }
.fkt-sub { width:100%; font-size:12.5px; color:var(--text-dim); }
.fkt-akt { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.fkt-akt button { min-height:34px; min-width:38px; padding:0 10px; border:1px solid var(--line);
  border-radius:9px; background:var(--bg); color:var(--text); font-size:12.5px;
  cursor:pointer; touch-action:manipulation; }
.fkt-akt button.on { border-color:var(--accent); background:var(--accent); color:#fff; font-weight:700; }
.fkt-akt button.dgr { border-color:#a4453d; color:#e2837b; }
.fkt-fest { display:inline-flex; align-items:center; min-height:34px; padding:0 10px;
  font-size:11.5px; color:var(--text-dim); font-style:italic; }

/* ===== Bilder an Einträgen (features/medien.js) =====
   Der Streifen steht UNTER dem Text und ist bewusst klein: Im Saal wird die
   Liste gelesen, nicht betrachtet. Wer ein Bild braucht, tippt es an. */
.med-streifen { display:flex; gap:6px; flex-wrap:wrap; margin-top:7px; }
.med-mini { padding:0; border:1px solid var(--line); border-radius:8px; overflow:hidden;
  background:var(--surface); cursor:pointer; line-height:0; touch-action:manipulation; }
.med-mini img { width:54px; height:54px; object-fit:cover; display:block; }
.med-mini:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Bildverwaltung im Bearbeiten-Menü */
.med-liste { max-height:44vh; overflow:auto; margin:6px 0; }
.med-zeile { display:grid; grid-template-columns:64px 1fr; gap:8px; align-items:start;
  padding:8px; margin-bottom:6px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); }
.med-zeile img { width:64px; height:64px; object-fit:cover; border-radius:7px; cursor:pointer; }
.med-akt { grid-column:2; display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.med-akt button { min-height:32px; min-width:36px; padding:0 9px; border:1px solid var(--line);
  border-radius:8px; background:var(--bg); color:var(--text); font-size:12.5px; cursor:pointer; }
.med-akt button.dgr { border-color:#a4453d; color:#e2837b; }

/* Gruppen-Schalter im Bildschirm „Menü & Funktionen": nimmt alle Punkte einer
   Gruppe (z. B. die Gefahrenzone) in einem Zug aus dem Bearbeiten-Menü. */
.fkt-gruppe { display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:14px 0 6px; padding:6px 0 5px; border-bottom:1px solid var(--line); }
.fkt-gruppe.fkt-aus { opacity:.55; }
.fkt-gruppe-t { font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  color:var(--text-dim); }
.fkt-gruppe button { min-height:30px; padding:0 10px; border:1px solid var(--line);
  border-radius:8px; background:var(--bg); color:var(--text); font-size:12px; cursor:pointer; }
.fkt-gruppe button.on { border-color:var(--accent); background:var(--accent); color:#fff; font-weight:700; }

/* ═══════════ Bilder überall: drei Größen, eine Regel ═══════════
   Ein Bild trägt seine Größe nicht in sich — dieselbe Aufnahme ist an einer
   Materialzeile ein Symbol und in einer Anleitung eine ganze Seite. Die Größe
   steht deshalb an der STELLE (features/medien.js) und wird hier nur noch
   umgesetzt. Antippen macht jedes Bild groß (data-zoom). */
.med-bild { margin:0; padding:0; line-height:0; }
.med-bild img { display:block; cursor:zoom-in; background:var(--surface-2); }
.med-bild.med-klein { border:1px solid var(--line); border-radius:8px; overflow:hidden;
  background:var(--surface); position:relative; }
.med-bild.med-klein img { width:54px; height:54px; object-fit:cover; }
.med-bloecke { display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.med-bild.med-mittel, .med-bild.med-gross { border:1px solid var(--line); border-radius:12px;
  overflow:hidden; background:var(--surface); position:relative; }
.med-bild.med-mittel { max-width:min(100%, 340px); }
.med-bild.med-mittel img, .med-bild.med-gross img { width:100%; height:auto; max-height:62vh; object-fit:contain; }
.med-bild .med-cap { line-height:1.4; font-size:12.5px; color:var(--text-dim);
  padding:6px 9px 8px; background:var(--surface); }
.med-bild.med-klein .med-cap { display:none; }   /* am Symbol wäre die Unterschrift breiter als das Bild */
.med-bild .med-info { position:absolute; top:5px; right:6px; width:20px; height:20px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; font-size:12px; line-height:20px; text-align:center; }
.med-anker { margin:8px 0 12px; }
.med-plus { margin-top:7px; min-height:38px; padding:0 12px; border:1px dashed var(--line-2, var(--line));
  border-radius:10px; background:var(--surface); color:var(--text-dim); font-size:12.5px; cursor:pointer; }
.med-plus:hover { color:var(--text); border-color:var(--accent); }

/* Bildverwaltung: Unterschrift, Angaben und Größe an einer Stelle */
.med-felder { display:flex; flex-direction:column; gap:6px; }
.med-det { resize:vertical; min-height:44px; font-size:12.5px; }
.med-groessen { display:flex; gap:5px; flex-wrap:wrap; }
.med-gr { min-height:30px; padding:0 9px; border:1px solid var(--line); border-radius:8px;
  background:var(--bg); color:var(--text-dim); font-size:11.5px; cursor:pointer; }
.med-gr.on { border-color:var(--accent); color:var(--accent); background:rgba(61,155,224,.12); font-weight:600; }
.lb-det { color:rgba(255,255,255,.82); font-size:13.5px; line-height:1.55; padding:10px 16px 0;
  max-height:26vh; overflow:auto; white-space:pre-wrap; }

/* ═══════════ Merkmale an Standards ═══════════ */
.eig-leiste { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:8px 0 10px; }
.eig-chip { --eig:var(--accent); display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:999px; font-size:12.5px; font-weight:600;
  color:var(--eig); background:color-mix(in srgb, var(--eig) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--eig) 34%, transparent); }
.eig-edit { min-height:30px; padding:0 10px; border:1px dashed var(--line); border-radius:999px;
  background:transparent; color:var(--text-dim); font-size:12px; cursor:pointer; }
.eig-form { display:flex; flex-direction:column; gap:10px; margin:8px 0; }
.eig-zeile { display:flex; flex-direction:column; gap:5px; }
.eig-lbl { font-size:12.5px; font-weight:600; color:var(--text-dim); }
.eig-wahl { display:flex; gap:6px; flex-wrap:wrap; }
.eig-w { min-height:36px; padding:0 12px; border:1px solid var(--line); border-radius:9px;
  background:var(--surface); color:var(--text); font-size:13px; cursor:pointer; }
.eig-w.on { border-color:var(--accent); color:var(--accent); background:rgba(61,155,224,.12); font-weight:700; }
/* Häkchen direkt im Menü. 46 px hoch, ganze Zeile als Fläche: Mit Handschuhen
   trifft man eine Zeile, kein 20-px-Kästchen (Hausregel: mindestens 44 px). */
.eig-haken-block { display:flex; flex-direction:column; gap:2px; margin:2px 0 6px; }
.eig-haken { display:flex; align-items:center; gap:11px; width:100%; min-height:46px;
  padding:6px 12px; border:0; border-radius:11px; background:transparent;
  color:var(--text); font-size:14.5px; text-align:left; cursor:pointer; }
.eig-haken:active { background:var(--surface2, rgba(127,127,127,.12)); }
.eig-hk-box { flex:0 0 auto; width:24px; height:24px; border-radius:7px;
  border:2px solid var(--line); display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:800; line-height:1; }
.eig-haken.on .eig-hk-box { border-color:var(--accent); background:var(--accent); color:#fff; }
.eig-haken.on { font-weight:700; }
.eig-haken.nein .eig-hk-box { border-color:var(--warn, #e0795f); color:var(--warn, #e0795f); }
.eig-hk-wort { flex:1 1 auto; }
.eig-hk-sub { flex:0 0 auto; font-size:11.5px; color:var(--text-dim); }
.eig-karte { border:1px solid var(--line); border-radius:12px; padding:10px; margin:8px 0;
  background:var(--surface); display:flex; flex-direction:column; gap:8px; }
.eig-kopf { display:grid; grid-template-columns:56px 1fr 150px; gap:6px; align-items:center; }
.eig-sym { text-align:center; }
.eig-zahlen { font-size:12.5px; color:var(--text-dim); }
.eig-vert { display:flex; gap:5px; flex-wrap:wrap; margin-top:5px; }
.eig-schalter { display:flex; flex-direction:column; gap:5px; }
.eig-chk { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-dim); cursor:pointer; }
.eig-akt { display:flex; gap:6px; flex-wrap:wrap; }
.eig-akt button { min-height:32px; min-width:36px; padding:0 10px; border:1px solid var(--line);
  border-radius:8px; background:var(--bg); color:var(--text); font-size:12.5px; cursor:pointer; }
.eig-akt button.dgr { border-color:#a4453d; color:#e2837b; }
.eig-treffer { display:flex; flex-direction:column; gap:4px; }
.eig-treff { text-align:left; min-height:36px; padding:6px 10px; border:1px solid var(--line);
  border-radius:9px; background:var(--bg); color:var(--text); font-size:13px; cursor:pointer; }
.eig-warn { border:1px solid #a4453d; border-radius:10px; padding:10px; font-size:12.5px; color:var(--text); }
.eig-neu { border:1px dashed var(--accent); border-radius:12px; padding:10px; margin-top:8px; }
@media (max-width:520px){ .eig-kopf { grid-template-columns:52px 1fr; } .eig-kopf .form-sel { grid-column:1 / -1; } }

/* ═══════════ Standardkopf ═══════════ */
.kopf-titel { padding:2px 2px 6px; }
.kt-name { font-size:19px; font-weight:750; letter-spacing:-.01em; line-height:1.2; }
.kt-grp { font-size:12.5px; color:var(--text-dim); margin-top:2px; }
.kopf-text { font-size:14px; line-height:1.6; color:var(--text); margin:2px 0 10px; }
.kopf-text p { margin:0 0 8px; }
.kopf-zahlen { display:flex; gap:6px; flex-wrap:wrap; margin:2px 0 10px; }

/* ═══════════ Prüfblatt vor dem Speichern ═══════════
   Zeigt, was gleich geschrieben wird: vorher → nachher und wie weit es
   reicht. Jede Zeile trägt ihre eigene Reichweite. */
.pb-liste { display:flex; flex-direction:column; gap:8px; margin:8px 0; max-height:52vh; overflow:auto; }
.pb-zeile { display:grid; grid-template-columns:1fr auto; gap:4px 10px; align-items:center;
  padding:9px 10px; border:1px solid var(--line); border-radius:11px; background:var(--surface); }
.pb-feld { font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--text-dim); grid-column:1 / -1; }
.pb-werte { display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:13.5px; min-width:0; }
.pb-alt { color:var(--text-dim); text-decoration:line-through; overflow-wrap:anywhere; }
.pb-pfeil { color:var(--text-dim); }
.pb-neu { font-weight:650; overflow-wrap:anywhere; }
.pb-scope { min-height:34px; padding:0 11px; border:1px solid var(--line); border-radius:999px;
  background:var(--bg); color:var(--text); font-size:12.5px; white-space:nowrap; cursor:pointer; }
.pb-scope.weit { border-color:var(--accent); color:var(--accent); background:rgba(61,155,224,.12); font-weight:650; }
.pb-scope[disabled] { opacity:.5; cursor:default; }
.pb-zahl { grid-column:1 / -1; font-size:11.5px; color:var(--text-dim); }
.pb-warn { margin:6px 4px; padding:9px 11px; border-radius:10px; font-size:12.5px; line-height:1.5;
  color:var(--text); background:rgba(224,178,61,.12); border:1px solid rgba(224,178,61,.4); }
.sheet-pick-btn.sel { border-color:var(--accent); color:var(--accent); font-weight:650; }

/* ═══════════ Schriftgröße und Auszeichnung ═══════════
   Die Stufen sind bewusst moderat: Im Saal wird gelesen, nicht plakatiert.
   Eine Zeile, die dreimal so groß ist wie ihre Nachbarn, zerstört den
   Listencharakter, nach dem gearbeitet wird. */
.tx-s  { font-size:.86em; }
.tx-l  { font-size:1.17em; }
.tx-xl { font-size:1.36em; line-height:1.3; }
.tx-fett { font-weight:750; }
.e-text.tx-xl, .e-text.tx-l { letter-spacing:-.01em; }
.tx-vorschau { margin:6px 4px 10px; padding:10px 12px; border:1px solid var(--line);
  border-radius:11px; background:var(--surface); line-height:1.45; }
.tx-abschnitt { margin:12px 4px 5px; font-size:11.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-dim); }
.tx-wahl { display:flex; gap:6px; flex-wrap:wrap; padding:0 2px; }
.tx-b { min-height:40px; padding:0 14px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); color:var(--text); font-size:13.5px; cursor:pointer; }
.tx-b.on { border-color:var(--accent); color:var(--accent); background:rgba(61,155,224,.12); font-weight:700; }
.tx-legende { display:flex; flex-direction:column; gap:5px; padding:0 4px; }
.tx-leg { display:flex; align-items:baseline; gap:10px; font-size:13px; }
.tx-leg code { font-size:12px; padding:2px 6px; border-radius:6px; background:var(--surface-2);
  border:1px solid var(--line); color:var(--text-dim); }

/* ═══════════ Bereich (zweite Sicht) ═══════════ */
.ber-chip { --ber:#5fb0e0; display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:7px; font-size:11.5px; font-weight:650;
  color:var(--ber); background:color-mix(in srgb, var(--ber) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--ber) 36%, transparent); }
/* Das Häkchen am Material. Klein im Bild, aber 44 px hoch als TREFFERFLÄCHE:
   Der sichtbare Kasten misst 18 px, der Knopf selbst reicht darüber hinaus —
   mit Handschuhen zählt die Fläche, nicht das Bild. */
.ber-haken { --ber:#5fb0e0; display:inline-flex; align-items:center; gap:5px;
  min-height:44px; padding:0 9px; margin:-11px 0; border-radius:8px;
  border:1px solid color-mix(in srgb, var(--ber) 34%, transparent);
  background:transparent; color:var(--text-dim); font-size:11.5px; font-weight:650;
  cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ber-haken .bh-box { width:18px; height:18px; border-radius:5px; border:2px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; line-height:1; }
.ber-haken.on { color:var(--ber); background:color-mix(in srgb, var(--ber) 14%, transparent); }
.ber-haken.on .bh-box { border-color:var(--ber); background:var(--ber); color:#fff; }
.ber-zeile { display:grid; grid-template-columns:58px 1fr 52px; gap:6px; align-items:center;
  padding:8px; margin:6px 0; border:1px solid var(--line); border-radius:11px; background:var(--surface); }
.ber-sym { text-align:center; }
.ber-farbe { width:52px; height:38px; padding:2px; border:1px solid var(--line); border-radius:9px;
  background:var(--bg); cursor:pointer; }
.ber-akt { grid-column:1 / -1; display:flex; gap:6px; flex-wrap:wrap; }
.ber-akt button { min-height:32px; min-width:36px; padding:0 10px; border:1px solid var(--line);
  border-radius:8px; background:var(--bg); color:var(--text); font-size:12.5px; cursor:pointer; }
.ber-akt button.dgr { border-color:#a4453d; color:#e2837b; }

/* ═══════════ Austauschgruppen ═══════════ */
.alt-chip { border:0; cursor:pointer; font:inherit; }
.alt-karte { border:1px solid var(--line); border-radius:12px; padding:10px; margin:8px 0;
  background:var(--surface); }
.alt-kopf { font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:7px; }
.alt-liste { display:flex; flex-direction:column; gap:6px; margin:8px 0; }
.alt-zeile { display:grid; grid-template-columns:auto 1fr; gap:4px 9px; align-items:center;
  padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--bg); }
.alt-zeile.ich { border-color:var(--accent); }
.alt-rang { font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-dim); padding:2px 7px; border-radius:999px; background:var(--surface-2); white-space:nowrap; }
.alt-name { font-size:13.5px; font-weight:600; overflow-wrap:anywhere; }
.alt-hinweis { grid-column:1 / -1; font-size:12px; color:var(--text-dim); }
.alt-sorte { grid-column:1 / -1; font-size:12px; color:var(--text-dim); }
/* „nicht eingestuft" darf nicht wie eine Angabe aussehen — es ist eine offene
   Frage und wird als solche gezeigt (Grundsatz ①: leer schlägt falsch). */
.alt-rang.offen { color:var(--warn,#e0b45f); background:transparent;
  border:1px dashed color-mix(in srgb, var(--warn,#e0b45f) 55%, transparent); }
/* Die vier Sorten. Zwei je Reihe auf dem Handy, jede Fläche 44 px hoch. */
.alt-sorten { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:2px 0; }
.alt-sorte-btn { min-height:44px; padding:0 10px; border:1px solid var(--line); border-radius:9px;
  background:var(--surface); color:var(--text-dim); font-size:12px; font-weight:600;
  text-align:left; cursor:pointer; }
.alt-sorte-btn.on { border-color:var(--accent); color:var(--accent); font-weight:800;
  background:rgba(61,155,224,.12); }
.alt-grund { grid-column:1 / -1; font-size:12.5px; }
.alt-akt { grid-column:1 / -1; display:flex; gap:6px; }
.alt-akt button { min-height:30px; min-width:34px; padding:0 9px; border:1px solid var(--line);
  border-radius:8px; background:var(--surface); color:var(--text); font-size:12px; cursor:pointer; }
.alt-akt button.dgr { border-color:#a4453d; color:#e2837b; }
.alt-oeffnen { grid-column:1 / -1; justify-self:start; min-height:32px; padding:0 11px;
  border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--accent);
  font-size:12.5px; cursor:pointer; }

/* ═══════════ Verfahrenszweige ═══════════ */
.zwg-leiste { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:6px 0 12px;
  padding:8px 10px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.zwg-wort { font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-dim); margin-right:2px; }
.zwg-b { min-height:34px; padding:0 13px; border:1px solid var(--line); border-radius:999px;
  background:var(--bg); color:var(--text); font-size:13px; cursor:pointer; }
.zwg-b.on { border-color:var(--accent); color:var(--accent); background:rgba(61,155,224,.13); font-weight:700; }
.zwg-pflege { min-height:34px; padding:0 11px; border:1px dashed var(--line); border-radius:999px;
  background:transparent; color:var(--text-dim); font-size:12.5px; cursor:pointer; }
.zwg-liste { display:flex; flex-direction:column; gap:5px; }
.zwg-zeile, .zwg-zuo { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:7px 10px; border:1px solid var(--line); border-radius:10px; background:var(--surface); font-size:13px; }
.zwg-zeile button { min-height:30px; padding:0 10px; border:1px solid #a4453d; border-radius:8px;
  background:var(--bg); color:#e2837b; font-size:12px; cursor:pointer; }
.zwg-zuo .form-sel { flex:0 0 46%; }
.rl-sicht { display:flex; gap:6px; margin:0 0 12px; }
.rl-s { flex:1; min-height:40px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); color:var(--text); font-size:13.5px; cursor:pointer; }
.rl-s.on { border-color:var(--accent); color:var(--accent); background:rgba(61,155,224,.12); font-weight:700; }

/* ═══════════ Bausteine: Sammelmappe und Bibliothek ═══════════ */
.bau-mappe { border:1px solid var(--accent); border-radius:14px; padding:12px; margin:12px 0;
  background:rgba(61,155,224,.06); }
.bau-mappe-t { font-size:13px; font-weight:750; color:var(--accent); margin-bottom:8px; }
.bau-mz { display:grid; grid-template-columns:44px 1fr 34px; gap:8px; align-items:center;
  padding:6px 8px; border-bottom:1px solid var(--line); font-size:13.5px; }
.bau-mz:last-of-type { border-bottom:0; }
.bau-mz button { min-height:30px; border:1px solid #a4453d; border-radius:8px; background:var(--bg);
  color:#e2837b; font-size:13px; cursor:pointer; }
.bau-mform { margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.bau-katwahl { display:flex; flex-wrap:wrap; gap:8px 14px; }
.bau-kchk { display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer; }
.bau-katleiste { display:flex; gap:6px; flex-wrap:wrap; margin:10px 0; }
.bau-kb { min-height:34px; padding:0 12px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); color:var(--text); font-size:12.5px; cursor:pointer; }
.bau-kb.on { border-color:var(--accent); color:var(--accent); background:rgba(61,155,224,.12); font-weight:700; }
.bau-kb.bau-kneu { border-style:dashed; color:var(--text-dim); }
.bau-kn { opacity:.6; margin-left:3px; font-variant-numeric:tabular-nums; }
.bau-pick { display:grid; grid-template-columns:24px 1fr; gap:4px 10px; align-items:center;
  padding:10px; margin:5px 0; border:1px solid var(--line); border-radius:11px;
  background:var(--surface); cursor:pointer; }
.bau-pick.fremd { opacity:.72; }
.bau-pick input { width:20px; height:20px; }
.bau-pick-n { font-size:14px; font-weight:640; }
.bau-pick-s { grid-column:2; font-size:12px; color:var(--text-dim); }

/* ═══════════ Fassungen ═══════════ */
.fas-liste { display:flex; flex-direction:column; gap:7px; margin:8px 0; }
.fas-zeile { display:flex; gap:10px; align-items:center; justify-content:space-between;
  padding:10px; border:1px solid var(--line); border-radius:11px; background:var(--surface); }
.fas-haupt { min-width:0; }
.fas-meta { font-size:11.5px; color:var(--text-dim); margin-top:3px; }
.fas-bilanz { display:flex; flex-direction:column; gap:6px; margin:8px 4px;
  padding:11px 13px; border-radius:11px; font-size:13px; line-height:1.5;
  background:rgba(224,178,61,.1); border:1px solid rgba(224,178,61,.38); }

/* ═══════════ Pflege-Weg (ein Material nach dem anderen) ═══════════ */
.pf-filter { display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; }
.pf-filter .btn { flex:0 1 auto; min-height:38px; padding:7px 12px; font-size:12.5px; }
.pf-filter .btn.on { border-color:var(--accent); color:var(--accent); font-weight:700; }
.pf-karte { background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:16px; margin:12px 0; }
.pf-pos { font-size:13px; color:var(--muted,#8a93a5); margin-bottom:11px; }
.pf-flag { color:var(--warn); font-weight:700; }
.pf-ok { color:var(--ok); font-weight:700; }
/* Vorher/Nachher nebeneinander — auf schmalen Geräten untereinander. */
.pf-vgl { display:grid; grid-template-columns:1fr 22px 1fr; gap:8px; align-items:center; margin-bottom:12px; }
.pf-vgl-p { text-align:center; font-size:17px; color:var(--text-dim); }
.pf-roh { font-size:13.5px; line-height:1.5; background:var(--surface); border:1px solid var(--line);
  border-radius:11px; padding:9px 11px; margin-top:4px; }
.pf-name { font-size:16px; font-weight:800; background:var(--surface); border:1px solid var(--accent);
  border-radius:11px; padding:10px 12px; margin-top:4px; }
.pf-warn { font-size:12px; color:var(--warn); font-weight:700; margin-top:5px; }
@media (max-width:560px){ .pf-vgl { grid-template-columns:1fr; } .pf-vgl-p { transform:rotate(90deg); } }
.pf-foto { margin:10px 0; }
.pf-foto img { max-width:100%; max-height:190px; border-radius:12px; border:1px solid var(--line); }
.pf-wo { font-size:12px; color:var(--text-dim); margin-bottom:12px; }
.pf-liste { display:flex; flex-direction:column; gap:7px; }
.pf-schritt { display:grid; grid-template-columns:20px 24px 1fr; gap:4px 8px; align-items:center;
  padding:10px 11px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.pf-schritt.fertig { opacity:.72; }
.pf-schritt.entfaellt { opacity:.5; }
.pf-schritt.offen { border-color:var(--accent); }
.pf-marke { font-size:15px; font-weight:800; text-align:center; }
.pf-schritt.fertig .pf-marke { color:var(--ok); }
.pf-schritt.offen .pf-marke { color:var(--accent); }
.pf-s-ico { font-size:16px; text-align:center; }
.pf-s-main { min-width:0; }
.pf-s-w { display:block; font-size:14px; font-weight:700; }
.pf-s-sub { display:block; font-size:12px; color:var(--text-dim); margin-top:2px; word-break:break-word; }
.pf-s-akt { grid-column:3; display:flex; gap:6px; flex-wrap:wrap; margin-top:7px; }
.pf-s-akt .btn { flex:0 1 auto; min-height:36px; padding:6px 12px; font-size:12.5px; }
.pf-weg { opacity:.8; }
.pf-hand { margin-top:11px; padding:9px 11px; border-radius:11px; font-size:12.5px;
  background:rgba(224,178,61,.1); border:1px solid rgba(224,178,61,.38); }
.pf-nav { display:flex; gap:8px; flex-wrap:wrap; margin-top:15px; }
.pf-nav .btn { flex:1 1 auto; }
.pf-nav2 { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.pf-nav2 .btn { flex:1 1 auto; min-height:38px; padding:7px 12px; font-size:12.5px; }
.pf-sprungliste { display:flex; flex-direction:column; gap:5px; margin-top:12px;
  max-height:340px; overflow-y:auto; padding-right:2px; }
.pf-sprung { display:flex; justify-content:space-between; align-items:center; gap:10px; text-align:left;
  padding:9px 11px; border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--text); }
.pf-sprung.on { border-color:var(--accent); font-weight:700; }
.pf-sp-n { font-size:13.5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-sp-s { flex:0 0 auto; font-size:11.5px; color:var(--text-dim); }
/* Einstieg in der Materialzentrale — steht über der Lückenliste. */
.mc-weg { display:flex; align-items:center; gap:11px; padding:14px; margin-bottom:12px; border-radius:14px;
  border:1px solid var(--accent); background:rgba(61,155,224,.09); cursor:pointer; }
.mc-weg-ico { font-size:22px; flex:0 0 auto; }
.mc-weg-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.mc-weg-l { font-size:15px; font-weight:800; }
.mc-weg-s { font-size:12.5px; color:var(--text-dim); line-height:1.5; }
.mc-weg-p { font-size:12px; font-weight:700; color:var(--accent); }
/* Verwaltung: Symbol- und Untertitelfeld je Schritt. */
.pf-vz { display:flex; gap:7px; align-items:center; }
.pf-vico { flex:0 0 56px; text-align:center; }
.pf-vsub { margin-top:6px; font-size:12.5px; }
.pf-frage { margin-top:9px; padding:10px 12px; border-radius:11px; font-size:12.5px; line-height:1.5;
  background:rgba(224,90,90,.1); border:1px solid rgba(224,90,90,.4); }

/* ═══════════ Ankreuzen statt Abtippen ═══════════ */
.ank-liste { max-height:52vh; overflow-y:auto; margin:8px 0 2px; padding-right:2px; }
.ank-zeile { display:grid; grid-template-columns:22px 8px 1fr; gap:10px; align-items:center;
  padding:9px 10px; margin:5px 0; border:1px solid var(--line); border-radius:11px;
  background:var(--surface); cursor:pointer; }
.ank-zeile.on { border-color:var(--accent); background:rgba(61,155,224,.1); }
.ank-zeile input { width:20px; height:20px; }
.ank-farbe { width:8px; height:26px; border-radius:4px; }
.ank-haupt { min-width:0; }
.ank-n { display:block; font-size:14px; font-weight:640; }
.ank-s { display:block; font-size:11.5px; color:var(--text-dim); margin-top:2px; }
/* Bilanz der Baustein-Auswahl im Formular „Neuer Standard". */
.bau-bilanz { margin-top:9px; padding:8px 11px; border-radius:10px; font-size:12.5px; font-weight:640;
  background:var(--surface-2); border:1px solid var(--line); color:var(--text-dim); }

/* ═══════════ Reihenfolge ändern (Sortiermodus) ═══════════ */
.srt-kopf p { margin-top:4px; }
.srt-gruppe { margin:12px 0; }
.srt-titel { font-size:12.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:var(--text-dim); padding:0 4px 6px; display:flex; align-items:center; gap:8px; }
.srt-n { font-weight:700; opacity:.7; text-transform:none; letter-spacing:0; }
.srt-zeile { display:flex; align-items:center; gap:9px; padding:8px 10px; margin-bottom:6px;
  border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.srt-zeile.zieht { border-color:var(--accent); background:rgba(61,155,224,.14); opacity:.92; }
.srt-griff { flex:0 0 40px; height:40px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--text-dim); font-size:17px; line-height:1;
  cursor:grab; touch-action:none; user-select:none; }
.srt-griff:active { cursor:grabbing; }
.srt-farbe { flex:0 0 6px; height:26px; border-radius:3px; }
.srt-text { flex:1; min-width:0; font-size:14px; font-weight:600; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.srt-menge { display:inline-block; font-size:11.5px; font-weight:800; padding:1px 6px; margin-right:7px;
  border-radius:7px; background:var(--surface-2); color:var(--text-dim); }
.srt-akt { flex:0 0 auto; display:flex; gap:4px; }
.srt-akt button { width:34px; height:36px; border-radius:9px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--text); font-size:13px; }
@media (max-width:420px){ .srt-akt button { width:30px; } .srt-text { font-size:13px; } }
/* Kategorien der Baustein-Bibliothek ändern (Wort, Symbol, entfernen). */
.bau-katverw { margin:8px 0 4px; padding:10px; border:1px dashed var(--line); border-radius:12px; }
.bau-katverw .hint { margin:0 0 8px; }

/* ═══════════ Seiten-Register (die Leiste oben) ═══════════ */
.seg-btn.seg-aus { opacity:.45; }
.seg-btn.seg-neu { flex:0 0 auto; min-width:44px; font-size:17px; opacity:.7; }
/* ═══════════ Kürzel ═══════════ */
.auf-wer { margin-top:9px; font-size:12.5px; color:var(--text-dim); }
.auf-krz { min-height:32px; padding:3px 11px; margin-left:6px; border-radius:9px; font-size:12.5px; font-weight:700;
  border:1px solid var(--line); background:var(--surface-2); color:var(--text); }
/* ═══════════ Aufgaben ═══════════ */
.auf-bilanz { display:flex; gap:8px; margin-top:9px; }
.auf-warn, .auf-heute { font-size:12px; font-weight:800; padding:2px 9px; border-radius:9px; color:#fff; }
.auf-warn { background:var(--warn); }
.auf-heute { background:var(--accent); }
.auf-karte { display:grid; grid-template-columns:52px 1fr auto; gap:10px; align-items:start;
  padding:12px; margin-bottom:8px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.auf-karte.auf-ueber { border-color:var(--warn); }
.auf-karte.auf-heute { border-color:var(--accent); }
.auf-karte.auf-fertig { opacity:.6; }
.auf-haken { width:48px; height:48px; border-radius:14px; font-size:22px; line-height:1;
  border:1px solid var(--line); background:var(--surface-2); color:var(--text-dim); }
.auf-karte.auf-ueber .auf-haken { border-color:var(--warn); color:var(--warn); }
.auf-karte.auf-fertig .auf-haken { color:var(--ok); border-color:var(--ok); }
.auf-haupt { min-width:0; }
.auf-wort { font-size:15px; font-weight:700; }
.auf-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; font-size:11.5px; color:var(--text-dim); }
.auf-stand { font-weight:800; }
.auf-karte.auf-ueber .auf-stand { color:var(--warn); }
.auf-karte.auf-heute .auf-stand { color:var(--accent); }
.auf-text { font-size:13px; margin-top:6px; line-height:1.5; }
.auf-zuletzt { font-size:11.5px; color:var(--text-dim); margin-top:6px; }
.auf-zuletzt.auf-nie { font-style:italic; opacity:.75; }
.auf-akt { display:flex; flex-direction:column; gap:5px; }
.auf-akt button { width:40px; height:40px; border-radius:11px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--text); font-size:15px; }
.auf-verlauf { margin-top:9px; padding:9px 11px; border-radius:11px; background:var(--surface-2); border:1px solid var(--line); }
.auf-vz { font-size:12px; padding:2px 0; }
.auf-vf { opacity:.6; margin-left:7px; }
.auf-vzurueck { margin-top:7px; font-size:12px; background:none; border:none; color:var(--accent); text-decoration:underline; padding:0; }
.auf-form { padding:13px; margin-bottom:10px; border:1px solid var(--accent); border-radius:14px; background:var(--surface-2); }
/* ═══════════ Aktuelles (Pinnwand) ═══════════ */
.akt-karte { padding:13px; margin-bottom:9px; border-radius:14px; background:var(--surface);
  border:1px solid var(--line); border-left:5px solid var(--akt, #8a93a5); }
.akt-karte.akt-laut { background:color-mix(in srgb, var(--akt) 10%, var(--surface)); }
.akt-karte.akt-alt { opacity:.55; }
.akt-kopf { display:flex; flex-wrap:wrap; gap:9px; align-items:center; font-size:11.5px; }
.akt-art { font-weight:800; color:var(--akt, var(--text-dim)); }
.akt-ort, .akt-rest { color:var(--text-dim); }
.akt-rest { margin-left:auto; font-weight:700; }
.akt-wort { font-size:15.5px; font-weight:700; margin-top:6px; }
.akt-text { font-size:13.5px; line-height:1.55; margin-top:5px; }
.akt-fuss { font-size:11px; color:var(--text-dim); margin-top:7px; }
.akt-akt { display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; }
.akt-akt button { min-height:36px; padding:5px 11px; border-radius:10px; font-size:12.5px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--text); }
/* ═══════════ Bestellungen ═══════════ */
.best-karte { padding:13px; margin-bottom:9px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.best-karte.best-dringend { border-color:var(--warn); }
.best-karte.best-alt { opacity:.55; }
.best-wort { font-size:15px; font-weight:700; }
.best-menge { font-size:12px; font-weight:800; padding:1px 7px; border-radius:8px;
  background:var(--surface-2); color:var(--text-dim); }
.best-mat, .best-notiz { font-size:12px; color:var(--text-dim); margin-top:4px; }
.best-spur { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.best-schritt { font-size:11px; padding:3px 9px; border-radius:9px; border:1px dashed var(--line); color:var(--text-dim); }
.best-schritt.on { border-style:solid; border-color:var(--ok); color:var(--text); }
.best-akt { display:flex; gap:7px; flex-wrap:wrap; margin-top:11px; }
.best-akt .btn { flex:0 1 auto; min-height:40px; padding:8px 14px; }
.best-kopf { display:flex; align-items:flex-start; gap:11px; }
.best-kopf-txt { flex:1; min-width:0; }
/* Das Foto bleibt sichtbar und ist groß genug, um beim Bestellen wirklich
   daraufzuschauen; Antippen öffnet es formatfüllend (data-zoom). */
.best-karte-foto { width:76px; height:76px; object-fit:cover; border-radius:10px; flex:0 0 76px; cursor:zoom-in; border:1px solid var(--line); }
.best-gtin { font-size:12px; font-weight:700; color:var(--text-dim); margin-top:3px; letter-spacing:.01em; }
.best-erkannt { margin-top:8px; padding:7px 11px; border-radius:10px; font-size:12.5px;
  background:color-mix(in srgb, var(--accent) 12%, var(--surface)); border:1px solid var(--accent); color:var(--text); }
.best-scan-reihe { display:flex; gap:6px; align-items:stretch; }
.best-scan-reihe .loc-input { flex:1; }
.best-scan-reihe .btn { flex:0 0 44px; min-height:44px; padding:0; font-size:18px; border-radius:10px; }
#bestFotoBox { position:relative; display:inline-flex; align-items:flex-start; margin-top:8px; }
.best-scan-foto { width:80px; height:80px; object-fit:cover; border-radius:10px; cursor:zoom-in; }
.best-foto-clear { position:absolute; top:-6px; right:-6px; min-height:22px; padding:0 6px; font-size:11px;
  border-radius:9px; border-width:1px; line-height:22px; }
/* ③ Auszahlungs-Zeile im Formular: bekannt (grün) vs. Vorschlag (neutral). */
.best-daten { margin-top:8px; padding:8px 11px; border-radius:11px; font-size:12.5px; line-height:1.4; }
.best-daten-ok { background:color-mix(in srgb, var(--ok) 14%, var(--surface)); border:1px solid var(--ok); color:var(--text); }
.best-daten-vor { background:var(--surface-2); border:1px dashed var(--line); color:var(--text); display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.best-daten-sub { display:block; font-size:11px; color:var(--text-dim); margin-top:2px; }
.best-daten-btn { min-height:32px; padding:4px 12px; }
/* ④ Prüf-Panel (Admin): Vorschläge und Widersprüche bestätigen. */
.best-lern-panel { border:1px solid var(--line); border-radius:14px; background:var(--surface-2); padding:11px; margin-bottom:10px; }
.best-lern-hilfe { font-size:11.5px; color:var(--text-dim); margin:0 0 9px; line-height:1.5; }
.best-lern-zeile { display:flex; flex-wrap:wrap; gap:9px; align-items:center; justify-content:space-between;
  padding:9px 0; border-top:1px solid var(--line); }
.best-lern-zeile:first-of-type { border-top:none; }
.best-lern-wid { background:color-mix(in srgb, var(--warn) 10%, transparent); border-radius:9px; padding:9px 8px; }
.best-lern-txt { flex:1 1 55%; min-width:0; }
.best-lern-name { font-size:14px; font-weight:700; }
.best-lern-wid .best-lern-name { color:var(--warn); }
.best-lern-prod { font-size:11.5px; color:var(--text-dim); margin-top:2px; }
.best-lern-akt { display:flex; gap:6px; flex:0 0 auto; }
.best-lern-akt .btn { min-height:36px; padding:6px 12px; }

/* ── Liste einfügen (features/einfuegen.js) ──────────────────────────────
   Der Prüfschritt ist die eigentliche Funktion: Er muss auf einem Handy mit
   Handschuhen bedienbar sein. Deshalb große Trefferflächen, ein Haken links
   (der Daumen ist dort) und der Name als echtes Eingabefeld — nicht erst
   nach einem weiteren Tipp. */
.einf-liste{max-height:46vh;overflow-y:auto;margin:8px 0;
  border:1px solid var(--line);border-radius:12px}
.einf-zeile{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;
  border-bottom:1px solid var(--line);opacity:.55;transition:opacity .12s}
.einf-zeile:last-child{border-bottom:0}
.einf-zeile.on{opacity:1}
.einf-zeile input[type=checkbox]{width:22px;height:22px;margin-top:6px;flex:0 0 auto}
.einf-felder{flex:1;min-width:0}
.einf-name{width:100%}
.einf-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:4px}
.einf-menge{width:88px;flex:0 0 auto}
.einf-tag{font-size:11px;padding:2px 7px;border-radius:999px;
  background:var(--chip);color:var(--muted);white-space:nowrap}
.einf-tag.einf-ok{background:rgba(45,164,78,.16);color:#2da44e}
.einf-tag.einf-warn,.schip.einf-warn{background:rgba(214,69,69,.16);color:#d64545}
.einf-art{font-size:11px;padding:3px 8px;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap}
.einf-zeile.einf-ueber .einf-name{font-weight:700;text-transform:uppercase;letter-spacing:.03em}

/* ── Zeilen ändern (features/zeilen.js) ─────────────────────────────────
   Die Rubrik wird zum Formular. Zwei Dinge entscheiden hier über
   Benutzbarkeit mit Handschuhen: Die Felder sind hoch genug (44 px), und
   eine geänderte Zeile ist auf einen Blick erkennbar — sonst weiß man nach
   zehn Zeilen nicht mehr, was man angefasst hat. */
.zl-liste{margin:0 0 12px}
.zl-zeile{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;
  border-bottom:1px solid var(--line);position:relative}
.zl-zeile:last-child{border-bottom:0}
.zl-zeile-dran{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.zl-farbe{width:4px;align-self:stretch;border-radius:2px;flex:0 0 4px}
.zl-felder{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.zl-feld{display:flex;align-items:center;gap:8px}
.zl-lab{flex:0 0 56px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted)}
.zl-feld .loc-input{flex:1;min-height:44px}
.zl-feld.zl-dran .loc-input{border-color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent)}
.zl-zurueck{flex:0 0 44px;min-height:44px;border:1px solid var(--line);border-radius:10px;
  background:transparent;color:var(--muted);font-size:18px;cursor:pointer}
.zl-kopf .p-actions{margin-top:10px}

/* Das Prüfblatt über alle Änderungen. */
.zl-pruef{max-height:38vh;overflow-y:auto;margin:8px 0;
  border:1px solid var(--line);border-radius:12px}
.zl-pz{padding:8px 12px;border-bottom:1px solid var(--line);position:relative;padding-right:44px}
.zl-pz:last-child{border-bottom:0}
.zl-pz-kopf{font-size:13px;font-weight:600}
.zl-pz-feld{font-size:11px;font-weight:400;color:var(--muted);
  background:var(--chip);padding:1px 6px;border-radius:999px;margin-left:6px}
.zl-pz-werte{display:flex;gap:8px;align-items:center;margin-top:3px;flex-wrap:wrap}
.zl-vor{color:var(--muted);text-decoration:line-through}
.zl-pfeil{color:var(--muted)}
.zl-nach{color:var(--accent);font-weight:600}
.zl-pz-weg{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border:0;background:transparent;color:var(--muted);
  font-size:16px;cursor:pointer}
/* Der ↺-Knopf steht immer im Markup (sonst erschiene er beim Tippen nie,
   weil die Liste dabei bewusst NICHT neu gebaut wird) und wird hier
   sichtbar gemacht, sobald die Zeile eine Änderung trägt. */
.zl-zeile .zl-zurueck{visibility:hidden}
.zl-zeile-dran .zl-zurueck{visibility:visible}