/* ============================================================================
   tm_design/components.css  —  Bausteine der T.M. ERP Designsprache
   Stand 2026-08-20 · Version 3

   REGEL: Diese Datei enthaelt KEINEN Farbwert. Alles kommt aus tokens.css.
   Wer hier einen Hexwert findet, hat einen Fehler gefunden — bitte melden.

   Enthaelt zwei Ebenen:
     NEU     — .tm-app, .tm-rail, .tm-tile, .tag, .ini, .ring …
     ALTBAU  — .card, .btn, .badge, .kpi, table, .station, .act …
               Gleiche Klassennamen wie tm_ui.css V1/V2, damit bestehende
               Seiten ohne Aenderung im neuen Look erscheinen.
   ============================================================================ */

.tm,.tm *{box-sizing:border-box}
.tm{color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.55;
    -webkit-font-smoothing:antialiased;min-height:100vh}
html,body{margin:0;padding:0}
.tm img{display:block;max-width:100%}
.tm .num,.tm .mono{font-variant-numeric:tabular-nums}
.tm a{color:var(--gold-text);text-decoration:none}
.tm a:hover{text-decoration:underline}
.tm h1{font-size:27px;font-weight:800;letter-spacing:-.032em;margin:0 0 3px}
.tm h2{font-size:17px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px}
.tm h3{font-size:15px;font-weight:800;margin:0 0 4px}
.tm .lead,.tm .sub{color:var(--ink-2);font-size:14px;margin:0 0 20px}
.tm .note-txt{color:var(--ink-2);font-size:13px}
.tm .eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-text);margin:0 0 6px}
/* .up/.down siehe Block am Dateiende (Spezifitaet gegen .tm table.table td) */

/* Sichtbarer Tastaturfokus — Pflicht, nicht Kuer */
.tm :focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:var(--r-md)}

/* ==========================================================================
   GERUEST
   ========================================================================== */
.tm-app{display:grid;grid-template-columns:var(--rail-w,250px) 1fr} /* V3.6.0: Breite als Variable, siehe Abschnitt am Ende */
.tm-main{padding:20px var(--gutter) 60px;min-width:0}
.tm .wrap{max-width:var(--maxw);margin:0 auto;padding:24px var(--gutter) 60px}

/* ---------- Modulschiene ---------- */
.tm-rail{background:var(--rail-bg);padding:20px 14px;display:flex;flex-direction:column;gap:3px}
.tm-rail-logo{display:flex;align-items:center;gap:11px;padding:4px 8px 20px}
.tm-rail-logo .mk{width:44px;height:44px;border-radius:var(--r-lg);background:var(--rail-logo-bg);
                  display:grid;place-items:center;flex:0 0 auto}
.tm-rail-logo .mk img{width:27px}
.tm-rail-logo .n{display:block;font-size:14px;font-weight:800;line-height:1.15}
.tm-rail-logo .s{display:block;font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-text);margin-top:2px}
.tm-rail-group{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:800;padding:16px 12px 7px}
.tm-rail-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-lg);
              font-size:13.5px;font-weight:700;color:var(--rail-ink);cursor:pointer;text-decoration:none;transition:background var(--t-fast),color var(--t-fast)}
.tm-rail-item:hover{background:var(--rail-hover);color:var(--ink);text-decoration:none}
.tm-rail-item.on{background:var(--rail-active-bg);color:var(--rail-active-ink);box-shadow:var(--rail-active-shadow)}
.tm-rail-item .ic{width:32px;height:32px;border-radius:var(--r-md);display:grid;place-items:center;flex:0 0 auto;
                  background:var(--acc-soft,var(--surface-sunken));color:var(--acc-on-soft,var(--ink-2))}
.tm-rail-item .ic svg{width:17px;height:17px;stroke-width:2.2;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.tm-rail-item.on .ic{background:var(--acc,var(--gold));color:var(--gold-ink)}
.tm-rail-item .cnt{margin-left:auto;font-size:11.5px;font-weight:800;padding:2px 9px;border-radius:var(--r-pill);
                   background:var(--rail-count-bg);color:var(--rail-count-ink);font-variant-numeric:tabular-nums}
.tm-rail-item.on .cnt{background:var(--gold);color:var(--gold-ink)}

/* Akzentfamilie setzen — auf Schienenpunkten, Kacheln, Chips gleich benannt.
   Fuenf weitere Familien (.a-teal .a-amber .a-rose .a-slate .a-indigo) und die
   Frage, welche Farbe welche Aussage traegt: Abschnitt „V3.3.0 — FARBFAMILIEN"
   am Ende dieser Datei. */
.a-gold{--tile-on:var(--gold-ink);--acc:var(--gold);--acc-soft:var(--gold-soft);--acc-on-soft:var(--gold-on-soft);--acc-grad:var(--gold-grad);--acc-shadow:var(--gold-shadow)}
.a-info{--acc:var(--info);--acc-soft:var(--info-soft);--acc-on-soft:var(--info-on-soft);--acc-grad:var(--info-grad);--acc-shadow:var(--info-shadow)}
.a-good{--acc:var(--good);--acc-soft:var(--good-soft);--acc-on-soft:var(--good-on-soft);--acc-grad:var(--good-grad);--acc-shadow:var(--good-shadow)}
.a-crit{--acc:var(--crit);--acc-soft:var(--crit-soft);--acc-on-soft:var(--crit-on-soft);--acc-grad:var(--crit-grad);--acc-shadow:var(--crit-shadow)}
.a-plum{--acc:var(--plum);--acc-soft:var(--plum-soft);--acc-on-soft:var(--plum-on-soft);--acc-grad:var(--plum-grad);--acc-shadow:var(--plum-shadow)}

/* ---------- Kopfzeile des Arbeitsbereichs ---------- */
.tm-head{display:flex;align-items:center;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.tm-head .r{margin-left:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.tm-search{background:var(--surface);border:none;border-radius:var(--r-pill);height:44px;width:300px;max-width:100%;
           display:flex;align-items:center;padding:0 18px;gap:10px;color:var(--muted);font-size:13.5px;font-weight:600;
           box-shadow:var(--shadow-1);font-family:var(--font)}
.tm-search svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;flex:0 0 auto}
.tm-search input{border:none;background:none;outline:none;font:600 13.5px var(--font);color:var(--ink);width:100%}
.tm-pill{border-radius:var(--r-pill);padding:9px 16px;font-size:12.5px;font-weight:700;background:var(--surface);
         color:var(--ink-2);box-shadow:var(--shadow-1);white-space:nowrap}
.tm-pill.gold{background:var(--gold-grad);color:var(--gold-ink);box-shadow:none}
.tm-avatar{width:44px;height:44px;border-radius:var(--r-pill);background:var(--rail-logo-bg);color:var(--gold);
           display:grid;place-items:center;font-weight:800;font-size:13px;flex:0 0 auto}

/* ---------- Moduswechsel ---------- */
.tm-theme{width:44px;height:44px;border-radius:var(--r-pill);border:none;cursor:pointer;background:var(--surface);
          color:var(--ink-2);display:grid;place-items:center;box-shadow:var(--shadow-1);transition:transform var(--t-fast)}
.tm-theme:hover{transform:translateY(-2px)}
.tm-theme svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tm-theme .moon{display:none}
[data-theme="dark"] .tm-theme .moon{display:block}
[data-theme="dark"] .tm-theme .sun{display:none}

/* ==========================================================================
   KENNZAHL-KACHELN
   Hell: Vollfarbe mit Verlauf. Dunkel: ruhige Flaeche, leuchtende Zahl.
   Der Unterschied steckt komplett in tokens.css.
   ========================================================================== */
.tm-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.tm-tile{border-radius:var(--r-xl);padding:20px 22px;position:relative;overflow:hidden;
         background:var(--tile-bg);color:var(--tile-ink);box-shadow:var(--tile-shadow);
         transition:transform var(--t)}
.tm-tile:hover{transform:translateY(-3px)}
.tm-tile:after{content:"";position:absolute;right:-46px;top:-46px;width:150px;height:150px;border-radius:var(--r-pill);
               background:var(--tile-blob-bg);opacity:var(--tile-blob-opacity);filter:blur(var(--tile-blob-blur))}
.tm-tile>*{position:relative;z-index:1}
.tm-tile .ic{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;margin-bottom:12px;
             background:var(--tile-icon-bg);color:var(--tile-icon-ink)}
.tm-tile .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tm-tile.a-gold .ic{background:rgba(51,38,10,.14)}
/* V3.1.1: der Hell-Sonderfall oben übermalte im Dunkeln den Akzent-Hintergrund des Icons */
[data-theme="dark"] .tm-tile.a-gold .ic{background:var(--tile-icon-bg)}
.tm-tile .l{font-size:12.5px;font-weight:700;color:var(--tile-label);opacity:.94}
.tm-tile .v{font-size:38px;font-weight:800;letter-spacing:-.045em;line-height:1.05;margin-top:3px;
            color:var(--tile-value);font-variant-numeric:tabular-nums}
.tm-tile .d{font-size:12.5px;margin-top:4px;font-weight:600;color:var(--tile-note);opacity:.94}

/* ==========================================================================
   KARTEN
   ========================================================================== */
.tm .card,.tm .panel,.tm .pnl{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-2);
                              overflow:hidden;border:none}
.tm .card-h,.tm .sec-h{padding:18px 22px 12px;display:flex;justify-content:space-between;align-items:center;gap:12px;
                       border:none;background:none;margin:0}
.tm .card-h h2,.tm .sec-h h2,.tm .sec-h .rulelabel{margin:0;font-size:16px;font-weight:800;letter-spacing:-.02em;
                                                   border:none;padding:0}
.tm .card-h .sm,.tm .sec-h .sm{font-size:12.5px;color:var(--muted);font-weight:600}
.tm .pad{padding:18px 22px}
.tm .grid{display:grid;gap:16px}
.tm .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tm .cols{display:grid;grid-template-columns:1.85fr 1fr;gap:18px;align-items:start}
.tm .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ==========================================================================
   TABELLEN — Zeilen sind eigene abgerundete Bloecke, keine Striche
   ========================================================================== */
.tm table,.tm table.table,.tm table.table-bordered{
  width:100%;border-collapse:separate;border-spacing:0 4px;font-size:14px;padding:0 12px 10px;
  background:none;border:none;margin:0}
.tm th,.tm table.table th{padding:4px 12px;text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
                          color:var(--muted);font-weight:800;background:none;border:none;white-space:nowrap}
.tm td,.tm table.table td{padding:13px 12px;background:var(--row-bg);border:none;vertical-align:middle;
                          transition:background var(--t-fast);color:var(--ink)}
.tm tbody tr td:first-child{border-radius:var(--r-lg) 0 0 var(--r-lg)}
.tm tbody tr td:last-child{border-radius:0 var(--r-lg) var(--r-lg) 0}
.tm tbody tr:hover td{background:var(--row-hover)}
.tm tbody tr.sel td,.tm tbody tr.editrow td{background:var(--row-sel)}
.tm .rowlink{cursor:pointer}
.tm .table-responsive{overflow-x:auto;background:none;border:none;box-shadow:none;margin:0}
.tm .anr{font-weight:800;color:var(--gold-text);font-variant-numeric:tabular-nums}

/* Kundenzelle mit Initialenfeld */
.tm .kd{display:flex;align-items:center;gap:10px}
.tm .ini{width:32px;height:32px;border-radius:var(--r-md);display:grid;place-items:center;font-size:11px;
         font-weight:800;flex:0 0 auto;background:var(--acc-grad,var(--gold-grad));color:var(--on-accent)}
[data-theme="dark"] .tm .ini{background:var(--acc,var(--gold));color:#171522}

/* ==========================================================================
   CHIPS / BADGES — vollrund, weicher Grund, AA-geprueft
   ========================================================================== */
.tm .tag,.tm .badge,.tm .chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
                              padding:5px 12px;border-radius:var(--r-pill);white-space:nowrap;
                              background:var(--acc-soft,var(--surface-sunken));color:var(--acc-on-soft,var(--ink-2))}
.tm .tag i,.tm .badge i{width:6px;height:6px;border-radius:var(--r-pill);background:currentColor;flex:0 0 auto}
.tm .t-gold,.tm .b-warn,.tm .chip.rest{background:var(--gold-soft);color:var(--gold-on-soft)}
.tm .t-info,.tm .b-info{background:var(--info-soft);color:var(--info-on-soft)}
.tm .t-good,.tm .b-good,.tm .chip.ok{background:var(--good-soft);color:var(--good-on-soft)}
.tm .t-crit,.tm .b-crit{background:var(--crit-soft);color:var(--crit-on-soft)}
.tm .t-plum{background:var(--plum-soft);color:var(--plum-on-soft)}
.tm .b-neutral,.tm .b-open{background:var(--surface-sunken);color:var(--ink-2)}

/* ==========================================================================
   BUTTONS — vollrund
   ========================================================================== */
.tm .btn,.tm .bt,.tm input[type=submit],
.tm button[type=submit]:not(.btn):not(.act):not(.accept):not(.linkbtn):not(.tm-theme){
  height:44px;padding:0 22px;border:none;border-radius:var(--r-pill);cursor:pointer;
  font:700 14px var(--font);display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--surface-sunken);color:var(--ink);transition:transform var(--t-fast),box-shadow var(--t-fast),background var(--t-fast)}
.tm .btn:hover,.tm .bt:hover,.tm input[type=submit]:hover{transform:translateY(-2px)}
.tm .btn.primary,.tm .bt.primary,.tm input[type=submit],
.tm button[type=submit]:not(.btn):not(.act):not(.accept):not(.linkbtn):not(.tm-theme){background:var(--ink);color:var(--page)}
[data-theme="dark"] .tm .btn.primary,[data-theme="dark"] .tm .bt.primary{background:var(--surface-3);color:var(--ink)}
.tm .btn.gold,.tm .bt.gold{background:var(--gold-grad);color:var(--gold-ink);box-shadow:var(--gold-shadow)}
.tm .btn.ghost,.tm .bt.ghost{background:var(--surface-sunken);color:var(--ink)}
[data-theme="dark"] .tm .btn.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-2)}
.tm .btn.danger{background:var(--crit-grad);color:var(--on-accent)}
.tm .btn.ok{background:var(--good-grad);color:var(--on-accent)}
.tm .btn.sm,.tm .bt.sm{height:36px;padding:0 16px;font-size:13px}
.tm .linkbtn{background:none;border:none;color:var(--info);cursor:pointer;font:700 13px var(--font);padding:0}
.tm .linkbtn.danger{color:var(--crit);background:none}
.tm a.btn{text-decoration:none}
.tm .tm-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}

/* ==========================================================================
   FORTSCHRITT / BALKEN
   ========================================================================== */
.tm .mtr{padding:11px 22px}
.tm .mtr .t{display:flex;justify-content:space-between;font-size:13px;font-weight:600;margin-bottom:8px;color:var(--ink-2)}
.tm .mtr .t b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.tm .bar,.tm .prog{height:11px;border-radius:var(--r-pill);background:var(--surface-sunken);overflow:hidden;display:block}
.tm .bar>span,.tm .prog>span{display:block;height:100%;border-radius:var(--r-pill);background:var(--good-grad);
                             transition:width .45s cubic-bezier(.4,0,.2,1)}
.tm .bar>span.short,.tm .prog>span.amber,.tm .prog>span.gold,
.tm .bar>span.f-gold,.tm .prog>span.f-gold{background:var(--gold-grad)}
.tm .prog>span.red,.tm .bar>span.f-crit,.tm .prog>span.f-crit{background:var(--crit-grad)}
.tm .bar>span.f-good,.tm .prog>span.f-good{background:var(--good-grad)}
.tm .bar>span.f-info,.tm .prog>span.f-info{background:var(--info-grad)}
.tm .bar>span.f-plum,.tm .prog>span.f-plum{background:var(--plum-grad)}

/* ---------- Ring ---------- */
.tm .ring{width:112px;height:112px;border-radius:var(--r-pill);display:grid;place-items:center;flex:0 0 auto}
.tm .ring .in{width:82px;height:82px;border-radius:var(--r-pill);background:var(--surface);display:grid;place-items:center;
              text-align:center;line-height:1.15}
.tm .ring .in b{font-size:21px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tm .ring .in span{font-size:10px;color:var(--muted);font-weight:700}
.tm .legend{display:grid;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink-2);padding:0}
.tm .legend div{display:flex;align-items:center;gap:8px}
.tm .legend i{width:11px;height:11px;border-radius:4px;display:inline-block;flex:0 0 auto}

/* ==========================================================================
   EINGABEN
   ========================================================================== */
.tm input[type=text],.tm input[type=number],.tm input[type=date],.tm input[type=time],
.tm input[type=password],.tm input[type=email],.tm input[type=search],.tm input:not([type]),
.tm input[type=month],.tm input[type=week],.tm input[type=datetime-local],.tm input[type=tel],.tm input[type=url],
.tm select,.tm textarea{
  height:44px;border:1px solid var(--line-2);border-radius:var(--r-md);padding:0 14px;font:14px var(--font);
  background:var(--surface);color:var(--ink);max-width:100%;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.tm textarea{height:auto;min-height:90px;padding:11px 14px;resize:vertical;width:100%}
.tm input:focus,.tm select:focus,.tm textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.tm input[type=checkbox],.tm input[type=radio]{height:auto;width:auto;accent-color:var(--gold);cursor:pointer}
.tm .field,.tm .fg{display:flex;flex-direction:column;gap:6px}
.tm .field label,.tm .fg label{font-size:12px;color:var(--ink-2);font-weight:700}
.tm label{color:var(--ink);font-size:14px}
.tm .chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;cursor:pointer;user-select:none}

/* ==========================================================================
   KIOSK / STATION  (Zeiterfassung, Lagerbildschirme)
   ========================================================================== */
.tm .station{padding:26px 30px}
.tm .station .kh{display:flex;justify-content:space-between;color:var(--ink-2);font-size:14px}
.tm .station .nm{font-size:32px;font-weight:800;text-align:center;margin:10px 0 2px;letter-spacing:-.03em}
.tm .station .rl{text-align:center;color:var(--gold-text);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.tm .station .since{text-align:center;color:var(--ink-2);margin:3px 0 22px;font-size:14px}
.tm .actions{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.tm .act,.tm a.act{border:none;border-radius:var(--r-xl);padding:22px 12px;cursor:pointer;text-align:center;text-decoration:none;
                   font-size:17px;font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:center;
                   gap:10px;min-height:118px;background:var(--acc-grad,var(--good-grad));color:var(--on-accent);
                   transition:transform var(--t-fast),box-shadow var(--t-fast)}
.tm .act svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tm .act small{font-weight:600;opacity:.9;font-size:12px}
.tm a.act.green,.tm .act.green{background:var(--good-grad);color:var(--on-accent)}
.tm a.act.amber,.tm .act.amber{background:var(--gold-grad);color:var(--gold-ink)}
.tm a.act.red,.tm .act.red{background:var(--crit-grad);color:var(--on-accent)}
.tm a.act.off,.tm .act.off{background:var(--surface-sunken);color:var(--muted);cursor:not-allowed}
.tm .act:not(.off):hover{transform:translateY(-3px);box-shadow:var(--shadow-3)}
.tm .summary{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tm .stat{background:var(--surface-2);border:none;border-radius:var(--r-xl);padding:16px 20px;transition:transform var(--t)}
.tm .stat:hover{transform:translateY(-2px)}
.tm .stat .l{font-size:13px;color:var(--ink-2);margin-bottom:3px;font-weight:600}
.tm .stat .v{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.tm .kiosk-scan{max-width:540px;margin:26px auto;padding:38px;text-align:center}
.tm .kiosk-scan input{width:100%;height:64px;font-size:22px;text-align:center;border-radius:var(--r-lg);letter-spacing:2px}

/* ==========================================================================
   ALTBAU — .kpi aus V1/V2 bekommt den weichen Kachel-Look
   ========================================================================== */
.tm .kpirow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tm .kpi{background:var(--acc-soft,var(--gold-soft));border:none;border-radius:var(--r-xl);padding:18px 20px;
         transition:transform var(--t)}
.tm .kpi:hover{transform:translateY(-2px)}
.tm .kpi .kl{font-size:12.5px;color:var(--ink-2);font-weight:700}
.tm .kpi .kv{font-size:34px;font-weight:800;margin-top:3px;font-variant-numeric:tabular-nums;letter-spacing:-.04em;
             color:var(--acc-on-soft,var(--ink))}
.tm .kpi .kd{font-size:12.5px;margin-top:4px;font-weight:600;color:var(--ink-2)}
.tm .kpi.k-good{--acc-soft:var(--good-soft);--acc-on-soft:var(--good-on-soft)}
.tm .kpi.k-warn,.tm .kpi.k-gold{--acc-soft:var(--gold-soft);--acc-on-soft:var(--gold-on-soft)}
.tm .kpi.k-crit{--acc-soft:var(--crit-soft);--acc-on-soft:var(--crit-on-soft)}
.tm .kpi.k-info{--acc-soft:var(--info-soft);--acc-on-soft:var(--info-on-soft)}

/* ---------- Modal ---------- */
.tm-modal-bg,.tm .modal-bg{position:fixed;inset:0;background:rgba(15,12,25,.55);backdrop-filter:blur(3px);
                           display:none;align-items:center;justify-content:center;z-index:60;padding:20px}
.tm-modal-bg.on,.tm .modal-bg.on{display:flex}
.tm .modal{background:var(--surface);border-radius:var(--r-xl);max-width:520px;width:100%;box-shadow:var(--shadow-3);overflow:hidden}
.tm .modal .mh{padding:18px 22px 12px;display:flex;justify-content:space-between;align-items:center}
.tm .modal .mh h3{margin:0;font-size:17px}
.tm .modal .close{background:none;border:none;font-size:24px;line-height:1;cursor:pointer;color:var(--muted)}
.tm .modal .mc{padding:0 22px 6px}
.tm .modal .mf{padding:14px 22px 20px;display:flex;justify-content:flex-end;gap:9px}

/* ==========================================================================
   RESPONSIV & BEWEGUNGSARM
   ========================================================================== */
@media(max-width:1150px){
  /* Die naechsten zwei Zeilen sind ABGELOEST DURCH BP-31 (Abschnitt „MOBIL" am
     Dateiende, 04.09.2026). Sie bleiben als Beleg der Historie stehen und
     wirken nicht mehr: `.tm-rail{display:none}` war schon seit V3.6.1 durch die
     spaetere Grundregel `.tm-rail{…display:flex…}` ueberstimmt, und das Raster
     setzt BP-31 je Umbruchbreite neu (900–1150 px eingeklappte Schiene im
     Raster, unter 900 px Ueberlagerung). Nichts hier aendern — der neue Stand
     steht in EINEM Abschnitt am Ende. */
  .tm-app{grid-template-columns:1fr}
  .tm-rail{display:none}
  .tm .cols,.tm .grid2{grid-template-columns:1fr}
  .tm-tiles,.tm .kpirow{grid-template-columns:repeat(2,1fr)}
  .tm .actions{grid-template-columns:repeat(2,1fr)}
  .tm .summary{grid-template-columns:1fr}
}
@media(max-width:640px){
  .tm-tiles,.tm .kpirow{grid-template-columns:1fr}
  .tm-search{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .tm *,.tm *::before,.tm *::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .tm-tile:hover,.tm .btn:hover,.tm .stat:hover,.tm .kpi:hover,.tm .act:hover{transform:none}
}
@media print{
  .tm-rail,.tm-theme,.tm-search,.tm .acts{display:none}
  .tm{background:#fff}
  .tm .card{box-shadow:none;border:1px solid #ddd}
}


/* ============================================================================
   ZEITERFASSUNG — Auswertungsbausteine auf V3
   Kalender-Heatmap, Team-Heatmap, Divergenzbalken, Sparkline, Ring,
   Tagesstunden, Detailzeilen. Gleiche Klassennamen wie in V1/V2, damit die
   bestehenden Seiten ohne Aenderung im neuen Look erscheinen.
   ============================================================================ */

/* ---------- Kalender-Heatmap ---------- */
.tm .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding:16px 20px}
.tm .cal .dow{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;
              text-align:center;font-weight:800;padding-bottom:2px}
.tm .cell{min-height:62px;border-radius:var(--r-md);background:var(--surface-sunken);position:relative;
          padding:7px 9px;font-size:11px;color:var(--ink-2);transition:transform var(--t-fast)}
.tm .cell:hover{transform:translateY(-2px)}
.tm .cell .dn{font-weight:800;font-variant-numeric:tabular-nums}
.tm .cell .h{position:absolute;bottom:6px;right:9px;font-weight:800;font-size:12px;font-variant-numeric:tabular-nums}
.tm .cell.ok{background:var(--good-soft);color:var(--good-on-soft)}
.tm .cell.under{background:var(--gold-soft);color:var(--gold-on-soft)}
.tm .cell.urlaub{background:var(--info-soft);color:var(--info-on-soft)}
.tm .cell.krank{background:var(--crit-soft);color:var(--crit-on-soft)}
.tm .cell.off{background:var(--surface-sunken);color:var(--muted)}
.tm .cell.holiday{background:repeating-linear-gradient(45deg,var(--surface-sunken),var(--surface-sunken) 6px,
                  var(--surface-2) 6px,var(--surface-2) 12px);color:var(--muted)}
.tm .cell.sunday{box-shadow:inset 0 0 0 2px var(--gold)}
.tm .legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);padding:0 20px 16px}
/* Kleine Farbfelder brauchen eine Kante: die weichen Statusfarben sind im
   Dunkelmodus durchsichtig und auf 12 px sonst kaum zu erkennen. */
.tm .cal+.legend i{width:12px;height:12px;border-radius:4px}
.tm .legend i{box-shadow:inset 0 0 0 1px var(--line-2)}

/* ---------- Team-Anwesenheit ---------- */
.tm .tah{padding:14px 20px;overflow-x:auto}
.tm .tahrow{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:14px;margin:7px 0;font-size:13px;font-weight:600}
.tm .tahcells{display:flex;gap:4px}
.tm .tahcells .c{width:16px;height:16px;border-radius:5px;background:var(--surface-sunken);flex:0 0 auto;
                 transition:transform var(--t-fast)}
.tm .tahcells .c:hover{transform:scale(1.25)}
.tm .tahcells .c.ok{background:var(--good)} .tm .tahcells .c.under{background:var(--gold)}
.tm .tahcells .c.url{background:var(--info)} .tm .tahcells .c.kr{background:var(--crit)}

/* ---------- Ueber-/Unterstunden (divergierend) ---------- */
.tm .dv{padding:14px 20px}
.tm .dvrow{display:grid;grid-template-columns:140px 1fr 78px;align-items:center;gap:14px;margin:10px 0;
           font-size:13px;font-weight:600}
.tm .dvtrack{position:relative;height:18px}
.tm .dvtrack:before{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:2px;
                    border-radius:2px;background:var(--line-2)}
.tm .dvbar{position:absolute;top:3px;height:12px;border-radius:var(--r-pill);transition:width .45s cubic-bezier(.4,0,.2,1)}
.tm .dvbar.pos{left:50%;background:var(--good-grad)}
.tm .dvbar.neg{right:50%;background:var(--crit-grad)}
.tm .dvval{text-align:right;font-variant-numeric:tabular-nums;font-weight:800}

/* ---------- Sparkline ---------- */
.tm .spark{display:inline-flex;align-items:flex-end;gap:3px;height:26px}
.tm .spark i{width:5px;border-radius:3px;background:var(--gold);min-height:3px}
.tm .spark i.u{background:var(--crit)} .tm .spark i.we{background:var(--line-2)}

/* ---------- Ring / Donut ---------- */
.tm .donut{width:104px;height:104px;border-radius:var(--r-pill);display:grid;place-items:center;
           background:conic-gradient(var(--acc,var(--good)) calc(var(--p,0)*1%),var(--surface-sunken) 0)}
.tm .donut .in{width:76px;height:76px;background:var(--surface);border-radius:var(--r-pill);display:grid;
               place-items:center;font-weight:800;font-size:20px;font-variant-numeric:tabular-nums;letter-spacing:-.03em}

/* ---------- Tagesstunden ---------- */
.tm .daywrap{position:relative;padding:16px 20px 10px}
.tm .daybars{position:relative;display:flex;align-items:flex-end;gap:7px;height:140px}
.tm .daybars .db{flex:1;background:var(--good-grad);border-radius:var(--r-md) var(--r-md) 3px 3px;min-height:4px;
                 transition:height .45s cubic-bezier(.4,0,.2,1)}
.tm .daybars .db.u{background:var(--gold-grad)} .tm .daybars .db.we{background:var(--surface-sunken)}
.tm .sollline{position:absolute;left:20px;right:20px;border-top:2px dashed var(--gold);pointer-events:none}
/* Der Grundton muss deckend sein: im Dunkelmodus ist --gold-soft durch-
   sichtig, sonst laeuft die gestrichelte Linie mitten durch die Schrift.
   Deckende Flaeche + Tintenschicht darueber loest das in beiden Modi. */
.tm .sollline span{position:absolute;right:0;top:-11px;
                   background-color:var(--surface);
                   background-image:linear-gradient(var(--gold-soft),var(--gold-soft));
                   color:var(--gold-on-soft);
                   font-size:10px;font-weight:800;padding:2px 9px;border-radius:var(--r-pill)}

/* ---------- Detailzeilen / Korrekturfelder ---------- */
.tm .acct{padding:4px 20px 18px}
.tm .acct table{width:100%;padding:0}
.tm .acct table td{padding:10px 0;background:none}
.tm .pline{padding:12px 20px;border-bottom:1px solid var(--line)}
.tm .pline:last-child{border-bottom:none}
.tm .pline .lab{font-size:12.5px;color:var(--ink-2);margin-bottom:7px;font-weight:600;
                display:flex;justify-content:space-between}
.tm .pline .lab b{color:var(--ink);font-variant-numeric:tabular-nums}
.tm .pausecount{display:inline-block;font-size:11px;font-weight:800;background:var(--gold-soft);
                color:var(--gold-on-soft);border-radius:var(--r-pill);padding:2px 9px;margin-left:7px;cursor:pointer}
.tm .otin,.tm .tin{width:88px;height:36px;border:1px solid var(--line-2);border-radius:var(--r-md);
                   padding:0 10px;font:14px var(--font);text-align:right;background:var(--surface);color:var(--ink)}
.tm .tin{border-color:var(--gold-deep);text-align:left}
.tm .accept{background:var(--good-soft);color:var(--good-on-soft);border:none;border-radius:var(--r-pill);
            height:36px;padding:0 14px;font:800 12.5px var(--font);cursor:pointer;margin-left:6px;
            transition:transform var(--t-fast)}
.tm .accept:hover{transform:translateY(-2px)}

/* Ankerziele nach dem Speichern kurz hervorheben.
   V3.3.1: plus --kopf-raum, sonst springt der Anker hinter die stehende Kopfzeile. */
.tm [id^="tag-"],.tm #konto,.tm #abw,.tm #soll{scroll-margin-top:calc(var(--kopf-raum) + 24px)}
.tm tr[id^="tag-"]:target td{animation:tmflash 1.8s ease}
@keyframes tmflash{0%,45%{background:var(--gold-soft)}100%{background:var(--row-bg)}}

@media(max-width:820px){
  .tm .cal{gap:5px;padding:12px}
  .tm .cell{min-height:52px;padding:5px 6px}
  .tm .dvrow{grid-template-columns:100px 1fr 64px;gap:9px}
  .tm .tahrow{grid-template-columns:96px 1fr}
}

/* ============================================================================
   SPEZIFITAETS-KORREKTUREN — muessen am Dateiende stehen
   .tm table.table td (0,2,1) setzt color und schlug .tm .up (0,2,0);
   Saldospalten waren dadurch tintenfarben statt gruen/rot.
   ============================================================================ */
.tm .up,.tm td.up,.tm table.table td.up{color:var(--good);font-weight:800}
.tm .down,.tm td.down,.tm table.table td.down{color:var(--crit);font-weight:800}
.tm td .tag,.tm td .badge{color:var(--acc-on-soft,var(--ink-2))}
.tm td .t-gold{color:var(--gold-on-soft)} .tm td .t-info{color:var(--info-on-soft)}
.tm td .t-good{color:var(--good-on-soft)} .tm td .t-crit{color:var(--crit-on-soft)}
.tm td .t-plum{color:var(--plum-on-soft)} .tm td .anr{color:var(--gold-text)}

/* ---- V3.1 (31.08.2026): zwei neue Bausteine fuer den ERP-Kern ---- */

/* Rail: kuenftiges Modul — Platzhalter, nicht klickbar ("bald") */
.tm-rail-item.bald{opacity:.5;cursor:default}
.tm-rail-item.bald:hover{background:transparent;color:inherit}
.tm-rail-item.bald .cnt{background:var(--surface-sunken);color:var(--muted)}

/* Kopfmenue: Benutzer oben rechts mit Aufklapp-Menue */
.tm-kopfmenue{position:relative}
.tm-kopfmenue>button{border:none;background:none;padding:0;cursor:pointer;font-family:var(--font)}
.tm-kopfmenue .menu{position:absolute;right:0;top:calc(100% + 8px);min-width:240px;background:var(--surface);
  border-radius:var(--r-lg);box-shadow:var(--shadow-2);padding:8px;display:none;z-index:120}
.tm-kopfmenue.open .menu{display:block}
.tm-kopfmenue .menu .kopf{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px;
  font-size:14px;font-weight:800;color:var(--ink)}
.tm-kopfmenue .menu .kopf small{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-top:2px}
.tm-kopfmenue .menu a{display:block;padding:9px 12px;border-radius:var(--r-md);font-size:13.5px;
  font-weight:600;color:var(--ink);text-decoration:none}
.tm-kopfmenue .menu a:hover{background:var(--surface-sunken);text-decoration:none}


/* ============================================================================
   AUFTRAGSMODUL (BP-02, 31.08.2026) — V3.2.0
   Die Bausteine des im August gebauten Auftragsmoduls, auf die Designsprache
   V3.1 gehoben: nur Variablen aus tokens.css, keine Farbwerte, hell und dunkel.
   Ergaenzt hier statt im Modul (Rahmen: "Fehlt ein Baustein, wird er in
   tm_design/ ergaenzt und im Ergebnis benannt").
   Neu: Mengen-Marken (qk/qs/qz/qu), Karton-Glyphe (kg), Verfuegbarkeits-Ampel
   (avail), Schrittleiste (steps), Detailkopf/-raster (dethead/detgrid/side),
   Positionstabelle (postab/tr-r/tfootrow/tscroll/empty), Schnellerfassung
   (addrow/artbox/artdrop/preview/roundbtns), Verlaufsliste (loglist/commentbox/
   msg-new), Pick-Aufgabe (picktask/pq/stp/donetag/devrow/acts), Gruppenkopf
   (gh), zwei Spalten (twocol), Marken b-gold/b-dark, Knopf .btn.warn.
   ============================================================================ */

/* ---------- Mengen: Kartons (Gold) und lose Stueck (Blau) ---------- */
.tm .qk{color:var(--gold-text);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.tm .qs{color:var(--info);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.tm .qz{color:var(--muted);font-weight:700}
.tm .qu{font-size:11px;font-weight:700;color:var(--muted);margin-left:2px}

/* ---------- Karton-Glyphe: volle Kartons + angebrochener Karton ---------- */
.tm .kg{display:inline-flex;align-items:center;gap:2px;vertical-align:middle}
.tm .kg .k{width:13px;height:16px;border-radius:3px;background:var(--gold);border:1px solid var(--gold-deep);position:relative}
.tm .kg .k::after{content:"";position:absolute;left:2px;right:2px;top:4px;border-top:1px solid var(--gold-ink);opacity:.55}
.tm .kg .p{width:13px;height:16px;border-radius:3px;border:1.5px dashed var(--info);background:var(--info-soft);position:relative;overflow:hidden;margin-left:2px}
.tm .kg .p i{position:absolute;left:0;right:0;bottom:0;background:var(--info);display:block}
.tm .kg .m{font-size:10.5px;font-weight:700;color:var(--gold-text);margin:0 2px}
.tm .kg.lg .k,.tm .kg.lg .p{width:22px;height:28px;border-radius:4px}
.tm .kg.lg .k::after{top:7px}

/* ---------- Verfuegbarkeits-Ampel ---------- */
.tm .avail{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;white-space:nowrap}
.tm .avail i{width:9px;height:9px;border-radius:var(--r-pill);flex:none}
.tm .avail.g{color:var(--good-on-soft)} .tm .avail.g i{background:var(--good)}
.tm .avail.y{color:var(--warn-on-soft)} .tm .avail.y i{background:var(--warn)}
.tm .avail.r{color:var(--crit-on-soft)} .tm .avail.r i{background:var(--crit)}

/* ---------- Marken, die es in V3.1 noch nicht gab ---------- */
.tm .b-gold{background:var(--gold-soft);color:var(--gold-on-soft)}
.tm .b-dark{background:var(--ink);color:var(--page)}
.tm td .b-gold{color:var(--gold-on-soft)} .tm td .b-dark{color:var(--page)}
.tm .btn.warn{background:var(--warn-soft);color:var(--warn-on-soft)}

/* ---------- Schrittleiste (Erfassung, Auftragspipeline) ---------- */
.tm .steps{display:flex;gap:8px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.tm .steps .st{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--muted)}
.tm .steps .st i{width:22px;height:22px;border-radius:var(--r-pill);background:var(--surface-sunken);color:var(--ink-2);
  display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800}
.tm .steps .st.on{color:var(--ink)} .tm .steps .st.on i{background:var(--ink);color:var(--page)}
.tm .steps .st.ok{color:var(--gold-text)} .tm .steps .st.ok i{background:var(--gold);color:var(--gold-ink)}
.tm .steps .sep{width:26px;height:1px;background:var(--line-2)}

/* ---------- Detailkopf und zweispaltiges Detailraster ---------- */
.tm .dethead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.tm .dethead .meta{display:flex;gap:6px 22px;flex-wrap:wrap;color:var(--ink-2);font-size:13.5px;margin-top:8px}
.tm .dethead .meta b{color:var(--ink)}
.tm .detgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.tm .detgrid>div{min-width:0}
.tm .detgrid .side{display:grid;gap:16px;align-content:start}
.tm .side .row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--line);font-size:13.5px;flex-wrap:nowrap}
.tm .side .row:last-child{border-bottom:none}
.tm .side .row b{font-variant-numeric:tabular-nums}
.tm .twocol{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.tm .gh{display:flex;align-items:center;gap:10px;margin:18px 0 8px;flex-wrap:wrap}
.tm .gh h3{margin:0;font-size:16px}

/* ---------- Positionstabellen ---------- */
.tm .tscroll{overflow-x:auto}
.tm .postab td{vertical-align:middle}
.tm .tr-r,.tm th.tr-r,.tm td.tr-r{text-align:right}
.tm .tr-c,.tm th.tr-c,.tm td.tr-c{text-align:center}
.tm .tfootrow td{background:var(--surface-sunken);font-weight:800}
.tm .artcell{display:flex;align-items:center;gap:10px;min-width:0}
.tm .artcell .anr{font-size:15px;min-width:52px}
.tm .aname{font-size:13px;line-height:1.35}
.tm .aname small{display:block;color:var(--muted);font-size:12px}
.tm .empty{padding:40px 24px;text-align:center;color:var(--ink-2)}
.tm .empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}

/* ---------- Schnellerfassung: Artikelsuche mit Vorschau ---------- */
.tm .addrow{display:grid;grid-template-columns:minmax(220px,1.4fr) 130px minmax(300px,1.2fr) auto;gap:12px;
  align-items:end;padding:16px 22px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.tm .addrow .preview{font-size:13px;color:var(--ink-2);line-height:1.5}
.tm .addrow .preview .big{font-size:20px;font-weight:800}
.tm .addrow .preview .eq{color:var(--muted);padding:0 4px}
.tm .artbox{position:relative}
.tm .artdrop{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow-3);
  z-index:30;max-height:300px;overflow:auto;display:none}
.tm .artdrop.on{display:block}
.tm .artdrop button{display:flex;width:100%;text-align:left;border:0;background:none;padding:10px 12px;gap:10px;
  align-items:center;cursor:pointer;font-family:var(--font);font-size:13.5px;border-bottom:1px solid var(--line);color:var(--ink)}
.tm .artdrop button:last-child{border-bottom:none}
.tm .artdrop button:hover,.tm .artdrop button:focus-visible{background:var(--gold-soft)}
.tm .artdrop .meta{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}
.tm .roundbtns{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}

/* ---------- Verlauf und Kommentare ---------- */
.tm .loglist{list-style:none;margin:0;padding:0}
.tm .loglist li{padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;display:flex;gap:10px}
.tm .loglist li:last-child{border-bottom:none}
.tm .loglist .t{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.tm .commentbox{display:flex;gap:8px;margin-top:10px}
.tm .commentbox input{flex:1;min-width:0}
.tm .msg-new{background:var(--gold-soft);border-radius:var(--r-md);padding:9px 10px!important}

/* ---------- Pick-Aufgabe (Lager) ---------- */
.tm .picktask{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(230px,.9fr) auto;gap:18px;
  align-items:center;padding:14px 22px;border-bottom:1px solid var(--line)}
.tm .picktask:last-child{border-bottom:none}
.tm .picktask.dn{background:var(--surface-sunken)}
.tm .picktask.dn .pq{opacity:.55}
.tm .picktask .pq{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tm .picktask .pq .n{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.03em}
.tm .picktask .pq .n small{font-size:12px;color:var(--muted);font-weight:700;margin-left:3px}
.tm .picktask .sub2{font-size:12.5px;color:var(--ink-2);line-height:1.4;margin-top:4px}
.tm .picktask .acts{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;align-items:center}
.tm .picktask .btn{height:48px}
.tm .picktask .devrow{grid-column:1/-1;display:none;gap:10px;align-items:center;padding-top:10px;
  border-top:1px dashed var(--line-2);flex-wrap:wrap;font-size:13px}
.tm .picktask.dev .devrow{display:flex}
/* 20.10.2026: Haken „fehlende Kartons als lose Stück aus dem Regal" — eigene Zeile in der Abweichungszeile */
.tm .picktask .devrow .pk-lose{flex-basis:100%}
/* 22.10.2026: Grund, warum „Umwandlung zurücknehmen" gesperrt ist — eigene Zeile unter den Knöpfen */
.tm .picktask .pk-zurueck-grund{grid-column:1/-1;text-align:right}
@media(max-width:980px){.tm .picktask .pk-zurueck-grund{text-align:left}}
.tm .stp{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.tm .stp button{width:40px;height:40px;border:0;background:var(--surface);color:var(--ink);font-size:19px;cursor:pointer;font-family:var(--font)}
.tm .stp button:hover{background:var(--gold-soft)}
.tm .stp output{min-width:64px;display:grid;place-items:center;font-weight:800;font-size:18px;
  border-left:1px solid var(--line-2);border-right:1px solid var(--line-2);font-variant-numeric:tabular-nums}
.tm .donetag{color:var(--good-on-soft);font-weight:700;font-size:13.5px;white-space:nowrap}
.tm .donetag small{color:var(--muted);font-weight:500}
.tm .donetag.na{color:var(--crit-on-soft)}

/* ---------- Responsiv ---------- */
@media(max-width:1020px){
  .tm .detgrid,.tm .twocol{grid-template-columns:1fr}
}
@media(max-width:980px){
  /* Drei Spalten nebeneinander werden hier zu eng: die grosse Mengenzahl
     schob sich sonst ueber den Artikeltext (Fund bei der Sichtpruefung
     31.08.2026, 800 px). Ab hier untereinander. */
  .tm .picktask{grid-template-columns:1fr;gap:12px}
  .tm .picktask .acts{justify-content:flex-start}
}
@media(max-width:900px){
  .tm .addrow{grid-template-columns:1fr}
}
@media(max-width:700px){
  .tm .picktask .btn{flex:1 1 auto}
  .tm .picktask .pq .n{font-size:26px}
  .tm .dethead{gap:12px}
  .tm .dethead .meta{gap:4px 14px}
  .tm .commentbox{flex-wrap:wrap}
  .tm .commentbox .btn{width:100%}
}
@media print{
  .tm .steps,.tm .commentbox,.tm .addrow{display:none!important}
}

/* ============================================================================
   BILDVERWALTUNG (BP-04, 01.09.2026) — V3.2.2
   Bausteine der ins ERP integrierten Bildverwaltung (Image Manager v5.4),
   uebernommen aus deren eigenem <style>-Block (Rahmen: "Fehlt ein Baustein,
   wird er in tm_design/ ergaenzt und im Ergebnis benannt — keine
   Sonderloesung im Modul"). Nur mit .tm skopiert, sonst wortgleich.
   Entfallen sind die Anmelde- und Kopfleisten-Bausteine der eigenstaendigen
   Seite (login-screen, tm-topbar, tm-mark) — Rail und Kopf kommen jetzt vom
   Kern (BP-04 Fachregel 4). .b-gold besteht schon aus BP-02 und wird hier
   nicht doppelt definiert.
   ============================================================================ */

/* ---------- Arbeitsflaeche ---------- */
.tm .workspace{display:grid;grid-template-columns:var(--sidebar-w,360px) 1fr;gap:18px;align-items:start}
.tm .workspace.collapsed{grid-template-columns:60px 1fr}

/* ---------- Ordnerbaum ----------
   V3.3.1: haengt sich unter die stehende Kopfzeile statt an den Fensterrand. */
.tm .sidebar{position:sticky;top:calc(var(--kopf-raum) + 16px);
             max-height:calc(100vh - var(--kopf-raum) - 40px);
             display:flex;flex-direction:column;overflow:hidden}
.tm .tree{overflow-y:auto;padding:4px 10px 12px}
.tm .workspace.collapsed .tree,.tm .workspace.collapsed .card-h .rulelabel,
.tm .workspace.collapsed .sec-h .rulelabel,.tm .workspace.collapsed .sidebar-tools{display:none}
.tm .workspace.collapsed .card-h,.tm .workspace.collapsed .sec-h{padding:14px 8px;justify-content:center}
.tm .sidebar-tools{display:flex;gap:6px}

.tm .folder-node{display:flex;align-items:center;gap:9px;padding:10px 12px;font-size:14.5px;cursor:pointer;
             user-select:none;border-radius:var(--r-md);font-weight:600;color:var(--ink-2);
             transition:background var(--t-fast),color var(--t-fast)}
.tm .folder-node:hover{background:var(--surface-3);color:var(--ink)}
.tm .folder-node.active{background:var(--gold-soft);color:var(--gold-on-soft);font-weight:800}
.tm .folder-node.droptarget{background:var(--info-soft);color:var(--info-on-soft);
                        box-shadow:inset 0 0 0 2px var(--info)}
.tm .folder-node.dragging{opacity:.45}
.tm .fn-toggle{width:18px;height:18px;flex:0 0 18px;display:grid;place-items:center;color:var(--muted);
           transition:transform var(--t-fast)}
.tm .fn-toggle svg{display:block}
.tm .fn-toggle.open{transform:rotate(90deg)}
.tm .fn-toggle.empty{visibility:hidden}
.tm .fn-icon{flex:0 0 auto;color:var(--gold-deep);display:grid;place-items:center}
.tm .fn-icon svg,.tm .btn svg,.tm .folder-card .fc-icon svg{display:block}
.tm .folder-node.active .fn-icon{color:var(--gold-on-soft)}
.tm .fn-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm .fn-count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:700}
.tm .fn-menu{opacity:0;color:var(--muted);font-size:15px;padding:0 5px;border-radius:var(--r-md);
         transition:opacity var(--t-fast)}
.tm .folder-node:hover .fn-menu,.tm .folder-node.active .fn-menu{opacity:1}
.tm .fn-menu:hover{background:var(--surface-sunken);color:var(--ink)}

/* ---------- Werkzeugleiste ---------- */
.tm .toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 20px}
.tm .breadcrumb{display:flex;align-items:center;gap:7px;flex:1 1 140px;min-width:140px;flex-wrap:wrap;
            font-size:14px;font-weight:600}
.tm .breadcrumb a{cursor:pointer;text-decoration:none;color:var(--gold-text)}
.tm .breadcrumb a:hover{text-decoration:underline}
.tm .breadcrumb .sep{color:var(--muted)}
.tm .breadcrumb strong{font-weight:800;color:var(--ink)}
.tm .check-inline{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);white-space:nowrap;font-weight:600}
.tm .check-inline input{width:auto}
.tm .search-input{flex:1 1 170px;min-width:150px;max-width:260px}
.tm .sort-select{flex:0 0 auto;height:38px;padding:0 12px;font-size:13.5px;max-width:180px;cursor:pointer}

/* ---------- Upload ---------- */
.tm .upload-area{border:2px dashed var(--line-2);border-radius:var(--r-xl);padding:26px;text-align:center;
             background:var(--surface-2);margin:0 20px 18px;transition:border-color var(--t-fast),background var(--t-fast)}
.tm .upload-area.dragover{border-color:var(--gold-deep);background:var(--gold-soft)}
.tm .upload-area h3{font-size:15px;margin:0 0 4px;font-weight:800}
.tm .upload-area p{margin:0 0 14px;font-size:13px;color:var(--ink-2)}
.tm .upload-buttons{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
#fileInput,#folderInput{display:none}
.tm .progress-wrap{margin-top:16px;display:none}
.tm .progress-bar{height:9px;background:var(--surface-sunken);border-radius:var(--r-pill);overflow:hidden}
.tm .progress-bar span{display:block;height:100%;width:0;border-radius:var(--r-pill);background:var(--gold-grad);
                   transition:width .25s cubic-bezier(.4,0,.2,1)}
.tm .progress-text{font-size:12.5px;color:var(--ink-2);margin-top:7px;font-weight:600}

/* ---------- Auswahlleiste ---------- */
/* V3.3.1: top plus --kopf-raum — sonst steht die Leiste hinter der Kopfzeile. */
.tm .selection-bar{display:none;align-items:center;gap:9px;flex-wrap:wrap;background:var(--gold-grad);
               color:var(--gold-ink);padding:11px 18px;margin:0 20px 16px;border-radius:var(--r-pill);
               position:sticky;top:calc(var(--kopf-raum) + 10px);z-index:40;box-shadow:var(--gold-shadow)}
.tm .selection-bar.visible{display:flex}
.tm .selection-bar .count{font-weight:800;font-size:14px;margin-right:6px}
.tm .selection-bar .btn{background:rgba(255,255,255,.28);color:var(--gold-ink);height:34px;font-size:13px;
                    padding:0 15px;box-shadow:none}
.tm .selection-bar .btn:hover{background:rgba(255,255,255,.5);transform:none}
.tm .selection-bar .btn.danger{background:var(--crit);color:var(--on-accent)}
.tm .selection-bar .btn.danger:hover{background:var(--crit);filter:brightness(1.1)}

/* ---------- Galerie ---------- */
.tm .gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:16px;padding:0 20px 20px}
.tm .folder-card{background:var(--surface-2);border-radius:var(--r-lg);padding:19px 18px;display:flex;align-items:center;
             gap:15px;cursor:pointer;align-self:start;transition:transform var(--t),background var(--t-fast),box-shadow var(--t)}
.tm .folder-card:hover{background:var(--gold-soft);transform:translateY(-3px);box-shadow:var(--shadow-2)}
.tm .folder-card.droptarget{background:var(--info-soft);box-shadow:inset 0 0 0 2px var(--info)}
.tm .folder-card .fc-icon{color:var(--gold-deep);display:grid;place-items:center;flex:0 0 auto}
.tm .folder-card h4{font-size:15.5px;margin:0 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:800}
.tm .folder-card p{font-size:12.5px;color:var(--muted);margin:0;font-weight:600}

.tm .image-card{background:var(--surface-2);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;position:relative;
            align-self:start;transition:transform var(--t),box-shadow var(--t)}
.tm .image-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.tm .image-card.selected{box-shadow:inset 0 0 0 3px var(--gold-deep),var(--shadow-2)}
.tm .image-card.opened{box-shadow:inset 0 0 0 3px var(--info)}
.tm .image-card.dragging{opacity:.45}
.tm .card-check{position:absolute;top:9px;left:9px;z-index:5;width:26px;height:26px;border-radius:var(--r-md);
            background:var(--surface);display:grid;place-items:center;opacity:0;box-shadow:var(--shadow-1);
            transition:opacity var(--t-fast)}
.tm .image-card:hover .card-check,.tm .image-card.selected .card-check,.tm.selection-mode .card-check,
body.selection-mode .card-check{opacity:1}
.tm .card-check input{width:15px;height:15px;cursor:pointer;accent-color:var(--gold-deep)}
.tm .image-preview{width:100%;height:168px;background:var(--surface-3);display:grid;place-items:center;overflow:hidden}
.tm .image-preview img{max-width:100%;max-height:100%;object-fit:contain}
.tm .image-info{padding:11px 13px}
.tm .image-info h4{font-size:13px;margin:0 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.tm .image-info p{font-size:11px;color:var(--muted);margin:0;font-weight:600}
.tm .empty-state{text-align:center;padding:52px 20px;color:var(--muted);font-size:15px;font-weight:600}

/* ---------- Detail ---------- */
.tm .detail{margin:0 0 18px}
.tm .detail-content{display:grid;grid-template-columns:250px 1fr;gap:26px;padding:20px}
.tm .preview-container{background:var(--surface-3);border-radius:var(--r-lg);padding:14px;display:grid;
                   place-items:center;min-height:230px}
.tm .preview-container img{max-width:100%;max-height:270px;object-fit:contain}
.tm .detail-fields{display:flex;flex-direction:column;gap:16px}
.tm .input-wrapper{display:flex;gap:9px}
.tm .input-wrapper .btn{flex:0 0 auto}
.tm .detail textarea{min-height:72px;resize:vertical;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}
.tm .detail input[readonly]{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;background:var(--surface-3)}
.tm .info-box{padding:13px 15px;background:var(--surface-2);border-radius:var(--r-md);font-size:13px}
.tm .info-box p{margin:0 0 5px}
.tm .info-box p:last-child{margin:0}
.tm .action-buttons{display:flex;gap:9px;padding-top:16px}

/* ---------- Dialog ---------- */
.tm .modal-backdrop{display:none;position:fixed;inset:0;background:rgba(15,12,25,.55);backdrop-filter:blur(3px);
                z-index:200;align-items:center;justify-content:center;padding:20px}
.tm .modal-backdrop.visible{display:flex}
.tm .modal{background:var(--surface);border-radius:var(--r-xl);width:100%;max-width:480px;
       box-shadow:var(--shadow-3);overflow:hidden}
.tm .modal .pad{padding:24px}
.tm .modal h3{font-size:18px;margin:0 0 6px;font-weight:800;letter-spacing:-.02em}
.tm .modal .modal-text{font-size:13.5px;color:var(--ink-2);margin:0 0 18px}
.tm .modal-body>*{margin-bottom:13px}
.tm .modal-actions{display:flex;gap:9px;justify-content:flex-end;padding:16px 24px;background:var(--surface-2)}
.tm .menu-list{display:flex;flex-direction:column;gap:8px}
.tm .menu-list .btn{justify-content:flex-start;width:100%}
.tm .note-txt.slughint{margin-top:2px}

/* ---------- Hinweis (eigener Toast der Bildverwaltung, unabhaengig vom Einmal-Hinweis des Kerns) ---------- */
.tm .imgtoast{position:fixed;bottom:22px;right:22px;background:var(--ink);color:var(--page);padding:14px 20px;
       border-radius:var(--r-pill);box-shadow:var(--shadow-3);z-index:1000;max-width:430px;font-size:14px;
       font-weight:600;display:none}
[data-theme="dark"] .tm .imgtoast{background:var(--surface-3);color:var(--ink)}
.tm .imgtoast.error{background:var(--crit-grad);color:var(--on-accent)}
.tm .imgtoast.ok{background:var(--good-grad);color:var(--on-accent)}

/* ---------- Anpassungen an die Bausteine ---------- */
.tm label.field{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
                font-weight:800;margin-bottom:7px}
.tm .btn.icon{width:38px;height:38px;padding:0;justify-content:center;font-size:15px;border-radius:var(--r-md)}
.tm .btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.tm .btn.ghost.active{background:var(--gold-soft);color:var(--gold-on-soft)}
.tm .card-h .rulelabel,.tm .sec-h .rulelabel{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}

@media (max-width:980px){
  .tm .workspace{grid-template-columns:1fr}
  .tm .sidebar{position:static;max-height:none}
  .tm .detail-content{grid-template-columns:1fr}
}

/* ============================================================================
   BILD-GENERATOR (BP-05)
   Aussenseiten (/generator, /generator/chat): Rail bleibt stehen, das
   eigentliche Werkzeug (byte-nahe Kopie von produktbild-generator.html bzw.
   bild-chat.html, eigenes <head><body>) laeuft unveraendert in einem iframe.
   Nur der Rahmen um das iframe gehoert hierher — das Werkzeug selbst bringt
   nach BP-05 Fachregel 5 (Optik-Tiefe B) seine eigene, auf tokens.css
   umgestellte Formatierung mit und laedt sie eigenstaendig.
   ============================================================================ */
.tm .toolframe-wrap{height:calc(100vh - 176px);min-height:480px;border-radius:var(--r-xl);
       overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-1);background:var(--surface)}
.tm .toolframe-wrap iframe{display:block;width:100%;height:100%;border:0;background:var(--surface)}
@media (max-width:700px){
  .tm .toolframe-wrap{height:calc(100vh - 216px);min-height:420px;border-radius:var(--r-lg)}
}

/* ==========================================================================
   GENERATOR-WERKZEUGUEBERSICHT (BP-05 Nachtrag, 01.09.2026) — V3.2.4
   Werkzeug-Kacheln: gleiche .tm-tile, aber der grosse Wert ist ein Name,
   keine Zahl — kleinere Schrift, kein Tabellenziffern-Zwang.
   ========================================================================== */
.tm .tm-tile.tool .v{font-size:21px;letter-spacing:-.02em;font-variant-numeric:normal;margin-top:6px}
.tm a.tm-tile{text-decoration:none;display:block}
.tm a.tm-tile:hover{text-decoration:none}

/* V3.2.5 BILDLAUFLEISTE — mit V3.8.0 (14.09.2026) ENTFERNT. Es gibt nur noch
   EINE Regel dafuer, am Ende dieser Datei („Scrollbalken — eine Regel"). */

/* ==========================================================================
   DASHBOARD-ERWEITERUNG (BP-25 Abschnitt 17, 01.09.2026) — V3.2.6
   Zwei Zustaende der Startseite, beide ohne einen einzigen Farbwert:

   1. .card.bald — Vorschau-KARTE eines Moduls, das es noch nicht gibt. Sie
      steht in den Listen-Zonen neben den echten Listen-Panels und traegt
      darum deren Aufbau (.card + .sec-h); oben in der Kennzahl-Reihe stehen
      nur Kacheln mit einer echten Zahl (Auftrag Haris, 01.09.2026).
      Vorbild der Daempfung ist der bald-Zustand der Rail
      (.tm-rail-item.bald, oben): ruhige Flaeche, kein Schatten, kein
      Klickziel; statt der Kopfzahl der Chip „bald", statt Zeilen eine Zeile
      Text. Es stehen ausschliesslich Token darin — hell wie dunkel
      automatisch richtig.

   2. Das Anpassen-Raster — die Bausteine als Mini-Kacheln statt als
      Titelliste, darunter die Ablage „Verfuegbare Bausteine" (.vorrat).
      Ohne JavaScript traegt jede Mini-Kachel ihr sichtbares Haekchen; erst das
      Skript setzt .js auf das Panel und blendet die Haekchen aus, weil dann
      Ziehen und × die Bedienung uebernehmen.
   ========================================================================== */

/* ---------- 1. Vorschau-Karte „bald" ---------- */
.tm .card.bald{background:var(--surface-sunken);box-shadow:none;
               border:1px dashed var(--line-2);opacity:.72;cursor:default}
.tm .card.bald .rulelabel{color:var(--ink-2)}
/* Ohne .a-*-Familie faellt der Chip auf --surface-sunken zurueck — das ist hier
   der Kartengrund. Er bekommt deshalb die helle Flaeche als Gegensatz. */
.tm .card.bald .tag{background:var(--surface);color:var(--ink-2)}
/* Die eine Textzeile sitzt direkt unter dem Kopf, der schon 12 px abschliesst */
.tm .card.bald .pad{padding-top:2px}

/* ---------- 2. Anpassen-Raster und Ablage ---------- */
.tm .tm-mini-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
                  gap:10px;padding:0 22px 14px;min-height:56px}
.tm .tm-mini-grid.vorrat{margin:0 22px 14px;padding:12px;min-height:78px;
                         border-radius:var(--r-lg);background:var(--surface-sunken)}
.tm .tm-mini-grid.ziel{outline:2px dashed var(--line-2);outline-offset:2px;border-radius:var(--r-lg)}
.tm .tm-mini{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r-lg);
             background:var(--surface-2);box-shadow:var(--shadow-1);
             transition:box-shadow var(--t-fast),opacity var(--t-fast)}
.tm .tm-mini-grid.vorrat .tm-mini{background:var(--surface)}
.tm .tm-mini.zieht{opacity:.4;box-shadow:none}
.tm .tm-mini .ic{flex:0 0 auto;width:30px;height:30px;border-radius:var(--r-md);
                 display:grid;place-items:center;background:var(--surface-sunken);color:var(--ink-2)}
.tm .tm-mini .ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;
                     stroke-linecap:round;stroke-linejoin:round}
.tm .tm-mini .t{flex:1 1 auto;min-width:0}
.tm .tm-mini .t b{display:block;font-size:13px;font-weight:800;line-height:1.3;
                  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm .tm-mini .t .note-txt{display:block;font-size:11px;line-height:1.35;
                          overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm .tm-mini .chk{flex:0 0 auto}
/* Chips „bald" und „neu" sitzen in einer 240-px-Zeile — knapper als sonst */
.tm .tm-mini .tag,.tm .tm-mini .badge{flex:0 0 auto;padding:3px 8px;font-size:10.5px}
.tm .tm-mini .btn.sm{height:30px;padding:0 10px;flex:0 0 auto}
.tm .tm-mini .weg{flex:0 0 auto;width:26px;height:26px;padding:0;border:none;cursor:pointer;
                  border-radius:var(--r-pill);background:var(--surface-sunken);color:var(--ink-2);
                  font:800 15px/1 var(--font);transition:background var(--t-fast),color var(--t-fast)}
.tm .tm-mini .weg:hover{background:var(--crit-soft);color:var(--crit-on-soft)}
.tm .tm-mini-grid.vorrat .tm-mini .weg:hover{background:var(--good-soft);color:var(--good-on-soft)}
/* Mit Skript fuehren Ziehen und ×; ohne Skript bleibt das Haekchen die Bedienung. */
.tm .tm-anpassen.js .tm-mini{cursor:grab;user-select:none}
.tm .tm-anpassen.js .tm-mini-grid.vorrat .tm-mini{cursor:pointer}
.tm .tm-anpassen.js .tm-mini .chk{display:none}
@media (max-width:700px){
  .tm .tm-mini-grid{grid-template-columns:1fr;padding:0 14px 12px}
  .tm .tm-mini-grid.vorrat{margin:0 14px 12px}
}

/* ==========================================================================
   RAIL-UNTERMENUES (Auftrag Haris, 01.09.2026) — V3.2.8
   Module mit Unterseiten tragen ihre Seiten direkt in der Schiene.

   Aufgeklappt wird SERVERSEITIG: layout.php setzt .auf an .tm-rail-modul,
   sobald das Modul aktiv ist. Der Klick auf den Hauptpunkt oeffnet das
   Untermenue damit ohne eine Zeile JavaScript. Der Pfeil ist der Zusatz — er
   erscheint erst, wenn das Skript .js an die Schiene setzt, und klappt auch
   ein nicht aktives Modul auf.

   Unterpunkte sind eingerueckt an einer Fuehrungslinie, kleiner und ruhiger
   als die Hauptpunkte; der aktive traegt einen goldenen Strich auf der Linie.
   Nur Token, kein Farbwert (Regel Kopfzeile). Unter 1150 px blendet die
   RESPONSIV-Regel oben die ganze Schiene aus — die Untermenues teilen dieses
   Verhalten, es gibt dort keine eigene Bedienung zu retten.
   ========================================================================== */
.tm-rail-modul{display:flex;flex-direction:column;gap:3px}
.tm-rail-zeile{position:relative;display:flex;align-items:center}
.tm-rail-zeile>.tm-rail-item{flex:1 1 auto;min-width:0}
.tm-rail.js .tm-rail-zeile>.tm-rail-item{padding-right:36px}

/* ---------- Pfeil am Hauptpunkt (nur mit Skript) ---------- */
.tm-rail-auf{display:none;position:absolute;right:5px;top:50%;transform:translateY(-50%);
             width:26px;height:26px;padding:0;border:none;border-radius:var(--r-md);cursor:pointer;
             background:transparent;color:var(--rail-ink);place-items:center;
             transition:background var(--t-fast),color var(--t-fast)}
.tm-rail.js .tm-rail-auf{display:grid}
.tm-rail-auf:hover{background:var(--rail-hover);color:var(--ink)}
.tm-rail-item.on+.tm-rail-auf{color:var(--rail-active-ink)}
.tm-rail-auf svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;
                 stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-fast)}
.tm-rail-modul.auf .tm-rail-auf svg{transform:rotate(90deg)}

/* ---------- Die Unterpunkte ----------
   Mit .tm davor geschrieben: ohne den Vorsatz gewaenne die allgemeine Regel
   .tm a{color:var(--gold-text)} (Dateianfang) — sie ist um ein Element
   spezifischer als eine einzelne Klasse. Die Unterpunkte sollen aber ruhiger
   stehen als die Hauptpunkte. */
.tm-rail-sub{display:none;flex-direction:column;gap:1px;margin:2px 0 6px 21px;padding-left:11px;
             border-left:2px solid var(--line-2)}
.tm-rail-modul.auf .tm-rail-sub{display:flex}
.tm .tm-rail-subitem{position:relative;display:block;padding:7px 11px;border-radius:var(--r-md);
                     font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:none;
                     white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
                     transition:background var(--t-fast),color var(--t-fast)}
.tm .tm-rail-subitem:hover{background:var(--rail-hover);color:var(--ink);text-decoration:none}
.tm .tm-rail-subitem.on{background:var(--rail-hover);color:var(--ink);font-weight:800}
/* Goldener Strich auf der Fuehrungslinie: 11 px Innenabstand + 2 px Linie */
.tm .tm-rail-subitem.on::before{content:"";position:absolute;left:-13px;top:50%;transform:translateY(-50%);
                                width:2px;height:17px;border-radius:var(--r-pill);background:var(--gold)}

/* ==========================================================================
   V3.3.0 — FARBFAMILIEN (Auftrag Haris, 02.09.2026)
   Anlass: in der Zeiterfassung war jede Kennzahl gelb. Gelb hiess damit
   nichts mehr. Zehn Familien statt fuenf, und jede traegt eine Aussage.

   WELCHE FARBE WOFUER — gilt fuer das ganze System, nicht je Seite:
     a-gold    Auftraege, Picks, Benutzer                (Marke)
     a-good    erledigt, verfuegbar, positiv
     a-crit    negativ, ueberfaellig, Fehler
     a-amber   offen, wartet, unerledigt
     a-teal    Zeit, Arbeitszeit, Stundenkonto, Anwesenheit
     a-slate   neutrale Zaehler ohne Wertung (Sonntag, Protokoll, Jobs)
     a-indigo  Kunden, Parteien
     a-plum    Rollen, Stammdaten, Marken
     a-info    System, Verwaltung, Bildbearbeitung
     a-rose    Urlaub, Krank, Abwesenheit

   DYNAMISCH, wo der Wert die Aussage traegt — die Kachel waehlt ihre
   Familie dann im PHP, nicht hier:
     Saldo/Stundenkonto  negativ a-crit · positiv a-good · null a-teal
     „offen"-Zaehler     groesser 0 a-amber · sonst a-slate

   Die Farbwerte stehen ausschliesslich in tokens.css (Regel Kopfzeile):
   hier wird nur zugeordnet. Ein --tile-on wie bei .a-gold braucht keine
   der fuenf neuen Familien — ihre Verlaeufe sind dunkel genug fuer weissen
   Text, deshalb entfaellt auch der Sonderfall .tm-tile.a-gold .ic.
   ========================================================================== */
.a-teal{--acc:var(--teal);--acc-soft:var(--teal-soft);--acc-on-soft:var(--teal-on-soft);--acc-grad:var(--teal-grad);--acc-shadow:var(--teal-shadow)}
.a-amber{--acc:var(--amber);--acc-soft:var(--amber-soft);--acc-on-soft:var(--amber-on-soft);--acc-grad:var(--amber-grad);--acc-shadow:var(--amber-shadow)}
.a-rose{--acc:var(--rose);--acc-soft:var(--rose-soft);--acc-on-soft:var(--rose-on-soft);--acc-grad:var(--rose-grad);--acc-shadow:var(--rose-shadow)}
.a-slate{--acc:var(--slate);--acc-soft:var(--slate-soft);--acc-on-soft:var(--slate-on-soft);--acc-grad:var(--slate-grad);--acc-shadow:var(--slate-shadow)}
.a-indigo{--acc:var(--indigo);--acc-soft:var(--indigo-soft);--acc-on-soft:var(--indigo-on-soft);--acc-grad:var(--indigo-grad);--acc-shadow:var(--indigo-shadow)}

/* Altbau-.kpi: dieselben Familien auch dort, damit eine Seite, die noch
   nicht auf .tm-tile umgestellt ist, nicht wieder in Gold zurueckfaellt.
   Neue Seiten nehmen .tm-tile mit .a-* — .kpi bleibt der Rueckfall. */
.tm .kpi.k-teal{--acc-soft:var(--teal-soft);--acc-on-soft:var(--teal-on-soft)}
.tm .kpi.k-amber{--acc-soft:var(--amber-soft);--acc-on-soft:var(--amber-on-soft)}
.tm .kpi.k-rose{--acc-soft:var(--rose-soft);--acc-on-soft:var(--rose-on-soft)}
.tm .kpi.k-slate{--acc-soft:var(--slate-soft);--acc-on-soft:var(--slate-on-soft)}
.tm .kpi.k-indigo{--acc-soft:var(--indigo-soft);--acc-on-soft:var(--indigo-on-soft)}

/* Kachelreihen mit fuenf oder sechs Kacheln setzen ihr Raster per
   inline-style (Muster auftrag/rueckstand.php). Ein inline-style schlaegt
   jede Regel aus der Datei — ohne die beiden Zeilen hier blieben fuenf
   Kacheln auch auf dem Telefon in einer Reihe stehen. Dieselben
   Haltepunkte wie die RESPONSIV-Regel oben, damit alles gleichzeitig
   umbricht. */
@media(max-width:1150px){
  .tm .tm-tiles[style]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:640px){
  .tm .tm-tiles[style]{grid-template-columns:1fr!important}
}

/* ==========================================================================
   V3.3.1 — FESTE SEITENLEISTE UND KOPFZEILE (Auftrag Haris, 02.09.2026)
   Anlass: wer in einer langen Liste (Leads, Auftraege) weit scrollt, verliert
   Schiene und Kopf aus dem Blick und muss zum Wechseln erst wieder hochfahren.

   Beide bleiben jetzt stehen — aber sie sollen dabei NICHT wie abgetrennte
   Balken wirken, sondern wie bisher Teil derselben Flaeche:

     Schiene   position:sticky statt mitlaufend. Kein Rand, kein Kasten, kein
               Schatten — der Grund bleibt transparent wie zuvor. Wird das
               Menue laenger als das Fenster, scrollt die Schiene fuer sich;
               ihre Bildlaufleiste ist die schmale aus V3.2.5, aber ruhend
               unsichtbar und erst bei Hover oder Tastaturfokus da.

     Kopfzeile position:sticky innerhalb von .tm-main. Ihr Grund ist der
               Seitengrund selbst — gleiche Farbe, gleicher Lichtschleier,
               gleiche Lage im Fenster (--page-glow mit
               background-attachment:fixed, siehe tokens.css). Im Ruhezustand
               ist dadurch ueberhaupt nichts zu sehen: keine Linie, kein
               Kasten, kein Schatten. Nach unten laeuft der Grund ueber 18 px
               nach transparent aus, damit der durchziehende Inhalt weich
               verschwindet statt an einer Kante abzureissen. Erst wenn
               gescrollt wurde, legt das Skript in layout.php die Klasse
               „gescrollt" an und der Streifen bekommt --kopf-schatten:
               Haarlinie plus sehr weicher Abfall.

   Kein Layout-Sprung: sticky nimmt die Elemente nicht aus dem Fluss, Hoehe
   und Abstaende bleiben, wie sie sind. Alles andere, was sich an den oberen
   Fensterrand haengt (Ordnerbaum der Bildverwaltung, Auswahlleiste,
   Sprungmarken), rechnet mit --kopf-raum und rutscht entsprechend nach unten.
   Wie ueberall nur Token, kein Farbwert.
   ========================================================================== */

/* ---------- Schiene bleibt stehen ---------- */
/* align-self:start ist noetig, weil ein Rasterfeld sonst auf volle Zeilenhoehe
   gedehnt wird — dann haette sticky keinen Weg, an dem es kleben koennte. */
.tm-rail{position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto}

/* Die eigene Bildlaufleiste der Schiene aus V3.3.1 ist mit V3.8.0
   (14.09.2026) ENTFERNT — eine Regel fuer alle Bereiche am Dateiende
   („Scrollbalken — eine Regel"). */

/* ---------- Kopfzeile bleibt stehen ---------- */
/* z-index 50 liegt ueber allem im Inhalt (hoechster Wert dort: .selection-bar
   mit 40) und unter den Dialogen (.tm-modal-bg 60, .modal-backdrop 200) sowie
   unter dem Benutzermenue, das mit 120 im Stapel der Kopfzeile selbst sitzt.

   :first-child ist noetig und nicht Zierde: .tm-head wird an einzelnen Stellen
   ein zweites Mal als Werkzeugzeile im Seiteninhalt benutzt (Suchfeld in
   verwaltung/benutzer.php). Nur die erste, vom Kern gesetzte Kopfzeile bleibt
   stehen — sonst kaemen zwei Zeilen an derselben Stelle uebereinander zu
   liegen. */
.tm-main>.tm-head:first-child{position:sticky;top:0;z-index:50}
.tm-main>.tm-head:first-child::before,.tm-main>.tm-head:first-child::after{
  content:"";position:absolute;pointer-events:none;
  left:calc(var(--gutter) * -1);right:calc(var(--gutter) * -1)}

/* Der Streifen: bis 20 px ueber die Kopfzeile hinauf, das ist der Innenabstand
   von .tm-main. Er traegt denselben Grund wie die Seite — Farbe UND
   Lichtschleier, an derselben Stelle im Fenster. Ohne den Schleier zeichnete
   sich im Dunkeln ein Rechteck ab. Beim Malen liegt er hinter der
   Beschriftung, aber vor dem Seiteninhalt (negatives z-index im eigenen
   Stapel). Den Schatten des gescrollten Zustands traegt er ebenfalls. */
.tm-main>.tm-head:first-child::before{z-index:-1;top:-20px;bottom:0;
  background-color:var(--page);background-image:var(--page-glow);background-attachment:fixed;
  transition:box-shadow var(--t)}
.tm-main>.tm-head:first-child.gescrollt::before{box-shadow:var(--kopf-schatten)}

/* Der weiche Abschluss: 18 px unter der Kopfzeile, noch innerhalb ihres
   22-px-Aussenabstands, beruehrt also keinen Inhalt. Er traegt exakt denselben
   Grund wie der Streifen darueber und laeuft mit einer Maske nach unten aus —
   nicht mit einem eigenen Farbverlauf, denn der haette den Lichtschleier nicht
   dabei und genau an der Nahtstelle wieder eine Kante erzeugt. Der
   Maskenverlauf braucht nur Deckung, keine Farbe; --ink ist in beiden Modi
   deckend und steht hier allein dafuer. Er liegt eine Stufe tiefer als der
   Streifen, damit dessen Schatten darauf faellt. */
.tm-main>.tm-head:first-child::after{z-index:-2;top:100%;height:18px;
  background-color:var(--page);background-image:var(--page-glow);background-attachment:fixed;
  -webkit-mask-image:linear-gradient(to bottom,var(--ink),transparent);
          mask-image:linear-gradient(to bottom,var(--ink),transparent)}

/* Unter 1150 px blendet die RESPONSIV-Regel die Schiene ganz aus; dort bleibt
   nur die Kopfzeile stehen — dafuer ist nichts zusaetzlich zu setzen.
   Seit BP-31 (04.09.2026) gilt das nicht mehr: die Schiene ist unter 900 px
   eine Ueberlagerung und zwischen 900 und 1150 px eingeklappt im Raster
   (Abschnitt „MOBIL (BP-31, M1)"). Beim Drucken steht beides still. */
@media print{
  .tm-main>.tm-head:first-child{position:static}
  .tm-main>.tm-head:first-child::before,.tm-main>.tm-head:first-child::after{display:none}
}

/* ============================================================================
   V3.4.0 — POSITIONSZEILEN LESBAR (Auftrag Haris, 02.09.2026)
   Anlass: Auftragsdetail und Kommissionierung — „alles sehr klein, sehr viel
   Zwischenraum". Artikelnummer, Artikelname und die Karton-Piktogramme (.kg)
   wachsen in Positionstabellen (.postab); die Artikelzelle (.artcell) gilt
   ueberall, also auch in den Pick-Zeilen. Ein Umbau der Pick-Zeile (Piktogramme,
   Spalten wie die Auftragstabelle) wurde am selben Tag zurueckgenommen —
   die Kommissionierung zeigt je Aufgabe bewusst nur ihre eigene Menge.
   Regel: Groessen nur hier — keine Seite setzt eigene Schriftgroessen fuer
   .anr/.aname/.kg. Farben unveraendert (nur Tokens).
   ============================================================================ */
.tm .artcell{gap:14px}
.tm .artcell .anr{font-size:20px;min-width:72px;letter-spacing:-.01em}
.tm .aname{font-size:15.5px;line-height:1.3;font-weight:600}
.tm .aname small{font-size:12.5px;font-weight:600;margin-top:2px}
.tm .postab tbody td{padding-top:14px;padding-bottom:14px}
.tm .postab .qk,.tm .postab .qs{font-size:15.5px}
.tm .postab .kg{gap:3px;margin-top:4px}
.tm .postab .kg .k,.tm .postab .kg .p{width:22px;height:28px;border-radius:4px}
.tm .postab .kg .k::after{top:7px}
.tm .postab .kg .m{font-size:12.5px}
.tm .picktask .sub2{font-size:13.5px}
/* Die groessere Artikelzelle braucht in der Pick-Zeile Platz: Artikelspalte nie unter
   260 px; unter 1400 px Fensterbreite (Seitenspalte daneben) die drei Bloecke untereinander —
   loest den alten Umbruchpunkt 980 px ab (Sichtpruefung 1280 px: Mengenwahl lag ueber dem Artikel). */
.tm .picktask{grid-template-columns:minmax(260px,1.3fr) minmax(200px,.9fr) auto}
@media(max-width:1400px){
  .tm .picktask{grid-template-columns:1fr;gap:12px}
  .tm .picktask .acts{justify-content:flex-start}
}

/* ============================================================================
   V3.4.1 — LAUFLEISTE DER SCHIENE LINKS, ZAEHLMARKE BLEIBT IN DER KACHEL
   (Auftrag Haris, 02.09.2026, Screenshot Pick-Liste)
   Befund: Sobald das Menue laenger als das Fenster ist, nimmt die Laufleiste
   (11 px) rechts Platz weg; „Kommissionierung 3" wurde dadurch breiter als die
   Kachel, die Zaehlmarke stand halb ausserhalb. Zudem soll die Laufleiste am
   linken Rand der Schiene liegen, nicht zwischen Schiene und Inhalt.
   Loesung: Schreibrichtung der Schiene rtl (Laufleiste wandert nach links),
   Kinder wieder ltr; Rinne dauerhaft reserviert (Rinnen-Eigenschaft), damit
   nichts springt, wenn das Menue kuerzer wird; Laufleiste 6 px statt 11 px;
   linker Innenabstand 4 px + 6 px Rinne = 10 px, rechts 10 px — die Kacheln
   werden 8 px breiter als vorher, die Marke passt auch mit Laufleiste hinein.
   Optik der Leiste unveraendert (ruhend unsichtbar, bei Hover/Fokus da);
   die „dezentere" Variante fuer das ganze System ist eine offene Auswahl.
   ========================================================================== */
/* Die Masse der Leiste selbst sind mit V3.8.0 (14.09.2026) ENTFERNT — sie
   stehen einmal am Dateiende („Scrollbalken — eine Regel"). Hier bleibt nur
   die Schreibrichtung; sie ist Geometrie, keine Leiste. Seit V3.6.1 scrollt
   ohnehin nicht die Schiene, sondern .tm-rail-menue, und die Zeile darunter
   wird dort ueberschrieben. */
.tm-rail{direction:rtl;padding:20px 10px 20px 4px}
.tm-rail>*{direction:ltr}

/* ============================================================================
   V3.4.2 — EIN KOPFBAND UND EINE DEZENTE LAUFLEISTE (Auftrag Haris, 02.09.2026)
   Befund (Screenshots Parteien): Beim Scrollen der Schiene verschwand das Logo;
   die stehende Kopfzeile rechts war niedriger als der Logoblock links — zwei
   verschiedene Baender statt einem. Und die Laufleisten (11 px, immer sichtbar)
   waren zu praesent.

   1. Kopfband: Der Logoblock der Schiene klebt jetzt oben (sticky) und traegt
      denselben Grund wie die Kopfzeile (Seitenfarbe + Lichtschleier, fixed) samt
      weichem Auslauf und Schatten im gescrollten Zustand. Beide Seiten haben
      dieselbe Hoehe --kopf-raum (84 px = 20 + 44 + 20); alles, was unter dem
      Band andockt, rechnet weiter mit --kopf-raum.
   2. Laufleiste, Variante 1 („hauchduenn, nur beim Zeigen"): 5 px, rund, keine
      Spur, unsichtbar, bis die Maus ueber dem Bereich ist oder gerade gescrollt
      wird (Klasse .scrollt, setzt layout.php fuer ~0,9 s). Die Fensterleiste
      erscheint nur beim Scrollen. Chromium/Safari ueber die Webkit-Wahler;
      dort muessen Breite und Farbe der Leiste auf auto stehen, sonst ignoriert
      Chrome die Webkit-Regeln (Befund V3.4.1). Firefox ueber die
      Standard-Eigenschaften. Loest V3.2.5 und die Leistenregeln aus V3.3.1 ab.
   Wie ueberall nur Token, kein Farbwert.
   ========================================================================== */

/* ---------- 1. Kopfband ---------- */
.tm-rail{padding-top:0}
.tm-rail-logo{position:sticky;top:0;z-index:3;box-sizing:border-box;height:var(--kopf-raum);
  margin:0 -10px 0 -4px;padding:20px 18px 20px 12px;
  background-color:var(--page);background-image:var(--page-glow);background-attachment:fixed;
  transition:box-shadow var(--t)}
.tm-rail-logo::after{content:"";position:absolute;left:0;right:0;top:100%;height:18px;pointer-events:none;
  background-color:var(--page);background-image:var(--page-glow);background-attachment:fixed;
  -webkit-mask-image:linear-gradient(to bottom,var(--ink),transparent);
          mask-image:linear-gradient(to bottom,var(--ink),transparent)}
.tm-rail-logo.gescrollt{box-shadow:var(--kopf-schatten)}
.tm-main>.tm-head:first-child{min-height:calc(var(--kopf-raum) - 20px)}
@media print{.tm-rail-logo{position:static}.tm-rail-logo::after{display:none}}

/* ---------- 2. Laufleiste ---------- */
/* Fassung 2 (5 px, nur beim Zeigen) — mit V3.8.0 (14.09.2026) ENTFERNT.
   Eine Regel am Dateiende („Scrollbalken — eine Regel"). */

/* ============================================================================
   V3.4.3 — KOPFBAND NACHGEBESSERT, LAUFLEISTE NUR BEIM ZEIGEN (Haris, 02.09.2026)
   Befunde aus den Screenshots zu V3.4.2:
   a) Die Kopfzeile rutschte beim Scrollen um 20 px nach oben (sticky top:0,
      aber im Ruhezustand bei 20 px Innenabstand) — dadurch war ihr Band
      64 statt 84 px hoch und ungleich zum Logoblock. Jetzt klebt sie bei 20 px.
   b) Der weiche Auslauf unter dem Logo lag ueber dem Eintrag „Start". Er
      erscheint jetzt nur im gescrollten Zustand; dazu 6 px Luft unter dem Band.
   c) Die beiden Baender warfen an ihrer Nahtstelle seitlich Schatten
      („Schattierung zum Logo hin"). Seitliche Schatten werden beschnitten,
      nur der untere bleibt — eine durchgehende Linie.
   d) Die Schiene zeigte bei Mauskontakt wieder die alte, breite Leiste: die
      Hover-Regel aus V3.3.1 setzt die Leistenfarbe, und damit faellt Chrome auf
      die Standardleiste zurueck. Jetzt: Leiste nur, waehrend gescrollt wird
      (.scrollt) oder die Maus am Rand des Bereichs steht (.rand, layout.php:
      Fenster rechts 22 px, Schiene links 22 px). Kein Hover mehr auf der
      ganzen Schiene. Sonstige Bereiche (Tabellen, Listen) weiter bei Hover.
   ========================================================================== */
.tm-main>.tm-head:first-child{top:20px}
.tm-main>.tm-head:first-child::before{clip-path:inset(0 0 -60px 0)}
.tm-rail-logo{clip-path:inset(0 0 -60px 0);margin-bottom:6px}
.tm-rail-logo::after{opacity:0;transition:opacity var(--t)}
.tm-rail-logo.gescrollt::after{opacity:1}
/* Punkt d (Leiste nur bei .scrollt/.rand) — mit V3.8.0 (14.09.2026) ENTFERNT.
   Eine Regel am Dateiende („Scrollbalken — eine Regel"); die Klassen .scrollt
   und .rand setzt kern/layout.php weiter, sie steuern nur noch den Schatten
   des Kopfbandes. */

/* ============================================================================
   V3.4.4 — KOMMISSIONIERUNG: KARTONS UND LOSE STUECK UNTERSCHEIDBAR
   (Auftrag Haris, 02.09.2026, „Variante 1" = Farbe + Symbol + ausgeschriebene
   Einheit)
   Anlass: In der Kommissionierung unterschieden sich „Volle Kartons" und „Lose
   Stueck" nur durch die Ueberschrift und ein kleines „K" bzw. „Stk" neben der
   grossen Zahl — zu wenig, um eine Fehlbuchung sicher auszuschliessen.
   1. Band: jede Aufgabenzeile traegt links 5 px in der Farbe ihres Abschnitts —
      Gold fuer Kartons (.pt-k), Blau fuer lose Stueck (.pt-s). Dieselbe
      Zuordnung wie bei den Mengen-Marken .qk/.qs und den Piktogrammen .kg .k /
      .kg .p. Der linke Innenabstand faellt um dieselben 5 px, damit der Text
      nicht verspringt; die Karte schneidet das Band an der Rundung ab.
      Keine flaechige Einfaerbung — Band und Marke reichen.
   2. Marke in der Abschnittsueberschrift (.gh .sekmarke): Versalien, gold bzw.
      blau ueber die vorhandenen Klassen b-gold/b-info.
   3. Einheitensymbol (.pqsym): ein einzelnes Piktogramm aus tma_h_glyph() links
      neben der grossen Zahl, im Pick-Kontext 26x34 statt 22x28 px (.kg.lg).
   4. Einheit ausgeschrieben und so gross wie die Zahl („4 Kartons" statt „4 K"),
      im Ton eine Stufe ruhiger, damit die Zahl fuehrend bleibt.
   5. Mengenwahl: <output> bleibt reine Zahl (das Pick-Skript liest sie), die
      Einheit steht als eigenes Feld daneben im selben Rahmen.
   Wie ueberall nur Token, kein Farbwert — hell und dunkel stimmen dadurch beide.
   ============================================================================ */

/* ---------- 1. Band am linken Rand je Abschnitt ---------- */
.tm .picktask.pt-k{border-left:5px solid var(--gold);padding-left:17px}
.tm .picktask.pt-s{border-left:5px solid var(--info);padding-left:17px}

/* ---------- 2. Marke in der Abschnittsueberschrift ---------- */
.tm .gh .sekmarke{font-size:11px;font-weight:800;letter-spacing:.08em}

/* ---------- 3. Einheitensymbol neben der grossen Zahl ---------- */
.tm .picktask .pq .pqsym{display:inline-flex;align-items:center;flex:0 0 auto}
.tm .picktask .pq .kg.lg{gap:3px}
.tm .picktask .pq .kg.lg .k,.tm .picktask .pq .kg.lg .p{width:26px;height:34px;border-radius:5px}
.tm .picktask .pq .kg.lg .k::after{top:9px}

/* ---------- 4. Einheit ausgeschrieben, in der Groesse der Zahl ---------- */
.tm .picktask .pq .n small{font-size:inherit;font-weight:700;color:var(--ink-2);margin-left:8px;letter-spacing:-.01em}

/* ---------- 5. Mengenwahl: Zahl und Einheit getrennt, ein Rahmen ---------- */
.tm .picktask .stp output{min-width:48px;padding:0 2px 0 10px;border-right:0}
.tm .picktask .stp .einheit{display:grid;place-items:center;padding:0 12px 0 6px;white-space:nowrap;
  font-size:14px;font-weight:700;color:var(--ink-2);border-right:1px solid var(--line-2)}

/* ---------- 6. Knopf traegt die Menge ---------- */
.tm .picktask .acts .btn[data-pickbtn]{white-space:nowrap}

/* ============================================================================
   V3.4.5 — LAUFLEISTE IMMER SICHTBAR, SCROLL-STOPP AM BEREICHSENDE (Haris, 02.09.2026)
   Korrektur zu V3.4.3: „gar nicht mehr sichtbar, also eigentlich unsichtbar" —
   die Leiste soll dezent, aber dauerhaft da sein, minimal staerker, und zwar
   ueberall (Fenster, Schiene, Tabellen, Listen, Postfach-Spalten). Kein
   Verstecken bis zum Scrollen mehr; .scrollt/.rand aus layout.php bleiben
   wirkungslos, aber harmlos. Dazu: overscroll-behavior contain — ist ein
   Bereich am Ende, scrollt nicht der naechste weiter; gescrollt wird nur, wo
   die Maus steht.
   ========================================================================== */
/* Fassung „immer sichtbar" — mit V3.8.0 (14.09.2026) ENTFERNT. Eine Regel am
   Dateiende („Scrollbalken — eine Regel"); dauerhaft sichtbar ist die Leiste
   dort wieder, so wie Haris es hier schon wollte. */
/* Scroll-Stopp: Schiene und alle inneren Scrollbereiche reichen den Rest nicht weiter */
.tm-rail,.tscroll,.tm-modal,.modal,[data-scroll],.mv-ordspalte,.mv-listspalte{overscroll-behavior:contain}

/* ============================================================================
   V3.4.5b — PICK-SEITE NACHBESSERUNG (Korrektur Haris, 02.09.2026)
   Drei Befunde aus der Sichtung von V3.4.4:
   1. Das Einheitensymbol vor der Mengenzahl irritierte („4 Kartons" mit einem
      einzelnen Karton davor las sich wie eine Mengenangabe). Es steht jetzt
      einmal je Abschnitt neben der Ueberschrift (.gh .ghsym, Groesse .kg.lg).
      Die Regeln .picktask .pq .pqsym / .pq .kg.lg aus V3.4.4 laufen damit leer —
      pick.php gibt kein Symbol mehr in der Zeile aus; sie bleiben stehen, um
      den vorigen Abschnitt nicht umzuschreiben.
   2. Die Marken „VOLLE KARTONS"/„LOSE STUECK" verdoppelten die Ueberschrift und
      sind entfallen (.gh .sekmarke aus V3.4.4 wird nicht mehr vergeben). Das
      farbige Band an der Zeile (.pt-k/.pt-s) und die ausgeschriebenen Einheiten
      bleiben — sie tragen die Unterscheidung.
   3. „Nachrichten vom Buero" und „So wird gebucht" stehen nicht mehr rechts
      neben den Aufgaben, sondern darueber (.pickinfo, zwei Spalten, unter
      900 px untereinander); das Detailraster laeuft auf der Pick-Seite
      einspaltig (.detgrid.pickgrid). Nur hier — das Auftragsdetail behaelt
      seine Seitenspalte, weil .pickgrid dort nicht vergeben wird.
   Wie ueberall nur Token, kein Farbwert.
   ============================================================================ */

/* ---------- 1. Symbol am Abschnittskopf ---------- */
.tm .gh .ghsym{display:inline-flex;align-items:center;flex:0 0 auto}

/* ---------- 3. Infokaesten ueber den Aufgaben, Aufgaben ueber die volle Breite ---------- */
.tm .detgrid.pickgrid{grid-template-columns:minmax(0,1fr)}
.tm .pickinfo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start;margin-bottom:18px}
@media(max-width:900px){
  .tm .pickinfo{grid-template-columns:minmax(0,1fr)}
}

/* V3.4.6 — Pick-Seite ohne Seitenspalte: die Aufgabenzeile darf ab 1080 px
   Fensterbreite wieder dreispaltig stehen (der Umbruch bei 1400 px aus V3.4.0
   galt dem Layout mit Seitenspalte). Nur auf der Pick-Seite (.pickgrid). */
@media(min-width:1080px){
  .tm .pickgrid .picktask{grid-template-columns:minmax(260px,1.3fr) minmax(200px,.9fr) auto;gap:18px}
  .tm .pickgrid .picktask .acts{justify-content:flex-end}
}

/* ============================================================================
   V3.4.7 — VERSENDET-ABSCHNITTE DER PICK-LISTE (Auftrag Haris, 02.09.2026)
   Die Kommissionierung zeigt unter „Zu kommissionieren" zwei weitere
   Abschnitte: „Versandbereit · noch nicht versendet" mit dem Knopf „Versendet"
   und „Heute versendet" als reine Anzeige. Dazu die zwei Karten, die eine
   erledigte Stufe tragen (Pick-Abschluss, Packstueck-Karte im Detail).
   Nur Token, kein Farbwert; hell und dunkel stimmen dadurch beide.

   Zusaetzlich: Korrektur zur Mengenwahl aus V3.4.4 Punkt 5. Die Einheit steht
   nicht mehr im Plus/Minus-Feld (Haris, 02.09.2026) — pick.php gibt den Span
   .einheit nicht mehr aus, die Regel dort laeuft leer. Damit das Zahlenfeld
   nicht halb ohne Rahmen dasteht, bekommt es seine beidseitige Trennlinie und
   die gleichmaessige Innenflaeche zurueck.
   ========================================================================== */

/* ---------- 1. Karten mit erledigter Stufe: schmales Band in good ---------- */
.tm .card.vsent-card{border-left:5px solid var(--good)}

/* ---------- 2. Meldezeile: Knopf, Vermerkfeld, Angaben in einer Reihe ---------- */
.tm .vsend{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tm .vsend input[type=text]{min-width:150px;max-width:240px;flex:1 1 150px}
.tm .vsendline{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}

/* ---------- 3. Mengenwahl wieder ohne Einheit (Korrektur zu V3.4.4 Punkt 5) ---------- */
.tm .picktask .stp output{min-width:64px;padding:0;border-right:1px solid var(--line-2)}

/* ---------- 4. Kartenfolge: mehrere Karten untereinander ----------
   Karten haben von Haus aus keinen Aussenabstand; bisher setzte ihn jede Seite
   einzeln per style="margin-bottom:16px". Stehen mehrere Karten untereinander
   (Pick-Liste: Zu kommissionieren, Versandbereit, Heute versendet), klebten sie
   aneinander. `.kartenfolge` um die Karten herum setzt den ueblichen Abstand
   einmal; die letzte Karte bleibt buendig (Korrektur Haris, 02.09.2026). */
.tm .kartenfolge > .card{margin-bottom:16px}
.tm .kartenfolge > .card:last-child{margin-bottom:0}

/* ============================================================================
   V3.4.8 — LAUFLEISTE NUR BEI MAUSBERUEHRUNG (Haris, 03.09.2026)
   Dritte Fassung: V3.4.3 (unsichtbar bis Scrollen) war „gar nicht sichtbar",
   V3.4.5 (immer sichtbar) ist „dauerhaft sichtbar" — gewuenscht ist: die Leiste
   erscheint, solange die Maus ueber dem jeweiligen Bereich steht (Schiene,
   Inhalt/Fenster, Tabelle, Liste), sonst nicht. 7 px, rund, ohne Spur, Farbe
   aus --ink. Waehrend des Scrollens zusaetzlich sichtbar (.scrollt, layout.php).
   ========================================================================== */
/* Fassung „nur bei Mausberuehrung" — mit V3.8.0 (14.09.2026) ENTFERNT. Sie war
   die dritte von sieben; ab jetzt gibt es EINE Regel am Dateiende
   („Scrollbalken — eine Regel"), und die Leiste ist wieder dauerhaft da. */

/* ============================================================================
   V3.4.9 — SAMMELKORREKTUR (Haris, 03.09.2026)
   Sieben Punkte aus der Sichtung vom 03.09.2026 in einem Abschnitt. Wie
   ueberall: nur Token aus tokens.css, kein Farbwert, kein Pixel-Radius
   ausserhalb der Tokens, hell und dunkel stimmen dadurch beide.
   Die Entscheidung je Fund des Inventars aus Punkt 3 steht in
   90_Archiv/bau-2026-09-03_sammelkorrektur/ERGEBNIS.md.
   ========================================================================== */

/* ---------- 1. Pick-Zeile: Bestand unter dem Artikelnamen ----------
   Anlass: Die Bestandszeile „45 K ● verfuegbar" stand als eigener Block unter
   der ganzen Artikelzelle und damit optisch unter der Artikelnummer. Sie
   gehoert unter den Namen. pick.php gibt sie jetzt innerhalb von .aname aus
   (tma_h_artcell($p, $ve, $zusatz)); die Groesse bleibt die der Pick-Zeile
   (.picktask .sub2, 13,5 px aus V3.4.0). */
.tm .aname .sub2{display:block;margin-top:4px}

/* ---------- 2. Auftragsseite: Uebersicht und Verlauf ueber die Positionen ----------
   Anlass: Haris — die beiden Kaesten der rechten Seitenspalte stehen jetzt
   zweispaltig ueber der Positionstabelle, wie in der Kommissionierung, aber
   unter eigenem Namen (.detinfo, nicht .pickinfo): links „Uebersicht" und
   darunter „Packstuecke", rechts „Verlauf & Kommentare"; unter 900 px
   untereinander. Die Zeilen der Uebersichtskarte trugen ihre Trennlinien
   ueber .side .row — .detinfo bringt dieselbe Zeile mit, damit der aeltere
   Abschnitt V3.2.0 unangetastet bleibt. */
.tm .detinfo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;
  align-items:start;margin-bottom:18px}
.tm .detinfo>div{display:grid;gap:16px;align-content:start;min-width:0}
.tm .detinfo .row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--line);font-size:13.5px;flex-wrap:nowrap}
.tm .detinfo .row:last-child{border-bottom:none}
.tm .detinfo .row b{font-variant-numeric:tabular-nums}
@media(max-width:900px){
  .tm .detinfo{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 3. Runde Ecken ueberall ----------
   a) Anlass: die Summenzeile der Positionstabelle (Auftrag #40) war eckig. Die
      tbody-Zeilen runden ueber td:first-child/td:last-child, der Tabellenfuss
      nicht — er bekommt denselben Radius. Geschrieben als Einzeleigenschaften
      je Ecke, damit die Suche des README nach einem Radius von null keine neue
      Fundstelle bekommt.
   b) Inventar 03.09.2026 ueber components.css und die PHP-Dateien von
      module/auftrag, module/zeit, module/verwaltung und module/kern: ausser
      dem Tabellenfuss traegt jede Flaeche mit eigenem Hintergrund bereits
      einen Radius (meist aus ihrer Grundregel) oder ist eine Zeile in einer
      Karte mit overflow:hidden. Liste mit Entscheidung je Fund: ERGEBNIS.md.
   c) Die zwei toten Radius-null-Angaben in .tm .table-responsive (Zeile ~150)
      und .tm .acct table td (Zeile ~401) sind an Ort und Stelle gestrichen —
      beide Flaechen sind transparent (background:none), die Zeilen hatten
      keine sichtbare Wirkung. Uebrig bleibt die eine Fundstelle in Zeile 146,
      und die ist gewollt: sie rundet die rechte Seite einer Tabellenzeile
      (`0 var(--r-lg) var(--r-lg) 0`), setzt also keine Ecke auf null. */
.tm .tfootrow td:first-child{border-top-left-radius:var(--r-lg);border-bottom-left-radius:var(--r-lg)}
.tm .tfootrow td:last-child{border-top-right-radius:var(--r-lg);border-bottom-right-radius:var(--r-lg)}

/* ---------- 4. Nachrichten vom Buero: Luft zwischen den gelben Kaesten ----------
   Anlass: Haris — die gelben Nachrichtenkaesten klebten aneinander. 8 px
   zwischen zwei Kaesten (die Aussenabstaende benachbarter Zeilen fallen
   zusammen), aussen nichts, damit die Liste nicht vom Kartenrand abrueckt.
   Gilt in der Kommissionierung („Nachrichten vom Buero") und im Auftragsdetail
   („Verlauf & Kommentare", dort sind die Lager-Nachrichten gelb). */
.tm .loglist li.msg-new{margin:8px 0}
.tm .loglist li.msg-new:first-child{margin-top:0}
.tm .loglist li.msg-new:last-child{margin-bottom:0}

/* ---------- 5. Farbstreifen als Baustein ----------
   Anlass: In der Pick-Liste soll „Zu kommissionieren" Gold tragen und
   „Versandbereit · noch nicht versendet" Info-Blau; „Heute versendet" bleibt
   gruen. Der 5-px-Streifen stand bisher als style="border-left:5px solid
   var(--…)" in den Seiten — jetzt einmal hier, in allen sechs Familien.
   .vsent-card (V3.4.7) bleibt bestehen: derselbe Streifen in gut, unter dem
   Namen der erledigten Stufe. */
.tm .card.streifen-gold{border-left:5px solid var(--gold)}
.tm .card.streifen-info{border-left:5px solid var(--info)}
.tm .card.streifen-good{border-left:5px solid var(--good)}
.tm .card.streifen-crit{border-left:5px solid var(--crit)}
.tm .card.streifen-warn{border-left:5px solid var(--warn)}
.tm .card.streifen-ink{border-left:5px solid var(--ink)}

/* ---------- 6. Legende: ein Mass fuer alle ----------
   Vorgabe Haris zum Zeit-Report: Punkt 10 px, mittig zum Text, 6 px Abstand
   zum Text, 14 px zwischen den Eintraegen. Bisher gab es zwei aeltere
   .legend-Regeln — ein Raster mit div-Kindern (Zeile ~218) und ein Flex fuer
   den Kalender mit 12-px-Feldern (Zeile ~343). Diese Regel gilt fuer beide
   Kind-Formen und ueberschreibt auch .cal+.legend i (gleiche Spezifitaet,
   steht spaeter). Der Innenring aus Zeile ~347 bleibt, damit helle Flaechen
   sichtbar sind; Streifenmuster („Feiertag") und Ring („So gearbeitet")
   kommen aus der Seite und bleiben erkennbar. */
.tm .legend{display:flex;flex-wrap:wrap;align-items:center;column-gap:14px;row-gap:6px}
.tm .legend>span,.tm .legend>div{display:inline-flex;align-items:center;gap:6px}
.tm .legend i,.tm .cal+.legend i{width:10px;height:10px;border-radius:var(--r-pill);flex:none}

/* ---------- 7. Benutzer-Detail: Einzelrechte nach Modulen ----------
   Anlass: Haris — die Einzelrechte standen als eine lange Liste in der
   schmalen rechten Karte. Jetzt steht „Konto" oben (bis 440 px breit) und
   „Rollen & Rechte" darunter ueber die volle Breite; die Rechte sind je Modul
   gruppiert und laufen in 2–3 Spalten, unter 700 px in einer. */
.tm .benutzerkarten{display:grid;gap:18px;align-items:start}
.tm .benutzerkarten>.kontokarte{max-width:440px}
.tm .rechtekopf{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.08em;margin:0 0 8px}
.tm .rechtekopf.abstand{margin-top:16px}
.tm .rechtegruppen{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.tm .rechtegruppe{min-width:0}
.tm .rechtezeile{display:flex;gap:9px;align-items:flex-start;padding:5px 0;font-size:13.5px;font-weight:600}
.tm .rechtezeile input{margin-top:3px}
.tm .rechtezeile code{font-size:12px}
.tm .rechtezeile .beschreibung{color:var(--muted);font-weight:500}
.tm .rechtezeile.hervorgehoben{color:var(--gold-text)}
@media(max-width:700px){
  .tm .rechtegruppen{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Nachbesserung nach Gegenlesung (Fable 5, 03.09.2026) ----------
   a) Der Verlauf steht jetzt UEBER der Positionstabelle: bis zu 60 Eintraege
      ohne Hoehenbegrenzung haetten die Positionen bei langer Historie
      bildschirmweit nach unten geschoben. Die Liste scrollt darum in sich
      (Laufleiste und Scroll-Stopp wie ueberall, V3.4.5/V3.4.8); das
      Kommentarfeld bleibt darunter sichtbar.
   b) Einzelrechte: auto-fill ergab auf breiten Bildschirmen vier Spalten und
      Loecher unter den kurzen Gruppen (Rasterzeilen richten sich an der
      hoechsten Gruppe aus). Beauftragt waren 2–3 Spalten: zwei ab 700 px,
      drei ab 1100 px, als Spaltensatz — die Gruppen fliessen dicht
      untereinander, keine Gruppe wird zerrissen.
   c) Pick-Zeile: mit der Bestandszeile ist die Namensspalte dreizeilig; die
      Artikelnummer stand dadurch auf halber Hoehe. Sie richtet sich jetzt an
      der ersten Zeile (dem Namen) aus. Nur in der Pick-Zeile — im
      Auftragsdetail bleibt die Zelle zweizeilig und mittig. */
.tm .detinfo .loglist{max-height:320px;overflow:auto;overscroll-behavior:contain}
.tm .rechtegruppen{display:block;columns:2;column-gap:18px}
.tm .rechtegruppe{break-inside:avoid;margin-bottom:18px}
@media(min-width:1100px){
  .tm .rechtegruppen{columns:3}
}
@media(max-width:700px){
  .tm .rechtegruppen{columns:1}
}
.tm .picktask .artcell{align-items:flex-start}
.tm .picktask .artcell .anr{padding-top:1px}

/* ============================================================================
   V3.4.10 — EINZELLIGE ZEILEN RUND (Haris, 03.09.2026, Startseite)
   Befund: Die Listen der Startseite (Handlungsbedarf, Heute) und jede
   Leerzeile mit colspan bestehen aus EINER Zelle. Auf sie treffen beide
   Zeilenregeln zu — td:first-child (links rund) und td:last-child (rechts
   rund) — und die spaetere gewinnt: die linken Ecken standen auf 0. Das
   Inventar der Sammelkorrektur hat nur Regeln gelesen, nicht das Ergebnis
   am Bildschirm; darum ist die Pruefung jetzt ein Skript, das die
   gerenderte Seite durchsucht (_werkzeuge/ecken_pruefen.js, README).
   ========================================================================== */
.tm tbody tr td:first-child:last-child{border-radius:var(--r-lg)}
.tm .tfootrow td:first-child:last-child{border-radius:var(--r-lg)}

/* ============================================================================
   V3.4.11 — MAIL-VORSCHAU v6 (Auftrag Haris, 03.09.2026)
   Drei Bausteine, die es in V3 noch nicht gab. Sie entstehen fuer die
   E-Mail-Vorschau (BP-07 §19), sind aber allgemein gehalten, weil sie
   spaeter auch anderswo gebraucht werden. Nur Token, kein Farbwert.

   1. .seitenmenue — waagerechtes Untermenue INNERHALB einer Seite. Die
      Modulschiene hat ihr eigenes Untermenue (.tm-rail-sub, kern/layout.php);
      dieser Baustein ist fuer den Fall, dass zwei Unterseiten desselben
      Moduls auf einer Flaeche gezeigt werden — in der Mail-Vorschau
      „Postfach" und „Warteschlange", ohne die Schiene anzufassen.
   2. .ziehgriff — Griff zwischen zwei Spalten. Er ist unsichtbar, bis die
      Maus ihn beruehrt oder er gezogen wird; dann steht dort ein runder
      Goldstrich. Die Breite selbst setzt die Seite ueber eine eigene
      Variable, der Baustein liefert nur Griffflaeche und Anzeige.
   3. .sigwahl — beschriftete Auswahl ueber einem Textfeld (Signatur des
      Entwurfs). Dieselbe Form passt fuer jede kleine Auswahl, die ueber
      einem Eingabefeld steht.
   ========================================================================== */

/* ---------- 1. Untermenue innerhalb einer Seite ---------- */
.tm .seitenmenue{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 14px;
  padding:6px 8px;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-2)}
.tm .seitenmenue .modul{font:800 10px var(--font);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding:0 6px 0 10px}
.tm .seitenmenue-punkt{border:none;cursor:pointer;background:none;color:var(--ink-2);
  font:800 13px var(--font);padding:8px 15px;border-radius:var(--r-pill);
  transition:background var(--t-fast),color var(--t-fast)}
.tm .seitenmenue-punkt:hover{background:var(--row-hover);color:var(--ink)}
.tm .seitenmenue-punkt.on{background:var(--gold-soft);color:var(--gold-on-soft)}
.tm .seitenmenue .hinweis{margin-left:auto;padding:0 10px;font-size:11.5px;font-weight:600;
  color:var(--muted)}
@media(max-width:700px){
  .tm .seitenmenue .hinweis{margin-left:0;width:100%;padding:2px 10px 4px}
}

/* ---------- 2. Griff zum Ziehen zwischen zwei Spalten ---------- */
.tm .ziehgriff{position:relative;align-self:stretch;min-height:60px;cursor:col-resize;
  background:none;border:none;padding:0;touch-action:none}
.tm .ziehgriff::after{content:"";position:absolute;top:10px;bottom:10px;left:50%;width:3px;
  margin-left:-1.5px;border-radius:var(--r-pill);background:transparent;
  transition:background var(--t-fast)}
.tm .ziehgriff:hover::after,
.tm .ziehgriff.zieht::after,
.tm .ziehgriff:focus-visible::after{background:var(--gold)}
.tm .ziehgriff:focus-visible{outline:none}

/* ---------- 3. Beschriftete Auswahl ueber einem Textfeld ---------- */
.tm .sigwahl{display:inline-flex;align-items:center;gap:8px;min-width:0}
.tm .sigwahl .lbl{font:800 10px var(--font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);flex:0 0 auto}
.tm .sigwahl select{height:34px;max-width:230px}

/* ============================================================================
   V3.5.0 — FARBSTREIFEN JE ZUSTAND (Haris, 03.09.2026)
   Freigabe des Vorschlags 40_Analyse_Doku/TM_ERP2_Farbstreifen_Vorschlag_
   2026-09-03.md ("ja passt") und Regel 18 der Bauplan-Vorlage. Der 5-px-
   Streifen links steht ueberall fuer denselben ZUSTAND:
     gold  wartet auf uns / liegt beim Lager   info  fertig, wartet auf den
     naechsten Schritt                          good  erledigt, verfuegbar,
     versendet                                  crit  ueberfaellig, negativ,
     Fehler, Spam (uebersteuert immer)          amber teilweise, mit Vorbehalt
     plum  Sonderfall                           ink   gesperrt, geloescht,
     archiviert                                 kein Streifen = Normalzustand
   Hoechstens EIN Streifen je Zeile; die Klasse kommt aus der Zustandsfunktion
   des Moduls, nie aus der Seite. Einzige Ausnahme im System: die
   Einheiten-Baender der Kommissionierung (.picktask.pt-k Gold = volle Kartons,
   .pt-s Blau = lose Stueck, V3.4.4) — dort meint die Farbe die Einheit.
   Wie ueberall: nur Token aus tokens.css, kein Farbwert, kein Pixel-Radius.
   ========================================================================== */

/* ---------- 1. Zeilenstreifen in Tabellen (neu) ----------
   Der Streifen sitzt an der ERSTEN ZELLE und folgt damit ihrer runden Ecke
   (.tm tbody tr td:first-child, --r-lg) — die Zeile selbst kann keinen Rand
   tragen, ohne die Rundung zu verlieren. Der linke Innenabstand der Zelle
   (13px 12px aus der Grundregel) faellt um dieselben 5 px auf 7 px, damit der
   Text an derselben Stelle steht wie in einer Zeile ohne Streifen und die
   Spalte beim Zustandswechsel nicht verspringt — dieselbe Rechnung wie bei
   .picktask.pt-k (V3.4.4). Gemessen in der Klick-Vorschau vorschau/streifen.
   Einzellige Zeilen (Startseiten-Listen, Leerzeilen mit colspan) treffen
   dieselbe Regel: dort ist die eine Zelle first-child UND last-child, sie
   behaelt ihren Rundum-Radius aus V3.4.10 und bekommt hier ihr Band dazu. */
.tm tr.streifen-gold > td:first-child{border-left:5px solid var(--gold)}
.tm tr.streifen-info > td:first-child{border-left:5px solid var(--info)}
.tm tr.streifen-good > td:first-child{border-left:5px solid var(--good)}
.tm tr.streifen-crit > td:first-child{border-left:5px solid var(--crit)}
.tm tr.streifen-amber> td:first-child{border-left:5px solid var(--amber)}
.tm tr.streifen-plum > td:first-child{border-left:5px solid var(--plum)}
.tm tr.streifen-ink  > td:first-child{border-left:5px solid var(--ink)}
.tm tr.streifen-gold > td:first-child,.tm tr.streifen-info > td:first-child,
.tm tr.streifen-good > td:first-child,.tm tr.streifen-crit > td:first-child,
.tm tr.streifen-amber> td:first-child,.tm tr.streifen-plum > td:first-child,
.tm tr.streifen-ink  > td:first-child{padding-left:7px}

/* ---------- 2. Karten: die zwei fehlenden Farben ----------
   V3.4.9 kennt sechs Kartenfarben; Mandarine und Flieder fehlten, weil es bis
   heute keinen Vorbehalts- und keinen Sonderfall-Streifen gab. */
.tm .card.streifen-amber{border-left:5px solid var(--amber)}
.tm .card.streifen-plum{border-left:5px solid var(--plum)}

/* ---------- 3. streifen-warn ist dasselbe Orange wie streifen-amber ----------
   Korrektur Haris 03.09.2026: „Orange" heisst Mandarine (--amber). --warn
   zeigt auf --gold-deep und sah damit aus wie Gold — es gibt nur EIN Orange.
   Die Regel aus V3.4.9 bleibt stehen, damit bestehende Aufrufe nichts
   verlieren; sie zeigt jetzt dieselbe Farbe wie streifen-amber. */
.tm .card.streifen-warn{border-left:5px solid var(--amber)}

/* ============================================================================
   V3.5.1 — MAIL-VORSCHAU v7 (Postfach klassisch, Auftrag Haris 03.09.2026)
   Vier Bausteine, die es in V3 noch nicht gab. Sie entstehen fuer das
   klassische Postfach (BP-07 §20), sind aber allgemein gehalten, weil sie
   spaeter auch anderswo gebraucht werden. Die Bausteine aus V3.4.11
   (.seitenmenue, .ziehgriff, .sigwahl) bleiben unveraendert bestehen.

   1. .tm-kontextmenue — Menue am Mauszeiger, das ein Rechtsklick oeffnet.
      Optik und Masse wie das Kopfmenue (.tm-kopfmenue .menu), aber frei
      positionierbar: die Seite setzt left/top, das Menue liegt fest im
      Fenster (position:fixed).
   2. .spaltenklapp / .spaltenstreifen — eine Spalte ganz wegklappen und
      zurueckholen. Der Knopf sitzt im Kopf der Spalte, die schmale Leiste
      bleibt als einziges stehen und traegt den Namen senkrecht.
   3. .btn.stark — betonter Ghost-Knopf. Fuer die zwei, drei Knoepfe einer
      Leiste, die die eigentliche Arbeit machen (Antworten, Allen antworten,
      Weiterleiten), ohne sie zum Hauptknopf (.btn.gold) zu machen.
   4. .tm-echo — eine Zeile Rueckmeldung nach einer Aktion, die auf dem
      Bildschirm sonst nichts veraendert. Verschwindet von allein.
   Wie ueberall: nur Token aus tokens.css, kein Farbwert, kein Pixel-Radius.
   ========================================================================== */

/* ---------- 1. Rechtsklick-Menue ---------- */
.tm .tm-kontextmenue{position:fixed;z-index:1200;min-width:250px;max-width:320px;
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-3);
  padding:8px;display:grid;gap:1px}
.tm .tm-kontextmenue[hidden]{display:none}
.tm .tm-kontextmenue button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  border:none;cursor:pointer;background:none;font:600 13.5px var(--font);color:var(--ink);
  padding:9px 12px;border-radius:var(--r-md)}
.tm .tm-kontextmenue button:hover{background:var(--surface-sunken)}
.tm .tm-kontextmenue button[hidden]{display:none}
.tm .tm-kontextmenue button svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
.tm .tm-kontextmenue button:hover svg{color:var(--ink)}
.tm .tm-kontextmenue .trenner{display:block;height:1px;margin:5px 12px;background:var(--line);
  border-radius:var(--r-pill)}

/* ---------- 2. Spalte wegklappen und zurueckholen ---------- */
.tm .spaltenklapp{width:26px;height:26px;flex:0 0 auto;display:grid;place-items:center;border:none;
  cursor:pointer;background:none;color:var(--muted);border-radius:var(--r-md);padding:0;
  transition:background var(--t-fast),color var(--t-fast)}
.tm .spaltenklapp:hover{background:var(--surface-sunken);color:var(--ink)}
.tm .spaltenklapp svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.tm .spaltenstreifen{display:flex;align-items:flex-start;justify-content:center;background:var(--surface);
  border-radius:var(--r-xl);box-shadow:var(--shadow-1);padding:10px 0;min-height:120px}
.tm .spaltenstreifen button{display:grid;justify-items:center;gap:10px;border:none;cursor:pointer;
  background:none;color:var(--muted);font:800 11px var(--font);letter-spacing:.1em;
  text-transform:uppercase;padding:6px 4px;border-radius:var(--r-md);
  transition:background var(--t-fast),color var(--t-fast)}
.tm .spaltenstreifen button:hover{background:var(--surface-sunken);color:var(--ink)}
.tm .spaltenstreifen button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.tm .spaltenstreifen .senk{writing-mode:vertical-rl;white-space:nowrap}

/* ---------- 3. Betonter Ghost-Knopf ---------- */
.tm .btn.stark,.tm .bt.stark{background:var(--gold-soft);color:var(--gold-on-soft)}
[data-theme="dark"] .tm .btn.stark{background:var(--gold-soft);color:var(--gold-on-soft);box-shadow:none}

/* ---------- 4. Kurze Rueckmeldung ---------- */
.tm .tm-echo{position:fixed;bottom:22px;right:22px;z-index:1100;max-width:430px;
  background:var(--ink);color:var(--page);padding:12px 20px;border-radius:var(--r-pill);
  box-shadow:var(--shadow-3);font:600 13.5px var(--font)}
.tm .tm-echo[hidden]{display:none}
[data-theme="dark"] .tm .tm-echo{background:var(--surface-3);color:var(--ink)}

/* ============================================================================
   V3.5.2 — MARKE MANDARINE (Haris, 03.09.2026: „ja" zur Frage, ob die Marke
   beim zeitweise gesperrten Zugang wie der Streifen Mandarine wird)
   Bisher gab es fuer die Familie Mandarine nur Kachel (.a-amber) und Streifen
   (.streifen-amber); die Marke .b-warn daneben war dunkles Gold — zwei
   Orangetoene in einer Zeile. Jetzt eine Marke in derselben Familie, gebaut
   wie .b-gold (Abschnitt BP-02): weiche Flaeche, dunkle Tinte, hell und dunkel
   aus den amber-Token.
   ========================================================================== */
.tm .b-amber{background:var(--amber-soft);color:var(--amber-on-soft)}
.tm td .b-amber{color:var(--amber-on-soft)}

/* ============================================================================
   V3.6.0 — SEITENLEISTE EINKLAPPBAR (Haris, 03.09.2026)
   „Man soll die Option haben, die Seitenleiste einzuklappen, sodass nur noch
   die Icons sichtbar sind, und sie wieder aufklappen kann."
   Knopf unten in der Schiene (.tm-rail-fuss > .tm-rail-klapp, layout.php).
   Eingeklappt setzt tm_design.php html[data-rail="zu"] VOR dem ersten
   Zeichnen (localStorage tm2.rail.zu), damit nichts springt (Regel 17).
   Die Rasterbreite der Schiene ist jetzt eine Variable (--rail-w, Zeile im
   Abschnitt GERUEST angepasst — die eine erlaubte Aenderung an einem aelteren
   Abschnitt). Eingeklappt: Symbole zentriert, Beschriftungen (.t), Gruppen,
   Untermenues und Pfeile weg, Zaehler als Punkt am Symbol, Name als Tooltip
   (title). Unter 900 px bleibt alles wie bisher. Nur Token, kein Farbwert.
   ========================================================================== */
html[data-rail="zu"]{--rail-w:74px}
/* Der Fuss klebt am unteren Rand der Schiene (sticky im Scrollbereich): auf kleinen
   Bildschirmen laeuft die Schiene ueber die Hoehe hinaus, der Knopf bleibt trotzdem sichtbar. */
.tm-rail-fuss{position:sticky;bottom:0;margin-top:auto;padding:10px 0 12px;background:var(--rail-bg)}
.tm-rail-klapp{display:flex;align-items:center;gap:11px;width:100%;padding:8px 12px;border:0;background:none;
  border-radius:var(--r-lg);font-family:var(--font);font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast)}
.tm-rail-klapp:hover{background:var(--rail-hover);color:var(--ink)}
.tm-rail-klapp .ic{width:32px;height:32px;border-radius:var(--r-md);display:grid;place-items:center;flex:0 0 auto;
  background:var(--surface-sunken);color:var(--ink-2)}
.tm-rail-klapp .ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--t-fast)}
html[data-rail="zu"] .tm-rail-klapp .ic svg{transform:rotate(180deg)}
html[data-rail="zu"] .tm-rail{padding:20px 9px}
html[data-rail="zu"] .tm-rail-logo{padding:4px 0 16px;justify-content:center}
html[data-rail="zu"] .tm-rail-logo .n,html[data-rail="zu"] .tm-rail-logo .s,
html[data-rail="zu"] .tm-rail-group,html[data-rail="zu"] .tm-rail-item .t,html[data-rail="zu"] .tm-rail-klapp .t,
html[data-rail="zu"] .tm-rail-sub,html[data-rail="zu"] .tm-rail-modul.auf .tm-rail-sub,
html[data-rail="zu"] .tm-rail.js .tm-rail-auf{display:none}   /* .tm-rail-modul.auf .tm-rail-sub (V3.2.8) ist spezifischer als html[attr] .tm-rail-sub — darum hier mit */
html[data-rail="zu"] .tm-rail-item{justify-content:center;padding:10px 0;position:relative}
html[data-rail="zu"] .tm-rail-zeile{position:relative}
html[data-rail="zu"] .tm-rail-item .cnt{position:absolute;top:5px;right:8px;margin:0;padding:0;width:9px;height:9px;
  border-radius:var(--r-pill);font-size:0;line-height:0;overflow:hidden}
html[data-rail="zu"] .tm-rail-item.bald .cnt{display:none}
html[data-rail="zu"] .tm-rail-klapp{justify-content:center;padding:8px 0}
@media(max-width:900px){
  html[data-rail="zu"]{--rail-w:250px}
}

/* ============================================================================
   V3.6.1 — SCHIENE: LOGO UND FUSS STEHEN FEST, NUR DAS MENUE SCROLLT
   (Haris, 03.09.2026, drei Screenshots zur eingeklappten Schiene)
   Befunde: (1) der Knopf „Einklappen" (sticky im Scrollbereich) lag ueber den
   letzten Eintraegen; (2) eingeklappt tanzten die Symbole der Module mit
   Untermenue aus der Reihe (rechts 36 px fuer den Pfeil reserviert, V3.2.8);
   (3) beim Scrollen schob sich das Menue ueber das Logo, und das Logo soll
   auch eingeklappt in voller Breite mit Namen stehen bleiben.
   Loesung: die Schiene scrollt nicht mehr selbst. layout.php legt das Menue
   in .tm-rail-menue — das ist jetzt der Scrollbereich (rtl-Trick und Rinne
   aus V3.4.1 wandern dorthin). Logo und Fuss liegen ausserhalb und stehen.
   Eingeklappt ragte das Logo mit Namen ueber die 74 px hinaus in die Kopfzeile
   des Inhalts; die Kopfzeile rueckte ihren Titel entsprechend nach rechts.
   ÜBERHOLT seit V3.7.12 (Abschnitt am Dateiende): der Logoblock ist so breit
   wie die Schiene, eingeklappt also 74 px und ohne Namen; der Einzug der
   Kopfzeile faellt weg. Die Regeln hier bleiben stehen, sie werden dort
   ueberschrieben.
   Nur Token, kein Farbwert.
   ========================================================================== */
.tm-rail{overflow:visible;direction:ltr;padding:0;display:flex;flex-direction:column;gap:0;z-index:60}
.tm-rail-logo{position:relative;top:auto;height:auto;flex:0 0 auto;clip-path:none;margin:0;padding:20px 10px 14px 14px;
  box-sizing:border-box;width:100%}
.tm-rail-logo::after{top:100%}
.tm-rail-menue{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;direction:rtl;
  padding:0 10px 12px 4px;display:flex;flex-direction:column;gap:3px}
.tm-rail-menue>*{direction:ltr}
.tm-rail-fuss{position:static;flex:0 0 auto;margin:0;padding:10px 10px 16px 14px;background:none}
/* eingeklappt */
html[data-rail="zu"] .tm-rail-menue{padding:0 6px 12px 4px}
html[data-rail="zu"] .tm-rail-logo{width:250px;justify-content:flex-start;padding:20px 10px 14px 14px}
html[data-rail="zu"] .tm-rail-logo .n,html[data-rail="zu"] .tm-rail-logo .s{display:block}
html[data-rail="zu"] .tm-rail.js .tm-rail-zeile>.tm-rail-item{padding:10px 0}
html[data-rail="zu"] .tm-rail-zeile{display:block}
html[data-rail="zu"] .tm-rail-fuss{padding:10px 6px 16px 4px}
html[data-rail="zu"] .tm-main>.tm-head:first-child{padding-left:196px}
@media print{.tm-rail-menue{overflow:visible}}

/* ============================================================================
   V3.6.2 — EIN SCROLLRAD UEBERALL, PUNKT SICHTBAR, LOGO SO HOCH WIE DIE KOPFZEILE
   (Haris, 03.09.2026, Screenshots)
   1. „Das Scrollrad ist an manchen Orten sichtbar und an anderen nicht" —
      die aelteren Abschnitte (V3.2.5, V3.3.1, V3.4.1, V3.4.3, V3.4.5, V3.4.8)
      hatten fuer die Schiene eigene Masse (6 px, Rand, eigene Hover-Regeln).
      Ab hier gilt fuer ALLE Scrollbereiche dasselbe: 7 px, rund, ohne Spur,
      Daumen aus --ink, sichtbar solange die Maus ueber dem Bereich steht oder
      gescrollt wird (V3.4.8), sonst unsichtbar. Diese Regeln stehen zuletzt
      und schlagen alles davor.
   2. Eingeklappte Schiene: der Zaehlerpunkt lag halb auf dem Symbol — jetzt
      groesser, gold, mit Ring in der Grundfarbe an der Kartenecke.
   3. Eingeklappt ragt das Logo in die Kopfzeile des Inhalts; beide sind jetzt
      gleich hoch (--kopf-raum), das Menue beginnt darunter.
   ========================================================================== */
/* Punkt 1 (ein Scrollrad ueberall) — die Regeln selbst sind mit V3.8.0
   (14.09.2026) ENTFERNT und stehen jetzt EINMAL am Dateiende („Scrollbalken —
   eine Regel"); der Gedanke „ueberall dieselbe Leiste" bleibt genau derselbe,
   nur dauerhaft sichtbar statt bei Mausberuehrung. */
html[data-rail="zu"] .tm-rail-item .cnt{top:4px;right:5px;width:10px;height:10px;background:var(--gold);
  box-shadow:0 0 0 2px var(--rail-bg);z-index:2}
html[data-rail="zu"] .tm-rail-item.on .cnt{box-shadow:0 0 0 2px var(--rail-active-bg)}
/* Der Inhalt sitzt wie der Seitentitel: 20 px Luft oben (Main-Innenabstand), darunter mittig in 64 px. */
/* Logo-Inhalt (44 px) auf der Mitte der Kopfzeile (Mitte bei 52 px): 30 px oben, 10 px unten. */
.tm-rail-logo{height:var(--kopf-raum);box-sizing:border-box;padding:30px 10px 10px 14px;align-items:flex-start}
html[data-rail="zu"] .tm-rail-logo{padding:30px 10px 10px 14px}

/* ============================================================================
   V3.7.0 — MAIL (BP-07 M1): DAS POSTFACH (Bau 03.09.2026)
   Aus dem Style-Block der freigegebenen Vorschau v8 (module/mail/vorschau.php)
   in die Designsprache uebernommen; die Klassen heissen jetzt `mail-` statt
   `mv-`. Die allgemeinen Bausteine, die dabei entstanden sind, stehen weiter
   oben und bleiben unangetastet: .seitenmenue, .ziehgriff, .sigwahl (V3.4.11),
   .tm-kontextmenue, .spaltenklapp/.spaltenstreifen, .btn.stark, .tm-echo
   (V3.5.1), die Farbstreifen je Zustand (V3.5.0).

   Zwei Seiten teilen sich diesen Abschnitt (BP-07 §19 Nr. 1):
     data-seite="postfach"  Ordner · Liste · Nachricht, klassisch (§20 Nr. 2)
     data-seite="warte"     Warteschlange: linke Spalte, Tafel oder Liste,
                            Gespraech als Ueberlagerung in der Mitte (§21 Nr. 7)
   Dazu die Einzelseite eines Gespraechs (.mail-einzeln), die dasselbe Panel
   ohne Ueberlagerung zeigt.

   Wie ueberall: nur Token aus tokens.css, kein Farbwert, kein Pixel-Radius.
   ========================================================================== */

/* ---------- „hidden" schlaegt jedes display ----------
   Das Modul blendet Ausschnitte ueber das HTML-Attribut `hidden` aus (Panel,
   Klappkoerper, Suchvorschlaege, gefilterte Zeilen). Sobald eine Regel diesen
   Elementen ein eigenes `display` gibt, verliert `hidden` — genau das ist beim
   Bau am 03.09.2026 passiert (die Karte „Nichts gewaehlt" stand trotz
   `hidden` unter dem geoeffneten Gespraech). Deshalb steht diese Regel VOR
   allen anderen des Abschnitts. Sie stand schon so im Style-Block der
   Vorschau v8. */
.tm [hidden]{display:none!important}

/* ---------- Raster: Ordner | Griff | Liste | Griff | Lesebereich ----------
   Die Spalten stehen in der Reihenfolge des HTML; die Klappzustaende schalten
   die Spaltenmasse um. Weggeklappt bleibt eine schmale Leiste stehen. */
.tm .mail-r{--mail-ord:212px;--mail-list:430px;--mail-leiste:40px;
      display:grid;align-items:start;
      grid-template-columns:var(--mail-ord) 14px var(--mail-list) 14px minmax(320px,1fr)}
.tm .mail-ordspalte,.tm .mail-listspalte,.tm .mail-gesprspalte{min-width:0}
.tm .mail-panel{display:grid;gap:14px;min-width:0}
.tm .mail-panelplatz{display:grid;gap:14px;min-width:0}

.tm .mail-r.zu-ord {grid-template-columns:var(--mail-leiste) 0 var(--mail-list) 14px minmax(320px,1fr)}
.tm .mail-r.zu-list{grid-template-columns:var(--mail-ord) 14px var(--mail-leiste) 0 minmax(320px,1fr)}
.tm .mail-r.zu-ord.zu-list{grid-template-columns:var(--mail-leiste) 0 var(--mail-leiste) 0 minmax(320px,1fr)}
.tm .mail-r.zu-lese{grid-template-columns:var(--mail-ord) 14px minmax(320px,1fr) 0 var(--mail-leiste)}
.tm .mail-r.zu-ord.zu-lese{grid-template-columns:var(--mail-leiste) 0 minmax(320px,1fr) 0 var(--mail-leiste)}

.tm .mail-r.zu-ord  .mail-griff-ord,
.tm .mail-r.zu-list .mail-griff-list,
.tm .mail-r.zu-lese .mail-griff-list{visibility:hidden;pointer-events:none}

.tm .mail-r .spaltenstreifen{display:none}
.tm .mail-r.zu-ord  .mail-ordspalte  > .spaltenstreifen{display:flex}
.tm .mail-r.zu-ord  .mail-ordspalte  > .card{display:none}
.tm .mail-r.zu-list .mail-listspalte > .spaltenstreifen{display:flex}
.tm .mail-r.zu-list .mail-listspalte > .card{display:none}

/* Ordner- und Listenspalte stehen fest und scrollen je fuer sich (§6);
   das Gespraech scrollt mit der Seite. */
@media(min-width:1321px){
  .tm .mail-ordspalte>.card,.tm .mail-listspalte>.card{display:flex;flex-direction:column;
        max-height:calc(100vh - 132px)}
  .tm .mail-ordnerliste,.tm .mail-pliste{overflow:auto;overscroll-behavior:contain}
}

/* ---------- Warteschlange: eigenes Raster ohne die Postfach-Spalten ------- */
.tm .mail-r[data-seite="warte"]{grid-template-columns:minmax(0,1fr)}
.tm .mail-r[data-seite="warte"] .mail-ordspalte,
.tm .mail-r[data-seite="warte"] .mail-griff-ord,
.tm .mail-r[data-seite="warte"] .mail-listspalte,
.tm .mail-r[data-seite="warte"] .mail-griff-list{display:none}
.tm .mail-r[data-seite="postfach"] .mail-wq{display:none}

/* Das Gespraech: im Postfach eine gewoehnliche Spalte, in der Warteschlange
   eine feste, zentrierte Ueberlagerung mit Abdunklung (§21 Nr. 10) —
   dieselbe Farbformel wie .tm-modal-bg, aus Token gemischt. */
.tm .mail-r[data-seite="warte"] .mail-gesprspalte{display:none}
.tm .mail-r[data-seite="warte"].offen .mail-gesprspalte{
  display:flex;position:fixed;inset:0;z-index:1000;align-items:center;justify-content:center;
  padding:40px;background:color-mix(in srgb, var(--ink) 55%, transparent)}
.tm .mail-r[data-seite="warte"].offen .mail-gesprspalte .mail-panel{
  width:min(1100px,80vw);max-height:80vh;overflow:auto;border-radius:var(--r-xl);
  box-shadow:var(--shadow-3);background:var(--surface)}
/* „Zurueck zur Liste" ist der Weg der SCHMALEN Flaeche: dort steht das
   Gespraech allein, die Liste ist weg. Auf der breiten Flaeche steht die Liste
   daneben — dann braucht es den Knopf nicht. In der Warteschlange schliesst
   statt seiner das Kreuz die Ueberlagerung. */
.tm .mail-zurueck{display:none}
.tm .mail-r[data-seite="postfach"] .mail-modalzu{display:none}

/* Einzelseite eines Gespraechs (/mail/gespraech/<id>): kein Overlay, keine
   Abdunklung — es gibt keine Liste dahinter. */
.tm .mail-r.mail-einzeln[data-seite="warte"] .mail-gesprspalte,
.tm .mail-r.mail-einzeln[data-seite="warte"].offen .mail-gesprspalte{
  display:block;position:static;inset:auto;padding:0;background:none;z-index:auto}
.tm .mail-r.mail-einzeln .mail-panel{width:auto;max-height:none;box-shadow:none;background:none}
.tm .mail-r.mail-einzeln .mail-modalzu{display:none}
.tm .mail-r.mail-einzeln .mail-zurueck{display:inline-flex}

/* ---------- Kontenumschalter oben in der Ordnerspalte ---------- */
.tm .mail-konten{display:grid;gap:3px;padding:2px 10px 10px}
.tm .mail-konten button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:none;
      cursor:pointer;background:none;color:var(--ink-2);font-family:var(--font);
      padding:8px 10px;border-radius:var(--r-md);min-width:0}
.tm .mail-konten button:hover{background:var(--row-hover)}
.tm .mail-konten button.on{background:var(--gold-soft);color:var(--gold-on-soft)}
.tm .mail-konten .t{min-width:0}
.tm .mail-konten .t b{display:block;font-size:12.5px;font-weight:800;overflow:hidden;
      text-overflow:ellipsis;white-space:nowrap}
.tm .mail-konten .t small{display:block;font-size:11px;color:var(--muted);font-weight:700}
.tm .mail-konten button.on .t small{color:var(--gold-on-soft)}
.tm .mail-trenn{border-top:1px solid var(--line)}

/* ---------- Ordner (nutzen .folder-node) und der Abrufstand darunter ------ */
.tm .mail-ordnerliste{padding:2px 10px 10px;display:grid;gap:1px;align-content:start}
.tm .mail-ordnerliste .folder-node{font-size:13px;padding:8px 10px;width:100%;border:none;background:none;
      font-family:var(--font);text-align:left}
.tm .mail-ordnerliste .fn-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
      stroke-linecap:round;stroke-linejoin:round}
.tm .mail-abrufstand{padding:8px 20px 2px;font-size:11.5px;font-weight:700;color:var(--muted);
      border-top:1px solid var(--line);margin-top:auto}
.tm .mail-ordfuss{display:flex;gap:12px;flex-wrap:wrap;padding:6px 20px 14px}
.tm .mail-ordfuss a{font-size:11.5px;font-weight:800;color:var(--gold-text,var(--gold-on-soft));
      text-decoration:none}
.tm .mail-ordfuss a:hover{text-decoration:underline}

/* ---------- Kopfzeile der Liste: Suche, Filterknopf ---------- */
.tm .mail-suchzeile{display:flex;gap:10px;align-items:center;padding:12px 16px 0;position:relative;
      flex-wrap:wrap}
.tm .mail-suchzeile .tm-search{height:36px;flex:1 1 auto;min-width:0}
.tm .mail-suchvorschlaege{position:absolute;top:calc(100% + 4px);left:16px;right:16px;z-index:30;
      background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-3);padding:6px;
      display:grid;gap:1px}
.tm .mail-suchvorschlaege button{display:flex;align-items:baseline;gap:8px;border:none;background:none;
      cursor:pointer;text-align:left;font:700 12.5px var(--font);color:var(--ink);padding:8px 10px;
      border-radius:var(--r-md)}
.tm .mail-suchvorschlaege button:hover{background:var(--row-hover)}
.tm .mail-suchvorschlaege small{color:var(--muted);font-weight:600}

/* ---------- Der eine Filterknopf des Postfachs (§21 Nr. 5) ---------- */
.tm .mail-filter{position:relative;display:flex;align-items:center;gap:8px;flex:0 0 auto}
.tm .mail-fpop{position:absolute;top:calc(100% + 8px);right:0;z-index:40;width:240px;
      background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-3);
      padding:14px;display:grid;gap:10px}
.tm .mail-fpop[hidden]{display:none}
.tm .mail-fzeile{display:flex;align-items:center;gap:9px;font:700 13px var(--font);color:var(--ink)}
.tm .mail-ftrenn{padding-top:8px;border-top:1px solid var(--line)}
.tm .mail-fauswahl{display:grid;gap:4px}
.tm .mail-fauswahl>span{font:800 10px var(--font);letter-spacing:.12em;text-transform:uppercase;
      color:var(--muted)}
.tm .mail-fauswahl select,.tm .mail-fauswahl input{height:34px}
.tm .mail-fpop-f{display:flex;justify-content:flex-end;gap:8px;margin-top:2px}
.tm .mail-fchip{display:inline-flex;align-items:center;gap:4px;font:700 11.5px var(--font);
      background:var(--gold-soft);color:var(--gold-on-soft);border-radius:var(--r-pill);
      padding:4px 4px 4px 12px}
.tm .mail-fchip[hidden]{display:none}
.tm .mail-fchip-x{border:none;background:none;cursor:pointer;color:inherit;font:800 15px/1 var(--font);
      padding:0 7px;border-radius:var(--r-pill)}
.tm .mail-fchip-x:hover{background:var(--surface)}

/* ---------- Postfachliste: Initialen · Absender · Betreff · Vorschau ------ */
.tm .mail-pliste{display:flex;flex-direction:column;padding:6px 8px 10px;gap:1px}
.tm .mail-peintrag{min-width:0;position:relative}
.tm .mail-poeffnen{display:flex;gap:10px;align-items:flex-start;width:100%;min-width:0;border:none;
      background:none;cursor:pointer;text-align:left;padding:8px 10px;border-radius:var(--r-lg);
      font-family:var(--font);color:var(--ink)}
.tm .mail-poeffnen:hover{background:var(--row-hover)}
.tm .mail-peintrag.gewaehlt .mail-poeffnen{background:var(--row-sel)}
.tm .mail-poeffnen .ini{flex:0 0 auto;width:30px;height:30px;border-radius:var(--r-pill);display:grid;
      place-items:center;background:var(--surface-sunken);color:var(--ink-2);font:800 11.5px var(--font);
      margin-top:2px}
.tm .mail-ptxt{display:grid;gap:2px;min-width:0;flex:1 1 auto;text-align:left}
.tm .mail-poeffnen .z1{display:flex;align-items:baseline;gap:8px;min-width:0}
.tm .mail-poeffnen .punkt{width:6px;height:6px;border-radius:var(--r-pill);background:transparent;
      flex:0 0 auto;align-self:center}
.tm .mail-peintrag.neu .mail-poeffnen .punkt{background:var(--gold)}
.tm .mail-poeffnen .von{font-size:13px;font-weight:600;flex:1 1 auto;min-width:0;overflow:hidden;
      text-overflow:ellipsis;white-space:nowrap}
.tm .mail-poeffnen .zeit{font-size:11.5px;font-weight:700;color:var(--muted);flex:0 0 auto;
      white-space:nowrap}
.tm .mail-poeffnen .z2{display:flex;align-items:center;gap:8px;min-width:0}
.tm .mail-poeffnen .betr{font-size:13.5px;font-weight:600;letter-spacing:-.01em;min-width:0;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm .mail-poeffnen .anz{flex:0 0 auto;font:800 10.5px var(--font);color:var(--muted);
      background:var(--surface-sunken);border-radius:var(--r-pill);padding:2px 7px}
.tm .mail-poeffnen .z3{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;
      white-space:nowrap}
.tm .mail-peintrag.neu .mail-poeffnen .von,
.tm .mail-peintrag.neu .mail-poeffnen .betr{font-weight:800}
.tm .mail-peintrag.neu .mail-poeffnen .zeit{color:var(--ink-2)}
.tm .mail-klammer{flex:0 0 auto;color:var(--muted);display:grid;place-items:center}
.tm .mail-klammer svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;
      stroke-linecap:round;stroke-linejoin:round}
/* Rechtsklick-Hervorhebung ist eine FLAECHE, kein Ring (Regel 18 Nachtrag,
   Haris 04.09.2026, Screenshot 7 — die Zeile trug hier noch eine goldene
   Kante neben ihrem Streifen). */
.tm .mail-peintrag.rmenue .mail-poeffnen{background:var(--row-sel);box-shadow:none}
.tm .mail-peunter.rmenue .mail-puoeffnen{background:var(--row-sel);box-shadow:none}

/* Markiert: Streifen links plus Faehnchen (§21 Nr. 5).
   Korrektur 04.09.2026 (Haris, Screenshot 7): war ein einseitiger Rahmen und
   zog rechts eine Haarlinie in der Rahmenfarbe. Jetzt Innenschatten wie
   ueberall (Abschnitt „Streifen ohne Rahmen"); die Farbe waehlt der Mensch
   (V3.7.2, Variable --mail-flagge). */
.tm .mail-peintrag.markiert .mail-poeffnen{border-left:0;
      box-shadow:inset 5px 0 0 var(--mail-flagge,var(--gold))}
.tm .mail-flagge{width:13px;height:13px;flex:0 0 auto;color:var(--gold);display:grid;place-items:center}
.tm .mail-flagge svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;
      stroke-linecap:round;stroke-linejoin:round}

/* Trennlinie zwischen den Mails und die Tagesgruppen (§21 Nr. 5) */
.tm .mail-peintrag+.mail-peintrag{border-top:1px solid var(--line)}
.tm .mail-tagriegel{padding:16px 12px 6px;font:800 10.5px var(--font);letter-spacing:.1em;
      text-transform:uppercase;color:var(--muted)}
.tm .mail-tagriegel:first-child{padding-top:6px}

/* Schnellaktionen beim Ueberfahren einer Zeile (§21 Nr. 9.2) */
.tm .mail-schnell{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;gap:2px;
      opacity:0;pointer-events:none;background:var(--surface);border-radius:var(--r-md);
      box-shadow:var(--shadow-2);padding:2px;transition:opacity var(--t-fast)}
.tm .mail-peintrag:hover .mail-schnell,
.tm .mail-peintrag:focus-within .mail-schnell{opacity:1;pointer-events:auto}
.tm .mail-schnellknopf{width:26px;height:26px;border:none;cursor:pointer;background:none;color:var(--ink-2);
      border-radius:var(--r-md);display:grid;place-items:center}
.tm .mail-schnellknopf:hover{background:var(--row-hover);color:var(--ink)}
.tm .mail-schnellknopf svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;
      stroke-linecap:round;stroke-linejoin:round}

/* ---------- Kopf der Nachricht im Lesebereich (§20 Nr. 2) ---------- */
.tm .mail-postkopf{padding:0 22px 13px}
.tm .mail-pkzeile1{display:flex;align-items:center;gap:11px;min-width:0}
.tm .mail-pkzeile1 .ini{flex:0 0 auto;width:32px;height:32px;border-radius:var(--r-pill);display:grid;
      place-items:center;background:var(--surface-sunken);color:var(--ink-2);font:800 12px var(--font)}
.tm .mail-pkzeile1 .w{min-width:0;flex:1 1 auto}
.tm .mail-pkzeile1 .w b{display:block;font-size:14px;font-weight:800;letter-spacing:-.01em;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm .mail-pkzeile1 .w small{display:block;font-size:12px;color:var(--muted);font-weight:600;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm .mail-pkzeile1 .dat{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.tm .mail-pkfelder{display:grid;gap:3px;margin-top:10px}
.tm .mail-pkfelder .f{display:flex;gap:9px;align-items:baseline;min-width:0}
.tm .mail-pkfelder .lbl{font:800 10px var(--font);letter-spacing:.12em;text-transform:uppercase;
      color:var(--muted);width:30px;flex:0 0 auto}
.tm .mail-pkfelder .v{min-width:0;font-size:12.5px;font-weight:600;color:var(--ink-2);
      overflow-wrap:anywhere}
.tm .mail-pkanh{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}

/* ---------- Knopfleiste in derselben Zeile wie „Nachricht" (§21 Nr. 6) ---- */
.tm .mail-lesekopfzeile{flex-wrap:nowrap;gap:10px;row-gap:10px}
.tm .mail-lesekopfzeile .mail-lesekopf{flex:0 0 auto}
.tm .mail-kopfrechts{margin-left:auto;flex-wrap:nowrap;justify-content:flex-end;min-width:0}
.tm .mail-knopfleiste{display:flex;gap:6px;flex-wrap:nowrap;align-items:center}
.tm .mail-knopfleiste .btn{height:32px;padding:0 12px;font-size:12.5px;gap:7px}
/* Nebenaktionen nur als Symbol mit Tooltip, damit alles in EINE Zeile passt. */
.tm .mail-knopfleiste .btn:not([data-tat="antworten"]) span{display:none}
.tm .mail-knopfleiste .btn:not([data-tat="antworten"]){padding:0 9px}
@media(max-width:1100px){
  .tm .mail-lesekopfzeile{flex-wrap:wrap}
  .tm .mail-kopfrechts{margin-left:0;flex-wrap:wrap}
}
.tm .mail-ktrenn{width:1px;height:20px;flex:0 0 auto;margin:0 5px;background:var(--line-2);
      border-radius:var(--r-pill)}
.tm .mail-sym{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;
      stroke-linecap:round;stroke-linejoin:round}

/* ---------- Kuerzel-Kreis des Zustaendigen (§17) ---------- */
.tm .mail-wer{width:24px;height:24px;flex:0 0 auto;border-radius:var(--r-pill);display:grid;
      place-items:center;background:var(--surface-sunken);color:var(--ink-2);font:800 10px var(--font);
      letter-spacing:.02em}
.tm .mail-wer.keiner{width:auto;padding:0 10px;height:22px;background:var(--amber-soft);
      color:var(--amber-on-soft);font-size:10.5px;border-radius:var(--r-pill)}

/* ---------- Kontextpanel ueber dem Gespraech, eingeklappt auf eine Zeile -- */
.tm .mail-kkopf{display:flex;align-items:center;gap:11px;width:100%;min-width:0;border:none;
      cursor:pointer;background:none;font-family:var(--font);color:var(--ink);text-align:left;
      padding:11px 20px}
.tm .mail-kkopf:hover{background:var(--row-hover)}
.tm .mail-kkopf .ini{flex:0 0 auto;width:32px;height:32px;border-radius:var(--r-pill);display:grid;
      place-items:center;background:var(--surface-sunken);color:var(--ink-2);font:800 12px var(--font)}
.tm .mail-kkopf .txt{min-width:0;flex:1 1 auto}
.tm .mail-kkopf .txt b{display:block;font-size:14px;font-weight:800;letter-spacing:-.02em;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm .mail-kkopf .txt .sub{display:block;font-size:12px;color:var(--ink-2);font-weight:600;margin-top:1px;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm .mail-kkopf .badge{flex:0 0 auto}
.tm .mail-kkopf .pf{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.4;
      stroke-linecap:round;stroke-linejoin:round;color:var(--muted);transition:transform var(--t-fast)}
.tm .mail-r.kontext-auf .mail-kkopf .pf{transform:rotate(90deg)}
.tm .mail-kbody{display:none;border-top:1px solid var(--line)}
.tm .mail-r.kontext-auf .mail-kbody{display:block}
.tm .mail-kraster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:0}
.tm .mail-kblock{padding:14px 20px;min-width:0}
.tm .mail-kfuss{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;padding:12px 20px 16px;
      border-top:1px solid var(--line)}
.tm .mail-abstand{margin-top:8px}
.tm .mail-kz{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:7px 0;
      border-bottom:1px solid var(--line);font-size:13px;min-width:0}
.tm .mail-kz:last-child{border-bottom:none}
.tm .mail-kz>span{min-width:0}
.tm .mail-kz span b{display:block;font-weight:800;overflow-wrap:anywhere}
.tm .mail-kz span small{display:block;color:var(--muted);font-size:11.5px;font-weight:600;
      overflow-wrap:anywhere}
.tm .mail-kz .badge{flex:0 0 auto}
.tm .mail-sperre{margin-top:10px;background:var(--crit-soft);color:var(--crit-on-soft);
      border-radius:var(--r-md);padding:9px 12px;font-size:12.5px;font-weight:700}

/* Zuordnen-Formular im Fuss des Kontextpanels (§5 Nr. 11) */
.tm .mail-zuform{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;flex:1 1 auto}
.tm .mail-zufeld{display:grid;gap:4px;min-width:0;flex:1 1 180px}
.tm .mail-zufeld .lbl{font:800 10px var(--font);letter-spacing:.12em;text-transform:uppercase;
      color:var(--muted)}
.tm .mail-zufeld input{height:34px}

/* ---------- Zeitleiste der Kundenakte (BP-06) ---------- */
.tm .mail-zeitleiste{padding:14px 20px 4px;border-top:1px solid var(--line)}
.tm .mail-zeitleiste ol{list-style:none;margin:0;padding:0;display:grid;gap:0}
.tm .mail-zeitleiste li{display:flex;align-items:baseline;gap:10px;padding:8px 0;
      border-bottom:1px solid var(--line);font-size:12.5px;min-width:0}
.tm .mail-zeitleiste li:last-child{border-bottom:none}
.tm .mail-zeitleiste .dat{width:92px;flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--muted)}
.tm .mail-zeitleiste .art{flex:0 0 auto;font-size:10.5px;padding:3px 9px;width:96px;
      justify-content:center}
.tm .mail-zeitleiste .txt{min-width:0}
.tm .mail-zeitleiste .txt b{display:block;font-weight:700;overflow-wrap:anywhere}
.tm .mail-zeitleiste .txt small{display:block;color:var(--muted);font-size:11.5px;font-weight:600;
      overflow-wrap:anywhere}

/* ---------- Geoeffnetes Gespraech ---------- */
.tm .mail-thead{padding-top:2px}
.tm .mail-thead h2{font-size:17px;line-height:1.3;margin-bottom:10px;overflow-wrap:anywhere}
.tm .mail-gkopf{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.tm .mail-gkopf .mail-gwer{font-size:12px;font-weight:700;color:var(--ink-2)}
.tm .mail-gknoepfe{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.tm .mail-gknoepfe .btn{height:30px;padding:0 12px;font-size:12px}
.tm .mail-praesenz{margin-top:10px;background:var(--info-soft);color:var(--info-on-soft);
      border-radius:var(--r-md);padding:8px 12px;font-size:12.5px;font-weight:700}

/* Verlauf von oben: neueste Nachricht offen, aeltere als Kopfzeile (§19 Nr. 5) */
.tm .mail-thread{display:flex;flex-direction:column;gap:8px;padding:4px 22px 18px}
.tm .mail-verlaufkopf{font:800 11px var(--font);letter-spacing:.1em;text-transform:uppercase;
      color:var(--muted);padding:12px 4px 2px}
.tm .mail-mail{border-radius:var(--r-lg);background:var(--surface-2);min-width:0;overflow:hidden}
.tm .mail-mail.aus{background:var(--gold-soft);box-shadow:inset 3px 0 0 var(--gold)}
.tm .mail-mail.geloescht{opacity:.7}
.tm .mail-mkopf{display:flex;align-items:center;gap:10px;width:100%;min-width:0;border:none;
      background:none;cursor:pointer;font-family:var(--font);color:var(--ink);text-align:left;
      padding:11px 16px}
.tm .mail-mail.ein .mail-mkopf:hover{background:var(--row-hover)}
.tm .mail-mkopf:hover .mail-mpf{color:var(--ink)}
.tm .mail-mkopf .ini{flex:0 0 auto;width:28px;height:28px;border-radius:var(--r-pill);display:grid;
      place-items:center;background:var(--surface-sunken);color:var(--ink-2);font:800 11px var(--font)}
.tm .mail-mkopf .w{min-width:0;flex:0 0 auto;max-width:38%}
.tm .mail-mkopf b{display:block;font-size:13.5px;font-weight:800;overflow:hidden;
      text-overflow:ellipsis;white-space:nowrap}
.tm .mail-mkopf small{display:block;font-size:11.5px;color:var(--muted);font-weight:600;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm .mail-mkopf .vor{flex:1 1 auto;min-width:0;font-size:12.5px;color:var(--muted);overflow:hidden;
      text-overflow:ellipsis;white-space:nowrap}
.tm .mail-mail.auf .mail-mkopf .vor{display:none}
.tm .mail-mkopf .z{margin-left:auto;font-size:11.5px;color:var(--muted);font-weight:700;
      white-space:nowrap;flex:0 0 auto}
.tm .mail-mkopf .mail-mpf{width:13px;height:13px;flex:0 0 auto;fill:none;stroke:currentColor;
      stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;color:var(--muted);
      transition:transform var(--t-fast)}
.tm .mail-mkopf[aria-expanded="true"] .mail-mpf{transform:rotate(90deg)}
.tm .mail-mkoerper{padding:0 16px 14px}
.tm .mail-mail.neueste{background:none;box-shadow:none}
.tm .mail-mail.neueste > .mail-mkopf{display:none}
.tm .mail-mail.neueste .mail-mkoerper{padding:0 0 14px}
.tm .mail-mail .t{font-size:13.5px;line-height:1.6;color:var(--ink);overflow-wrap:anywhere;
      white-space:pre-wrap}
.tm .mail-mail .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.tm .mail-mail .chips .badge{min-width:0;white-space:normal;overflow-wrap:anywhere}
.tm .mail-textlaedt{font-size:13px;font-weight:700;color:var(--muted);padding:8px 0}

/* Anhang-Chip: Klammer, Name, Groesse — anklickbar (Vorschau/Herunterladen) */
.tm .mail-anh{gap:8px;cursor:pointer;border:none;font-family:var(--font)}
.tm .mail-anh svg{width:12px;height:12px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;
      stroke-linecap:round;stroke-linejoin:round}
.tm .mail-anh .n{max-width:26ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm .mail-anh .g{color:var(--muted);font-weight:700}
.tm .mail-anh:hover{background:var(--gold-soft);color:var(--gold-on-soft)}

/* Signatur: gehoert zur Mail, wird nie eingeklappt, tritt aber zurueck */
.tm .mail-sig{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;
      line-height:1.5;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere}

/* Zitierter Text: standardmaessig zu, wie in Outlook und Gmail */
.tm .mail-zitat{margin-top:11px}
.tm .mail-zitat-auf{display:inline-flex;align-items:center;gap:7px;border:none;cursor:pointer;
      background:var(--surface-sunken);color:var(--ink-2);border-radius:var(--r-pill);
      font:800 11px var(--font);padding:4px 11px}
.tm .mail-zitat-auf:hover{background:var(--gold-soft);color:var(--gold-on-soft)}
.tm .mail-zitat-auf .pkt{font-size:12px;line-height:1;letter-spacing:.08em}
.tm .mail-zitat-t{margin-top:10px;padding-left:12px;border-left:2px solid var(--line-2);font-size:12px;
      line-height:1.5;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}

/* HTML-Fassung im abgeschotteten Rahmen (§5 Nr. 15) */
.tm .mail-htmlwahl{margin-top:12px;display:grid;gap:8px}
.tm .mail-htmlrahmen{width:100%;min-height:320px;border:1px solid var(--line-2);
      border-radius:var(--r-lg);background:var(--page)}

/* ---------- Leerzustaende ---------- */
.tm .mail-leer{padding:34px 24px;text-align:center;color:var(--ink-2);font-size:13.5px}
.tm .mail-leer b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}

/* ---------- Rueckgaengig-Leiste (§21 Nr. 9.1) ---------- */
.tm .mail-undo{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:1100;
      display:flex;align-items:center;gap:14px;background:var(--ink);color:var(--page);
      padding:10px 12px 10px 20px;border-radius:var(--r-pill);box-shadow:var(--shadow-3);
      font:600 13.5px var(--font)}
.tm .mail-undo[hidden]{display:none}
[data-theme="dark"] .tm .mail-undo{background:var(--surface-3);color:var(--ink)}
.tm .mail-undo-knopf{border:none;cursor:pointer;background:var(--gold-soft);color:var(--gold-on-soft);
      font:800 12.5px var(--font);padding:7px 14px;border-radius:var(--r-pill)}

/* ---------- Anhang-Vorschau (§21 Nr. 9.5) ---------- */
.tm .mail-anh-modal{max-width:720px}
.tm .mail-anh-inhalt{display:grid;place-items:center;padding:14px 0;min-height:200px}
.tm .mail-anh-inhalt img{max-width:100%;max-height:60vh;border-radius:var(--r-md)}
.tm .mail-anh-pdf{width:100%;height:60vh;border:none;border-radius:var(--r-md);background:var(--page)}

/* ---------- Stopper beim Spaltenziehen (§21 Nr. 2) ---------- */
.tm .ziehgriff.stopper::after{background:var(--gold)}

/* ---------- Mein Konto und Verwaltung ---------- */
.tm .mail-kontofelder{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
      gap:12px;padding:16px 20px}
.tm .mail-log{margin-top:8px;padding:10px 12px;background:var(--surface-sunken);
      border-radius:var(--r-md);font:600 11.5px/1.5 var(--mono,monospace);color:var(--ink-2);
      max-height:240px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}

/* ==========================================================================
   WARTESCHLANGE (§21 Nr. 7–12)
   ========================================================================== */
.tm .mail-wq{display:grid;grid-template-columns:220px minmax(0,1fr);gap:14px;align-items:start;padding:2px}
.tm .mail-wqlinks{padding:8px 8px 12px;align-self:start;position:sticky;top:0}
.tm .mail-wqgruppe{display:grid;gap:1px;padding-bottom:6px}
.tm .mail-wqgruppe .lbl{font:800 10px var(--font);letter-spacing:.12em;text-transform:uppercase;
      color:var(--muted);padding:12px 12px 5px}
.tm .mail-wqlinks .mail-wqgruppe + .mail-wqgruppe{margin-top:8px;padding-top:8px;
      border-top:1px solid var(--line)}
.tm .mail-wqsicht{display:flex;align-items:center;gap:8px;width:100%;border:none;background:none;
      cursor:pointer;font:700 13px var(--font);color:var(--ink-2);padding:8px 12px;
      border-radius:var(--r-md);text-align:left}
.tm .mail-wqsicht:hover{background:var(--row-hover);color:var(--ink)}
.tm .mail-wqsicht.on{background:var(--gold-soft);color:var(--gold-on-soft)}
.tm .mail-wqsicht .n{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm .mail-wqsicht .z{font:800 11.5px var(--font);color:var(--muted);font-variant-numeric:tabular-nums;
      flex:0 0 auto}
.tm .mail-wqsicht.on .z{color:var(--gold-on-soft)}

.tm .mail-wqinhalt{min-width:0}
.tm .mail-wqkopf{display:flex;justify-content:flex-end;margin-bottom:12px}
.tm .mail-wqansicht{display:flex;background:var(--surface-sunken);border-radius:var(--r-pill);padding:2px}
.tm .mail-wqansicht button{border:none;cursor:pointer;font:800 12px var(--font);padding:7px 16px;
      border-radius:var(--r-pill);background:none;color:var(--muted)}
.tm .mail-wqansicht button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}

/* ---------- Tafel ---------- */
.tm .mail-wqtafel{display:flex;gap:12px;align-items:flex-start;overflow-x:auto;padding-bottom:6px}
.tm .mail-r[data-wqansicht="liste"] .mail-wqtafel,
.tm .mail-r[data-wqansicht="tafel"] .mail-wqlistekarte{display:none}
.tm .mail-wqspalte{position:relative;flex:0 0 var(--wqw,300px);min-width:240px;display:flex;
      flex-direction:column;background:var(--surface-sunken);border-radius:var(--r-xl);padding:10px;
      max-height:calc(100vh - 260px)}
.tm .mail-wqspalte.zu{flex:0 0 44px;min-width:44px;align-items:center}
.tm .mail-wqspaltenkopf{display:flex;align-items:center;gap:8px;width:100%;border:none;background:none;
      cursor:pointer;font-family:var(--font);color:var(--ink-2);padding:4px 8px 10px;min-width:0}
.tm .mail-wqspalte.zu .mail-wqspaltenkopf{flex-direction:column;padding:10px 0}
.tm .mail-wqspaltenkopf .lbl{font:800 10.5px var(--font);letter-spacing:.08em;text-transform:uppercase;
      flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
      text-align:left;padding:0}
.tm .mail-wqspalte.zu .mail-wqspaltenkopf .lbl{display:none}
.tm .mail-wqspaltenkopf .senk{display:none;writing-mode:vertical-rl;font:800 10.5px var(--font);
      letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.tm .mail-wqspalte.zu .mail-wqspaltenkopf .senk{display:block}
.tm .mail-wqspaltenkopf .z{font:800 11.5px var(--font);color:var(--muted);
      font-variant-numeric:tabular-nums;flex:0 0 auto}
.tm .mail-wqkarten{display:flex;flex-direction:column;gap:2px;overflow-y:auto;
      overscroll-behavior:contain;flex:1 1 auto;min-height:80px;border-radius:var(--r-lg)}
.tm .mail-wqspalte.zu .mail-wqkarten{display:none}
.tm .mail-wqspalte.zu .ziehgriff{display:none}
/* Ziehen: die Zielspalte zeigt deutlich „Hier ablegen" (§21 Nr. 7/10) */
.tm .mail-wqkarten.mail-wqziel-ueber{background:var(--gold-soft);outline:2px dashed var(--gold);
      outline-offset:-2px;position:relative}
.tm .mail-wqkarten.mail-wqziel-ueber::before{content:"Hier ablegen";position:sticky;top:0;z-index:2;
      display:block;text-align:center;font:800 12px var(--font);color:var(--gold-on-soft);
      padding:14px 6px;pointer-events:none}
.tm .mail-wqspalte .mail-wqgruppe[data-art]{display:block;padding-bottom:0;gap:0}
.tm .mail-wqspalte .mail-wqgruppe[hidden]{display:none}
.tm .mail-wqgruppenkopf{display:flex;align-items:center;gap:8px;padding:9px 6px 4px;min-width:0}
.tm .mail-wqgruppenkopf .lbl{font:800 10px var(--font);letter-spacing:.08em;text-transform:uppercase;
      color:var(--muted);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
      white-space:nowrap;padding:0}
.tm .mail-wqgruppenkopf .z{font:800 10.5px var(--font);color:var(--muted);
      font-variant-numeric:tabular-nums}
.tm .mail-wqgruppenkarten{display:flex;flex-direction:column;gap:8px;padding:0 2px 4px}
.tm .mail-wqleerspalte{padding:24px 10px;text-align:center;color:var(--muted);font-size:12.5px}

.tm .mail-wqkarte{cursor:grab;min-width:0;padding:0}
.tm .mail-wqkarte.zieht{opacity:.4}
.tm .mail-wqkarte.gewaehlt{box-shadow:0 0 0 2px var(--gold)}
.tm .mail-wqzeile1{display:flex;align-items:flex-start;gap:6px;padding:11px 12px 6px}
.tm .mail-wqoeffnen{flex:1 1 auto;min-width:0;border:none;background:none;cursor:pointer;
      text-align:left;display:block;padding:0;font-family:var(--font);color:var(--ink)}
.tm .mail-wqoeffnen b{display:block;font-size:12.5px;font-weight:800;overflow:hidden;
      text-overflow:ellipsis;white-space:nowrap}
.tm .mail-wqoeffnen .betr{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm .mail-wqpfeil{flex:0 0 auto;width:22px;height:22px;border:none;background:none;cursor:pointer;
      color:var(--muted);border-radius:var(--r-md);display:grid;place-items:center}
.tm .mail-wqpfeil:hover{background:var(--surface);color:var(--ink)}
.tm .mail-wqpfeil svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.6;
      stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-fast)}
.tm .mail-wqpfeil[aria-expanded="true"] svg{transform:rotate(90deg)}
.tm .mail-wqfuss{display:flex;align-items:center;gap:8px;padding:0 12px 11px;min-width:0;
      font:700 11px var(--font);color:var(--muted)}
.tm .mail-wqfuss .bereich{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tm .mail-wqfuss .alter{white-space:nowrap;flex:0 0 auto}
.tm .mail-wqfuss .mail-wer{margin-left:auto;width:22px;height:22px;font-size:9px}
.tm .mail-wqfuss .mail-wer.keiner{width:auto;height:19px;font-size:10px;margin-left:auto}
.tm .mail-wqauf{padding:0 12px 12px;display:grid;gap:9px}
.tm .mail-wqsnip{font-size:12px;color:var(--ink-2);line-height:1.5}
.tm .mail-wqfrist{font-size:11.5px;font-weight:700;color:var(--muted)}
.tm .mail-wqfrist.ueber{color:var(--crit-on-soft)}
.tm .mail-wqknoepfe{flex-wrap:wrap}

/* Griff am rechten Rand jeder offenen Spalte (§21 Nr. 7/10, min. 240 px) */
.tm .ziehgriff[data-griff^="wq-"]{position:absolute;top:0;right:-7px;width:14px;bottom:0;z-index:5}

/* ---------- Liste ---------- */
.tm .mail-wqlistekarte{overflow:hidden}
.tm .mail-wqtabelle{overflow:auto;overscroll-behavior:contain}
.tm .mail-wqtab{width:100%}
/* V3.7.3-Gegenlesen (04.09.2026): kein border-radius:0 mehr — die Gruppenzeile rundet wie jede Zeile ueber td:first/last-child (Runde Ecken ueberall). */
.tm .mail-wqgruppenzeile td{background:var(--surface-sunken);padding:9px 12px !important}
.tm .mail-wqgruppenzeile .lbl{font:800 10.5px var(--font);letter-spacing:.1em;text-transform:uppercase;
      color:var(--muted)}
.tm .mail-wqgruppenzeile .z{margin-left:8px;font:800 10.5px var(--font);color:var(--muted)}
.tm .mail-wqtab td,.tm .mail-wqtab th{padding-top:9px;padding-bottom:9px}
.tm .mail-wqzustzelle{font-size:12.5px;font-weight:700;white-space:nowrap}
.tm .mail-wqt-firma{display:block;font-weight:800;font-size:13px;max-width:20ch;overflow:hidden;
      text-overflow:ellipsis;white-space:nowrap}
.tm .mail-wqt-betreff{font-size:12.5px;color:var(--ink-2);display:inline-flex;align-items:center;
      gap:7px;min-width:0}
.tm .mail-wqt-betreff .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:32ch}
.tm .mail-wqsp-bereich,.tm .mail-wqsp-wer,.tm .mail-wqtab td.tr-r{white-space:nowrap}
.tm .mail-wqtab tbody tr:not(.mail-wqgruppenzeile){cursor:pointer}
.tm .mail-wqtab tbody tr.gewaehlt td{background:var(--row-sel)}
.tm .mail-wqsort{border:none;background:none;cursor:pointer;padding:0;color:inherit;font:inherit;
      letter-spacing:inherit;text-transform:inherit;display:inline-flex;align-items:center;gap:5px}
.tm .mail-wqsort:hover{color:var(--ink)}
.tm .mail-wqsort .pf{font-size:9px;opacity:0}
.tm .mail-wqsort.an{color:var(--ink)}
.tm .mail-wqsort.an .pf{opacity:1}
.tm .mail-wqleer{padding:30px 20px;text-align:center;color:var(--ink-2);font-size:13px}
.tm .mail-wqleer:not([hidden]){display:block}

/* ---------- Responsiv ----------
   Massgeblich ist die Arbeitsflaeche, nicht das Fenster: die Schiene nimmt
   250 px, die Raender von .tm-main 48 px. 1000 px Arbeitsflaeche entsprechen
   rund 1300 px Fensterbreite; 1320 px lassen Platz fuer eine Bildlaufleiste
   (§6: Umschaltschwelle bei rund 1000 px Arbeitsflaeche). */
@media(max-width:1320px){
  .tm .mail-r,.tm .mail-r.zu-ord,.tm .mail-r.zu-list,.tm .mail-r.zu-lese,
  .tm .mail-r.zu-ord.zu-list,.tm .mail-r.zu-ord.zu-lese{grid-template-columns:200px minmax(0,1fr)}
  .tm .mail-r[data-seite="warte"],.tm .mail-r[data-seite="warte"].zu-list,
  .tm .mail-r[data-seite="warte"].zu-lese{grid-template-columns:minmax(0,1fr)}
  .tm .mail-r .ziehgriff:not([data-griff^="wq-"]),.tm .mail-r .spaltenklapp{display:none}
  .tm .mail-r .spaltenstreifen,
  .tm .mail-r.zu-ord .mail-ordspalte>.spaltenstreifen,
  .tm .mail-r.zu-list .mail-listspalte>.spaltenstreifen{display:none}
  .tm .mail-r.zu-ord .mail-ordspalte>.card,
  .tm .mail-r.zu-list .mail-listspalte>.card{display:block}
  .tm .mail-r[data-seite="postfach"].offen .mail-listspalte{display:none}
  .tm .mail-r[data-seite="postfach"]:not(.offen) .mail-gesprspalte{display:none}
  .tm .mail-r[data-seite="postfach"] .mail-zurueck{display:inline-flex}
  .tm .mail-wq{grid-template-columns:minmax(0,1fr)}
  .tm .mail-wqlinks{position:static}
}
@media(max-width:900px){
  .tm .mail-r,.tm .mail-r.zu-ord,.tm .mail-r.zu-list,.tm .mail-r.zu-lese,
  .tm .mail-r.zu-ord.zu-list,.tm .mail-r.zu-ord.zu-lese{grid-template-columns:minmax(0,1fr)}
  .tm .mail-ordspalte{margin-bottom:14px}
  .tm .mail-wqspalte{flex:0 0 78vw}
  .tm .mail-r[data-seite="warte"].offen .mail-gesprspalte{padding:12px}
}
@media(max-width:700px){
  .tm .mail-kkopf{padding:11px 15px}
  .tm .mail-kblock{padding:12px 15px}
  .tm .mail-kfuss{padding:12px 15px 14px}
  .tm .mail-zeitleiste{padding:12px 15px 2px}
  .tm .mail-zeitleiste li{flex-wrap:wrap;gap:6px}
  .tm .mail-thread{padding:4px 14px 14px}
  .tm .mail-postkopf{padding:0 15px 12px}
  .tm .mail-pkzeile1 .dat{display:none}
  .tm .mail-gknoepfe{margin-left:0}
  .tm .mail-mkopf .w{max-width:none}
  .tm .mail-mkopf .vor{display:none}
  .tm .mail-kontofelder{grid-template-columns:minmax(0,1fr);padding:14px 15px}
  .tm .mail-knopfleiste .btn[data-tat="antworten"] span{display:none}
}

/* ============================================================================
   V3.7.1 — KERN-NACHLAUF (Haris, 04.09.2026): Logo-Schatten seitlich beschnitten
   Befund (Screen 3): Beim Scrollen der Schiene bekommt der Logoblock den
   Kopfschatten (.gescrollt, V3.4.2). Seit der Umstellung der Schiene auf
   Logo / Menue / Fuss (V3.6.1) steht dort `clip-path:none` — der weiche Teil
   des Schattens (22 px Unschaerfe) laeuft deshalb seitlich ueber die Kante und
   zeichnet rechts neben dem Logo eine Naht zur Kopfzeile. Das Logo gehoert
   aber zum Kopfband; die Naht darf es nicht geben (V3.4.3 c hatte sie schon
   einmal beschnitten). Jetzt wieder: nur der untere Schatten bleibt.
   Wie ueberall nur Token, kein Farbwert.
   ========================================================================== */
.tm-rail-logo{clip-path:inset(0 0 -60px 0)}

/* ---------- Kopfband auch eingeklappt (Screen 4, Wiederholungsfall) ----------
   V3.6.0 gab der eingeklappten Schiene `padding:20px 9px`; V3.6.1 setzte die
   Schiene auf `padding:0` (Logo, Menue und Fuss tragen ihre Abstaende selbst),
   aber mit geringerer Spezifitaet — eingeklappt blieben die 20 px oben stehen,
   und der Logoblock lag 20 px tiefer als die Kopfzeile (Band 20–104 statt
   0–84). Gemessen wird das jetzt von ecken_pruefen.js (Kopfband). */
html[data-rail="zu"] .tm-rail{padding:0}

/* ============================================================================
   V3.7.3 — AUFTRAG/PICK-NACHLAUF (04.09.2026)
   Vier Punkte aus der Sichtung von Haris am 04.09.2026 zur Kommissionierung
   eines Auftrags (module/auftrag/pick.php, Aufgabenzeilen .picktask):

   b) Der Bestand steht nicht mehr unter der VE innerhalb der Artikelzelle,
      sondern als EIGENE Spalte rechts neben dem Namen — Spalte 1
      Artikelnummer, Spalte 2 Name, Spalte 3 Bestand. Die Zeile hat dadurch
      vier Spalten: Artikel · Bestand · Menge · Knoepfe.
   c) In dieser Spalte stehen untereinander der Gesamtbestand mit Ampelpunkt
      und darunter Lager 1 und Lager 2 — der Kommissionierer sieht, ob er Ware
      aus dem anderen Lager holen muss.
   d) Die Artikelnummer steht wieder senkrecht mittig zur Zeile.

   Zu d): V3.4.9 Punkt c hat .picktask .artcell auf `flex-start` gestellt, weil
   die Namensspalte mit der Bestandszeile dreizeilig war. Diese Bestandszeile
   ist mit Punkt b aus der Artikelzelle heraus — der Grund ist damit entfallen,
   die Regel wird hier zurueckgenommen (nur fuer die Pick-Zeile; in Tabellen
   war sie ohnehin nie gesetzt). Aus demselben Grund laeuft .aname .sub2
   (V3.4.9 Punkt 1) in der Pick-Zeile jetzt leer; die Regel bleibt stehen, um
   den vorigen Abschnitt nicht umzuschreiben.

   Umbruch: Vier Spalten brauchen mehr Platz als drei. Die Zeile steht ab
   1180 px Fensterbreite vierspaltig (vorher dreispaltig ab 1080 px, V3.4.6)
   und darunter untereinander wie bisher — im gestapelten Zustand laufen
   Gesamtbestand, Lager 1 und Lager 2 nebeneinander in einer Reihe.

   Wie ueberall: nur Token aus tokens.css, kein Farbwert, kein Pixel-Radius.
   ========================================================================== */

/* ---------- b) Drei Gruppen, sauber aufgeteilt: Artikel+Bestand · Menge · Knoepfe
   Nachlauf 04.09.2026 (3), Haris: „Ich meinte damit nicht, dass die vier
   Spalten gleich breit sein sollen, sondern dass es sauber aufgeteilt werden
   soll." Das ist ab hier die EINZIGE Spaltenregel der Pick-Zeile: sie loest
   die vier gleich breiten Spalten (repeat(4,1fr), Nachlauf 2), die erste
   Aufteilung dieses Abschnitts (1.15fr · auto · .85fr · auto) und den Nachtrag
   vom selben Tag (fit-content ab 1500 px) ab — alle drei sind entfallen, damit
   es nicht mehrere Staende nebeneinander gibt.

   Aufbau: Artikelzelle und Bestandsblock stehen als EINE Gruppe links dicht
   beieinander (beide inhaltsbreit, `auto`), die Knoepfe als Gruppe rechts
   (ebenfalls inhaltsbreit, damit sie in EINER Reihe bleiben), die Mengenwahl
   mit Stepper steht in der Mitte. Die Luft dazwischen ist gleich gross, ohne
   dass eine Rechnung noetig waere: die mittlere Spur nimmt den ganzen freien
   Platz (1fr) und die Mengenwahl steht darin mittig — also links und rechts
   von ihr gleich viel. Innerhalb einer Gruppe entsteht keine Leerflaeche,
   weil `auto` genau die Inhaltsbreite ist. Der Mindestabstand ist die Fuge
   (18 px); mehr Luft gibt es nur, wenn Platz uebrig ist. `1fr` ohne eigenes
   Minimum ist Absicht: seine untere Grenze ist damit die Inhaltsbreite der
   Mengenwahl, ein festes Minimum (minmax(24px,1fr)) haette sie in engen
   Fenstern auf 24 px zusammengedrueckt und ueberlaufen lassen.

   Knoepfe in einer Reihe: ab 1280 px Fensterbreite darf die Knopfgruppe nicht
   umbrechen (`flex-wrap:nowrap`). Dadurch ist ihre Mindestbreite die Summe der
   drei Knoepfe — das Raster nimmt den Platz bei Enge aus den anderen Spuren,
   statt die Knoepfe zu stapeln. Unter 1180 px stapelt der Block weiter unten
   wie bisher.
   Lesegroessen (.anr, .aname, .kg) bleiben, wie V3.4.0 sie gesetzt hat. */
.tm .picktask,
.tm .pickgrid .picktask{grid-template-columns:auto auto 1fr auto;gap:18px}
.tm .picktask .pq,.tm .pickgrid .picktask .pq{justify-content:center}
.tm .picktask .acts,.tm .pickgrid .picktask .acts{justify-content:flex-end}
@media(min-width:1280px){
  .tm .picktask .acts,.tm .pickgrid .picktask .acts{flex-wrap:nowrap}
}

/* ---------- c) Die Bestandsspalte: Gesamt mit Ampel, darunter die Lager ----------
   `min-width:min-content` statt der frueheren 0 (Nachlauf 3): mit 0 durfte die
   Spur unter die Inhaltsbreite fallen — bei 1280 px war der Bestandsblock auf
   49 px zusammengedrueckt und lief aus seiner Zelle heraus. Er gehoert zur
   linken Gruppe und behaelt deshalb mindestens seine Inhaltsbreite. */
.tm .picktask .ptbest{display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  min-width:min-content;font-size:13.5px;color:var(--ink-2);line-height:1.35}
.tm .picktask .ptbest .ges{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tm .picktask .ptbest .ges b{font-size:15.5px;color:var(--ink)}
.tm .picktask .ptbest .lager{display:flex;flex-direction:column;gap:2px;color:var(--muted);font-size:12.5px}
.tm .picktask .ptbest .lager b{color:var(--ink-2)}

/* ---------- d) Artikelnummer senkrecht mittig (Ruecknahme von V3.4.9 c) ---------- */
.tm .picktask .artcell{align-items:center}
.tm .picktask .artcell .anr{padding-top:0}

/* ---------- Schmale Fenster: untereinander, Bestand in einer Reihe ---------- */
@media(max-width:1179px){
  .tm .picktask,.tm .pickgrid .picktask{grid-template-columns:minmax(0,1fr);gap:12px}
  .tm .picktask .acts,.tm .pickgrid .picktask .acts{justify-content:flex-start}
  .tm .picktask .ptbest{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 20px}
  .tm .picktask .ptbest .lager{flex-direction:row;gap:16px}
}

/* ---------- Kopfbereich der Kommissionierung: feste Breite -------------------
   Nachlauf 04.09.2026 (2), Haris: „Fixiere bei der Kommissionierung die
   Nachrichten und So wird gebucht." Die beiden Karten dehnen sich nicht mehr
   ueber den ganzen Bildschirm, sondern stehen linksbuendig nebeneinander mit
   einer Hoechstbreite je Karte; das Hinweisband „Bestand negativ" darueber
   (.pickband) endet an derselben Kante, damit der Kopfbereich eine Einheit
   ist. Ist der Inhaltsbereich schmaler als die beiden Karten zusammen, fuellen
   sie ihn wie bisher — die Kante bleibt trotzdem gemeinsam. Unter 900 px
   stehen sie untereinander wie seit V3.4.7. Es gibt weiterhin KEINE
   systemweite Hoechstbreite; das gilt nur fuer diesen Kopfbereich. */
.tm .pickinfo,.tm .pickband{--pick-karte:640px;--pick-fuge:16px;
  --pick-kopf:calc(var(--pick-karte)*2 + var(--pick-fuge))}
.tm .pickinfo{grid-template-columns:repeat(2,minmax(0,var(--pick-karte)));
  gap:var(--pick-fuge);justify-content:start;max-width:var(--pick-kopf)}
.tm .pickband{max-width:var(--pick-kopf)}
@media(max-width:899px){.tm .pickinfo{grid-template-columns:minmax(0,1fr)}}

/* ---------- V3.7.3 (Nachtrag) — Der Bestand klebt am Artikel ----------------
   ENTFALLEN am 04.09.2026 (Nachlauf 2), sein Anliegen steht seit Nachlauf 3 in
   Punkt b oben: Artikelzelle und Bestandsblock bilden die linke Gruppe und
   stehen in jeder Fensterbreite unmittelbar nebeneinander. Es gibt nur EINE
   Spaltenregel fuer die Pick-Zeile.
   -------------------------------------------------------------------------- */

/* ============================================================================
   V3.7.2 — MAIL-NACHLAUF (Auftrag Haris, 04.09.2026)
   Sieben Wuensche nach der Sichtung des Postfachs, dazu eine Regel, die
   ueberall gilt. Nichts aus V3.7.0 wird umgeschrieben; was hier steht,
   ergaenzt oder ueberstimmt es an genau den Stellen, die Haris am Bildschirm
   benannt hat. Wie ueberall: nur Token, kein Farbwert, kein Pixel-Radius.

   1 Zeile = Gespraech, mit Pfeil aufklappbar; die einzelnen Mails stehen als
     eingerueckte Unterzeilen darunter (§21 Nr. 8a, jetzt entschieden).
   3 Der Klapp-Knopf steht NEBEN „Neue E-Mail", nicht darunter.
   4 Weggeklappter Lesebereich: schmale Leiste statt ueberlaufendem Panel.
   5 Suchfeld und Suchleiste sind eine Flaeche.
   6 Markierung mit Flaggenfarbe: der Streifen links traegt die Farbe.
   8 Farbe nur ganz links: keine zweite Kante rechts, oben oder unten.
   ========================================================================== */

/* ---------- 1a. Die Kopfzeile einer Gespraechszeile ----------
   Der Pfeil sitzt links davor; die Zeile selbst ist jetzt der Anker fuer die
   Schnellaktionen (sie sollen ueber der Kopfzeile schweben, nicht ueber dem
   ganzen aufgeklappten Block). */
.tm .mail-pezeile{display:flex;align-items:flex-start;gap:2px;min-width:0;position:relative}
.tm .mail-pezeile > .mail-poeffnen{width:auto;flex:1 1 auto;min-width:0}
.tm .mail-pepfeil{width:22px;min-height:36px;flex:0 0 auto;display:grid;place-items:center;
      border:none;background:none;cursor:pointer;color:var(--muted);border-radius:var(--r-md);
      padding:0;margin-top:3px;transition:background var(--t-fast),color var(--t-fast)}
.tm .mail-pepfeil.leer{cursor:default;pointer-events:none;background:none}
.tm .mail-pepfeil:hover{background:var(--row-hover);color:var(--ink)}
.tm .mail-pepfeil svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;
      stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-fast)}
.tm .mail-peintrag.verlaufauf .mail-pepfeil svg{transform:rotate(90deg)}

/* ---------- 1b. Der aufgeklappte Verlauf ----------
   Eingerueckt bis unter die Initialen der Kopfzeile, damit man sieht, dass
   die Mails zu ihr gehoeren. */
.tm .mail-peverlauf{display:flex;flex-direction:column;gap:1px;padding:2px 0 8px 34px}
.tm .mail-peverlauf[hidden]{display:none}
.tm .mail-peunter{min-width:0;position:relative}
.tm .mail-peunter + .mail-peunter{border-top:1px solid var(--line)}
.tm .mail-puoeffnen{display:flex;gap:9px;align-items:flex-start;width:100%;min-width:0;border:none;
      background:none;cursor:pointer;text-align:left;padding:6px 10px;border-radius:var(--r-lg);
      font-family:var(--font);color:var(--ink)}
.tm .mail-puoeffnen:hover{background:var(--row-hover)}
.tm .mail-peunter.gewaehlt .mail-puoeffnen{background:var(--row-sel)}
.tm .mail-puoeffnen .ini{flex:0 0 auto;width:24px;height:24px;border-radius:var(--r-pill);display:grid;
      place-items:center;background:var(--surface-sunken);color:var(--ink-2);font:800 10px var(--font);
      margin-top:1px}
.tm .mail-putxt{display:grid;gap:1px;min-width:0;flex:1 1 auto;text-align:left}
.tm .mail-puoeffnen .z1{display:flex;align-items:baseline;gap:7px;min-width:0}
.tm .mail-puoeffnen .punkt{width:5px;height:5px;border-radius:var(--r-pill);background:transparent;
      flex:0 0 auto;align-self:center}
.tm .mail-peunter.neu .mail-puoeffnen .punkt{background:var(--gold)}
.tm .mail-puoeffnen .von{font-size:12.5px;font-weight:600;flex:1 1 auto;min-width:0;overflow:hidden;
      text-overflow:ellipsis;white-space:nowrap}
.tm .mail-peunter.neu .mail-puoeffnen .von{font-weight:800}
.tm .mail-puoeffnen .zeit{font-size:11px;font-weight:700;color:var(--muted);flex:0 0 auto;
      white-space:nowrap}
.tm .mail-peunter.neu .mail-puoeffnen .zeit{color:var(--ink-2)}
.tm .mail-puoeffnen .z3{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;
      white-space:nowrap}

/* ---------- 3. Klapp-Knopf neben „Neue E-Mail" ----------
   .row bricht von Haus aus um (flex-wrap:wrap); in der schmalen Listenspalte
   landete der Klapp-Knopf dadurch in der zweiten Zeile. Jetzt bleibt die
   Knopfgruppe zusammen, und der Kopftext weicht mit Auslassungspunkten. */
.tm .mail-listkopfzeile{gap:8px}
.tm .mail-listkopfzeile .mail-listkopf{min-width:0;overflow:hidden;text-overflow:ellipsis;
      white-space:nowrap}
.tm .mail-listknoepfe{flex-wrap:nowrap;flex:0 0 auto;gap:6px}
.tm .mail-listknoepfe .mail-neuknopf{white-space:nowrap}
/* Dasselbe fuer die beiden anderen Spaltenkoepfe. */
.tm .mail-ordspalte .sec-h,.tm .mail-lesekopfzeile{gap:8px}
.tm .mail-ordspalte .sec-h .rulelabel,.tm .mail-lesekopf{min-width:0;overflow:hidden;
      text-overflow:ellipsis;white-space:nowrap}
.tm .mail-kopfrechts{flex-wrap:nowrap;flex:0 1 auto;min-width:0}
.tm .mail-kopfrechts .mail-knopfleiste{flex-wrap:wrap;min-width:0}

/* ---------- 4. Weggeklappter Lesebereich ----------
   Bis heute schaltete .zu-lese nur die Rasterbreite auf 40 px um: das Panel
   blieb stehen und lief ganz rechts aus der Spalte heraus (Haris,
   04.09.2026). Jetzt verschwindet es wie bei den anderen Spalten, und die
   schmale Leiste mit senkrechtem Titel holt es zurueck.
   Nur im Postfach — in der Warteschlange ist der Lesebereich die
   Ueberlagerung, und der gespeicherte Klappzustand gilt dort nicht. */
.tm .mail-r[data-seite="postfach"].zu-lese .mail-gesprspalte > .spaltenstreifen{display:flex}
.tm .mail-r[data-seite="postfach"].zu-lese .mail-panelplatz,
.tm .mail-r[data-seite="postfach"].zu-lese .mail-gesprspalte > .mail-nichts{display:none}

/* ---------- 5. Suchfeld und Suchleiste sind eine Flaeche ----------
   .tm-search bringt aus der Kopfzeile des Arbeitsbereichs einen Schlagschatten
   mit. Auf der weissen Karte der Listenspalte hob sich das Feld dadurch von
   seiner eigenen Leiste ab (Haris, 04.09.2026). Gleiche Flaeche, dazu ein
   dezenter Rahmen, damit man das Feld trotzdem als Feld erkennt. */
.tm .mail-suchzeile .tm-search{background:var(--surface);box-shadow:none;
      border:1px solid var(--line)}
.tm .mail-suchzeile .tm-search:focus-within{border-color:var(--gold)}

/* ---------- 6. Flaggenfarbe der Markierung ----------
   Die Klasse kommt aus der EINEN Zustandsfunktion des Moduls
   (tmm_postfach_streifen(), Regel 18). Im Postfach gibt es keine Zustaende
   (§19 Nr. 4) — dort ist der Streifen die Flagge, und seine Farbe waehlt der
   Mensch. Die Farbfamilie steht in einer Variablen, damit Streifen und
   Faehnchen aus einer Quelle kommen. */
.tm .mail-peintrag.streifen-gold,.tm .mail-peunter.streifen-gold{--mail-flagge:var(--gold)}
.tm .mail-peintrag.streifen-crit,.tm .mail-peunter.streifen-crit{--mail-flagge:var(--crit)}
.tm .mail-peintrag.streifen-info,.tm .mail-peunter.streifen-info{--mail-flagge:var(--info)}
.tm .mail-peintrag.streifen-good,.tm .mail-peunter.streifen-good{--mail-flagge:var(--good)}
.tm .mail-peintrag.streifen-plum,.tm .mail-peunter.streifen-plum{--mail-flagge:var(--plum)}
.tm .mail-peintrag.markiert .mail-flagge,
.tm .mail-peunter.markiert .mail-flagge{color:var(--mail-flagge,var(--gold))}
/* Der Streifen selbst steht weiter unten unter Punkt 8 — ohne Rahmen und als
   letzte Regel des Abschnitts, damit ihn keine Flaechen-Regel ueberschreibt. */

/* Die Farbwahl: fuenf Punkte im Untermenue, darunter „Markierung aufheben".
   Sie liegt ueber dem Rechtsklick-Menue (z-index 1200). */
.tm .mail-farbwahl{z-index:1300;min-width:190px}
.tm .mail-fpunkt{width:13px;height:13px;flex:0 0 auto;border-radius:var(--r-pill);
      box-shadow:var(--shadow-1)}
.tm .mail-fpunkt.gold{background:var(--gold)}
.tm .mail-fpunkt.crit{background:var(--crit)}
.tm .mail-fpunkt.info{background:var(--info)}
.tm .mail-fpunkt.good{background:var(--good)}
.tm .mail-fpunkt.plum{background:var(--plum)}
.tm .mail-mehrpf{width:13px;height:13px;margin-left:auto;fill:none;stroke:currentColor;
      stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tm .tm-kontextmenue .mail-farbauf[aria-expanded="true"]{background:var(--surface-sunken)}
.tm .mail-knopfleiste .mail-farbauf[aria-expanded="true"]{background:var(--gold-soft);
      color:var(--gold-on-soft)}

/* ---------- 8. Farbe nur ganz links (Regel Haris, 04.09.2026) ----------
   „Diese Verfaerbung soll nur ganz links sein, auf allen Seiten, bei allen
   Modulen, wo wir links etwas verfaerbt haben." Zwei Ursachen, beide hier
   behoben:
   a) ein Ring um die ganze Zeile — der Tastatur-Fokus (`.tm :focus-visible`,
      3 px Gold mit 2 px Abstand) und die Rechtsklick-Hervorhebung
      (`box-shadow:inset ... var(--gold)`) zeichneten eine zweite Farbkante.
      Auswahl und Rechtsklick sind ab jetzt FLAECHEN, kein Ring; der
      Maus-Fokus zeichnet nichts nach; der Tastatur-Fokus behaelt seinen Ring
      nur auf Zeilen OHNE Streifen und wird auf markierten Zeilen zur Flaeche.
   b) der Streifen selbst war ein einseitiger Rahmen an einer Flaeche mit
      Radius — WebKit zieht dabei rechts eine Haarlinie in der Rahmenfarbe
      (Befund Fable, Abschnitt „Streifen ohne Rahmen"). Deshalb kein
      `border-left` mehr, sondern ein Innenschatten: er folgt dem Radius und
      hat keine Gegenseite. Die Textposition bleibt gleich (der Schatten liegt
      im vorhandenen linken Innenabstand von 10 px). */
.tm .mail-peintrag.rmenue .mail-poeffnen{background:var(--row-hover)}
.tm .mail-peintrag:not(.markiert).rmenue .mail-poeffnen{box-shadow:none}
.tm .mail-peintrag .mail-poeffnen:focus:not(:focus-visible),
.tm .mail-peunter .mail-puoeffnen:focus:not(:focus-visible){outline:none}
.tm .mail-peintrag.markiert > .mail-pezeile > .mail-poeffnen:focus-visible,
.tm .mail-peunter.markiert > .mail-puoeffnen:focus-visible{outline:none;background:var(--row-sel)}
.tm .mail-wqkarte.gewaehlt{box-shadow:var(--shadow-2);background:var(--row-sel)}
/* Der Streifen zuletzt: so uebersteht er jede Flaechen- und Fokusregel. */
.tm .mail-peintrag.markiert > .mail-pezeile > .mail-poeffnen,
.tm .mail-peunter.markiert > .mail-puoeffnen{
      border-left:0;padding-left:10px;box-shadow:inset 5px 0 0 var(--mail-flagge,var(--gold))}

/* ---------- Schmale Flaeche ----------
   Unter 1320 px gibt es nur noch zwei Spalten und keine Klapp-Knoepfe; der
   gespeicherte Klappzustand darf den Lesebereich dort nicht verschlucken. */
@media(max-width:1320px){
  .tm .mail-r[data-seite="postfach"].zu-lese .mail-panelplatz{display:grid}
  .tm .mail-r[data-seite="postfach"].zu-lese .mail-gesprspalte > .mail-nichts{display:block}
  .tm .mail-r[data-seite="postfach"].zu-lese .mail-gesprspalte > .spaltenstreifen{display:none}
}
@media(max-width:700px){
  .tm .mail-peverlauf{padding-left:22px}
}

/* ---------- Streifen ohne Rahmen (Screenshot 7, Haris 04.09.2026) ----------
   Befund: Bei Zeilen und Karten mit Farbstreifen war rechts eine feine
   Farbkante zu sehen — „Diese Verfaerbung soll nur ganz links sein, auf allen
   Seiten, bei allen Modulen." Der Streifen war bisher ein einseitiger Rahmen
   (`border-left:5px solid`) an einer Flaeche mit Radius; WebKit/Safari zieht
   bei einseitigem Rahmen plus Radius auf der Gegenseite eine Haarlinie in der
   Rahmenfarbe (bekanntes Darstellungsproblem). Deshalb ab jetzt kein Rahmen
   mehr: Karten bekommen einen Balken als Pseudo-Element (die Karte schneidet
   ihn mit ihrem Radius zu), Tabellenzellen und Pick-Zeilen einen Innenschatten,
   der dem Radius folgt. Die Geometrie bleibt gleich (5 px Streifen, Text an
   derselben Stelle). Nur Token, kein Farbwert. Die Regeln V3.5.0/V3.5.2 bleiben
   stehen und werden hier uebersteuert. */
/* (gerade ::before-Balken für Karten entfernt 20.10.2026 — Karten tragen den Streifen als Rand, siehe 14.10.2026) */
.tm tr[class*="streifen-"] > td:first-child{border-left:0;padding-left:12px}
.tm tr.streifen-gold > td:first-child{box-shadow:inset 5px 0 0 var(--gold)}
.tm tr.streifen-info > td:first-child{box-shadow:inset 5px 0 0 var(--info)}
.tm tr.streifen-good > td:first-child{box-shadow:inset 5px 0 0 var(--good)}
.tm tr.streifen-crit > td:first-child{box-shadow:inset 5px 0 0 var(--crit)}
.tm tr.streifen-amber> td:first-child,.tm tr.streifen-warn > td:first-child{box-shadow:inset 5px 0 0 var(--amber)}
.tm tr.streifen-plum > td:first-child{box-shadow:inset 5px 0 0 var(--plum)}
.tm tr.streifen-ink  > td:first-child{box-shadow:inset 5px 0 0 var(--ink)}
.tm .picktask.pt-k{border-left:0;box-shadow:inset 5px 0 0 var(--gold);padding-left:22px}
.tm .picktask.pt-s{border-left:0;box-shadow:inset 5px 0 0 var(--info);padding-left:22px}

/* ---------- Schiene: Vorschau beim Ueberfahren (Haris, 04.09.2026: „Ja, bau mal so") ----------
   Eingeklappt klappt die Schiene auf, sobald die Maus etwa eine Viertelsekunde
   darauf steht (layout.php setzt html[data-rail-schau] und nimmt data-rail="zu"
   solange weg). Sie legt sich dabei UEBER den Inhalt — das Raster bleibt bei
   74 px, nichts springt. Verlaesst die Maus die Schiene, faellt sie zurueck.
   Wer sie mit dem Knopf aufklappt, hat sie wie bisher fest offen. */
html[data-rail-schau]{--rail-w:74px}
/* Die Schiene bleibt im Raster (sonst rutscht der Inhalt in die 74-px-Spalte) und
   ragt mit 250 px ueber ihre Spalte hinaus — ueber den Inhalt, nicht daneben. */
/* --rail-bg ist durchsichtig (die Schiene liegt sonst auf der Seite); als Ueberlagerung
   braucht sie einen deckenden Grund — derselbe wie das Kopfband (Seitenfarbe + Lichtschleier). */
html[data-rail-schau] .tm-rail{width:250px;z-index:70;box-shadow:var(--shadow-3);
  background-color:var(--page);background-image:var(--page-glow);background-attachment:fixed}
html[data-rail-schau] .tm-main>.tm-head:first-child{padding-left:196px}
@media(max-width:900px){html[data-rail-schau] .tm-rail{width:auto;box-shadow:none}}

/* ============================================================================
   V3.7.3 (Fortsetzung) — DRUCKANSICHT PICKLISTE (Entscheidung Haris, 04.09.2026)
   „Pickliste als PDF: Weg 1 = Druckansicht." Kein PDF-Baustein, keine fremde
   Bibliothek — die Seite `auftrag/pickliste` sieht am Bildschirm aus wie jede
   ERP-Seite und wird ueber den Druckdialog des Browsers zu Papier oder PDF.

   Farben im Druck (Nachlauf 3, 04.09.2026, Haris: „Mach die Pickliste farbig
   und ueberlasse es dem Drucker, ob man sie schwarz, weiss oder farbig drucken
   moechte."): Die Druckfassung ist FARBIG und holt ihre Farben wie am
   Bildschirm aus den Tokens — Karton gold, Stueck blau, jedes Band mit seinem
   Streifen. Der Grund bleibt weiss, keine Verlaeufe, keine Schatten, keine
   dunklen Flaechen. Ob am Ende schwarz-weiss herauskommt, entscheidet der
   Druckdialog, nicht die Seite (Regel „Druckansichten farbig").
   Dass Hell- und Dunkelmodus byteidentisch drucken, regelt tokens.css: der
   Dunkelmodus gilt nur `@media screen`, auf Papier stehen immer die Werte des
   Hellmodus. Hier steht deshalb KEIN CanvasText/GrayText mehr und kein
   Grauwert — die frueheren Schwarz-Weiss-Regeln (.dkopf, .dtab, .kg .p auf
   Papierweiss, Piktogramme schwarz) sind zurueckgenommen.
   Damit der Drucker die Flaechen ueberhaupt setzt, tragen die Elemente der
   Druckansicht `print-color-adjust:exact` — sonst laesst der Browser jede
   Hintergrundfarbe weg, und Gold und Blau waeren wieder verschwunden.
   Runde Ecken bleiben auch im Druck stehen (Regel „Runde Ecken ueberall" —
   kein `border-radius:0` irgendwo im System).
   ========================================================================== */

/* ---------- Am Bildschirm ---------- */
.tm .druck .dblatt{margin-bottom:22px}
/* Jedes Band traegt links seinen Streifen in der Einheitenfarbe — Gold fuer
   volle Kartons, Blau fuer lose Stueck, dieselbe Zuordnung wie die Pick-Zeilen
   (.pt-k / .pt-s) und die Piktogramme. Als Flaeche (::before) mit Radius, nicht
   als `border-left` (Regel „Farbstreifen", Technik seit V3.7.1). Am Bildschirm
   und auf Papier gleich. */
.tm .druck .dband{position:relative;margin-bottom:14px;padding-left:15px}
.tm .druck .dband::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:5px;
  border-radius:var(--r-pill);background:var(--line-2)}
.tm .druck .dband.db-k::before{background:var(--gold)}
.tm .druck .dband.db-s::before{background:var(--info)}
.tm .druck .dband.db-k .dth{color:var(--gold-on-soft)}
.tm .druck .dband.db-s .dth{color:var(--info-on-soft)}
.tm .druck .dkopf{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;
  padding:14px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.tm .druck .dkopf h2{margin:0;font-size:19px;letter-spacing:-.02em}
.tm .druck .dmeta{display:flex;gap:6px 18px;flex-wrap:wrap;color:var(--ink-2);font-size:13.5px;margin-top:6px}
.tm .druck .dsign{display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  color:var(--muted);font-size:13px;white-space:nowrap}
.tm .druck .dlinie{display:inline-block;min-width:150px;height:15px;border-bottom:1px solid var(--line-2)}
.tm .druck .dth{display:flex;align-items:center;gap:10px;margin:16px 0 6px;font-size:12px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tm .druck .dtab{width:100%;border-collapse:collapse;font-size:13.5px;
  background:var(--surface);border-radius:var(--r-lg);overflow:hidden}
.tm .druck .dtab th{text-align:left;padding:9px 10px;font-size:12px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.tm .druck .dtab td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tm .druck .dtab tbody tr:last-child td{border-bottom:none}
/* Der Fussraum der Tabelle ist nur fuers Papier da (siehe @media print). */
.tm .druck .dtab tfoot{display:none}
/* Bezeichnung ist die breiteste Spalte: sie nimmt, was die uebrigen (alle mit
   fester Breite ihres Inhalts) uebrig lassen. */
.tm .druck .dtab th,.tm .druck .dtab td{white-space:nowrap}
.tm .druck .dtab .dname{width:100%;white-space:normal}
.tm .druck .dtab td.dnr{font-weight:800}
.tm .druck .dtab td.dmenge{font-weight:800}
.tm .druck .dbox{display:inline-block;width:16px;height:16px;border:2px solid var(--line-2);border-radius:var(--r-md)}
.tm .druck .dfuss{display:flex;justify-content:space-between;gap:12px;padding:10px 4px;
  color:var(--muted);font-size:12.5px}

/* ---------- Auf Papier ----------
   Nachlauf 04.09.2026 (2), Haris nach dem Druck-PDF: „sieht nicht gut aus",
   „Abweichung / Bemerkung brauchen wir auf der Pickliste nicht".
   Geaendert: der Kopf ist keine Karte mehr (die runde Kante zeichnete im Druck
   abgeschnittene Boegen — die kraeftige Linie darunter kommt jetzt als eigene
   Flaeche, nicht als Rahmen der Karte); die Tabelle hat nur noch waagerechte
   Linien; die Bezeichnung ist die breiteste Spalte; Artikelnummer und die
   Holmenge stehen gross und fett, die uebrigen Zahlen ruhig und rechtsbuendig;
   das Kaestchen ist ein Quadrat mit leicht gerundeten Ecken.
   Nachlauf 04.09.2026 (3): dasselbe, aber FARBIG — alle Farben kommen aus den
   Tokens (Hellmodus, siehe Kopf dieses Abschnitts). Ruhig gehalten: Grund
   weiss, der Tabellenkopf auf einer hellen Flaeche (--surface-3), die Baender
   mit ihrem Streifen links, die Piktogramme in Gold und Blau — keine bunten
   Vollflaechen.
   Die Kopf-/Fusszeilen des Browsers (Adresse, „Seite 1 von 2") kann eine Seite
   nicht abschalten — sie werden im Druckdialog abgewaehlt (README des Moduls).
   -------------------------------------------------------------------------- */
@media print{
  :root{color-scheme:light}
  @page{margin:14mm 12mm}
  /* Ein zweites `@page` weiter unten in dieser Datei (Abschnitt MAIL) setzt
     18mm 16mm. `@page` kennt keine Skopierung: die spaetere Regel gewinnt fuer
     JEDE gedruckte Seite, auch fuer diese hier. Damit die Pickliste ihre
     eigenen Raender behaelt, bekommt sie eine BENANNTE Seite; nur ein Dokument,
     das eine Druckansicht enthaelt, traegt den Namen (`:has`), und er steht am
     aeussersten Block, damit kein Seitenwechsel davor entsteht. */
  /* `size: A4` (04.09.2026): ohne Angabe nimmt Chrome das Papier des Systems —
     auf einem Rechner mit US-Vorgabe war das Letter (216 x 279 mm), die Zeilen
     der Pickliste standen dann schmaler und die letzte Zeile fiel auf ein
     zweites Blatt. Deutsches Papier gehoert in die Seite, nicht in den
     Druckdialog. Nur diese benannte Seite bekommt es — die Druckansicht der
     Mail (Abschnitt MAIL, `@page` weiter unten) bleibt unveraendert. */
  @page pickliste{size:A4;margin:14mm 12mm}
  .tm-app:has(.druck){page:pickliste}
  .tm-rail,.tm-main>.tm-head:first-child,.tm .nodruck{display:none!important}
  .tm-app{display:block}
  .tm-main{padding:0}
  /* Grund weiss, keine Schatten — und `print-color-adjust:exact`, sonst laesst
     der Browser jede Flaechenfarbe weg und Gold, Blau und der helle
     Tabellenkopf waeren wieder verschwunden. */
  .tm .druck,.tm .druck *{color:var(--ink);background:transparent;box-shadow:none;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* Der Stern oben ist schwaecher als jede Regel mit drei Klassen — die beiden
     grossen Flaechen werden deshalb einzeln auf Papierweiss gestellt. */
  .tm .druck .dkopf,.tm .druck .dtab{background:transparent}
  .tm .druck .dblatt{break-before:page;margin:0 0 6mm}
  .tm .druck .dblatt:first-of-type{break-before:auto}
  /* Kopf: kein Rahmen, keine Karte — die kraeftige Linie ist eine eigene
     Flaeche am unteren Rand und traegt darum keine runde Ecke. */
  .tm .druck .dkopf{position:relative;border:0;padding:0 0 3.5mm;margin:0;gap:8mm}
  .tm .druck .dkopf::after{content:"";position:absolute;left:0;right:0;bottom:0;
    height:.6mm;background:var(--ink)}
  .tm .druck .dkopf h2{font-size:15pt}
  .tm .druck .dmeta{font-size:10.5pt;gap:1.5mm 7mm;margin-top:1.5mm}
  .tm .druck .dsign{font-size:10.5pt;gap:4mm}
  .tm .druck .dlinie{min-width:48mm;height:5mm;border-bottom:.3mm solid var(--ink)}
  /* Zwischenueberschrift je Band, mit dem Piktogramm in seiner Farbe und dem
     Streifen links (Farbe und Groesse kommen aus dem Bildschirmteil oben, hier
     nur die Papiermasse).
     Das Band selbst bekommt KEIN `break-inside:avoid`: nachgemessen an einem
     Auftrag mit 34 Kartonzeilen schiebt das den ganzen Block auf die naechste
     Seite und laesst die erste bis auf den Kopf leer — genau der Leerraum, den
     Haris beanstandet hat. Zusammengehalten wird stattdessen, was auch
     zusammengehoert: die Ueberschrift bleibt bei ihrer Tabelle
     (`break-after:avoid`), keine Zeile wird zerschnitten (`tr`), und der
     Tabellenkopf wiederholt sich auf jeder Folgeseite. */
  .tm .druck .dband{break-inside:auto;padding-left:4mm;margin-bottom:2mm}
  .tm .druck .dband::before{width:1.2mm;top:0;bottom:0}
  /* Auch schwarz-weiss unterscheidbar (Haris, 04.09.2026, Nachlauf 4): „Mach
     den blauen Strich gestrichelt, damit man beim Schwarz-Weiss-Druck trotzdem
     die beiden unterscheiden kann." Farbig bleibt es Gold gegen Blau; wer das
     Blatt schwarz-weiss druckt, erkennt die Baender am STRICHMUSTER — volle
     Kartons durchgezogen, lose Stueck gestrichelt.
     Gestrichelt wird die FLAECHE des Streifens (repeating-linear-gradient),
     nicht ein `border-left-style:dashed`: der Streifen ist ein ::before mit
     Radius, ein einseitiger Rahmen ist hier ausdruecklich nicht erlaubt (Regel
     „Farbstreifen", Technik seit V3.7.1 — Safari zieht sonst eine Haarlinie).
     Die Farbe kommt aus demselben Token wie am Bildschirm, die Luecken bleiben
     durchsichtig (also Papierweiss). Nur auf Papier — am Bildschirm bleiben
     beide Streifen durchgezogen. */
  .tm .druck .dband.db-s::before{
    background:repeating-linear-gradient(var(--info) 0 2.2mm,transparent 2.2mm 3.6mm)}
  .tm .druck .dth{font-size:11pt;margin:5mm 0 1.5mm;gap:2.5mm;break-after:avoid}
  /* Karton gold, Stueck blau — genau wie am Bildschirm. */
  .tm .druck .kg .k{background:var(--gold)}
  .tm .druck .kg .p{background:var(--info-soft)}
  /* Tabelle: heller Kopf, kraeftige Linie darunter, feine zwischen den Zeilen,
     keine senkrechten Linien. Die Kopfzeile ist eine Flaeche mit eigener Farbe
     und rundet darum ihre erste und letzte Zelle (Regel „Runde Ecken"). */
  .tm .druck .dtab{font-size:10.5pt;overflow:visible}
  .tm .druck .dtab th,.tm .druck .dtab td{border:0;padding:1.6mm 2mm}
  .tm .druck .dtab th{font-size:8.5pt;background:var(--surface-3);
    border-bottom:.6mm solid var(--ink)}
  .tm .druck .dtab thead th:first-child{border-radius:var(--r-md) 0 0 var(--r-md)}
  .tm .druck .dtab thead th:last-child{border-radius:0 var(--r-md) var(--r-md) 0}
  .tm .druck .dtab td{border-bottom:.2mm solid var(--line-2)}
  .tm .druck .dtab td.dnr{font-size:14pt}
  .tm .druck .dtab td.dname{font-size:12pt}
  .tm .druck .dtab td.dmenge{font-size:16pt}
  .tm .druck .dtab thead{display:table-header-group}
  .tm .druck .dtab tr{break-inside:avoid}
  .tm .druck .dbox{width:6mm;height:6mm;border:.4mm solid var(--ink);border-radius:1mm}
  /* Fusszeile auf jeder Seite: Druckdatum und Drucker. Sie steht fest am
     unteren Rand der Seitenflaeche. Weil eine feste Flaeche im Druck keinen
     Platz im Textfluss belegt, haelt jede Tabelle ihn selbst frei: die leere
     `tfoot`-Zeile wiederholt sich auf jeder Seite, ueber die die Tabelle
     laeuft (nachgemessen an 34 Zeilen — ohne sie lag die Fusszeile auf der
     letzten Zeile der Seite). */
  .tm .druck .dtab tfoot{display:table-footer-group}
  .tm .druck .dtab tfoot td{height:10mm;border:0;padding:0}
  .tm .druck .dfuss{position:fixed;left:0;right:0;bottom:0;font-size:9pt;
    background:var(--surface);border-top:.2mm solid var(--line-2);padding:1.5mm 0 0}
}

/* ============================================================================
   V3.7.4 — EIN KOPFBAND-SCHATTEN, SCHIENE KLAPPT WEICH AUF
   (Haris, 04.09.2026, Screenshot — Kern-Nachlauf 2)

   Zwei Befunde am Bildschirm:

   1. „Die beiden Schatten sehen unterschiedlich aus." Scrollt das MENUE der
      Schiene, erscheint unter dem Logoblock ein Schatten; scrollt der INHALT,
      erscheint einer unter der Kopfzeile. Beide holten zwar denselben Wert
      (--kopf-schatten), waren aber verschieden GEBAUT: rechts traegt ein
      Streifen (::before) Grund und Schatten, der weiche Auslauf (::after)
      liegt DAHINTER (z-index -2) — der Schatten faellt also auf ihn. Links lag
      der Auslauf als Kind UEBER dem Schatten des Elements und verdeckte dessen
      Haarlinie und die ersten 18 px des Abfalls: derselbe Wert, andere Optik
      (schwaecher, tiefer ansetzend, ohne Linie). Dazu blendete der Auslauf
      links beim Scrollen ein, rechts stand er immer.
      Jetzt bauen beide Haelften gleich: ::before = Grund + Schatten,
      ::after = Auslauf dahinter, beide erst im gescrollten Zustand, beide aus
      --band-schatten und --band-auslauf. Ausgeloest wird es links wie rechts
      von derselben Funktion in layout.php (der Bereich steht nicht ganz oben).
      Die HOEHE des Bandes aendert sich dabei nicht (--kopf-raum, 84 px).

   2. „Die Vorschau klappt schlagartig auf." Eingeklappt legt sich die Schiene
      nach 250 ms Mauskontakt als Ueberlagerung ueber den Inhalt (V3.7.1) —
      bisher in einem Sprung. Jetzt laeuft die BREITE mit einer Ausklang-Kurve
      (--t-rail, 220 ms), die Beschriftungen blenden leicht verzoegert ein
      (--t-rail-text, 120 ms) und beim Schliessen zuerst wieder aus. Das RASTER
      bleibt die ganze Zeit bei 74 px (--rail-w) — der Inhalt ruckt nicht; nur
      die sichtbare Breite (--rail-breite) laeuft. Die Wartezeiten 250/300 ms
      sind unveraendert. Der feste Klapp-Vorgang mit dem Knopf laeuft ebenfalls
      weich, aber erst NACH dem ersten Zeichnen: layout.php setzt dazu im
      zweiten Frame html.tm-bewegt. Ohne diese Klasse gibt es keinen Uebergang,
      also auch keinen beim Laden (Regel 17 — die Seite springt nicht).

   Wie ueberall: nur Token, kein Farbwert.
   ========================================================================== */

/* ---------- 1. Der eine Schatten unter dem Kopfband ---------- */
/* Links: Grund und Schatten wandern vom Element auf ::before, der Auslauf auf
   ::after dahinter — dieselbe Bauweise wie rechts. */
.tm-rail-logo{background-color:transparent;background-image:none;clip-path:none}
.tm-rail-logo,.tm-rail-logo.gescrollt{box-shadow:none}
.tm-rail-logo::before,.tm-rail-logo::after{content:"";position:absolute;left:0;right:0;pointer-events:none;
  background-color:var(--page);background-image:var(--page-glow);background-attachment:fixed}
/* Seitlich beschnitten (V3.7.1): nur der untere Schatten bleibt, sonst zeichnet
   die Unschaerfe rechts neben dem Logo eine Naht zur Kopfzeile. */
.tm-rail-logo::before{z-index:-1;top:0;bottom:0;clip-path:inset(0 0 -60px 0);
  transition:box-shadow var(--t)}
.tm-rail-logo.gescrollt::before{box-shadow:var(--band-schatten)}
.tm-rail-logo::after{z-index:-2;top:100%;height:var(--band-auslauf);opacity:0;
  transition:opacity var(--t);
  -webkit-mask-image:linear-gradient(to bottom,var(--ink),transparent);
          mask-image:linear-gradient(to bottom,var(--ink),transparent)}
.tm-rail-logo.gescrollt::after{opacity:1}

/* Rechts: gleicher Schatten aus demselben Token, gleiche Auslauf-Hoehe, und der
   Auslauf erscheint jetzt ebenfalls erst im gescrollten Zustand. Im Ruhezustand
   malte er ohnehin nur Seitengrund auf Seitengrund — sichtbar wird der
   Unterschied erst, wenn Inhalt darunter durchlaeuft. */
.tm-main>.tm-head:first-child.gescrollt::before{box-shadow:var(--band-schatten)}
.tm-main>.tm-head:first-child::after{height:var(--band-auslauf);opacity:0;transition:opacity var(--t)}
.tm-main>.tm-head:first-child.gescrollt::after{opacity:1}

@media print{.tm-rail-logo::before,.tm-rail-logo::after{display:none}}

/* ---------- 2. Weiches Auf- und Zuklappen ---------- */
/* Rasterbreite (--rail-w, Spalte in .tm-app) und sichtbare Breite
   (--rail-breite, die Schiene selbst) sind ab hier zwei Dinge. Nur so kann die
   Vorschau ueber dem Inhalt liegen, ohne ihn zu verschieben. */
html[data-rail="zu"]{--rail-breite:var(--rail-zu)}
html[data-rail-schau="auf"]{--rail-breite:var(--rail-offen)}
html[data-rail-schau="aus"]{--rail-breite:var(--rail-zu)}
.tm-rail{width:var(--rail-breite)}
html[data-rail-schau] .tm-rail{width:var(--rail-breite)}   /* schlaegt die feste 250 px aus V3.7.1 */

/* Das Kopfband steht still: der Logoblock ist immer 250 px breit — aufgeklappt
   fuellt er die Schiene, eingeklappt und waehrend der Vorschau ragt er wie
   gewohnt in die Kopfzeile. Ohne diese Zeile schrumpfte er beim Klappen mit.
   ÜBERHOLT seit V3.7.12 (Haris, 04.09.2026: „Der Schatten oben beim Logo ist
   auf der gesamten Breite"): der Logoblock ist jetzt so breit wie die Schiene
   und laeuft mit ihr; die naechste Zeile wird im Abschnitt am Dateiende durch
   `width:100%` ersetzt. Sie bleibt als Beleg der Historie stehen. */
.tm-rail-logo,html[data-rail="zu"] .tm-rail-logo,html[data-rail-schau] .tm-rail-logo{width:var(--rail-offen)}

/* Uebergaenge erst NACH dem ersten Zeichnen (html.tm-bewegt, layout.php).
   Der eingeklappte Zustand steht schon vor dem ersten Zeichnen fest
   (tm_design.php) — er darf nicht animiert werden, sonst springt das Laden. */
html.tm-bewegt .tm-app{transition:grid-template-columns var(--t-rail)}
html.tm-bewegt .tm-rail{transition:width var(--t-rail),box-shadow var(--t-rail)}

/* Ueberlagerung waehrend der Vorschau: deckender Grund wie das Kopfband, und
   der Schlagschatten faellt beim Schliessen schon waehrend des Zusammenlaufens
   weg — sonst bliebe er bis zum letzten Moment stehen und verschwaende hart. */
html[data-rail-schau="auf"] .tm-rail{box-shadow:var(--shadow-3)}
html[data-rail-schau="aus"] .tm-rail{box-shadow:none}

/* Waehrend die Breite laeuft, ragen die Beschriftungen ueber den Rand: nicht
   quer scrollen (sonst blitzt eine Laufleiste auf) und nicht umbrechen (sonst
   huepfen die Zeilen in der Hoehe). */
html[data-rail-schau] .tm-rail-menue{overflow-x:hidden}
html[data-rail-schau] .tm-rail-item .t,html[data-rail-schau] .tm-rail-klapp .t,
html[data-rail-schau] .tm-rail-group,html[data-rail-schau] .tm-rail-subitem{white-space:nowrap}

/* Beschriftungen, Gruppen, Untermenues und Pfeile blenden ein, wenn die Breite
   schon fast steht (90 ms Verzug), und beim Schliessen als Erstes wieder aus.
   Einblenden als Animation, nicht als Uebergang: die Elemente kommen aus
   display:none, ein Uebergang haette dort keinen Startwert. */
@keyframes tm-rail-ein{from{opacity:0}to{opacity:1}}
html.tm-bewegt[data-rail-schau="auf"] .tm-rail-item .t,
html.tm-bewegt[data-rail-schau="auf"] .tm-rail-klapp .t,
html.tm-bewegt[data-rail-schau="auf"] .tm-rail-group,
html.tm-bewegt[data-rail-schau="auf"] .tm-rail-sub,
html.tm-bewegt[data-rail-schau="auf"] .tm-rail.js .tm-rail-auf{
  animation:tm-rail-ein var(--t-rail-text) backwards;animation-delay:90ms}
html[data-rail-schau="aus"] .tm-rail-item .t,
html[data-rail-schau="aus"] .tm-rail-klapp .t,
html[data-rail-schau="aus"] .tm-rail-group,
html[data-rail-schau="aus"] .tm-rail-sub,
html[data-rail-schau="aus"] .tm-rail.js .tm-rail-auf{
  opacity:0;transition:opacity var(--t-rail-text)}

/* ---------- 3. Der Knopf sagt, was ein Klick tut (Haris, 04.09.2026, Screen 2) ----------
   Drei Staende, ein Knopf — die Beschriftung wechselt ohne Skript:
     fest aufgeklappt          „Einklappen" (span.t-zu)   + Pfeil
     Vorschau (data-rail-schau) „Fixieren"  (span.t-fix)  + Pin  (Klick klappt fest auf)
     eingeklappt ohne Vorschau  nur das Symbol (Pfeil, gedreht), Name als title
   Beide Beschriftungen und beide Symbole stehen im Knopf (layout.php); hier
   entscheidet sich nur, welche sichtbar ist. Breite und Hoehe des Knopfes
   aendern sich dabei nicht: die Symbole liegen uebereinander in derselben
   32-px-Flaeche, die Beschriftungen an derselben Stelle in derselben Zeile. */
.tm-rail-klapp .t-fix{display:none}
.tm-rail-klapp .ic svg{grid-area:1/1}          /* beide Symbole in dieselbe Zelle */
.tm-rail-klapp .sym-pin{opacity:0}
html[data-rail-schau] .tm-rail-klapp .t-zu{display:none}
html[data-rail-schau] .tm-rail-klapp .t-fix{display:block}
html[data-rail-schau="auf"] .tm-rail-klapp .sym-pfeil{opacity:0}
html[data-rail-schau="auf"] .tm-rail-klapp .sym-pin{opacity:1}
/* Waehrend der Vorschau zeigt der Pfeil schon nach aussen: sichtbar wird er
   erst beim Zuklappen ("aus"), und dann geht es zurueck in den eingeklappten
   Stand — er soll dabei nicht am Ende noch einmal umspringen. */
html[data-rail-schau] .tm-rail-klapp .sym-pfeil{transform:rotate(180deg)}
/* Blende erst nach dem ersten Zeichnen (wie alles hier, Regel 17). */
html.tm-bewegt .tm-rail-klapp .ic svg{transition:transform var(--t-fast),opacity var(--t-rail-text)}

/* Unter 900 px bleibt alles wie bisher (V3.7.1) — die Regeln stehen hier
   erneut, weil sie sonst von den Zeilen darueber geschlagen wuerden. */
@media(max-width:900px){
  html[data-rail="zu"],html[data-rail-schau]{--rail-w:var(--rail-offen);--rail-breite:var(--rail-offen)}
  html[data-rail-schau] .tm-rail{width:auto;box-shadow:none}
}

/* Bewegungsarm: keine Uebergaenge, kein Ein- und Ausblenden — der Zustand
   wechselt sofort. Die allgemeine Regel im Abschnitt RESPONSIV & BEWEGUNGSARM
   kuerzt bereits jede Dauer auf .001 ms; hier steht es noch einmal ausdruecklich
   fuer die Schiene, damit es beim naechsten Umbau nicht verloren geht. */
@media(prefers-reduced-motion:reduce){
  html.tm-bewegt .tm-app,html.tm-bewegt .tm-rail{transition:none}
  html.tm-bewegt[data-rail-schau="auf"] .tm-rail-item .t,
  html.tm-bewegt[data-rail-schau="auf"] .tm-rail-klapp .t,
  html.tm-bewegt[data-rail-schau="auf"] .tm-rail-group,
  html.tm-bewegt[data-rail-schau="auf"] .tm-rail-sub,
  html.tm-bewegt[data-rail-schau="auf"] .tm-rail.js .tm-rail-auf{animation:none}
  html[data-rail-schau="aus"] .tm-rail-item .t,
  html[data-rail-schau="aus"] .tm-rail-klapp .t,
  html[data-rail-schau="aus"] .tm-rail-group,
  html[data-rail-schau="aus"] .tm-rail-sub,
  html[data-rail-schau="aus"] .tm-rail.js .tm-rail-auf{transition:none}
  .tm-rail-logo::before,.tm-rail-logo::after,
  .tm-main>.tm-head:first-child::before,.tm-main>.tm-head:first-child::after{transition:none}
  html.tm-bewegt .tm-rail-klapp .ic svg{transition:none}   /* Pfeil <-> Pin ohne Blende */
}

/* ============================================================================
   V3.7.6 — MAIL (BP-07 M2): VERFASSEN, AUSGANG, DRUCKEN (Bau 04.09.2026)
   Bauabschnitt 1 der Finalisierung (§24.1). Neue Bausteine:
     .mail-verfassen      der Antwort-/Schreibbereich unter dem Kopf der Mail
     .mail-adr / -chip    Empfaengerfelder mit Chips und Vorschlaegen (R6)
     .mail-editor         das formatierte Textfeld samt Werkzeugleiste (R7)
     .mail-ablegen        Anhaenge per Ziehen (R13)
     .mail-auswahl        die Leiste bei Mehrfachauswahl (R18)
     .mail-agtab          der Ausgang (§6)
     .tm-fenster          Layout-Modus ohne Schiene (Popup, §2)
     @media print         die Druckansicht (R28)
   Wie ueberall: nur Token aus tokens.css, kein Farbwert, kein Pixel-Radius.
   Der Streifen bleibt die EINZIGE Farbkante (Regel 18 Nachtrag): Auswahl und
   Hover sind Flaechen (--row-sel/--row-hover), nie ein Ring.
   ========================================================================== */

/* ---------- Der Platz des Verfassen-Bereichs ---------- */
.tm .mail-verfassenplatz:empty{display:none}
.tm .mail-verfassen{display:grid;gap:12px;padding:14px 20px 18px;
      background:var(--surface-2);border-radius:var(--r-lg);margin:0 16px 14px}
.tm .mail-verfassenplatz[data-oben="1"]{order:-1}

/* ---------- Baender ueber dem Editor (§6) ---------- */
.tm .mail-band{padding:9px 13px;border-radius:var(--r-md);font:700 12.5px var(--font)}
.tm .mail-band-hinweis{background:var(--info-soft);color:var(--info-on-soft)}
.tm .mail-band-warn{background:var(--gold-soft);color:var(--gold-on-soft)}
.tm .mail-band-sperre{background:var(--crit-soft);color:var(--crit-on-soft)}
.tm .mail-band-sperre b{margin-right:6px}

/* ---------- Von / An / CC / BCC / Betreff ---------- */
.tm .mail-vfelder{display:grid;gap:6px}
.tm .mail-adr{display:flex;align-items:flex-start;gap:10px;position:relative;
      padding:6px 10px;border-radius:var(--r-md);background:var(--surface);
      border:1px solid var(--line)}
.tm .mail-adr:focus-within{border-color:var(--gold)}
.tm .mail-adr-lbl{flex:0 0 54px;padding-top:5px;font:800 10px var(--font);letter-spacing:.12em;
      text-transform:uppercase;color:var(--muted)}
/* R29 sinngemaess auch hier: das Feld traegt in der Zeile keinen eigenen
   Rahmen, keinen Grund und keinen Radius — die Zeile ist die Flaeche. */
.tm .mail-adr-feld{display:flex;flex-wrap:wrap;gap:5px;align-items:center;flex:1 1 auto;min-width:0}
/* `border-radius:inherit` heisst: das Feld setzt KEINEN eigenen Radius, es
   nimmt den der Zeile. Damit bleibt „runde Ecken ueberall" wahr (ein Wert 0
   stuende in components.css nicht) und die Zeile ist die eine Flaeche (R29). */
.tm .mail-adr-ein{flex:1 1 120px;min-width:80px;border:none;background:none;outline:none;
      border-radius:inherit;box-shadow:none;font:600 13px var(--font);color:var(--ink);padding:4px 2px}
.tm .mail-adr select,.tm .mail-adr .mail-betreff{flex:1 1 auto;min-width:0;border:none;background:none;
      outline:none;border-radius:inherit;box-shadow:none;height:auto;
      font:600 13px var(--font);color:var(--ink);padding:4px 2px}
.tm .mail-adr input:focus,.tm .mail-adr select:focus{box-shadow:none}
.tm .mail-adr-chip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-sunken);
      border-radius:var(--r-pill);padding:3px 4px 3px 10px;font:700 12px var(--font);color:var(--ink)}
.tm .mail-adr-chip .t{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm .mail-adr-chip .x{border:none;background:none;cursor:pointer;color:var(--muted);
      font-size:15px;line-height:1;padding:2px 5px;border-radius:var(--r-pill)}
.tm .mail-adr-chip .x:hover{background:var(--row-hover);color:var(--crit)}
.tm .mail-cc-auf{border:none;background:none;cursor:pointer;color:var(--muted);
      font:800 10.5px var(--font);letter-spacing:.1em;text-transform:uppercase;
      padding:5px 8px;border-radius:var(--r-md);flex:0 0 auto}
.tm .mail-cc-auf:hover{background:var(--row-hover);color:var(--ink)}
.tm .mail-ccbcc{display:grid;gap:6px}
.tm .mail-adr-vorschlag{position:absolute;top:calc(100% + 4px);left:54px;right:0;z-index:60;
      background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-3);
      padding:6px;display:grid;gap:1px;max-height:250px;overflow:auto;overscroll-behavior:contain}
.tm .mail-adr-vorschlag button{display:grid;gap:1px;text-align:left;border:none;background:none;
      cursor:pointer;padding:7px 10px;border-radius:var(--r-md)}
.tm .mail-adr-vorschlag button b{font:800 12.5px var(--font);color:var(--ink)}
.tm .mail-adr-vorschlag button small{font:600 11px var(--font);color:var(--muted)}
.tm .mail-adr-vorschlag button:hover,
.tm .mail-adr-vorschlag button.aktiv{background:var(--row-hover)}

/* ---------- Werkzeugleiste und Editor (R7) ---------- */
.tm .mail-ed-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tm .mail-ed-leiste{display:flex;align-items:center;gap:2px;padding:3px;
      background:var(--surface);border-radius:var(--r-md);border:1px solid var(--line)}
.tm .mail-ed-knopf{border:none;background:none;cursor:pointer;color:var(--ink-2);
      padding:6px 7px;border-radius:var(--r-md);display:inline-flex;align-items:center}
.tm .mail-ed-knopf:hover{background:var(--row-hover);color:var(--ink)}
.tm .mail-ed-trenn{width:1px;height:18px;background:var(--line);margin:0 3px}
.tm .mail-sigwahl{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.tm .mail-sigwahl select{border:none;background:none;outline:none;border-radius:inherit;
      box-shadow:none;height:auto;font:700 12.5px var(--font);color:var(--ink)}
.tm .mail-editor{min-height:180px;max-height:52vh;overflow:auto;overscroll-behavior:contain;
      background:var(--surface);border-radius:var(--r-lg);border:1px solid var(--line);
      padding:14px 16px;font:400 14px/1.6 var(--font);color:var(--ink);outline:none}
.tm .mail-editor:focus{border-color:var(--gold)}
.tm .mail-editor p{margin:0 0 10px}
.tm .mail-editor ul,.tm .mail-editor ol{margin:0 0 10px;padding-left:22px}
.tm .mail-editor blockquote{margin:10px 0;padding:2px 0 2px 12px;color:var(--ink-2);
      box-shadow:inset 3px 0 0 var(--line)}
.tm .mail-editor a{color:var(--gold-text)}
.tm .mail-editor .tm2-signatur{margin-top:16px;padding-top:10px;color:var(--ink-2);
      border-top:1px solid var(--line)}
.tm .mail-sigeditor{min-height:120px}

/* ---------- Anhaenge beim Schreiben (R13) ---------- */
.tm .mail-anhzeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tm .mail-anhliste{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.tm .mail-anhliste.laedt{opacity:.55}
.tm .mail-anh-neu{display:inline-flex;align-items:center;gap:6px;max-width:280px}
.tm .mail-anh-neu svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;
      stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.tm .mail-anh-neu .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm .mail-anh-neu .g{color:var(--muted);font-weight:700;flex:0 0 auto}
.tm .mail-anh-neu .x{border:none;background:none;cursor:pointer;color:var(--muted);
      font-size:14px;line-height:1;padding:1px 4px;border-radius:var(--r-pill);flex:0 0 auto}
.tm .mail-anh-neu .x:hover{background:var(--row-hover);color:var(--crit)}
.tm .mail-ablegen{position:fixed;inset:0;z-index:900;display:flex;align-items:center;
      justify-content:center;background:color-mix(in srgb, var(--ink) 40%, transparent);
      pointer-events:none}
.tm .mail-ablegen span{background:var(--surface);border-radius:var(--r-xl);padding:22px 34px;
      font:800 15px var(--font);color:var(--ink);box-shadow:var(--shadow-3)}

/* ---------- Fuss des Verfassen-Bereichs ---------- */
.tm .mail-vfuss{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tm .mail-vstand{margin-left:auto;font:700 11.5px var(--font);color:var(--muted)}

/* ---------- Entwuerfe-Sicht: die ERP-Fassung (R12 d) ---------- */
.tm .mail-peentwurf .anz{background:var(--surface-sunken);color:var(--ink-2)}

/* ---------- Auswahlleiste bei Mehrfachauswahl (R18) ---------- */
.tm .mail-auswahl{display:flex;align-items:center;gap:12px;margin:10px 16px 0;
      padding:8px 12px;border-radius:var(--r-md);background:var(--gold-soft);
      color:var(--gold-on-soft);font:700 12.5px var(--font)}
.tm .mail-auswahl-weg{border:none;background:none;cursor:pointer;color:inherit;
      font:800 11px var(--font);letter-spacing:.08em;text-transform:uppercase;
      margin-left:auto;padding:4px 8px;border-radius:var(--r-md)}
.tm .mail-auswahl-weg:hover{background:var(--row-hover)}
/* Gewaehlte Zeilen tragen eine FLAECHE, keinen Ring (Regel 18 Nachtrag). */
.tm .mail-peintrag.gewaehlt-mehr>.mail-pezeile,
.tm .mail-peunter.gewaehlt-mehr{background:var(--row-sel)}
/* Bei Mehrfachauswahl steht im Lesebereich „3 Mails gewaehlt" statt einer
   Mail (§6) — die Knopfleiste bleibt stehen, weil sie auf alle wirkt (R18). */
.tm .mail-r.mehrfach .mail-panel .mail-kontext,
.tm .mail-r.mehrfach .mail-panel .mail-thead h2,
.tm .mail-r.mehrfach .mail-panel .mail-postkopf,
.tm .mail-r.mehrfach .mail-panel .mail-verfassenplatz,
.tm .mail-r.mehrfach .mail-panel .mail-thread{display:none}

/* ---------- Gruppentitel im Rechtsklick-Menue der Warteschlange (R19) ---- */
.tm .mail-menuegruppe{padding:8px 12px 3px;font:800 9.5px var(--font);letter-spacing:.14em;
      text-transform:uppercase;color:var(--muted)}

/* ---------- Rueckfrage bei Kontaktsperre (R10) ---------- */
.tm .mail-sperrfrage{display:none}
.tm .mail-sperrfrage.auf{display:flex}
.tm .mail-sperrtext{margin-bottom:12px;font:700 13px var(--font);color:var(--crit)}

/* ---------- Ausgang (§6) ---------- */
.tm .mail-ausgang{display:block}
.tm .mail-agkacheln{margin-bottom:16px}
.tm .mail-agfilter{display:flex;gap:6px;flex-wrap:wrap}
.tm .mail-agchip{border:none;cursor:pointer;background:var(--surface-sunken);color:var(--ink-2);
      font:700 12px var(--font);padding:6px 12px;border-radius:var(--r-pill)}
.tm .mail-agchip:hover{background:var(--row-hover)}
.tm .mail-agchip.on{background:var(--gold-soft);color:var(--gold-on-soft)}
.tm .mail-agtab td{vertical-align:top}
.tm .mail-agknoepfe{gap:6px;flex-wrap:wrap;justify-content:flex-end}
.tm .mail-agzeile:hover>td{background:var(--row-hover)}

/* ---------- Signaturkarte (R8, R30) ---------- */
.tm .mail-sigkarte .mail-sigform{display:grid;gap:12px}
.tm .mail-sigkarte .mail-sigform[hidden]{display:none}
.tm .mail-abstand{margin-top:16px}

/* ---------- Layout-Modus „fenster" (§2): Popup ohne Schiene ---------- */
.tm.tm-fenster{background-color:var(--page);margin:0}
.tm .tm-fensterinhalt{max-width:940px;margin:0 auto;padding:18px 16px 26px}
.tm .mail-fensterkarte{display:block}
.tm .mail-fensterkarte .mail-verfassen{margin:0;background:none;padding:14px 18px 18px}

/* ---------- R29: Suchfeld und Leiste sind EINE Flaeche ----------
   Die Leiste (.tm-search) traegt Rahmen und Radius, das Feld darin nichts:
   kein eigener Rahmen, kein eigener Grund, kein eigener Radius. Der Fokus
   zeigt sich an der Leiste. (Nachtrag Haris 04.09.2026, Screen 2 — hier als
   ausdrueckliche Regel, damit die Abnahme sie messen kann: F23.) */
.tm .mail-suchzeile .tm-search input{border:none;background:none;border-radius:inherit;
      box-shadow:none;outline:none;height:auto}
.tm .mail-suchzeile .tm-search input:focus{box-shadow:none;border:none}

/* ---------- Druckansicht (R28) ---------- */
.tm .mail-druck{max-width:820px;margin:0 auto;background:var(--surface);
      border-radius:var(--r-xl);padding:26px 30px}
.tm .mail-druckkopf h1{margin:0 0 14px;font-size:21px;letter-spacing:-.02em;color:var(--ink)}
.tm .mail-druckfelder{width:100%;border-collapse:collapse;margin-bottom:18px}
/* Die Kopfzeilen der Druckseite sind eine schlichte Aufstellung, keine
   Tabelle mit Zeilenflaechen: ohne eigenen Grund gibt es auch keine Ecke,
   die eckig sein koennte (Regel „Runde Ecken ueberall"). */
.tm .mail-druckfelder th,.tm .mail-druckfelder td{background:none;box-shadow:none}
.tm .mail-druckfelder th{width:90px;text-align:left;vertical-align:top;padding:3px 10px 3px 0;
      font:800 10px var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tm .mail-druckfelder td{padding:3px 0;font:600 13px var(--font);color:var(--ink)}
.tm .mail-drucktext{font:400 14px/1.65 var(--font);color:var(--ink);
      padding-top:16px;border-top:1px solid var(--line)}
.tm .mail-druckanh{margin-top:20px;padding-top:12px;border-top:1px solid var(--line)}
.tm .mail-druckanh h2{margin:0 0 6px;font:800 11px var(--font);letter-spacing:.12em;
      text-transform:uppercase;color:var(--muted)}
.tm .mail-druckanh ul{margin:0;padding-left:18px;font:600 12.5px var(--font);color:var(--ink-2)}
.tm .mail-druckknoepfe{margin-top:22px}

@media print{
  /* Schwarz auf Weiss, Seitenraender, keine Knoepfe (R28). Umgestellt wird
     ueber die TOKEN — die Regeln darunter bleiben `var(--…)`, es steht auch
     hier kein Farbwert in einer Regel. */
  :root,:root[data-theme="dark"],:root[data-theme="light"]{
    --page:white;--surface:white;--surface-2:white;--surface-sunken:white;
    --ink:black;--ink-2:black;--muted:dimgray;--line:silver;--line-2:silver}
  .tm .mail-druckknoepfe,.tm .tm-rail,.tm .tm-head,.tm .tm-echo,.tm .mail-undo{display:none!important}
  .tm.tm-fenster,.tm .tm-fensterinhalt{background:var(--page);padding:0;margin:0;max-width:none}
  .tm .mail-druck{background:var(--surface);color:var(--ink);padding:0;max-width:none;box-shadow:none}
  @page{margin:18mm 16mm}
}

/* ---------- Unter 900 px: die Felder stehen untereinander (§6) ---------- */
@media(max-width:900px){
  .tm .mail-adr{flex-direction:column;align-items:stretch;gap:4px}
  .tm .mail-adr-lbl{flex:none;padding-top:0}
  .tm .mail-adr-vorschlag{left:0}
  .tm .mail-verfassen{margin:0 0 12px;padding:12px 14px 14px}
  .tm .mail-vfuss{gap:6px}
  .tm .mail-vstand{margin-left:0;width:100%}
}

/* ==========================================================================
   V3.7.8 — MAIL (BP-07 M3): RUECKSCHREIBEN, ORDNERPFLEGE, ZIEHEN
   (Bau 04.09.2026, Bauabschnitt 2 der Finalisierung)
   --------------------------------------------------------------------------
   Neue Bausteine dieses Abschnitts:
     .mail-rsband          Band „Aenderungen werden uebertragen …" (R25)
     .mail-rszeile         dasselbe Band mit Knopf in der Ordner-Karte
     .folder-node.ablegen  Ziehziel in der Ordnerspalte — eine FLAECHE (R23)
     .mail-zielwahl        Untermenue „Verschieben nach …" (R23)
     .mail-ordkarte        die Karte „Ordner" (Mein Konto, Verwaltung, BP-28)
     .tm-echo.schlecht     Rueckmeldung, wenn der Server abgelehnt hat
   Nur Token, keine Farbwerte, keine zweite Farbkante (Regel 18 Nachtrag).
   ========================================================================== */

/* ---------- Band: was noch auf den Server wartet (R25, R20) ---------- */
.tm .mail-rsband{margin:8px 14px 0;padding:8px 12px;border-radius:var(--r-md);
      background:var(--gold-soft);color:var(--gold-on-soft);
      font:700 11.5px/1.45 var(--font)}
.tm .mail-rszeile{display:flex;align-items:center;justify-content:space-between;gap:12px;
      flex-wrap:wrap;margin:12px 20px 0}
.tm .mail-rszeile .btn{flex:0 0 auto}

/* ---------- Ziehziel: eine Flaeche, nie ein Ring (R23, Regel 18) ---------- */
.tm .mail-ordnerliste .folder-node.ablegen{background:var(--row-sel);color:var(--ink);
      box-shadow:none;outline:none}
.tm .mail-ordnerliste .folder-node.ablegen .fn-icon,
.tm .mail-ordnerliste .folder-node.ablegen .fn-count{color:var(--gold-on-soft)}
/* Waehrend des Ziehens bleibt die Herkunftszeile sichtbar, tritt aber zurueck. */
.tm .mail-r.zieht .mail-pezeile[draggable="true"]:active{opacity:.55}

/* ---------- Untermenue „Verschieben nach …" (R23) ---------- */
.tm .mail-zielwahl{max-height:min(60vh,420px);overflow:auto}
.tm .mail-zieltiefe{display:block;flex:0 0 auto;height:1px}
.tm .mail-zieltiefe.t0{width:0}
.tm .mail-zieltiefe.t1{width:12px}
.tm .mail-zieltiefe.t2{width:24px}
.tm .mail-zieltiefe.t3{width:36px}

/* ---------- Karte „Ordner" (R23, R30) ---------- */
.tm .mail-ordkarte.laedt{opacity:.55;pointer-events:none}
.tm .mail-ordtab .mail-ordtiefe{display:inline-block;flex:0 0 auto;height:1px;vertical-align:middle}
.tm .mail-ordtab .mail-ordtiefe.t0{width:0}
.tm .mail-ordtab .mail-ordtiefe.t1{width:14px}
.tm .mail-ordtab .mail-ordtiefe.t2{width:28px}
.tm .mail-ordtab .mail-ordtiefe.t3{width:42px}
.tm .mail-ordname-e{width:180px;max-width:100%;padding:5px 9px;border-radius:var(--r-md);
      border:1px solid var(--line);background:var(--surface);color:var(--ink);
      font:700 13px var(--font)}
.tm .mail-ordname-e[hidden]{display:none}
.tm .mail-ordtat{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tm .mail-ordtat .btn[hidden]{display:none}
.tm .mail-ordneu{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;
      padding:14px 20px 18px;border-top:1px solid var(--line)}
.tm .mail-ordneu .field{margin:0;min-width:190px}
.tm .mail-ordneu .btn{flex:0 0 auto}

/* ---------- Rueckmeldung, wenn der Server abgelehnt hat ---------- */
.tm .tm-echo.schlecht{background:var(--crit-soft);color:var(--crit-on-soft)}

/* ---------- Unter 900 px: die Felder stehen untereinander (§6) ---------- */
@media(max-width:900px){
  .tm .mail-ordneu{flex-direction:column;align-items:stretch}
  .tm .mail-ordneu .field{min-width:0;width:100%}
  .tm .mail-rszeile{margin:12px 14px 0}
}

/* ============================================================================
   V3.7.9 — SCHIENE: GLEICHE ZEILENHOEHEN IN BEIDEN ZUSTAENDEN
   (Haris, 04.09.2026: „Gleiche Zeilenhoehen in beiden Zustaenden — ja, mache so.")

   Der Fehler: Ist die Schiene eingeklappt und man faehrt mit der Maus ueber
   einen Eintrag, klappt die Vorschau auf (V3.7.1) — und die Maus liegt danach
   ueber einem ANDEREN Eintrag. Grund: aufgeklappt gibt es Zeilen, die es
   eingeklappt nicht gab. Die Gruppen-Ueberschriften (BETRIEB, KOMMUNIKATION,
   WERKZEUGE, VERWALTUNG) und das Untermenue des offenen Moduls (Auftraege →
   Liste · Neuer Auftrag · Rueckstaende · Archiv) standen eingeklappt auf
   display:none. Jede dieser fehlenden Zeilen verschob alles darunter.

   Ab hier hat JEDER Eintrag der Schiene in ALLEN drei Zustaenden (aufgeklappt,
   eingeklappt, Vorschau) dieselbe Oberkante:

     Gruppen-Ueberschrift  eingeklappt ein gleich hoher Abstandhalter mit einer
                           feinen Linie (--line) statt des Textes
     Untermenuepunkt       eingeklappt ein Punkt in derselben Zeilenhoehe —
                           anklickbar (derselbe Link), Name als title; der
                           aktive gefuellt, die anderen als Ring in --muted
     Zaehler               unveraendert ein Punkt am Symbol (V3.6.0/V3.6.2)
     Modulpfeil            verschwindet weiterhin (er steht absolut, er hat nie
                           Hoehe getragen)

   WIE die Hoehe erhalten bleibt: die Beschriftung verschwindet nicht, sie wird
   nur unsichtbar (visibility:hidden). Damit bleibt die Zeilenbox — also die
   Hoehe — auf den Zehntel genau dieselbe; display:none haette sie mitgenommen.
   Die Beschriftung liegt dafuer wie bei jedem Rail-Eintrag in `span.t`
   (layout.php, Helfer tm2_rail_gruppe() und tm2_rail_modul()); die Punkte
   entstehen aus derselben Untermenue-Liste wie die Beschriftungen — keine
   zweite Pflege. Die Zeilen tragen `overflow:hidden`, damit der unsichtbare
   Text die 74 px nicht quer scrollen laesst.

   Die Vorschau erbt diese Geometrie: sie ist nichts anderes als der
   aufgeklappte Stand ueber dem Inhalt (V3.7.1/V3.7.4). Der Scrollstand des
   Menues bleibt beim Wechsel stehen (layout.php, halten()).

   Unter 900 px aendert sich nichts — die Schiene ist unter 1150 px ohnehin
   ausgeblendet (Abschnitt RESPONSIV), die Regeln hier gelten wie die uebrigen
   Klapp-Regeln nur mit html[data-rail="zu"]. Wie ueberall: nur Token, kein
   Farbwert, runde Ecken (--r-pill).
   ========================================================================== */

/* ---------- 0. Ein Eintrag ist EINE Zeile ----------
   Drei lange Namen mit „bald"-Marke (Artikel & Katalog, Einkauf & Container,
   Picking & Versand) brachen aufgeklappt auf zwei Zeilen um und waren damit
   61,8 px statt 52 px hoch — eingeklappt (Beschriftung weg) wieder 52 px. Auch
   die Vorschau zeigte sie schon bisher einzeilig (V3.7.4 setzt dort
   white-space:nowrap, „sonst huepfen die Zeilen in der Hoehe"): fest
   aufgeklappt und Vorschau waren also nie gleich hoch. Ab hier bleibt jeder
   Eintrag in ALLEN Zustaenden einzeilig; ist der Name zu lang, endet er mit
   drei Punkten — vollstaendig steht er im Tooltip (title, Regel V3.6.0).
   `min-width:0` ist noetig, damit ein Flex-Kind ueberhaupt schrumpfen darf. */
.tm-rail-item .t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- 1. Gruppen-Ueberschrift wird zum Abstandhalter mit feiner Linie ----------
   Die Zeile behaelt Innenabstand (16/7 px) und Zeilenbox der Ueberschrift; nur
   der Text wird unsichtbar. Die Linie liegt mittig darin. */
/* `flex:0 0 auto` ist Pflicht, nicht Zierde: .tm-rail-menue ist eine Flex-Spalte,
   deren Inhalt laenger ist als der Platz. Ein Flex-Kind mit `overflow:hidden`
   darf laut Spezifikation bis auf 0 schrumpfen (die Mindestgroesse ist dann
   nicht mehr der Inhalt) — die vier Ueberschriften haben in der ersten Messung
   genau das getan und waren 23 statt 38,5 px hoch. */
html[data-rail="zu"] .tm-rail-group{display:block;position:relative;overflow:hidden;white-space:nowrap;flex:0 0 auto}
html[data-rail="zu"] .tm-rail-group .t{visibility:hidden}
/* Die Linie nimmt --line-2, nicht --line: die Schiene hat keinen eigenen Grund
   (--rail-bg ist durchsichtig), sie liegt auf der Seitenfarbe. Dort ist --line
   im Hellmodus praktisch unsichtbar (#eceaf4 auf #f4f1fa). --line-2 ist genau
   der Wert, den die Fuehrungslinie des aufgeklappten Untermenues schon traegt
   (V3.2.8) — dieselbe Linie an derselben Stelle, nur ohne Text daneben. */
html[data-rail="zu"] .tm-rail-group::before{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:26px;height:1px;border-radius:var(--r-pill);background:var(--line-2)}

/* ---------- 2. Untermenuepunkte des offenen Moduls werden zu Punkten ----------
   Das Untermenue bleibt stehen (V3.6.0 hatte es ausgeblendet). Seine
   senkrechten Masse — 2 px oben, 6 px unten, 1 px zwischen den Zeilen — sind
   dieselben wie aufgeklappt; nur die Einrueckung und die Fuehrungslinie
   entfallen, damit die Punkte auf der Mittellinie der Symbole stehen. */
html[data-rail="zu"] .tm-rail-modul.auf .tm-rail-sub{display:flex;margin:2px 0 6px;padding-left:0;border-left:0}
html[data-rail="zu"] .tm-rail-subitem{padding:7px 0}
html[data-rail="zu"] .tm-rail-subitem .t{visibility:hidden}
/* Der goldene Strich auf der Fuehrungslinie entfaellt — es gibt keine Linie
   mehr; an seine Stelle tritt der gefuellte Punkt. (Die zweite Zeile ist noetig,
   weil `.tm .tm-rail-subitem.on::before` eine Klasse mehr zaehlt.) */
html[data-rail="zu"] .tm-rail-subitem::before,
html[data-rail="zu"] .tm-rail-subitem.on::before{display:none}
html[data-rail="zu"] .tm-rail-subitem::after{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);box-sizing:border-box;width:8px;height:8px;
  border-radius:var(--r-pill);border:1.5px solid var(--muted)}
/* Der aktive Unterpunkt: gefuellt in der Modulfarbe (--acc, sonst Gold) — wie
   das Symbol des aktiven Hauptpunktes. */
html[data-rail="zu"] .tm-rail-subitem.on::after{border-color:var(--acc,var(--gold));background:var(--acc,var(--gold))}
html[data-rail="zu"] .tm-rail-subitem:hover::after{border-color:var(--ink)}
/* Eingeklappt traegt der Punkt die Aussage, nicht die Flaeche: kein Grund unter
   dem aktiven Unterpunkt (aufgeklappt bleibt er, dort steht Text darauf). */
html[data-rail="zu"] .tm-rail-subitem.on,
html[data-rail="zu"] .tm-rail-subitem:hover{background:transparent}

/* ==========================================================================
   V3.7.14 — MAIL (BP-07 KORREKTURLAUF 1): BAND „AUF DEM SERVER GEAENDERT"
   (04.09.2026, nach dem Gegenlesen von Bauabschnitt 1, Befund 5 — R12 e)
   --------------------------------------------------------------------------
   Ein einziger neuer Baustein:
     .mail-konflikt   das Band ueber dem Editor mit den zwei Entscheidungen
                      „Neu laden" und „Meine Fassung behalten"
   Es benutzt die vorhandene Bandflaeche (.mail-band.mail-band-warn) und
   ergaenzt nur die Anordnung und die zwei Knoepfe. Nur Token, keine
   Farbwerte, kein border-left, kein border-radius:0 (Regel 18, Regel 17).
   ========================================================================== */

.tm .mail-konflikt{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tm .mail-konflikt b{flex:1 1 auto;min-width:0}
/* Die Knoepfe liegen IM Band: keine zweite Flaeche, keine zweite Farbkante —
   ein Rahmen in der Bandfarbe, mehr nicht (Regel 18 Nachtrag). */
.tm .mail-konflikt .mail-kwahl{flex:0 0 auto;padding:4px 11px;border-radius:var(--r-pill);
      border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;
      font:700 11.5px var(--font)}
.tm .mail-konflikt .mail-kwahl:hover{background:var(--surface)}
.tm .mail-konflikt .mail-kwahl:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

@media(max-width:900px){
  .tm .mail-konflikt .mail-kwahl{flex:1 1 auto}
}

/* ============================================================================
   V3.7.12 — SCHIENE: LOGO, PUENKTCHEN, UNTERMENUES
   (Haris, 04.09.2026, Screenshot der eingeklappten Schiene — drei Punkte)

   Drei Befunde am Bildschirm, alle nur in der eingeklappten Schiene:

   1. „Neben manchen Untermenue-Punkten stehen drei Puenktchen." Eingeklappt
      wird die Beschriftung eines Unterpunktes unsichtbar (visibility:hidden,
      V3.7.9) — die drei Punkte blieben aber stehen. Grund: `text-overflow:
      ellipsis` lag auf der ZEILE (a.tm-rail-subitem, V3.2.8), nicht auf der
      Beschriftung. Die Auslassung zeichnet immer die Box, die ueberlaeuft; die
      Box war hier die Zeile, und die ist sichtbar. Ab hier gilt die Regel:
      DIE AUSLASSUNG GEHOERT AN DIE BESCHRIFTUNG. `span.t` traegt Ueberlauf und
      Auslassung (wie bei .tm-rail-item .t seit V3.7.9), die Zeile schneidet nur
      noch ab. Damit verschwinden die Punkte ueberall dort mit, wo die
      Beschriftung verschwindet — eingeklappt (unsichtbar) wie auch waehrend der
      Bewegung (das Untermenue blendet als Ganzes aus, V3.7.4). Die Zeilenhoehe
      bleibt unberuehrt: es aendert sich nur, WELCHE Box ueberlaeuft.

   2. „Der Schatten oben beim Logo ist auf der gesamten Breite. Der sollte nur
      noch so breit sein wie das Logo und sollte, sobald die Seitenleiste
      aufklappt, so breit sein wie es jetzt ist." V3.7.4 hielt den Logoblock in
      allen Zustaenden auf 250 px („damit das Kopfband stillsteht") — eingeklappt
      ragte er samt Schatten ueber die Kopfzeile des Inhalts. Ab hier ist der
      Logoblock SO BREIT WIE DIE SCHIENE: `width:100%` statt einer festen Zahl.
      Damit laeuft er ohne eigenen Uebergang genau mit ihr — dieselbe Kurve
      (--t-rail), dieselbe Dauer, kein zweiter Zeitgeber, der auseinanderlaufen
      koennte. Eingeklappt sind das 74 px und nur das Zeichen, aufgeklappt und in
      der Vorschau 250 px mit Namen; der Name blendet mit den uebrigen
      Beschriftungen ein und aus. Schatten (::before) und weicher Auslauf
      (::after) sitzen seit V3.7.4 auf `left:0;right:0` und sind damit von selbst
      genauso breit wie der Block. Die HOEHE bleibt in jedem Zustand --kopf-raum
      (Pruefung „Kopfband gleich hoch"), die Oberkante ebenso.
      Die Kopfzeile des Inhalts rueckt entsprechend: eingeklappt beginnt sie
      direkt neben dem 74-px-Block (kein Einzug mehr). Auch waehrend der
      Vorschau bleibt sie stehen — die Vorschau ist eine Ueberlagerung, sie
      verschiebt keinen Inhalt (V3.7.1/V3.7.4: „das Raster bleibt bei 74 px,
      nichts springt"); sie deckt den Titel so lange zu wie jeden anderen Inhalt
      darunter. Kein Sprung beim Laden: der Zustand steht vor dem ersten
      Zeichnen (tm_design.php), Uebergaenge erst mit html.tm-bewegt.

   3. Untermenues: nur das aktuelle Modul ist offen — das entscheidet allein
      layout.php (Klasse `auf` und `data-aktiv` beim Zeichnen, tm2RailNurAktiv
      beim Einklappen und am Ende der Vorschau). Hier ist dafuer nichts zu tun:
      die Punkte der eingeklappten Schiene (V3.7.9) folgen der Klasse `auf`,
      und weil dieselbe Klasse in allen drei Zustaenden gilt, bleiben die
      Zeilenhoehen gleich (die Zeilen eines offenen Untermenues gibt es in
      beiden Zustaenden, die eines geschlossenen in keinem).

   Wie ueberall: nur Token, kein Farbwert, runde Ecken.
   ========================================================================== */

/* ---------- 1. Die Auslassung gehoert an die Beschriftung ---------- */
/* Die Zeile schneidet nur noch ab (sie muss weiter `overflow:hidden` tragen,
   damit die unsichtbare Beschriftung die 74 px nicht quer scrollen laesst). */
.tm .tm-rail-subitem{text-overflow:clip}
/* Und die Beschriftung traegt Ueberlauf UND Auslassung — genau wie bei den
   Hauptpunkten (.tm-rail-item .t, V3.7.9). Ist sie unsichtbar, ist auch die
   Auslassung unsichtbar. */
.tm .tm-rail-subitem .t{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ---------- 2. Der Logoblock ist so breit wie die Schiene ---------- */
/* Die drei Selektoren aus V3.7.4 werden hier eins zu eins ueberschrieben —
   dieselbe Spezifitaet, spaetere Stelle. */
.tm-rail-logo,html[data-rail="zu"] .tm-rail-logo,html[data-rail-schau] .tm-rail-logo{width:100%}
/* Eingeklappt nur das Zeichen. Der Name steht in dem einen Geschwister-Span
   neben `.mk` (layout.php); mit ihm faellt auch der Flex-Abstand weg. */
html[data-rail="zu"] .tm-rail-logo>span:not(.mk){display:none}
/* Waehrend die Breite laeuft, ist der Name noch da und der Block schon schmal:
   das Zeichen darf dabei nicht gequetscht werden, der Name nicht umbrechen und
   nicht ueber die Kante stehen — er wird einfach abgeschnitten (kein
   `overflow` am Logoblock selbst: das schluckte Schatten und Auslauf, die als
   ::before/::after darunter liegen). */
.tm-rail-logo .mk{flex:0 0 auto}
.tm-rail-logo>span:not(.mk){min-width:0;overflow:hidden}
.tm-rail-logo .n,.tm-rail-logo .s{white-space:nowrap}
/* Der Name blendet mit den Beschriftungen ein und aus (V3.7.4, dieselbe
   Animation, dieselbe Verzoegerung). */
html.tm-bewegt[data-rail-schau="auf"] .tm-rail-logo>span:not(.mk){
  animation:tm-rail-ein var(--t-rail-text) backwards;animation-delay:90ms}
html[data-rail-schau="aus"] .tm-rail-logo>span:not(.mk){opacity:0;transition:opacity var(--t-rail-text)}
/* Kleinigkeit im selben Zug (Bestand seit V3.7.4, gemessen 04.09.2026): Waehrend
   die Breite laeuft, stand der Fuss mit der Beschriftung „Fixieren" bis x = 117
   ueber die 74 px hinaus — die Schiene traegt `overflow:visible`, der Text wurde
   also ueber den Inhalt gemalt. Das Menue bekam dagegen schon in V3.7.4 sein
   `overflow-x:hidden`. Jetzt beide gleich. */
html[data-rail-schau] .tm-rail-fuss{overflow:hidden}

/* Die Kopfzeile des Inhalts beginnt direkt neben dem Block — der Einzug von
   196 px aus V3.6.1/V3.7.1 gehoerte zum 250 px breiten Logoblock und faellt
   mit ihm weg. In der Vorschau bleibt sie ebenfalls stehen (siehe Kopf). */
html[data-rail="zu"] .tm-main>.tm-head:first-child,
html[data-rail-schau] .tm-main>.tm-head:first-child{padding-left:0}

/* Unter 900 px bleibt alles wie bisher (die Schiene ist dort ohnehin in voller
   Breite, siehe V3.6.0/V3.7.4) — der Name gehoert dann wieder dazu. */
@media(max-width:900px){
  html[data-rail="zu"] .tm-rail-logo>span:not(.mk){display:block}
}

/* Bewegungsarm: der Name wechselt ohne Blende. Die Breite des Logoblocks
   braucht hier nichts — sie haengt an der Schiene, und deren Uebergang ist im
   Abschnitt V3.7.4 bereits abgeschaltet. */
@media(prefers-reduced-motion:reduce){
  html.tm-bewegt[data-rail-schau="auf"] .tm-rail-logo>span:not(.mk){animation:none}
  html[data-rail-schau="aus"] .tm-rail-logo>span:not(.mk){transition:none}
}

/* ==========================================================================
   V3.7.15 — MAIL (BP-07 KORREKTURLAUF 2): HINWEISBAND UND MASSE AN EINEM ORT
   (Gegenlesen M3, 04.09.2026 — Befund 1b und Befund 15)

   Zwei Anlaesse:
     1. Der Faehigkeits-Hinweis des Servers („Server ohne UIDPLUS …") steht
        jetzt DAUERHAFT an der Ordner-Karte. Er ist kein Fehler, sondern eine
        Eigenschaft des Servers — deshalb ruhig, nicht in Gold.
     2. Die Masse der Verwaltungsseiten standen als `style="…"` in der
        Modulseite (00_Rahmen: kein Mass in der Modulseite). Sie stehen jetzt
        hier, einmal.
   Nur Token, kein Farbwert, kein border-left, kein border-radius:0.
   ========================================================================== */

/* ---------- Hinweis am Konto: ruhig, kein Alarm (§24.3) ---------- */
.tm .mail-rsband.mail-hinweisband{background:var(--surface-sunken);color:var(--ink-2)}

/* ---------- Masse der Postfach-Verwaltung (Befund 15) ---------- */
.tm .mail-karte-luft{margin-bottom:16px}
.tm .mail-luft-o{margin-top:8px}
.tm .mail-pad-eng{padding:14px 20px}
.tm .mail-warnzeile{padding:13px 18px;font-weight:600}
.tm .mail-inline{display:inline}

/* ==========================================================================
   V3.7.16 — SCHIENE: EINE MITTELLINIE FUER DIE GANZE SYMBOLSPALTE
   (Haris, 04.09.2026 — offener Punkt 5 aus dem Bau „rail-logo-untermenue")

   Befund: Logo-Zeichen, Menue-Symbole und das Symbol des Klapp-Knopfes standen
   auf DREI verschiedenen Senkrechten. Gemessen (getBoundingClientRect, 1440 px,
   Startseite) waren die Mitten:

       Zustand        Logo    Menue   Klapp
       aufgeklappt     36      39      42
       eingeklappt     36      39,5    36
       Vorschau        36      39      42

   Grund: nur das MENUE (.tm-rail-menue) reserviert links 7 px Rinne fuer die
   Laufleiste (Rinne dauerhaft reserviert, rtl-Trick, V3.6.1). Sein Inhalt
   beginnt damit bei 7 + 4 = 11 px, waehrend Logoblock und Fuss ihre 14 px
   Innenabstand direkt an der Kante messen. Seit V3.6.1 ein Bestand.

   Regel: das Menue ist der Massstab — es bleibt unveraendert, damit die
   Zeilenhoehen und die Puenktchen aus V3.7.9 nicht wandern. Logo und Fuss
   ruecken an die Symbole:

     · Der Fuss bekommt denselben linken Anfang wie der Inhalt des Menues
       (11 px = 7 px Rinne + 4 px Innenabstand). Der Klapp-Knopf traegt
       dieselben 12 px Innenabstand wie eine Modulzeile, sein Symbol landet
       also auf 11 + 12 + 16 = 39. Eingeklappt reicht der Knopf wie eine
       Modulzeile von 11 bis 68 px; sein mittig gesetztes Symbol steht auf
       11 + 57/2 = 39,5. Nebenwirkung, gewollt: die Hover-Flaeche des Knopfes
       deckt sich jetzt mit der einer Modulzeile.
     · Das Logo-Zeichen ist 44 px breit, seine Mitte liegt also 22 px hinter
       dem Innenabstand: 39 - 22 = 17 px aufgeklappt, 39,5 - 22 = 17,5 px
       eingeklappt. Die halben Pixel sind kein Schoenheitsfehler, sondern die
       Rinne: das Menue selbst springt zwischen den Zustaenden um dieselben
       0,5 px, das Zeichen laeuft jetzt mit.

   Unveraendert bleiben: Hoehe und Oberkante des Kopfbandes (--kopf-raum,
   84 px), die Breite des Logoblocks (74 px eingeklappt / 250 px aufgeklappt
   und in der Vorschau, V3.7.12), Schatten und Auslauf (sie sitzen auf
   left:0;right:0) und jede Zeile des Menues.
   Nur Masse, keine Farbe.
   ========================================================================== */
.tm-rail-logo{padding-left:17px}
html[data-rail="zu"] .tm-rail-logo{padding-left:17.5px}
.tm-rail-fuss{padding-left:11px}
html[data-rail="zu"] .tm-rail-fuss{padding-left:11px}

/* ==========================================================================
   ===== EINSTELLUNGEN (BP-28) =====
   Die Seite /einstellungen braucht keinen neuen Baustein: Karte (.card),
   Kartenkopf (.card-h), Feld (.field), Knoepfe (.btn.gold / .btn.ghost) und
   der Farbstreifen (.card.streifen-crit) gibt es bereits. Hier stehen nur die
   Masse, die BP-28 Abschnitt 6 nennt — damit sie einmal hier stehen und nicht
   als style="" in der Modulseite (00_Rahmen: kein Mass in der Modulseite).
   Nur Masse, keine Farbe, kein border-left, kein border-radius:0.
   ========================================================================== */
/* Korrektur Haris 04.09.2026 („die Einstellungen sind nur im Handy-Format",
   „sie soll ein Menue bekommen"): die Seite nutzt am Bildschirm die Breite —
   links ein STEHENDES Abschnittsmenue (Sprung zum Anker #abschnitt), rechts
   die Karten in voller Breite mit Feldern in zwei Spalten. Die schmale
   440-px-Karte gilt nur fuer Einzelformulare (Passwort, Konto), nicht fuer
   Seiten mit Abschnitten (tm_design/README „Seiten mit Abschnitten").
   Aktiver Menuepunkt ist eine FLAECHE (--row-sel), nie ein Ring (Regel 18). */
.tm .einst-seite{display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px;align-items:start}
.tm .einst-menue{position:sticky;top:calc(var(--kopf-raum) + 8px);padding:10px}
.tm .einst-menue-liste{display:flex;flex-direction:column;gap:2px}
.tm .einst-menue-punkt{display:block;padding:9px 12px;border-radius:var(--r-md);font-size:13.5px;font-weight:700;
  color:var(--ink-2);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm .einst-menue-punkt:hover{background:var(--row-hover);color:var(--ink);text-decoration:none}
.tm .einst-menue-punkt.aktiv{background:var(--row-sel);color:var(--ink)}
.tm .einst-inhalt{min-width:0}
.tm .einst-karte{margin-bottom:16px}
.tm .einst-felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.tm .einst-felder .einst-feld{margin-bottom:0}
@media (max-width:1000px){
  .tm .einst-seite{grid-template-columns:200px minmax(0,1fr)}
}
@media (max-width:700px){
  .tm .einst-seite{grid-template-columns:minmax(0,1fr)}
  .tm .einst-menue{position:static;padding:8px}
  .tm .einst-menue-liste{flex-direction:row;overflow-x:auto;overscroll-behavior-x:contain;gap:4px}
  .tm .einst-menue-punkt{flex:0 0 auto}
  .tm .einst-felder{grid-template-columns:minmax(0,1fr)}
}
/* Ankersprung nach dem Speichern (#abschnitt, Fachregel 5): die Karte landet
   UNTER dem stehenden Kopfband, nicht dahinter (Klick-Abnahme 04.09.2026). */
.tm .einst-karte{scroll-margin-top:calc(var(--kopf-raum) + 8px)}
.tm .einst-feld{margin-bottom:14px}
.tm .einst-feld:last-child{margin-bottom:0}
/* Speichern steht rechts unten in der Karte (Abschnitt 6). */
.tm .einst-fuss{display:flex;justify-content:flex-end;padding:0 22px 20px}
/* Meldung „Ungueltiger Wert." — die Farbe traegt der Streifen der Karte. */
.tm .einst-fehler{padding:0 22px 10px;font-weight:600}
/* Ein Knopf-Formular in einer Knopfreihe soll keine eigene Luft mitbringen. */
.tm .einst-knopfform{margin:0}
/* Zugänge: je Dienst ein eigener Kasten mit Farbkante und Kopfzeile, damit
   DHL und sevDesk nicht als ein Formular wirken (Haris, 14.10.2026). */
.tm .zg-gruppe{margin:0 18px 16px;padding:14px 18px 18px;border:1px solid var(--line-2);
  border-left:4px solid var(--zg-farbe,var(--line-2));border-radius:var(--r-lg);background:var(--surface-2)}
.tm .zg-gruppe.zg-dhl{--zg-farbe:var(--gold);--zg-soft:var(--gold-soft);--zg-text:var(--gold-on-soft)}
.tm .zg-gruppe.zg-sevdesk{--zg-farbe:var(--info);--zg-soft:var(--info-soft);--zg-text:var(--info-on-soft)}
.tm .zg-kopf{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.tm .zg-kopf h3{margin:0;padding:3px 10px;border-radius:var(--r-md);font-size:13px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;background:var(--zg-soft,var(--surface-3));color:var(--zg-text,var(--ink))}
.tm .zg-kopf span{font-size:13px;color:var(--muted)}
@media (max-width:700px){.tm .zg-gruppe{margin:0 10px 14px;padding:12px}}
/* Mobil unter 700 px: Karten volle Breite (Abschnitt 6). */
@media (max-width:700px){
  .tm .einst-karte{max-width:none}
}

/* ============================================================================
   SUCHE (BP-29) — Suchfeld in der Kopfzeile und Vorschlagsliste
   ============================================================================
   Das Feld steht in `.tm-head .r` direkt neben dem Hell/Dunkel-Knopf
   (Entscheidung Haris 03.09.2026) und ist so hoch wie dieser (44 px). Die
   Vorschlagsliste haengt darunter und liegt UEBER dem Inhalt
   (position:absolute) — die Seite springt nicht (Regel 17).

   Nur Tokens, kein Farbwert. Die markierte Zeile ist eine FLAECHE (--row-sel),
   nie ein Ring (Regel 18, Nachtrag „Nur links, sonst nichts"); der einzige
   Rahmen ist der Tastatur-Fokus (:focus-visible). Jede Flaeche mit eigenem
   Grund traegt einen Radius aus den Tokens (Regel „Runde Ecken ueberall").
   ============================================================================ */
.tm .tm-suche{position:relative;display:flex;align-items:center}

/* Das Feld selbst — Optik wie .tm-search (Kopfzeilen-Baustein), Breite 280 px. */
.tm .tm-suche-form{display:flex;align-items:center;gap:10px;height:44px;width:280px;max-width:100%;
  padding:0 16px;background:var(--surface);border-radius:var(--r-pill);box-shadow:var(--shadow-1);
  color:var(--muted);font-family:var(--font)}
.tm .tm-suche-form:focus-within{box-shadow:var(--shadow-2)}
.tm .tm-suche-form svg.ic{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round}
.tm .tm-suche.laeuft .tm-suche-form svg.ic{animation:tm-suche-puls 1s ease-in-out infinite}
@keyframes tm-suche-puls{0%,100%{opacity:1}50%{opacity:.35}}
.tm .tm-suche-form input{flex:1 1 auto;min-width:0;border:none;background:none;outline:none;
  font:600 13.5px var(--font);color:var(--ink)}
.tm .tm-suche-form input::-webkit-search-cancel-button{display:none}
.tm .tm-suche-form input:focus{box-shadow:none;border:none}

/* Lupen-Knopf und Schliessen-Knopf: erst unter 900 px sichtbar (siehe unten). */
.tm .tm-suche-lupe,.tm .tm-suche-zu{display:none;width:44px;height:44px;flex:0 0 auto;border:none;
  cursor:pointer;background:var(--surface);color:var(--ink-2);border-radius:var(--r-pill);
  place-items:center;box-shadow:var(--shadow-1);padding:0}
.tm .tm-suche-lupe svg,.tm .tm-suche-zu svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Vorschlagsliste ---------- */
.tm .tm-suche-liste{position:absolute;top:calc(100% + 8px);right:0;z-index:60;
  width:min(440px,86vw);max-height:min(70vh,560px);overflow-y:auto;overscroll-behavior:contain;
  padding:8px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-3)}
.tm .tm-suche-gkopf{padding:9px 10px 5px;margin:0}
.tm .tm-suche-treffer{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;
  padding:9px 10px;border:none;background:none;border-radius:var(--r-md);cursor:pointer;
  color:var(--ink);font-family:var(--font);text-decoration:none}
.tm .tm-suche-treffer.ohneziel{cursor:default}
.tm .tm-suche-treffer:hover{background:var(--row-hover);text-decoration:none}
/* Markierung ist eine Flaeche, nie ein Ring (Regel 18). */
.tm .tm-suche-treffer.markiert{background:var(--row-sel)}
.tm .tm-suche-treffer:focus-visible{outline:2px solid var(--acc,var(--gold));outline-offset:-2px}
.tm .tm-suche-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.tm .tm-suche-titel{font-size:13.5px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.tm .tm-suche-zusatz{font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.3;
  overflow-wrap:anywhere}
.tm .tm-suche-kennzahlen{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:3px;
  font-size:12px;font-weight:700;color:var(--ink-2)}
.tm .tm-suche-kennzahlen .badge{font-size:11px;padding:3px 9px}
.tm .tm-suche-treffer>.badge{flex:0 0 auto;margin-top:1px}
.tm .tm-suche-meldung{padding:12px 10px;font-size:13px;font-weight:600;color:var(--muted);
  border-radius:var(--r-md)}
.tm .tm-suche-meldung.tm-suche-fehler{color:var(--crit-on-soft);background:var(--crit-soft)}
.tm .tm-suche-meldung.tm-suche-langsam{color:var(--gold-on-soft);background:var(--gold-soft)}
/* Fusszeile der Vorschlagsliste: „Alle Treffer anzeigen" → Trefferseite. */
.tm .tm-suche-fuss{display:block;margin-top:4px;padding:10px;border-radius:var(--r-md);
  background:var(--surface-sunken);color:var(--ink-2);font-size:12.5px;font-weight:700;
  text-align:center;text-decoration:none}
.tm .tm-suche-fuss:hover{background:var(--row-hover);color:var(--ink);text-decoration:none}

/* ---------- Unter 900 px: Lupen-Knopf, der das Feld ueber die volle Breite aufklappt ---------- */
@media (max-width:900px){
  .tm .tm-suche-lupe{display:grid}
  .tm .tm-suche-form{display:none}
  /* Aufgeklappt nimmt das Feld die volle Breite der Kopfzeile (.tm-head .r
     bricht um); die Liste bleibt am Wrapper verankert, nichts springt. */
  .tm .tm-suche.auf{flex:1 1 100%}
  /* Klick-Abnahme 04.09.2026: `.tm-head .r` ist nur so breit wie sein Inhalt
     (margin-left:auto) — das aufgeklappte Feld blieb darum bei ~400 px. Traegt
     .r ein offenes Feld, waechst es ueber die ganze Kopfzeile (wie
     `.tm-app:has(.druck)` im Druckabschnitt). */
  .tm .tm-head .r:has(.tm-suche.auf){flex:1 1 100%;margin-left:0}
  .tm .tm-suche.auf .tm-suche-lupe{display:none}
  .tm .tm-suche.auf .tm-suche-form{display:flex;width:100%;flex:1 1 100%}
  .tm .tm-suche.auf .tm-suche-zu{display:grid}
  .tm .tm-suche.auf .tm-suche-liste{left:0;right:0;width:auto}
}

/* Gedruckt wird die Suche nicht (wie .tm-search). */
@media print{ .tm .tm-suche{display:none} }

/* ==========================================================================
   ZWEIFAKTOR (BP-30)
   Bausteine der Zwei-Faktor-Anmeldung: QR-Rahmen, Code-Feld, Codes-Raster
   und die Druckansicht der Wiederherstellungscodes.
   Nur Token, kein Farbwert, kein border-left, kein border-radius:0.

   Zur Farbwahl des QR-Rahmens (Entscheidung im Bau, 04.09.2026): Ein QR-Code
   muss in BEIDEN Modi dunkel auf hell stehen — ein umgekehrter Code ist fuer
   Handykameras nicht verlaesslich lesbar. Genau ein Tokenpaar erfuellt das,
   weil es in hell UND dunkel dieselbe Rollenverteilung behaelt: die Goldkachel
   mit dunkler Tinte (--gold / --gold-ink, README Abschnitt 5). Alle anderen
   Paare (surface/ink, page/ink, on-accent) kippen im Dunkelmodus.
   ========================================================================== */

/* ---------- QR-Code: 200 px, Ruhezone steckt im SVG ---------- */
.tm .zf-qr{display:inline-block;background:var(--gold);color:var(--gold-ink);
           border-radius:var(--r-lg);padding:10px;line-height:0;
           print-color-adjust:exact;-webkit-print-color-adjust:exact}
.tm .zf-qr-svg{display:block;width:200px;height:200px}

/* ---------- Code-Eingabe: gross, einstellig lesbar, am Handy bedienbar ---------- */
.tm input.zf-code{height:54px;font-size:24px;font-weight:700;letter-spacing:.18em;
                  text-align:center;font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);
                  width:100%}
.tm input.zf-geheim{font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);
                    font-size:13.5px;letter-spacing:.06em;background:var(--surface-3)}

/* ---------- Die acht Wiederherstellungscodes ---------- */
.tm .zf-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tm .zf-codes .mono{display:block;background:var(--surface-sunken);color:var(--ink);
                    border-radius:var(--r-md);padding:9px 12px;text-align:center;
                    font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);
                    font-size:14.5px;font-weight:700;letter-spacing:.10em;
                    print-color-adjust:exact;-webkit-print-color-adjust:exact}

/* ---------- „Abbrechen" im Code-Schritt: ein Knopf, der wie ein Link liest ---------- */
.tm button.zf-abbruch{border:none;background:none;padding:0;cursor:pointer;
                      font:inherit;font-weight:600;color:var(--muted)}
.tm button.zf-abbruch:hover{color:var(--ink);text-decoration:underline}

/* ---------- Druck der Wiederherstellungscodes ----------
   Farbig wie am Bildschirm im Hellmodus (README „Druckansichten farbig"):
   tokens.css schaltet den Dunkelmodus nur @media screen, auf Papier gelten
   ueberall die :root-Werte. Gedruckt wird nur die Karte mit den Codes. */
@media print{
  .tm-app:has(.zf-druck) .tm-rail,
  .tm-app:has(.zf-druck) .tm-head,
  .tm-app:has(.zf-druck) .zf-nicht-drucken{display:none}
  .tm-app:has(.zf-druck) .tm-main{padding:0}
  .tm-app:has(.zf-druck) .card.zf-druck{max-width:none;box-shadow:none}
  .tm .zf-codes{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ==========================================================================
   AUFGABEN (BP-09) — V3.7.18 (04.09.2026)
   ==========================================================================
   Die Bausteine der Aufgabenliste, des Aufgabenblatts und der Serienpflege
   (BP-09 Abschnitt 6). Nur Token-Variablen, keine Farbwerte; hell und dunkel
   entstehen aus tokens.css. Jede Flaeche mit eigenem Grund traegt einen Radius
   (Regel „Runde Ecken ueberall"); der Zustandsstreifen ist die einzige
   Farbkante (Regel „Farbstreifen", Nachtrag 04.09.2026) — Auswahl und Hover
   sind Flaechen.

     .aufg-gruppe        Gruppenkopf mit Zaehler (Ueberfaellig, Heute, …)
     .aufg-haken         runder Erledigt-Knopf am Zeilenanfang (22 px)
     .aufg-baum          eingerueckte Unteraufgaben mit Fuehrungslinie
     .aufg-haken-liste   Checkliste, Kaestchen 18 px, abgehakt durchgestrichen
     .aufg-befund        Karte mit der Stufe als Familienchip
     .aufg-frist         Schnellwahl-Knopfreihe (+1 Tag, +1 Woche, Datum)
   ========================================================================== */

/* ---------- Gruppenkopf ---------- */
.tm .aufg-gruppe{display:flex;align-items:center;justify-content:space-between;gap:12px;
                 flex-wrap:wrap;padding:16px 22px 10px}
.tm .aufg-gruppe h2{margin:0;font-size:16px;font-weight:800;letter-spacing:-.02em}
.tm .aufg-gruppe .zahl{display:inline-flex;align-items:center;justify-content:center;min-width:26px;
                       height:22px;padding:0 8px;border-radius:var(--r-pill);
                       background:var(--surface-sunken);color:var(--ink-2);
                       font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.tm .aufg-gruppe .links{display:flex;align-items:center;gap:10px;min-width:0}

/* ---------- Der runde Erledigt-Knopf ---------- */
.tm .aufg-haken{width:22px;height:22px;flex:0 0 auto;border-radius:var(--r-pill);
                border:2px solid var(--line-2);background:var(--surface);cursor:pointer;
                display:grid;place-items:center;padding:0;
                transition:background var(--t-fast),border-color var(--t-fast)}
.tm .aufg-haken svg{width:14px;height:14px;fill:none;stroke:var(--muted);stroke-width:2.6;
                    stroke-linecap:round;stroke-linejoin:round;opacity:0}
.tm .aufg-haken:hover{border-color:var(--good)}
.tm .aufg-haken:hover svg{opacity:.5}
.tm .aufg-haken.an{background:var(--good);border-color:var(--good)}
.tm .aufg-haken.an svg{stroke:var(--on-accent);opacity:1}
.tm .aufg-haken:disabled{cursor:default;opacity:.5}

/* Marke statt Haken bei eingeblendeten Zeilen (Vorgang, Lead) */
.tm .aufg-marke-fremd{display:inline-block;padding:3px 8px;border-radius:var(--r-pill);
                      background:var(--surface-sunken);color:var(--ink-2);
                      font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}

/* ---------- Die Zeile ---------- */
.tm .aufg-c-haken{width:40px}
.tm .aufg-c-frist{white-space:nowrap}
.tm .aufg-c-zust{white-space:nowrap}
.tm a.aufg-titel{color:var(--ink);font-weight:700;text-decoration:none;font-size:14.5px}
.tm a.aufg-titel:hover{text-decoration:underline}
.tm .aufg-zeile.aufg-erledigt a.aufg-titel{color:var(--muted);text-decoration:line-through}
.tm .aufg-marken{display:inline-flex;gap:6px;flex-wrap:wrap;vertical-align:middle;margin-left:6px}
.tm .aufg-zeile td{cursor:default}
.tm .aufg-zeile:hover td{background:var(--row-hover)}
.tm .aufg-zeile.markiert td{background:var(--row-sel)}

/* Aufklapp-Pfeil vor dem Titel — dieselbe Geste wie im Menue der Schiene */
.tm .aufg-auf{width:22px;height:22px;border:none;background:none;padding:0;cursor:pointer;
              border-radius:var(--r-md);color:var(--muted);vertical-align:middle;margin-right:4px;
              display:inline-grid;place-items:center;transition:transform var(--t-fast),background var(--t-fast)}
.tm .aufg-auf svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
                  stroke-linecap:round;stroke-linejoin:round}
.tm .aufg-auf:hover{background:var(--surface-sunken);color:var(--ink)}
.tm .aufg-auf[aria-expanded="true"]{transform:rotate(90deg)}

/* Unterzeile in der Liste: eingerueckt, ohne zweite Farbkante */
.tm tr.aufg-unter td.aufg-c-titel{padding-left:34px}
.tm tr.aufg-unter[hidden]{display:none}

/* ---------- Baum der Unteraufgaben auf dem Blatt ---------- */
.tm .aufg-baum{display:flex;flex-direction:column;gap:6px;margin:2px 0 6px 6px;padding-left:12px;
               border-left:2px solid var(--line-2)}
.tm .aufg-baum .zeile{display:flex;align-items:center;gap:10px;padding:9px 12px;
                      background:var(--surface-2);border-radius:var(--r-lg);min-width:0}
.tm .aufg-baum .zeile.fertig .t{color:var(--muted);text-decoration:line-through}
.tm .aufg-baum .t{flex:1 1 auto;min-width:0;font-size:14px;font-weight:700;color:var(--ink);
                  text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm .aufg-baum a.t:hover{text-decoration:underline}
.tm .aufg-baum .nb{flex:0 0 auto;color:var(--muted);font-size:12.5px;font-weight:600;white-space:nowrap}
.tm .aufg-baum .pfeile{display:flex;gap:2px;flex:0 0 auto}
.tm .aufg-baum .pfeile button{width:26px;height:26px;border:none;background:none;padding:0;cursor:pointer;
                              border-radius:var(--r-md);color:var(--muted);display:grid;place-items:center}
.tm .aufg-baum .pfeile button:hover{background:var(--surface-sunken);color:var(--ink)}
.tm .aufg-baum .pfeile svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
                           stroke-linecap:round;stroke-linejoin:round}

/* ---------- Checkliste ---------- */
.tm .aufg-haken-liste{display:flex;flex-direction:column;gap:4px}
.tm .aufg-haken-liste .schritt{display:flex;align-items:center;gap:10px;padding:7px 12px;
                               background:var(--surface-2);border-radius:var(--r-md);min-width:0}
.tm .aufg-haken-liste .kasten{width:18px;height:18px;flex:0 0 auto;border-radius:5px;
                              border:2px solid var(--line-2);background:var(--surface);cursor:pointer;
                              display:grid;place-items:center;padding:0;
                              transition:background var(--t-fast),border-color var(--t-fast)}
.tm .aufg-haken-liste .kasten svg{width:12px;height:12px;fill:none;stroke:var(--on-accent);stroke-width:3;
                                  stroke-linecap:round;stroke-linejoin:round;opacity:0}
.tm .aufg-haken-liste .kasten:hover{border-color:var(--good)}
.tm .aufg-haken-liste .kasten.an{background:var(--good);border-color:var(--good)}
.tm .aufg-haken-liste .kasten.an svg{opacity:1}
.tm .aufg-haken-liste .t{flex:1 1 auto;min-width:0;font-size:14px;color:var(--ink)}
.tm .aufg-haken-liste .schritt.fertig .t{color:var(--muted);text-decoration:line-through}
.tm .aufg-haken-liste .weg{flex:0 0 auto;width:26px;height:26px;border:none;background:none;padding:0;
                           cursor:pointer;border-radius:var(--r-md);color:var(--muted);display:grid;place-items:center}
.tm .aufg-haken-liste .weg:hover{background:var(--surface-sunken);color:var(--crit)}
.tm .aufg-haken-liste .weg svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;
                               stroke-linecap:round;stroke-linejoin:round}
.tm .aufg-haken-neu{display:flex;gap:8px;margin-top:8px}
.tm .aufg-haken-neu input{flex:1 1 auto;min-width:0}

/* ---------- Befund einer Systemaufgabe ---------- */
.tm .aufg-befund{background:var(--surface-2);border-radius:var(--r-lg);padding:14px 16px;
                 display:flex;flex-direction:column;gap:8px}
.tm .aufg-befund .kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tm .aufg-befund .txt{font-size:13.5px;line-height:1.5;color:var(--ink);word-break:break-word}
.tm .aufg-befund .zeit{color:var(--muted);font-size:12.5px;font-weight:600}

/* ---------- Schnellwahl der Frist ---------- */
.tm .aufg-frist{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tm .aufg-frist input[type=date]{height:36px;font-size:13px;padding:0 10px}

/* ---------- Kundenliste der Serie ---------- */
.tm .aufg-kunden{display:flex;flex-direction:column;gap:6px;max-height:420px;overflow-y:auto;
                 overscroll-behavior:contain;padding:2px}
.tm .aufg-kunden .kunde{display:grid;grid-template-columns:22px minmax(0,1.3fr) 160px minmax(0,1fr);
                        gap:10px;align-items:center;padding:9px 12px;background:var(--surface-2);
                        border-radius:var(--r-lg)}
.tm .aufg-kunden .kunde .nm{font-size:13.5px;font-weight:700;color:var(--ink);
                            overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm .aufg-kunden .kunde .nm small{display:block;color:var(--muted);font-size:12px;font-weight:600}
.tm .aufg-kunden .kunde input[type=text],.tm .aufg-kunden .kunde select{height:34px;font-size:13px}
.tm .aufg-serie-vorschau{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- Feste Unteraufgaben der Serie ---------- */
.tm .aufg-schritte{display:flex;flex-direction:column;gap:8px}
.tm .aufg-schritte .zeile{display:grid;grid-template-columns:minmax(0,1.2fr) 170px minmax(0,1fr) 74px;
                          gap:10px;align-items:center;padding:9px 12px;background:var(--surface-2);
                          border-radius:var(--r-lg)}
.tm .aufg-schritte .zeile input,.tm .aufg-schritte .zeile select{height:34px;font-size:13px}

/* ---------- Rueckgaengig-Streifen nach dem Erledigen (5 s, Ablauf 2) ---------- */
.tm .aufg-zurueck{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;
                  display:flex;align-items:center;gap:14px;padding:11px 18px;border-radius:var(--r-pill);
                  background:var(--surface);box-shadow:var(--shadow-3);font-size:13.5px;font-weight:700;
                  color:var(--ink)}
.tm .aufg-zurueck button{border:none;background:none;padding:0;cursor:pointer;font:inherit;
                         font-weight:800;color:var(--gold-text)}
.tm .aufg-zurueck button:hover{text-decoration:underline}

/* ---------- Unter 900 px: Blatt einspaltig; unter 700 px schmale Geraete ---------- */
@media (max-width:900px){
  .tm .aufg-kunden .kunde{grid-template-columns:22px minmax(0,1fr);row-gap:8px}
  .tm .aufg-kunden .kunde select,.tm .aufg-kunden .kunde input[type=text]{grid-column:2}
  .tm .aufg-schritte .zeile{grid-template-columns:minmax(0,1fr);row-gap:8px}
}
@media (max-width:700px){
  .tm .aufg-gruppe{padding:14px 16px 8px}
  .tm .aufg-c-bezug,.tm th.aufg-c-bezug{display:none}
  .tm .aufg-c-zust,.tm th.aufg-c-zust{display:none}
  .tm .aufg-baum{margin-left:0;padding-left:10px}
  .tm .aufg-zurueck{left:12px;right:12px;transform:none;justify-content:space-between}
}

/* ============================================================================
   KALENDER (BP-08)
   ============================================================================
   Kopfleiste, Wochenraster, Chips, Tagesliste, Ablagezone. Nur Tokens, kein
   Farbwert; hell und dunkel kommen aus tokens.css. Runde Ecken auf jeder
   Flaeche mit eigenem Grund (Regel Haris 03.09.2026), Streifen nur ueber die
   bestehenden .streifen-* (Regel 18) — die Familien hier sind FLAECHEN fuer
   Kategorien, nie Kanten. Auswahl und Hover sind ebenfalls Flaechen, nie ein
   Ring in einer Zustandsfarbe (Regel 18, Nachtrag 04.09.2026).
   Unter 900 px wird die Woche zur Tagesliste (BP-08 Abschnitt 6).
   ============================================================================ */

.tm{--kal-stunde:46px}

/* ---------- Kopfleiste ---------- */
.tm .kal-kopf-karte{margin-bottom:16px}
.tm .kal-kopf{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:14px 18px}
.tm .kal-nav{display:flex;gap:6px;align-items:center}
.tm .kal-spanne{font-weight:800;font-size:15px;letter-spacing:-.01em;color:var(--ink);
                margin-right:auto;white-space:nowrap}
.tm .kal-sichten{display:inline-flex;gap:2px;padding:3px;background:var(--surface-sunken);
                 border-radius:var(--r-pill)}
.tm .kal-sicht{display:inline-flex;align-items:center;padding:6px 14px;border-radius:var(--r-pill);
               font-size:13px;font-weight:700;color:var(--ink-2);text-decoration:none}
.tm .kal-sicht:hover{background:var(--row-hover);color:var(--ink)}
.tm .kal-sicht.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}
.tm .kal-datum{display:flex;gap:8px;align-items:center;margin:0}
.tm .kal-datum input[type=date]{min-width:150px}

/* Ebenen-Haken als Legendenreihe */
.tm .kal-ebenen{padding:0 18px 14px;gap:14px}
.tm .kal-ebene{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
               color:var(--ink-2);cursor:pointer;user-select:none}
.tm .kal-ebene input{margin:0}
.tm .kal-f{width:12px;height:12px;border-radius:5px;flex:0 0 auto;
           box-shadow:inset 0 0 0 1px var(--line-2)}
.tm .kal-f.f-gold{background:var(--gold-soft)}
.tm .kal-f.f-info{background:var(--info-soft)}
.tm .kal-f.f-good{background:var(--good-soft)}
.tm .kal-f.f-crit{background:var(--crit-soft)}
.tm .kal-f.f-amber{background:var(--amber-soft)}
.tm .kal-f.f-plum{background:var(--plum-soft)}
.tm .kal-f.f-rose{background:var(--rose-soft)}
.tm .kal-f.f-ink,.tm .kal-f.f-muted{background:var(--surface-sunken)}

/* ---------- Chips im Raster ---------- */
.tm .kal-termin{display:flex;flex-direction:column;gap:1px;padding:3px 7px;border-radius:var(--r-md);
                font-size:11.5px;font-weight:700;line-height:1.3;text-decoration:none;
                background:var(--surface-sunken);color:var(--ink-2);overflow:hidden;
                print-color-adjust:exact;-webkit-print-color-adjust:exact}
.tm a.kal-termin:hover{filter:brightness(.97)}
.tm .kal-termin .kt-t{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm .kal-termin .kt-z{font-variant-numeric:tabular-nums;margin-right:4px;font-weight:800}
.tm .kal-termin .kt-o{display:block;font-weight:600;color:var(--muted);font-size:10.5px;
                      overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm .kal-termin .kt-schloss{font-size:10px;line-height:1}
.tm .kal-termin.f-gold{background:var(--gold-soft);color:var(--gold-on-soft)}
.tm .kal-termin.f-info{background:var(--info-soft);color:var(--info-on-soft)}
.tm .kal-termin.f-good{background:var(--good-soft);color:var(--good-on-soft)}
.tm .kal-termin.f-crit{background:var(--crit-soft);color:var(--crit-on-soft)}
.tm .kal-termin.f-amber{background:var(--amber-soft);color:var(--amber-on-soft)}
.tm .kal-termin.f-plum{background:var(--plum-soft);color:var(--plum-on-soft)}
.tm .kal-termin.f-rose{background:var(--rose-soft);color:var(--rose-on-soft)}
.tm .kal-termin.f-ink,.tm .kal-termin.f-muted{background:var(--surface-sunken);color:var(--muted)}
.tm .kal-termin.abgesagt{opacity:.72}
.tm .kal-termin.abgesagt .kt-t{text-decoration:line-through}
.tm .kal-termin.verdeckt{background:var(--surface-sunken);color:var(--muted);font-style:italic}
.tm .kal-termin.ziehbar{cursor:grab}
.tm .kal-termin.zieht{opacity:.5}
.tm .kal-mehr{display:inline-block;font-size:10.5px;font-weight:800;color:var(--muted);
              text-decoration:none;padding:1px 6px;border-radius:var(--r-pill);
              background:var(--surface-sunken)}
.tm .kal-mehr:hover{color:var(--ink)}

/* ---------- Monatsraster (auf .cal/.cell aus dem Zeit-Report) ---------- */
.tm .cal.kal-monat{gap:7px}
.tm .kal-zelle{min-height:104px;display:flex;flex-direction:column;gap:4px;padding:6px 7px;
               transition:none}
.tm .kal-zelle:hover{transform:none;background:var(--row-hover)}
.tm .kal-zelle .dn{position:static;font-weight:800;font-variant-numeric:tabular-nums;
                   color:var(--ink-2);text-decoration:none;align-self:flex-start;
                   padding:1px 5px;border-radius:var(--r-pill)}
.tm .kal-zelle .dn:hover{background:var(--row-hover);color:var(--ink)}
.tm .kal-zelle.kal-heute .dn{background:var(--gold-soft);color:var(--gold-on-soft)}
.tm .kal-zelle.kal-sonntag{background:var(--surface-2)}
.tm .kal-chips{display:flex;flex-direction:column;gap:3px;min-height:0}
.tm .kal-zelle.ueber{background:var(--row-hover)}

/* ---------- Wochenraster ---------- */
.tm .kal-woche{padding:0 0 8px;overflow-x:auto;overscroll-behavior:contain}
.tm .kw-kopf,.tm .kw-ganz{display:grid;grid-template-columns:62px repeat(7,minmax(96px,1fr));
                          gap:6px;padding:12px 16px 0}
.tm .kw-ganz{padding-top:8px;padding-bottom:10px;align-items:start}
.tm .kw-tagkopf{text-align:center;padding:6px 4px;border-radius:var(--r-md)}
.tm .kw-tagkopf a{text-decoration:none;color:var(--ink-2);display:block}
.tm .kw-tagkopf .kw-dow{display:block;font-size:10.5px;font-weight:800;letter-spacing:.12em;
                        text-transform:uppercase;color:var(--muted)}
.tm .kw-tagkopf .kw-dn{display:block;font-size:14px;font-weight:800;
                       font-variant-numeric:tabular-nums;color:var(--ink)}
.tm .kw-tagkopf.on{background:var(--gold-soft)}
.tm .kw-tagkopf.on .kw-dn,.tm .kw-tagkopf.on .kw-dow{color:var(--gold-on-soft)}
.tm .kw-tagkopf.feier{background:repeating-linear-gradient(45deg,var(--surface-sunken),
       var(--surface-sunken) 6px,var(--surface-2) 6px,var(--surface-2) 12px)}
.tm .kw-feier{display:block;font-size:10px;font-weight:700;color:var(--muted);
              overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm .kw-label{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
              color:var(--muted);padding-top:4px}
.tm .kw-ganzfeld{display:flex;flex-direction:column;gap:3px;min-height:26px;padding:3px;
                 border-radius:var(--r-md)}

.tm .kw-netz{display:grid;grid-template-columns:62px repeat(7,minmax(96px,1fr));gap:6px;
             padding:0 16px;position:relative}
.tm .kw-stunden{display:flex;flex-direction:column}
.tm .kw-stunde{font-size:10.5px;font-weight:700;color:var(--muted);
               font-variant-numeric:tabular-nums;text-align:right;padding-right:6px;
               transform:translateY(-6px)}
.tm .kw-spalte{position:relative;background:var(--surface-sunken);border-radius:var(--r-md);
               overflow:hidden}
.tm .kw-linie{display:block;text-decoration:none;box-shadow:inset 0 -1px 0 var(--line-2)}
.tm .kw-linie:hover{background:var(--row-hover)}
.tm .kw-spalte.ueber{background:var(--row-hover)}
.tm .kw-block{position:absolute;left:3px;right:3px;display:flex}
.tm .kw-block>.kal-termin{flex:1;justify-content:flex-start}
.tm .kw-gebet{position:absolute;left:0;right:0;height:0;
              box-shadow:0 0 0 .5px var(--line-2);pointer-events:none}
.tm .kw-gebet span{position:absolute;right:3px;top:-8px;font-size:9.5px;font-weight:800;
                   letter-spacing:.04em;color:var(--muted);background:var(--surface-sunken);
                   padding:0 4px;border-radius:var(--r-pill)}
.tm .kw-jetzt{position:absolute;left:0;right:0;height:2px;background:var(--gold);
              border-radius:var(--r-pill);pointer-events:none;
              print-color-adjust:exact;-webkit-print-color-adjust:exact}

/* ---------- Tagesliste ---------- */
.tm .kal-tag{padding:6px 0 10px}
.tm .kal-tagkopf{display:flex;justify-content:space-between;align-items:center;gap:12px;
                 padding:12px 18px 10px}
.tm .kal-zeile{display:flex;gap:12px;align-items:flex-start;padding:7px 18px;
               border-radius:var(--r-md)}
.tm .kal-zeile:hover{background:var(--row-hover)}
.tm .kal-zeile .kz-zeit{flex:0 0 78px;font-size:12px;font-weight:800;color:var(--muted);
                        font-variant-numeric:tabular-nums;padding-top:3px}
.tm .kal-zeile .kz-inhalt{flex:1;min-width:0}
.tm .kal-zeile .kal-termin{font-size:13px;padding:6px 10px}
.tm .kal-zeile.kal-gebet .kz-inhalt{font-size:12.5px;font-weight:700;color:var(--muted);
                                    padding-top:3px}

/* ---------- Ablagezone beim Ziehen (Flaeche, kein Ring — Regel 18) ---------- */
.tm .kal-ziehen.ueber{background:var(--row-hover)}

/* ---------- Rueckgaengig-Band (5 Sekunden, Fachregel 10) ---------- */
.tm .kal-undo{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;
              display:flex;gap:12px;align-items:center;padding:10px 16px;
              background:var(--surface);color:var(--ink);border-radius:var(--r-lg);
              box-shadow:var(--shadow-3);font-size:13px;font-weight:700}

/* ---------- Rueckfrage bei einer Serie (nur dieser Tag / alle kuenftigen) --- */
.tm .kal-seriefrage{background:var(--surface-sunken);border-radius:var(--r-lg);box-shadow:none}

/* ---------- Kleinteile der Blaetter ---------- */
.tm .kal-daten{display:grid;gap:7px}
.tm .kal-daten>div{display:flex;gap:12px;align-items:baseline}
.tm .kal-daten .kd-l{flex:0 0 118px;font-size:11.5px;font-weight:800;letter-spacing:.06em;
                     text-transform:uppercase;color:var(--muted)}
.tm .kal-daten .kd-w{font-weight:600;color:var(--ink)}
.tm .kal-feldfehler{display:block;font-size:12px;font-weight:700;color:var(--crit)}
.tm .kal-zeitfeld input[type=time]{min-width:110px}
.tm .kal-abo-neu{background:var(--surface-sunken);border-radius:var(--r-lg);padding:14px 16px;
                 margin-bottom:14px}
.tm .kal-abo-neu label{font-size:12px;font-weight:700;color:var(--ink-2)}
.tm .kal-gebet-wort{font-weight:600;color:var(--ink-2)}

/* ---------- Mobil: die Woche wird zur Tagesliste (unter 900 px) ---------- */
.tm .kal-nur-mobil{display:none}
@media (max-width:900px){
  .tm .kal-woche{display:none}
  .tm .kal-nur-mobil{display:block}
  .tm .kal-spanne{margin-right:0;width:100%}
}
@media (max-width:700px){
  .tm .kal-kopf{padding:12px 14px;gap:10px}
  .tm .kal-ebenen{padding:0 14px 12px;gap:10px}
  .tm .kal-datum{width:100%}
  .tm .kal-datum input[type=date]{flex:1;min-width:0}
  .tm .cal.kal-monat{gap:4px;padding:12px 10px}
  .tm .kal-zelle{min-height:74px;padding:4px 5px}
  .tm .kal-zelle .kal-termin{font-size:10.5px;padding:2px 5px}
  .tm .kal-zelle .kt-o{display:none}
  .tm .kal-zeile{padding:7px 14px}
  .tm .kal-zeile .kz-zeit{flex:0 0 62px}
}


/* ============================================================================
   PORTAL (BP-10) — Kundenportal, Bau 04.09.2026
   ----------------------------------------------------------------------------
   Das Portal ist ein EIGENER Bereich mit einer EIGENEN Seitenleiste
   (Entscheidung Haris, 04.09.2026). Sie heisst `.portal-rail` und ist ein
   eigener Baustein: sie benutzt `.tm-rail` des ERP nicht, uebernimmt aber
   dessen Masse und Verhalten — 250 px, eingeklappt 74 px mit Symbolen und
   `title`, gleiche Zeilenhoehen in beiden Zustaenden, Laufleiste nur bei
   Mausberuehrung, unter 900 px eine Kopfleiste mit Menueknopf. Der Zustand
   liegt im localStorage unter `tm2.portal.rail` und steht als
   `html[data-prail="zu"]` VOR dem ersten Zeichnen (Regel 17, das Skript sitzt
   in module/portal/rahmen.php).

   Eine Ausnahme, bewusst: der Logoblock traegt zusaetzlich `tm-rail-logo`.
   Daran misst `_werkzeuge/ecken_pruefen.js` das Kopfband (Kriterium 15), und
   er bekommt damit genau die Masse der ERP-Schiene (Hoehe --kopf-raum, Breite
   100 %, Schatten und Auslauf). Damit der Klappzustand der ERP-Schiene nicht
   ins Portal hineinreicht, entfernt das Portal-Skript `data-rail` am <html>.

   Wie ueberall: nur Token aus tokens.css, kein Farbwert, kein Pixel-Radius auf
   einer Flaeche. Portalseiten tragen KEIN `style="…"`-Attribut — die
   Inhaltssicherheitsregel des Portals (`style-src 'self'`) laesst keines zu;
   alles Sichtbare kommt darum aus den Klassen hier.
   ========================================================================== */

/* ---------- Raster ---------- */
.tm-app.portal-app{grid-template-columns:var(--prail-w,var(--rail-offen)) 1fr}
html[data-prail="zu"]{--prail-w:74px}
.portal-app .tm-main{min-width:0}

/* ---------- Die Leiste ---------- */
.portal-rail{background:var(--rail-bg);display:flex;flex-direction:column;gap:0;
  position:sticky;top:0;align-self:start;height:100vh;z-index:60;overflow:visible;padding:0}

/* Der Logoblock erbt seine Geometrie von .tm-rail-logo (Kopfband, --kopf-raum).
   Hier steht nur, was das Portal anders macht: die Breite bleibt in BEIDEN
   Zustaenden 100 % der Leiste, und eingeklappt bleibt nur das Zeichen. */
.portal-rail .portal-rail-logo{width:100%;text-decoration:none;color:var(--ink)}
.portal-rail .portal-rail-logo:hover{text-decoration:none}
html[data-prail="zu"] .portal-rail .portal-rail-logo{padding-left:17.5px}
html[data-prail="zu"] .portal-rail .portal-rail-logo>span:not(.mk){display:none}

/* Menue: der einzige Scrollbereich der Leiste; Logo und Fuss stehen fest.
   Laufleiste links (rtl-Trick). Ihre Optik und die reservierte Rinne standen
   bis V3.7.30 hier noch einmal eigens — mit V3.8.0 (14.09.2026) ENTFERNT: es
   gibt EINE Regel fuer alle Scrollbereiche am Dateiende („Scrollbalken — eine
   Regel"), und das Portal gehoert dazu. */
.portal-rail-menue{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  direction:rtl;padding:0 10px 12px 4px;
  display:flex;flex-direction:column;gap:3px}
.portal-rail-menue>*{direction:ltr}
html[data-prail="zu"] .portal-rail-menue{padding:0 6px 12px 4px}

/* ---------- Ein Eintrag: eine Zeile, in beiden Zustaenden gleich hoch ---------- */
.tm .portal-rail-item{display:flex;align-items:center;gap:11px;padding:10px 12px;
  border-radius:var(--r-lg);font-family:var(--font);font-size:13.5px;font-weight:700;
  color:var(--rail-ink);text-decoration:none;cursor:pointer;white-space:nowrap;
  border:0;background:none;width:100%;text-align:left;
  transition:background var(--t-fast),color var(--t-fast)}
.tm .portal-rail-item:hover{background:var(--rail-hover);color:var(--ink);text-decoration:none}
.tm .portal-rail-item.on{background:var(--rail-active-bg);color:var(--rail-active-ink);
  box-shadow:var(--rail-active-shadow)}
.tm .portal-rail-item .ic{width:32px;height:32px;border-radius:var(--r-md);display:grid;
  place-items:center;flex:0 0 auto;background:var(--surface-sunken);color:var(--ink-2)}
.tm .portal-rail-item .ic svg{width:17px;height:17px;stroke-width:2.2;fill:none;
  stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.tm .portal-rail-item.on .ic{background:var(--gold);color:var(--gold-ink)}
/* Die Auslassung gehoert an die Beschriftung, nie an die Zeile (V3.7.12). */
.tm .portal-rail-item .t{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* Eingeklappt: die Beschriftung verschwindet, die Zeilenhoehe bleibt — sie
   haengt am 32-px-Symbol, nicht am Text. */
html[data-prail="zu"] .tm .portal-rail-item,
html[data-prail="zu"] .portal-rail .portal-rail-item{justify-content:center;padding:10px 0;gap:0}
html[data-prail="zu"] .portal-rail .portal-rail-item .t{display:none}

/* ---------- Fuss: Sprache, Hell/Dunkel, Abmelden, Einklappen ---------- */
.portal-rail-fuss{flex:0 0 auto;padding:10px 10px 16px 14px;display:flex;
  flex-direction:column;gap:3px;background:none}
.portal-rail-fuss form{margin:0}
html[data-prail="zu"] .portal-rail-fuss{padding:10px 6px 16px 4px}

/* Der Hell/Dunkel-Knopf ist derselbe Baustein wie im ERP (.tm-theme, damit
   theme.js ihn findet), sitzt hier aber als Zeile in der Leiste. */
.tm .portal-rail .tm-theme{width:100%;height:auto;border-radius:var(--r-lg);
  background:none;box-shadow:none;display:flex}
.tm .portal-rail .tm-theme:hover{transform:none;background:var(--rail-hover);color:var(--ink)}
.tm .portal-rail .tm-theme svg{width:17px;height:17px}
.tm .portal-rail .tm-theme .moon{display:none}
[data-theme="dark"] .tm .portal-rail .tm-theme .moon{display:block}
[data-theme="dark"] .tm .portal-rail .tm-theme .sun{display:none}

/* Der Sprachknopf der Leiste ist ein Absende-Knopf — und die Grundregel im
   Abschnitt EINGABEN macht aus jedem `button[type=submit]` einen dunklen
   Knopf. In der Leiste ist er aber eine Zeile wie jede andere. Die Regel hier
   traegt dieselben Ausnahmen wie die Grundregel und dazu den Ort, damit sie
   gewinnt — die Grundregel selbst bleibt unangetastet. */
.tm .portal-rail form .portal-rail-item[type=submit]:not(.btn):not(.act):not(.accept):not(.linkbtn):not(.tm-theme){
  background:none;color:var(--rail-ink);box-shadow:none;border:0;
  border-radius:var(--r-lg);padding:10px 12px;width:100%;
  font-family:var(--font);font-size:13.5px;font-weight:700;
  display:flex;align-items:center;gap:11px;justify-content:flex-start}
.tm .portal-rail form .portal-rail-item[type=submit]:not(.btn):not(.act):not(.accept):not(.linkbtn):not(.tm-theme):hover{
  background:var(--rail-hover);color:var(--ink)}
html[data-prail="zu"] .tm .portal-rail form .portal-rail-item[type=submit]:not(.btn):not(.act):not(.accept):not(.linkbtn):not(.tm-theme){
  justify-content:center;padding:10px 0;gap:0}

.tm .portal-rail-klapp{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;
  border:0;background:none;border-radius:var(--r-lg);font-family:var(--font);font-size:12.5px;
  font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap;
  transition:background var(--t-fast),color var(--t-fast)}
.tm .portal-rail-klapp:hover{background:var(--rail-hover);color:var(--ink)}
.tm .portal-rail-klapp .ic{width:32px;height:32px;border-radius:var(--r-md);display:grid;
  place-items:center;flex:0 0 auto;background:var(--surface-sunken);color:var(--ink-2)}
.tm .portal-rail-klapp .ic svg{width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-fast)}
html[data-prail="zu"] .tm .portal-rail-klapp .ic svg{transform:rotate(180deg)}
html[data-prail="zu"] .tm .portal-rail-klapp{justify-content:center;padding:10px 0;gap:0}
html[data-prail="zu"] .tm .portal-rail-klapp .t{display:none}

/* ---------- Kopfleiste unter 900 px ---------- */
/* Rand zu Rand wie das Kopfband — deshalb ohne eigenen Radius (die Regel
   „Runde Ecken ueberall" nimmt Flaechen von Rand zu Rand aus). */
.portal-kopfleiste{display:none;align-items:center;gap:12px;padding:10px var(--gutter);
  background:var(--surface);box-shadow:var(--shadow-1)}
.portal-kopfname{font-weight:800;font-size:14px;color:var(--ink)}
.tm .portal-menueknopf{width:40px;height:40px;border:0;border-radius:var(--r-md);
  background:var(--surface-sunken);color:var(--ink-2);cursor:pointer;display:grid;
  place-items:center;gap:4px;padding:9px 10px}
.tm .portal-menueknopf span{display:block;width:18px;height:2px;border-radius:var(--r-pill);
  background:currentColor}

/* ---------- Inhalt ---------- */
.tm .portal-titel{margin:0;font-size:21px;font-weight:800;letter-spacing:-.02em}
.tm .portal-band{margin-bottom:16px}
.tm .portal-fett{font-weight:600}
.tm .portal-schmal{max-width:760px}
.tm .portal-spalte{display:grid;gap:16px;align-content:start}
.tm .portal-filter{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;padding:16px 18px}
.tm .portal-weit{flex:1 1 240px;min-width:200px}
.tm .portal-formgrid{display:grid;gap:12px;padding:18px 22px}
.tm .portal-form{display:grid;gap:12px}
.tm .portal-breit{width:100%}
.tm .portal-h1{margin:0 0 8px;font-size:20px;font-weight:800;letter-spacing:-.02em}
.tm .portal-sub{color:var(--ink-2);font-size:14px;margin:0 0 16px}
.tm .portal-text{white-space:normal;line-height:1.55}
.tm .portal-fussnote{color:var(--muted);font-size:12.5px;margin:0}
.tm .portal-fuss{color:var(--muted);font-size:12.5px;margin:26px 0 0;text-align:center}
.tm .portal-fehler{background:var(--crit-soft);color:var(--crit-on-soft);font-weight:700;
  border-radius:var(--r-md);padding:10px 14px;margin:0 0 14px;font-size:13.5px}
.tm .portal-versteckt{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.tm .portal-zeilenform{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 6px}
.tm .portal-menge{width:110px}
.tm .portal-klein{font-size:12.5px;padding:6px 8px}
.tm .portal-haken{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  color:var(--ink-2);margin:2px 0}
.tm .portal-kopfdaten{display:flex;gap:26px;flex-wrap:wrap;padding:16px 22px}
.tm .portal-etikett{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:800;color:var(--muted);margin-bottom:3px}
.tm .portal-kartons{color:var(--ink-2);font-size:12.5px;font-weight:700}
.tm .portal-eigenpreis{white-space:nowrap}
.tm .portal-kondliste{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px}
.tm .portal-kondliste dt{font-size:12px;font-weight:800;color:var(--muted);margin:0}
.tm .portal-kondliste dd{margin:0;font-size:13.5px;color:var(--ink)}

/* Stufe am Bestand: eine Familienfarbe am Chip, kein Zeilenstreifen — es ist
   eine Menge, kein Zustand (BP-10 Fachregel 17). */
.tm .portal-stufe{white-space:nowrap}
.tm .tag.t-amber,.tm .badge.t-amber,.tm .chip.t-amber{background:var(--amber-soft);color:var(--amber-on-soft)}
.tm .tag.t-ink,.tm .badge.t-ink,.tm .chip.t-ink{background:var(--surface-sunken);color:var(--ink-2)}
.tm td .t-amber{color:var(--amber-on-soft)}

/* ---------- Bilder ---------- */
.tm .portal-bilder{align-items:start}
.tm .portal-baum-eintrag{display:block;padding:8px 11px;border-radius:var(--r-md);
  font-size:13px;font-weight:700;color:var(--ink-2);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm .portal-baum-eintrag:hover{background:var(--row-hover);color:var(--ink);text-decoration:none}
.tm .portal-baum-eintrag.on{background:var(--row-sel,var(--surface-sunken));color:var(--ink)}
.tm .portal-kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.tm .portal-bild{display:block;position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface-sunken);cursor:pointer;padding-bottom:8px}
.tm .portal-bild img{display:block;width:100%;height:150px;object-fit:cover;
  border-radius:var(--r-lg) var(--r-lg) 0 0}
.tm .portal-bild-name{display:block;padding:7px 10px 0;font-size:12px;font-weight:700;
  color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm .portal-bild input[type=checkbox]{position:absolute;top:8px;left:8px;width:18px;height:18px}
.tm .portal-leiste{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* ---------- Anmeldung und Meldungen ---------- */
.tm.portal-schlicht{display:grid;place-items:center;min-height:100vh;padding:20px}
.tm .portal-mitte{width:100%;max-width:440px}
.tm .portal-karte{width:100%}
.tm .portal-marke{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.tm .portal-marke-bild{width:46px;height:46px;border-radius:var(--r-lg);
  background:var(--rail-logo-bg);display:grid;place-items:center;flex:0 0 auto}
.tm .portal-marke-bild img{width:28px}
.tm .portal-marke-n{display:block;font-size:15px;font-weight:800;line-height:1.15}
.tm .portal-marke-s{display:block;font-size:10px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-text);margin-top:2px}

/* ---------- Schmale Bildschirme ---------- */
@media(max-width:900px){
  .tm-app.portal-app{grid-template-columns:1fr}
  html[data-prail="zu"]{--prail-w:var(--rail-offen)}
  .portal-kopfleiste{display:flex;position:sticky;top:0;z-index:70}
  .portal-rail{display:none;position:fixed;top:0;left:0;bottom:0;width:var(--rail-offen);
    height:100vh;background:var(--surface);box-shadow:var(--shadow-3);z-index:80}
  html[data-prail-offen] .portal-rail{display:flex}
  /* Unter 900 px ist die Leiste immer voll — auch wenn sie am Rechner
     eingeklappt war. Darum dieselbe Spezifitaet wie die Einklapp-Regeln
     oben, nur spaeter in der Datei. */
  html[data-prail="zu"] .portal-rail .portal-rail-logo{padding-left:17px}
  html[data-prail="zu"] .portal-rail .portal-rail-logo>span:not(.mk){display:block}
  html[data-prail="zu"] .portal-rail .portal-rail-item{justify-content:flex-start;padding:10px 12px;gap:11px}
  html[data-prail="zu"] .portal-rail .portal-rail-item .t{display:inline}
  html[data-prail="zu"] .portal-rail-menue{padding:0 10px 12px 4px}
  .tm .portal-rail-klapp,html[data-prail="zu"] .tm .portal-rail-klapp{display:none}
}
@media(max-width:700px){
  .tm .portal-kopfdaten{gap:16px}
  .tm .portal-kacheln{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .tm .portal-kondliste{grid-template-columns:1fr;gap:2px 0}
  .tm .portal-kondliste dd{margin-bottom:8px}
}

/* ---------- Druck: farbig, A4, ohne Leiste (Regel „Druckansichten farbig") ---------- */
@page portal{size:A4;margin:14mm}
.tm-app.portal-app{page:portal}
@media print{
  .portal-rail,.portal-kopfleiste,.portal-nichtdrucken,.portal-fuss{display:none}
  .tm-app.portal-app{grid-template-columns:1fr}
  .portal-app .tm-main{padding:0}
  /* Jede Flaeche, die auf Papier sichtbar bleiben soll, braucht die Marke —
     sonst laesst der Browser die Hintergrundfarbe weg. Bis zum Korrekturlauf 1
     standen hier nur Stufe und Druckkopf; der Chip „Listenpreis" (.tag.t-gold),
     der Tabellenkopf und die Kartenflaeche der Druckfassung fielen darum weiss
     aus (Gegenlesung 04.09.2026, Befund 11). */
  .portal-app .card,.portal-app .tag,.portal-app .postab thead th,
  .tm .portal-stufe,.tm .portal-druckkopf{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  /* Am Bildschirm schiebt `.tscroll` eine breite Tabelle seitlich; auf Papier
     gibt es kein Schieben — dort wuerde die letzte Spalte („Ihr Preis")
     abgeschnitten. Im Druck darf die Tabelle darum umbrechen statt zu laufen
     (gemessen an der Druckprobe vom 04.09.2026). */
  .portal-app .tscroll{overflow:visible}
  .portal-app .postab{width:100%;table-layout:auto;font-size:12px}
  /* Umbrechen darf der Fliesstext (Name), nicht die Zahlen: eine EAN oder eine
     Artikelnummer mitten im Wort zu trennen macht sie unlesbar. */
  .portal-app .postab th,.portal-app .postab td{white-space:normal}
  .portal-app .postab th.tr-r,.portal-app .postab td.mono{white-space:nowrap}
}

/* ==========================================================================
   ===== MOBIL (BP-31, M1) =====
   Handy- und Tablet-Ansicht des ganzen Systems (Bauplan BP-31, Etappe M1:
   Kern + Startseite + Lager). Bau 04.09.2026, Designsprache V3.7.25.

   DIE ZWEI UMBRUCHBREITEN — sie stehen NUR HIER; CSS-Medienabfragen kennen
   keine Variablen, darum als Kommentar-Konstante (Fachregel 1):

       UMBRUCH A = 900 px   Schiene verlaesst das Raster, Menue-Knopf erscheint
                            (Entscheidung Haris 04.09.2026, Frage 1 b)
       UMBRUCH B = 700 px   alles einspaltig (00_Rahmen: „bedienbar unter 700 px")

   Drei Baender ergeben sich daraus:

       ueber 1150 px        unveraendert — Schiene im Raster, 250 px oder
                            eingeklappt 74 px, wie der Benutzer sie gelassen hat
       900 – 1150 px        Schiene bleibt im Raster, aber EINGEKLAPPT (74 px,
                            nur Symbole). Den Zustand setzt das Skript
                            (tm_design.php vor dem ersten Zeichnen, layout.php
                            beim Groessenwechsel) ueber html[data-rail="zu"] —
                            so gelten hier ALLE vorhandenen Klapp-Regeln
                            (V3.6.0/V3.6.1/V3.6.2/V3.7.9/V3.7.12/V3.7.16)
                            unveraendert, ohne eine einzige Zeile Doppelpflege.
       unter 900 px         Schiene faellt aus dem Raster und wird zur SCHICHT
                            ueber dem Inhalt: links, volle Hoehe, ausserhalb des
                            Bildes, hereingeschoben von html[data-menue="auf"]
                            (Skript) oder .tm-rail:target (ohne Skript).

   REGELN DIESES ABSCHNITTS (Fachregel 14): nur Tokens, kein Farbwert, kein
   border-left, kein border-radius:0. `!important` steht genau dort, wo es
   heute schon gegen ein Inline-`style` stehen muss (.tm-tiles[style]) — sonst
   nirgends.

   JE MODUL EIN UNTERABSCHNITT (Fachregel 1): ein Modul schreibt seine
   Umbruchregeln hier hinein, hinter einen Kommentar mit seinem Namen — nicht
   in seine Seite und nicht in einen eigenen <style>-Block.
   ========================================================================== */

/* ==========================================================================
   1 · KERN — Menue-Knopf, Schliessen-Knopf, Schleier (Bausteine)
   ==========================================================================
   Die drei Bausteine stehen IMMER im Markup (layout.php) und sind oberhalb von
   Umbruch A unsichtbar — das ist die eine erlaubte Abweichung vom
   byte-gleichen Desktop (Bauplan §5 Nr. 13). Kein zweites Menue, kein zweites
   Markup je Seite. */

/* Menue-Knopf: 44 x 44, drei Striche, steht in .tm-head VOR dem Titel.
   Er ist ein LINK auf #tm2-menue — ohne JavaScript oeffnet :target die
   Schiene (Fachregel 15); mit JavaScript faengt layout.php den Klick ab. */
.tm-menue-knopf{display:none}
/* Schliessen-Knopf oben in der Schiene, neben dem Logoblock (Link auf „#"). */
.tm-rail-zu{display:none}
/* Schleier zwischen Schiene und Inhalt. `display:none` haelt ihn ausserhalb
   des Rasters von .tm-app, solange er nicht gebraucht wird. */
.tm-schleier{display:none;position:fixed;inset:0;z-index:110;background:var(--schleier);
  opacity:0;pointer-events:none;-webkit-tap-highlight-color:transparent}

/* Titel der Kopfzeile — die Masse standen bis BP-31 als style="" am <h1>
   (00_Rahmen: kein Mass in der Seite). Werte unveraendert; `min-width:0` steht
   erst im 700-px-Block (Abschnitt 4), wo die Auslassung es braucht — oberhalb
   von 1150 px unterscheidet sich damit wirklich nur das Knopf-Markup
   (Gegenlesen 05.09.2026, k-2). */
.tm .tm-kopftitel h1{margin:0;font-size:23px;letter-spacing:-.03em}

/* Namaz-Pille und Hell/Dunkel im Profilmenue (Kopf des Menues). Ueber
   Umbruch B stehen sie oben in der Kopfzeile, hier sind sie unsichtbar —
   ein Wert, zwei Orte (Vorlage Regel 19): der Menuepunkt ruft denselben
   tmTheme.toggle() wie der Knopf im Kopf. */
.tm .tm-kopfmenue .menu .tm-menue-namaz,
.tm .tm-kopfmenue .menu .tm-menue-theme{display:none}

/* ==========================================================================
   1b · Bausteine, die hier zum ersten Mal gebraucht werden
   ==========================================================================
   Sie stehen in der Designsprache, nicht in der Seite (00_Rahmen: „Fehlt ein
   Baustein, wird er in tm_design ergaenzt"). */
/* Zweispaltiges Formularraster — loest die style=""-Raster der Modulseiten ab
   (Fachregel 6; die drei Inline-<style>-Bloecke der Auftrags- und Kundenseiten
   folgen in Etappe M2). */
.tm .formraster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tm .formraster>.breit{grid-column:1/-1}
/* Hell/Dunkel als Punkt im Profilmenue (unter 700 px sichtbar, Abschnitt 4).
   Optik der Menuepunkte daneben — nur Tokens, kein Farbwert. Sichtbar/
   unsichtbar entscheidet Abschnitt 1 bzw. 4, hier steht nur das Aussehen. */
.tm .tm-kopfmenue .menu .tm-menue-theme{width:100%;text-align:left;border:none;background:none;
  padding:9px 12px;border-radius:var(--r-md);font-family:var(--font);font-size:13.5px;
  font-weight:600;color:var(--ink);cursor:pointer}
.tm .tm-kopfmenue .menu .tm-menue-theme:hover{background:var(--surface-sunken)}
/* Karte in Lesebreite (Konto, Passwort, Zwei-Faktor) — bisher style="max-width:440px". */
.tm .karte-schmal{max-width:440px}
/* Die Reihe im Abschluss der Kommissionierung (Kartons · Feld · Knopf) —
   bisher style="display:flex;gap:22px;flex-wrap:wrap;align-items:end". */
.tm .packrow{display:flex;gap:22px;align-items:flex-end;flex-wrap:wrap}
.tm .packfeld{max-width:260px}
/* Seite ohne Schiene (Anmeldung, Code-Schritt, Kiosk — seite_schlicht_start):
   Das Raster hatte eine Spalte in INHALTSbreite. Die Karte darin ist 380 px
   breit, also war es die Spalte auch — bei 375 px Fenster schob sich die Seite
   seitwaerts, und `max-width:100%` an der Karte lief ins Leere (es rechnete
   gegen dieselben 380 px). Eine Spalte in FENSTERbreite loest beides: die
   Karte bleibt 380 px, solange Platz ist, und schrumpft sonst mit.
   `justify-items` bleibt bei `center` aus dem Inline-Stil der Seite. */
.tm.tm-schlicht{grid-template-columns:minmax(0,1fr)}

/* ==========================================================================
   2 · KERN — 900 bis 1150 px: Schiene bleibt im Raster
   ==========================================================================
   Loest die beiden abgeloesten Zeilen der RESPONSIV-Regel (Zeile ~296) ab:
   das Raster behaelt seine Schienenspalte, ihre Breite kommt wie immer aus
   --rail-w (250 px offen, 74 px eingeklappt). */
@media (max-width:1150px){
  .tm-app{grid-template-columns:var(--rail-w,250px) 1fr}
}

/* ==========================================================================
   3 · KERN — unter 900 px (UMBRUCH A): Schiene als Ueberlagerung
   ========================================================================== */
@media (max-width:900px){
  /* Der Inhalt bekommt die ganze Breite. */
  .tm-app{grid-template-columns:1fr}

  /* Die Schiene liegt jetzt am Fenster, nicht im Raster. --rail-bg ist
     durchsichtig; als Schicht braucht sie einen deckenden Grund — denselben
     wie das Kopfband und wie die Vorschau am Rechner (V3.7.1/V3.7.4):
     Seitenfarbe plus Lichtschleier, an derselben Stelle im Fenster.
     100dvh statt 100vh: sonst endet sie am Handy hinter der Bildschirmtastatur
     (Fachregel 15). */
  .tm-rail{position:fixed;left:0;top:0;height:100dvh;width:min(300px,86vw);
    max-width:100%;padding:0;z-index:120;overflow:hidden;visibility:hidden;
    transform:translateX(-100%);box-shadow:none;
    background-color:var(--page);background-image:var(--page-glow);background-attachment:fixed}
  html[data-menue="auf"] .tm-rail,.tm-rail:target{transform:none;visibility:visible;box-shadow:var(--shadow-3)}
  /* Uebergang erst nach dem ersten Zeichnen (Regel 17 — die Seite springt
     nicht); bewegungsarm schaltet der Block ganz unten ihn wieder ab.
     `visibility` laeuft dabei NICHT mit, sondern springt: beim Oeffnen sofort
     (0s), beim Schliessen erst, wenn die Schiene draussen ist (Verzoegerung um
     dieselbe Dauer). Sonst waere die Schiene im ersten Augenblick des Oeffnens
     noch unsichtbar — und der Tastaturfokus liefe ins Leere (gemessen
     04.09.2026: er blieb am <body>). */
  html.tm-bewegt .tm-rail{transition:transform var(--t-rail),box-shadow var(--t-rail),
    visibility 0s linear var(--t-rail)}
  html.tm-bewegt[data-menue="auf"] .tm-rail,html.tm-bewegt .tm-rail:target{
    transition:transform var(--t-rail),box-shadow var(--t-rail),visibility 0s}

  /* Schleier: erscheint mit der Schiene, schliesst sie beim Tippen. Ohne
     Skript ist er ein Link auf „#", der den :target-Zustand wieder aufhebt. */
  .tm-schleier{display:block}
  html[data-menue="auf"] .tm-schleier,.tm-rail:target+.tm-schleier{opacity:1;pointer-events:auto}
  html.tm-bewegt .tm-schleier{transition:opacity var(--t-rail)}

  /* Solange das Menue offen ist, scrollt der Inhalt nicht mit. Den Scrollstand
     merkt und stellt das Skript in layout.php (Regel 17). */
  html[data-menue="auf"]{overflow:hidden}

  /* Menue-Knopf sichtbar, in der Kopfzeile ganz links. */
  .tm-menue-knopf{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;padding:0;
    border:none;border-radius:var(--r-pill);background:var(--surface);color:var(--ink-2);
    box-shadow:var(--shadow-1);cursor:pointer;text-decoration:none}
  .tm-menue-knopf:hover{color:var(--ink);text-decoration:none}
  .tm-menue-knopf svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;
    stroke-linecap:round;stroke-linejoin:round}

  /* ✕ oben in der Schiene, auf der Hoehe des Logo-Zeichens (Logoblock:
     30 px oben, 44 px Zeichen). Der Logoblock macht rechts Platz dafuer. */
  .tm-rail-zu{display:grid;place-items:center;position:absolute;top:30px;right:12px;z-index:3;
    width:44px;height:44px;border-radius:var(--r-pill);background:var(--surface);color:var(--ink-2);
    box-shadow:var(--shadow-1);text-decoration:none}
  .tm-rail-zu:hover{color:var(--ink);text-decoration:none}
  .tm-rail-zu svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;
    stroke-linecap:round;stroke-linejoin:round}
  .tm-rail-logo{padding-right:68px}

  /* Klapp-Knopf und Vorschau sind hier aus: Touch kennt kein Ueberfahren, und
     eine 74-px-Schiene gibt es in der Ueberlagerung nicht (Fachregel 3). */
  .tm-rail-fuss{display:none}

  /* Sicherung, damit der gemerkte Klappzustand hier WIRKLICH nichts aendert
     (Abnahmekriterium 4) — auch wenn er einmal am <html> stehen sollte. Das
     Skript nimmt ihn unter 900 px ohnehin weg. */
  html[data-rail="zu"] .tm-rail,html[data-rail-schau] .tm-rail{
    width:min(300px,86vw);padding:0;box-shadow:none}
  html[data-menue="auf"][data-rail="zu"] .tm-rail{box-shadow:var(--shadow-3)}
  html[data-rail="zu"] .tm-rail-item{justify-content:flex-start;padding:10px 12px}
  html[data-rail="zu"] .tm-rail-item .t,html[data-rail="zu"] .tm-rail-klapp .t,
  html[data-rail="zu"] .tm-rail-group{display:block}
  html[data-rail="zu"] .tm-rail-group .t,html[data-rail="zu"] .tm-rail-subitem .t{visibility:visible}
  html[data-rail="zu"] .tm-rail-group::before,html[data-rail="zu"] .tm-rail-subitem::after{display:none}
  html[data-rail="zu"] .tm-rail-modul.auf .tm-rail-sub{display:flex;margin:2px 0 6px 21px;
    padding-left:11px;border-left:2px solid var(--line-2)}
  html[data-rail="zu"] .tm-rail-subitem{padding:7px 11px}
  html[data-rail="zu"] .tm-rail-item .cnt{position:static;margin-left:auto;width:auto;height:auto;
    padding:2px 9px;font-size:11.5px;line-height:normal;overflow:visible;box-shadow:none}
}

/* ==========================================================================
   4 · KERN — unter 700 px (UMBRUCH B): Kopfzeile in EINER Zeile
   ==========================================================================
   Entscheidung Haris 04.09.2026, Frage 4 a: Menue-Knopf · Titel · Lupe ·
   Avatar. Gebetszeit und Hell/Dunkel wandern in das Profilmenue. Die Hoehe des
   Kopfbandes bleibt --kopf-raum, Logoblock und Kopfzeile bleiben gleich hoch —
   es aendert sich nur, was in der Zeile steht. */
@media (max-width:700px){
  /* `flex-basis:0` statt `auto` ist hier Pflicht, nicht Geschmack: mit `auto`
     meldet der Titel seine volle Textbreite als Wunschgroesse an, die Zeile
     rechnet damit ueber und BRICHT UM (Lupe und Avatar rutschten bei
     „Zeiterfassungs-Report" auf eine zweite Zeile, gemessen 04.09.2026 bei
     375 px: Kopfzeile 100 statt 44 px). Mit 0 fordert er nichts an, waechst in
     den freien Platz und schneidet mit Auslassung ab. `min-width:0` gehoert
     dazu: ein Flex-Kind schrumpft sonst nie unter seine Inhaltsbreite, und die
     Auslassung im <h1> kaeme nie zum Zug. */
  .tm .tm-kopftitel{flex:1 1 0;min-width:0}
  .tm .tm-kopftitel h1{font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Gebetszeit und Hell/Dunkel oben aus, im Profilmenue an. */
  .tm .tm-head>.r>.tm-pill,.tm .tm-head>.r>.tm-theme{display:none}
  .tm .tm-kopfmenue .menu .tm-menue-namaz{display:block;margin-top:4px}
  .tm .tm-kopfmenue .menu .tm-menue-theme{display:flex;align-items:center;min-height:44px}
  /* Das Profilmenue nimmt die ganze Breite unter der Kopfzeile. Der Anker
     wandert dafuer vom Avatar auf die Kopfzeile selbst: .tm-kopfmenue wird
     `static`, damit das absolut gesetzte Menue an der stehenden .tm-head
     haengt (sie ist `position:sticky`, also ein gueltiger Anker). `top` bleibt
     dadurch „8 px unter der Kopfzeile", nur links und rechts spannt es auf. */
  .tm .tm-kopfmenue{position:static}
  .tm .tm-kopfmenue .menu{left:0;right:0;min-width:0;max-width:none;width:auto}
}

/* ==========================================================================
   5 · KERN — unter 700 px: alles untereinander (Fachregel 6)
   ==========================================================================
   Jedes Raster der Designsprache und der Module hat genau eine Spalte; die
   Rinne wird schmaler, damit der Inhalt mehr Platz bekommt. */
@media (max-width:700px){
  :root{--gutter:14px}
  .tm-main{padding:20px 14px 60px}

  /* `minmax(0,1fr)` statt `1fr`, und das ist kein Geschmack: `1fr` heisst
     `minmax(auto,1fr)` — die Spalte kann nicht schmaler werden als der Inhalt
     mindestens braucht und waechst dann ueber die Karte hinaus. Gemessen
     05.09.2026 auf `start?anpassen=1` bei 375 px: die Spalte stand auf
     340,4 px, obwohl nur 319 px Platz waren; die Zeile ragte 7 px ueber die
     Karte und wurde dort abgeschnitten (gefunden von der neuen Meldung
     „abgeschnitten in …", Gegenlesen 05.09.2026, W-2). Mit `minmax(0,1fr)`
     darf die Spalte schrumpfen; die Zeile fuellt genau die Karte. */
  .tm .cols,.tm .grid2,.tm-tiles,.tm .kpirow,.tm .actions,.tm .summary,
  .tm .pickinfo,.tm .detinfo,.tm .addrow,.tm .detgrid,.tm .twocol,
  .tm .workspace,.tm .rechtegruppen,.tm .mail-kontofelder,.tm .tm-mini-grid,
  .tm .formraster{grid-template-columns:minmax(0,1fr)}
  /* Kachelreihen mit fuenf oder sechs Kacheln setzen ihr Raster per
     inline-style (Muster zeit/report.php, auftrag/rueckstand.php). Ein
     inline-style schlaegt jede Regel — das ist die EINE Stelle, an der dieser
     Abschnitt `!important` braucht (Fachregel 14, wie V3.3.0 bei 1150/640).
     `minmax(0,1fr)` aus demselben Grund wie eine Zeile hoeher. */
  .tm .tm-tiles[style]{grid-template-columns:minmax(0,1fr)!important}

  /* Karten und Felder ueber die volle Breite. */
  .tm .karte-schmal,.tm .einst-karte{max-width:none}
  .tm .field,.tm .fg{width:100%}
  .tm .field input,.tm .field select,.tm .field textarea,
  .tm .fg input,.tm .fg select,.tm .fg textarea{width:100%}
}

/* ==========================================================================
   6 · KERN — unter 700 px: Beruehrflaechen mindestens 44 px (Fachregel 7)
   ========================================================================== */
@media (max-width:700px){
  .tm .btn,.tm .bt,.tm input[type=submit],
  .tm button[type=submit]:not(.btn):not(.act):not(.accept):not(.linkbtn):not(.tm-theme){min-height:44px}
  .tm .btn.sm,.tm .bt.sm{height:44px;padding:0 18px}
  /* Ein Textknopf ist inline und nimmt keine Mindesthoehe an — er wird dafuer
     zu einer Flaeche. */
  .tm .linkbtn{display:inline-flex;align-items:center;min-height:44px}
  .tm input[type=text],.tm input[type=number],.tm input[type=date],.tm input[type=time],
  .tm input[type=password],.tm input[type=email],.tm input[type=search],.tm input:not([type]),
  .tm input[type=month],.tm input[type=week],.tm input[type=datetime-local],.tm input[type=tel],.tm input[type=url],
  .tm select{min-height:44px}
  /* Haken und Optionen: die BESCHRIFTUNG ist die Flaeche, nicht das Kaestchen. */
  .tm .chk{min-height:44px;align-items:center}
  .tm .chk input[type=checkbox],.tm .chk input[type=radio]{width:22px;height:22px;flex:0 0 auto}
  /* Zeilen, die als Ganzes ein Link sind (Listen, Trefferseite). */
  .tm .rowlink td{padding-top:15px;padding-bottom:15px}
  /* Anpassen-Raster der Startseite (BP-25): die kleinen Knoepfe in den
     Mini-Kacheln — ✕/+ und die Pfeile des Ersatzweges. */
  .tm .tm-mini .weg,.tm .tm-mini [data-mv]{width:44px;height:44px}
  .tm .tm-mini .btn.sm{height:44px}
  /* Schiene: Haupt- und Unterpunkte, Menuepunkte des Profilmenues. */
  .tm-rail-item{min-height:44px}
  .tm .tm-rail-subitem{min-height:44px;display:flex;align-items:center}
  /* Der Aufklapp-Pfeil der Untermenues (26 px am Bildschirm) ist in der
     Ueberlagerung eine Beruehrflaeche — Klick-Abnahme 04.09.2026 (mobil_pruefen.js
     auf der Startseite: button.tm-rail-auf 26 x 26). Das Symbol bleibt gleich
     gross, nur die Flaeche waechst. */
  .tm .tm-rail-auf{min-width:44px;min-height:44px;display:grid;place-items:center}
  .tm .tm-kopfmenue .menu a,.tm .tm-kopfmenue .menu button{min-height:44px;display:flex;
    align-items:center}
  /* Zwei Knoepfe, die nicht nebeneinander passen, stehen untereinander in
     voller Breite: `flex:1 1 160px` teilt die Zeile, solange beide je 160 px
     bekommen, und bricht sonst um — dann fuellt jeder die Zeile allein
     (Fachregel 7, „wenn zwei nicht nebeneinander passen"). */
  .tm .row,.tm .modal .mf,.tm .picktask .acts,.tm .card-h,.tm .sec-h{flex-wrap:wrap}
  .tm .row>.btn,.tm .row>a.btn,.tm .modal .mf>.btn{flex:1 1 160px}
}

/* ==========================================================================
   7 · KERN — unter 700 px: Tabellen scrollen in ihrer Karte (Fachregel 8, b)
   ==========================================================================
   Entscheidung Haris 04.09.2026, Frage 2 b: die Tabelle bleibt eine Tabelle
   und schiebt sich SEITWAERTS IN IHRER KARTE; die erste Spalte bleibt stehen.
   Die SEITE scrollt dabei nie seitwaerts (Abnahmekriterium 1).

   Der Behaelter ist der, den der Bestand schon hat: `.tscroll` (V3.2.0) steht
   heute um jede Tabelle in einer Karte (Kommissionierung, Zeiterfassung,
   Trefferseite, Startseiten-Listen). `.tab-scroll` ist der gleichwertige neue
   Name fuer Seiten, die noch keinen Behaelter haben — beide tun dasselbe, es
   gibt keine zweite Bauweise. Ein Wrapper ist noetig, weil `.card` seinen
   Inhalt beschneidet (overflow:hidden) und eine Tabelle darin sonst einfach
   abgeschnitten wuerde.

   `.tab-scroll` ist neu und steht darum ohne Medienabfrage (er kommt am
   Bildschirm nirgends vor). `.tscroll` dagegen steht seit V3.2.0 um jede
   Tabelle in einer Karte — sein `overscroll-behavior-x` gehoert deshalb in den
   700-px-Block und nicht darueber: oberhalb von 1150 px darf sich nur das
   Knopf-Markup unterscheiden (Bauplan §5 Nr. 13, Gegenlesen 05.09.2026, k-1). */
.tm .tab-scroll{overflow-x:auto;overscroll-behavior-x:contain}
@media (max-width:700px){
  .tm .tscroll,.tm .tab-scroll{overflow-x:auto}
  .tm .tscroll{overscroll-behavior-x:contain}
  /* Der seitliche Innenabstand der Tabelle (12 px, Grundregel) wandert weg:
     die stehende erste Spalte klebt an `left:0`, also am linken Rand des
     Scrollbereichs — mit den 12 px daneben bliebe ein Streifen, durch den der
     scrollende Rest sichtbar waere. Der Text behaelt seinen Abstand, er kommt
     aus der Zelle selbst (13/12 px). Gemessen 04.09.2026: erste Spalte vor und
     nach `scrollLeft = 200` an derselben Stelle. */
  .tm .tscroll>table,.tm .tab-scroll>table{padding-left:0;padding-right:0}
  /* Erste Spalte steht. Die Zellen bringen ihren Grund schon mit (--row-bg,
     bei Hover --row-hover); der Tabellenkopf ist durchsichtig und bekommt den
     Grund der Karte, damit nichts darunter durchlaeuft. */
  .tm .tscroll>table>thead>tr>th:first-child,
  .tm .tab-scroll>table>thead>tr>th:first-child{position:sticky;left:0;z-index:2;
    background:var(--surface)}
  .tm .tscroll>table>tbody>tr>td:first-child,
  .tm .tab-scroll>table>tbody>tr>td:first-child{position:sticky;left:0;z-index:1}
  .tm .tscroll>table>tfoot>tr>td:first-child,
  .tm .tab-scroll>table>tfoot>tr>td:first-child{position:sticky;left:0;z-index:1}
}

/* ==========================================================================
   8 · KERN — unter 700 px: Dialoge werden zum Blatt (Fachregel 9)
   ========================================================================== */
@media (max-width:700px){
  .tm-modal-bg,.tm .modal-bg,.tm .modal-backdrop{padding:0;align-items:flex-end}
  .tm .modal{position:fixed;inset:0;max-width:none;width:100%;height:100dvh;max-height:100dvh;
    display:flex;flex-direction:column;
    border-radius:var(--r-xl) var(--r-xl) 0 0}
  .tm .modal .mh,.tm .modal>h3{flex:0 0 auto}
  .tm .modal .mc,.tm .modal .modal-body,.tm .modal .pad{flex:1 1 auto;overflow-y:auto;
    overscroll-behavior:contain;min-height:0}
  .tm .modal .mf,.tm .modal .modal-actions{flex:0 0 auto;flex-wrap:wrap;justify-content:stretch}
  .tm .modal .mf>*,.tm .modal .modal-actions>*{flex:1 1 100%}
  .tm .modal .close{min-width:44px;min-height:44px}
}

/* ==========================================================================
   9 · MODUL auftrag — Kommissionierung am Handy und Tablet (Fachregel 10)
   ==========================================================================
   Die drei Karten stehen ohnehin untereinander (.kartenfolge). Neu unter
   700 px: die Zeilen der Pick-Liste sind ZWEIZEILIG statt seitwaerts
   scrollend (Ausnahme in Fachregel 8 — das ist der Lagerfall), die
   Pick-Aufgaben stehen untereinander mit 44-px-Knoepfen, das Nachrichtenband
   und das Versandbereit-Formular laufen ueber die volle Breite. */
@media (max-width:700px){
  /* Pick-Zeilen und Startseiten-Listen scrollen NICHT seitwaerts (Ausnahme in
     Fachregel 8 — das ist der Lagerfall). Statt dessen wird die Zeile zu einem
     Block, ihre Angaben fliessen in Zeilen um, die letzte Zelle (Knoepfe)
     steht darunter ueber die volle Breite. Der Tabellenkopf faellt weg: die
     Angaben stehen mit ihrer eigenen Marke oder Einheit in der Zeile.
     Gebaut als Flex-Umbruch, nicht als feste Spaltenzuordnung — eine feste
     Zuordnung („Auftrag + Kunde", „Termin + Kartons") muesste je Tabelle die
     Spaltennummern kennen und waere damit ein Sonderweg je Seite. */
  .tm .zeilenliste{overflow-x:hidden}
  .tm .zeilenliste>table{display:block;padding:0 10px 10px}
  .tm .zeilenliste>table>thead{display:none}
  .tm .zeilenliste>table>tbody{display:block}
  .tm .zeilenliste>table>tbody>tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;
    background:var(--row-bg);border-radius:var(--r-lg);margin-bottom:8px;padding:12px 14px}
  /* Die Zelle traegt hier weder Grund noch Ecke — beides sitzt am Block
     darum; ein Radius waere ohne Wirkung und stuende nur als Fundstelle in der
     Ecken-Suche. */
  .tm .zeilenliste>table>tbody>tr>td{display:block;background:none;padding:0;
    min-width:0;white-space:normal}
  .tm .zeilenliste>table>tbody>tr>td:empty{display:none}
  .tm .zeilenliste>table>tbody>tr>td.tr-r{text-align:left}
  /* Der Fortschrittsbalken schrumpft in einer Flex-Zeile auf seinen Inhalt
     (er hat keinen) und stuende sonst als 20-px-Stummel da. */
  .tm .zeilenliste>table>tbody>tr>td .bar{width:90px;flex:0 0 auto}
  /* Die letzte Zelle traegt die Knoepfe — eigene Zeile, volle Breite. */
  .tm .zeilenliste>table>tbody>tr>td:last-child{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:8px;
    padding-top:6px}
  .tm .zeilenliste>table>tbody>tr>td:last-child>.btn,
  .tm .zeilenliste>table>tbody>tr>td:last-child>a,
  .tm .zeilenliste>table>tbody>tr>td:last-child>span.btn{flex:1 1 100%}
  /* „Öffnen" ist nur Schmuck (`pointer-events:none`, der ganze Block ist der
     Link) und kostete am Handy je Zeile 52 px — Gegenlesen 05.09.2026, k-10. */
  .tm .zeilenliste>table>tbody>tr>td:last-child>span.btn[style*="pointer-events"]{display:none}
  /* Leerzeile („Nichts zu kommissionieren") bleibt eine ruhige Flaeche. */
  .tm .zeilenliste>table>tbody>tr:has(>td>.empty){display:block;background:none;padding:0}
  /* Der Streifen sitzt jetzt am Block, nicht mehr an der ersten Zelle — eine
     Farbkante je Element, weiterhin als Innenschatten und nie als border-left
     (Regel 18, Technik seit V3.7.1). */
  .tm .zeilenliste>table>tbody>tr[class*="streifen-"]{padding-left:19px}
  .tm .zeilenliste>table>tbody>tr[class*="streifen-"]>td:first-child{box-shadow:none;padding-left:0}
  .tm .zeilenliste>table>tbody>tr.streifen-gold{box-shadow:inset 5px 0 0 var(--gold)}
  .tm .zeilenliste>table>tbody>tr.streifen-info{box-shadow:inset 5px 0 0 var(--info)}
  .tm .zeilenliste>table>tbody>tr.streifen-good{box-shadow:inset 5px 0 0 var(--good)}
  .tm .zeilenliste>table>tbody>tr.streifen-crit{box-shadow:inset 5px 0 0 var(--crit)}
  .tm .zeilenliste>table>tbody>tr.streifen-amber,
  .tm .zeilenliste>table>tbody>tr.streifen-warn{box-shadow:inset 5px 0 0 var(--amber)}
  .tm .zeilenliste>table>tbody>tr.streifen-plum{box-shadow:inset 5px 0 0 var(--plum)}
  .tm .zeilenliste>table>tbody>tr.streifen-ink{box-shadow:inset 5px 0 0 var(--ink)}

  /* Pick-Aufgabe: die drei Bloecke stehen schon ab 1400 px untereinander
     (V3.4.0); hier bekommen die Knoepfe ihre 44 px und, wenn zwei nicht
     nebeneinander passen, die volle Breite. */
  .tm .picktask{padding-left:14px;padding-right:14px}
  .tm .picktask .btn{height:44px;min-height:44px;flex:1 1 140px}
  .tm .picktask .acts{gap:8px}
  .tm .picktask .stp button{min-width:44px;min-height:44px}
  .tm .picktask .devrow{flex-wrap:wrap}
  .tm .picktask .devrow input{width:100%}
  .tm .picktask .devrow .pk-lose input{width:22px}

  /* Nachrichten vom Buero und Kommentarfeld ueber die volle Breite. */
  .tm .commentbox input{width:100%}
  /* Abschluss „Versandbereit melden": untereinander statt in einer Reihe. */
  .tm .packrow{display:grid;grid-template-columns:1fr;gap:12px;align-items:stretch}
  .tm .packfeld{max-width:none}
  .tm .packrow .btn{width:100%}
  /* Scannerfeld, wo eines steht. */
  .tm .picktask input[type=text],.tm .picktask input[type=number]{min-height:48px}
}

/* ==========================================================================
   10 · MODUL zeit — Kiosk, Erfassung, Mitarbeiter, Report (Fachregel 11)
   ==========================================================================
   Der Kiosk hat kein Kopfband und keine Schiene (seite_schlicht_start) — dort
   gibt es also weder Menue-Knopf noch Ueberlagerung; nur die Masse aendern
   sich. */
@media (max-width:700px){
  /* Kiosk: Scan-Karte ueber die volle Breite, Eingabe bleibt 64 px hoch. */
  .tm .kiosk-scan{max-width:none;margin:16px 0;padding:22px 16px}
  .tm .kiosk-scan input{height:64px}
  /* Stationen und Aktionskacheln untereinander (Regel 6 deckt .actions und
     .summary bereits ab; hier nur die Innenmasse). */
  .tm .station{padding:20px 16px}
  .tm .act,.tm a.act{min-height:88px;padding:18px 12px}
  /* Report: Legende bricht um statt zu ueberstehen. */
  .tm .legend{grid-template-columns:1fr}
  .tm .legend div{flex-wrap:wrap}
  /* Ringe und Diagramme bleiben in ihrer Karte. */
  .tm .ring{max-width:100%}
  .tm .card svg{max-width:100%}
}

/* ==========================================================================
   11 · Bewegungsarm (prefers-reduced-motion)
   ==========================================================================
   Die allgemeine Regel im Abschnitt RESPONSIV kuerzt jede Dauer auf .001 ms;
   hier steht es fuer die Ueberlagerung noch einmal ausdruecklich, damit es
   beim naechsten Umbau nicht verlorengeht: der Zustand wechselt sofort. */
@media (prefers-reduced-motion:reduce){
  html.tm-bewegt .tm-rail{transition:none}
  .tm-schleier,html.tm-bewegt .tm-schleier{transition:none}
}

/* ==========================================================================
   12 · Druck
   ==========================================================================
   Gedruckt wird die Handy-Bedienung nicht. */
@media print{
  .tm-menue-knopf,.tm-rail-zu,.tm-schleier{display:none}
}

/* ============================================================================
   LAGER (BP-16) — Bestand, Regal-Scan, Buchen, Korrektur, Umlagerung, Inventur
   Bau 05.09.2026 (Phase 2, Seiten). Designsprache V3.7.29.

   Der Bauplan nennt in Abschnitt 6 genau fuenf fehlende Bausteine; alles
   andere kommt aus dem Bestand (.tm-tiles, .card, postab, .artcell, .kg, .stp,
   .streifen-*, .tag, .empty, .tscroll, .cols, .field, .rowlink, .badge, und
   fuer die Zaehlliste der Druck-Abschnitt der Pickliste, V3.7.3).

   Regeln dieses Abschnitts: nur Tokens, kein Farbwert, kein `border-left:5px`,
   kein Ring in einer Zustandsfarbe, jede Flaeche mit Radius. Der Zustand einer
   Zeile oder Karte steht IMMER im Streifen links (.streifen-*), nie in einer
   zweiten Kante — das Scan-Ergebnis traegt darum selbst keine Farbe, es sitzt
   in einer Karte mit Streifen.
   ========================================================================== */

/* ---------- Umschalter Zugang | Entnahme (zwei Knoepfe als ein Segment) ----
   Aufbau wie .stp (Pick-Zeile): ein Rahmen um beide, die Trennlinie innen. */
.tm .seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-md);
  overflow:hidden;background:var(--surface)}
.tm .seg>a,.tm .seg>button{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;
  border:0;background:var(--surface);color:var(--ink-2);cursor:pointer;text-decoration:none;
  font:800 13.5px var(--font);letter-spacing:-.01em}
.tm .seg>*+*{border-left:1px solid var(--line-2)}
.tm .seg>a:hover,.tm .seg>button:hover{background:var(--gold-soft);color:var(--ink)}
.tm .seg>.on{background:var(--ink);color:var(--page)}
/* Berührfläche unter 700 px mindestens 44 px (BP-31 Kriterium 8; Abnahme BP-17 05.09.2026: Zustandsknöpfe 40 px) */
@media (max-width:700px){.tm .seg>a,.tm .seg>button{height:44px}}

/* ---------- Scanfeld: grosse Eingabe mit Barcode-Zeichen ----------
   Das Zeichen ist eine Flaeche aus Streifen (repeating-linear-gradient) statt
   eines Symbols — kein Nachladen, keine zweite Icon-Quelle. Der Radius ist wie
   beim Karton-Piktogramm (.kg .k, V3.2.0) klein gehalten: die Tokens beginnen
   bei 12 px und wuerden ein 22 px breites Zeichen rund schleifen.
   Der Fokusring bleibt hier ausdruecklich stehen (Tastatur und Scanner). */
.tm .scanfeld{position:relative;display:block}
.tm .scanfeld input{width:100%;height:64px;padding-left:56px;
  font-size:24px;font-weight:800;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.tm .scanfeld::before{content:"";position:absolute;left:18px;top:50%;transform:translateY(-50%);
  width:24px;height:26px;border-radius:2px;pointer-events:none;opacity:.65;
  background:repeating-linear-gradient(90deg,var(--muted) 0 2px,transparent 2px 5px)}

/* ---------- Scan-Ergebnis: eine grosse Zeile ----------
   Ohne eigene Farbe: gut oder Fehler sagt der Streifen der Karte darum
   (.card.streifen-good / .streifen-crit) — eine Farbe, eine Bedeutung. */
.tm .scanergebnis{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;padding:20px 22px}
.tm .scanergebnis .gross{font-size:28px;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1.15}
.tm .scanergebnis .zeile{font-size:13.5px;color:var(--ink-2);line-height:1.45}
/* 25.10.2026 (Haris: „Lager 1 jetzt 5 K — der Text klebt zu sehr zusammen"):
   Kennzahl als kleine Beschriftung über der großen Zahl; die enge
   Laufweite gilt nur noch für Zahlen, nicht für Wörter. */
.tm .scanergebnis .kz{display:flex;flex-direction:column;gap:2px;min-width:110px}
.tm .scanergebnis .kz small{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.tm .scanergebnis .kz b{font-size:28px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.15}

/* ---------- Regal-Bedarfsliste „Nachfüllliste" (Nachtrag 06.09.2026, Teil B) ----
   Eingabefeld, Stepper und Knopf in einer Reihe; darunter die gemeinsame Liste
   und, eingeklappt, „heute erledigt". Der Zustand einer Zeile steht im Streifen
   links (`.streifen-gold` offen, `.streifen-amber` aelter als 30 Tage,
   `.streifen-good` erledigt) — hier keine zweite Farbkante. */
.tm .rb-eingabe{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.tm .rb-eingabe .field{flex:1 1 240px;margin-bottom:0}
.tm .rb-eingabe .field.rb-menge{flex:0 0 auto}
.tm .rb-meldung{padding:0 22px 12px;font-weight:700}
.tm .rb-meldung.gut{color:var(--good-on-soft)}
.tm .rb-meldung.fehler{color:var(--crit-on-soft)}
.tm .rb-erledigt{padding:0 22px 14px}
.tm .rb-erledigt>summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--ink-2);
  padding:8px 12px;border-radius:var(--r-md);background:var(--surface-2);list-style:none}
.tm .rb-erledigt>summary::-webkit-details-marker{display:none}
.tm .rb-erledigt[hidden]{display:none}
@media (max-width:700px){
  .tm .rb-eingabe{flex-direction:column;align-items:stretch}
  .tm .rb-eingabe .field.rb-menge{flex:1 1 auto}
  .tm .rb-eingabe .btn{width:100%;min-height:44px}
  .tm .rb-eingabe input.zaehl{width:100%}
}

/* ---------- Differenz mit Vorzeichen ---------- */
.tm .delta{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.tm .delta.plus{color:var(--good-on-soft)}
.tm .delta.minus{color:var(--crit-on-soft)}
.tm td .delta.plus{color:var(--good-on-soft)}
.tm td .delta.minus{color:var(--crit-on-soft)}

/* ---------- Zaehlfeld (Inventur, Korrektur, Umlagerung) ----------
   Breite Zahl, rechtsbuendig; `gesetzt` heisst „gespeichert" und ist eine
   Flaeche, kein Ring (Regel „Farbstreifen", Nachtrag 04.09.2026). */
.tm input.zaehl{width:112px;text-align:right;font-weight:800;font-size:16px;
  font-variant-numeric:tabular-nums}
.tm input.zaehl.gesetzt{background:var(--good-soft)}

/* ---------- Druckansicht der Zaehlliste ----------
   Sie benutzt den Druck-Abschnitt der Pickliste (V3.7.3): .druck, .dblatt,
   .dkopf, .dband, .dtab, .dbox, .dlinie, .dfuss — dieselben Bausteine, damit es
   nur eine Druckfassung im System gibt. Eigen ist nur die benannte Seite und
   die Breite der beiden rechten Spalten.
   Die System-Spalte ist schon im HTML leer (blind zaehlen, BP-16 Abschnitt 6);
   hier steht darum keine Regel, die etwas versteckt. */
.tm .druck-zaehl .dtab .dsystem,.tm .druck-zaehl .dtab .dzaehl{width:24mm}
.tm .druck-zaehl .dtab .dzaehl .dlinie{min-width:20mm}

@media print{
  /* `@page` kennt keine Skopierung: die spaetere Regel gewinnt fuer jedes
     gedruckte Dokument. Die Zaehlliste holt sich ihre Raender und ihr Format
     darum ueber eine BENANNTE Seite, gesetzt am aeussersten Block — sie steht
     hinter der der Pickliste und schlaegt sie fuer genau diese Seite.
     `size:A4`: ohne Angabe nimmt Chrome das Papier des Systems (Regel
     „Druckansichten farbig", Nachtrag 04.09.2026). */
  @page zaehlliste{size:A4;margin:14mm 12mm}
  .tm-app:has(.druck-zaehl){page:zaehlliste}
  /* Auf dem Zettel zaehlt der Platz zum Schreiben: die gezaehlte Menge bekommt
     eine Linie, die System-Spalte bleibt leer. */
  .tm .druck-zaehl .dtab .dsystem{width:22mm}
  .tm .druck-zaehl .dtab .dzaehl{width:26mm}
  .tm .druck-zaehl .dtab .dzaehl .dlinie{min-width:22mm;height:5mm;border-bottom:.3mm solid var(--ink)}
  .tm .druck-zaehl .dtab td{height:7mm}
}

/* ============================================================================
   PICKING (BP-21) — Scan-Karte, Etikettzeile, Kundenetikett, Versandtisch
   Bau 05.09.2026. Designsprache V3.7.30.

   Der Bauplan nennt in Abschnitt 6 genau fuenf fehlende Bausteine:
   `.pickzaehler`, `.scan-fortschritt`, `.etikettzeile`, `.etikett` (mit der
   Druckseite aus der Einstellung) und `.sendungstisch`. Alles andere kommt aus
   dem Bestand — `.card`, `.postab`, `.artcell`, `.scanfeld` und
   `.scanergebnis` (LAGER, BP-16), `.stp`, `.tag`, `.badge`, `.empty`,
   `.tscroll`, `.field`, `.streifen-*`, `.tm-tiles`, `.einst-felder`.

   Regeln dieses Abschnitts: nur Tokens, kein Farbwert, kein `border-left:5px`,
   kein Ring in einer Zustandsfarbe, jede Flaeche mit Radius. Der Zustand einer
   Zeile steht immer im Streifen links (`.streifen-*`).
   ============================================================================ */

/* ---------- Kopfzeile der Ergaenzungen auf `auftrag/pick` ---------- */
.tm .pk-kopf{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 12px}

/* ---------- Rueckfrage-Dialog (eigener Baustein, damit das `hidden`-Attribut
   allein die Sichtbarkeit steuert — die aelteren `.modal-backdrop`-Dialoge
   schalten ueber eine Klasse) ---------- */
.tm .pk-modal{position:fixed;inset:0;background:var(--schleier);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:20px;z-index:220}
.tm .pk-modal[hidden]{display:none}
.tm .pk-modal-blatt{background:var(--surface);border-radius:var(--r-xl);max-width:520px;width:100%;
  box-shadow:var(--shadow-3);overflow:hidden}

/* ---------- Scan-Karte ---------- */
.tm .pk-karte .sec-h{align-items:center}
.tm .pk-ton{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink-2);
  cursor:pointer;padding:4px 10px;border-radius:var(--r-pill);background:var(--surface-2)}
.tm .pk-ton input{margin:0}

/* Die grosse Zahl „3 / 12" — eine Groesse, ueberall dieselbe. */
.tm .pickzaehler{font-size:26px;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}

/* Fortschrittsliste der Scan-Karte: ruhige Zeilen, grosse Beruehrflaechen. */
.tm .scan-fortschritt td{padding-top:12px;padding-bottom:12px;vertical-align:middle}
.tm .scan-fortschritt .btn.sm,.tm .scan-fortschritt .linkbtn{white-space:nowrap}
.tm .scan-fortschritt .artcell{min-width:180px}

/* Stueckeingabe der losen Zeile steht in einer eigenen Karte ueber der Liste. */
.tm #pk-stueck .field{margin-bottom:12px}

/* ---------- Etikettzeile unter der Pick-Zeile ---------- */
.tm .etikettzeile{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;
  padding:10px 16px;margin:0 14px 14px;border-radius:var(--r-md);background:var(--surface-2);
  font-size:13.5px;color:var(--ink-2)}
.tm .etikettzeile.fertig{background:var(--good-soft)}
.tm .etikettzeile .pk-etikettzahl{color:var(--ink);font-weight:700;white-space:nowrap}
.tm .etikettzeile .btn{margin-left:auto}

/* ---------- Kundenetikett (Brother P-touch) ----------
   Breite und Hoehe setzt die Seite aus der Einstellung `picking_etikett_ptouch`;
   hier steht nur der Aufbau. Am Bildschirm ist es eine Vorschau mit Rahmen, im
   Druck steht je Etikett eine Seite ohne Rahmen (Fachregel 9, BP-31 Nr. 10). */
.tm .druck-etikett{display:flex;flex-wrap:wrap;gap:12px}
.tm .druck-etikett .etikett{box-sizing:border-box;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.7mm;padding:1.2mm 3mm;
  background:var(--surface);color:var(--ink);overflow:hidden}
/* Rahmen und Radius NUR am Bildschirm: im Druck fuellt das Etikett das Band,
   dort gibt es keine Flaeche, die eine Ecke zeigen koennte (Regel „Runde Ecken
   überall" — kein `border-radius:0` als Ruecknahme). */
@media screen{
  .tm .druck-etikett .etikett{border:1px solid var(--line-2);border-radius:var(--r-md)}
}
.tm .druck-etikett .et-bc{display:block;line-height:0}
.tm .druck-etikett .et-bc svg{display:block;max-width:100%;height:auto}
/* 22.10.2026 (Regel 23a): Artikelart mit Farbe groß in einer Zeile, Größe
   und Art.-Nr. klein darunter — lesbar auf 62 × 29 mm. */
.tm .druck-etikett .et-text{font-size:11pt;font-weight:800;text-align:center;line-height:1.1;
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm .druck-etikett .et-nr{font-size:7.5pt;line-height:1.1;color:var(--ink-2);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* ---------- Karte „Versand" auf der Kommissionierung (Nachtrag 06.09.2026) --
   Adresse als ruhiger Block, die Knopfreihe umbrechend, die Meldezeile ohne
   eigene Karte (eine Karte in einer Karte gibt es nicht). Die Zustandsfarbe
   der Meldezeile ist eine Flaeche aus den Tokens, kein Rahmen. */
.tm .pk-versand-adresse{line-height:1.5}
.tm .pk-versand-adresse .note-txt{margin-top:6px}
.tm .pk-versand-knoepfe{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tm .pk-vsperre{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.tm .pk-vmeldung{padding:0 18px 12px;font-weight:700}
.tm .pk-vmeldung.gut{color:var(--good-on-soft)}
.tm .pk-vmeldung.fehler{color:var(--crit-on-soft)}
.tm .pk-versand .vsendline{margin-top:0}
@media (max-width:700px){
  .tm .pk-versand-knoepfe .btn{width:100%}
  .tm .pk-vsperre{width:100%}
  .tm .pk-vsperre .btn{width:100%}
}

/* ---------- Versandtisch ---------- */
.tm .sendungstisch td{vertical-align:middle;padding-top:11px;padding-bottom:11px}
.tm .sendungstisch form{display:inline-flex;align-items:center;gap:6px;margin:0}
.tm .sendungstisch input.zaehl{width:92px}
.tm .sendungstisch select{max-width:170px}
.tm .sendungstisch .note-txt{margin-top:3px}

/* ---------- Druck: je Etikett eine Seite, ohne Rahmen ----------
   `@page` kennt keine Skopierung: die Etikettseite holt sich ihr Format ueber
   eine BENANNTE Seite, gesetzt in module/picking/etikett.php (dort steht das
   Bandmass aus der Einstellung). Hier steht nur, was ohne Mass gilt. */
@media print{
  .tm .no-print,.tm .pk-modal{display:none!important}
  /* 22.10.2026 (Regel 23a): auf der Etikettenseite druckt NUR der Stapel —
     keine Schiene, kein Kopf, keine Meldung, kein Seitenrand. */
  .tm-app:has(.druck-etikett) .tm-rail,.tm-app:has(.druck-etikett) .tm-schleier,
  .tm-app:has(.druck-etikett) .tm-main>:not(.druck-etikett){display:none!important}
  .tm-app:has(.druck-etikett),.tm-app:has(.druck-etikett) .tm-main{display:block!important;
    padding:0!important;margin:0!important;min-height:0!important;max-width:none!important}
  body.tm:has(.druck-etikett){margin:0;padding:0}
  .tm .druck-etikett{display:block;gap:0}
  .tm .druck-etikett .etikett{page-break-after:always;break-after:page;break-inside:avoid;
    print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .tm .druck-etikett .et-nr{color:var(--ink)}
  .tm .druck-etikett .etikett:last-child{page-break-after:auto;break-after:auto}
}

/* ---------- MOBIL (BP-31, Abschnitt „MOBIL (BP-31, M1)" Nr. 10) ----------
   Die beiden Umbruchbreiten stehen dort als Kommentar-Konstante und werden
   hier nicht wiederholt: 900 px (Umbruch A) und 700 px (Umbruch B). */
@media (max-width:768px){
  /* Scanfeld bleibt am Tablet unter dem Kopf stehen, die Karte nimmt die
     volle Breite (Bauplan Abschnitt 6, „Mobil"). */
  .tm .pk-karte .scanfeld{position:sticky;top:0;z-index:5;background:var(--surface)}
  .tm .pk-karte .btn,.tm .scan-fortschritt .btn{min-height:56px}
  .tm .etikettzeile{margin:0 12px 12px}
  .tm .etikettzeile .btn{margin-left:0;width:100%}
}
@media (max-width:700px){
  .tm .sendungstisch form{width:100%;flex-wrap:wrap}
  .tm .sendungstisch select{max-width:100%}
  .tm .pickzaehler{font-size:22px}
  .tm .pk-kopf .btn{width:100%;min-height:44px}
}

/* Barcode `A<ord>` im Kopf der Pickliste (BP-21 Fachregel 3): er steht im
   Unterschriftenblock rechts, ueber den beiden Linien, und wird farbig
   gedruckt wie alles andere (Regel „Druckansichten farbig"). */
.tm .dsign .dbarcode{display:block;margin-bottom:4mm;line-height:0}
.tm .dsign .dbarcode svg{display:block;color:var(--ink)}
@media print{ .tm .dsign .dbarcode svg{print-color-adjust:exact;-webkit-print-color-adjust:exact} }

/* ============================================================================
   ARTIKEL (BP-17) — Bildraster, Vergleich, Export-Knopfreihe, Sammelleiste,
   Preiszeitleiste, Meldeband
   ============================================================================
   Sechs Bausteine, alle nur aus Tokens (kein Farbwert, kein fester Radius) und
   in beiden Modi. Sie stehen hier und nicht im Modul (00_Rahmen: „Fehlt ein
   Baustein, wird er in tm_design/ ergaenzt").

   Warum `.band` dazukommt: Vier Seiten des Moduls brauchen eine Zeile ueber
   dem Inhalt, die einen Zustand meldet („Masterliste erkannt, 16 Spalten",
   „metadata.json fehlt", „inzwischen geaendert — neu laden"). `.tm-echo` ist
   dafuer das falsche Mittel (es liegt ueber der Seite und verschwindet), ein
   `.card` das zu grosse. Das Band ist eine Flaeche mit Radius, ohne eigene
   Farbe im Normalfall; `gut` und `fehl` holen ihre Flaeche aus den
   Zustands-Tokens.
   ============================================================================ */
/* Raster des Artikelblatts und der Bilderseite (vorher inline, Abnahme 05.09.2026) */
.tm .twocol.art-blatt{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.tm .twocol.art-bilder{grid-template-columns:minmax(240px,1fr) 2fr}

/* ---------- Meldeband ueber dem Inhalt ---------- */
.tm .band{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 16px;margin-bottom:16px;border-radius:var(--r-lg);
  background:var(--surface-sunken);color:var(--ink-2);
  font:600 13.5px var(--font);line-height:1.45}
.tm .band.gut{background:var(--good-soft);color:var(--good-on-soft)}
.tm .band.fehl{background:var(--crit-soft);color:var(--crit-on-soft)}
.tm .band.aus{display:none}

/* ---------- Bildraster ----------
   Kacheln von 96 px; das Hauptbild traegt eine Marke statt eines Rahmens
   (Regel „Farbstreifen": nur links, sonst nichts — hier ist die Marke ein
   eigenes Element, kein Ring um die Kachel). */
.tm .bildraster{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.tm .bildraster figure{margin:0;display:flex;flex-direction:column;gap:6px;
  background:var(--surface-2);border-radius:var(--r-lg);padding:8px;position:relative;overflow:hidden}
.tm .bildraster figure img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:var(--r-md);background:var(--surface-sunken)}
.tm .bildraster figcaption{font-size:11.5px;color:var(--muted);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm .bildraster figure.haupt::before{content:"";position:absolute;left:8px;top:8px;
  width:10px;height:10px;border-radius:var(--r-pill);background:var(--gold);z-index:1}
.tm .bildraster figure.fehlt{background:var(--crit-soft)}
.tm .bildraster figure.fehlt figcaption{color:var(--crit-on-soft)}
.tm .bildraster .werkzeuge{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- Vergleich alt → neu (Import) ----------
   Zwei Werte nebeneinander: der alte ruhig, der neue betont. Keine
   Zustandsfarbe — die traegt der Streifen der Zeile. */
.tm table.vergleich td.alt{color:var(--ink-2)}
.tm table.vergleich td.neu{font-weight:800;color:var(--ink)}
.tm table.vergleich td.alt,.tm table.vergleich td.neu{
  max-width:280px;overflow-wrap:anywhere}

/* ---------- Knopfreihe der Exportseite ---------- */
.tm .export-knopfreihe{display:flex;gap:12px;flex-wrap:wrap;align-items:end;padding:16px 22px}
.tm .export-knopfreihe .field{min-width:200px}

/* ---------- Sammelleiste unter der Liste ----------
   Steht am unteren Rand, nur sichtbar, solange etwas ausgewaehlt ist
   ([hidden] blendet sie aus). Auf dem Handy volle Breite. */
.tm .sammelleiste{position:sticky;bottom:0;z-index:60;
  display:flex;gap:12px;flex-wrap:wrap;align-items:end;
  margin-top:16px;padding:14px 18px;border-radius:var(--r-xl);
  background:var(--surface);box-shadow:var(--shadow-3)}
.tm .sammelleiste[hidden]{display:none}
.tm .sammelleiste .anzahl{font:800 20px var(--font);font-variant-numeric:tabular-nums;color:var(--gold-text)}
.tm .sammelleiste .txt{align-self:center;color:var(--ink-2);font-size:13px;font-weight:700}
.tm .sammelleiste .field{min-width:170px}
.tm .sammelleiste .field span{font-size:12px;color:var(--ink-2);font-weight:700;display:block;margin-bottom:6px}

/* ---------- Preiszeitleiste ----------
   Eine Zeile je Preiszeile: Zeitspanne, Wert, Art, Bezeichnung, Zustand.
   Der Streifen liegt als Innenschatten links (Technik V3.7.1), nie als Rahmen. */
.tm .preiszeitleiste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tm .preiszeitleiste li{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center;
  padding:11px 16px;border-radius:var(--r-lg);background:var(--surface-2)}
.tm .preiszeitleiste li.leer{color:var(--ink-2);justify-content:center}
.tm .preiszeitleiste li.streifen-good{box-shadow:inset 5px 0 0 var(--good)}
.tm .preiszeitleiste li.streifen-info{box-shadow:inset 5px 0 0 var(--info)}
.tm .preiszeitleiste li.streifen-plum{box-shadow:inset 5px 0 0 var(--plum)}
.tm .preiszeitleiste li.streifen-ink{box-shadow:inset 5px 0 0 var(--ink-2)}
.tm .preiszeitleiste .spanne{min-width:190px;color:var(--ink-2);font-size:13px}
.tm .preiszeitleiste .wert{font-weight:800;font-size:15px;min-width:90px}
.tm .preiszeitleiste .art{font-size:12px;font-weight:700;color:var(--muted);min-width:60px}
.tm .preiszeitleiste .bez{flex:1;min-width:120px;color:var(--ink-2);font-size:13px}

/* ---------- Handy (unter 700 px) ---------- */
@media (max-width:700px){
  /* Abnahme 05.09.2026 (mobil_pruefen.js): die zwei Raster des Artikelmoduls
     werden unter 700 px einspaltig — als Klassen, weil ein Inline-Raster die
     Umbruchregel überstimmt hätte. */
  .tm .twocol.art-blatt,.tm .twocol.art-bilder{grid-template-columns:1fr}

  .tm .bildraster{grid-template-columns:repeat(3,1fr)}
  .tm .sammelleiste{width:100%;padding:12px 14px}
  .tm .sammelleiste .field{min-width:0;flex:1 1 100%}
  .tm .sammelleiste .btn{min-height:44px}
  .tm .export-knopfreihe{padding:14px 16px}
  .tm .export-knopfreihe .field{min-width:0;flex:1 1 100%}
  .tm .preiszeitleiste li{gap:6px 12px}
  .tm .preiszeitleiste .spanne{min-width:0;flex:1 1 100%}
  .tm table.vergleich td.alt,.tm table.vergleich td.neu{max-width:none}
}

/* ============================================================================
   EINKAUF (BP-18) — Einkauf & Container
   ============================================================================
   Nur Tokens aus tokens.css, keine Farbwerte. Hell und dunkel, bedienbar unter
   700 px. Keine Erklaertexte, keine Zustandsfarbe als Rahmen oder Schatten —
   Zustaende zeigt der Farbstreifen (.streifen-*) an der Zeile.
   ============================================================================ */

/* ---------- Meldeband: zwei Varianten, die BP-18 braucht ----------
   .band gab es schon (gut / fehl / aus); Archiv und Hinweiszeilen des Einkaufs
   brauchen zusaetzlich eine neutrale Info- und eine Achtung-Variante. */
.tm .band.info{background:var(--info-soft);color:var(--info-on-soft)}
.tm .band.warn{background:var(--gold-soft);color:var(--gold-on-soft)}

/* ---------- Pipeline: bestellt · Produktion · unterwegs · angekommen ----------
   Vier bis fuenf kleine Zahlenkacheln nebeneinander in einer Tabellenzelle. */
.tm .pipeline{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:stretch}
.tm .pipeline .pz{display:inline-flex;flex-direction:column;gap:1px;min-width:44px;
  padding:4px 8px;border-radius:var(--r-md);background:var(--surface-2);
  font-variant-numeric:tabular-nums;text-align:right}
.tm .pipeline .pz .l{font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.01em}
.tm .pipeline .pz .v{font-size:14px;font-weight:800;color:var(--ink)}
.tm .pipeline .pz.stark{background:var(--surface-sunken)}
.tm .pipeline .pz.stark .v{font-size:15px}

/* ---------- Fortschritt: produziert / verschifft / eingelagert ----------
   Drei uebereinanderliegende Balken in einer Spur. Die Reihenfolge ist die des
   Ablaufs; der schmalste liegt oben, damit alle drei sichtbar bleiben. */
.tm .fortschritt{position:relative;display:block;width:120px;max-width:100%;height:10px;
  border-radius:var(--r-pill);background:var(--surface-sunken);overflow:hidden}
.tm .fortschritt > span{position:absolute;left:0;top:0;bottom:0;border-radius:var(--r-pill)}
.tm .fortschritt .s1{background:var(--slate);opacity:.45}
.tm .fortschritt .s2{background:var(--info);opacity:.75}
.tm .fortschritt .s3{background:var(--good)}

/* ---------- Geld: Betrag mit Waehrungskuerzel ----------
   Nur sichtbar fuer Konten mit `artikel.ek_sehen` — das entscheidet PHP,
   nicht das Stylesheet. */
.tm .geld{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.tm .geld .b{font-weight:800}
.tm .geld .w{font-size:11px;font-weight:700;color:var(--muted)}

/* ---------- Monatszellen der Verbrauchsreihe ----------
   Eine Zelle je Kalendermonat. Ein ausverkaufter Monat ist eine Luecke, keine
   Null: er wird schraffiert (repeating-linear-gradient in Tinte-Tint), nicht
   eingefaerbt. Ein gekappter Ausreisser traegt eine Marke. */
.tm .monate{display:inline-flex;gap:2px;align-items:flex-end}
.tm .monate .mz{position:relative;display:inline-flex;flex-direction:column;justify-content:flex-end;
  align-items:center;min-width:22px;height:34px;padding:2px 3px;border-radius:var(--r-md);
  background:var(--surface-2);font-size:10.5px;font-weight:700;color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.tm .monate .mz .m{font-size:9px;color:var(--muted);font-weight:600}
.tm .monate .mz.aus{background:repeating-linear-gradient(135deg,
  var(--surface-2) 0 4px, var(--surface-sunken) 4px 8px);color:var(--muted)}
.tm .monate .mz.gekappt{box-shadow:inset 0 -3px 0 var(--amber)}
.tm .monate .mz.korrigiert{box-shadow:inset 0 -3px 0 var(--plum)}
.tm .monate .mz.null{color:var(--muted)}

/* ---------- Sparkline (Inline-SVG aus PHP, 12 Punkte) ---------- */
.tm .sparkline{display:inline-block;width:88px;height:24px;vertical-align:middle}
.tm .sparkline path{fill:none;stroke:var(--info);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.tm .sparkline .flaeche{fill:var(--info-soft);stroke:none}
.tm .sparkline .punkt{fill:var(--info);stroke:none}

/* ---------- Klasse X / Y / Z (Verbrauchsstreuung) ---------- */
.tm .chip.klasse{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.tm .chip.klasse.x{background:var(--good-soft);color:var(--good-on-soft)}
.tm .chip.klasse.y{background:var(--info-soft);color:var(--info-on-soft)}
.tm .chip.klasse.z{background:var(--amber-soft);color:var(--amber-on-soft)}

/* ---------- Fuellstand: Summe CBM gegen 27 (20 Fuss) bzw. 58 (40 Fuss) ----------
   Information, kein Zwang: feste Containervolumen gibt es nicht. */
.tm .fuellstand{display:inline-flex;align-items:center;gap:8px;min-width:150px}
.tm .fuellstand .spur{position:relative;flex:1;height:8px;border-radius:var(--r-pill);
  background:var(--surface-sunken);overflow:hidden}
.tm .fuellstand .spur > span{position:absolute;left:0;top:0;bottom:0;border-radius:var(--r-pill);
  background:var(--info)}
.tm .fuellstand.voll .spur > span{background:var(--gold)}
.tm .fuellstand.ueber .spur > span{background:var(--amber)}
.tm .fuellstand .txt{font-size:12px;font-weight:700;color:var(--ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- Schiff: Position, Kurs, Geschwindigkeit, Ziel, ETA, Stand ----------
   Eine Zeile pro Angabe; kein Kartenbild im ERP (Nicht-Ziel 3). */
.tm .schiff{display:grid;gap:8px 22px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  padding:12px 16px;border-radius:var(--r-lg);background:var(--surface-2)}
.tm .schiff .f{display:flex;flex-direction:column;gap:2px}
.tm .schiff .f .l{font-size:11px;font-weight:700;color:var(--muted)}
.tm .schiff .f .v{font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.tm .schiff .alt .v{color:var(--ink-2)}
.tm .schiff .leer{grid-column:1/-1;color:var(--muted);font-size:13px}

/* ---------- Handy (unter 700 px) ---------- */
@media (max-width:700px){
  /* Die Monatszellen und die Sparkline blendet die Vorschlagsseite aus
     (BP-18 Abschnitt 6); die Pipeline wird zweizeilig. */
  .tm .monate,.tm .sparkline{display:none}
  .tm .pipeline{gap:4px}
  .tm .pipeline .pz{min-width:40px;padding:3px 6px}
  .tm .fortschritt{width:88px}
  .tm .schiff{grid-template-columns:1fr}
  .tm .fuellstand{min-width:0;width:100%}
}

/* ============================================================================
   V3.8.0 — AENDERUNGSRUNDE 14.09.2026
   (Nachtrag 00_Bauplaene/NACHTRAG_2026-09-14_aenderungsrunde.md, Abschnitt B;
   Lauf „design")

   Zehn Bausteine und eine Aufraeumung. Was hier steht, gilt fuer das ganze
   System — keine Modulseite bringt dafuer etwas Eigenes mit (00_Rahmen:
   „Fehlt ein Baustein, wird er in tm_design ergaenzt").

     B1  .tm-samm      Sammelkachel — mehrere Zahlen EINER Sache in einer Karte
     B2  .tm-zustand   Zustandskarte — eine Karte je Zustand statt Reiter
     B3  Seitenleiste  290 px, keine Auslassung, Zaehler als Punkt mit Zahl
     B4  .formraster.frei   12-Spalten-Raster, Feldlaenge nach Inhalt
     B5  .tm-echo      Rueckmeldung mit Haken/Punkt, faehrt von unten ein
     B6  .tm-panel     Seitenpanel rechts, 420 px, Schleier, ESC schliesst
     B7  .tm-skelett   graue Zeilen mit Schimmer waehrend des Ladens
     B8  .tm-monat     Monatswahl ‹ Monat JJJJ › als Segment
     B10 Scrollbalken  EINE Regel fuer alle Bereiche (loest sieben ab)
     B11 Sonne→Mond    Hell/Dunkel dreht statt zu springen
     B12 .tm-staffel   Listenzeilen erscheinen gestaffelt

   Die Abstaende kommen aus den neuen Tokens --sp-1 … --sp-8 (B9, tokens.css);
   bestehende Abstaende bleiben unangetastet (Nicht-Ziel der Runde).
   Wie ueberall: nur Token aus tokens.css, kein Farbwert, runde Ecken, hell und
   dunkel stimmen dadurch beide; neue Bausteine brechen bei 900 und 700 px.
   ========================================================================== */

/* ==========================================================================
   B1 · SAMMELKACHEL .tm-samm
   Regel: Mehrere Zahlen EINER Sache stehen in EINER Karte nebeneinander
   (Uebersicht eines Auftrags, eines Containers, eines Artikels). Listen und
   Startseite behalten die Einzelkacheln .tm-tile — dort gehoert jede Zahl zu
   etwas anderem.
   Aufbau:  <div class="card tm-samm">
              <div class="f"><div class="v">12</div><div class="l">Positionen</div></div>
              …
            </div>
   ========================================================================== */
.tm .tm-samm{display:flex;flex-wrap:wrap;align-items:stretch}
.tm .tm-samm>.f{flex:1 1 0;min-width:120px;padding:var(--sp-5) var(--sp-6);
  border-left:1px solid var(--line)}
.tm .tm-samm>.f:first-child{border-left:0}
.tm .tm-samm .v{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.1;
  color:var(--ink);font-variant-numeric:tabular-nums}
.tm .tm-samm .l{font-size:12.5px;font-weight:700;color:var(--ink-2);margin-top:var(--sp-1)}
/* Eine Einheit gehoert an die Zahl, nicht in die Beschriftung (Vorlage Regel 20). */
.tm .tm-samm .v .e{font-size:15px;font-weight:700;color:var(--ink-2);margin-left:3px;
  letter-spacing:0}
@media (max-width:900px){
  .tm .tm-samm>.f{flex:1 1 40%}
}
@media (max-width:700px){
  .tm .tm-samm>.f{flex:1 1 100%;border-left:0;border-top:1px solid var(--line);
    padding:var(--sp-4) var(--sp-5)}
  .tm .tm-samm>.f:first-child{border-top:0}
}

/* ==========================================================================
   B2 · ZUSTANDSKARTE .tm-zustand
   Regel: Zustandskarten STATT Reiter — eine Karte je Zustand, untereinander,
   Reihenfolge = Ablauf des Vorgangs. Der Streifen links traegt die Farbe des
   Zustands (Vorlage Regel 18, dieselbe Tabelle wie .card.streifen-*); die
   Familienklasse setzt --st, die Karte liest nur diese eine Variable.
   Aufbau:  <details class="card tm-zustand zustand-gold" data-karte="entwurf" open>
              <summary class="tm-zustand-kopf">
                <span class="t">Entwurf</span><span class="cnt">4</span>
                <span class="r">9 weitere</span></summary>
              <div class="tm-zustand-inhalt"> … Tabelle … </div>
            </details>
   Auf- und zugeklappt merkt sich der Browser je Benutzer
   (localStorage tm2.zustand.<seite>.<karte>, tm_design/aktion.js).
   ========================================================================== */
.tm .tm-zustand{--st:var(--line-2);border-left:6px solid var(--st);display:block}
.tm .tm-zustand.zustand-gold {--st:var(--gold)}
.tm .tm-zustand.zustand-info {--st:var(--info)}
.tm .tm-zustand.zustand-good {--st:var(--good)}
.tm .tm-zustand.zustand-crit {--st:var(--crit)}
.tm .tm-zustand.zustand-amber{--st:var(--amber)}
.tm .tm-zustand.zustand-slate{--st:var(--slate)}
.tm .tm-zustand.zustand-teal {--st:var(--teal)}
.tm .tm-zustand+.tm-zustand{margin-top:var(--sp-4)}

/* Kopfzeile: Titel, Zaehlpille, rechts der Hinweis oder Link. Als <summary>
   traegt sie den Klick; das Dreieck des Browsers entfaellt, der Pfeil rechts
   ist unserer. */
.tm .tm-zustand-kopf{display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);cursor:pointer;list-style:none;
  font-size:14px;font-weight:800;color:var(--ink)}
.tm .tm-zustand-kopf::-webkit-details-marker{display:none}
.tm .tm-zustand-kopf .cnt{font-size:11.5px;font-weight:800;padding:2px 9px;
  border-radius:var(--r-pill);background:var(--surface-sunken);color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.tm .tm-zustand-kopf .r{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--muted)}
.tm .tm-zustand-kopf .r a{font-weight:700}
.tm .tm-zustand-kopf::after{content:"";width:8px;height:8px;flex:0 0 auto;
  border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--t-fast)}
.tm .tm-zustand[open] .tm-zustand-kopf::after{transform:rotate(-135deg) translate(-2px,-2px)}
.tm .tm-zustand-kopf:hover{background:var(--row-hover)}
.tm .tm-zustand-inhalt{padding:0 var(--sp-5) var(--sp-4)}
.tm .tm-zustand-inhalt>table{width:100%}

/* Aufklappen mit Hoehe statt Sprung (200 ms). Chrome und Safari koennen den
   Inhalt eines <details> seit 2025 selbst animieren (::details-content); wo
   das fehlt, klappt die Karte wie bisher sofort auf — bedienbar ist sie in
   beiden Faellen. `interpolate-size` erlaubt den Weg auf `auto`. */
:root{interpolate-size:allow-keywords}
.tm details.tm-zustand::details-content{block-size:0;overflow:hidden;
  transition:block-size .2s cubic-bezier(.4,0,.2,1),content-visibility .2s cubic-bezier(.4,0,.2,1);
  transition-behavior:allow-discrete}
.tm details.tm-zustand[open]::details-content{block-size:auto}

/* ==========================================================================
   B3 · SEITENLEISTE
   1. 290 px offen (--rail-offen, tokens.css) — die langen Namen passen, in
      beiden Sprachen (Nachlauf 14.09.2026: 270 px reichten fuer die deutschen,
      nicht fuer „Purchasing & containers").
   2. Keine Auslassung mehr an der Beschriftung: sie steht ganz da. Die Zeile
      schneidet weiterhin ab, damit die eingeklappte Schiene (Beschriftung
      unsichtbar, V3.7.9) nicht quer scrollt.
   3. Untermenue-Pfeil 20 px.
   4. Der Zaehler ist ein Punkt (.punkt) statt einer Pille mit Zahl; die Zahl
      steht in data-zahl und erscheint beim Ueberfahren oder mit der Tastatur
      als Sprechblase (.tm-tip) darueber. Eingeklappt bleibt der Punkt an der
      Ecke des Symbols, wie seit V3.6.2.
   ========================================================================== */
.tm-rail-item .t{overflow:visible;text-overflow:clip;white-space:nowrap}
.tm-rail-zeile>.tm-rail-item{overflow:hidden}
.tm-rail-auf{width:20px;height:20px;right:8px}
.tm-rail-auf svg{width:20px;height:20px}
.tm-rail.js .tm-rail-zeile>.tm-rail-item{padding-right:30px}

/* ---------- Der Punkt ---------- */
.tm .tm-rail-item .punkt{position:relative;margin-left:auto;flex:0 0 auto;
  width:9px;height:9px;border-radius:var(--r-pill);background:var(--gold);
  box-shadow:0 0 0 3px var(--gold-soft)}
html.tm-bewegt .tm-rail-item .punkt{animation:tm-punkt-puls .15s ease-out}
@keyframes tm-punkt-puls{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- Die Sprechblase mit der Zahl ---------- */
/* Die Flaeche ist der Seitengrund (--page) mit Tinte darauf; sichtbar wird sie
   durch den Schatten, nicht durch eine zweite Farbe (keine neuen Farben). */
.tm .tm-tip{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translate(-50%,3px);
  padding:3px 8px;border-radius:var(--r-md);background:var(--page);color:var(--ink);
  font:700 11.5px var(--font);font-variant-numeric:tabular-nums;white-space:nowrap;
  box-shadow:var(--shadow-3);pointer-events:none;opacity:0;z-index:5;
  transition:opacity var(--t-fast),transform var(--t-fast)}
.tm .tm-rail-item:hover .tm-tip,.tm .tm-rail-item:focus-visible .tm-tip,
.tm .tm-rail-item:focus .tm-tip{opacity:1;transform:translate(-50%,0)}
/* Eingeklappt sitzt der Punkt an der Ecke des Symbols (Stand V3.6.2). */
html[data-rail="zu"] .tm-rail-item .punkt{position:absolute;top:4px;right:5px;margin:0;
  box-shadow:0 0 0 2px var(--rail-bg)}
html[data-rail="zu"] .tm-rail-item.on .punkt{box-shadow:0 0 0 2px var(--rail-active-bg)}

/* ---------- Untermenue mit Hoehe statt Sprung ----------
   Das Untermenue steht serverseitig offen oder zu (Klasse `auf`, V3.2.8).
   Statt display:none/flex laeuft jetzt die Hoehe; der Wechsel ist damit eine
   Bewegung von 200 ms und kein Sprung. Eingeklappt bleibt es bei der alten
   Schaltung (dort traegt jede Zeile ihren Punkt, V3.7.9). */
html.tm-bewegt .tm-rail-sub{display:flex;overflow:hidden;
  transition:grid-template-rows .2s cubic-bezier(.4,0,.2,1)}
html.tm-bewegt .tm-rail-modul:not(.auf) .tm-rail-sub{display:none}

/* ==========================================================================
   B4 · FORMULARRASTER .formraster.frei
   Regel: Feldlaenge nach Inhalt. Zwoelf Spalten, die Breite steht als Klasse
   am Feld: Name .b6 · Zusatz .b6 · Strasse .b9 · Nr. .b3 · PLZ .b4 · Ort .b8 ·
   Land .b6 · Telefon .b6 · Mail .b12. Unter 700 px ist alles .b12.
   Abstaende: Beschriftung → Feld 6 px (.field, Bestand), Feld → naechste
   Beschriftung 14 px (Zeilenabstand des Rasters, wie .formraster).
   ========================================================================== */
.tm .formraster.frei{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px 18px}
.tm .formraster.frei>.b3 {grid-column:span 3}
.tm .formraster.frei>.b4 {grid-column:span 4}
.tm .formraster.frei>.b6 {grid-column:span 6}
.tm .formraster.frei>.b8 {grid-column:span 8}
.tm .formraster.frei>.b9 {grid-column:span 9}
.tm .formraster.frei>.b12{grid-column:1/-1}
.tm .formraster.frei>.breit{grid-column:1/-1}
@media (max-width:700px){
  .tm .formraster.frei{grid-template-columns:minmax(0,1fr)}
  .tm .formraster.frei>*{grid-column:1/-1}
}

/* ==========================================================================
   B5 · RUECKMELDUNG .tm-echo
   Bleibt unten rechts (V3.5.1) und bekommt zwei Arten und eine Bewegung:
   .ok mit Haken (--good), .fehler mit Punkt (--crit); eingeblendet wird von
   unten (12 px, 250 ms), gesteuert ueber die Klasse .an (tm_design/aktion.js),
   danach steht `hidden` wieder da.
   Dazu .tm-blitz — das kurze Aufblitzen einer Zeile nach einer Aktion; es ist
   dieselbe Bewegung, die eine Sprungmarke seit V3 ausloest (tmflash).
   ========================================================================== */
.tm .tm-echo{display:flex;align-items:center;gap:var(--sp-2);
  opacity:0;transform:translateY(12px);
  transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1)}
.tm .tm-echo.an{opacity:1;transform:translateY(0)}
.tm .tm-echo.ok::before{content:"";flex:0 0 auto;width:6px;height:11px;margin:-3px 3px 0 0;
  border:solid var(--good);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.tm .tm-echo.fehler::before{content:"";flex:0 0 auto;width:9px;height:9px;
  border-radius:var(--r-pill);background:var(--crit)}
.tm .tm-blitz,.tm tr.tm-blitz>td{animation:tmflash 1.8s ease}

/* ==========================================================================
   B6 · SEITENPANEL .tm-panel
   Rechts, 420 px breit (unter 700 px die ganze Breite), faehrt in 200 ms von
   rechts ein. Der Schleier ist die eigene Flaeche des <aside> (::before, Token
   --schleier) — ein Klick darauf schliesst, ebenso ESC; der Fokus wandert beim
   Oeffnen hinein und beim Schliessen zurueck (tm_design/aktion.js).
   Aufbau:  <aside class="tm-panel" id="…" hidden>
              <div class="tm-panel-kopf"><h2>Titel</h2><button class="tm-panel-zu">✕</button></div>
              <div class="tm-panel-inhalt"> … </div>
            </aside>
   ========================================================================== */
.tm .tm-panel{position:fixed;inset:0;z-index:1150;display:block}
.tm .tm-panel[hidden]{display:none}
.tm .tm-panel::before{content:"";position:fixed;inset:0;background:var(--schleier);
  opacity:0;transition:opacity .2s cubic-bezier(.4,0,.2,1)}
.tm .tm-panel.an::before{opacity:1}
.tm .tm-panel-kopf,.tm .tm-panel-inhalt{position:relative;z-index:1;background:var(--surface)}
/* Das Blatt selbst: rechts angeschlagen, volle Hoehe, eigener Scrollbereich. */
.tm .tm-panel-kopf{position:fixed;top:0;right:0;width:min(420px,100vw);box-sizing:border-box;
  display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-5) var(--sp-5) var(--sp-3);
  border-radius:var(--r-xl) 0 0 0;box-shadow:var(--shadow-3);
  transform:translateX(100%);transition:transform .2s cubic-bezier(.4,0,.2,1)}
.tm .tm-panel-inhalt{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);box-sizing:border-box;
  padding:calc(var(--sp-8) + var(--sp-6)) var(--sp-5) var(--sp-6);overflow:auto;
  overscroll-behavior:contain;background:var(--surface);box-shadow:var(--shadow-3);
  transform:translateX(100%);transition:transform .2s cubic-bezier(.4,0,.2,1)}
.tm .tm-panel.an .tm-panel-kopf,.tm .tm-panel.an .tm-panel-inhalt{transform:translateX(0)}
.tm .tm-panel-kopf{z-index:2}
.tm .tm-panel-kopf h2{margin:0;font-size:16px;font-weight:800;letter-spacing:-.02em}
.tm .tm-panel-zu{margin-left:auto;width:32px;height:32px;flex:0 0 auto;display:grid;place-items:center;
  border:none;border-radius:var(--r-md);background:none;color:var(--muted);cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast)}
.tm .tm-panel-zu:hover{background:var(--surface-sunken);color:var(--ink)}
.tm .tm-panel-zu svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
@media (max-width:700px){
  /* Wie jeder Dialog unter 700 px ein Blatt: volle Breite, oben rund
     (Abschnitt „8 · KERN — Dialoge werden zum Blatt"). */
  .tm .tm-panel-kopf,.tm .tm-panel-inhalt{width:100vw}
  .tm .tm-panel-kopf{border-radius:var(--r-xl) var(--r-xl) 0 0}
}

/* ==========================================================================
   B7 · SKELETT .tm-skelett
   Graue Zeilen mit Schimmer, solange eine Liste laedt. Drei Breiten im
   Wechsel (60 / 90 / 75 %), damit es nach Text aussieht und nicht nach einem
   Balkendiagramm.
   ========================================================================== */
.tm .tm-skelett{display:grid;gap:var(--sp-3);padding:var(--sp-3) 0}
.tm .tm-skelett>i{display:block;height:12px;border-radius:var(--r-pill);
  background-image:linear-gradient(90deg,var(--surface-sunken) 0%,var(--surface-3) 50%,var(--surface-sunken) 100%);
  background-size:220% 100%;animation:tm-schimmer 1.2s linear infinite}
.tm .tm-skelett>i:nth-child(3n+1){width:60%}
.tm .tm-skelett>i:nth-child(3n+2){width:90%}
.tm .tm-skelett>i:nth-child(3n+3){width:75%}
@keyframes tm-schimmer{from{background-position:120% 0}to{background-position:-120% 0}}

/* ==========================================================================
   B8 · MONATSWAHL .tm-monat
   ‹ September 2026 › als Segment-Variante mit zwei Pfeilknoepfen; steht neben
   einem .seg „Monat | Zeitraum". Der gewaehlte Monat steht als data-monat
   („JJJJ-MM") am Baustein; ein Klick auf einen Pfeil setzt ihn weiter und
   loest `change` aus (tm_design/aktion.js) — die Seite holt sich daraufhin
   ihren Ausschnitt, ohne neu zu laden.
   Aufbau:  <div class="seg tm-monat" data-monat="2026-09">
              <button type="button" data-schritt="-1">‹</button>
              <span class="m">September 2026</span>
              <button type="button" data-schritt="1">›</button>
            </div>
   ========================================================================== */
.tm .seg.tm-monat{align-items:stretch}
.tm .seg.tm-monat>.m{display:inline-flex;align-items:center;justify-content:center;
  min-width:150px;height:40px;padding:0 var(--sp-4);background:var(--surface);color:var(--ink);
  font:800 13.5px var(--font);letter-spacing:-.01em;border-left:1px solid var(--line-2);
  font-variant-numeric:tabular-nums}
.tm .seg.tm-monat>button{padding:0 var(--sp-4);font-size:16px;line-height:1}
@media (max-width:700px){
  .tm .seg.tm-monat>.m{min-width:0;flex:1 1 auto;height:44px}
}

/* ==========================================================================
   B10 · SCROLLBALKEN — EINE REGEL
   Sieben Fassungen (V3.2.5, V3.3.1, V3.4.1, V3.4.2, V3.4.3, V3.4.5, V3.4.8,
   V3.6.2) und die eigene des Portals sind entfernt; hier steht die einzige.
   Sie gilt fuer JEDEN Scrollbereich — Fenster, Schiene, Tabellen, Listen,
   Postfachspalten, Panel, Portal:
     7 px, rund, ohne Spur, Daumen --line-2 (beim Zeigen --muted),
     IMMER sichtbar (kein Verstecken bis zur Mausberuehrung),
     Rinne dauerhaft reserviert, damit beim Auftauchen nichts springt,
     kein Weiterscrollen des Bereichs darunter (overscroll-behavior).
   Die Klassen .scrollt und .rand aus kern/layout.php bleiben, sie steuern nur
   noch den Schatten des Kopfbandes.
   ========================================================================== */
.tm ::-webkit-scrollbar,html::-webkit-scrollbar,::-webkit-scrollbar{width:7px;height:7px}
.tm ::-webkit-scrollbar-track,html::-webkit-scrollbar-track,::-webkit-scrollbar-track,
.tm ::-webkit-scrollbar-corner,html::-webkit-scrollbar-corner,::-webkit-scrollbar-corner{background:transparent}
.tm ::-webkit-scrollbar-thumb,html::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb{
  background:var(--line-2);border:0;border-radius:var(--r-pill);background-clip:padding-box}
.tm ::-webkit-scrollbar-thumb:hover,html::-webkit-scrollbar-thumb:hover,::-webkit-scrollbar-thumb:hover,
.tm ::-webkit-scrollbar-thumb:active,::-webkit-scrollbar-thumb:active{background:var(--muted)}
/* Firefox kennt die Webkit-Wahler nicht und nimmt die beiden
   Standard-Eigenschaften — dieselbe Optik, dieselben Token. */
html,.tm,.tm *{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
/* Rinne: die grossen Scrollflaechen des Kerns und jeder Bereich, der sich als
   Scrollcontainer kennzeichnet ([data-scroll]). Ein neuer Scrollbereich traegt
   entweder dieses Merkmal oder wird hier aufgenommen — ein zweites Regelwerk
   dafuer gibt es nicht mehr. */
.tm-main,.tm-rail-menue,.portal-rail-menue,.tm .tm-panel-inhalt,.tm [data-scroll]{scrollbar-gutter:stable}
/* Scroll-Stopp an Schiene, Panel und Portal-Leiste. */
.tm-rail,.tm-rail-menue,.portal-rail-menue,.tm .tm-panel,.tm .tm-panel-inhalt{overscroll-behavior:contain}

/* ==========================================================================
   B11 · HELL/DUNKEL: SONNE DREHT SICH ZUM MOND
   Beide Zeichen liegen uebereinander in derselben Rasterzelle. Beim Wechsel
   dreht die Sonne 90 Grad weg und blendet aus, der Mond kommt aus −90 Grad
   herein (300 ms). Die Flaechen (Seite, Inhalt, Karten, Schiene) wechseln
   ihre Farbe im selben Takt, damit nicht das eine springt und das andere
   laeuft. Alles erst nach dem ersten Zeichnen (html.tm-bewegt) — sonst
   animierte schon das Laden der Seite.
   ========================================================================== */
.tm .tm-theme .sun,.tm .tm-theme .moon{grid-area:1/1;display:block}
.tm .tm-theme .sun{opacity:1;transform:rotate(0deg)}
.tm .tm-theme .moon{opacity:0;transform:rotate(-90deg)}
[data-theme="dark"] .tm .tm-theme .sun{opacity:0;transform:rotate(90deg)}
[data-theme="dark"] .tm .tm-theme .moon{opacity:1;transform:rotate(0deg)}
html.tm-bewegt .tm-theme .sun,html.tm-bewegt .tm-theme .moon{
  transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1)}
html.tm-bewegt,html.tm-bewegt .tm,html.tm-bewegt .tm-main,html.tm-bewegt .tm .card{
  transition:background-color .3s cubic-bezier(.4,0,.2,1),color .3s cubic-bezier(.4,0,.2,1)}
/* Die Schiene traegt schon einen Uebergang (Breite, Schatten — V3.7.4); er
   steht hier vollstaendig noch einmal, weil `transition` eine Eigenschaft ist
   und sich nicht ergaenzen laesst. Unter 900 px bleibt der Abschnitt MOBIL
   zustaendig (dort laeuft `transform`), darum die Grenze bei 901 px. */
@media (min-width:901px){
  html.tm-bewegt .tm-rail{transition:width var(--t-rail),box-shadow var(--t-rail),
    background-color .3s cubic-bezier(.4,0,.2,1),color .3s cubic-bezier(.4,0,.2,1)}
}

/* ==========================================================================
   B12 · BEWEGUNGSKATALOG DIESER RUNDE
   Punkt-Puls (B3), Untermenue mit Hoehe (B3), Rueckmeldung (B5), Panel (B6),
   Skelett (B7), Sonne→Mond (B11) stehen bei ihrem Baustein. Hier bleibt das
   gestaffelte Erscheinen von Listenzeilen: 30 ms je Zeile, nach der achten
   ohne weiteren Verzug — sonst wartet die letzte Zeile einer langen Liste
   laenger, als die Liste zum Laden braucht.
   ========================================================================== */
@keyframes tm-auf{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.tm .tm-staffel>*{animation:tm-auf .18s cubic-bezier(.4,0,.2,1) both}
.tm .tm-staffel>*:nth-child(1){animation-delay:0ms}
.tm .tm-staffel>*:nth-child(2){animation-delay:30ms}
.tm .tm-staffel>*:nth-child(3){animation-delay:60ms}
.tm .tm-staffel>*:nth-child(4){animation-delay:90ms}
.tm .tm-staffel>*:nth-child(5){animation-delay:120ms}
.tm .tm-staffel>*:nth-child(6){animation-delay:150ms}
.tm .tm-staffel>*:nth-child(7){animation-delay:180ms}
.tm .tm-staffel>*:nth-child(n+8){animation-delay:210ms}

/* ==========================================================================
   BEWEGUNGSARM — jede Bewegung dieser Runde auf 0
   Die allgemeine Regel im Abschnitt „RESPONSIV & BEWEGUNGSARM" kuerzt bereits
   alles innerhalb von .tm; das <html> selbst steht ausserhalb davon, und die
   neuen Bausteine stehen hier noch einmal ausdruecklich, damit sie beim
   naechsten Umbau nicht verloren gehen.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html,html.tm-bewegt,html.tm-bewegt .tm,html.tm-bewegt .tm-main,html.tm-bewegt .tm .card,
  html.tm-bewegt .tm-theme .sun,html.tm-bewegt .tm-theme .moon,
  .tm .tm-echo,.tm .tm-panel::before,.tm .tm-panel-kopf,.tm .tm-panel-inhalt,
  .tm .tm-tip,.tm .tm-zustand-kopf::after,
  .tm details.tm-zustand::details-content,html.tm-bewegt .tm-rail-sub{transition:none}
  html.tm-bewegt .tm-rail-item .punkt,.tm .tm-staffel>*,.tm .tm-skelett>i,
  .tm .tm-blitz,.tm tr.tm-blitz>td{animation:none}
  @media (min-width:901px){
    html.tm-bewegt .tm-rail{transition:none}
  }
}

/* ============================================================================
   V3.8.1 — NACHLAUF 14.09.2026
   Die gesammelten Punkte „An Design uebergeben" der sechs Modullaeufe dieser
   Runde. Keiner davon ist ein neuer Gedanke — jeder steht in einem Ergebnis
   und ersetzt dort eine Behelfsloesung (Inline-Mass, geliehene Klasse,
   fehlende Farbe). Quellen:
     90_Archiv/bau-2026-09-14_dashboard/ERGEBNIS.md   Abschnitt 6, Punkte 1–4
     90_Archiv/bau-2026-09-14_auftrag/ERGEBNIS.md     Abschnitt 8, Punkte 1–4
     90_Archiv/bau-2026-09-14_einstellungen/ERGEBNIS.md Abschnitt 6, Punkte 1–2
     90_Archiv/bau-2026-09-14_picking/ERGEBNIS.md     Abschnitt 7, Punkte 1–2
     90_Archiv/bau-2026-09-14_suche/ERGEBNIS.md       Abschnitt 5, Zeilen 3–4
     90_Archiv/bau-2026-09-14_zeit/ERGEBNIS.md        Abschnitt 5, Punkt 1
   Wie ueberall: nur Token, kein Farbwert, runde Ecken.
   ========================================================================== */

/* ==========================================================================
   1 · STARTSEITE (Lauf „dashboard")
   ========================================================================== */
/* a) Kachelreihe mit freier Kachelzahl.
      Bisher `repeat(4,1fr)` — sechs Kacheln brachen darum in 4 + 2. Mit
      `auto-fit` entscheidet der Platz, wie viele in eine Reihe passen; vier
      Kacheln bleiben vier gleich breite Spalten (auto-fit laesst leere Spuren
      zusammenfallen).
      WARUM ERST AB 1151 px: darunter gelten die beiden Umbruchbreiten aus
      „RESPONSIV & BEWEGUNGSARM" (zwei Spalten ab 1150, eine ab 640) und die
      Handy-Regel aus dem MOBIL-Abschnitt. Sie stehen frueher in der Datei und
      wuerden von einer Regel am Dateiende sonst still ausgehebelt — eine
      Aenderung an bestehenden Umbruchbreiten ist ausdruecklich Nicht-Ziel
      dieser Runde.
      WARUM 165 px (V3.8.2, Entscheidung Haris, Nachlauf 3): die Startseite
      des Bueros hat SECHS Kacheln und sie sollen in EINE Reihe (Nachtrag I2).
      Bei 1440 px Fenster stehen dem Inhalt 1091 px zur Verfuegung; sechs
      Kacheln brauchen 6 x Mindestbreite + 5 x 16 px Abstand. Mit 190 px waeren
      das 1220 px — es passten nur fuenf. Mit 165 px sind es 1070 px, also
      sechs. Vier Kacheln bleiben davon unberuehrt: leere Spuren fallen
      zusammen, die vier teilen sich die volle Breite. */
@media (min-width:1151px){
  .tm-tiles{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
}
/* b) Spaltenverhaeltnis der Startseite: 1,35 : 1 (Nachtrag I3).
      `.cols` selbst bleibt unveraendert bei 1,85 : 1 — die Variante traegt
      eine Klasse mehr und gewinnt damit auch gegen die Umbruchregeln von
      `.cols` (1150 px). Ihr eigener Umbruch liegt bei 900 px, wie im
      Nachtrag genannt. */
.tm .cols.dash{grid-template-columns:1.35fr 1fr}
@media (max-width:900px){
  .tm .cols.dash{grid-template-columns:minmax(0,1fr)}
}
/* c) Tagesbeschriftung unter den Balken (wahlweise).
      Die Beschriftung sitzt IM Balken und wird unter ihn gezeichnet; nur so
      behaelt jeder Balken seine Hoehe (sie steht als Inline-Prozentwert an
      `.db`) und die Beschriftung seine Breite. Ohne `.lbl` aendert sich
      nichts — `:has()` reserviert den Platz nur, wenn wirklich eine da ist. */
.tm .daybars .db{position:relative}
.tm .daybars .lbl{position:absolute;top:100%;left:0;right:0;margin-top:5px;
  text-align:center;font-size:11.5px;font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tm .daybars:has(.lbl){margin-bottom:22px}

/* ==========================================================================
   2 · AUFTRAG (Lauf „auftrag")
   ========================================================================== */
/* a) Dreispaltige Kartenreihe („Paletten | Belege | Spedition").
      Loest das Inline-Raster in module/auftrag/detail.php ab. Zwischen 900
      und 1150 px zwei Spalten, darunter eine — dieselben Stufen wie die
      uebrigen Rasterklassen. */
.tm .drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-5);align-items:start}
@media (max-width:1150px){
  .tm .drei{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .tm .drei{grid-template-columns:minmax(0,1fr)}
}
/* b) Fusszeile der Sammelkachel.
      `.tm-samm` ist eine Flex-Reihe; ein Kind waere sonst eine weitere Zahl.
      `.fuss` nimmt die volle Breite (`flex:1 0 100%`) und steht immer unten
      (`order:99`). Seitlicher Innenabstand wie bei den Zahlenfeldern, damit
      die Knoepfe unter der ersten Zahl beginnen und nicht daneben. */
.tm .tm-samm>.fuss{flex:1 0 100%;order:99;display:flex;flex-wrap:wrap;
  align-items:center;gap:var(--sp-2);padding:var(--sp-4) var(--sp-6);
  border-top:1px solid var(--line)}
/* c) `.hint` — dieselbe Regel wie `.note-txt`, beide Namen.
      Der Nachtrag (F3) nennt `.hint` fuer die Zeile unter einem Haekchen, die
      Designsprache kannte nur `.note-txt`. Statt einen der beiden Namen
      umzuschreiben, tragen ab hier beide dieselbe Regel. */
.tm .hint,.tm .note-txt{color:var(--ink-2);font-size:13px}
/* d) Skelett: `<i>` UND `<span>`.
      B7 stylte nur `> i`; das Listenskript (module/kern/suche_skript.php)
      erzeugt `<span>`. Diese Regel loest die Fassung aus B7 ab — dort steht
      derselbe Inhalt, hier nur mit beiden Elementen. */
.tm .tm-skelett>i,.tm .tm-skelett>span{display:block;height:12px;
  border-radius:var(--r-pill);
  background-image:linear-gradient(90deg,var(--surface-sunken) 0%,var(--surface-3) 50%,var(--surface-sunken) 100%);
  background-size:220% 100%;animation:tm-schimmer 1.2s linear infinite}
.tm .tm-skelett>i:nth-child(3n+1),.tm .tm-skelett>span:nth-child(3n+1){width:60%}
.tm .tm-skelett>i:nth-child(3n+2),.tm .tm-skelett>span:nth-child(3n+2){width:90%}
.tm .tm-skelett>i:nth-child(3n+3),.tm .tm-skelett>span:nth-child(3n+3){width:75%}

/* ==========================================================================
   3 · EINSTELLUNGEN (Lauf „einstellungen")
   ========================================================================== */
/* Untereintraege im Abschnittsmenue abgesetzt: eingerueckt, kleiner, ruhiger
   als die Gruppen darueber. Unter 700 px steht das Menue als waagerechte
   Zeile — dort bleiben nur die Gruppen, sonst scrollt die Zeile endlos. */
.tm .einst-menue-punkt.unter{padding-left:26px;font-size:12.5px;font-weight:600}
@media (max-width:700px){
  .tm .einst-menue-punkt.unter{display:none}
}

/* ==========================================================================
   4 · KOMMISSIONIERUNG (Lauf „picking")
   ========================================================================== */
/* a) Die Marke in Blaugrau fehlte als einzige der zehn Familien (Chip
      „Hinweis", Nachtrag G2). Die Seite behilft sich heute mit `a-slate`;
      mit dieser Zeile ist es dieselbe Farbe aus derselben Quelle wie bei
      allen anderen Familien. */
.tm .tag.t-slate,.tm .badge.t-slate,.tm .chip.t-slate{background:var(--slate-soft);color:var(--slate-on-soft)}
/* b) Chip in der Verlaufsliste: `.loglist li` ist eine Flex-Zeile, der Chip
      wurde in einer schmalen Karte zusammengedrueckt. */
.tm .loglist .tag{flex:0 0 auto;align-self:flex-start}

/* ==========================================================================
   5 · SUCHE (Lauf „suche")
   ========================================================================== */
/* a) Das Kennzeichen „aehnlich" steht heute als `.badge b-neutral` und traegt
      damit eine Flaeche — es ist aber eine Randbemerkung, kein Zustand.
      Ab hier ohne Flaeche, nur Tinte, mit Abstand zum Treffer davor. */
.tm .tm-suche-aehnlich{background:none;color:var(--ink-2);font-size:11.5px;
  font-weight:700;padding:0;margin-left:var(--sp-2)}
/* b) Waehrend eine Liste nachlaedt, tritt sie zurueck. Die Klasse setzt das
      Listenskript ueber `aria-busy` — dieselbe Angabe, die auch die
      Vorlesesoftware hoert, keine zweite Kennzeichnung. */
#liste-inhalt[aria-busy="true"]{opacity:.6;transition:opacity var(--t)}

/* ==========================================================================
   6 · ZEITERFASSUNG (Lauf „zeit")
   ========================================================================== */
/* Beschriftungszelle der Heatmap (Tagesnummer oben, Wochentag unten). Sie
   muss genau so breit sein wie eine Zelle `.tahcells .c` (16 px) und darf
   nicht mitwachsen, sonst laufen Zahl und Zelle auseinander. Radius der
   Wochenend-Variante wie `.c` (5 px, Bestand seit V3). Die Seite zeichnet
   das heute als Inline-Stil — rund 18 KB Markup je Report; mit dieser Klasse
   faellt das weg, sobald der Zeit-Lauf umstellt. */
.tm .tah-lbl{width:16px;flex:0 0 auto;text-align:center;
  font:700 12px/1.4 var(--font);color:var(--ink-2)}
.tm .tah-lbl.we{color:var(--muted);background:var(--surface-sunken);border-radius:5px}

/* ---------- Bewegungsarm ---------- */
@media (prefers-reduced-motion:reduce){
  #liste-inhalt[aria-busy="true"]{transition:none}
  .tm .tm-skelett>i,.tm .tm-skelett>span{animation:none}
}

/* ==========================================================================
   14.10.2026 · Feldbreiten, Zeilenmenue (Vorlage Regeln 23, 24)
   ========================================================================== */
/* Regel 23: kein Feld laeuft ueber die volle Kartenbreite. Breite nach
   Inhalt: kurz (Zahl, Datum, Zeit) · mittel (Text, Auswahl) · lang (Textfeld).
   Unter 700 px gilt weiter die volle Breite (Abschnitt 5). */
.tm .field>input:not([type=checkbox]):not([type=radio]),.tm .field>select,
.tm .fg>input:not([type=checkbox]):not([type=radio]),.tm .fg>select{max-width:560px}
.tm .field>input[type=number],.tm .field>input[type=date],.tm .field>input[type=time],
.tm .fg>input[type=number],.tm .fg>input[type=date],.tm .fg>input[type=time]{max-width:240px}
.tm .field>textarea,.tm .fg>textarea{max-width:880px}
.tm .field.breit>input,.tm .field.breit>select{max-width:880px}
/* Haris 15.10.2026: Seite bleibt voll breit, aber kein Feld groesser als sein
   Inhalt braucht — Text/Auswahl hoechstens 440 px, Zahl/Datum/Zeit 200 px,
   kurze Felder nach maxlength (bis 12 Zeichen 180 px, bis 40 Zeichen 300 px).
   Schluessel-Wert-Zeilen (Bezeichnung links, Wert rechts) laufen nicht ueber
   die ganze Kartenbreite auseinander. */
.tm .field>input:not([type=checkbox]):not([type=radio]),.tm .field>select,
.tm .fg>input:not([type=checkbox]):not([type=radio]),.tm .fg>select{max-width:440px}
.tm .field>input[type=number],.tm .field>input[type=date],.tm .field>input[type=time],
.tm .fg>input[type=number],.tm .fg>input[type=date],.tm .fg>input[type=time]{max-width:200px}
.tm .field>input[maxlength="15"]:not([type=checkbox]):not([type=radio]),.tm .fg>input[maxlength="15"]:not([type=checkbox]):not([type=radio]),.tm .field>input[maxlength="16"]:not([type=checkbox]):not([type=radio]),.tm .fg>input[maxlength="16"]:not([type=checkbox]):not([type=radio]),.tm .field>input[maxlength="20"]:not([type=checkbox]):not([type=radio]),.tm .fg>input[maxlength="20"]:not([type=checkbox]):not([type=radio]),.tm .field>input[maxlength="24"]:not([type=checkbox]):not([type=radio]),.tm .fg>input[maxlength="24"]:not([type=checkbox]):not([type=radio]),.tm .field>input[maxlength="25"]:not([type=checkbox]):not([type=radio]),.tm .fg>input[maxlength="25"]:not([type=checkbox]):not([type=radio]),.tm .field>input[maxlength="30"]:not([type=checkbox]):not([type=radio]),.tm .fg>input[maxlength="30"]:not([type=checkbox]):not([type=radio]),.tm .field>input[maxlength="32"]:not([type=checkbox]):not([type=radio]),.tm .fg>input[maxlength="32"]:not([type=checkbox]):not([type=radio]),.tm .field>input[maxlength="34"]:not([type=checkbox]):not([type=radio]),.tm .fg>input[maxlength="34"]:not([type=checkbox]):not([type=radio]),.tm .field>input[maxlength="35"]:not([type=checkbox]):not([type=radio]),.tm .fg>input[maxlength="35"]:not([type=checkbox]):not([type=radio]),.tm .field>input[maxlength="40"]:not([type=checkbox]):not([type=radio]),.tm .fg>input[maxlength="40"]:not([type=checkbox]):not([type=radio]){max-width:300px}
.tm .field>input[maxlength="1"]:not([type=checkbox]):not([type=radio]),.tm .fg>input[maxlength="1"]:not([type=checkbox]):not([type=radio]),.tm .field>input[maxlength="2"]:not([type=checkbox]):not([type=radio]),.tm .fg>input[maxlength="2"]:not([type=checkbox]):not([type=radio]),.tm .field>input[maxlength="3"]:not([type=checkbox]):not([type=radio]),.tm .fg>input[maxlength="3"]:not([type=checkbox]):not([type=radio]),.tm .field>input[maxlength="4"]:not([type=checkbox]):not([type=radio]),.tm .fg>input[maxlength="4"]:not([type=checkbox]):not([type=radio]),.tm .field>input[maxlength="5"]:not([type=checkbox]):not([type=radio]),.tm .fg>input[maxlength="5"]:not([type=checkbox]):not([type=radio]),.tm .field>input[maxlength="6"]:not([type=checkbox]):not([type=radio]),.tm .fg>input[maxlength="6"]:not([type=checkbox]):not([type=radio]),.tm .field>input[maxlength="7"]:not([type=checkbox]):not([type=radio]),.tm .fg>input[maxlength="7"]:not([type=checkbox]):not([type=radio]),.tm .field>input[maxlength="8"]:not([type=checkbox]):not([type=radio]),.tm .fg>input[maxlength="8"]:not([type=checkbox]):not([type=radio]),.tm .field>input[maxlength="9"]:not([type=checkbox]):not([type=radio]),.tm .fg>input[maxlength="9"]:not([type=checkbox]):not([type=radio]),.tm .field>input[maxlength="10"]:not([type=checkbox]):not([type=radio]),.tm .fg>input[maxlength="10"]:not([type=checkbox]):not([type=radio]),.tm .field>input[maxlength="11"]:not([type=checkbox]):not([type=radio]),.tm .fg>input[maxlength="11"]:not([type=checkbox]):not([type=radio]),.tm .field>input[maxlength="12"]:not([type=checkbox]):not([type=radio]),.tm .fg>input[maxlength="12"]:not([type=checkbox]):not([type=radio]){max-width:180px}
.tm .field.breit>input,.tm .field.breit>select{max-width:880px}
.tm .pad>.row[style*="space-between"]{max-width:620px}
@media (max-width:700px){
  .tm .pad>.row[style*="space-between"]{max-width:none}
  .tm .field>input,.tm .field>select,.tm .field>textarea,
  .tm .fg>input,.tm .fg>select,.tm .fg>textarea{max-width:none}
}

/* Zeilenmenue „…" (Schnellfunktionen je Zeile einer Liste). Die Liste liegt
   in .tscroll (overflow) — das Menue steht deshalb `position:fixed`, die
   Seite setzt top/left beim Oeffnen. */
.tm .tm-zmenue{position:relative;display:inline-block}
.tm .tm-zmenue>summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:34px;height:34px;
  border-radius:var(--r-md);color:var(--ink-2);font-weight:900;letter-spacing:1px;user-select:none}
.tm .tm-zmenue>summary::-webkit-details-marker{display:none}
.tm .tm-zmenue>summary:hover,.tm .tm-zmenue[open]>summary{background:var(--row-hover);color:var(--ink)}
.tm .tm-zmenue-liste{position:fixed;z-index:120;min-width:210px;padding:6px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line-2);box-shadow:0 14px 34px rgba(30,27,41,.16)}
.tm .tm-zmenue-liste a,.tm .tm-zmenue-liste button{display:block;width:100%;text-align:left;border:none;background:none;
  padding:9px 12px;border-radius:var(--r-md);font:600 13.5px var(--font);color:var(--ink);cursor:pointer;text-decoration:none}
.tm .tm-zmenue-liste a:hover,.tm .tm-zmenue-liste button:hover{background:var(--row-hover)}
.tm .tm-zmenue-liste .crit{color:var(--crit)}
.tm .tm-zmenue-liste hr{border:none;border-top:1px solid var(--line);margin:4px 2px}
/* Vorschlagsliste: Pfeiltasten markieren wie Hover (Regel 27). */
.tm .artdrop button.an{background:var(--gold-soft)}
/* Kartenfolge: auch ein Ausschnitt-Wrapper (data-teil) um eine Karte haelt
   den Abstand — „Position hinzufuegen" klebte an „Positionen" (14.10.2026). */
.tm .kartenfolge > [data-teil]{margin-bottom:16px}
.tm .kartenfolge > [data-teil]:last-child{margin-bottom:0}
/* Pick-Zeilen mit festen Spalten (Vorlage Regel 26, 14.10.2026): Artikel ·
   Bestand · Menge · Knoepfe beginnen in jeder Zeile an derselben Stelle,
   auch ohne Artikelnamen. `auto` je Zeile liess die Mengenwahl springen. */
@media(min-width:1180px){
  .tm .picktask,.tm .pickgrid .picktask{grid-template-columns:260px 180px minmax(0,1fr)}
  .tm .picktask .pq,.tm .pickgrid .picktask .pq{justify-content:flex-start}
  .tm .picktask .acts,.tm .pickgrid .picktask .acts{grid-column:3;justify-content:flex-start}
}
@media(min-width:1600px){
  .tm .picktask,.tm .pickgrid .picktask{grid-template-columns:300px 190px minmax(0,1fr) 430px}
  .tm .picktask .acts,.tm .pickgrid .picktask .acts{grid-column:auto}
}
/* Fortschritt des Scannens steht in der Zeile (Regel 25). */
.tm .picktask .pk-fort{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.tm .picktask .pk-fort b{font-variant-numeric:tabular-nums;color:var(--ink)}
.tm .pk-scanoben{margin-bottom:16px}

/* N1 (14.10.2026): Seitenwechsel ohne weisses Aufblitzen — der Browser blendet
   von der alten zur neuen Seite ueber (Chrome 126+, Safari 18.2+); der
   Scrollstand bleibt (V3.4.8). Aeltere Browser laden wie bisher. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ==========================================================================
   14.10.2026 · Beleg-Maske mit Textbausteinen (BP-11 Nachtrag C1)
   Karte „Beleg" am Auftrag, „Belegvorgaben" am Kunden, Liste der
   Textbausteine in den Einstellungen. Vorbelegte Werte grau mit Quelle,
   geaenderte normal (Bauplan Abschnitt 3). Feldbreiten nach Regel 23.
   ========================================================================== */
.tm .bm-zweispaltig{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 28px;align-items:start}
@media (max-width:900px){.tm .bm-zweispaltig{grid-template-columns:1fr}}
.tm .bm-gruppe{border:none;margin:0 0 16px;padding:0;min-width:0}
.tm .bm-gruppe>legend{padding:0;margin-bottom:8px;font-weight:800;font-size:13.5px;color:var(--ink)}
.tm .bm-gruppenname{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:6px 0 4px}
.tm .bm-quelle{margin-left:8px;font-size:12px;font-weight:600;color:var(--muted)}
.tm .bm-steuer{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:4px 18px;margin-bottom:6px}
.tm .bm-steuer label{display:flex;gap:8px;align-items:flex-start;padding:4px 0;font-size:13.5px;line-height:1.35;cursor:pointer}
.tm .bm-steuer input{margin-top:2px;flex:0 0 auto}
.tm .bm-reihe{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:flex-start}
.tm .bm-reihe .field{flex:0 1 auto;min-width:0}
.tm .bm-reihe .field>input[type=number],.tm .bm-reihe .field>input.bm-kurz{width:120px}
.tm .bm-reihe .field>select{width:240px;max-width:100%}
.tm .bm-reihe .field>input{max-width:100%}
/* Am Kunden steht die Karte in der schmalen rechten Spalte: eine Spalte. */
.tm #sd-vorgabe .bm-zweispaltig{grid-template-columns:minmax(0,1fr)}
.tm #sd-vorgabe .field>select{max-width:100%}
.tm .bm-vb,.tm .bm-vb span,.tm input.bm-vb,.tm select.bm-vb,.tm textarea.bm-vb{color:var(--muted)}
.tm .bm-halt{margin:4px 0 6px;font-size:13px;font-weight:700;color:var(--crit)}
.tm .bm-hinweis{padding:10px 18px;font-size:13px;color:var(--ink-2)}
.tm .bm-reiter{margin-bottom:12px}
.tm .bm-tafel[hidden]{display:none}
.tm .bm-tafel .field>select.bm-baustein{display:block;margin-bottom:6px;max-width:360px}
.tm .bm-tafel .field>textarea{min-height:120px}
.tm .bm-haken{display:inline-flex;align-items:center;gap:8px;margin-right:18px}
.tm .bs-inaktiv td{color:var(--muted)}
@media (max-width:700px){
  .tm .bm-reihe .field,.tm .bm-reihe .field>select,.tm .bm-reihe .field>input[type=number],
  .tm .bm-reihe .field>input.bm-kurz{width:100%}
}

/* 14.10.2026: Vorschlagslisten (.artdrop) ragen aus der Karte heraus — die Karte
   schnitt sie bei „Position hinzufuegen" ab (overflow:hidden). */
.tm .card:has(.artdrop.on){overflow:visible;position:relative;z-index:5}

/* 14.10.2026 (Haris: „mit Kurve, überall gleich"): Karten mit Farbstreifen
   tragen ihn wie die Zustandskarten (.tm-zustand) als linken Rand — er folgt
   dem Eckradius. Der gerade ::before-Streifen (V3.5.x) entfällt. */
.tm .card[class*="streifen-"],.tm .card.vsent-card{border-left:6px solid var(--st,var(--line-2));padding-left:0}
.tm .card[class*="streifen-"]::before,.tm .card.vsent-card::before{display:none}
.tm .card.streifen-gold{--st:var(--gold)}
.tm .card.streifen-info{--st:var(--info)}
.tm .card.streifen-good,.tm .card.vsent-card{--st:var(--good)}
.tm .card.streifen-crit{--st:var(--crit)}
.tm .card.streifen-warn,.tm .card.streifen-amber{--st:var(--amber)}
.tm .card.streifen-plum{--st:var(--plum)}
.tm .card.streifen-ink{--st:var(--ink)}
.tm .card.streifen-slate{--st:var(--slate)}
.tm .card.streifen-teal{--st:var(--teal)}
/* Klickbare Zeilen zeigen die Hand — auch dort, wo ein Modul cursor:default setzt (Aufgaben). */
.tm .rowlink,.tm .rowlink td,.tm [data-href]{cursor:pointer}

/* ---- 15.10.2026: Preis/Rabatt in der Artikelzeile, Versand & Service, Text-Editor ---- */
.tm .postab td.pp-sp,.tm .postab th.pp-sp{white-space:nowrap}
.tm .postab .pp-feld,.tm .zp-tab .zp-feld{width:84px;text-align:right;padding:6px 8px;font-variant-numeric:tabular-nums}
.tm .postab th.pp-sp,.tm .postab td.pp-sp{padding-left:6px;padding-right:6px}
.tm .postab .pp-feld.pp-kurz,.tm .pp-alle .pp-kurz{width:60px;text-align:right}
.tm .zp-tab .zp-feld.pp-kurz{width:76px;text-align:right}
.tm .postab .pp-feld::placeholder,.tm .zp-tab .zp-feld::placeholder,.tm .pp-alle input::placeholder{color:var(--muted);opacity:1}
.tm .postab .pp-feld[aria-invalid=true]{border-color:var(--crit)}
.tm .postab .pp-feld[aria-invalid=true]::placeholder{color:var(--crit)}
.tm .postab .pp-gesamt{font-weight:700}
.tm .postab .pm-menge{width:76px;text-align:right;font-weight:800}
.tm .pp-alle{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 18px;border-top:1px solid var(--line)}
.tm .pp-alle label{font-weight:700;font-size:13px}
.tm .zp-tab .zp-wahl{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tm .zp-tab .zp-wahl select{min-width:240px;max-width:360px;width:auto}
.tm .zp-tab td{vertical-align:top}
.tm .zp-karte .zp-neu{border-top:1px solid var(--line)}
.tm .zp-karte .zp-neu select{max-width:420px}
.tm .zp-karte .pp-mittel{width:120px;text-align:right}
.tm .rte{border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden}
.tm .rte:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,145,58,.15)}
.tm .rte-leiste{display:flex;gap:2px;align-items:center;flex-wrap:wrap;padding:4px 6px;border-bottom:1px solid var(--line);background:var(--surface-sunken)}
.tm .rte-leiste button{min-width:30px;height:28px;border:0;border-radius:6px;background:transparent;color:var(--ink);cursor:pointer;font-size:14px}
.tm .rte-leiste button:hover{background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--line)}
.tm .rte-leiste select{height:28px;padding:0 6px;font-size:12.5px;margin-left:auto;max-width:180px}
.tm .rte-flaeche{min-height:96px;max-height:340px;overflow:auto;padding:10px 12px;font-size:14px;line-height:1.5;outline:none;color:var(--ink)}
.tm .rte-flaeche p{margin:0 0 .6em}
.tm .rte-flaeche ul,.tm .rte-flaeche ol{margin:0 0 .6em 1.3em;padding:0}
.tm .rte-flaeche:empty::before{content:attr(data-leer);color:var(--muted)}
.tm .rte.bm-vb .rte-flaeche,.tm .rte.bm-vb .rte-flaeche span{color:var(--muted)!important}
.tm .rte.rte-aus{background:transparent}
.tm .rte.rte-aus .rte-flaeche{color:var(--muted)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tm .rte-flaeche span[style*="color"]{color:inherit!important}
}
:root[data-theme="dark"] .tm .rte-flaeche span[style*="color"]{color:inherit!important}
.tm .rte-flaeche .rte-anrede{background:var(--gold-soft);color:var(--ink);border-radius:6px;padding:0 4px;box-shadow:inset 0 0 0 1px var(--line)}

/* ---- 15.10.2026: Suchergebnisse größer (Haris: „der Text ist da so klein") ---- */
.tm .tm-suche-liste{width:min(560px,92vw);max-height:min(76vh,680px);padding:10px}
.tm .tm-suche-treffer{padding:12px 14px;gap:12px}
.tm .tm-suche-titel{font-size:16px}
.tm .tm-suche-zusatz{font-size:14.5px}
.tm .tm-suche-kennzahlen{font-size:14px;gap:8px;margin-top:5px}
.tm .tm-suche-kennzahlen .badge,.tm .tm-suche-treffer>.badge{font-size:12.5px;padding:4px 11px}
.tm .tm-suche-gkopf{font-size:12.5px}
.tm .tm-suche-meldung,.tm .tm-suche-fuss{font-size:14.5px}
.tm .zp-karte .zp-suche{width:100%;max-width:420px}
.tm .postab .pp-gesamt .pp-menge{font-weight:600;font-size:11.5px;margin-top:2px}
.tm .postab td.pp-sp.note-txt{white-space:nowrap}
/* Auftragsdetail: rechts Lieferadresse und Kommentare nebeneinander (15.10.2026) */
.tm .detinfo-rechts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px;align-items:stretch;min-width:0}
.tm .detinfo-rechts>div>.card{height:100%}
.tm .detinfo-rechts .kommentarkarte .loglist{max-height:220px;overflow-y:auto}
@media (max-width:1300px){ .tm .detinfo-rechts{grid-template-columns:minmax(0,1fr)} }
/* Eingabe mit Auswahlknopf (Kundenwahl, 15.10.2026) */
.tm .kombi{position:relative;display:flex;align-items:center}
.tm .kombi input{width:100%;padding-right:38px}
.tm .kombi-auf{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:8px;
  background:transparent;color:var(--muted);cursor:pointer;font-size:14px}
.tm .kombi-auf:hover{background:var(--surface-sunken);color:var(--ink)}
.tm #f-kunde-drop{max-height:360px;overflow-y:auto}

/* ---- 15.10.2026: Auftragsdetail gegliedert (B1) — Sprungleiste und Bereichsbänder ---- */
.tm .bereichsleiste{position:sticky;top:8px;z-index:30;display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px;padding:6px;
  background:var(--surface);border-radius:var(--r-pill,999px);box-shadow:var(--shadow-2)}
.tm .bereichsleiste a{padding:7px 14px;border-radius:var(--r-pill,999px);font-size:13px;font-weight:700;color:var(--ink-2,var(--ink));text-decoration:none}
.tm .bereichsleiste a:hover{background:var(--surface-sunken);color:var(--ink)}
.tm .bereichskopf{--bk:var(--gold);display:flex;align-items:center;gap:10px;margin:22px 0 12px;padding:10px 16px;
  border-radius:var(--r-lg);background:color-mix(in srgb,var(--bk) 11%,transparent);border-left:6px solid var(--bk);
  scroll-margin-top:72px}
.tm .bereichskopf span{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.tm .bereichskopf:first-of-type{margin-top:6px}
.tm .bereichskopf.b-gold{--bk:var(--gold)} .tm .bereichskopf.b-info{--bk:var(--info)} .tm .bereichskopf.b-good{--bk:var(--good)}
.tm .bereichskopf.b-plum{--bk:var(--plum)} .tm .bereichskopf.b-amber{--bk:var(--amber)} .tm .bereichskopf.b-slate{--bk:var(--slate)}
.tm .kartenfolge>.bereichskopf{margin:8px 0 14px}
@media (max-width:700px){ .tm .bereichsleiste{position:static;border-radius:var(--r-lg)} }
.tm .kommentarkarte .commentbox{display:flex;gap:8px;flex-wrap:wrap}
.tm .kommentarkarte .commentbox input{flex:1 1 160px;min-width:0}
/* Suchtreffer: Felder mit Beschriftung (15.10.2026, Haris: „zu klein und nicht leicht unterscheidbar") */
.tm .tm-suche-kennzahlen{gap:8px;margin-top:8px}
.tm .tm-suche-feld{display:inline-flex;flex-direction:column;gap:1px;padding:6px 10px;border-radius:var(--r-md);
  background:var(--surface-sunken);min-width:64px}
.tm .tm-suche-feld small{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.tm .tm-suche-feld b{font-size:15px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.tm .tm-suche-feld em{font-style:normal;font-size:12px;font-weight:600;color:var(--muted)}
.tm .tm-suche-titel{font-size:16px;line-height:1.35}

/* ==========================================================================
   V3.9.5 (16.10.2026) — Suche, Bereiche, Lager-Verlauf
   ========================================================================== */
/* Suchtreffer Artikel (Haris): alle Felder in EINER Zeile und gleich hoch.
   Die Lageraufteilung steht als kleine Kopfzeile unter dem Titel
   (`.tm-suche-lager`), nicht mehr unter der Kartonzahl. Die Marke
   „verfügbar" sitzt in derselben Zeile und hat dieselbe Höhe. */
.tm .tm-suche-liste{width:min(800px,94vw)}
.tm .tm-suche-lager{font-size:13.5px;font-weight:700;color:var(--ink-2);line-height:1.3;
  font-variant-numeric:tabular-nums}
.tm .tm-suche-kennzahlen{flex-wrap:wrap;align-items:stretch}
.tm .tm-suche-feld{flex:0 0 auto;justify-content:center;min-width:0;padding:6px 10px}
.tm .tm-suche-feld b{white-space:nowrap}
.tm .tm-suche-kennzahlen>.badge{display:inline-flex;align-items:center;flex:0 0 auto;
  border-radius:var(--r-md);white-space:nowrap}
/* Feste gemeinsame Höhe: auch wenn die Zeile auf dem Handy umbricht, ist die
   Marke so hoch wie die Felder. */
.tm .tm-suche-feld,.tm .tm-suche-kennzahlen>.badge{box-sizing:border-box;height:52px}

/* Bereiche (Auftragsdetail, Neuer Auftrag): `.bereich` fasst Band und Karten
   eines Bereichs; die Farbklasse `bf-*` setzt die Bereichsfarbe einmal für
   Band, Karten und den Eintrag der Sprungleiste. Jede Karte darunter trägt
   links den Streifen in dieser Farbe (wie `.card.streifen-*`, 5 px).
   Eine Karte mit eigenem Zustandsstreifen behält ihn — der Zustand sagt mehr
   als der Bereich, und eine Karte hat höchstens einen Streifen (Regel 18). */
.tm .bf-gold{--bk:var(--gold)}   .tm .bf-info{--bk:var(--info)}   .tm .bf-good{--bk:var(--good)}
.tm .bf-plum{--bk:var(--plum)}   .tm .bf-amber{--bk:var(--amber)} .tm .bf-slate{--bk:var(--slate)}
.tm .bereich>.bereichskopf{margin:22px 0 12px}
.tm .bereich:first-of-type>.bereichskopf{margin-top:6px}
/* 20.10.2026 (Haris, Wiederholung von 14.10.: „mit Kurve, überall gleich"):
   der Streifen ist ein linker Rand, der dem Eckradius folgt — nie ein gerader Balken. */
.tm .bereich .card:not([class*="streifen-"]):not(.vsent-card):not(.card .card){border-left:6px solid var(--bk,var(--gold))}
/* Sprungleiste: beim Überfahren eine leichte Fläche in der Bereichsfarbe
   (Fläche, kein Ring — Regel 18). */
.tm .bereichsleiste a{transition:background-color var(--t-fast),color var(--t-fast)}
.tm .bereichsleiste a[class*="bf-"]:hover,.tm .bereichsleiste a[class*="bf-"]:focus-visible{
  background:color-mix(in srgb,var(--bk) 16%,transparent);color:var(--ink)}
@media(prefers-reduced-motion:reduce){ .tm .bereichsleiste a{transition:none} }

/* Lager → Verlauf (Haris): Zahlen in Tabellengröße, Nullen gedämpft,
   Summenspalte hervorgehoben, Kopfzeile und erste Spalte bleiben stehen. */
.tm .verlaufbox{overflow:auto;max-height:calc(100vh - 220px);overscroll-behavior:contain}
.tm table.verlauftab{border-collapse:separate;border-spacing:0;padding:0;font-size:14.5px}
.tm .verlauftab th,.tm .verlauftab td{padding:9px 10px;white-space:nowrap}
.tm .verlauftab thead th{position:sticky;top:0;z-index:3;background:var(--surface);
  font-size:12px;letter-spacing:.04em;color:var(--ink-2);border-bottom:1px solid var(--line)}
.tm .verlauftab tbody td{background:var(--surface);border-bottom:1px solid var(--line)}
.tm .verlauftab tbody tr:hover td{background:var(--row-hover)}
.tm .verlauftab .vl-z{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);text-align:right}
.tm .verlauftab .vl-0{color:var(--muted);font-weight:600;opacity:.55;text-align:right}
.tm .verlauftab .vl-erst{position:sticky;left:0;z-index:2;min-width:310px;max-width:380px;white-space:normal;
  box-shadow:1px 0 0 var(--line)}
.tm .verlauftab thead .vl-erst{z-index:4}
.tm .verlauftab tbody .vl-erst{background:var(--surface)}
.tm .verlauftab tbody tr:hover .vl-erst{background:var(--row-hover)}
.tm .verlauftab .vl-summe{background:var(--gold-soft);color:var(--ink);font-weight:800;text-align:right;
  box-shadow:inset 1px 0 0 var(--line)}
.tm .verlauftab thead .vl-summe{background:var(--gold-soft);color:var(--gold-on-soft)}
.tm .verlauftab tbody tr:hover .vl-summe{background:var(--gold-soft)}
.tm .verlauftab tfoot td{position:sticky;bottom:0;z-index:2;background:var(--surface-sunken);font-weight:800;
  border-top:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
.tm .verlauftab tfoot .vl-erst{z-index:4;background:var(--surface-sunken);text-align:left}
.tm .verlauftab tfoot .vl-summe{background:var(--gold-soft)}
.tm .verlauftab .vl-jahr{box-shadow:inset 2px 0 0 var(--line-2,var(--line))}
/* 25.10.2026 (Haris: „Die Anordnung im Suchelement ist nicht ordentlich"):
   Filter der Bestandsübersicht — oben die Eingaben in einem Raster gleicher
   Höhe, darunter die Schalter links und die Knöpfe rechts. */
.tm .lagerfilter{display:flex;flex-direction:column;gap:16px;padding:20px 22px}
.tm .lagerfilter-felder{display:grid;grid-template-columns:minmax(220px,1.6fr) minmax(260px,1.6fr) 130px minmax(190px,1.1fr);gap:16px;align-items:end}
.tm .lagerfilter-felder .field{margin-bottom:0;min-width:0}
.tm .lagerfilter-unten{display:flex;gap:12px 20px;flex-wrap:wrap;align-items:center;justify-content:space-between;
  padding-top:14px;border-top:1px solid var(--line)}
.tm .lagerfilter-schalter{display:flex;gap:10px 20px;flex-wrap:wrap;font-size:13.5px;flex:1 1 360px}
.tm .lagerfilter-schalter label{display:flex;gap:8px;align-items:center;cursor:pointer;white-space:nowrap}
.tm .lagerfilter-knoepfe{display:flex;gap:10px;flex-wrap:wrap}
.tm .feld-einheit{display:flex;align-items:center;gap:8px}
.tm .feld-einheit input{flex:1;min-width:0}
.tm .feld-einheit span{font-weight:700;color:var(--muted)}
@media (max-width:1100px){ .tm .lagerfilter-felder{grid-template-columns:1fr 1fr} }
@media (max-width:700px){
  .tm .lagerfilter-felder{grid-template-columns:1fr}
  .tm .lagerfilter-knoepfe{width:100%} .tm .lagerfilter-knoepfe .btn{flex:1}
}

/* 25.10.2026 (Haris, „Nur Scan-Liste"): Umlagerung — Richtung als zwei große
   Flächen, Kartonzahl mit − / + in der Zeile, Fußzeile mit „Umbuchen". */
.tm .uml-richtung{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.tm .uml-richtung form{margin:0}
.tm .uml-richtung button.uml-richtung-knopf{width:100%;height:auto;display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  text-align:left;padding:28px 26px;cursor:pointer;border:0;font:inherit;line-height:1.3;
  background:var(--surface);color:var(--ink);border-radius:var(--r-xl);box-shadow:var(--shadow-2);transition:transform var(--t-fast)}
.tm .uml-richtung-knopf b{font-size:24px;font-weight:800;letter-spacing:-.01em}
.tm .uml-richtung-knopf span{color:var(--ink-2);font-size:14px}
.tm .uml-richtung-knopf:hover{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){ .tm .uml-richtung-knopf{transition:none} .tm .uml-richtung-knopf:hover{transform:none} }
.tm .uml-menge{display:inline-flex;align-items:center;gap:10px}
.tm .uml-menge b{min-width:2.2em;text-align:center;font-size:16px}
.tm .uml-fuss{display:flex;gap:12px 20px;flex-wrap:wrap;align-items:center;justify-content:space-between;
  padding:16px 22px;border-top:1px solid var(--line)}
@media (max-width:700px){ .tm .uml-fuss .btn{width:100%} }

/* 25.10.2026 (Haris: „Bei Verlauf kleben die Sachen so zusammen"): mehr Luft
   in jeder Zelle, Monatsspalten mit fester Mindestbreite und mittig, Nummer und
   Name in der ersten Spalte mit eigenem Abstand. */
.tm .verlauftab th,.tm .verlauftab td{padding:12px 14px}
.tm .verlauftab thead th:not(.vl-erst):not(.vl-summe),
.tm .verlauftab tbody td:not(.vl-erst):not(.vl-summe),
.tm .verlauftab tfoot td:not(.vl-erst):not(.vl-summe){min-width:58px;text-align:center}
.tm .verlauftab .vl-summe{min-width:76px;padding-left:18px;padding-right:18px}
.tm .verlauftab .vl-erst{min-width:340px;padding-left:20px}
.tm .verlauftab .vl-erst .artcell{gap:16px}
@media (max-width:700px){
  .tm .verlauftab .vl-erst{min-width:150px;max-width:180px}
  .tm .verlaufbox{max-height:none}
}

/* 20.10.2026 (Haris: „Abstände überall einhalten"): ein Innenbereich, der als
   ERSTES in einer Karte steht, hält immer seinen oberen Abstand — auch wenn die
   Seite `padding-top:0` setzt (gedacht für Innenbereiche UNTER einer Kopfzeile). */
.tm .card>.pad:first-child,.tm .card>form.pad:first-child{padding-top:18px!important}

/* 20.10.2026 (Pick, zweite Runde): Stückzahl der losen Zeile nach einer
   Übernahme ist ein Eingabefeld im Stepper — gleiche Maße wie die Anzeige.
   Dasselbe Feld in der Stückfrage der Scan-Karte (#pk-stueck). */
.tm .stp .pk-stk-zahl{width:72px;min-width:64px;height:40px;border:0;border-left:1px solid var(--line-2);
  border-right:1px solid var(--line-2);background:var(--surface);color:var(--ink);
  text-align:center;font-weight:800;font-size:18px;font-variant-numeric:tabular-nums;padding:0 4px;
  -moz-appearance:textfield;appearance:textfield}
.tm .stp .pk-stk-zahl::-webkit-outer-spin-button,.tm .stp .pk-stk-zahl::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tm .stp .pk-stk-zahl:focus{outline:2px solid var(--focus,var(--gold));outline-offset:-2px}
/* Karte „Etiketten zum Umpacken": die Zeilen stehen untereinander in der Karte. */
.tm .pk-etiketten .etikettzeile:last-of-type{margin-bottom:14px}

/* ---------- 21.10.2026 (Haris): Umpacken je Auftrag, „für Kunde speichern" ----------
   Karte „Umpacken" am Auftrag (Setgröße für den Auftrag, je Position eine
   Zeile), Zeile der Karte „Umpacken" in der Kommissionierung (Anzahl +
   Drucken) und der kleine Knopf „für Kunde speichern" am Feld. Keine
   Farbwerte — nur Abstände und Anordnung. */
.tm .um-abstand{height:16px}
.tm .um-reihe{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap}
.tm .um-reihe input[type=number]{width:120px;max-width:120px}
.tm .um-tab td{vertical-align:middle}
.tm .um-tab input.pp-kurz{width:84px}
.tm .um-zeile .um-titel{display:flex;flex-direction:column;gap:3px;min-width:0}
.tm .um-zeile .pk-etikettzahl{white-space:normal}
.tm .um-zeile .um-druck{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.tm .um-zeile .um-druck .um-anzahl{width:76px;height:34px;text-align:right}
.tm .um-zeile .um-druck .btn{margin-left:0}
.tm .gh .um-alle{margin-left:auto}
.tm .fk-knopf,.tm .fk-neu{margin-left:8px;vertical-align:middle}
.tm .field>.fk-knopf,.tm .field>.fk-neu{align-self:flex-start;margin:2px 0 0}
@media (max-width:768px){
  .tm .um-zeile .um-druck{margin-left:0;width:100%}
  .tm .um-zeile .um-druck .btn{flex:1}
  .tm .gh .um-alle{margin-left:0;width:100%}
}

/* ---------- 22.10.2026 (Haris): Versand & Belege, Abstände ----------
   Auftragsdetail, Bereich „Versand & Belege": die Karte „Belege" über die
   volle Breite, darunter zwei Spalten (Paletten | Spedition bzw.
   Packstücke | Sendungen); unter 700 px eine Spalte. Keine Farbwerte. */
.tm .vb-voll{margin:16px 0}
.tm .vb-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:16px;align-items:start;margin:16px 0}
.tm .vb-voll>.card,.tm .vb-raster>div>.card{margin-top:0}
/* Karte „Spedition": je Angabe eine Zeile mit Luft dazwischen; Wert und Marken
   rechtsbündig, umbrechend, nie an der Nachbarzeile klebend. */
.tm .ps-zeilen{padding:0 18px 12px}
.tm .ps-zeile{display:flex;justify-content:space-between;align-items:center;gap:6px 12px;padding:7px 0;min-height:36px}
.tm .ps-zeile+.ps-zeile{border-top:1px solid var(--line)}
.tm .ps-zeile>span:first-child{flex:0 0 auto}
.tm .ps-zeile>b{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;text-align:right;min-width:0}
/* Karte „Belege": Häkchen, Text, Knopf und Auswahl je Eintrag auf einer Linie. */
.tm .sd-haken{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:flex-start;padding:12px 18px}
.tm .sd-haken-z{display:flex;align-items:center;gap:6px 10px;min-height:44px;flex-wrap:wrap}
.tm .sd-haken-l{display:inline-flex;align-items:flex-start;gap:8px;margin:0}
/* Häkchen mittig zur ERSTEN Textzeile, auch wenn der Text umbricht. */
.tm .sd-haken-l input[type=checkbox]{font-size:inherit;line-height:inherit;margin:calc((1lh - 13px) / 2) 0 0;flex:0 0 auto}
.tm .sd-haken-l:has(select){align-items:center}
.tm .sd-haken-z .fk-knopf{margin:0}
.tm .sd-haken .note-txt{margin-top:2px}
.tm .sd-haken-voll{flex-basis:100%}
.tm .ps-zeile .badge{white-space:normal;text-align:right;line-height:1.35}
.tm .sd-kunden-ls{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
/* Dateifeld in Feldhöhe: steht auf einer Linie mit Feldern und Knöpfen. */
.tm input[type=file]{min-height:44px;max-width:100%}
/* Kalender: ganztägige Termine mit 4 px Luft (Layoutprüfung). */
.tm .kw-ganzfeld{gap:4px}
/* Karte „Belege" am Handy: die Tabelle passt in die Breite (kein waagrechtes
   Scrollen) — engere Zellen, lange Belegnamen brechen um. */
@media (max-width:700px){
  .tm .sd-belege .postab th,.tm .sd-belege .postab td{padding-left:6px;padding-right:6px}
  .tm .sd-belege .postab th{white-space:normal}
  .tm .sd-belege .postab td:first-child{overflow-wrap:anywhere;hyphens:auto}
}

/* 22.10.2026 (Kleinigkeiten): Pick-Knöpfe brechen nie im Text um — bei vier
   Knöpfen rückt der letzte in die nächste Zeile („Nicht verfügbar" zweizeilig). */
.tm .picktask .acts .btn{white-space:nowrap}
@media(min-width:1280px){
  .tm .picktask .acts,.tm .pickgrid .picktask .acts{flex-wrap:wrap}
}
/* Handy: die feste erste Spalte einer Tabelle nimmt höchstens 40 % der Breite
   und deckt mit ihrem Grund ab — die Aktionsspalte bleibt erreichbar. */
@media(max-width:700px){
  .tm .tscroll>table>tbody>tr>td:first-child,
  .tm .tab-scroll>table>tbody>tr>td:first-child{max-width:40vw;background:var(--row-bg,var(--surface))}
  .tm .tscroll>table>thead>tr>th:first-child,
  .tm .tab-scroll>table>thead>tr>th:first-child{max-width:40vw}
}