/* ══════════════════════════════════════════════════════════════════════════
   MH Build — die Zentrale (die Arbeitsansicht)
   ══════════════════════════════════════════════════════════════════════════
   Präfix z-. Farbwerte kommen aus strecke.css (--k-*), damit Strecke und
   Zentrale sich nicht auseinanderentwickeln: was man einrichtet, soll genau
   so aussehen wie das, was danach dasteht.
   ────────────────────────────────────────────────────────────────────────── */

body.z{
  margin:0; background:var(--k-grund); color:var(--k-tinte);
  font:400 15px/1.55 'Instrument',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  display:grid; grid-template-columns:236px 1fr; min-height:100vh;
}
body.z h1,body.z h2,body.z h3{margin:0;font-weight:520;letter-spacing:-.026em;line-height:1.15}
body.z p{margin:0;color:var(--k-tinte-2)}

/* ── Seitenleiste ───────────────────────────────────────────────────────── */
.z-seite{
  position:sticky; top:0; height:100vh; overflow-y:auto;
  background:#F7F6F8; border-right:1px solid var(--k-linie-2);
  padding:16px 12px 20px; display:flex; flex-direction:column; gap:3px;
}
.z-firma{display:flex; align-items:center; gap:10px; padding:4px 8px 16px}
.z-firma em{width:28px;height:28px;border-radius:9px;font-style:normal;flex:none;
  display:grid;place-items:center;font-size:12px;font-weight:640;color:#fff;
  background:linear-gradient(140deg,var(--k-akzent),var(--k-cyan))}
.z-firma b{font-size:14px;font-weight:560;letter-spacing:-.015em;line-height:1.2}
.z-firma span{display:block;font-size:11.5px;color:var(--k-tinte-3);font-weight:400}

.z-reiter{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:8px 10px; border-radius:9px; font-size:13.5px; color:var(--k-tinte-2);
  transition:background .18s, color .18s;
}
.z-reiter:hover{background:rgba(18,18,26,.045); color:var(--k-tinte)}
.z-reiter.an{background:var(--k-akzent-hauch); color:var(--k-akzent-tief); font-weight:540}
.z-reiter s{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4;flex:none}
.z-reiter .z-zahl{margin-left:auto; font-size:11.5px; color:var(--k-tinte-3);
  font-variant-numeric:tabular-nums}

.z-fuss{margin-top:auto; padding-top:14px; border-top:1px solid var(--k-linie-2); display:grid; gap:2px}
.z-klein-knopf{display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:7px 10px; border-radius:9px; font-size:12.5px; color:var(--k-tinte-3)}
.z-klein-knopf:hover{background:rgba(18,18,26,.045); color:var(--k-tinte)}
.z-klein-knopf svg{width:14px;height:14px;flex:none}

/* ── Ansicht anpassen ───────────────────────────────────────────────────── */
/* Zwei Zustände statt Dauerbetrieb: solange nicht angepasst wird, ist die
   Leiste eine Leiste. Greifer und Augen erscheinen nur im Anpassmodus —
   sonst sieht jeder Reiter jederzeit nach einer Baustelle aus. */
body.z.anpassen .z-reiter{cursor:grab; background:#fff;
  box-shadow:inset 0 0 0 1px var(--k-linie); margin-bottom:4px}
body.z.anpassen .z-reiter.aus{opacity:.42}
body.z.anpassen .z-reiter.zieht{opacity:.35; cursor:grabbing}
body.z.anpassen .z-reiter.ueber{box-shadow:inset 0 0 0 1.5px var(--k-akzent)}
.z-greifer,.z-auge{display:none}
body.z.anpassen .z-greifer{display:block; width:12px; height:12px; flex:none;
  color:var(--k-tinte-3)}
body.z.anpassen .z-auge{display:grid; place-items:center; margin-left:auto;
  width:22px; height:22px; border-radius:6px; color:var(--k-tinte-3)}
body.z.anpassen .z-auge:hover{background:rgba(18,18,26,.07); color:var(--k-tinte)}
body.z.anpassen .z-zahl{display:none}
.z-anpass-hinweis{display:none; margin:0 2px 12px; padding:11px 12px; border-radius:11px;
  background:var(--k-akzent-hauch); font-size:12px; line-height:1.5;
  color:var(--k-akzent-tief)}
body.z.anpassen .z-anpass-hinweis{display:block}

/* ── Hauptfläche ────────────────────────────────────────────────────────── */
.z-haupt{min-width:0; display:flex; flex-direction:column;
  background:var(--k-grund)}
.z-kopf{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px clamp(20px,3vw,34px); background:rgba(251,250,249,.86);
  backdrop-filter:blur(14px) saturate(1.4); border-bottom:1px solid var(--k-linie-2);
}
.z-kopf h1{font-size:21px}
.z-kopf .z-unter{font-size:12.5px; color:var(--k-tinte-3); margin-top:2px}
.z-werkzeuge{display:flex; gap:8px; align-items:center}
.z-knopf{display:inline-flex; align-items:center; gap:8px; padding:9px 15px;
  border-radius:10px; background:var(--k-tinte); color:#fff; font-size:13.5px;
  font-weight:520; transition:.2s var(--k-weich)}
.z-knopf:hover{background:#000; transform:translateY(-1px)}
.z-knopf.still{background:transparent; color:var(--k-tinte-2);
  box-shadow:inset 0 0 0 1px var(--k-linie)}
.z-knopf.still:hover{background:rgba(18,18,26,.045); color:var(--k-tinte)}

.z-inhalt{padding:clamp(20px,3vw,34px); flex:1}

/* ── Bahnen (Vorgänge) ──────────────────────────────────────────────────── */
.z-bahnen{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(216px,1fr);
  gap:12px; overflow-x:auto; padding-bottom:8px}
.z-bahn{background:#F4F3F6; border-radius:14px; padding:12px 11px; min-height:220px}
.z-bahn-kopf{display:flex; align-items:center; justify-content:space-between;
  padding:0 3px 10px}
.z-bahn-kopf b{font-size:11px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--k-tinte-3)}
.z-bahn-kopf span{font-size:11px; color:var(--k-tinte-3); font-variant-numeric:tabular-nums}
.z-bahn.gewonnen .z-bahn-kopf b{color:var(--k-gruen)}
.z-bahn.ueber{box-shadow:inset 0 0 0 1.5px var(--k-akzent)}
.z-karte{background:#fff; border-radius:11px; padding:11px 12px; margin-bottom:7px;
  box-shadow:0 1px 2px rgba(18,18,26,.07); cursor:grab; transition:.18s var(--k-weich)}
.z-karte:hover{transform:translateY(-1px); box-shadow:0 4px 14px -6px rgba(18,18,26,.26)}
.z-karte.zieht{opacity:.4}
.z-karte b{display:block; font-size:13.5px; font-weight:520; letter-spacing:-.012em}
.z-karte span{display:block; font-size:12px; color:var(--k-tinte-3); margin-top:3px}
.z-karte .z-marke{display:inline-block; margin-top:7px; font-size:10.5px; font-weight:560;
  padding:3px 8px; border-radius:999px; background:var(--k-akzent-hauch);
  color:var(--k-akzent-tief)}
.z-bahn-neu{width:100%; padding:9px; border-radius:10px; font-size:12.5px;
  color:var(--k-tinte-3); text-align:center; transition:.18s}
.z-bahn-neu:hover{background:rgba(18,18,26,.05); color:var(--k-tinte)}

/* ── Karten/Listen allgemein ────────────────────────────────────────────── */
.z-gitter{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px}
.z-feld{background:#fff; border-radius:14px; padding:16px 17px;
  box-shadow:inset 0 0 0 1px var(--k-linie)}
.z-feld .z-gross{font-size:30px; font-weight:520; letter-spacing:-.035em;
  font-variant-numeric:tabular-nums}
.z-feld .z-was{font-size:12.5px; color:var(--k-tinte-3); margin-top:3px}
.z-liste{background:#fff; border-radius:14px; box-shadow:inset 0 0 0 1px var(--k-linie);
  overflow:hidden}
.z-zeile{display:grid; grid-template-columns:1fr auto; gap:3px 16px; align-items:center;
  padding:13px 16px; border-bottom:1px solid var(--k-linie-2)}
.z-zeile:last-child{border-bottom:0}
.z-zeile b{font-size:13.5px; font-weight:520}
.z-zeile span{grid-column:1; font-size:12px; color:var(--k-tinte-3)}
.z-zeile em{grid-row:1/3; grid-column:2; font-style:normal; font-size:11.5px;
  color:var(--k-tinte-3)}

/* ── Ehrlich leer ───────────────────────────────────────────────────────── */
/* Kein erfundener Bestand. Ein System, das mit fremden Daten begrüsst, lehrt
   dem Nutzer, seinen eigenen Zahlen nicht zu trauen. */
.z-leer{display:grid; place-items:center; text-align:center; padding:64px 20px;
  background:#fff; border-radius:16px; box-shadow:inset 0 0 0 1px var(--k-linie)}
.z-leer h3{font-size:19px; margin-bottom:8px}
.z-leer p{font-size:14px; max-width:44ch; margin-bottom:18px}
.z-leer .z-knopf-reihe{display:flex; gap:9px; flex-wrap:wrap; justify-content:center}

.z-hinweis{margin-bottom:16px; padding:12px 15px; border-radius:12px;
  background:rgba(224,150,20,.10); box-shadow:inset 0 0 0 1px rgba(224,150,20,.24);
  font-size:13px; color:#8A5A05; line-height:1.55}
.z-hinweis b{font-weight:600}
/* Der zweite Hinweis darf nicht so laut sein wie der erste — zwei gleich
   dringliche Warnungen heben sich gegenseitig auf. */
.z-hinweis.stil{background:rgba(18,18,26,.04); box-shadow:inset 0 0 0 1px var(--k-linie);
  color:var(--k-tinte-2)}
.z-hinweis.stil a{color:var(--k-tinte)}
.z-hinweis a{color:#6B4504}

@media(max-width:840px){
  body.z{grid-template-columns:1fr}
  .z-seite{position:static; height:auto; border-right:0;
    border-bottom:1px solid var(--k-linie-2)}
  .z-seite .z-reiter{display:inline-flex; width:auto}
  .z-reiter-band{display:flex; flex-wrap:wrap; gap:4px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important}
}