/* MDok – Grundgestaltung. Flex-Layout, keine feste Skalierung:
   wer größer möchte, nutzt den Zoom des Browsers (Kapitel 5.4). */

/* Alle Farben stehen hier. Wer die Anwendung umfärben will, ändert
   diese Werte – die Regeln darunter greifen ausschließlich darauf zu. */
:root {
  /* Flächen */
  --hintergrund: #eaeef3;
  --flaeche: #ffffff;
  --gedaempfte-flaeche: #f5f8fb;

  /* Kopfzeile */
  --kopf: #1f3a5f;
  --kopf-schrift: #eaf1f8;
  --kopf-rahmen: #35577f;

  /* Schrift und Linien */
  --schrift: #1b2430;
  --gedaempft: #5c6b7d;
  --rahmen: #c3cedb;

  /* Akzent */
  --betont: #1d5fa8;
  --betont-dunkel: #164a83;
  --betont-hell: #dfebf9;

  /* Rückmeldungen */
  --warnung: #a11d1d;
  --warnung-flaeche: #fdf0f0;
  --warnung-rahmen: #eccaca;
  --erfolg: #14532d;
  --erfolg-flaeche: #eaf6ee;
  --erfolg-rahmen: #c3e0cd;
  --treffer: #ffe08a;
  --stern: #d99b00;

  /* Fristen: Rot heißt abgelaufen, Bernstein „läuft bald ab" – in der
     Kopfzeile wie in der Liste. Zweimal Bernstein, weil die Kopfzeile
     dunkel und die Liste hell ist: Als Fläche darf er leuchten, als
     Schrift auf Weiß muss er dunkel genug sein, um lesbar zu bleiben. */
  --frist-abgelaufen: #c62828;
  --frist-bald: #f2c14e;
  --frist-bald-schrift: #8a6a00;

  --schatten: rgba(20, 40, 70, 0.16);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  color: var(--schrift);
  background: var(--hintergrund);
}

/* ---------- Anmeldung, Passwortwechsel, Fehlerseite ---------- */

body.mittig {
  display: flex;
  align-items: center;
  justify-content: center;
}

.karte {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 22rem;
  padding: 1.75rem;
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-top: 4px solid var(--betont);
  border-radius: 6px;
  box-shadow: 0 10px 30px var(--schatten);
}

.karte h1 {
  margin: 0 0 0.5rem;
  font-size: 1.4rem;
}

.karte p {
  margin: 0;
}

.karte label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.meldung {
  padding: 0.5rem 0.75rem;
  color: var(--warnung);
  background: var(--warnung-flaeche);
  border: 1px solid var(--warnung-rahmen);
  border-radius: 4px;
}

.hinweis {
  color: var(--gedaempft);
  font-size: 0.85rem;
}

input,
select,
button {
  font: inherit;
}

input,
select {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--rahmen);
  border-radius: 4px;
  background: var(--flaeche);
}

button {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--rahmen);
  border-radius: 4px;
  background: var(--flaeche);
  cursor: pointer;
}

button[type="submit"] {
  color: var(--flaeche);
  background: var(--betont);
  border-color: var(--betont);
}

/* ---------- Arbeitsfläche ---------- */

body.arbeitsflaeche {
  display: flex;
  flex-direction: column;
}

.kopfzeile {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  color: var(--kopf-schrift);
  background: var(--kopf);
}

.kopfzeile form {
  margin: 0;
}

.kopfzeile button,
.kopfzeile button[type="submit"],
.kopfzeile summary {
  color: var(--kopf-schrift);
  background: transparent;
  border-color: var(--kopf-rahmen);
}

.kopfzeile button:hover,
.kopfzeile summary:hover {
  background: var(--kopf-rahmen);
}

/* Die Marke ist ein Bild; die Breite folgt der Höhe. Angezeigt wird ein
   Drittel der Bildhöhe – so bleibt sie auf hochauflösenden Schirmen
   scharf. */
.marke {
  display: flex;
  color: inherit;
  text-decoration: none;
}

.marke img {
  height: 1.25rem;
  width: auto;
}

.karte h1 img {
  height: 2.1rem;
  width: auto;
}

.kopfzeile a {
  color: var(--kopf-schrift);
}

.benutzermenue {
  position: relative;
}

.benutzermenue > summary {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--kopf-rahmen);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  list-style: none;
}

.benutzermenue > summary::-webkit-details-marker {
  display: none;
}

.benutzermenue .menue {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 15rem;
  padding: 0.75rem;
  color: var(--schrift);
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: 4px;
  box-shadow: 0 8px 20px var(--schatten);
}

/* Das Menü klappt aus der dunklen Kopfzeile aus – hier gilt wieder
   die normale Schriftfarbe. */
.benutzermenue .menue a {
  color: var(--betont);
}

.benutzermenue .menue button {
  color: var(--schrift);
  background: var(--flaeche);
  border-color: var(--rahmen);
}

.benutzermenue .menue button:hover {
  background: var(--gedaempfte-flaeche);
}

.katalogwahl {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: inherit;
}

.fueller {
  flex: 1;
}

.reiterleiste {
  display: flex;
  gap: 0.25rem;
  padding: 0.4rem 1rem 0;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rahmen);
}

.reiter {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  color: var(--schrift);
  text-decoration: none;
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: 4px 4px 0 0;
  border-bottom-color: transparent;
  margin-bottom: -1px;
  cursor: pointer;
}

.reiter.aktiv {
  background: var(--hintergrund);
  border-bottom-color: var(--hintergrund);
  border-top: 3px solid var(--betont);
  font-weight: 600;
}

.reiter:hover:not(.aktiv) {
  background: var(--gedaempfte-flaeche);
}

.einstellungen {
  flex: 1;
  padding: 1rem;
  overflow: auto;
}

.einstellungen h1 {
  margin-top: 0;
  font-size: 1.2rem;
}

.einstellungen .meldung {
  max-width: 48rem;
}

.erfolg {
  max-width: 48rem;
  padding: 0.5rem 0.75rem;
  color: var(--erfolg);
  background: var(--erfolg-flaeche);
  border: 1px solid var(--erfolg-rahmen);
  border-radius: 4px;
}

.formular {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 34rem;
}

.formular label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.formular label.ankreuz {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.zeile {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.zeile label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.zeile label.breit {
  flex: 1;
  min-width: 18rem;
}

.liste {
  border-collapse: collapse;
  margin-top: 1rem;
  width: 100%;
}

.liste th,
.liste td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--rahmen);
  vertical-align: middle;
}

.liste th {
  color: var(--gedaempft);
  font-weight: 600;
}

.liste form {
  display: flex;
  gap: 0.4rem;
}

.liste .pfad {
  color: var(--gedaempft);
  font-size: 0.9rem;
}

.liste tr.stillgelegt td {
  color: var(--gedaempft);
}

.liste td > form + form {
  margin-top: 0.35rem;
}

.liste details form {
  align-items: flex-end;
  margin-top: 0.35rem;
}

.liste details label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.9rem;
  color: var(--gedaempft);
}

.knopf {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  color: var(--flaeche);
  background: var(--betont);
  border-radius: 4px;
  text-decoration: none;
}

.hauptteil {
  display: flex;
  flex: 1;
  gap: 0.5rem;
  padding: 0.5rem;
  min-height: 0;
}

.bereiche {
  flex: 1;
  min-width: 0;
}

/* Die Tafeln der rechten Spalte tragen zusätzlich die Klasse „feld".
   Deshalb hier zwei Klassen im Selektor – sonst gewinnt .feld mit
   seinem display: flex und alle Register wären gleichzeitig sichtbar. */
.tafel:not(.aktiv) {
  display: none;
}

.tafel {
  height: 100%;
}

.tafel.aktiv {
  display: flex;
}

.bereiche > .tafel.aktiv {
  gap: 0.5rem;
}

/* ---------- Bereich „Bearbeiten": vier Spalten ---------- */

[data-spalten].tafel.aktiv {
  gap: 0;
}

[data-spalten] .spalte {
  flex: 1;
  min-width: 11rem;
}

.spaltentitel {
  color: var(--gedaempft);
  font-size: 0.8rem;
  white-space: nowrap;
  margin-right: 0.25rem;
}

.ziehleiste {
  flex: 0 0 7px;
  margin: 0 1px;
  border-radius: 3px;
  cursor: col-resize;
  background: transparent;
  touch-action: none;
}

.ziehleiste:hover,
body.zieht-spalte .ziehleiste {
  background: var(--betont-hell);
}

/* Während des Ziehens nichts markieren. */
body.zieht-spalte {
  user-select: none;
  cursor: col-resize;
}

[data-spalten] .baumkopf,
[data-spalten] .listenkopf {
  flex-wrap: wrap;
  gap: 0.2rem;
}

[data-spalten] .baumkopf input[type="search"],
[data-spalten] .listenkopf input[type="search"] {
  min-width: 3rem;
}

.spalte {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* ---------- Kategoriebaum ---------- */

.baumkopf {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding-bottom: 0.4rem;
}

.baumkopf input[type="search"] {
  flex: 1;
  min-width: 4rem;
}

.baumkopf button {
  padding: 0.3rem 0.5rem;
  line-height: 1;
}

.trefferanzeige {
  color: var(--gedaempft);
  font-size: 0.85rem;
  white-space: nowrap;
}

.bezeichnung.treffer {
  color: var(--schrift);
  background: var(--treffer);
  border-radius: 2px;
}

/* ---------- Favoriten ---------- */

.knoten.favorit > .zeile > .bezeichnung::after {
  content: " ★";
  color: var(--stern);
}

.zeile.markiert .bezeichnung::after {
  color: var(--treffer);
}

.baum.nur-favoriten .knoten:not(.favorit):not(.wegweiser) {
  display: none;
}

.baumkopf button.aktiv {
  color: var(--flaeche);
  background: var(--betont);
  border-color: var(--betont);
}

.bezeichnung.treffer.aktuell {
  outline: 2px solid var(--betont);
}

.baum {
  flex: 1;
  overflow: auto;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: 4px;
}

.baum ul {
  margin: 0;
  /* Deutlicher eingerückt als die 1,1rem von früher: Erst dadurch ist
     die Staffelung auf einen Blick zu sehen, und der Ast bekommt Platz,
     um sichtbar zu werden. */
  padding-left: 1.6rem;
  list-style: none;
}

/* Zweiglinien wie im Baum von Version 25.
   Ausgerichtet wird am Plus/Minus, nicht an der Einrückung: Der
   senkrechte Strich läuft durch die Mitte des übergeordneten Kästchens,
   der Ast reicht bis an das Kästchen des Kindes. Sonst hängt die Linie
   daneben in der Luft.

   Das Kästchen sitzt 0.95rem vom linken Rand seines Knotens
   (0.3rem Zeilenrand + halbe Klapperbreite 0.65rem), Kinder sind um
   1.1rem eingerückt – der Strich liegt also 0.15rem links vom Kind.
   Die oberste Ebene hat keinen übergeordneten Knoten und deshalb auch
   keine Linien. */
.baum {
  --zeilenmitte: 0.78rem;
  /* Die Linie wächst nach rechts – um die halbe Stärke nach links
     versetzt, damit sie mittig unter dem Plus/Minus bleibt. */
  --zweig: calc(-0.65rem - var(--linienstaerke) / 2);
  /* Der Ast läuft von der Senkrechten bis an das Plus/Minus des Kindes.
     Weiter geht nicht: Er liefe sonst über das Kästchen hinweg. */
  --astbreite: 0.95rem;
  /* An einer Stelle, damit Senkrechte, Ast und Ecke gleich stark
     bleiben. */
  --linienstaerke: 2px;
}

.baum ul > .knoten {
  position: relative;
}

.baum ul > .knoten::before,
.baum ul > .knoten::after {
  content: "";
  position: absolute;
  left: var(--zweig);
  border-color: var(--rahmen);
  border-style: solid;
  /* Erst alle Seiten aus, dann gezielt an: Ohne das behalten die
     ungenannten Seiten die Vorgabe `medium` – drei Pixel, die die
     Senkrechte unten überstehen ließen. */
  border-width: 0;
}

.baum ul > .knoten::before {
  top: 0;
  bottom: 0;
  border-left-width: var(--linienstaerke);
}

/* Beim letzten Kind wird aus Senkrechter und Ast eine einzige Ecke:
   ein Element mit linkem und unterem Rand. Aus zwei Elementen, die auf
   den Pixel genau aneinanderstoßen, ragte die Senkrechte sichtbar über
   den Ast hinaus – gemeldet am 8. August. */
.baum ul > .knoten:last-child::before {
  bottom: auto;
  height: var(--zeilenmitte);
  width: var(--astbreite);
  border-bottom-width: var(--linienstaerke);
}

.baum ul > .knoten:last-child::after {
  display: none;
}

.baum ul > .knoten::after {
  top: var(--zeilenmitte);
  width: var(--astbreite);
  border-top-width: var(--linienstaerke);
}

.knoten > ul {
  display: none;
}

.knoten.offen > ul {
  display: block;
}

.zeile {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.3rem;
  border-radius: 3px;
}

/* „zeile" heißt auch die Zeile eines Einstellungsformulars (weiter
   oben), und deren `margin-bottom: 0.5rem` erbte der Baum still mit.
   Das riss acht Pixel zwischen die Knoten und ließ die Zweiglinien
   gestrichelt erscheinen. Nur im Baum zurückgenommen – die Formulare
   brauchen den Abstand. */
.baum .zeile {
  margin-bottom: 0;
}

.zeile:hover {
  background: var(--betont-hell);
}

.zeile.markiert {
  color: var(--flaeche);
  background: var(--betont);
}

.zeile.markiert:hover {
  background: var(--betont-dunkel);
}

/* Ziel eines Ziehvorgangs */
.zeile.ziel {
  outline: 2px solid var(--betont);
  outline-offset: -2px;
  background: var(--betont-hell);
}

.klapper {
  width: 1.3rem;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  line-height: 1;
}

.klapper:disabled {
  visibility: hidden;
}

.umbenennen {
  padding: 0 0.2rem;
  font: inherit;
}

/* ---------- Dokumentliste ---------- */

.listenkopf {
  display: flex;
  /* Umbrechen, sobald Suchfeld, Schalter und Knopf nicht mehr
     nebeneinander passen. Ohne das stehen die letzten Bedienelemente
     über dem Rand der Spalte – und liegen dort unter der Nachbarspalte,
     die sie anklickbar überdeckt. */
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  padding-bottom: 0.4rem;
}

/* Zwei Schalter untereinander statt nebeneinander: „auch Wortteile"
   wirkt nur mit „Volltext", und die Breite fehlt an anderer Stelle. */
.schaltergruppe {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* „ganzer Katalog" darf in sich umbrechen, statt die ganze Zeile zu
   sprengen. */
.ankreuz.schmal.umbruch {
  white-space: normal;
  line-height: 1.15;
  max-width: 4.5rem;
}

.listenkopf input[type="search"] {
  /* Feste Breite statt Anteil am freien Platz: Sonst wurde das Feld
     schmaler, sobald die Anzahlanzeige daneben ihren Text bekam. */
  flex: 0 0 12rem;
}

.ankreuz.schmal {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  color: var(--gedaempft);
  font-size: 0.85rem;
}

/* „auch Wortteile" ist abgeschaltet, solange „Volltext" aus ist – er
   wirkt allein auf die Volltextsuche. */
.ankreuz.schmal:has(input:disabled) {
  color: var(--rahmen);
  cursor: default;
}

.anzahlanzeige {
  color: var(--gedaempft);
  font-size: 0.85rem;
  white-space: nowrap;
}

.liste {
  flex: 1;
  overflow: auto;
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: 4px;
}

/* Festes Layout: nur so hält sich die Tabelle an die Breiten, die am
   Spaltenkopf gezogen wurden. Spalten ohne Angabe teilen sich den
   Rest – „Bezeichnung" bekommt ihn damit von selbst. */
.liste table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.liste thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  padding: 0.4rem 0.6rem;
  color: var(--gedaempft);
  background: var(--gedaempfte-flaeche);
  border-bottom: 1px solid var(--rahmen);
  white-space: nowrap;
}

.liste th.sortierbar {
  cursor: pointer;
  user-select: none;
}

.liste th.sortierbar:hover {
  color: var(--betont);
}

.liste th.aktiv {
  color: var(--betont);
}

.liste th.aktiv::after {
  content: " " attr(data-pfeil);
}

.liste tbody td {
  padding: 0.3rem 0.6rem;
  border-bottom: 1px solid var(--hintergrund);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.liste tbody tr:hover td {
  background: var(--betont-hell);
}

.liste tbody tr.markiert td {
  color: var(--flaeche);
  background: var(--betont);
}

/* Spalten lassen sich am Kopf umordnen und in der Breite ziehen.
   Der Griff sitzt am rechten Rand des Kopfes. */
.liste thead th {
  position: relative;
}

.liste thead th.spaltenziel {
  outline: 2px solid var(--betont);
  outline-offset: -2px;
}

.spaltengriff {
  position: absolute;
  top: 0;
  right: 0;
  width: 7px;
  height: 100%;
  cursor: col-resize;
}

.spaltengriff:hover {
  background: var(--betont);
}

/* Ausgangsbreiten. „Bezeichnung" bleibt ohne Angabe und nimmt den
   übrigen Platz; wer zieht, überschreibt das je Spalte im Browser. */
/* Platz für Dateisymbol **und** Büroklammer. Gemessen: ein Zeichen
   braucht 51 px, beide zusammen 60 px – bei 2,4 rem wurde schon das
   Dateisymbol stillschweigend beschnitten. Das Innenmaß ist hier
   schmaler als sonst, die Zeichen stehen ohnehin mittig. */
.liste .spalte-symbol {
  width: 3.5rem;
  padding-inline: 0.3rem;
  text-align: center;
}

.liste .spalte-typ {
  width: 4.5rem;
}

.liste .spalte-datum,
.liste .spalte-importiert {
  width: 7.5rem;
}

.liste .spalte-status {
  width: 7rem;
}

/* ---------- Posteingang ---------- */

.ablageflaeche {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex: 0 0 8rem;
  min-height: 0;
  background: var(--flaeche);
  border: 2px dashed var(--rahmen);
  border-radius: 4px;
}

.ablageflaeche.bereit {
  background: var(--betont-hell);
  border-color: var(--betont);
}

.ablagetext {
  margin: 0;
  color: var(--gedaempft);
}

.importbericht {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  white-space: pre-wrap;
  background: var(--gedaempfte-flaeche);
  border: 1px solid var(--rahmen);
  border-radius: 4px;
  font-size: 0.9rem;
}

.importbericht.laeuft {
  color: var(--betont);
}

/* ---------- Dialoge ---------- */

.dialog {
  width: min(38rem, 92vw);
  padding: 1.25rem 1.5rem;
  color: var(--schrift);
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-top: 4px solid var(--betont);
  border-radius: 6px;
  box-shadow: 0 12px 34px var(--schatten);
}

/* Das Änderungsprotokoll braucht sechs Spalten nebeneinander. */
.dialog.breit {
  width: min(56rem, 95vw);
}

/* Die Rückfrage kommt mit einem Satz aus. */
.dialog.schmal {
  width: min(26rem, 92vw);
}

.protokolliste {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.protokolliste th {
  position: sticky;
  top: 0;
  padding: 0.2rem 0.4rem;
  text-align: left;
  color: var(--gedaempft);
  background: var(--gedaempfte-flaeche);
  border-bottom: 1px solid var(--rahmen);
}

.protokolliste td {
  padding: 0.2rem 0.4rem;
  border-bottom: 1px solid var(--rahmen);
  vertical-align: top;
  overflow-wrap: anywhere;
}

.protokolliste .gedaempft {
  color: var(--gedaempft);
}

.dialog::backdrop {
  background: rgba(20, 40, 70, 0.35);
}

.dialog h2 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}

.dialog > label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.75rem 0;
}

.dialogfuss {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

.dialogfuss button[type="button"] {
  color: var(--flaeche);
  background: var(--betont);
  border-color: var(--betont);
}

/* In den Dialogen schließt der Absende-Knopf nur – die Hauptwirkung
   steht als type="button" daneben. Ohne diese Regel sähe „Abbrechen"
   so wichtig aus wie „Speichern". */
.dialogfuss button[type="submit"] {
  color: var(--schrift);
  background: var(--flaeche);
  border-color: var(--rahmen);
}

/* Archivieren steht neben Speichern, ist aber nicht die Hauptwirkung. */
.dialogfuss button.zweitrangig {
  color: var(--schrift);
  background: var(--gedaempfte-flaeche);
  border-color: var(--rahmen);
}

.dialogfuss button[type="button"]:disabled {
  color: var(--gedaempft);
  background: var(--gedaempfte-flaeche);
  border-color: var(--rahmen);
  cursor: default;
}

/* Verknüpfungen. Der Verweis wird gezogen und soll deshalb nach etwas
   zum Anfassen aussehen – Rahmen und Greifzeiger. Was er bewirkt, steht
   darüber: Im Verweis selbst steht die Bezeichnung, weil daraus der
   Dateiname der Verknüpfung wird. */
.verknuepfungszeile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.7rem 0;
}

.verknuepfungsart {
  flex-basis: 100%;
  margin: 0;
  color: var(--gedaempft);
  font-size: 0.85rem;
}

.verknuepfungziehen {
  padding: 0.3rem 0.6rem;
  border: 1px dashed var(--rahmen);
  border-radius: 4px;
  background: var(--gedaempfte-flaeche);
  color: var(--schrift);
  text-decoration: none;
  cursor: grab;
}

.verknuepfungziehen::before {
  content: "🔗 ";
}

.verknuepfungziehen:hover {
  border-color: var(--betont);
}

.importvorschau {
  max-height: 16rem;
  overflow: auto;
  padding: 0.5rem;
  background: var(--gedaempfte-flaeche);
  border: 1px solid var(--rahmen);
  border-radius: 4px;
}

.importliste {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

.importliste .vorhanden {
  color: var(--gedaempft);
}

.randnotiz {
  margin-left: 0.5rem;
  padding: 0 0.3rem;
  font-size: 0.8rem;
  background: var(--treffer);
  border-radius: 2px;
}

/* ---------- Kontextmenü und Meldungen ---------- */

.kontextmenue {
  position: fixed;
  z-index: 50;
  display: flex;
  flex-direction: column;
  min-width: 14rem;
  padding: 0.25rem;
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: 4px;
  box-shadow: 0 8px 22px var(--schatten);
}

.kontextmenue button {
  border: none;
  border-radius: 3px;
  background: none;
  text-align: left;
  padding: 0.35rem 0.6rem;
}

.kontextmenue button:hover {
  color: var(--flaeche);
  background: var(--betont);
}

/* Verfeinert den Eintrag darüber. Gleiche Schrift und gleiche
   Hervorhebung wie jeder andere – nur eingerückt. Sonst sähe der
   Eintrag darüber wie eine Überschrift aus und niemand klickte ihn an. */
.kontextmenue button.eingerueckt {
  padding-left: 1.7rem;
}

.kontextmenue hr {
  margin: 0.25rem 0.4rem;
  border: none;
  border-top: 1px solid var(--rahmen);
}

/* Die Meldung sitzt rechts in der Reiterzeile. Eine eigene Zeile
   schöbe die ganze Arbeitsfläche nach unten, sobald etwas zu sagen ist.
   Sie bleibt einzeilig und trägt ihren vollen Text im Tooltip – so
   wächst die Zeile auch bei langen Meldungen nicht. */
.meldungsleiste {
  align-self: center;
  margin: 0 0 0.4rem auto;
  min-width: 0;
  padding: 0.15rem 0.6rem;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--warnung);
  background: var(--warnung-flaeche);
  border: 1px solid var(--warnung-rahmen);
  border-radius: 4px;
  cursor: pointer;
}

/* `hidden` allein genügt nicht, sobald eine Klasse display setzt. */
.meldungsleiste[hidden] {
  display: none;
}

.feld {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  color: var(--gedaempft);
  background: var(--flaeche);
  border: 1px dashed var(--rahmen);
  border-radius: 4px;
}

.rechte-spalte {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 24rem;
}

/* Höhenverhältnis 60 / 25 / 15. Kapitel 10.2 nennt 50 / 35 / 15; der
   Registerblock ist am 14. August zugunsten der Vorschau geschrumpft. */
.vorschaubereich {
  display: flex;
  flex-direction: column;
  flex: 60;
  min-height: 0;
}

.vorschaukopf {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding-bottom: 0.3rem;
  color: var(--gedaempft);
  font-size: 0.85rem;
}

.vorschaukopf button {
  padding: 0.15rem 0.4rem;
  line-height: 1;
}

.vorschau {
  display: flex;
  /* Beim Vorschaubild kommt eine Fußzeile darunter – deshalb Spalte. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: 4px;
}

/* Modus „erst auf Abruf": Der Knopf sitzt unter dem Vorschaubild.
   Kleiner als ein Dialogknopf – er ist ein Angebot, keine Hauptwirkung. */
.vorschauabruf {
  padding: 0.25rem 0.7rem;
  font-size: 0.8rem;
}

.pdfbetrachter {
  width: 100%;
  height: 100%;
  border: none;
}

.vorschaubild {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.vorschauhinweis {
  margin: 0;
  padding: 1rem;
  color: var(--gedaempft);
  text-align: center;
}

/* Vergrößert – legt sich über die Arbeitsfläche. */
body.vorschau-gross .vorschaubereich {
  position: fixed;
  inset: 3.5rem 1rem 1rem;
  z-index: 40;
  padding: 0.5rem;
  background: var(--hintergrund);
  border: 1px solid var(--rahmen);
  border-radius: 6px;
  box-shadow: 0 12px 34px var(--schatten);
}

body.vorschau-abgedockt .vorschau::after {
  content: "In einem eigenen Fenster geöffnet.";
  color: var(--gedaempft);
}

.angaben {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.75rem;
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  align-content: start;
  overflow: auto;
  width: 100%;
}

.angaben dt {
  color: var(--gedaempft);
  white-space: nowrap;
}

/* Beschriftung gedämpft, Wert fett – dasselbe Verhältnis tragen die
   übrigen Register: Spaltenköpfe und Marken gedämpft, Inhalte in der
   Schriftfarbe. */
.angaben dd {
  margin: 0;
  font-weight: 600;
  color: var(--schrift);
  overflow-wrap: anywhere;
}

/* ---------- Reiter „Pfade" (Anhang A.6) ---------- */

.tafel.aktiv[data-pfade] {
  display: block;
  overflow: auto;
  padding: 0.4rem 0.5rem;
}

/* Knoten und ✕ nebeneinander; der Knoten nimmt den Rest. */
.pfadzeile {
  display: flex;
  align-items: center;
}

.pfadloesen {
  flex: none;
  padding: 0 0.3rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--gedaempft);
  background: none;
  border: none;
  cursor: pointer;
  visibility: hidden;
}

/* Erst beim Überfahren sichtbar – sonst stünde in jeder Zeile ein
   Löschzeichen, das die Pfade schwerer lesbar macht. */
.pfadzeile:hover .pfadloesen {
  visibility: visible;
}

.pfadloesen:hover {
  color: var(--warnung);
  background: var(--warnung-flaeche);
  border-radius: 3px;
}

.pfadknoten {
  display: block;
  width: 100%;
  padding: 0.1rem 0;
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  color: var(--gedaempft);
  white-space: nowrap;
  background: none;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.pfadknoten:hover {
  background: var(--gedaempfte-flaeche);
  color: var(--schrift);
}

/* Wo das Dokument wirklich hängt – die Knoten davor sind nur der Weg. */
.pfadknoten.zugeordnet {
  color: var(--schrift);
  font-weight: 600;
}

.pfadhinweis {
  margin: 0;
  color: var(--gedaempft);
  font-size: 0.9rem;
}

/* ---------- Gültigkeit ---------- */

.gueltigkeitsmarke {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--kopf-schrift);
}

/* Gefüllte Plaketten statt farbiger Schrift: Auf dem dunkelblauen Grund
   der Kopfzeile wäre ein dunkles Rot fast unsichtbar, und Gelb als
   Schrift bliebe blass. Die Wörter bleiben trotzdem stehen – Farbe
   allein soll die Bedeutung nicht tragen. */
.fristzahl {
  padding: 0.1rem 0.45rem;
  font: inherit;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}

.fristzahl:hover {
  border-color: var(--kopf-schrift);
}

.fristzahl.abgelaufen {
  color: #ffffff;
  background: var(--frist-abgelaufen);
}

.fristzahl.bald {
  color: var(--schrift);
  background: var(--frist-bald);
}

/* In der Liste dieselbe Sprache, nur auf hellem Grund. */
.liste tr.frist-abgelaufen .spalte-gueltig {
  color: var(--warnung);
  font-weight: 600;
}

.liste tr.frist-bald .spalte-gueltig {
  color: var(--frist-bald-schrift);
  font-weight: 600;
}

/* ---------- Papierkorb ---------- */

.papierkorbliste {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 60rem;
}

.papierkorbzeile {
  padding: 0.6rem 0.8rem;
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: 4px;
}

.papierkorbangaben,
.papierkorbpfade,
.papierkorbtags {
  margin-top: 0.2rem;
  font-size: 0.9rem;
  color: var(--gedaempft);
}

.papierkorbknoepfe {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* ---------- Tags (Kapitel 15) ---------- */

.tafel.aktiv[data-tags] {
  display: block;
  overflow: auto;
  padding: 0.25rem;
}

/* Der Stift bleibt oben in der Ecke, die Tags beginnen am oberen Rand
   statt darunter: Sonst steht die erste Zeile des Registers leer. */
.tagbereich {
  position: relative;
}

.tagkopf {
  position: absolute;
  top: 0;
  right: 0;
}

.tagbereich > .tagliste {
  padding-right: 1.4rem;
}

.tagliste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.25rem 0;
}

.tagliste.umrandet {
  max-height: 8rem;
  overflow: auto;
  padding: 0.4rem;
  background: var(--gedaempfte-flaeche);
  border: 1px solid var(--rahmen);
  border-radius: 4px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.45rem;
  font-size: 0.85rem;
  background: var(--treffer);
  border: 1px solid var(--rahmen);
  border-radius: 999px;
}

.tag.leer {
  color: var(--gedaempft);
  background: none;
  border-style: dashed;
}

.tag.teilweise {
  background: none;
  border-style: dashed;
}

.tag.waehlbar {
  cursor: pointer;
}

.tag.waehlbar.schon-da {
  color: var(--gedaempft);
}

.tag-anmerkung {
  font-size: 0.75rem;
  color: var(--gedaempft);
}

.tag-weg {
  padding: 0 0.15rem;
  font-size: 0.75rem;
  line-height: 1;
  background: none;
  border: none;
}

/* Umbenennen im Dialog: das Feld tritt an die Stelle des Tags. */
.tag-umbenennen {
  width: 8rem;
  padding: 0;
  font: inherit;
  color: var(--schrift);
  background: var(--flaeche);
  border: none;
  outline: none;
}

/* Filter am Spaltenkopf „Typ". */
.typknopf {
  padding: 0 0.15rem;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--gedaempft);
  background: none;
  border: none;
}

.typknopf.aktiv {
  color: var(--betont-dunkel);
}

.typentafel {
  position: fixed;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  max-width: 16rem;
  padding: 0.4rem;
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: 4px;
  box-shadow: 0 8px 22px var(--schatten);
}

.typmarke {
  padding: 0.1rem 0.45rem;
  font-size: 0.8rem;
  color: var(--schrift);
  background: var(--gedaempfte-flaeche);
  border: 1px solid var(--rahmen);
  border-radius: 999px;
}

.typmarke.gewaehlt {
  color: var(--kopf-schrift);
  background: var(--betont);
  border-color: var(--betont-dunkel);
}

/* Anklickbare Tagliste unter dem Listenkopf. `hidden` allein genügt
   nicht: das display: flex von .tagliste schlägt die Regel des
   Browsers. */
.tagfilter {
  margin: 0 0 0.25rem;
}

.tagfilter[hidden] {
  display: none;
}

.tag.gewaehlt {
  color: var(--kopf-schrift);
  background: var(--betont);
  border-color: var(--betont-dunkel);
}

.tagfilter-knopf.aktiv {
  color: var(--betont-dunkel);
  font-weight: 600;
}

/* Zelle der Posteingangsliste, die gerade bearbeitet wird. */
.zellenfeld {
  width: 100%;
  padding: 0.1rem 0.2rem;
  font: inherit;
  color: var(--schrift);
  background: var(--flaeche);
  border: 1px solid var(--betont);
  border-radius: 2px;
}

/* Reiter „Versionen" und Dialog „Versionshistorie" zeigen dieselbe
   Tabelle. Der Reiter braucht drei Klassen im Selektor, damit er das
   display: flex von .tafel.aktiv schlägt, ohne die Regel für die
   nicht aktiven Tafeln auszuhebeln. */
.tafel.aktiv[data-versionen] {
  display: block;
  overflow: auto;
  padding: 0.25rem;
}

.versionsliste {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  color: var(--schrift);
}

/* Die Spaltenköpfe sehen aus wie die Beschriftungen im Reiter „Info" –
   gedämpft und nicht fett. Fett bleibt dem Inhalt vorbehalten. */
.versionsliste th {
  position: sticky;
  top: 0;
  padding: 0.25rem 0.4rem;
  text-align: left;
  font-weight: normal;
  color: var(--gedaempft);
  background: var(--flaeche);
  border-bottom: 1px solid var(--rahmen);
}

.versionsliste td {
  padding: 0.25rem 0.4rem;
  border-bottom: 1px solid var(--gedaempfte-flaeche);
  overflow-wrap: anywhere;
}

.versionsliste tr.aktuell {
  font-weight: 600;
}

.versionsliste .werkzeuge {
  white-space: nowrap;
  text-align: right;
}

.versionsliste .werkzeuge a {
  padding: 0 0.2rem;
  text-decoration: none;
}

/* ---------- Protokollansicht (Kapitel 23.2) ---------- */

.reiterleiste.innen {
  margin-top: 1rem;
  padding: 0;
  background: none;
}

.protokoll {
  display: none;
}

.protokoll.aktiv {
  display: block;
}

.protokollfilter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  padding: 0.75rem 0;
}

.protokollfilter label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.85rem;
  color: var(--gedaempft);
}

.protokollbereich {
  max-height: 60vh;
  overflow: auto;
}

.protokollliste {
  font-size: 0.85rem;
}

.protokollliste td {
  vertical-align: top;
  overflow-wrap: anywhere;
}

.protokollverlauf {
  margin: 0;
  padding: 0.5rem;
  max-height: 16rem;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 0.8rem;
  background: var(--gedaempfte-flaeche);
  border-radius: 4px;
}

/* ---------- Wartung (Kapitel 24.2) ---------- */

.wartungsliste {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1rem;
}

.wartung {
  padding: 0.75rem 1rem;
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: 4px;
}

.wartung h2 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.wartungstext {
  margin: 0 0 0.5rem;
  color: var(--gedaempft);
  font-size: 0.85rem;
}

.wartungsknoepfe {
  display: flex;
  gap: 0.5rem;
}

.wartungsbefund {
  margin-top: 0.5rem;
  max-height: 18rem;
  overflow: auto;
}

.wartungsbefund:empty {
  margin-top: 0;
}

.wartungszahl {
  margin: 0 0 0.35rem;
  font-weight: 600;
}

.wartungsergebnis {
  margin: 0.5rem 0 0;
  color: var(--erfolg, var(--schrift));
  font-size: 0.9rem;
}

.wartungsergebnis.fehlgeschlagen {
  color: var(--warnung);
}

/* ---------- Quelldateien (STATUS.md, Sprint 7 Schritt 3) ---------- */

.tafel.aktiv[data-quellen] {
  display: block;
  overflow: auto;
}

.quelle {
  margin-bottom: 0.6rem;
}

/* Der Dateiname steht einmal als Überschrift, davor das Aufklappzeichen
   wie im Kategoriebaum. Darunter je Stand eine Zeile – gleich gebaut,
   damit das Auge eine Spalte hinunterliest. */
.quellkopf {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.quellklapper {
  flex: 0 0 1.1rem;
  text-align: left;
}

.quellname {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--schrift);
  overflow-wrap: anywhere;
}

.quellstand {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.05rem 0 0.05rem 1.35rem;
  font-size: 0.9rem;
  color: var(--gedaempft);
}

/* Der geltende Stand hebt sich über seine Nummer ab – die älteren sind
   nur Vorgeschichte, und er steht ohnehin oben. */
.quellstand.geltend .quellmarke {
  color: var(--schrift);
}

.quellmarke {
  flex: 0 0 1.9rem;
  font-variant-numeric: tabular-nums;
}

.quellangaben {
  flex: 1;
  overflow-wrap: anywhere;
}

.quellstand .werkzeuge {
  white-space: nowrap;
}

.quellstand .werkzeuge a {
  padding: 0 0.2rem;
  text-decoration: none;
}

.werkzeugknopf {
  padding: 0 0.25rem;
  color: var(--gedaempft);
  background: none;
  border: none;
  cursor: pointer;
}

.werkzeugknopf:hover {
  color: var(--schrift);
}

/* Der Programmstand – klein und zurückhaltend, aber immer ablesbar. */
.kopfzeile .version {
  margin-left: 0.75rem;
  font-size: 0.75rem;
  color: var(--kopf-schrift);
  opacity: 0.65;
}

.karte .version {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  color: var(--gedaempft);
  text-align: center;
}

/* Das ✕ im Listenkopf wirft alle Suchkriterien weg – rot, weil es
   etwas zurücknimmt und nicht bloß ein weiteres Werkzeug ist. */
.werkzeugknopf[data-filter-leeren] {
  color: var(--warnung);
}

.werkzeugknopf[data-filter-leeren]:hover {
  color: var(--warnung);
  background: var(--warnung-flaeche);
  border-radius: 3px;
}

.quellealle {
  margin-left: 0.6rem;
  font-size: 0.8rem;
}

.quellablage {
  margin-top: 0.5rem;
  padding: 0.6rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--gedaempft);
  background: var(--flaeche);
  border: 2px dashed var(--rahmen);
  border-radius: 4px;
  cursor: pointer;
}

.quellablage.bereit {
  background: var(--betont-hell);
  border-color: var(--betont);
}

.historiebereich {
  max-height: 18rem;
  overflow: auto;
  padding: 0.25rem 0.5rem;
  background: var(--gedaempfte-flaeche);
  border: 1px solid var(--rahmen);
  border-radius: 4px;
}

.einzelheiten {
  display: flex;
  flex-direction: column;
  flex: 25;
  min-height: 0;
}

.einzelheiten .reiterleiste {
  padding: 0;
  background: none;
  border-bottom: none;
}

.einzelheiten .tafel {
  flex: 1;
  /* Die Tafeln tragen neben „tafel" auch „feld", und von dort kommt
     `align-items: center` – dieselbe Klassenkollision wie bei den
     Registern in Sprint 3. Zentriert heißt hier: Ist der Inhalt höher
     als die Tafel, ragt er oben heraus und wird abgeschnitten. */
  align-items: flex-start;
}

/* ---------- Warenkorb (Kapitel 19) ---------- */

.warenkorb {
  display: flex;
  flex-direction: column;
  flex: 15;
  min-height: 0;
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: 4px;
}

/* Ablageziel beim Ziehen aus der Dokumentliste. */
.warenkorb.bereit {
  background: var(--betont-hell);
  border-color: var(--betont);
}

.warenkorbkopf {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.4rem;
  border-bottom: 1px solid var(--rahmen);
}

.warenkorbliste {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.warenkorbzeile {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.15rem 0.4rem;
  font-size: 0.85rem;
  cursor: default;
}

.warenkorbzeile:hover {
  background: var(--gedaempfte-flaeche);
}

.warenkorbzeile.markiert {
  color: var(--flaeche);
  background: var(--betont);
}

.warenkorbzeile.markiert .warenkorbpfad {
  color: var(--betont-hell);
}

.warenkorbtext {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.warenkorbpfad {
  font-size: 0.75rem;
  color: var(--gedaempft);
  overflow-wrap: anywhere;
}