/* Corporate Design Schachzug, Befund in design/CI-SCHACHZUG.md.
   Liegt über app.css: Farben und Grundcharakter, Schrift bleibt vorerst System-Sans.
   Schwarzer Kopf mit Wortmarke, helle Arbeitsfläche, Magenta nur für Aktionen,
   Hellblau für Links, Status als Kante statt Fläche, keine Rundungen. */
:root {
  --sz-schwarz: #000000;
  --sz-magenta: #CC0066;
  --sz-blau: #36C3FF;
  --sz-blau-dunkel: #0096FF;
  --sz-orange: #FF6040;
  --sz-gelb: #FFB034;
  --sz-rot: #E30243;
  --sz-violett: #CE3BAD;
  --tinte: #111111;
  --grau: #6b6f76;
  --linie: #e2e4e8;
  --hell: #f5f5f7;
  --akzent: #0096FF;
  --ok: #111111;
  --warn: #b7791f;
  --rot: #E30243;
}
body { background: var(--hell); }
main { background: transparent; }

/* Kopfzeile */
.kopf { background: var(--sz-schwarz); border-bottom: 0; padding: .75rem 1.4rem; gap: 2.4rem; }
.kopf .marke { color: #fff; text-decoration: none; display: inline-flex; align-items: baseline; gap: .9rem; }
.kopf .marke::before { content: "SCHACHZUG"; font-weight: 700; letter-spacing: .28em; font-size: 1.05rem; }
.kopf .marke { font-size: .85rem; font-weight: 300; letter-spacing: .06em; color: #cfd2d6; }
.kopf nav a { color: var(--sz-blau); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; font-size: .8rem; }
.kopf nav a.aktiv { color: #fff; font-weight: 600; border-bottom: 2px solid var(--sz-magenta); padding-bottom: .15rem; }
.kopf nav a:hover { color: #fff; }

/* Flächen */
.karte, .formular, .liste, .login, table.liste { background: #fff; }
.karte { border: 0; border-radius: 0; box-shadow: 0 1px 0 var(--linie); border-top: 3px solid var(--sz-schwarz); }
.karte:nth-of-type(2) { border-top-color: var(--sz-magenta); }
.liste { box-shadow: 0 1px 0 var(--linie); }
.liste th { background: #fff; color: var(--grau); text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; }
h1 { font-weight: 300; letter-spacing: .02em; font-size: 1.6rem; }
h2 { font-weight: 500; }
a { color: var(--sz-blau-dunkel); }

/* Aktionen: Magenta, Versalien, kein Radius, kein Rahmen */
button, .knopf, .filter button, .formular button, .login button, input[type=submit] {
  background: var(--sz-magenta); color: #fff; border: 0; border-radius: 0;
  text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 600;
  padding: .55rem 1rem; cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.2;
}
button:hover, .knopf:hover, .filter button:hover, .formular button:hover { background: #a80054; color: #fff; }
.filter a, .formular a.sekundaer, .sekundaer { color: var(--sz-blau-dunkel); background: none; border: 0; text-transform: none; letter-spacing: 0; font-weight: 400; }
.filter select, .filter input, .formular input, .formular select, .formular textarea, .login input {
  border: 1px solid var(--linie); border-radius: 0; background: #fff;
}
.formular input:focus, .formular select:focus, .formular textarea:focus, .filter input:focus, .login input:focus {
  outline: 2px solid var(--sz-blau); outline-offset: 0; border-color: var(--sz-blau);
}

/* Status als schmale Kante links an der Zeile, nicht als Fläche */
.status { background: none; border-radius: 0; padding: 0 0 0 .55em; border-left: 3px solid var(--linie); color: var(--tinte); font-size: .85em; }
.s-angemeldet, .s-geändert { border-left-color: var(--sz-blau); color: var(--tinte); background: none; }
.s-geprüft { border-left-color: var(--sz-gelb); color: var(--tinte); background: none; }
.s-beauftragt { border-left-color: var(--sz-schwarz); color: var(--tinte); background: none; font-weight: 600; }
.s-ausgeschrieben { border-left-color: var(--linie); color: var(--grau); }
.s-abgelehnt, .s-gestrichen, .s-zurückgezogen { border-left-color: var(--sz-rot); color: var(--tinte); background: none; }
.s-korrigiert { border-left-color: var(--sz-violett); }
/* Notiz: Vermerk ohne Statuswirkung, zurückhaltend in Grau und kursiv */
.s-notiz { border-left-color: var(--linie); color: var(--grau); font-style: italic; }
.kette tr.notiz td { color: var(--grau); font-style: italic; }

/* Rollen je Klärung: Adressat · Liefert · Kontrolle; leer als graues „–“ */
.leer { color: var(--grau); }
.rollen-stand { margin: 0 0 .8rem; }
.formular label small { color: var(--grau); font-size: .78rem; font-weight: 400; }
.formular p.breit { grid-column: 1 / -1; margin: 0; }

/* Kostenstand: die drei Summenblöcke tragen die Markenverläufe als Oberkante */
.summen .summe td { border-top: 2px solid var(--sz-schwarz); }
.summen .prognose td { border-top: 0; position: relative; padding-top: .55rem; }
.summen .prognose td::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(to right, var(--sz-rot), var(--sz-violett)); }
.kontrolle { border-top: 1px dashed var(--linie); }
.kontrolle .abweichung td { color: var(--sz-orange); }

/* Hinweise und Warnungen der Erfassung */
.plausi .warnung, .warnung { border-left: 3px solid var(--sz-rot); background: #fff; }
.plausi .hinweis, .hinweisbox { border-left: 3px solid var(--sz-gelb); background: #fff; }
.fehler { color: var(--sz-rot); }

/* Fuß */
.fuss { background: var(--sz-schwarz); color: #9a9ea5; border-top: 0; font-size: .78rem; letter-spacing: .03em; }
.fuss a { color: var(--sz-blau); }

/* Lese-Link-Block auf dem Kostenstand */
.lese-link { margin-top: 1rem; padding-top: .6rem; border-top: 1px dashed var(--linie); }
.lese-link code { font-size: .8rem; word-break: break-all; }
.lese-link form.inline { display: inline-block; margin-right: .6rem; }

/* Karten dürfen auf schmalen Fenstern umbrechen, kein horizontales Scrollen */
.karten { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
/* Export-Block auf dem Kostenstand */
.export { margin-top: .8rem; padding-top: .6rem; border-top: 1px dashed var(--linie); }
.export form.inline { display: inline-block; margin-right: .6rem; }
.werkzeuge form.inline { display: inline-block; }

/* Anhänge an Ereignissen (Stufe C, Punkt 9) */
.anhang-zeile td { background: var(--hell); border-bottom: 1px solid var(--linie); padding-top: .25rem; padding-bottom: .25rem; }
ul.anhaenge { list-style: none; margin: 0; padding: 0; }
ul.anhaenge li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; padding: .15rem 0; font-size: .92rem; }
ul.anhaenge li.zurueckgezogen { color: var(--grau); }
ul.anhaenge li.zurueckgezogen s { text-decoration-color: var(--sz-rot); }
ul.anhaenge form.inline { display: inline; margin: 0; }
ul.anhaenge .schalter { background: none; color: var(--tinte); border: 1px solid var(--linie); text-transform: none; letter-spacing: 0;
  font-size: .75rem; font-weight: 500; padding: .1rem .5rem .1rem 1.3rem; position: relative; }
ul.anhaenge .schalter::before { content: ""; position: absolute; left: .45rem; top: 50%; width: .5rem; height: .5rem; margin-top: -.25rem; border-radius: 50%; background: var(--linie); }
ul.anhaenge .schalter.an { border-color: var(--sz-magenta); }
ul.anhaenge .schalter.an::before { background: var(--sz-magenta); }
ul.anhaenge .schalter:hover { background: var(--hell); color: var(--tinte); }
ul.anhaenge button.sekundaer { padding: 0; font-size: .85em; text-decoration: underline; }
ul.anhaenge button.sekundaer:hover { background: none; color: var(--sz-rot); }
.anhang-upload { border-top: 1px dashed var(--linie); padding-top: .8rem; }
.anhang-upload .hinweisbox { padding: .4rem .7rem; margin: 0; font-size: .85rem; color: var(--tinte); }
.anhang-upload label.kasten { flex-direction: row; align-items: center; gap: .4rem; color: var(--tinte); }
.anhang-upload label.kasten input { width: auto; }
.tag.sichtbar { border-color: var(--sz-magenta); color: var(--sz-magenta); }
.vorschau-pdf { width: 100%; height: 80vh; border: 1px solid var(--linie); background: #fff; }
.vorschau-bild img { max-width: 100%; max-height: 80vh; display: block; border: 1px solid var(--linie); background: #fff; }
.vorschau-text { background: #fff; border: 1px solid var(--linie); padding: .8rem 1rem; white-space: pre-wrap; max-width: 90ch; font: .9rem/1.45 ui-monospace, Menlo, monospace; }
.stamm form.inline { display: inline; margin-left: .6rem; }
.stamm form.inline .sekundaer { padding: 0; font-size: .85em; text-decoration: underline; }

/* Hinweistexte im Upload-Formular über die volle Breite */
.anhang-upload .breit, .anhang-upload p.breit { grid-column: 1 / -1; flex: 1 1 100%; width: 100%; max-width: none; }
.anhang-upload .hinweisbox { max-width: 80ch; }

/* Sekundäre Knöpfe in Formularen (Sichtbarkeit, Zurückziehen) bleiben zurückhaltend */
.formular button.sekundaer, button.sekundaer { background: none; color: var(--sz-blau-dunkel); text-transform: none; letter-spacing: 0; font-weight: 400; padding: .2rem .4rem; }
/* KI: Prüfansicht Textimport, Kontrolllauf. Sicherheit als Kante: hoch schwarz, mittel gelb, niedrig rot */
.datenhinweis { margin: 0 0 .4rem; padding: .4rem .6rem; border-left: 3px solid var(--sz-blau); background: #fff; font-size: .85rem; color: var(--grau); max-width: 80ch; }
.formular.ki textarea { max-width: none; width: 100%; font-family: inherit; }
.pruef-raster { display: grid; grid-template-columns: minmax(280px, 2fr) minmax(320px, 3fr); gap: 1.4rem; align-items: start; }
.quelltext { position: sticky; top: .6rem; }
@media (max-width: 900px) { .pruef-raster { grid-template-columns: 1fr; } .quelltext { position: static; } }
.belegtext { white-space: pre-wrap; word-break: break-word; background: #fff; padding: .8rem 1rem; box-shadow: 0 1px 0 var(--linie); font: inherit; font-size: .9rem; max-height: 80vh; overflow: auto; margin: 0; }
mark.beleg { background: #fff3c4; border-bottom: 2px solid var(--sz-gelb); padding: 0 .1em; }
mark.beleg::before { content: attr(data-nr); display: inline-block; min-width: 1.3em; margin-right: .3em; padding: 0 .3em; background: var(--sz-schwarz); color: #fff; font-size: .7em; font-weight: 700; text-align: center; border-radius: 2px; vertical-align: text-top; }
mark.beleg:target { outline: 2px solid var(--sz-magenta); }
.vorschlag { margin-bottom: 1.2rem; padding: .8rem 1rem; }
.karte.kante-hoch, .karte:nth-of-type(2).kante-hoch { border-top-color: var(--sz-schwarz); }
.karte.kante-mittel, .karte:nth-of-type(2).kante-mittel { border-top-color: var(--sz-gelb); }
.karte.kante-niedrig, .karte:nth-of-type(2).kante-niedrig { border-top-color: var(--sz-rot); }
.vorschlag header { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.vorschlag .uebernehmen { display: inline-flex; align-items: center; gap: .4rem; font-size: 1rem; }
.tag.sicherheit-hoch { border-color: var(--sz-schwarz); color: var(--tinte); }
.tag.sicherheit-mittel { border-color: var(--sz-gelb); color: #8a6100; }
.tag.sicherheit-niedrig, .tag.rot { border-color: var(--sz-rot); color: var(--sz-rot); }
.beleg-zitat { margin: 0 0 .3rem; font-size: .9rem; color: var(--grau); }
.begruendung { margin: 0 0 .5rem; font-size: .9rem; }
.plausi-vorschau { list-style: none; margin: 0 0 .2rem; padding: 0; }
.plausi-vorschau li { padding: .2rem .5rem; margin-bottom: .2rem; border-left: 3px solid var(--sz-gelb); font-size: .88rem; }
.plausi-vorschau li.plausi-warnung { border-left-color: var(--sz-rot); }
.plausi-vorschau .stufe { font-size: .75rem; font-weight: 600; text-transform: uppercase; color: var(--grau); margin-right: .3em; }
.plausi-vorschau .plausi-warnung .stufe { color: var(--sz-rot); }
fieldset.ziel { border: 1px solid var(--linie); padding: .4rem .8rem; margin: .4rem 0 .6rem; }
fieldset.ziel legend { font-size: .8rem; color: var(--grau); }
fieldset.ziel .kasten { display: flex; align-items: baseline; gap: .4rem; padding: .15rem 0; }
.pruefung .feld.kuerzel { max-width: 12rem; }
.befunde tr.befund-warnung td:first-child { color: var(--sz-rot); }
.hinweisbox { padding: .4rem .8rem; }

/* Anmeldeseite */
.login { max-width: 420px; margin: 3rem auto; padding: 1.6rem; box-shadow: 0 1px 0 var(--linie); border-top: 3px solid var(--sz-magenta); }
.login h1 { margin-top: 0; }
.login label { display: block; color: var(--grau); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .3rem; }
.login input { display: block; width: 100%; padding: .55rem .7rem; font: inherit; margin-bottom: 1rem; }

/* Vorgangsliste als LV: Gruppenköpfe mit Zwischensummen, Einrückung je Ebene, Klappen.
   Ebene 0 schwarz, Ebene 1 grau, Ebene 2 normal. Breite Tabelle scrollt im Container. */
.tabelle { overflow-x: auto; background: #fff; box-shadow: 0 1px 0 var(--linie); }
.liste.lv td, .liste.lv th { white-space: nowrap; }
.liste.lv td.titel { white-space: normal; min-width: 20rem; }
.liste.lv td.titel small, .liste.lv td.betrag small { display: block; font-weight: 400; color: var(--grau); font-size: .74rem; white-space: nowrap; }
.liste.lv td.titel small.kategorie { white-space: normal; }
.liste.lv td.betrag { font-variant-numeric: tabular-nums; }
.liste.lv td.titel.ein-1 { padding-left: 1.5rem; }
.liste.lv td.titel.ein-2 { padding-left: 2.5rem; }
.liste.lv td.titel.ein-3 { padding-left: 3.5rem; }
.liste.lv tr.gruppe td { border-top: 1px solid var(--linie); border-bottom: 0; font-weight: 700; background: #fff; cursor: pointer; }
.liste.lv tr.gruppe-0 td { color: var(--sz-schwarz); border-top: 2px solid var(--sz-schwarz); }
.liste.lv tr.gruppe-1 td { color: var(--grau); font-weight: 600; }
.liste.lv tr.gruppe-2 td { color: var(--tinte); font-weight: 600; border-top: 1px solid var(--hell); }
.liste.lv tr.gruppe td .gewerk { font-weight: 400; color: var(--grau); }
.liste.lv button.klapp { background: none; color: var(--grau); border: 0; padding: 0 .4rem 0 0; font-size: .85rem; line-height: 1; text-transform: none; letter-spacing: 0; cursor: pointer; }
.liste.lv button.klapp:hover { background: none; color: var(--tinte); }
.liste.lv button.klapp::before { content: "▾"; }
.liste.lv tr.gruppe.zu button.klapp::before { content: "▸"; }
.gesamt { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; margin: 0 0 .6rem; font-size: .9rem; color: var(--grau); }
.gesamt b { color: var(--tinte); font-variant-numeric: tabular-nums; }
.gesamt small { font-size: .78rem; }
.stamm form.inline select { font: inherit; font-size: .9em; padding: .15rem .3rem; border: 1px solid var(--linie); max-width: 22rem; }