/* Nachtragsprüfung — Prototyp. Ingenieur-Look: Navy + Weiß + Grau, eine Akzentfarbe.
   Systemeigene Schriften, keine externen Ressourcen (offlinefähig). */

:root {
  --navy: #1f3a5f;
  --navy-dunkel: #16293f;
  --akzent: #2f6db3;
  --text: #26303a;
  --text-neben: #5a6673;
  --flaeche: #f4f6f8;
  --karte: #ffffff;
  --rahmen: #d8dee6;
  --rahmen-hell: #e6ebf0;
  --zebra: #f7f9fb;
  --fehler-flaeche: #fdecea;
  --fehler-rahmen: #c0392b;
  --fehler-text: #7b241c;
  --ok: #1e7e46;
  /* Seitenbreite: fluid bis auf große Monitore (Kundentermin 21.10.2026 —
     Nutzer arbeiten an 27-Zoll-Bildschirmen, vorher feste 1100 px). */
  --seite-max: 1760px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: system-ui, "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--flaeche);
}

/* Kopfzeile ------------------------------------------------------------- */

.kopf {
  background: var(--navy);
  color: #ffffff;
  border-bottom: 3px solid var(--navy-dunkel);
}

.kopf-innen {
  max-width: var(--seite-max);
  margin: 0 auto;
  padding: 0.8rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
}

/* Titelblock: nimmt den freien Platz und darf schrumpfen (min-width: 0) —
   lange Vertrags-/Projektnamen werden mit Auslassung gekürzt statt auf drei
   Zeilen umzubrechen (der volle Name steht im title-Attribut). */
.kopf-titel {
  flex: 1 1 18rem;
  min-width: 0;
}

.kopf-nutzer { margin-left: auto; }

.kopf h1 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.untertitel {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: #c3d0e0;
}

/* Einzeilig mit Auslassung (Projektname, Nachtragstitel in der Kopfzeile). */
.kopf-kurz {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Titelzeile der Nachtragsseite (Kundenwunsch 26.08.2026: „falls man sich
   mal verschreibt"): Rückweg, Nummer und Titel in EINER Zeile, darunter der
   Projektname. Umbenennen/Nummer ändern stehen bei Status (kopf-auftrag); die
   Knöpfe bleiben auch ohne gesetzten Titel sichtbar, damit sich einer
   erstmals vergeben lässt. */
.kopf-zeile {
  display: flex;
  align-items: baseline;
  gap: 0.2rem 1rem;
  min-width: 0;
}
.kopf-zeile .zurueck-link { margin-bottom: 0; flex-shrink: 0; }
.kopf-zeile h1 { flex-shrink: 0; }
.kopf-name {
  min-width: 0;
  color: #e8eef6;
}
.kopf-name:not(:empty) { font-style: italic; }

.kopf-auftrag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Übersichtsseite: Vertrag und Projekt als zweite Kopfzeile unter Titel und
   Benutzer. Die Auswahlfelder teilen sich den Platz und kürzen lange Namen
   mit Auslassung (der Auswahltext steht zusätzlich im title). */
.kopf-auftrag-breit {
  order: 3;
  flex: 1 1 100%;
  min-width: 0;
  align-items: flex-start;
  gap: 0.4rem 1.5rem;
}
.kopf-gruppe {
  display: flex;
  align-items: center;
  gap: 0.4rem 0.5rem;
  flex: 1 1 26rem;
  min-width: 0;
  flex-wrap: wrap;
}
.kopf-gruppe select {
  flex: 1 1 11rem;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kopf-gruppe select#projektStatus { flex: 0 0 auto; }

.kopf-auftrag label {
  font-size: 0.82rem;
  color: #c3d0e0;
}

.kopf-auftrag select {
  min-width: 220px;
}

/* Meldungsleiste --------------------------------------------------------- */

.meldung {
  /* bündig mit dem Inhaltsbereich von main (dessen Innenabstand 1.25rem) */
  width: calc(100% - 2.5rem);
  max-width: calc(var(--seite-max) - 2.5rem);
  margin: 0.9rem auto 0;
  padding: 0.6rem 1rem;
  border-radius: 4px;
  font-size: 0.9rem;
}

.meldung-fehler {
  background: var(--fehler-flaeche);
  border: 1px solid var(--fehler-rahmen);
  color: var(--fehler-text);
}

.meldung-info {
  background: #eaf1f9;
  border: 1px solid var(--akzent);
  color: var(--navy);
}

/* Erfolg und Warnung wurden im Code schon benutzt, sahen aber aus wie eine
   farblose Grundmeldung — eine Warnung, die wie eine Bestätigung aussieht,
   wird überlesen. */
.meldung-erfolg {
  background: #eaf6ee;
  border: 1px solid #1e7e46;
  color: #14532b;
}

.meldung-warnung {
  background: #fdf4e3;
  border: 1px solid #d97a1f;
  color: #6b3d05;
}

/* Kontrollrechnung der Vergabedokumentation als Datei (Auftrag Andreas
   30.09.2026): Summe der Forderung gegen die GAEB-Angebotssumme — grün bei
   Übereinstimmung, sichtbar rot bei Abweichung (nie still geglättet). */
.kontrolle-ok { color: #14532b; }
.kontrolle-abweichung { color: var(--fehler-text); font-weight: 600; }

/* Meldung mit Handlungsangebot (z. B. „Kollege fertig — erneut prüfen?") */
.meldung-aktion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.meldung-knoepfe {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* !important: Spezifischere Regeln mit eigenem display (z. B. a.knopf) hoben
   das Ausblenden sonst auf — „Original-PDF öffnen" erschien ohne hinterlegtes
   Original (Mail Stefan 16.10.2026). Versteckt heißt immer versteckt. */
.versteckt { display: none !important; }

/* Hauptbereich ----------------------------------------------------------- */

main {
  flex: 1;
  width: 100%;
  max-width: var(--seite-max);
  margin: 0 auto;
  padding: 1.25rem;
}

.bereich {
  background: var(--karte);
  border: 1px solid var(--rahmen);
  border-radius: 8px;
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.4rem;
}

.bereich h2 {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  border-bottom: 2px solid var(--navy);
  padding-bottom: 0.4rem;
}
/* Projektname hinter „Bestand" (Stefan 29.09.2026). */
.bereich h2 .bestand-projekt { font-weight: 400; }

.hinweis {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: var(--text-neben);
}
/* Warum die Prüfung nicht startet — direkt unter dem Prüfknopf (Wunsch Stefan 06.10.2026) */
.hinweis.hinweis-fehler { display: block; color: var(--fehler-text); }

/* Formularelemente ------------------------------------------------------- */

select,
input[type="password"],
input[type="search"],
input[type="file"] {
  font: inherit;
  padding: 0.4rem 0.6rem;
  border: 1px solid #c3ccd6;
  border-radius: 4px;
  background: #ffffff;
  color: var(--text);
}

/* Links, die eine Aktion auslösen (Bericht öffnen, Nachtrag öffnen), sehen aus
   wie Knöpfe — sie sind bewusst Links, damit „in neuem Tab öffnen" und der
   Zurück-Knopf des Browsers funktionieren. */
button, a.knopf {
  font: inherit;
  padding: 0.45rem 1rem;
  border-radius: 4px;
  border: 1px solid var(--navy);
  background: #ffffff;
  color: var(--navy);
  cursor: pointer;
}

button:hover:not(:disabled), a.knopf:hover {
  background: #eef2f7;
}

button.primaer {
  background: var(--navy);
  color: #ffffff;
}

button.primaer:hover:not(:disabled) {
  background: var(--navy-dunkel);
}

button.gefahr {
  border-color: var(--fehler-rahmen);
  color: var(--fehler-text);
}

button.gefahr:hover:not(:disabled) {
  background: var(--fehler-flaeche);
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Import ------------------------------------------------------------------ */

.import-zeile label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}

.import-meldungen {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  font-size: 0.88rem;
}

.import-meldungen li {
  padding: 0.35rem 0.6rem;
  border-left: 3px solid var(--rahmen);
  margin-bottom: 0.3rem;
  background: var(--zebra);
}

.import-meldungen li.ok { border-left-color: var(--ok); }
.import-meldungen li.gesperrt { border-left-color: var(--text-neben); }
.import-meldungen li.fehler { border-left-color: var(--fehler-rahmen); }

.import-meldungen .dateiname {
  font-weight: 600;
  margin-right: 0.4rem;
}

/* Übersichtskarten -------------------------------------------------------- */

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.1rem;
}

.karte {
  border: 1px solid var(--rahmen);
  border-radius: 6px;
  padding: 0.9rem 1rem;
  background: var(--karte);
}

.karte h3 {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-neben);
}

.karte-wert {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--navy);
}

.karte-detail {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-neben);
}

.karte-leer {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-neben);
  font-style: italic;
}

.karte-bue {
  background: #f0f2f5;
  border-style: dashed;
  border-color: #9aa7b5;
}

.status-ok { color: var(--ok); font-weight: 600; margin: 0.4rem 0 0; font-size: 0.88rem; }
.status-fehler { color: var(--fehler-rahmen); font-weight: 600; margin: 0.4rem 0 0; font-size: 0.88rem; }

.fehlerliste {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.8rem;
  color: var(--fehler-text);
}

/* Wie die Fehlerliste, aber neutral: was der Leser NICHT prüfen konnte,
   steht neben dem grünen OK, ohne wie ein Fehler auszusehen. */
.hinweisliste {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.8rem;
  color: var(--text-neben);
}

/* Prüfung ------------------------------------------------------------------ */

.pruef-zeile {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

.pruef-zeile select {
  min-width: 320px;
  max-width: 100%;
}

.ergebnis-kopf {
  margin-top: 1.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rahmen-hell);
}

.ergebnis-kopf h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--navy);
}

.zusammenfassung {
  margin: 0.4rem 0 0;
  font-size: 0.88rem;
  color: var(--text-neben);
}

.position {
  margin-top: 1rem;
}

.position-kopf {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.position-noz {
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}

.position-bezeichnung {
  flex: 1;
  min-width: 200px;
  font-weight: 600;
}

.position-daten {
  margin: 0.45rem 0 0;
  font-size: 0.88rem;
  color: var(--text-neben);
}

.position-befund {
  margin: 0.55rem 0 0;
  font-size: 0.92rem;
}

/* Einstufungs-Badges ------------------------------------------------------- */

.badge {
  display: inline-block;
  padding: 0.12rem 0.65rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
  color: #ffffff;
}

.badge-streichen { background: #c0392b; }
.badge-vereinbarter_preis { background: #d97a1f; }
.badge-kein_anspruch { background: #7b1e1e; }
.badge-pruefen_streichen { background: #f1c40f; color: #3d3200; }
.badge-neue_leistung { background: #1e7e46; }

/* Entscheidung des Ingenieurs --------------------------------------------- */
/* Bewusst anders gerahmt als die Einstufungs-Badges: das eine ist der
   Vorschlag der Maschine, das andere die Aussage des Ingenieurs. */

.badge-entscheidung {
  border: 2px solid currentColor;
  background: #ffffff !important;
}

.badge-entscheidung.badge-streichen { color: #c0392b; }
.badge-entscheidung.badge-uebernehmen { color: #1e7e46; }
.badge-entscheidung.badge-anpassen { color: #b06a10; }
.badge-offen {
  background: #ffffff;
  color: var(--text-neben);
  border: 1px dashed var(--rahmen-hell);
}

.position > summary {
  cursor: pointer;
  list-style-position: outside;
}

.position[open] > summary {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rahmen-hell);
}

.entscheidung {
  margin-top: 0.9rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--rahmen-hell);
  border-left: 4px solid var(--navy);
  border-radius: 4px;
  background: #fbfcfd;
}

.entscheidung h4 {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: var(--navy);
}

.entscheidung-knoepfe {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.entscheidung-knopf {
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--rahmen-hell);
  border-radius: 4px;
  background: #ffffff;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.entscheidung-knopf:hover:not(:disabled) { border-color: var(--navy); }
.entscheidung-knopf:disabled { cursor: not-allowed; opacity: 0.5; }

.entscheidung-knopf.gewaehlt {
  color: #ffffff;
  border-color: transparent;
}

.entscheidung-knopf.entscheidung-streichen.gewaehlt { background: #c0392b; }
.entscheidung-knopf.entscheidung-uebernehmen.gewaehlt { background: #1e7e46; }
.entscheidung-knopf.entscheidung-anpassen.gewaehlt { background: #b06a10; }

.entscheidung-kommentar {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.88rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--rahmen-hell);
  border-radius: 4px;
}

.entscheidung-meta {
  margin: 0.45rem 0 0.3rem;
  font-size: 0.82rem;
  color: var(--text-neben);
}

/* Nachtragsseite: Rückweg zur Übersicht */
.zurueck-link {
  display: inline-block;
  margin-bottom: 0.25rem;
  color: #ffffff;
  opacity: 0.85;
  font-size: 0.85rem;
  text-decoration: none;
}
.zurueck-link:hover { opacity: 1; text-decoration: underline; }

/* Links, die wie Knöpfe aussehen (Öffnen, Bericht, Word) */
a.knopf {
  display: inline-block;
  text-decoration: none;
  text-align: center;
}
/* Dem Grunde nach abgelehnte Positionen im Prüfergebnis */
.edg-gestrichen > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
}
.edg-liste {
  margin: 0.6rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Fragen an die Unterlagen ------------------------------------------------ */

.chat-auswahl {
  border: 1px solid var(--rahmen-hell);
  border-radius: 4px;
  padding: 0.6rem 0.9rem 0.8rem;
  margin: 0 0 0.8rem;
}
.chat-auswahl legend { font-weight: 600; font-size: 0.9rem; padding: 0 0.3rem; }
.chat-dokumente { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.chat-gruppe {
  flex: 0 0 100%;
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-neben);
}
.chat-dokument { font-size: 0.88rem; white-space: nowrap; cursor: pointer; }

.chat-form { display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; }
.chat-form label { font-weight: 600; flex: 0 0 100%; }
.chat-form textarea {
  flex: 1 1 24rem;
  font: inherit;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--rahmen-hell);
  border-radius: 4px;
  resize: vertical;
}

.chat-verlauf { margin-top: 1rem; }
.chat-eintrag {
  border-left: 3px solid var(--navy);
  padding: 0.2rem 0 0.4rem 0.8rem;
  margin-bottom: 1.1rem;
}
.chat-frage { margin: 0 0 0.4rem; font-weight: 600; }
.chat-antwort { margin: 0; white-space: pre-wrap; line-height: 1.55; }
.chat-antwort.laeuft { color: var(--text-neben); font-style: italic; }
.chat-antwort.fehler { color: var(--fehler-text); }
.chat-quellen { margin-top: 0.5rem; }
.chat-quellen > summary { cursor: pointer; font-size: 0.85rem; color: var(--akzent); }
.chat-quellen-liste {
  margin: 0.4rem 0 0;
  padding-left: 1.4rem;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.8rem;
  line-height: 1.6;
}

/* Stand des Vertrags (Ebene über den Projekten) */
.tabelle-vertrag td.zahl, .tabelle-vertrag th.zahl { text-align: right; }
.zeile-summe td, .zeile-summe th {
  font-weight: 700;
  background: #f2f4f7;
  border-top: 2px solid var(--navy);
}

.zusammenfassung.fertig {
  color: #1e7e46;
  font-weight: 600;
}

.zusammenfassung-titel {
  margin: 0.9rem 0 0.4rem;
  font-size: 0.92rem;
  color: var(--navy);
}

/* Treffertabelle + Ansatzabgleich ------------------------------------------ */

details.treffer {
  margin-top: 0.7rem;
  border: 1px solid var(--rahmen-hell);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  background: #fbfcfd;
}

details.treffer summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--akzent);
}

.tabellen-rahmen {
  overflow-x: auto;
  margin-top: 0.5rem;
}

.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.tabelle th {
  text-align: left;
  background: #eef1f5;
  color: var(--navy);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.45rem 0.6rem;
  border-bottom: 2px solid var(--rahmen);
  white-space: nowrap;
}

.tabelle td {
  padding: 0.42rem 0.6rem;
  border-bottom: 1px solid var(--rahmen-hell);
  vertical-align: top;
}

.tabelle tbody tr:nth-child(even) {
  background: var(--zebra);
}

.tabelle td.zahl {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tabelle td.zeit { white-space: nowrap; }

.ansatzabgleich {
  margin-top: 0.7rem;
  padding: 0.55rem 0.8rem;
  background: var(--zebra);
  border-left: 3px solid var(--akzent);
  font-size: 0.85rem;
}

.ansatzabgleich h4 {
  margin: 0 0 0.3rem;
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-neben);
}

.ansatzabgleich p { margin: 0.15rem 0 0; }

/* Einschätzung des Sprachmodells.
 *
 * Bewusst anders als alles daneben: gestrichelter Rahmen statt der farbigen
 * Kante der Fachblöcke, gedämpfte Fläche, grauer Merker. Sie ist ein Vorschlag
 * und darf nie wie eine Einstufung aussehen — die Farben Grün, Gelb und Rot
 * sind in dieser Anwendung mit „streichen / prüfen / neue Leistung" belegt,
 * und eine Maschinenmeinung in Ampelfarben würde als Entscheidung gelesen. */
.ki-einschaetzung {
  margin-top: 0.7rem;
  padding: 0.55rem 0.8rem;
  background: transparent;
  border: 1px dashed var(--rahmen-hell);
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--text-neben);
}

.ki-einschaetzung h4 {
  margin: 0 0 0.35rem;
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-neben);
}

.ki-einschaetzung p { margin: 0.15rem 0 0; }
.ki-einschaetzung .ki-urteil { color: var(--text); }
.ki-einschaetzung .ki-grund { font-style: italic; }
/* Der Widerspruch zum Maschinenvorschlag: hervorgehoben, aber nicht in den
 * Ampelfarben — er ist ein Hinweis zum Hinsehen, kein Urteil. */
.ki-einschaetzung .ki-abweichung {
  margin-top: 0.3rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--text-neben);
  color: var(--text);
}

.ki-lv {
  width: 100%;
  margin-top: 0.4rem;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.ki-lv th,
.ki-lv td {
  padding: 0.2rem 0.4rem;
  text-align: left;
  border-bottom: 1px solid var(--rahmen-hell);
  vertical-align: top;
}

.ki-lv th { font-weight: 600; color: var(--text-neben); }

/* Neutral, nicht in den Farben der Einstufung. */
.badge-ki {
  background: #6b7280;
  color: #ffffff;
}

/* Prüffrist (Stufe 2): 20 Kalendertage, anhaltbar. Anders als bei der
 * KI-Einschätzung sind Ampelfarben hier RICHTIG — der Fristzustand ist eine
 * Tatsache, kein Vorschlag: knapp ist gelb, überschritten ist rot. */
.frist-bereich {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.8rem;
  margin-top: 0.6rem;
  padding: 0.5rem 0.8rem;
  background: var(--zebra);
  border-left: 3px solid var(--akzent);
  font-size: 0.85rem;
}

.frist-titel {
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-neben);
}

.frist-stand { font-weight: 700; }
.frist-stand.frist-laeuft { color: #1e7e46; }
.frist-stand.frist-ruht { color: #b06a10; }
.frist-stand.frist-abgelaufen { color: #c0392b; }
.frist-hinweis { color: var(--text-neben); }
.frist-start input[type="date"] { margin-left: 0.3rem; }
.frist-entfernen { margin-left: auto; }
.frist-verlauf { flex-basis: 100%; font-size: 0.8rem; }
.frist-verlauf ul { margin: 0.25rem 0 0; padding-left: 1.2rem; }
.frist-zustand-abgelaufen { border-left-color: #c0392b; }
.frist-zustand-ruht { border-left-color: #b06a10; }

/* Frist-Spalte der Nachtragsübersicht */
.frist-zelle { white-space: nowrap; font-weight: 600; }
.frist-zelle.frist-laeuft { color: #1e7e46; }
.frist-zelle.frist-knapp { color: #b06a10; }
.frist-zelle.frist-ruht { color: var(--text-neben); font-style: italic; }
.frist-zelle.frist-abgelaufen { color: #c0392b; }

/* Vollständigkeit (Stufe 0): was fehlt, mit Namen — und die Pendelliste */
.vollstaendigkeit-liste {
  margin: 0.3rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.85rem;
}

.pendelliste { margin-top: 0.4rem; font-size: 0.85rem; }
.pendelliste-text {
  width: 100%;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.8rem;
  margin: 0.3rem 0;
}

/* EP-Herleitung nach Anlage 5.0 (Stufe 2) */
.ep-herleitung {
  margin-top: 0.7rem;
  padding: 0.55rem 0.8rem;
  background: var(--zebra);
  border-left: 3px solid var(--akzent);
  font-size: 0.85rem;
}

.ep-herleitung summary { font-weight: 600; cursor: pointer; }

.ep-herleitung-text {
  margin: 0.4rem 0;
  padding: 0.4rem 0.6rem;
  background: #ffffff;
  border: 1px solid var(--rahmen-hell);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.78rem;
  white-space: pre-wrap;
  overflow-x: auto;
}

.ep-formular {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.3rem 0.8rem;
  margin-top: 0.4rem;
}

.ep-feld { display: flex; flex-direction: column; font-size: 0.8rem; color: var(--text-neben); }
.ep-feld input { margin-top: 0.1rem; }
.ep-vorschau { grid-column: 1 / -1; font-weight: 600; margin: 0.2rem 0 0; }
.ep-knoepfe { display: flex; gap: 0.4rem; margin-top: 0.3rem; }

/* Fundstellen-Verweise: jeder „Datei · Seite · Zeile"-Eintrag öffnet die
 * Unterlage im Wortlaut, an der Zeile markiert (Wunsch Stefan 24.08.2026). */
.fundstelle-link { text-decoration: underline; text-underline-offset: 2px; }
.fundstelle-link:hover { color: var(--navy); }

/* Fundstellen-Ansicht (dokument.html) */
.dok-hauptbereich { max-width: 96rem; margin: 0 auto; padding: 0 1rem 2rem; }
/* Meldungen im Inhaltsbereich (Hinweis der BÜ-Ansicht) nehmen dessen Breite, nicht die der Seitenleiste. */
.dok-hauptbereich .meldung { width: auto; max-width: none; margin-left: 0; margin-right: 0; }
.dok-hinweis { margin: 0.8rem 0; }

.dok-inhalt {
  background: #ffffff;
  border: 1px solid var(--rahmen-hell);
  border-radius: 4px;
  padding: 0.4rem 0;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.82rem;
  line-height: 1.45;
}

.dok-zeile {
  display: flex;
  gap: 0.7rem;
  padding: 0 0.6rem;
  /* Große Unterlagen (das echte LV hat über tausend Seiten): der Browser
   * rendert nur, was im Sichtfenster liegt — sonst stünde die Seite beim
   * Öffnen sekundenlang. */
  content-visibility: auto;
  contain-intrinsic-size: auto 1.2rem;
}

.dok-zeile:hover { background: var(--zebra); }

.dok-nr {
  flex: 0 0 4.2rem;
  text-align: right;
  color: var(--text-neben);
  user-select: none;
}

.dok-text { white-space: pre-wrap; word-break: break-word; flex: 1; }

.dok-ziel {
  background: #fff3c4;
  border-left: 4px solid #b06a10;
  scroll-margin: 40vh;
  /* Die Zielzeile wird IMMER gerendert — sie ist der Grund des Besuchs und
   * darf nie der Sichtbarkeits-Optimierung zum Opfer fallen. */
  content-visibility: visible;
}

.dok-ziel .dok-nr { color: #7a4a00; font-weight: 700; }

.dok-seitengrenze {
  margin: 0.35rem 0;
  padding: 0.1rem 0.6rem;
  text-align: center;
  color: var(--text-neben);
  font-size: 0.72rem;
  border-top: 1px dashed var(--rahmen-hell);
  user-select: none;
}

.ergebnis-fuss {
  margin-top: 1.2rem;
}

/* Protokoll ---------------------------------------------------------------- */

#btnLoeschen {
  margin-top: 1rem;
}

/* Fußzeile ----------------------------------------------------------------- */

.fuss {
  background: #eef1f5;
  border-top: 1px solid var(--rahmen);
  margin-top: 1rem;
}

.fuss-innen {
  max-width: var(--seite-max);
  margin: 0 auto;
  padding: 1rem 1.25rem 1.3rem;
}

.fuss-innen .hinweis {
  margin: 0;
}

/* Responsiv ---------------------------------------------------------------- */

@media (max-width: 900px) {
  /* Kopfzeile Tablet: Titel und Benutzer oben, Auftragssteuerung darunter */
  .kopf-titel { flex-basis: 12rem; }
  .kopf-nutzer { order: 2; }
  .kopf-auftrag { order: 3; flex: 1 1 100%; }

  main {
    padding: 0.8rem;
  }

  .bereich {
    padding: 1rem;
  }

  .karten {
    grid-template-columns: 1fr;
  }

  .pruef-zeile select {
    min-width: 0;
    width: 100%;
  }

  .pruef-zeile {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Einstiegshilfe, Dokumentenübersicht, Verbindungstest (Ergänzung 03.08.) */
.einstieg {
  background: #eef2f7;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
}
.einstieg ol { margin: 0.4rem 0 0.4rem 1.2rem; }
.einstieg li { margin-bottom: 0.25rem; }
#dokumenteBereich { margin-top: 1.2rem; }
#dokumenteBereich h3 { margin-bottom: 0.5rem; }
.zeile-gesperrt td { color: var(--text-neben); font-style: italic; }
button.klein, a.knopf.klein {
  padding: 0.2rem 0.6rem;
  font-size: 0.85rem;
}
td.aktion { text-align: right; white-space: nowrap; }

/* Anmeldung (Overlay über der ganzen App, Ergänzung 08/2026) ---------------- */

.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(22, 41, 63, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.login-overlay.versteckt { display: none; }

.login-karte {
  background: var(--karte);
  border-radius: 8px;
  border-top: 4px solid var(--navy);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  padding: 1.6rem 1.8rem;
  width: 100%;
  max-width: 430px;
}

.login-karte h2 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--navy);
}

.login-untertitel {
  margin: 0.2rem 0 1.1rem;
  font-size: 0.85rem;
  color: var(--text-neben);
}

.login-karte form {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.login-karte label {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 0.5rem;
}

.login-karte input {
  font: inherit;
  padding: 0.45rem 0.6rem;
  border: 1px solid #c3ccd6;
  border-radius: 4px;
  background: #ffffff;
  color: var(--text);
}

.login-karte button {
  margin-top: 0.9rem;
}

.login-karte button.login-zurueck {
  margin-top: 0.4rem;
  border-color: var(--rahmen);
  color: var(--text-neben);
}

#totpEinrichtung {
  margin-bottom: 0.4rem;
}

#totpEinrichtung p {
  margin: 0 0 0.6rem;
  font-size: 0.88rem;
}

.totp-secret-zeile { text-align: center; }

#totpSecret {
  display: inline-block;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  padding: 0.45rem 0.7rem;
  background: var(--zebra);
  border: 1px dashed #9aa7b5;
  border-radius: 4px;
  user-select: all;
  word-break: break-all;
}

.totp-link-zeile a { color: var(--akzent); }

.login-meldung {
  margin: 0.9rem 0 0;
  padding: 0.5rem 0.8rem;
  border-radius: 4px;
  font-size: 0.88rem;
  background: var(--fehler-flaeche);
  border: 1px solid var(--fehler-rahmen);
  color: var(--fehler-text);
}

.login-meldung.versteckt { display: none; }

/* Kopfzeile: angemeldeter Benutzer ----------------------------------------- */

.kopf-nutzer {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

#nutzerName {
  font-size: 0.88rem;
  color: #e8eef6;
}

#adminLink {
  font-size: 0.88rem;
  color: #c3d0e0;
}

#adminLink:hover { color: #ffffff; }

.kopf-nutzer button {
  background: transparent;
  color: #ffffff;
  border-color: #6d84a3;
}

.kopf-nutzer button:hover:not(:disabled) {
  background: var(--navy-dunkel);
}

/* Status-Auswahl + Kommentare (Projekt und Nachtrag) ------------------------ */

.kopf-auftrag select#projektStatus { min-width: 0; }

.nachtrag-meta {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rahmen-hell);
}

.status-zeile {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.status-zeile label {
  font-size: 0.88rem;
  font-weight: 600;
}

.kommentare { margin-top: 0.9rem; }

.kommentare h3 {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: var(--navy);
}

.kommentar-liste {
  list-style: none;
  margin: 0 0 0.7rem;
  padding: 0;
}

.kommentar-liste li.kommentar {
  border-left: 3px solid var(--akzent);
  background: var(--zebra);
  padding: 0.45rem 0.7rem;
  margin-bottom: 0.4rem;
}

.kommentar-meta {
  display: block;
  font-size: 0.78rem;
  color: var(--text-neben);
}

.kommentar-text {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  white-space: pre-wrap;
}

.kommentar-leer {
  font-size: 0.85rem;
  color: var(--text-neben);
  font-style: italic;
  padding: 0.2rem 0;
}

.kommentar-form {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.kommentar-form textarea {
  font: inherit;
  flex: 1;
  min-width: 240px;
  padding: 0.45rem 0.6rem;
  border: 1px solid #c3ccd6;
  border-radius: 4px;
  background: #ffffff;
  color: var(--text);
  resize: vertical;
}

/* Arbeitsvorrat: Nachtragsübersicht (Ergänzung 08/2026) ---------------------
   Ausgelegt auf rund 250 Nachträge je Auftrag: Kopfzeile mit Gesamtzahlen,
   Filterzeile, darunter ein scrollbarer Rahmen mit fixiertem Tabellenkopf. */

.nachtraege-summen {
  margin: 0 0 0.7rem;
  font-size: 0.92rem;
  color: var(--text);
}

.nachtraege-summen strong { color: var(--navy); }
.nachtraege-summen .summe-trenner { color: var(--rahmen); }
.nachtraege-summen .summe-leer { color: var(--text-neben); font-style: italic; }

.nachtraege-filter {
  display: flex;
  align-items: flex-end;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

.nachtraege-filter .filter-feld {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.nachtraege-filter label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-neben);
}

.nachtraege-filter .filter-suche input {
  min-width: 260px;
}

.nachtraege-filter .trefferzahl {
  font-size: 0.82rem;
  color: var(--text-neben);
  padding-bottom: 0.45rem;
}

/* Der Knopf für die Dopplungsliste steht am rechten Rand der Filterzeile — er
   gehört zur Übersicht als Ganzes, nicht zu einem einzelnen Nachtrag. */
.nachtraege-filter #btnDopplungsliste {
  margin-left: auto;
}

.dopplungsliste {
  margin-bottom: 0.9rem;
  padding: 0.8rem;
  border: 1px solid var(--rahmen);
  border-radius: 6px;
  background: var(--zebra);
}

.dopplungsliste textarea {
  width: 100%;
  /* Feste Zeichenbreite: Die Spalten sind tabulatorgetrennt, und nur so sieht
     man beim Durchsehen, ob eine Zelle verrutscht ist. */
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.78rem;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

.hinweis-klein {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  color: var(--text-neben);
  line-height: 1.45;
}

.tabellen-rahmen-scroll {
  max-height: 26rem;
  overflow-y: auto;
  border: 1px solid var(--rahmen-hell);
  border-radius: 4px;
}

.tabelle-nachtraege {
  min-width: 760px;
}

.tabelle-nachtraege thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow: inset 0 -2px 0 var(--rahmen);
}

.tabelle-nachtraege td { vertical-align: middle; }
.tabelle-nachtraege .nachtrag-nummer { font-weight: 600; color: var(--navy); white-space: nowrap; }
/* Nachtragstitel in der Übersicht (Kundenwunsch 26.08.2026): eigene Zeile
   unter der Nummer, bewusst unauffällig — reine Anzeige, kein Ersatz für die
   Nummer als Bezugspunkt in Kommentaren/Berichten. */
.nachtrag-titel-klein {
  display: block;
  font-weight: 400;
  white-space: normal;
  color: var(--text-neben);
  font-size: 0.82rem;
}

.tabelle tbody tr.zeile-aktiv,
.tabelle tbody tr.zeile-aktiv:nth-child(even) {
  background: #eaf1f9;
  box-shadow: inset 3px 0 0 var(--akzent);
}

select.zeilen-status {
  padding: 0.2rem 0.4rem;
  font-size: 0.85rem;
  max-width: 100%;
}

.zaehler-etiketten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.badge-zaehler {
  font-size: 0.72rem;
  padding: 0.1rem 0.5rem;
}

.ungeprueft {
  font-size: 0.85rem;
  color: var(--text-neben);
  font-style: italic;
}

.aktionen,
.bericht-knoepfe {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.bericht-knoepfe {
  justify-content: flex-start;
  margin-top: 0.7rem;
}

/* Bericht/Word sind echte Links (neuer Tab bzw. Download), sehen aber aus wie
   die kleinen Knöpfe daneben. */
a.knopf-link {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  font-size: 0.85rem;
  line-height: 1.5;
  border: 1px solid var(--navy);
  border-radius: 4px;
  background: #ffffff;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}

a.knopf-link:hover { background: #eef2f7; }

@media (max-width: 900px) {
  .nachtraege-filter {
    flex-direction: column;
    align-items: stretch;
  }

  .nachtraege-filter .filter-suche input { min-width: 0; width: 100%; }
  .nachtraege-filter .trefferzahl { padding-bottom: 0; }

  .tabellen-rahmen-scroll { max-height: 20rem; }
}

/* Zwei-Faktor-Einrichtung: QR-Code und manueller Ersatzweg */
.totp-qr {
  display: flex;
  justify-content: center;
  margin: 0.9rem 0;
}
.totp-qr svg {
  border: 8px solid #fff;
  border-radius: 4px;
  background: #fff;
  max-width: 100%;
  height: auto;
}
.totp-manuell {
  margin-bottom: 0.8rem;
  font-size: 0.9rem;
}
.totp-manuell summary {
  cursor: pointer;
  color: #cbd5e1;
}
.totp-manuell p { margin: 0.5rem 0; }

/* Hinweis fuer Auftraege mit nur lesendem Zugriff */
.nur-lesen-hinweis {
  margin: 0;
  padding: 0.6rem 1.2rem;
  background: #fdf6e3;
  border-bottom: 1px solid #e0d7bf;
  color: #6b5b2a;
  font-size: 0.92rem;
}

/* Gegenlaeufige Treffer: aehnlich formuliert, aber die gegenteilige Leistung */
tr.treffer-gegenlaeufig td { background: #fdf6e3; color: #6b5b2a; }
tr.treffer-gegenlaeufig td:last-child { font-weight: 600; }

/* Hergeleitete Ortszuordnung: sichtbar, aber als pruefbeduerftig markiert */
.ortshinweis {
  margin: 0.3rem 0 0.5rem;
  padding: 0.4rem 0.6rem;
  background: #fdf6e3;
  border-left: 3px solid #d97a1f;
  font-size: 0.9rem;
  color: #6b5b2a;
}

/* Ansatzstamm: Ausgabe aller Leistungsansaetze der Urkalkulation (08/2026) --- */

.ansatzstamm-aktionen {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.8rem;
}

.ansatzstamm-aktionen .hinweis {
  margin: 0;
}

/* Erweiterter Ansatzabgleich: Leistungsansaetze Nachtrag gegen Hauptvertrag --
   Zwoelf Spalten passen auf keinen schmalen Bildschirm; der Rahmen scrollt
   waagerecht (.tabellen-rahmen hat bereits overflow-x: auto). */

.ansatz-zeilen-titel {
  margin: 0.8rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy);
}

.tabelle-ansatzzeilen {
  min-width: 900px;
  background: #ffffff;
}

.tabelle-ansatzzeilen thead tr:first-child th {
  text-align: center;
  border-bottom: 1px solid var(--rahmen-hell);
}

.tabelle-ansatzzeilen thead tr:first-child th[rowspan] {
  text-align: left;
  border-bottom: 2px solid var(--rahmen);
}

.tabelle-ansatzzeilen td { vertical-align: middle; }
.tabelle-ansatzzeilen .fundstelle-zelle { font-size: 0.8rem; color: var(--text-neben); }

/* Abweichung ueber der Schwelle: die Zahl, die in die Verhandlung gehoert. */
.tabelle td.abweichung-hoch {
  background: var(--fehler-flaeche);
  color: var(--fehler-text);
  font-weight: 600;
}

/* Bewertung je Ansatzzeile — Farben im Stil der Einstufungs-Badges. */
.badge-gleich { background: #1e7e46; }
.badge-nachtrag_hoeher { background: #c0392b; }
.badge-nachtrag_niedriger { background: #2f6db3; }
.badge-ohne_vergleich { background: #5a6673; }

/* Vollstaendigkeitspruefung eines Nachtragsvorgangs */
.vorgangspruefung {
  margin: 0.8rem 0;
  padding: 0.8rem 1rem;
  border-radius: 6px;
  border-left: 4px solid;
}
.vorgangspruefung.vollstaendig { background: #eef7f0; border-color: #1e7e46; }
.vorgangspruefung.unvollstaendig { background: #fdf3f2; border-color: #c0392b; }
.vorgang-titel { font-weight: 700; margin: 0 0 0.4rem; }
.dossier-status-text { margin: 0; }
.vorgang-meldungen { margin: 0 0 0.4rem 1.1rem; }
.vorgang-meldungen li { margin-bottom: 0.2rem; }

/* Trennt in der Nachtragsübersicht die Entscheidungen des Ingenieurs von den
   Einstufungen der Maschine, sobald in einer Zeile beides vorkommt. */
.zaehler-trenner {
  font-size: 0.72rem;
  color: var(--text-neben);
  align-self: center;
  padding-left: 0.15rem;
}

/* Fachwissen ergänzen je Position (18.08.2026) — ein Nebenweg, keine
   Entscheidung: grauer statt navy Rand, zugeklappt, schlicht. */
details.fachwissen {
  margin-top: 0.7rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--rahmen-hell);
  border-left: 4px solid #8a95a3;
  border-radius: 4px;
  background: #fbfcfd;
}
details.fachwissen summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: #4a5561;
}
details.fachwissen h5 { margin: 0.7rem 0 0.3rem; font-size: 0.85rem; color: #4a5561; }
.fachwissen-formular { display: grid; gap: 0.35rem; margin-top: 0.4rem; }
.fachwissen-formular .fachwissen-feld { width: 100%; font: inherit; }
.fachwissen-formular button { justify-self: start; }
.fachwissen-liste { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; }
.fachwissen-liste li { padding: 0.15rem 0; }
.badge-fw-vorgeschlagen { background: #b45309; }
.badge-fw-bestaetigt { background: var(--ok); }
.badge-fw-abgelehnt { background: #5a6673; }

/* ---- Import per Ziehen und Ablegen (25.08.2026) */
.import-zeile.drop-bereit {
  outline: 2px dashed var(--akzent, #4a6fa5);
  outline-offset: 4px;
  background: #eef2f7;
}

/* Gekürzte Klausel-Auszüge auf Klick vollständig zeigen */
.auszug-klappbar {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.auszug-klappbar:hover { background: #eef2f7; }

/* Passwort-Dialog */
.dialog {
  border: 1px solid #c6ccd4;
  border-radius: 8px;
  padding: 1.2rem 1.4rem;
  max-width: 26rem;
  width: 90vw;
}
.dialog::backdrop { background: rgba(20, 30, 45, 0.45); }
.dialog h2 { margin-top: 0; }
.dialog label { display: block; margin: 0.7rem 0 0.2rem; font-size: 0.88rem; }
.dialog input { width: 100%; box-sizing: border-box; }
.dialog-knoepfe {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1rem;
}

/* Fundstellen-Ansicht: Kopfzeile beim Scrollen oben halten (Wunsch Stefan
   26.08.2026) — der Original-PDF-Knopf ist sonst nach dem Sprung zur
   markierten Zeile erst nach langem Hochscrollen erreichbar. */
.kopf-fixiert {
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 2px 6px rgba(15, 30, 50, 0.18);
}

/* Importmeldungen: Aufzählungen behalten ihre Zeilen (Wunsch Stefan 27.08.) */
.import-meldungen li { white-space: pre-line; }

/* ---------------------------------------------------------------------
   Termin Stefan Hecker, 23.09.2026 (A9–A13): klickbare Übersichtszeilen,
   Gruppen-Kopfzeilen der Unterlagenlisten, zugeklapptes Protokoll. */

/* Tabellenzeile, die per macheZeileKlickbar() (dom.js) ein Ziel öffnet —
   Cursor-Hinweis und sichtbarer Tastaturfokus (A10/A12). */
.tabelle tbody tr.zeile-klickbar {
  cursor: pointer;
}
.tabelle tbody tr.zeile-klickbar:hover {
  background: var(--zebra);
}
.tabelle tbody tr.zeile-klickbar:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: -2px;
}

/* Gruppen-Kopfzeile der Unterlagenlisten (A13: nach Anlage bzw. Typ
   gruppiert statt Upload-Reihenfolge) — eigene Zeile mit voller Breite,
   deutlich abgesetzt von den Dokumentzeilen darunter. */
.tabelle tbody tr.gruppen-kopf td {
  background: var(--flaeche);
  color: var(--navy);
  font-weight: 600;
  font-size: 0.82rem;
  padding-top: 0.5rem;
  padding-bottom: 0.3rem;
  border-top: 1px solid var(--rahmen-hell);
}

/* Protokoll standardmäßig zugeklappt (A11) — dieselbe unauffällige
   Klappen-Optik wie die übrigen <details> der Anwendung. */
.protokoll-klappe summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
}
.protokoll-klappe .tabellen-rahmen {
  margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------
   Kundentermin 21.10.2026: Unterlagentabelle der Nachtragsseite passt ohne
   seitliches Scrollen auf die Seite, ist einklappbar, und Meldungen
   erscheinen dort, wo geklickt wurde. */

/* Einklappbare Unterlagenliste (<details>, Zustand in localStorage) */
.unterlagen-klappe { margin-top: 0.8rem; }
.unterlagen-klappe > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
  padding: 0.3rem 0;
}
.unterlagen-werkzeug {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

/* Feste Spaltenbreiten statt Auto-Layout: Ein sehr langer Dateiname dehnt die
   Tabelle nicht mehr über den Rand, sondern bricht um (overflow-wrap:anywhere).
   Die Aktionen (Entfernen / Art der Sperre / Als BÜW sperren) umbrechen
   untereinander statt in einer Zeile über den Rand zu laufen. */
.tabelle-unterlagen {
  table-layout: fixed;
  width: 100%;
}
.tabelle-unterlagen th:nth-child(1) { width: 31%; }
.tabelle-unterlagen th:nth-child(2) { width: 12%; }
.tabelle-unterlagen th:nth-child(3) { width: 13%; }
.tabelle-unterlagen th:nth-child(4) { width: 24%; }
.tabelle-unterlagen th:nth-child(5) { width: 20%; }
.tabelle-unterlagen th { white-space: normal; }
.tabelle-unterlagen td {
  overflow-wrap: anywhere;
  min-width: 0;
}
.tabelle-unterlagen td.aktion {
  text-align: left;
  white-space: normal;
}
.tabelle-unterlagen td.aktion > button { margin: 0 0.3rem 0.3rem 0; }
.tabelle-unterlagen .sperren-bedienung {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  max-width: 100%;
  vertical-align: top;
}
.tabelle-unterlagen .zuordnung-auswahl {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
}
.tabelle-unterlagen td a.knopf { margin-bottom: 0.3rem; }
.tabelle-unterlagen .sperren-bedienung select { max-width: 100%; }

/* Gruppenkopf als Schalter: ganze Zeile klickbar, Zustand per aria-expanded */
.tabelle tbody tr.gruppen-kopf td { padding: 0; }
.gruppe-schalter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.6rem 0.35rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}
.gruppe-schalter:hover:not(:disabled) { background: #e9eef4; }
.gruppe-schalter::before {
  content: "\25BE";
  display: inline-block;
  width: 1em;
  transition: transform 0.12s;
}
.gruppe-schalter[aria-expanded="false"]::before { transform: rotate(-90deg); }
.gruppe-anzahl { font-weight: 400; color: var(--text-neben); }

/* Meldung direkt am auslösenden Knopf (inline-meldung.js). Fehler bleiben
   stehen, Erfolg/Info verschwinden nach einigen Sekunden. */
.meldung-inline {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: auto;
  max-width: 100%;
  margin: 0.35rem 0 0.2rem;
  padding: 0.3rem 0.4rem 0.3rem 0.6rem;
  border-radius: 4px;
  font-size: 0.82rem;
  line-height: 1.35;
  font-style: normal;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  overflow-wrap: anywhere;
}
.meldung-inline-text { flex: 1; min-width: 0; }
.meldung-inline-zu {
  flex-shrink: 0;
  padding: 0 0.4rem;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.05rem;
  line-height: 1.2;
  opacity: 0.7;
}
.meldung-inline-zu:hover:not(:disabled) { background: rgba(0, 0, 0, 0.08); opacity: 1; }
/* Der Auslöser wurde neu gezeichnet (z. B. entfernte Zeile): die Meldung
   steht fest an der Stelle des Klicks. */
.meldung-inline-schwebend {
  position: fixed;
  z-index: 60;
  width: min(26rem, calc(100vw - 1rem));
  margin: 0;
  box-shadow: 0 4px 16px rgba(15, 30, 50, 0.28);
}

@media (max-width: 1000px) {
  /* Tablet: mehr Platz für Datei und Aktionen, engere Zellen */
  .tabelle-unterlagen th:nth-child(1) { width: 27%; }
  .tabelle-unterlagen th:nth-child(2) { width: 12%; }
  .tabelle-unterlagen th:nth-child(3) { width: 13%; }
  .tabelle-unterlagen th:nth-child(4) { width: 22%; }
  .tabelle-unterlagen th:nth-child(5) { width: 26%; }
  .tabelle-unterlagen th,
  .tabelle-unterlagen td { padding-left: 0.4rem; padding-right: 0.4rem; }
}