/* AV-Assistent – Oberfläche. Design-Tokens aus der bisherigen Web-App (hell/dunkel).
   Schriften: Barlow Condensed / IBM Plex Sans / IBM Plex Mono, sofern lokal installiert,
   sonst Systemschriften – keine Schrift wird aus dem Netz geladen (offline/Tauri). */
:root {
  --bg: #ECEFF1; --surface: #FFFFFF; --surface-2: #F5F7F8; --ink: #15191E; --muted: #5A6570; --line: #D2D8DE;
  --accent: #1E5BB8; --accent-ink: #FFFFFF; --accent-soft: #E3ECF9;
  --warn: #8A6400; --warn-bg: #FFF2C2; --warn-line: #E6B800;
  --err: #B42A20; --err-bg: #FBE2DE; --err-line: #D9473B;
  --ok: #23704A; --ok-bg: #DDF1E6;
  --dealer: #6B4FA0; --dealer-bg: #EFE9F8; --dealer-ink: #FFFFFF;
  --ki: #8A3FA0; --ki-bg: #F6E8FA;
  --bar1: #1E5BB8; --rest: #A9B4BE; --scrap: #D9473B;
  --f-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 8px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111418; --surface: #1A1F25; --surface-2: #20262D; --ink: #E5E9ED; --muted: #98A3AE; --line: #2E363F;
    --accent: #6EA2F0; --accent-ink: #0E1620; --accent-soft: #1D2B40;
    --warn: #F0C94A; --warn-bg: #3A3112; --warn-line: #B38F14;
    --err: #FF8A7E; --err-bg: #3D1C19; --err-line: #C9463B;
    --ok: #72D19D; --ok-bg: #15301F; --dealer: #B79AF0; --dealer-bg: #2A2140; --dealer-ink: #16101F;
    --ki: #E1A3F0; --ki-bg: #33203A;
    --bar1: #6EA2F0; --rest: #5E6A76; --scrap: #C9463B;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111418; --surface: #1A1F25; --surface-2: #20262D; --ink: #E5E9ED; --muted: #98A3AE; --line: #2E363F;
  --accent: #6EA2F0; --accent-ink: #0E1620; --accent-soft: #1D2B40;
  --warn: #F0C94A; --warn-bg: #3A3112; --warn-line: #B38F14;
  --err: #FF8A7E; --err-bg: #3D1C19; --err-line: #C9463B;
  --ok: #72D19D; --ok-bg: #15301F; --dealer: #B79AF0; --dealer-bg: #2A2140; --dealer-ink: #16101F;
  --ki: #E1A3F0; --ki-bg: #33203A;
  --bar1: #6EA2F0; --rest: #5E6A76; --scrap: #C9463B;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--f-body); padding: 0 16px 56px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; letter-spacing: .01em; margin: 0; text-wrap: balance; }
h2 { font-size: 1.5rem; } h3 { font-size: 1.15rem; }
p { margin: 0; }
a { color: var(--accent); }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.hint { font-size: .82rem; color: var(--muted); }
.label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.nur-vorleser { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: -9999px; top: 8px; background: var(--accent); color: var(--accent-ink); padding: .4rem .8rem; border-radius: 6px; z-index: 50; }
.sprung:focus { left: 16px; }

/* Knöpfe und Eingaben */
button, .btn {
  font: inherit; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 6px;
  padding: .45rem .85rem; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; line-height: 1.3;
}
button:hover:not(:disabled), .btn:hover { border-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.primaer { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
button.gefahr { color: var(--err); border-color: var(--err-line); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.klein { padding: .2rem .55rem; font-size: .8rem; }
button.link { border: 0; background: none; padding: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; text-align: left; }
button.melden { border-color: transparent; background: none; color: var(--muted); padding: .1rem .35rem; font-size: .78rem; }
button.melden:hover { color: var(--err); border-color: var(--err-line); }
input, select, textarea {
  font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: .4rem .55rem; min-width: 0;
}
input[type="number"] { font-family: var(--f-mono); text-align: right; }
input[aria-invalid="true"] { border-color: var(--err-line); background: var(--err-bg); }
input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); margin: 0; }
label.feld { display: grid; gap: 3px; font-size: .82rem; color: var(--muted); }
label.feld > input, label.feld > select, label.feld > textarea { color: var(--ink); font-size: .95rem; }

/* Kopfzeile */
.kopf { max-width: 1680px; margin: 0 auto 18px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; padding-block: 20px 14px; border-bottom: 2px solid var(--ink); }
.marke { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.marke h1 { font-size: 2.1rem; font-weight: 700; line-height: 1; }
.marke h1 a { color: inherit; text-decoration: none; }
.tag { font-family: var(--f-mono); font-size: .72rem; border: 1px solid var(--muted); color: var(--muted); padding: 1px 6px; border-radius: 3px; }
.schritte { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.schritte li { font-family: var(--f-display); font-size: 1.02rem; font-weight: 600; padding: .22rem .7rem; border-radius: 4px; color: var(--muted); display: flex; gap: .4rem; align-items: center; }
.schritte li b { font-family: var(--f-mono); font-size: .78rem; font-weight: 500; }
.schritte li.an { background: var(--ink); color: var(--bg); }
.schritte li.erledigt { color: var(--ink); }
.nutzerleiste { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .88rem; }
.nutzerleiste nav { display: flex; gap: 4px; }
.nutzerleiste nav a { padding: .3rem .6rem; border-radius: 5px; text-decoration: none; color: var(--ink); }
.nutzerleiste nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* Grundlayout */
main { max-width: 1680px; margin: 0 auto; }
.stapel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 12px; align-content: start; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.panel > h2 { scroll-margin-top: 70px; }
.zeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.zwischen { justify-content: space-between; }
.leer { color: var(--muted); font-style: italic; }

/* Meldungen */
#meldungen { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 40; max-width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--ink); color: var(--bg); padding: .6rem .9rem; border-radius: 6px; box-shadow: 0 4px 16px rgb(0 0 0 / .25); font-size: .9rem; }
.toast.fehler { background: var(--err); color: #fff; }
.problem { border: 1px solid var(--err-line); background: var(--err-bg); color: var(--ink); border-radius: 6px; padding: .6rem .8rem; display: grid; gap: 4px; }
.problem b { color: var(--err); }
.problem.warn { border-color: var(--warn-line); background: var(--warn-bg); }
.problem.warn b { color: var(--warn); }
.infokasten { background: var(--accent-soft); border-radius: 6px; padding: .5rem .8rem; font-size: .88rem; }

/* Anmeldung */
.anmeldung { max-width: 420px; margin: 8vh auto 0; }
.anmeldung form { display: grid; gap: 12px; }

/* Hochladen */
.ablage { border: 1.5px dashed var(--line); border-radius: 8px; padding: 18px; display: grid; gap: 12px; background: var(--surface-2); }
.ablage.drueber { border-color: var(--accent); background: var(--accent-soft); }
.fortschritt { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.fortschritt i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.dateiliste { font-size: .82rem; color: var(--muted); max-height: 7.5em; overflow: auto; margin: 0; padding-left: 1.2em; }
.upload-felder { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; }
@media (max-width: 700px) { .upload-felder { grid-template-columns: minmax(0, 1fr); } }

/* Kennzahlen */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.kpi { border: 1px solid var(--line); border-radius: 6px; padding: .5rem .7rem; background: var(--surface-2); }
.kpi .label { overflow-wrap: anywhere; }
.kpi b { display: block; font-family: var(--f-mono); font-size: 1.3rem; font-weight: 500; }
.kpi.warn { border-color: var(--warn-line); background: var(--warn-bg); }
.kpi.err { border-color: var(--err-line); background: var(--err-bg); }

/* Tabellen */
.tabelle { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; }
.tabelle.hoch { max-height: 640px; overflow: auto; }
.tabelle.hoch thead th { position: sticky; top: 0; z-index: 1; }
table { border-collapse: collapse; width: 100%; font-size: .86rem; }
th { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; text-align: left; padding: .45rem .5rem; background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: .35rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
td.zahl, th.zahl { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.gruppe td { background: var(--surface-2); font-weight: 600; border-top: 1px solid var(--line); }
tr.haendler td { background: var(--dealer-bg); }
tr.bedarf td { background: var(--warn-bg); }
tr.ki-zeile td:first-child { box-shadow: inset 3px 0 0 var(--ki); }
tr.offen td:first-child { box-shadow: inset 3px 0 0 var(--err-line); }
td.aktionen { white-space: nowrap; text-align: right; width: 1%; }
.menge input { width: 6.5rem; }

/* Chips, Marken */
.chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; padding: .12rem .55rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; color: var(--ink); }
.chip .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.chip.ok .punkt { background: var(--ok); } .chip.warn .punkt { background: var(--warn-line); } .chip.err .punkt { background: var(--err-line); } .chip.info .punkt { background: var(--accent); }
.chip.haendler { border-color: var(--dealer); } .chip.haendler .punkt { background: var(--dealer); }
.marke-ki { display: inline-block; font-size: .72rem; font-weight: 600; padding: .05rem .45rem; border-radius: 4px; background: var(--ki-bg); color: var(--ki); border: 1px solid var(--ki); white-space: nowrap; }
.marke-geaendert { display: inline-block; font-size: .72rem; font-weight: 600; padding: .05rem .45rem; border-radius: 4px; background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-line); }
.marke-server { display: inline-block; font-size: .72rem; font-weight: 600; padding: .05rem .45rem; border-radius: 4px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--muted); white-space: nowrap; }
.ki-hinweis { display: block; font-size: .76rem; color: var(--ki); margin-top: 2px; }
.warn-text { color: var(--warn); } .err-text { color: var(--err); }

/* Hinweise */
.hinweise { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.hinweis { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; font-size: .86rem; padding: 6px 10px; border-radius: 5px; line-height: 1.4; }
.hinweis.info { background: var(--accent-soft); }
.hinweis.gelb { background: var(--warn-bg); }
.hinweis.gelb .ebene { color: var(--warn); }
.hinweis.rot { background: var(--err-bg); border-left: 4px solid var(--err-line); }
.hinweis.rot .ebene { color: var(--err); }
.hinweis.offen-markiert { outline: 2px solid var(--err-line); }
.hinweis .ebene { font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; padding-top: 2px; min-width: 2.6em; }
.hinweis .quittung { grid-column: 2 / 4; display: flex; gap: 6px; align-items: center; font-size: .82rem; font-weight: 600; color: var(--err); cursor: pointer; width: fit-content; }
.regel { font-family: var(--f-mono); font-size: .72rem; border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; margin-left: 4px; opacity: .8; }

/* Sägeliste */
.schalter { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.schalter button { border: 0; border-radius: 0; padding: .2rem .6rem; font-size: .78rem; background: var(--surface); }
.schalter button[aria-pressed="true"].w { background: var(--accent); color: var(--accent-ink); }
.schalter button[aria-pressed="true"].h { background: var(--dealer); color: var(--dealer-ink); }
td.gelesen-aus { min-width: 11em; }
td.schnitt { white-space: nowrap; }
.schnitt.gehrung { color: var(--warn); font-weight: 600; }
.quellen { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: .76rem; max-width: 46ch; }
.quellen button.link { font-size: .76rem; }

/* Verschnitt */
.balken { display: grid; gap: 6px; }
.balken-zeile { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 8px; align-items: center; font-size: .72rem; }
.balken-zeile svg { width: 100%; height: 24px; display: block; }
.balken-zeile .teil { fill: var(--bar1); opacity: .85; }
.balken-zeile .teil-text { fill: var(--accent-ink); font-size: 10px; font-family: var(--f-mono); }
.balken-zeile .anschnitt { fill: var(--line); }
.balken-zeile .rest { fill: var(--muted); opacity: .35; }
.balken-zeile .rest.lager { fill: var(--ok); }

details.box { border: 1px solid var(--line); border-radius: 6px; padding: .5rem .8rem; background: var(--surface-2); }
details.box > summary { cursor: pointer; font-weight: 600; font-size: .92rem; }
details.box[open] > summary { margin-bottom: 10px; }
.feldraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
dl.fakten { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; margin: 0; font-size: .86rem; }
dl.fakten dt { color: var(--muted); } dl.fakten dd { margin: 0; }

/* Prüfansicht */
.pruef-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.pruef-layout.mit-zeichnung { grid-template-columns: minmax(0, 3fr) minmax(360px, 2fr); }
.unternav { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 8px 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .86rem; border-bottom: 1px solid var(--line); }
.unternav a { text-decoration: none; color: var(--ink); padding: .1rem .3rem; border-radius: 4px; }
.unternav a:hover { background: var(--accent-soft); }
.aenderungsleiste { position: sticky; bottom: 0; z-index: 6; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 8px; padding: .6rem .9rem; box-shadow: 0 -4px 14px rgb(0 0 0 / .12); }
.aenderungsleiste b { color: var(--warn); }
.bestaetigen { display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: .8rem .9rem; background: var(--surface-2); }
.bestaetigen.erledigt { border-color: var(--ok); background: var(--ok-bg); }
.exporte { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.export { border: 1px solid var(--line); border-radius: 6px; padding: .7rem .8rem; display: grid; gap: 6px; background: var(--surface-2); align-content: start; }
.export h3 { font-size: 1.05rem; }
.verlauf { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.verlauf a { display: inline-flex; gap: .4rem; align-items: center; font-size: .8rem; padding: .2rem .6rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); background: var(--surface-2); }
.verlauf a[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }

/* Zeichnungsbetrachter */
.zeichnung-paneel { position: sticky; top: 52px; height: calc(100vh - 60px); display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; min-width: 0; }
.zeichnung-paneel .titel { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.zeichnung-paneel h2 { font-size: 1.2rem; overflow-wrap: anywhere; }
.bildbereich { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.bildbereich > .bildflaeche { flex: 1 1 auto; }
.bildflaeche { overflow: auto; border: 1px solid var(--line); border-radius: 6px; background: #fff; min-height: 200px; position: relative; }
.bildflaeche img { display: block; }
.bildflaeche img.einpassen { width: 100%; height: auto; }
.bildflaeche .laden { position: absolute; inset: 0; display: grid; place-items: center; color: #5A6570; background: rgb(255 255 255 / .7); }
.segment { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.segment button { border: 0; border-radius: 0; font-size: .8rem; padding: .25rem .6rem; }
.segment button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
@media (max-width: 1439px) {
  .pruef-layout.mit-zeichnung { grid-template-columns: minmax(0, 1fr); }
  .zeichnung-paneel { position: fixed; inset: 0 0 0 auto; width: min(760px, 100vw); height: 100vh; top: 0; z-index: 30; border-radius: 0; box-shadow: -8px 0 24px rgb(0 0 0 / .25); }
}

/* Dialog */
dialog { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); padding: 0; width: min(520px, calc(100vw - 32px)); }
dialog::backdrop { background: rgb(0 0 0 / .45); }
dialog form { display: grid; gap: 12px; padding: 18px; }
textarea { min-height: 6em; resize: vertical; }

.spinner { display: inline-block; width: .9em; height: .9em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) { .spinner { animation: drehen 1s linear infinite; } }
@keyframes drehen { to { transform: rotate(360deg); } }