/* ======================================================================
   SCUM Server-Editor
   ----------------------------------------------------------------------
   Die Gestaltung folgt bewusst dem Haus-Design von CTRL·DECK
   (E:\ClaudeCode\ctrl-deck\web\src\core\theme.css). Dieselben Regeln,
   damit sich beide Werkzeuge wie aus einem Guss anfühlen:

   1. FLÄCHEN sind flach und undurchsichtig. Kein backdrop-filter, keine
      halbtransparenten Panels, keine Farbnebel, keine Verläufe.
   2. KANTEN statt Schatten. Eine Haarlinie trennt. Schatten gibt es nur,
      wo etwas wirklich über der Seite schwebt (Overlay, Toast).
   3. FARBE BEDEUTET ETWAS. Blau = bedienbar/aktiv/ausgewählt,
      Grün = geändert/übernommen, Bernstein = Achtung, Rot = löschen.
      Farbe ist nie bloße Dekoration.
   4. ZAHLEN stehen in Tabellenbreite, damit Preise und Zähler nicht
      zappeln, wenn sich eine Ziffer ändert.
   5. BEWEGUNG NUR, WO SIE ETWAS BEDEUTET. Zustandsfeedback ist ein
      Farbwechsel in --t. Kein Anheben beim Überfahren, kein Pulsieren,
      keine Einblend-Kaskaden. prefers-reduced-motion schaltet alles ab.
   6. JEDES bedienbare Element hat einen sichtbaren Fokusring.
   ====================================================================== */

/* Schrift liegt örtlich unter schrift/, damit die App ohne Internet
   auskommt. Lizenz: SIL Open Font License, siehe schrift/LICENSE-Jost.txt */
@font-face {
  font-family: "Jost Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("schrift/jost-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("schrift/jost-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  /* --- Flächen: neutral-kühles Anthrazit --- */
  --bg:#0e1014;
  --bg-sunk:#0a0c0f;
  --surface:#15181e;
  --surface-2:#1b1f27;
  --surface-3:#222732;

  --line:#262b34;
  --line-strong:#3a424f;

  /* --- Schrift --- */
  --text:#e7eaf0;
  --text-dim:#a9b1bf;
  --text-faint:#7e8798;

  /* --- Bedeutungsfarben --- */
  --blue:#3aa0ff;
  --blue-soft:#6cc0ff;
  --green:#35d6a4;
  --amber:#ffb545;
  --red:#ff5c72;
  --violet:#9b6cff;
  --on-accent:#0b0d11;

  /* --- Form --- */
  --r-xs:2px;
  --r-sm:4px;
  --r:6px;
  --shadow:0 18px 40px -16px rgba(0,0,0,.75);
  --t:110ms;

  --mono:"JetBrains Mono",Consolas,"Courier New",monospace;
  color-scheme:dark;
}

*{box-sizing:border-box}
/* muss unten stehen bleiben: schlägt die display-Regeln der Klassen */
[hidden]{display:none !important}
html,body{height:100%;margin:0}
body{
  font-family:"Jost Variable","Jost","Segoe UI",system-ui,sans-serif;
  font-size:15px;line-height:1.5;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow:hidden;
}
button,input,select,textarea{font:inherit;color:inherit}
code{font-family:var(--mono);font-size:.9em}
::selection{background:rgba(58,160,255,.3);color:#fff}

/* Zahlen in Tabellenbreite – Regel 4. */
.inp.num,.badge,.cnt,.nd-chg,.st-zahl,.bulk-count,.hint-mini,.i-vanilla,
.r-range,.toolbar-count,.add-preis{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}

/* --- Fokus: eine Regel für alles (Regel 6) --- */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--r-sm)}

.skiplink{
  position:fixed;top:8px;left:8px;z-index:50;transform:translateY(-160%);
  background:var(--blue);color:var(--on-accent);font-weight:600;
  padding:9px 16px;border-radius:var(--r-sm);text-decoration:none;
}
.skiplink:focus{transform:none}

/* ---------- Knöpfe ---------- */
.btn{
  background:var(--surface-2);border:1px solid var(--line);color:var(--text);
  padding:7px 13px;border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;
  font-weight:450;
  transition:background var(--t) linear,border-color var(--t) linear,color var(--t) linear;
}
.btn:hover{background:var(--surface-3);border-color:var(--line-strong)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--blue);border-color:var(--blue);color:var(--on-accent);font-weight:550}
.btn-primary:hover{background:var(--blue-soft);border-color:var(--blue-soft)}
.btn-primary:disabled{background:var(--surface-2);border-color:var(--line);color:var(--text-faint)}
.btn-ghost{background:transparent}
.btn-lg{padding:11px 24px;font-size:15px}
.btn.klein{padding:4px 9px;font-size:12.5px}
.btn.gefahr{border-color:rgba(255,92,114,.45);color:var(--red)}
.btn.gefahr:hover{background:rgba(255,92,114,.12);border-color:var(--red)}
.linkbtn{
  background:none;border:0;color:var(--blue);cursor:pointer;padding:0;
  text-decoration:underline;transition:color var(--t) linear;
}
.linkbtn:hover{color:var(--blue-soft)}
.iconbtn{
  background:none;border:0;color:var(--text-faint);cursor:pointer;
  font-size:14px;padding:2px 6px;border-radius:var(--r-sm);
  transition:background var(--t) linear,color var(--t) linear;
}
.iconbtn:hover{color:var(--red);background:rgba(255,92,114,.12)}

/* ---------- Startbildschirm ---------- */
.dropzone{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--bg);text-align:center;padding:24px;z-index:20;overflow:auto;
}
.dz-inner{
  border:1px solid var(--line);border-radius:var(--r);padding:44px 42px;max-width:720px;
  background:var(--surface);
  transition:border-color var(--t) linear;
}
.dropzone.over .dz-inner{border-color:var(--blue)}
.dz-logo{font:600 12px/1 var(--mono);letter-spacing:.4em;color:var(--blue);margin-bottom:16px}
.dropzone h1{margin:0 0 12px;font-size:26px;font-weight:550;letter-spacing:-.01em}
.dz-sub{color:var(--text-dim);margin:0 0 24px;font-size:14px}
.dz-hint{margin:20px 0 0;font-size:13px;color:var(--text-dim)}
.dz-liste{margin:26px 0 0;text-align:left;border-top:1px solid var(--line);padding-top:16px;display:grid;gap:6px}
.dz-zeile{display:flex;gap:12px;align-items:baseline;font-size:12.5px}
.dz-datei{color:var(--blue);font-family:var(--mono);flex:0 0 auto;min-width:190px}
.dz-info{color:var(--text-dim)}

/* ---------- Kopfleiste ---------- */
.app{display:flex;flex-direction:column;height:100%}
.topbar{
  display:flex;align-items:center;gap:14px;padding:9px 14px;
  background:var(--surface);border-bottom:1px solid var(--line);flex:0 0 auto;
  flex-wrap:wrap;row-gap:9px;
}
.tb-left{display:flex;align-items:baseline;gap:12px;min-width:0}
.brand{font:600 12px/1 var(--mono);letter-spacing:.18em;color:var(--blue)}
.brand-dim{color:var(--text-faint);font-weight:400;letter-spacing:.1em}
.tb-mid{display:flex;align-items:center;gap:12px;flex:1 1 300px;min-width:0}
#search{
  flex:1;min-width:0;background:var(--bg-sunk);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:7px 11px;
  transition:border-color var(--t) linear;
}
#search:focus{outline:none;border-color:var(--blue)}
.tb-right{display:flex;align-items:center;gap:7px}
.badge{
  background:var(--green);border:0;color:var(--on-accent);
  padding:3px 9px;border-radius:var(--r-xs);font-size:12px;font-weight:600;white-space:nowrap;
}

/* ---------- Layout ---------- */
.body{display:flex;flex:1;min-height:0}
.sidebar{
  width:252px;flex:0 0 252px;background:var(--surface);border-right:1px solid var(--line);
  overflow-y:auto;padding:10px 8px 40px;
}
.content{flex:1;overflow:auto;padding:22px 26px 120px;background:var(--bg)}

/* ---------- Seitenleiste ----------
   Aktiv wird durch einen Markierungsbalken links und eine leicht gehobene
   Fläche angezeigt, nicht durch eine eingefärbte Fläche. Die Position trägt
   die Information mit, nicht nur der Farbton. */
.nav-datei{
  position:relative;display:block;width:100%;text-align:left;background:none;border:0;
  cursor:pointer;padding:9px 11px;color:var(--text-dim);border-radius:var(--r-sm);
  transition:background var(--t) linear,color var(--t) linear;
}
.nav-datei:hover:not(.active){background:var(--surface-2);color:var(--text)}
.nav-datei.active{background:var(--surface-2);color:var(--text)}
.nav-datei.active::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;
  background:var(--blue);border-radius:0 var(--r-xs) var(--r-xs) 0;
}
.nd-titel{display:block;font-weight:550;font-size:14px}
.nav-datei.active .nd-titel{color:var(--text)}
.nd-name{display:block;font-family:var(--mono);font-size:10.5px;color:var(--text-faint);margin-top:1px}
.nd-chg{
  float:right;min-width:19px;height:19px;padding:0 6px;
  display:inline-grid;place-items:center;border-radius:var(--r-xs);
  background:var(--green);color:var(--on-accent);font-size:11px;font-weight:600;
}
.nav-grp{
  position:relative;display:block;width:100%;text-align:left;background:none;border:0;
  cursor:pointer;padding:6px 11px 6px 24px;font-size:13px;color:var(--text-dim);
  border-radius:var(--r-sm);
  transition:background var(--t) linear,color var(--t) linear;
}
.nav-grp:hover:not(.active){background:var(--surface-2);color:var(--text)}
.nav-grp.active{background:var(--surface-2);color:var(--text)}
.nav-grp.active::before{
  content:"";position:absolute;left:8px;top:7px;bottom:7px;width:2px;
  background:var(--blue);border-radius:var(--r-xs);
}
.nav-grp .cnt{float:right;color:var(--text-faint);font-size:11.5px}
.nav-grp .cnt.chg{color:var(--green)}
.nav-sep{height:1px;background:var(--line);margin:9px 11px}
.nav-mehr{
  display:block;width:calc(100% - 16px);margin:6px 8px;padding:7px 0;
  background:none;border:1px dashed var(--line-strong);border-radius:var(--r-sm);
  color:var(--text-faint);font-size:12.5px;cursor:pointer;
  transition:color var(--t) linear,border-color var(--t) linear;
}
.nav-mehr:hover{color:var(--blue);border-color:var(--blue)}

/* ---------- Inhalt ---------- */
.sec-title{font-size:21px;font-weight:550;margin:0 0 4px;letter-spacing:-.01em}
.sec-sub{color:var(--text-dim);margin:0 0 20px;font-size:13.5px}
.grp{margin:0 0 28px}
.grp-head{
  display:flex;align-items:baseline;gap:10px;
  border-bottom:1px solid var(--line);padding-bottom:7px;margin-bottom:6px;
}
.grp-head h3{margin:0;font-size:15px;font-weight:550;color:var(--text)}
.grp-head .cnt{color:var(--text-faint);font-size:12px}
.grp-info{color:var(--text-dim);font-size:13px;margin:8px 0 12px;padding-left:11px;border-left:2px solid var(--line-strong)}
.filterleiste{display:flex;gap:18px;flex-wrap:wrap;padding:0 0 13px;margin-bottom:16px;border-bottom:1px solid var(--line)}

/* ---------- Steckbrief „Was ist anders?“ ---------- */
.steckbrief{display:grid;gap:2px;max-width:1240px;margin-top:10px}
.sb-zeile{
  display:flex;align-items:baseline;gap:12px;padding:8px 12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  cursor:pointer;transition:background var(--t) linear;
}
.sb-zeile:hover{background:var(--surface-2)}
.sb-kein-haken{flex:0 0 13px}
.sb-tag{
  flex:0 0 auto;min-width:132px;
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--blue);
}
.sb-tag-leer{color:var(--text-faint);font-weight:400}
.sb-text{color:var(--text-dim);font-size:13px;text-wrap:pretty}

/* Textvorschläge für Name und Willkommensnachricht */
.vorschlag{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.vs-kopf{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.vs-titel{font-weight:550;color:var(--text);font-size:13px}
.vs-laenge{color:var(--text-faint);font-size:11.5px;font-variant-numeric:tabular-nums}
.vs-laenge.zu-lang{color:var(--amber)}
.vs-text{font-size:12.5px;line-height:1.5;min-height:0}
.vs-acts{display:flex;align-items:center;gap:8px;margin-top:7px;flex-wrap:wrap}
.vs-jetzt{color:var(--text-faint);font-size:11.5px;font-family:var(--mono)}

/* Vollständige Abweichungsliste */
.abw-gruppe{
  margin:14px 0 5px;font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-faint);
}
.abw-zeile{
  display:flex;align-items:baseline;gap:12px;padding:5px 12px;
  border-bottom:1px solid var(--line);max-width:1240px;
}
.abw-zeile:last-child{border-bottom:0}
.abw-label{flex:1;min-width:0;font-size:13px}
.abw-werte{flex:0 0 auto;font-family:var(--mono);font-size:12px;display:flex;gap:7px;align-items:baseline}
.abw-soll{color:var(--text-faint)}
.abw-pfeil{color:var(--line-strong)}
.abw-ist{color:var(--text)}
.abw-faktor{
  flex:0 0 62px;text-align:right;font-family:var(--mono);font-size:11.5px;color:var(--blue);
}

/* ---------- Zeile ---------- */
.row{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;
  padding:12px 13px;border-radius:var(--r);border:1px solid transparent;align-items:start;
  transition:background var(--t) linear,border-color var(--t) linear;
}
.row:hover{background:var(--surface)}
.row.changed{background:var(--surface);border-color:var(--line-strong)}
/* Geändert wird durch einen Streifen an der Kante gezeigt, nicht durch eine
   eingefärbte Fläche – dieselbe Idee wie die Kennfarbe der CTRL·DECK-Karten. */
.row.changed{position:relative;overflow:hidden}
.row.changed::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green);
}
.row.unknown{border-color:var(--line)}
.r-label{font-weight:550;margin-bottom:2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.r-key{font-family:var(--mono);font-size:11.5px;color:var(--text-faint);cursor:pointer;word-break:break-all;transition:color var(--t) linear}
.r-key:hover{color:var(--blue)}
.r-desc{color:var(--text-dim);font-size:13px;margin-top:5px;max-width:70ch;text-wrap:pretty}
.r-note{font-size:12.5px;margin-top:6px;padding:6px 10px;border-radius:var(--r-sm);max-width:1240px}
.r-note.warn{background:var(--surface);color:var(--amber);border:1px solid rgba(255,181,69,.35)}
.r-note.verify{background:var(--surface);color:var(--text-dim);border:1px solid var(--line)}
.r-note.calc{color:var(--text-faint);padding:0;font-size:12px}
.r-note.source{background:var(--bg-sunk);border:1px solid var(--line);color:var(--text-dim);font-style:italic;max-width:70ch}
.tag{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;
  padding:2px 6px;border-radius:var(--r-xs);
}
.tag.changed{background:var(--green);color:var(--on-accent)}
.tag.unknown{background:var(--surface-2);color:var(--text-dim);border:1px solid var(--line)}

/* ---------- Bedienelemente ---------- */
.r-ctl{display:flex;flex-direction:column;gap:7px;align-items:stretch}
.ctl-line{display:flex;align-items:center;gap:8px}
.inp{
  background:var(--bg-sunk);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:7px 10px;width:100%;min-width:0;
  transition:border-color var(--t) linear;
}
.inp:focus{outline:none;border-color:var(--blue)}
.inp:disabled{opacity:.45;cursor:not-allowed}
.inp.num{font-family:var(--mono);text-align:right}
.inp.mono{font-family:var(--mono)}
.inp.klein{padding:4px 7px;font-size:12.5px}
textarea.inp{resize:vertical;min-height:60px;line-height:1.45}
.unit{color:var(--text-faint);font-size:12px;white-space:nowrap;flex:0 0 auto}
input[type=range]{width:100%;accent-color:var(--blue);cursor:pointer}
.offbox{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-dim);cursor:pointer}
.chk{display:flex;align-items:center;gap:6px;color:var(--text-dim);font-size:13px;cursor:pointer}
input[type=checkbox]{accent-color:var(--blue)}
.farbwahl{width:42px;height:31px;padding:2px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-sunk);cursor:pointer}

.toggle{display:flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;width:100%}
.toggle button{
  flex:1;background:var(--bg-sunk);border:0;padding:8px 0;cursor:pointer;
  color:var(--text-dim);font-size:13px;font-weight:500;
  transition:background var(--t) linear,color var(--t) linear;
}
.toggle button:hover{background:var(--surface-2);color:var(--text)}
.toggle button.on-true.sel{background:var(--blue);color:var(--on-accent)}
.toggle button.on-false.sel{background:var(--surface-3);color:var(--text)}

.r-foot{display:flex;flex-direction:column;gap:6px}
.r-foot:empty{display:none}
.r-range{color:var(--text-dim);font-family:var(--mono);font-size:11px;text-align:right;line-height:1.45}
.r-outofrange{
  background:var(--surface);border:1px solid rgba(255,181,69,.35);
  color:var(--amber);border-radius:var(--r-sm);padding:6px 9px;font-size:12px;line-height:1.4;
}
.r-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 12px;font-size:11.5px}
.r-acts .linkbtn{color:var(--text-faint);text-decoration:none;border-bottom:1px dotted var(--line-strong)}
.r-acts .linkbtn:hover{color:var(--blue);border-bottom-color:var(--blue)}

/* ---------- Sektor-Umschalter ---------- */
.sektor-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px}
.sektor-tab{
  position:relative;display:flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 12px;
  cursor:pointer;color:var(--text-dim);font-size:13px;
  transition:background var(--t) linear,border-color var(--t) linear,color var(--t) linear;
}
.sektor-tab:hover:not(.active){background:var(--surface-2);color:var(--text)}
.sektor-tab.active{background:var(--surface-2);border-color:var(--line-strong);color:var(--text);font-weight:550}
.sektor-tab.active::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;
  background:var(--blue);border-radius:0 var(--r-xs) var(--r-xs) 0;
}
.st-zahl{font-family:var(--mono);font-size:11px;color:var(--text-faint);background:var(--bg-sunk);padding:1px 6px;border-radius:var(--r-xs)}
.st-zahl.chg{color:var(--on-accent);background:var(--green);font-weight:600}

/* ---------- Werkzeugleiste ---------- */
.toolbar{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;max-width:1240px;
  padding-bottom:13px;margin-bottom:4px;border-bottom:1px solid var(--line);
}
.toolbar-count{color:var(--text-faint);font-size:12.5px;margin-left:auto}

/* ---------- Massenaktionen ---------- */
.bulk{
  display:flex;align-items:center;gap:9px 14px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:10px 13px;margin:14px 0;position:sticky;top:0;z-index:5;max-width:1240px;
}
.bulk.leer{background:transparent;border-style:dashed}
.bulk-hint{color:var(--text-faint);font-size:12.5px}
.bulk-count{background:var(--blue);color:var(--on-accent);font-weight:600;font-size:12px;padding:3px 9px;border-radius:var(--r-xs);white-space:nowrap}
.bulk-group{display:flex;align-items:center;gap:5px;padding-right:14px;border-right:1px solid var(--line)}
.bulk-group:last-of-type{border-right:0;padding-right:0}
.bulk-group .inp.num{width:62px}
.bulk-warn{flex:1 0 100%;color:var(--amber);font-size:12.5px}

/* ---------- Tabelle ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);max-width:1240px}
table.items{width:100%;border-collapse:collapse;font-size:13px}
table.items th{
  text-align:left;color:var(--text-dim);font-weight:550;font-size:12px;
  padding:9px 10px;border-bottom:1px solid var(--line);
  background:var(--surface);position:sticky;top:0;z-index:2;white-space:nowrap;
}
table.items td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.items tr:last-child td{border-bottom:0}
table.items tbody tr{transition:background var(--t) linear}
table.items tbody tr:hover{background:var(--surface)}
/* Neu und geändert: schmaler Streifen an der Kante statt eingefärbter Fläche. */
table.items tbody tr.neu td:first-child,
table.items tbody tr.geaendert td:first-child{box-shadow:inset 3px 0 0 var(--green)}
.col-sel{width:34px}
.col-item{min-width:230px}
.col-num{width:112px}
.col-enum{width:104px}
.col-del{width:38px;text-align:right}
.col-id{width:230px}
.col-num .inp,.col-enum .inp{width:100%}
.i-zelle{display:flex;align-items:flex-start;gap:11px}
.i-text{min-width:0}
.i-name{font-weight:550;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.i-code{font-family:var(--mono);font-size:11px;color:var(--text-faint);cursor:pointer;word-break:break-all;transition:color var(--t) linear}
.i-code:hover{color:var(--blue)}
.i-vanilla{font-family:var(--mono);font-size:11px;color:var(--text-dim);margin-top:2px}
.i-warn{font-size:11.5px;color:var(--amber);margin-top:2px}
.hint-mini{font-size:10.5px;color:var(--text-faint);text-align:right;margin-top:3px}

/* Ein Feld, das du angefasst hast: gruener Rahmen und darunter der alte Wert.
   :not(:focus), damit der blaue Fokusring immer Vorrang behaelt – sonst wuesste
   man beim Tippen nicht mehr, wo man ist. */
.inp.geaendert:not(:focus){border-color:var(--green)}
.feld-vorher{
  display:block;width:100%;margin-top:3px;padding:0;
  background:none;border:0;cursor:pointer;
  color:var(--green);font-family:var(--mono);font-size:10.5px;text-align:right;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.feld-vorher:hover{text-decoration:underline}
.leer{color:var(--text-faint)}
.mehr-hinweis{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--text-dim);font-size:12.5px;padding:14px 4px}

/* ---------- Vorschaubilder ---------- */
.thumb{
  width:40px;height:40px;flex:0 0 40px;object-fit:contain;
  background:var(--bg-sunk);border:1px solid var(--line);border-radius:var(--r-sm);padding:2px;
}
.thumb-leer{position:relative}
.thumb-leer::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1px;background:var(--line-strong);transform:translate(-50%,-50%)}
.thumb-aehnlich{border-color:rgba(255,181,69,.45)}

/* Lupe: schwebt ueber der Seite, darf also einen Schatten haben (Regel 2).
   Sie erscheint ohne Bewegung – sie beantwortet eine Frage („was ist das?"),
   sie will keine Aufmerksamkeit. */
.lupe{
  position:fixed;z-index:45;pointer-events:none;
  background:var(--surface-3);border:1px solid var(--line-strong);
  border-radius:var(--r);padding:10px;box-shadow:var(--shadow);
  max-width:200px;
}
.lupe img{
  display:block;width:160px;height:auto;
  background:var(--bg-sunk);border-radius:var(--r-sm);
}
.lupe-name{
  margin-top:8px;color:var(--text);font-size:12.5px;font-weight:550;
  text-align:center;line-height:1.35;
}
.thumb-bsp{display:inline-block;width:11px;height:11px;vertical-align:-1px;border:1px solid rgba(255,181,69,.6);border-radius:var(--r-xs)}

/* ---------- Raid-Zeiten und Meldungen ---------- */
.raid-zeile{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;margin-bottom:13px;max-width:1240px;
}
.raid-kopf{display:flex;align-items:center;gap:6px;margin-bottom:12px}
.raid-nr{font-weight:550;font-size:13px;color:var(--text);flex:1}
.raid-gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.raid-feld{display:flex;flex-direction:column;gap:6px;min-width:0}
.raid-feld.voll{grid-column:1 / -1}
.raid-label{font-size:12px;font-weight:550;color:var(--text-dim)}
.ph-leiste{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.nachricht-vorschau{background:var(--bg-sunk);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;margin-bottom:12px;text-align:center}
.nv-text{font-size:15px;font-weight:550}

/* Wochenübersicht – die Balken tragen die Information, deshalb Blau. */
.woche{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:20px;max-width:1240px}
.woche-kopf{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.woche-titel{font-weight:550;font-size:13px}
.woche-legende{color:var(--text-faint);font-size:11.5px}
.woche-zeile{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.woche-tag{flex:0 0 96px;font-size:12px;color:var(--text-dim)}
.woche-balken{position:relative;flex:1;height:16px;background:var(--bg-sunk);border:1px solid var(--line);border-radius:var(--r-xs);overflow:hidden}
.woche-stueck{position:absolute;top:0;bottom:0;background:var(--blue);opacity:.8}

/* ---------- Overlay: schwebt, darf also einen Schatten haben (Regel 2) ---------- */
.modal{position:fixed;inset:0;background:rgba(6,9,13,.72);display:flex;align-items:center;justify-content:center;padding:32px;z-index:30}
.modal-box{background:var(--surface-3);border:1px solid var(--line-strong);border-radius:var(--r);width:min(920px,100%);max-height:100%;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.modal-head{display:flex;align-items:center;gap:12px;padding:13px 17px;border-bottom:1px solid var(--line)}
.modal-head h2{margin:0;font-size:16px;font-weight:550;flex:1}
.modal-body{overflow:auto;padding:16px 17px}
.empty{color:var(--text-dim);padding:22px 4px;text-align:center}
.fehlerliste{margin:0;padding-left:20px;color:var(--amber);font-size:13px}
.fehlerliste li{margin:5px 0}
.exp-liste{display:grid;gap:7px;margin-top:6px}
.exp-zeile{display:flex;align-items:center;gap:12px;background:var(--bg-sunk);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px}
.exp-name{font-family:var(--mono);font-size:12.5px;flex:1}
.exp-zahl{color:var(--text-faint);font-size:12px}

/* ---------- Gegenstände hinzufügen ---------- */
.add-head{display:flex;flex-direction:column;gap:10px;margin-bottom:4px}
.add-opts{display:flex;gap:18px;flex-wrap:wrap}
.add-list{border:1px solid var(--line);border-radius:var(--r-sm);max-height:46vh;overflow-y:auto;background:var(--bg-sunk)}
.add-row{display:flex;align-items:center;gap:12px;padding:7px 12px;border-bottom:1px solid var(--line);cursor:pointer;transition:background var(--t) linear}
.add-row:last-child{border-bottom:0}
.add-row:hover{background:var(--surface)}
.add-txt{flex:1;min-width:0}
.add-preis{font-family:var(--mono);font-size:11.5px;color:var(--text-dim);white-space:nowrap}
.add-preis.ersetzt{color:var(--amber)}
.add-fremd{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--amber);border:1px solid rgba(255,181,69,.4);padding:1px 6px;border-radius:var(--r-xs);white-space:nowrap}
.add-mehr{padding:12px;color:var(--text-faint);font-size:12.5px;text-align:center}
.add-fuss{display:flex;justify-content:flex-end;padding-top:14px}

/* ---------- Toast: schwebt ebenfalls ---------- */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--surface-3);border:1px solid var(--line-strong);border-radius:var(--r);
  padding:11px 19px;z-index:40;box-shadow:var(--shadow);max-width:80vw;
}
.toast.ok{border-color:var(--green)}
.toast.bad{border-color:var(--red);color:var(--red)}

/* ---------- Hinweiskästen ---------- */
.checks{background:var(--surface);border:1px solid rgba(255,181,69,.35);border-radius:var(--r);padding:12px 15px;margin-bottom:20px;max-width:1240px}
.checks h4{margin:0 0 7px;font-size:13px;font-weight:550;color:var(--amber)}
.checks ul{margin:0;padding-left:19px;font-size:13px;color:var(--text-dim)}
.checks li{margin:3px 0}
.intro{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;margin-bottom:20px;color:var(--text-dim);font-size:13px;max-width:1240px}
.intro strong{color:var(--text);font-weight:550}
.intro p{margin:0}
.intro p + p{margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}

/* ======================================================================
   Loot – Spawner-Vorlagen

   Die Zeile ist dicht, weil hier 976 Stueck untereinander stehen. Alles
   Weitere klappt auf. Kein zweiter Rahmen im Rahmen: das Aufgeklappte
   sitzt an derselben Kante wie die Zeile darueber, nur eingerueckt.
   ====================================================================== */
.dz-knoepfe{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.dz-ordnerhint{color:var(--text-faint);font-size:12.5px;margin:10px 0 0;max-width:52ch;margin-inline:auto}
/* ---------- Fussbereich des Startbildschirms ----------
   Der Editor ist auch eine oeffentliche Seite unter
   scum-editor.brainstorm-studios.de; von dort muss das Impressum
   erreichbar sein. Er steht im Startbildschirm, nicht in der
   Arbeitsansicht: dort waere er im Weg. */
.dz-fuss{
  margin:28px 0 0;padding-top:16px;border-top:1px solid var(--line);
  color:var(--text-dim);font-size:12.5px;
}
.dz-fuss a{
  color:var(--text-dim);text-decoration:none;
  border-bottom:1px solid var(--line-strong);
  transition:color var(--t) linear,border-color var(--t) linear;
}
.dz-fuss a:hover,.dz-fuss a:focus-visible{color:var(--blue);border-bottom-color:var(--blue)}
.dz-rechte{
  margin:10px 0 0;color:var(--text-faint);font-size:11.5px;line-height:1.6;
  max-width:62ch;margin-inline:auto;
}

.ladebalken{
  margin-top:16px;color:var(--blue);font-size:13px;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}

/* ---------- Überblick ---------- */
.sec-title.klein{font-size:15px;margin-top:26px}
.lt-lage{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;max-width:1240px;margin-bottom:20px}
.lt-lagezeile{
  display:grid;grid-template-columns:190px 1fr auto;gap:14px;align-items:center;
  padding:9px 14px;border-bottom:1px solid var(--line);font-size:13.5px;
}
.lt-lagezeile:last-child{border-bottom:0}
.lt-lagewas{color:var(--text-dim)}
.lt-lagewert{color:var(--amber);font-variant-numeric:tabular-nums}
.lt-lagezeile.gut .lt-lagewert{color:var(--text)}
.lt-lagenote{color:var(--text-faint);font-size:12px}

.lt-kattab{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;max-width:1240px}
.lt-katzeile{
  display:grid;grid-template-columns:150px 110px 232px 1fr;gap:12px;align-items:baseline;
  padding:9px 14px;border-bottom:1px solid var(--line);font-size:13px;
}
.lt-katzeile:last-child{border-bottom:0}
.lt-katname{font-weight:550}
.lt-katzahl,.lt-katschnitt{color:var(--text-dim);font-variant-numeric:tabular-nums}
.lt-kathilfe{color:var(--text-faint);font-size:12.5px}

.lt-leiter{max-width:640px}
.lt-leiterzeile{display:grid;grid-template-columns:120px 120px 1fr 44px;gap:12px;align-items:center;padding:4px 0;font-size:13px}
.lt-lcode{color:var(--text-faint);font-size:11.5px}
.lt-lbalken{height:8px;background:var(--bg-sunk);border:1px solid var(--line);border-radius:var(--r-xs);overflow:hidden}
.lt-lfuell{height:100%;background:var(--blue)}
.lt-lzahl{text-align:right;color:var(--text-dim);font-variant-numeric:tabular-nums}

.lt-export{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;max-width:1240px}
.lt-export p{margin:0 0 9px;font-size:13.5px;color:var(--text-dim)}
.lt-export .chk{margin:10px 0 6px}

.lt-befehle{max-width:1240px}
.lt-befehl{display:grid;grid-template-columns:330px 1fr auto;gap:12px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--text-dim)}
.lt-befehl:last-child{border-bottom:0}
.lt-befehl code{color:var(--blue-soft);word-break:break-all}

/* ---------- Die Zeile ---------- */
/* Nicht die Klasse .row mitbenutzen: die bringt ihr eigenes Spaltenraster
   mit und wuerde den Zeilenkopf in eine 300px-Spalte zwaengen. Nur der
   gruene Streifen wird uebernommen – Regel 3, geaendert ist geaendert. */
.lt-zeile{
  border:1px solid var(--line);border-radius:var(--r);margin-bottom:6px;
  background:var(--surface);max-width:1240px;
  transition:border-color var(--t) linear;
}
.lt-zeile.changed{position:relative;overflow:hidden;border-color:var(--line-strong)}
.lt-zeile.changed::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green);z-index:1;
}
.lt-zeile.lt-ziel{border-color:var(--blue)}
.lt-kopf{
  display:grid;
  grid-template-columns:26px minmax(190px,1fr) 104px 148px minmax(150px,300px) auto;
  gap:12px;align-items:center;padding:7px 12px;
}
.lt-auf{
  background:none;border:0;color:var(--text-faint);cursor:pointer;
  font-size:12px;padding:2px;line-height:1;
  transition:color var(--t) linear;
}
.lt-auf:hover{color:var(--blue)}
.lt-namen{min-width:0}
.lt-kurz{display:block;font-weight:550;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-id{display:block;font-size:10.5px;color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-menge{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lt-feld{min-width:0}
.lt-flabel{display:block;font-size:10.5px;color:var(--text-faint);margin-bottom:2px;white-space:nowrap}
.lt-fleer{color:var(--text-faint);font-family:var(--mono);font-size:12.5px;text-align:right;padding:4px 7px}

.lt-chips{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.lt-chip{
  font-size:11px;padding:2px 7px;border-radius:var(--r-xs);
  background:var(--surface-2);border:1px solid var(--line);color:var(--text-dim);
  white-space:nowrap;font-variant-numeric:tabular-nums;cursor:default;
}
.lt-chip.fest{border-color:rgba(58,160,255,.4);color:var(--blue-soft)}
.lt-chip.aktion{border-color:rgba(155,108,255,.45);color:var(--violet)}
.lt-chip.warn{border-color:rgba(255,181,69,.45);color:var(--amber)}

/* ---------- Aufgeklappt ---------- */
.lt-detail{border-top:1px solid var(--line);padding:12px 12px 14px 38px;background:var(--bg-sunk)}
.lt-h{margin:16px 0 7px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint)}
.lt-detail > .lt-h:first-child{margin-top:0}
.lt-gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;max-width:760px}
.lt-schalter{display:flex;flex-wrap:wrap;gap:8px 22px}
.chk.geaendert{color:var(--green)}

.lt-inhaltkopf{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:16px 0 7px}
.lt-inhaltkopf .lt-h{margin:0}
.lt-inhalthilfe{color:var(--text-faint);font-size:12px;max-width:80ch}

.lt-fixliste,.lt-itemliste{max-width:1000px}
.lt-fix,.lt-item{
  display:grid;grid-template-columns:40px minmax(150px,1fr) 96px auto auto 28px;
  gap:10px;align-items:center;padding:3px 0;
}
.lt-fix{grid-template-columns:40px minmax(150px,1fr) 96px 28px}
.lt-fixtext{min-width:0}
.lt-iname{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-icode{display:block;font-size:10.5px;color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-zone{font-size:11px;color:var(--text-faint);white-space:nowrap}
.lt-zone.warn{color:var(--amber)}
.lt-sel{width:auto;min-width:128px}
.lt-anteil{
  font-size:11.5px;color:var(--text-dim);text-align:right;min-width:52px;
  font-variant-numeric:tabular-nums;
}

.lt-knoten{border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 10px;margin-bottom:6px;max-width:1000px}
.lt-knotenkopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:5px}
.lt-knotenzahl{color:var(--text-faint);font-size:11.5px}
.lt-knotenid{
  display:grid;grid-template-columns:minmax(200px,1fr) auto 28px;gap:10px;align-items:center;
  padding:2px 0 2px 12px;border-left:2px solid var(--line);
}
.lt-kpfad{font-size:11.5px;word-break:break-all}
.lt-knote{font-size:11.5px;color:var(--text-faint);white-space:nowrap}
.lt-knote.warn{color:var(--amber)}
.lt-fehlt{font-size:11.5px;color:var(--amber)}

.lt-sub{display:grid;grid-template-columns:auto 56px minmax(200px,1fr) auto 28px;gap:10px;align-items:center;padding:3px 0}
.lt-aktion{display:grid;grid-template-columns:290px 1fr 28px;gap:10px;align-items:center;padding:3px 0;font-size:12.5px;color:var(--text-dim)}
.lt-aktion code{color:var(--violet)}

.lt-ergaenzen{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.lt-ergtext{font-size:12px;color:var(--text-faint)}

/* ---------- Massenaktion ---------- */
.lt-massen{display:grid;grid-template-columns:1fr 1fr 110px;gap:10px;align-items:center;margin:14px 0 10px}
@media (max-width:700px){
  .lt-massen{grid-template-columns:1fr}
}

/* ---------- Export: welche Sorte wie geschrieben wird ---------- */
.lt-wie{border:1px solid var(--line);border-radius:var(--r-sm);margin:12px 0;overflow:hidden}
.lt-wiezeile{
  display:grid;grid-template-columns:120px 190px 1fr;gap:12px;align-items:baseline;
  padding:8px 12px;border-bottom:1px solid var(--line);font-size:12.5px;
}
.lt-wiezeile:last-child{border-bottom:0}
.lt-wiewas{font-weight:550;color:var(--text)}
.lt-wiewie{color:var(--blue-soft)}
.lt-wiewarum{color:var(--text-faint)}

/* ======================================================================
   Loot-Bäume

   Eine Zeile je Knoten, eingerückt statt umrahmt: bei acht Ebenen wären
   verschachtelte Kästen nicht mehr lesbar. Die Einrückung macht das
   Modul über padding-left, nicht das Stylesheet – sie hängt an der Tiefe.
   ====================================================================== */
.lt-baum{max-width:1240px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.lt-kzeile{
  display:grid;
  grid-template-columns:26px minmax(180px,1fr) 150px 52px 150px auto 28px 28px;
  gap:10px;align-items:center;padding:3px 8px 3px 0;
  border-bottom:1px solid var(--line);
}
.lt-kzeile.blatt{grid-template-columns:26px 40px minmax(140px,1fr) 150px 52px 150px auto 28px 28px}
.lt-kzeile:last-child{border-bottom:0}
.lt-kzeile:hover{background:var(--surface)}
.lt-kleer{display:block}
.lt-knamen{min-width:0}
.lt-kname{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-kcode{display:block;font-size:10.5px;color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-ksolo{font-size:11px;color:var(--text-faint);white-space:nowrap}
.lt-kinfo{font-size:11.5px;color:var(--text-faint);white-space:nowrap}
.lt-kinfo.warn{color:var(--amber)}
.lt-kakt{display:flex;gap:3px}
.lt-kneu{display:flex;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}

/* Gegenstand auswählen */
.lt-wahlliste{max-height:46vh;overflow-y:auto;margin-top:12px;border:1px solid var(--line);border-radius:var(--r-sm)}
.lt-wahl{
  display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:center;width:100%;
  padding:5px 9px;background:none;border:0;border-bottom:1px solid var(--line);
  text-align:left;cursor:pointer;transition:background var(--t) linear;
}
.lt-wahl:last-child{border-bottom:0}
.lt-wahl:hover{background:var(--surface-2)}

/* ======================================================================
   Gegenstände (Parameters.json)
   ====================================================================== */
.lt-gzeile{
  border:1px solid var(--line);border-radius:var(--r);margin-bottom:4px;
  background:var(--surface);max-width:1240px;transition:border-color var(--t) linear;
}
.lt-gzeile.changed{position:relative;overflow:hidden;border-color:var(--line-strong)}
.lt-gzeile.changed::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green);z-index:1;
}
.lt-gkopf{
  display:grid;
  grid-template-columns:26px 40px minmax(160px,1fr) 132px 78px 108px minmax(120px,260px) 28px;
  gap:10px;align-items:center;padding:5px 10px;
}
.lt-zonen{display:flex;gap:8px}
.chk.klein{font-size:11.5px;gap:3px}
.chk.gesperrt{color:var(--amber)}
.lt-gwarn{font-size:11px;color:var(--amber);white-space:nowrap}

/* ======================================================================
   Abklinggruppen und Zonen

   Beide Dateien liefert SCUM nicht mit. Der Bereich ist trotzdem immer
   da – der Anlege-Kasten steht dann statt der Liste.
   ====================================================================== */
.lt-anlegen{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 17px;max-width:1240px;
}
.lt-anlegen p{margin:0 0 11px;color:var(--text-dim);font-size:13.5px;max-width:80ch}

.lt-gruppe{
  display:grid;grid-template-columns:minmax(220px,1fr) 108px 108px 132px 168px 132px 28px;
  gap:10px;align-items:end;padding:6px 10px;margin-bottom:4px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);max-width:1240px;
}
.lt-gruppe .lt-fixtext{display:flex;flex-direction:column;gap:4px}
.lt-gruppe .chk{padding-bottom:6px}
.lt-gruppe .lt-kinfo{padding-bottom:7px}

.lt-zonebox{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:11px 13px;margin-bottom:8px;max-width:1240px;
}
.lt-zonebox.changed{position:relative;overflow:hidden;border-color:var(--line-strong)}
.lt-zonebox.changed::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green);z-index:1;
}
.lt-zonekopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:9px}
.lt-zonekopf .lt-kname{display:inline}
.lt-zonekopf .lt-kcode{display:inline;flex:1 1 auto}
.lt-zonezeile{
  display:grid;grid-template-columns:minmax(120px,1fr) 262px 262px 108px auto 28px;
  gap:10px;align-items:end;padding:5px 0;border-top:1px solid var(--line);
}
/* Karten-Koordinaten haben elf Stellen – schmalere Felder schneiden ab. */
.lt-zonezeile .ctl-line .inp.num{width:100%;min-width:104px}
.lt-zonezeile .lt-kinfo{padding-bottom:7px}

.lt-faktoren{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:14px;max-width:1000px}
.lt-faktoren .lt-flabel{display:flex;align-items:center;gap:5px}
/* Ein Feldname, der erschlossen und nicht belegt ist, sagt das auch. */
.lt-erschlossen{
  display:inline-flex;align-items:center;justify-content:center;
  width:13px;height:13px;border-radius:50%;
  border:1px solid rgba(255,181,69,.55);color:var(--amber);
  font-size:9px;line-height:1;cursor:help;
}

@media (max-width:1400px){
  .lt-gruppe{grid-template-columns:minmax(180px,1fr) 96px 96px 120px auto 28px}
  .lt-gruppe .chk{display:none}
  .lt-zonezeile{grid-template-columns:minmax(120px,1fr) 190px 190px auto 28px}
  .lt-kzeile,.lt-kzeile.blatt{grid-template-columns:26px minmax(140px,1fr) 140px 48px auto 28px 28px}
  .lt-kzeile .thumb{display:none}
  .lt-gkopf{grid-template-columns:26px 40px minmax(140px,1fr) 132px 108px auto 28px}
  .lt-gkopf .lt-gwarn{display:none}
}
@media (max-width:1100px){
  .lt-kzeile,.lt-kzeile.blatt{grid-template-columns:26px 1fr auto 28px}
  .lt-kzeile .lt-ksolo,.lt-kzeile .lt-anteil,.lt-kzeile .lt-kinfo{display:none}
  .lt-gkopf{grid-template-columns:26px 1fr}
  .lt-gkopf .lt-zonen,.lt-gkopf .chk,.lt-gkopf .lt-chips{grid-column:2 / -1}
  .lt-wiezeile{grid-template-columns:1fr}
  .lt-gruppe,.lt-zonezeile{grid-template-columns:1fr}
}

@media (max-width:1400px){
  .lt-kopf{grid-template-columns:26px minmax(150px,1fr) 96px 132px auto}
  .lt-kopf .lt-chips{grid-column:2 / -1}
}

@media (max-width:1100px){
  .row{grid-template-columns:1fr}
  .r-ctl{max-width:340px}
  .sidebar{width:214px;flex-basis:214px}
  .lt-kopf{grid-template-columns:26px 1fr;gap:8px}
  .lt-kopf .lt-feld,.lt-kopf .lt-menge,.lt-kopf .lt-chips{grid-column:2 / -1}
  .lt-detail{padding-left:16px}
  .lt-katzeile,.lt-lagezeile,.lt-befehl{grid-template-columns:1fr}
}

/* Regel 5: eine Zeile am Dateiende, keine Einzelfallprüfung. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms !important;animation-duration:1ms !important}
}