/* Oberflaeche der KI-Middleware. Nuechtern, dicht, ohne Spielereien -
   das Werkzeug wird von Juristen im Arbeitsalltag benutzt. */

:root {
  --grund: #f6f6f4;
  --flaeche: #ffffff;
  --linie: #d9d7d2;
  --linie-stark: #b9b6af;
  --schrift: #1c1c1a;
  --schrift-leise: #6a6862;
  --akzent: #1f4e79;
  --akzent-leise: #eaf0f6;
  --vorlage: #2f6b3f;
  --vorlage-flaeche: #eef5ef;
  --ki: #8a5a00;
  --ki-flaeche: #fdf4e3;
  --warn: #8a2b2b;
  --warn-flaeche: #fbecec;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--schrift);
  background: var(--grund);
}

/* --- Kopf ---------------------------------------------------------------- */

.kopf {
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}

.kopf-innen {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.marke {
  font-weight: 600;
  color: var(--schrift);
  text-decoration: none;
}

.navigation { display: flex; gap: 16px; flex: 1; }
.navigation a {
  color: var(--schrift-leise);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.navigation a:hover { color: var(--schrift); }
.navigation a.aktiv { color: var(--akzent); border-bottom-color: var(--akzent); }

.rollenwahl { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--schrift-leise); }
.rollenwahl form { display: flex; align-items: center; gap: 6px; margin: 0; }
/* Der angemeldete Name. Er steht da, weil eine Freigabe namentlich
   vermerkt wird - wer freigibt, soll vorher sehen, unter welchem Namen. */
.angemeldet { font-weight: 600; color: var(--schrift); }
.rollenwahl select { font: inherit; padding: 3px 6px; border: 1px solid var(--linie); border-radius: 4px; background: var(--flaeche); }

/* --- Betriebszustand ---------------------------------------------------- */

/* WEG, UND DAS IST DER PUNKT (19.08.2026). Hier stand ein blauer Kasten, den
   ``basis.html`` über jede Seite legte: in der Pilot-Einstellung acht Punkte,
   davon sieben Selbstbeschreibung ("Modell scharf", "iusta-Lesen aktiv").
   Weisung der Projektleitung: Angezeigt wird nur, was ein Problem DIESES
   Vorgangs bedeutet. Der Betriebszustand steht unter /zustand; was die Arbeit
   blockiert, erscheint an der Handlung und trägt dort ``.fehler`` oder
   ``.hinweis``. Für den Zustand braucht es deshalb keine eigene Klasse mehr. */

/* --- Layout ------------------------------------------------------------- */

.inhalt { max-width: 1100px; margin: 0 auto; padding: 20px; }
.fuss {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  color: var(--schrift-leise);
  font-size: 12px;
}

h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 24px 0 8px; }
h3 { font-size: 15px; margin: 18px 0 6px; }
.unterzeile { color: var(--schrift-leise); margin: 0 0 20px; }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.karte h2:first-child, .karte h3:first-child { margin-top: 0; }

/* Eingeklappte Karten (details.karte), seit 15.08.2026.
   Der Kopf einer eingeklappten Karte ist ein <summary> mit einem <h2> darin.
   Ein h2 ist ein Blockelement und rutscht sonst unter das Aufklappdreieck -
   deshalb display:inline am h2 und das Dreieck als eigene Marke am summary. */
details.karte > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
details.karte > summary::-webkit-details-marker { display: none; }
details.karte > summary::before {
  content: "\25B8";
  color: var(--schrift-leise);
  font-size: 13px;
  line-height: 1;
}
details.karte[open] > summary::before { content: "\25BE"; }
details.karte > summary h2 { display: inline; margin: 0; }
details.karte > summary .erklaerung { font-weight: 400; }
details.karte[open] > summary { margin-bottom: 12px; }

/* Die Sprungleiste bleibt am oberen Rand stehen: Von jeder Stelle der Seite
   ist "4. Entwurf" damit einen Klick entfernt. */
.sprungleiste {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--grund);
  padding: 6px 0;
  border-bottom: 1px solid var(--linie);
}

.reihe { display: flex; gap: 16px; flex-wrap: wrap; }
.reihe > * { flex: 1; min-width: 260px; }

/* --- Meldungen ---------------------------------------------------------- */

.meldung, .fehler, .hinweis {
  padding: 9px 12px;
  border-radius: 5px;
  margin: 0 0 16px;
  font-size: 14px;
}
.meldung { background: var(--vorlage-flaeche); border: 1px solid #bcd6c2; }
.fehler { background: var(--warn-flaeche); border: 1px solid #e2bcbc; color: var(--warn); }
.hinweis { background: var(--akzent-leise); border: 1px solid #cddbe9; }
.leer { color: var(--schrift-leise); font-style: italic; }

/* --- Tabellen ----------------------------------------------------------- */

.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle th, .tabelle td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}
.tabelle th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--schrift-leise); }
.tabelle tr:last-child td { border-bottom: none; }
.tabelle-huelle { overflow-x: auto; }

/* --- Knoepfe und Formulare --------------------------------------------- */

.knopf {
  display: inline-block;
  font: inherit;
  padding: 7px 14px;
  border: 1px solid var(--linie-stark);
  border-radius: 5px;
  background: var(--flaeche);
  color: var(--schrift);
  text-decoration: none;
  cursor: pointer;
}
.knopf:hover { background: #f0efec; }
.knopf-haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.knopf-haupt:hover { background: #17395a; }
.knopf-warn { border-color: #d7a3a3; color: var(--warn); }
.knopf.klein { padding: 4px 9px; font-size: 13px; }
.knopf[disabled], .knopf.gesperrt { opacity: .5; cursor: not-allowed; }
.knopfreihe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }

.feld { margin-bottom: 14px; }
.feld label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.feld .erklaerung { font-size: 12px; color: var(--schrift-leise); margin: 3px 0 0; }
input[type="text"], input[type="password"], input[type="file"], select, textarea {
  font: inherit;
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--linie-stark);
  border-radius: 5px;
  background: var(--flaeche);
  color: var(--schrift);
}
textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.mehrfachwahl { max-height: 240px; overflow-y: auto; border: 1px solid var(--linie); border-radius: 5px; padding: 8px 10px; background: var(--flaeche); }
.mehrfachwahl label { display: block; font-weight: 400; font-size: 14px; margin: 3px 0; }

/* --- Plaketten ---------------------------------------------------------- */

.plakette {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 10px;
  border: 1px solid var(--linie-stark);
  color: var(--schrift-leise);
  background: var(--grund);
  white-space: nowrap;
}
.plakette-freigegeben { color: var(--vorlage); border-color: #bcd6c2; background: var(--vorlage-flaeche); }
.plakette-entwurf { color: var(--ki); border-color: #e5cfa0; background: var(--ki-flaeche); }
.plakette-archiviert { color: var(--schrift-leise); }
.plakette-luecke { color: var(--warn); border-color: #e2bcbc; background: var(--warn-flaeche); }
.plakette-ausgeklammert { color: var(--schrift-leise); border-style: dashed; }

/* --- Bloecke der Vorschau (Zweischichtigkeit) -------------------------- */

.block {
  border: 1px solid var(--linie);
  border-left-width: 4px;
  border-radius: 5px;
  background: var(--flaeche);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.block-vorlage { border-left-color: var(--vorlage); }
.block-ki { border-left-color: var(--ki); background: var(--ki-flaeche); }
.block-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--schrift-leise);
}
.block-rolle { font-weight: 600; color: var(--schrift); font-size: 13px; }
.block-text { white-space: pre-wrap; }
.block.abweichung { border-left-style: dashed; }
.block-werkzeuge { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }

.legende { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--schrift-leise); margin-bottom: 14px; }
.legende span::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 6px;
  border-radius: 2px;
  vertical-align: baseline;
}
.legende .l-vorlage::before { background: var(--vorlage); }
.legende .l-ki::before { background: var(--ki); }

/* --- Kennzahlen --------------------------------------------------------- */

.kennzahlen { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.kennzahl { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 6px; padding: 10px 14px; min-width: 120px; }
.kennzahl .wert { font-size: 20px; font-weight: 600; }
.kennzahl .bezeichnung { font-size: 12px; color: var(--schrift-leise); }

.zitat {
  border-left: 3px solid var(--linie-stark);
  padding-left: 10px;
  color: var(--schrift-leise);
  font-size: 13px;
  margin: 6px 0 0;
  white-space: pre-wrap;
}
code, .kennung { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }

/* Knappe Aufzaehlung in einer Tabellenzelle - die verdrahteten Bausteine je
   Ablehnungsgrund. Ohne Punkte und ohne Einzug, sonst rutscht die Spalte. */
ul.knapp { list-style: none; margin: 4px 0 0; padding: 0; }
ul.knapp li { padding: 2px 0; font-size: 13px; }

/* --- Erlaeuterungen ----------------------------------------------------- */

/* Wird auf allen Seiten als kleiner, leiser Begleittext benutzt - bisher war
   die Regel nur innerhalb von .feld gesetzt. */
.erklaerung { font-size: 12.5px; color: var(--schrift-leise); margin: 4px 0 0; }
.erklaerung + .erklaerung { margin-top: 2px; }

/* --- Vorschau: Dokumentansicht ------------------------------------------ */

/* Der Entwurf soll wie der spaetere Schriftsatz zu lesen sein: begrenzte
   Zeilenlaenge, ruhiger Grund, Abschnittsueberschriften. */
.dokument {
  max-width: 76ch;
  margin: 0 0 16px;
  padding: 4px 0 0;
}
/* Die Ueberschriften des Schriftsatzes. Sie sehen aus wie Ueberschriften und
   nicht wie Abschnittsmarken der Oberflaeche - der Anwalt soll in der Vorschau
   die Gliederung erkennen, die er freigibt. Die Einrueckung je Ebene
   entspricht der Mehrebenenliste der Kanzleivorlage (A. / I. / 1.). */
.dokument-abschnitt {
  font-size: 15px;
  font-weight: 600;
  color: var(--schrift);
  border-bottom: 1px solid var(--linie);
  padding-bottom: 4px;
  margin: 22px 0 10px;
}
.dokument-abschnitt.ebene-2 {
  font-size: 14px;
  margin-left: 14px;
  border-bottom: none;
}
.dokument-abschnitt.ebene-3 {
  font-size: 13px;
  margin-left: 28px;
  border-bottom: none;
}
.dokument-abschnitt.ebene-4,
.dokument-abschnitt.ebene-5 {
  font-size: 13px;
  font-weight: 500;
  margin-left: 42px;
  border-bottom: none;
}
.dokument .block:first-of-type { margin-top: 0; }

/* Zweischichtigkeit auch ohne Farbe erkennbar: Vorlage durchgezogener Rand,
   KI-Passage doppelter Rand, Abweichung gestrichelt (.abweichung, s. o.) -
   dazu die Textmarken [V] / [KI] / [!] im Blockkopf. */
.block-ki { border-left-style: double; border-left-width: 7px; }

.schichtmarke {
  display: inline-block;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  padding: 0 4px;
  border: 1px solid var(--linie-stark);
  border-radius: 3px;
  background: var(--flaeche);
}
.schichtmarke-vorlage { color: var(--vorlage); border-color: #bcd6c2; background: var(--vorlage-flaeche); }
.schichtmarke-ki { color: var(--ki); border-color: #e5cfa0; background: var(--ki-flaeche); }
.schichtmarke-abweichung { color: var(--warn); border-color: #e2bcbc; background: var(--warn-flaeche); }

.block-nummer { font-variant-numeric: tabular-nums; color: var(--schrift-leise); min-width: 1.6em; }
.block-herkunft { font-size: 12px; color: var(--schrift-leise); margin: 8px 0 0; }

.pruefhinweis {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ki);
  margin: 0 0 8px;
}
.abweichungshinweis {
  font-size: 12.5px;
  color: var(--warn);
  margin: 0 0 8px;
}

.blockbearbeitung { margin-top: 10px; }
.blockbearbeitung > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--akzent);
}
.blockbearbeitung > summary:hover { text-decoration: underline; }
.blockbearbeitung .feld { margin: 10px 0 0; }

.legende .l-abweichung::before { background: var(--warn); }
.legende .l-luecke::before { background: var(--warn); }

.volltext {
  min-height: 320px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
}

/* --- Vorschau: Luecken und Ausklammerungen ------------------------------ */

.karte-luecke {
  border-color: #e2bcbc;
  border-left: 4px solid var(--warn);
  background: var(--warn-flaeche);
}
.karte-luecke h2 { color: var(--warn); }
.luecke-eintrag { border-top: 1px solid #e2bcbc; padding: 10px 0 4px; }
.luecke-eintrag:first-of-type { border-top: none; }
.luecke-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }

.karte-ausgeklammert { border-left: 4px dotted var(--linie-stark); }
.ausgeklammert-liste { list-style: none; margin: 10px 0 0; padding: 0; }
.ausgeklammert-liste li { padding: 6px 0; border-top: 1px solid var(--linie); }
.ausgeklammert-liste li:first-child { border-top: none; }

/* --- Vorschau: Freigabebereich ------------------------------------------ */

.freigabefeld { border: 2px solid var(--akzent); }
.freigabefeld h2 { color: var(--akzent); }
.freigabe-vorbehalt {
  font-weight: 600;
  background: var(--akzent-leise);
  border: 1px solid #cddbe9;
  border-radius: 5px;
  padding: 9px 12px;
  margin: 0 0 12px;
}

/* --- Arbeitsliste: der Vorbehalt zu den Altfaellen (entfernt) ------------ */
/* Hier lagen ``.karte-vorbehalt`` und ``.vorbehalt-text`` fuer einen bewusst
   lauten Warnkasten. Am 19.08.2026 ausgebaut: Die Liste sortiert Akten mit
   gesetztem FELD-15261 selbst aus, und das Feld ist vor dem Echtbetrieb
   ueberall nachgetragen - eine Bestaetigung von Hand pruefte nichts nach, was
   die Abfrage nicht schon geprueft hat. Wer den Kasten wieder braucht, hat ein
   anderes Problem: dann fehlt der Nachtrag. */



/* Rueckmeldung: unten rechts, immer erreichbar, nie im Weg. Zugeklappt ist es
   ein Knopf; aufgeklappt ein Formular ueber dem Inhalt. Ohne JavaScript -
   <details> kann das. */
.rueckmeldung-huelle { position: fixed; right: 18px; bottom: 18px; z-index: 40; }
.rueckmeldung-huelle > summary { list-style: none; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.rueckmeldung-huelle > summary::-webkit-details-marker { display: none; }
.rueckmeldung-form {
  position: absolute; right: 0; bottom: 42px; width: min(420px, 90vw);
  background: var(--flaeche); box-shadow: 0 6px 24px rgba(0,0,0,.22);
  max-height: 70vh; overflow-y: auto;
}
@media print {
  .rueckmeldung-huelle { display: none; }
  .sprungleiste { display: none; }
  /* Eine zugeklappte Karte druckt sonst nur ihre Ueberschrift. Wer den
     Vorgang ausdruckt, will ihn vollstaendig - das Zuklappen ist eine
     Bildschirmhilfe, keine Aussage ueber den Inhalt. */
  details.karte { display: block; }
  details.karte > *:not(summary) { display: block !important; }
  details.karte > summary::before { content: ""; }
}

/* Warnband oben in der Vorschau: nennt jede nicht leere Befundkarte und
   verlinkt sie. Der Entwurf steht seit dem 15.08.2026 ueber den Befunden -
   eine Warnung, die niemand sieht, waere schlimmer als eine, die stoert. */
.warnband {
  background: var(--warn-flaeche);
  border: 1px solid #e0b4b4;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 0 0 16px;
  font-size: 14px;
}
.warnband a { color: var(--warn); }

/* Die Kacheln der Startseite. Ein Modul, das nicht antwortet, wird matt
   und sagt warum - eine Kachel, die ins Leere fuehrt, ist schlimmer als
   eine, die sich als geschlossen zu erkennen gibt. */
.kacheln { display: flex; flex-wrap: wrap; gap: 1em; margin: 1.2em 0; }
.kachel {
  flex: 1 1 20em; max-width: 26em; display: block;
  border: 1px solid #d8d8de; border-radius: 6px;
  padding: 1em 1.2em; text-decoration: none; color: inherit;
  background: #fff;
}
.kachel:hover { border-color: #8a8a96; background: #fbfbfd; }
.kachel h2 { margin: 0 0 .3em; font-size: 1.15em; }
.kachel p { margin: 0; color: #555; font-size: .93em; }
.kachel.matt { opacity: .55; }
.kachel-hinweis { margin-top: .5em !important; color: #a33 !important; }

/* --- Werkbank-Palette (Design-System der iusta-Werkzeuge) -------------
   Uebernommen am 01.09.2026 aus dem geteilten Artefakt "werkbank-design".
   Es kam als Zusammenfassung, nicht im Wortlaut - die Werte stimmen, die
   Feinheiten des Systems (Abstaende, Zustandspillen) sind damit NICHT
   uebernommen. Das ist ein eigener Arbeitsgang.

   Koralla ist ausdruecklich "reserviert fuer DIE Hauptaktion" - also
   sparsam, nicht als allgemeine Betonung. */
:root {
  --wb-grund: #fcf7ec;      /* Elfenbein */
  --wb-akzent: #4e837a;     /* Petrol */
  --wb-haupt: #F27E70;      /* Koralla - nur die Hauptaktion */
  --wb-erfolg: #7d9471;     /* Salbei */
  --wb-warnung: #c8963e;    /* Ocker */
  --wb-fehler: #b5533f;     /* Terrakotta */
}

body { background: var(--wb-grund); }

.kachel { background: #fff; border-color: #e4dcc9; border-radius: 10px; }
.kachel:hover { border-color: var(--wb-akzent); }
.kachel h2 { color: var(--wb-akzent); }
.kachel-hinweis { color: var(--wb-fehler) !important; }