/* Studio 2, Verwaltungsoberfläche. Werte kommen aus der Werkzeug-Designsprache (docs/WERKZEUG_DESIGN.md, werkzeug.css),
   hier nur über die eigenen Variablen --a-* verdrahtet. Lucide-Symbole. */
:root {
  /* Werte aus der Werkzeug-Designsprache (docs/werkzeug.css, --w-*); eigene Namen --a-*, damit sich die Skalen nicht überschreiben */
  --a-grund: var(--w-grund-seite);
  --a-flaeche: var(--w-grund-panel);
  --a-text: var(--w-text-stark);
  --a-leise: var(--w-text-weich);
  --a-linie: var(--w-rand-standard);
  --a-linie-stark: var(--w-rand-hover);
  --a-aktiv: var(--w-grund-haupt-tint);
  --a-warn: var(--w-fehler-text);
  --a-ok: var(--w-ok-text);
  --a-schrift: var(--w-schrift-ui);
  --a-mono: var(--w-schrift-mono);
  --a-radius: var(--w-radius-steuer);
  --a-abstand-1: 4px;
  --a-abstand-2: 8px;
  --a-abstand-3: 12px;
  --a-abstand-4: 16px;
  --a-abstand-5: 20px;
  --a-abstand-6: 28px;
  --a-text-klein: var(--w-groesse-mikro);
  --a-groesse: var(--w-groesse-klein);
  --a-text-titel: var(--w-groesse-titel);
}
* { box-sizing: border-box; }
html { background: var(--a-grund); }
body { margin: 0; background: var(--a-grund); color: var(--a-text); font: var(--a-groesse)/1.5 var(--a-schrift); }
body { min-height: 100vh; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
.sym { display: inline-block; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--bild) center / contain no-repeat; mask: var(--bild) center / contain no-repeat; flex: none; }

.kopf { display: flex; align-items: center; gap: var(--a-abstand-4); padding: var(--a-abstand-3) var(--a-abstand-5); background: var(--a-flaeche); border-bottom: 1px solid var(--a-linie); }
.kopf h1 { font-size: var(--a-text-titel); font-weight: 600; margin: 0; }
.kopf .rechts { margin-left: auto; display: flex; align-items: center; gap: var(--a-abstand-3); color: var(--a-leise); }
.aufbau { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: calc(100vh - 57px); }
.navi { padding: var(--a-abstand-4) var(--a-abstand-3); border-right: 1px solid var(--a-linie); background: var(--a-flaeche); display: flex; flex-direction: column; gap: var(--a-abstand-1); }
.navi button { display: flex; align-items: center; gap: var(--a-abstand-2); width: 100%; text-align: left; padding: var(--a-abstand-2) var(--a-abstand-3); border: 0; background: none; border-radius: var(--a-radius); cursor: pointer; }
.navi button[aria-current="page"] { background: var(--a-aktiv); color: var(--w-haupt); font-weight: 600; }
.navi label { color: var(--a-leise); font-size: var(--a-text-klein); padding: var(--a-abstand-2) var(--a-abstand-3) 0; }
.navi select { margin: 0 var(--a-abstand-3) var(--a-abstand-3); padding: var(--a-abstand-1) var(--a-abstand-2); border: 1px solid var(--a-linie-stark); border-radius: var(--a-radius); background: var(--a-flaeche); }
main { padding: var(--a-abstand-5); display: flex; flex-direction: column; gap: var(--a-abstand-5); min-width: 0; }
.karte { background: var(--a-flaeche); border: 1px solid var(--a-linie); border-radius: var(--a-radius); padding: var(--a-abstand-4) var(--a-abstand-5); display: flex; flex-direction: column; gap: var(--a-abstand-3); min-width: 0; }
.karte h2 { font-size: 16px; font-weight: 600; margin: 0; }
.karte p, .karte ul, .karte ol { margin: 0; }
.leise { color: var(--a-leise); }
.klein { font-size: var(--a-text-klein); }
.zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-abstand-2); }
.knopf { display: inline-flex; align-items: center; gap: var(--a-abstand-2); padding: var(--a-abstand-2) var(--a-abstand-3); border: 1px solid var(--a-linie-stark); background: var(--a-flaeche); border-radius: var(--a-radius); cursor: pointer; min-height: 36px; }
.knopf.haupt { background: var(--a-text); color: var(--a-flaeche); border-color: var(--a-text); }
.knopf:disabled { opacity: .5; cursor: default; }
input[type=text], input[type=url], input[type=password], textarea, select { padding: var(--a-abstand-2) var(--a-abstand-3); border: 1px solid var(--a-linie-stark); border-radius: var(--a-radius); background: var(--a-flaeche); min-width: 0; }
.feld { display: flex; flex-direction: column; gap: var(--a-abstand-1); }
.feld span { font-size: var(--a-text-klein); color: var(--a-leise); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: var(--a-abstand-2); border-bottom: 1px solid var(--a-linie); vertical-align: top; }
th { font-size: var(--a-text-klein); color: var(--a-leise); font-weight: 500; }
td.zahl, th.zahl { text-align: right; }
.warn { color: var(--a-warn); font-weight: 600; }
.gut { color: var(--a-ok); }
.gestrichen { color: var(--a-leise); }
.tabelle-huelle { overflow-x: auto; }
.ellipse { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 36ch; }
.leiter { display: flex; flex-direction: column; gap: var(--a-abstand-2); }
.stufe { display: grid; grid-template-columns: 170px 70px minmax(0, 1fr); align-items: baseline; gap: var(--a-abstand-3); border-bottom: 1px solid var(--a-linie); padding-bottom: var(--a-abstand-2); }
.stufe .muster { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balken { height: 12px; background: var(--a-leise); border-radius: 2px; }
.farbfeld { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--a-linie-stark); vertical-align: -2px; border-radius: 2px; }
.anmeldung { max-width: 360px; margin: 12vh auto; }
.breiten { display: inline-flex; border: 1px solid var(--a-linie-stark); border-radius: var(--a-radius); overflow: hidden; }
.breiten button { border: 0; background: var(--a-flaeche); padding: var(--a-abstand-1) var(--a-abstand-3); cursor: pointer; }
.breiten button[aria-pressed="true"] { background: var(--a-aktiv); font-weight: 600; }
.muster-buehne { border: 1px solid var(--a-linie); border-radius: var(--a-radius); overflow: hidden; }
.meldung { padding: var(--a-abstand-2) var(--a-abstand-3); border: 1px solid var(--a-linie-stark); border-radius: var(--a-radius); background: var(--a-aktiv); }
code { font-family: var(--a-mono); font-size: 12px; }
/* Übersicht und Bilder (Klassen aus werkzeug.css, hier nur Anordnung) */
.u-seite { background: transparent; display: flex; flex-direction: column; gap: var(--w-abstand-28); min-width: 0; }
.u-kopf { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--w-abstand-16); }
.u-titel { display: flex; flex-direction: column; gap: var(--w-abstand-4); min-width: 0; }
.u-titel p { margin: 0; }
.u-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--w-abstand-12); }
.w-kennzahl { display: flex; flex-direction: column; gap: var(--w-abstand-4); }
.u-seite h3 { margin: 0; }
.u-seite .w-liste th, .u-seite .w-liste td { text-align: left; }
.u-seite .w-liste .w-liste__zahl { text-align: right; }
.u-seite figure { margin: 0; }
.u-hochladen { max-width: 640px; }
.u-hochladen p { margin: 0; }
.u-hochladen input[type=file] { height: auto; padding: var(--w-abstand-8); }
@media (max-width: 820px) {
  .u-seite .w-liste { min-width: 640px; }
  .aufbau { grid-template-columns: 1fr; }
  .navi { border-right: 0; border-bottom: 1px solid var(--a-linie); flex-direction: row; flex-wrap: wrap; }
  .navi button { width: auto; }
  main { padding: var(--a-abstand-4); }
  .stufe { grid-template-columns: 110px 56px minmax(0, 1fr); }
}