/* =====================================================================
   DMS Infinity Labs — Oberflaeche
   Farbwelt: Archivkarton, Bleistiftgrau, Eisengallustinte, Stempelrot.
   Uebernommen aus dms-prototyp.html, erweitert um die Bauteile, die die
   Anwendung zusaetzlich braucht: Tabellen, Formulare, Karten, Meldungen.

   Die Schriften liegen lokal unter /assets/fonts/. Die Content-Security-
   Policy erlaubt nur eigene Quellen, Google Fonts scheidet damit aus.
   ===================================================================== */

/* ---------- Schriften ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-600.woff2') format('woff2');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/assets/fonts/public-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/assets/fonts/public-sans-600.woff2') format('woff2');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/ibm-plex-mono-600.woff2') format('woff2');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Token ---------- */
:root {
  --papier:      #E5E7E1;   /* Seitenhintergrund, gedaempft, blendfrei */
  --karton:      #F1F2EE;   /* Karten und Panels */
  --karton-tief: #DCDFD8;   /* eingelassene Flaechen */
  --linie:       #C9CDC3;   /* Trennlinien */
  --linie-fein:  #D6D9D1;
  --tinte:       #1C2A2B;   /* Haupttext */
  --tinte-2:     #5A6663;   /* Sekundaertext */
  --tinte-3:     #838D89;   /* Hinweise */
  --akte:        #34465E;   /* Primaeraktion, Aktendeckelblau */
  --akte-tief:   #2A3A50;
  --markierung:  #34465E24; /* Aktendeckelblau, stark aufgehellt: Suchtreffer */
  --stempel:     #A24736;   /* Signaturfarbe: Eingangsstempel und Fehler */
  --moos:        #47664C;   /* Zustand: fertig */
  --ocker:       #8A6318;   /* Zustand: wartet */

  --r: 3px;                 /* Radius: fast eckig, wie beschnittenes Papier */
  --einstellungen-breite: 1420px; /* Rechte Kante der Einstellungsseite */
  --schrift-display: 'Archivo', system-ui, sans-serif;
  --schrift-text: 'Public Sans', system-ui, sans-serif;
  --schrift-daten: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

/* Das hidden-Attribut muss staerker sein als jede display-Regel dieses
   Blatts. Ohne das Ausrufezeichen wuerde etwa .nachladen{display:flex}
   ein hidden-Element trotzdem anzeigen. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--schrift-display); letter-spacing: -.02em; }

/* Der Sprungverweis ist nur sichtbar, solange er den Fokus hat */
.ueberspringen {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  padding: 10px 16px;
  background: var(--akte);
  color: #F1F2EE;
  text-decoration: none;
}
.ueberspringen:focus { left: 0; }

/* Sichtbar fuer Vorleser, unsichtbar auf dem Bildschirm */
.nur-vorleser {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Grundraster ---------- */
.rahmen {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
}
/* Seiten mit Dokumentenliste bekommen eine dritte Spalte -- aber erst,
   wenn wirklich etwas ausgewaehlt ist. Vorher hat die Liste die ganze
   Breite; eine Spalte, die nur sagt, dass nichts ausgewaehlt ist,
   verschenkt ein Viertel des Fensters. */
.rahmen-dreispaltig.zeigt-vorschau { grid-template-columns: 240px minmax(0, 1fr) 390px; }

/* ---------- Seitenleiste ---------- */
.leiste {
  background: var(--karton);
  border-right: 1px solid var(--linie);
  padding: 22px 0 18px;
  display: flex;
  flex-direction: column;
}

/* Der Schalter des Klappmenüs. Er sitzt im Rasterfluss und darf ihn
   nicht verändern -- deshalb aus dem Fluss genommen statt display:none:
   ein display:none-Kästchen ist mit der Tastatur nicht erreichbar, und
   das Menü wäre ohne Maus zu. */
.menue-schalter {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Sichtbar wird der Fokus am Knopf, nicht am Kästchen -- das steht am
   Seitenanfang und wäre dort ein Rahmen um nichts. */
.menue-schalter:focus-visible ~ .leiste .menue-knopf {
  outline: 2px solid var(--akte);
  outline-offset: 2px;
}

/* Bei breitem Fenster gibt es kein Klappen: die Navigation steht, der
   Knopf ist weg, und die Hülle verschwindet aus dem Layout, damit die
   Abstände der Leiste unverändert gelten. */
.menue-knopf { display: none; }
.leiste-inhalt { display: contents; }

.marke {
  padding: 0 22px 20px;
  border-bottom: 1px solid var(--linie-fein);
  margin-bottom: 16px;
}
.marke b {
  display: block;
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.02em;
}
.marke span {
  display: block;
  font-family: var(--schrift-daten);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-3);
  margin-top: 3px;
}

.nav-gruppe { padding: 0 12px; margin-bottom: 18px; }
.nav-titel {
  font-family: var(--schrift-daten);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--tinte-3);
  padding: 0 10px;
  margin: 0 0 6px;
}
.nav-punkt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  background: none;
  text-align: left;
  text-decoration: none;
  border-radius: var(--r);
  color: var(--tinte-2);
  transition: background .12s ease, color .12s ease;
}
.nav-punkt:hover { background: var(--karton-tief); color: var(--tinte); }
.nav-punkt[aria-current="page"] {
  background: var(--karton-tief);
  color: var(--tinte);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--akte);
}
.nav-punkt:hover svg { opacity: 1; }
.nav-punkt svg { transition: opacity .12s ease, transform .12s ease; }
.nav-punkt:hover svg { transform: translateX(1px); }
.nav-punkt .zahl {
  margin-left: auto;
  font-family: var(--schrift-daten);
  font-size: 11px;
  color: var(--tinte-3);
}
.nav-punkt svg { width: 15px; height: 15px; flex: none; opacity: .75; }

/* Verarbeitungsanzeige */
.lauf {
  margin-top: auto;
  padding: 14px 22px 0;
  border-top: 1px solid var(--linie-fein);
}
.lauf-kopf {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--schrift-daten);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinte-3);
  margin: 0 0 9px;
}
.puls {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--moos);
  animation: puls 2.4s ease-in-out infinite;
}
@keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.lauf-zeile {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--tinte-2);
  margin: 0;
  padding: 2px 0;
}
.lauf-zeile span:last-child { font-family: var(--schrift-daten); color: var(--tinte); }
.lauf-fehler span:last-child { color: var(--stempel); font-weight: 600; }

/* Konto am Fuss der Leiste */
.konto {
  padding: 14px 22px 0;
  margin-top: 14px;
  border-top: 1px solid var(--linie-fein);
}
.konto-name { margin: 0; font-size: 13px; font-weight: 600; }
.konto-rolle {
  margin: 0 0 8px;
  font-family: var(--schrift-daten);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte-3);
}

/* ---------- Hauptspalte ---------- */
.haupt { min-width: 0; display: flex; flex-direction: column; }

.suchleiste {
  padding: 20px 30px 16px;
  border-bottom: 1px solid var(--linie);
  background: linear-gradient(var(--karton), var(--papier));
}
.suchfeld { position: relative; max-width: 640px; margin: 0; }
.suchfeld svg {
  position: absolute;
  left: 13px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--tinte-3);
  pointer-events: none;
}
.suchfeld input[type="search"] {
  width: 100%;
  padding: 11px 13px 11px 38px;
  font-family: var(--schrift-text);
  font-size: 15px;
  color: var(--tinte);
  background: var(--karton);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.suchfeld input::placeholder { color: var(--tinte-3); }
.suchfeld input:focus {
  border-color: var(--akte);
  box-shadow: 0 0 0 3px rgba(52, 70, 94, .14);
}

/* Die Trefferflaeche unter dem Suchfeld. Sie geht auf jeder Seite auf,
   damit eine Suche nicht den Ordner kostet, in dem gerade gearbeitet
   wird.

   Absolut gesetzt und damit ausserhalb des Flusses: das Formular behaelt
   die Hoehe des Eingabefeldes. Sonst rutschte die Lupe, die mit top: 50%
   in der Mitte des Formulars sitzt, in die Mitte der aufgeklappten
   Flaeche.

   Breiter als das Feld, weil in einer Trefferzeile Titel, Fundstelle,
   Ablageort und Zustand nebeneinander Platz brauchen. */
.such-klappe {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: min(880px, calc(100vw - 90px));
  max-height: min(62vh, 620px);
  overflow-y: auto;
  padding: 10px;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  box-shadow: 0 14px 32px rgba(26, 32, 30, .16);
  animation: einblenden .14s ease both;
}
.such-klappe[hidden] { display: none; }
.such-klappe .liste { gap: 8px; }
.such-klappe .leer { margin: 6px 4px; }

.such-kopf {
  margin: 2px 4px 10px;
  font-family: var(--schrift-daten);
  font-size: 11px;
  color: var(--tinte-3);
}

/* Die mit den Pfeiltasten gewaehlte Zeile. Eigene Klasse statt
   aria-selected: das setzt die Vorschauspalte fuer die angeklickte
   Aktenzeile, und beides an derselben Stelle kaeme sich in die Quere. */
.akte.such-aktiv {
  border-color: var(--akte);
  background: var(--karton-tief);
  box-shadow: inset 3px 0 0 var(--akte);
}

.such-mehr {
  display: block;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--linie-fein);
  font-size: 13px;
  color: var(--akte);
  text-align: center;
  text-decoration: none;
}
.such-mehr:hover { text-decoration: underline; }

/* ---------- Filterleiste ---------- */
.filterleiste {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  padding: 14px 30px 0;
}
.chip {
  padding: 4px 11px;
  font-family: var(--schrift-daten);
  font-size: 11px;
  letter-spacing: .03em;
  background: var(--karton);
  border: 1px solid var(--linie);
  border-radius: 20px;
  color: var(--tinte-2);
  text-decoration: none;
  transition: border-color .12s ease, color .12s ease,
              background .12s ease, transform .12s ease;
}
.chip:hover {
  border-color: var(--tinte-3);
  color: var(--tinte);
  transform: translateY(-1px);
}
.chip:active { transform: translateY(0); }
.chip[aria-pressed="true"] {
  background: var(--akte);
  border-color: var(--akte);
  color: #F1F2EE;
}

/* ---------- Abschnittskopf ---------- */
.abschnitt {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 22px 30px 12px;
}
.abschnitt h1 { margin: 0; font-size: 22px; font-weight: 600; }
.abschnitt .anzahl { font-family: var(--schrift-daten); font-size: 12px; color: var(--tinte-3); }
.abschnitt .rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.sortierung { display: flex; gap: 6px; align-items: center; margin: 0; }

/* Umschalter der Darstellung: zwei Knoepfe, aneinandergesetzt, damit
   erkennbar ist, dass sie zusammengehoeren und einander ausschliessen */
.ansichtswahl { display: flex; margin-right: 6px; }
.ansichtswahl .knopf { border-radius: 0; margin-left: -1px; }
/* first-of-type statt first-child: der Umschalter ist ein Formular, und
   vor den Knoepfen stehen die verborgenen Felder fuer Token und Filter.
   Das erste Kind ist damit kein Knopf mehr, das erste button aber schon. */
.ansichtswahl .knopf:first-of-type { border-radius: var(--r) 0 0 var(--r); margin-left: 0; }
.ansichtswahl .knopf:last-of-type { border-radius: 0 var(--r) var(--r) 0; }
/* Der aktive Knopf liegt oben, sonst verdeckt der Nachbar seinen Rand */
.ansichtswahl .knopf-an { position: relative; z-index: 1; }

/* ---------- Knoepfe und Eingabefelder ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--linie);
  background: var(--karton);
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: var(--tinte);
  transition: border-color .12s ease, background .12s ease,
              transform .1s ease, box-shadow .14s ease;
}
.knopf:hover { border-color: var(--tinte-3); box-shadow: 0 1px 0 var(--linie); }
/* Der Knopf gibt beim Druecken nach. Ein Pixel genuegt -- es soll sich
   anfassbar anfuehlen, nicht huepfen. */
.knopf:active { transform: translateY(1px); box-shadow: none; }
.knopf-voll { background: var(--akte); border-color: var(--akte); color: #F1F2EE; }
.knopf-voll:hover {
  background: var(--akte-tief);
  border-color: var(--akte-tief);
  box-shadow: 0 2px 0 rgba(28, 42, 43, .16);
}
.knopf-warnung { color: var(--stempel); border-color: var(--stempel); background: var(--karton); }
.knopf-warnung:hover { background: var(--stempel); color: #F1F2EE; }

/* Schalter, deren Farbe sagt, was der Klick bewirkt.
   Gruen schaltet ein, gedaempft schaltet ab. */
.knopf-an {
  color: var(--moos);
  border-color: var(--moos);
  background: var(--karton);
  font-weight: 600;
}
.knopf-an:hover { background: var(--moos); color: var(--karton); border-color: var(--moos); }
.knopf-aus { color: var(--tinte-3); border-color: var(--linie); background: var(--karton); }
.knopf-aus:hover { color: var(--tinte); border-color: var(--tinte-3); }
.knopf-klein { padding: 4px 9px; font-size: 12px; }
.knopf-breit { width: 100%; text-align: center; justify-content: center; }

/* Verweis, der in einem neuen Tab aufgeht */
.extern-zeichen {
  width: 12px;
  height: 12px;
  flex: none;
  opacity: .6;
  transition: transform .14s ease, opacity .14s ease;
}
.knopf-extern:hover .extern-zeichen { opacity: 1; transform: translate(1px, -1px); }

input[type="text"],
input[type="password"],
input[type="search"],
select {
  font-family: var(--schrift-text);
  font-size: 14px;
  color: var(--tinte);
  background: var(--karton);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  padding: 7px 10px;
  outline: none;
}
input[type="text"]:focus,
input[type="password"]:focus,
select:focus {
  border-color: var(--akte);
  box-shadow: 0 0 0 3px rgba(52, 70, 94, .14);
}

/* ---------- Meldungen ---------- */
.meldung {
  margin: 16px 30px 0;
  padding: 11px 14px;
  border-radius: var(--r);
  border-left: 3px solid var(--akte);
  background: var(--karton);
  font-size: 14px;
  animation: meldungHerein .34s cubic-bezier(.2, .7, .3, 1) backwards;
}
@keyframes meldungHerein {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.meldung-erfolg  { border-left-color: var(--moos); }
.meldung-hinweis { border-left-color: var(--ocker); }
.meldung-fehler  { border-left-color: var(--stempel); color: var(--stempel); }

/* ---------- Ablageliste ---------- */
.liste {
  padding: 0 30px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- Mehrfachauswahl ---------- */

/* Die Hülle trägt das Kästchen; die Zeile darin bleibt, was sie war.
   Ohne die Hülle ginge es nicht: die Zeile ist ein <a>, und ein
   Kästchen darin wäre ungültiges HTML. */
.akte-huelle { position: relative; display: flex; }
.akte-huelle > .akte { flex: 1; min-width: 0; }
/* In der Kachelansicht ist die Hülle das Rasterfeld und muss die volle
   Höhe füllen, damit alle Kacheln gleich hoch bleiben. */
.kachel-huelle { height: 100%; }
.kachel-huelle > .akte.kachel { height: 100%; }

/* Das eigentliche Kästchen ist unsichtbar -- gezeichnet wird das Label.
   So lässt sich der Zustand über :checked gestalten, ganz ohne Skript,
   und die Trefferfläche ist größer als ein Systemkästchen. */
.akte-haken {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
  pointer-events: none;
}
.akte-haken-feld {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  border: 1.5px solid var(--linie);
  border-radius: 4px;
  background: var(--papier);
  cursor: pointer;
  /* Über der Zeile, sonst fängt der Verweis den Klick ab */
  z-index: 2;
  /* Zurückhaltend, solange nichts ausgewählt ist: die Liste soll
     aussehen wie vorher, bis man die Auswahl braucht. */
  opacity: 0;
  transition: opacity .14s ease, border-color .14s ease, background .14s ease;
}
/* Sichtbar beim Überfahren der Zeile, bei Tastaturfokus und dauerhaft,
   sobald etwas ausgewählt ist. */
.akte-huelle:hover > .akte-haken-feld,
.akte-haken:focus-visible + .akte-haken-feld,
.akte-haken:checked + .akte-haken-feld { opacity: 1; }
.akte-haken:checked + .akte-haken-feld {
  background: var(--akte);
  border-color: var(--akte);
}
/* Der Haken selbst: zwei Striche, gedreht. */
.akte-haken:checked + .akte-haken-feld::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border-right: 2px solid var(--papier);
  border-bottom: 2px solid var(--papier);
  transform: rotate(45deg);
}
.akte-haken:focus-visible + .akte-haken-feld { outline: 2px solid var(--akte); outline-offset: 2px; }

/* Platz für das Kästchen. Er entsteht dauerhaft und nicht erst bei
   Auswahl -- sonst ruckte die ganze Liste beim ersten Überfahren. */
.akte-huelle > .akte { padding-left: 38px; }
.kachel-huelle > .akte.kachel { padding-left: 12px; }
/* In der Kachel sitzt das Kästchen oben links über dem Blatt, wie in
   jeder Bildverwaltung. */
.kachel-huelle > .akte-haken-feld { top: 12px; left: 12px; transform: none; }

/* Die ausgewählte Zeile hebt sich ab, damit die Auswahl auch ohne Blick
   auf die Kästchen erkennbar bleibt. */
.akte-haken:checked ~ .akte {
  border-color: var(--akte);
  background: var(--karton-tief);
}

/* Das Band mit den Aktionen. Es klebt oben, damit es beim Scrollen
   durch eine lange Liste erreichbar bleibt. */
.stapelband {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 30px 12px;
  padding: 10px 14px;
  background: var(--karton-tief);
  border: 1px solid var(--linie);
  border-radius: var(--r);
}
/* Solange nichts ausgewählt ist, steht das Band trotzdem da -- nur seine
   Aktionen sind stumm. Es ein- und auszublenden ließ die ganze Liste bei
   jedem Haken um seine Höhe springen, und das beim Auswählen, also
   gerade dann, wenn man genau zielt. Zurückgenommen am 2026-08-19.

   Kein `disabled` an den Bedienelementen: das Skript setzt die Klasse,
   und ohne Skript gibt es sie nicht -- dann muss das Band vollständig
   bedienbar sein. Über CSS bleibt beides richtig. */
.stapelband-aus .knopf,
.stapelband-aus select {
  opacity: .4;
  pointer-events: none;
}
/* Das Kästchen "alle" bleibt bedienbar: es ist der Weg aus dem leeren
   Zustand heraus und wäre stumm ein Widerspruch in sich. */
.stapelband-aus .sb-alle { opacity: 1; pointer-events: auto; }

.sb-zahl {
  margin: 0 6px 0 0;
  font-family: var(--schrift-daten);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinte-2);
  white-space: nowrap;
}
.stapelband select { max-width: 220px; }

/* "Alle im Ordner" -- das Kästchen am Kopf der Auswahl. Es steht vor der
   Zahl, weil es zu ihr gehört: erst wählen, dann sehen, wie viele. */
.sb-alle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 4px;
  padding: 4px 8px 4px 6px;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--karton);
  font-size: 12.5px;
  color: var(--tinte-2);
  white-space: nowrap;
  cursor: pointer;
}
.sb-alle:hover { border-color: var(--tinte-3); color: var(--tinte); }
.sb-alle input { width: 15px; height: 15px; accent-color: var(--akte); cursor: pointer; }
/* Angekreuzt ist es eine Aussage über den ganzen Ordner und darf danach
   aussehen -- sonst steht die weitreichendste Angabe am blassesten da. */
.sb-alle:has(input:checked) {
  border-color: var(--akte);
  color: var(--tinte);
  font-weight: 600;
}

/* ---------- Schlagworte ---------- */

/* Marken unter der Kurzbeschreibung. Jede ist ein Verweis in die Suche;
   der Rahmen macht die Grenze des Begriffs sichtbar, denn zwei
   nebeneinanderstehende Woerter waeren sonst eines. */
.schlagworte { margin: 0 0 4px; }
.sw-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}
.sw-marke {
  display: inline-flex;
  align-items: center;
  background: var(--karton);
  border: 1px solid var(--linie);
  border-radius: 20px;
  overflow: hidden;
}
.sw-wort {
  padding: 3px 10px;
  font-size: 12.5px;
  color: var(--tinte-2);
  text-decoration: none;
  white-space: nowrap;
}
.sw-marke:hover { border-color: var(--tinte-3); }
.sw-wort:hover { color: var(--tinte); }

/* Von Hand gesetzt: eine Angabe, keine Vermutung. Der Strich am Rand
   ist dasselbe Zeichen, das die Kurzbeschreibung als maschinell
   ausweist -- nur andersherum gelesen. */
.sw-hand {
  border-color: var(--akte);
  background: var(--karton-tief);
}
.sw-hand .sw-wort { color: var(--tinte); font-weight: 600; }

/* Das Kreuz zum Entfernen. Es sitzt in der Marke und traegt keinen
   eigenen Rahmen -- zwei Rahmen ineinander sehen nach zwei Knoepfen
   aus. */
.sw-weg {
  border: 0;
  border-left: 1px solid var(--linie);
  background: transparent;
  padding: 3px 8px;
  font-size: 13px;
  line-height: 1;
  color: var(--tinte-3);
  cursor: pointer;
}
.sw-weg:hover { background: var(--stempel); color: #F1F2EE; }
.sw-hand .sw-weg { border-left-color: var(--akte); }

.sw-neu { display: flex; gap: 6px; align-items: center; margin: 0; }
.sw-neu input { font-size: 13px; padding: 5px 8px; max-width: 220px; }

/* In der Vorschau ist der Platz knapp: kleiner gesetzt und ohne die
   Knoepfe, die es dort ohnehin nicht gibt. */
.sw-vorschau { margin: 10px 0 0; }
.sw-vorschau .sw-wort { font-size: 11.5px; padding: 2px 8px; }

/* Die Wolke auf der Schlagwortseite. Keine Tabelle: ein Schlagwort ist
   ein Wort und keine Zeile, und 126 davon untereinander waeren zwei
   Bildschirmhoehen. Nebeneinander sind sie auf einen Blick zu
   ueberschauen. */
.sw-wolke {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 30px 18px;
}
.sw-gross { text-decoration: none; }
.sw-gross .sw-wort { font-size: 13.5px; padding: 5px 4px 5px 11px; }

/* Die Zahl gehoert zum Wort und steht deshalb in derselben Marke, nur
   abgesetzt: sie sagt, wie schwer das Wort im Bestand wiegt. */
.sw-zahl {
  font-family: var(--schrift-daten);
  font-size: 10.5px;
  color: var(--tinte-3);
  padding: 5px 10px 5px 6px;
}
.sw-gross:hover .sw-zahl { color: var(--tinte-2); }

/* Das gerade geoeffnete Wort. Es bleibt in der Wolke stehen, damit man
   sieht, wo man ist -- die Liste darunter allein sagt es nicht. */
.sw-offen {
  background: var(--akte);
  border-color: var(--akte);
}
.sw-offen .sw-wort, .sw-offen .sw-zahl { color: #F1F2EE; }

/* ---------- Absenderliste ---------- */

/* Untereinander und nicht als Wolke wie die Schlagworte: Absender sind
   Namen. "Landkreis Diepholz -- Ordnungsamt" ist dreimal so lang wie
   "Rechnung", und nebeneinander ergaebe das Marken in sieben
   verschiedenen Breiten. In einer Spalte laesst sich auch mit hundert
   Eintraegen noch etwas finden. */
.ab-liste {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 30px 18px;
}
.ab-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--karton);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--tinte);
  transition: border-color .12s ease, background .12s ease;
}
.ab-zeile:hover { border-color: var(--tinte-3); background: var(--karton-tief); }
.ab-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Die Zahl am rechten Rand, in Schreibmaschinenschrift wie jede andere
   Zahl im Projekt -- so stehen sie untereinander auf einer Kante. */
.ab-zahl {
  flex: none;
  font-family: var(--schrift-daten);
  font-size: 12px;
  color: var(--tinte-3);
  min-width: 2.5em;
  text-align: right;
}
.ab-hand {
  flex: none;
  font-family: var(--schrift-daten);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinte-3);
}
.ab-offen {
  background: var(--akte);
  border-color: var(--akte);
}
.ab-offen .ab-name, .ab-offen .ab-zahl, .ab-offen .ab-hand { color: #F1F2EE; }

/* Der Ort in der Zeile: er sagt bei zwei gleichnamigen Absendern, welcher
   gemeint ist, und bleibt sonst im Hintergrund. Er weicht als Erstes,
   wenn der Name den Platz braucht. */
.ab-ort {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 12px;
  color: var(--tinte-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ab-offen .ab-ort { color: #F1F2EE; }

/* Die Anschrift steht untereinander wie auf einem Briefumschlag --
   deshalb ein Block aus Zeilen und keine Aufzaehlung mit Kommas. */
.ab-anschrift {
  display: block;
  margin-top: 6px;
}
.ab-zeile-klein {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tinte-2);
}
/* Steht immer zusammen mit .karte, die Rahmen und Polsterung mitbringt
   -- hier steht nur, dass Anschrift und Erreichbarkeit nebeneinander
   liegen. Eine eigene Polsterung waere tot: .karte kommt in dieser
   Datei spaeter und wiegt gleich schwer. */
.ab-karte {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 48px;
}

/* Neun Felder, zugeklappt. Aufgeklappt schoeben sie in der Pruefmaske
   alles Uebrige unter den Bildschirmrand -- und der haeufige Handgriff
   ist der am Namen, nicht der an der Strasse.

   <details> und kein JavaScript: die Anwendung funktioniert ohne, und
   der Browser kann das von sich aus. */
.ab-mehr {
  margin: 8px 0 12px;
  border-top: 1px solid var(--linie);
  padding-top: 8px;
}
.ab-mehr > summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--tinte-2);
  padding: 3px 0;
}
.ab-mehr > summary:hover { color: var(--tinte); }
.ab-mehr[open] > summary { margin-bottom: 6px; }


/* Umbenennen und Loeschen des Wortes im ganzen Bestand */
.sw-pflege {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px;
  justify-content: space-between;
}
.sw-pflege .formular { margin: 0; }
.sw-pflege input[type="text"] { font-size: 13px; padding: 5px 8px; width: 200px; }
/* Der erste Block darf wachsen, der Knopf zum Entfernen bleibt rechts.
   Ohne die Begrenzung schob der erklaerende Satz ihn in eine eigene
   Zeile -- bei der Absenderseite ist er laenger als bei den
   Schlagworten und fuellte die ganze Breite. */
.sw-pflege > .formular:first-child { flex: 1 1 340px; max-width: 46em; }
.sw-pflege .sicher { margin: 6px 0 0; }

/* ---------- Kontextmenü ---------- */

/* Wird vom Skript gebaut und am Zeiger platziert. Ohne Skript gibt es
   das Menü des Browsers, und jeder Handgriff daraus ist über die
   Detailansicht und das Auswahlband erreichbar. */
.kontextmenue {
  position: fixed;
  z-index: 200;
  min-width: 200px;
  max-width: 320px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 5px;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
  animation: einblenden .12s ease;
}
.km-kopf {
  margin: 2px 0 4px;
  padding: 4px 10px;
  font-family: var(--schrift-daten);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinte-3);
}
.km-eintrag {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 4px;
  background: none;
  text-align: left;
  font-size: 13px;
  color: var(--tinte);
  cursor: pointer;
  /* Lange Ordnernamen brechen nicht um, sie werden gekürzt -- ein
     Menüeintrag über drei Zeilen zerreißt die Liste. */
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}
.km-eintrag:hover,
.km-eintrag:focus-visible { background: var(--karton-tief); outline: none; }
/* Was eine zweite Ebene öffnet, bekommt einen Pfeil -- so ist vorher
   erkennbar, dass noch eine Wahl folgt. */
.km-mehr::after { content: " ›"; color: var(--tinte-3); }
.km-zurueck { color: var(--tinte-3); }
/* Dieselbe Farbe wie der Löschknopf: Rot heißt in dieser Oberfläche
   überall dasselbe. */
.km-warnung { color: var(--stempel); }
.km-warnung:hover { background: var(--stempel); color: var(--karton); }
.km-trenner {
  display: block;
  height: 1px;
  margin: 5px 8px;
  background: var(--linie-fein);
}

/* ---------- Ordnerbaum neben der Liste ---------- */

.mit-ordnern {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: start;
}
.ordner-inhalt { min-width: 0; }

.ordner {
  padding: 14px 8px 14px 22px;
  border-right: 1px solid var(--linie-fein);
  /* Der Baum bleibt stehen, waehrend die Liste laeuft. Ohne das muesste
     man zum Wechseln des Ordners erst wieder nach oben scrollen. */
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
}

.ordner-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 6px 8px;
  font-family: var(--schrift-daten);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinte-3);
}
/* Schalter des Ordnerbaums -- wie der des Hauptmenüs aus dem Fluss
   genommen, damit er das Raster nicht verschiebt und trotzdem mit der
   Tastatur erreichbar bleibt. */
.ordner-schalter {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ordner-schalter:focus-visible ~ .ordner .ordner-klapp {
  outline: 2px solid var(--akte);
  outline-offset: 2px;
}

/* Bei breitem Fenster steht der Baum in seiner Spalte und klappt nie zu.
   Die Kopfzeile ist dann wieder nur eine Überschrift. */
.ordner-klapp { cursor: default; }
.ordner-pfeil, .ordner-hier { display: none; }

.ordner-neu {
  width: 20px;
  height: 20px;
  padding: 0;
  line-height: 1;
  font-size: 15px;
  color: var(--tinte-3);
  background: none;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  cursor: pointer;
}
.ordner-neu:hover { color: var(--tinte); border-color: var(--tinte-3); }

.ordner-punkt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r);
  color: var(--tinte-2);
  font-size: 13.5px;
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.ordner-punkt svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .75; }
.ordner-punkt:hover { background: var(--karton-tief); color: var(--tinte); }
.ordner-offen { background: var(--karton-tief); color: var(--tinte); font-weight: 500; }

.ordner-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ordner-zahl {
  font-family: var(--schrift-daten);
  font-size: 10px;
  color: var(--tinte-3);
}

/* Einrueckung je Ebene. Als Klasse und nicht als style-Attribut: die
   Content-Security-Policy verbietet Inline-Stile. */
.ebene-0 { padding-left: 8px; }
.ebene-1 { padding-left: 22px; }
.ebene-2 { padding-left: 36px; }
.ebene-3 { padding-left: 50px; }
.ebene-4 { padding-left: 64px; }
.ebene-5 { padding-left: 78px; }
.ebene-6 { padding-left: 92px; }
.ebene-7 { padding-left: 106px; }
.ebene-8 { padding-left: 120px; }

.ordner-leer {
  margin: 8px 8px 0;
  font-size: 12.5px;
  color: var(--tinte-3);
}

.ordner-formular {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 8px 0;
  padding-top: 10px;
  border-top: 1px solid var(--linie-fein);
}
.ordner-formular input { font-size: 13px; padding: 5px 8px; }
/* Zugeklappt, solange das Skript da ist -- der Knopf oben klappt es auf */
.ordner-formular[hidden] { display: none; }

/* Ein Ordner, ueber dem gerade ein Dokument oder ein Ordner haengt */
.ordner-punkt.ziel {
  background: var(--karton);
  box-shadow: inset 0 0 0 1px var(--akte);
  color: var(--tinte);
}

/* Wegmarke ueber der Ueberschrift */
.wegmarke {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  padding: 14px 30px 0;
  font-family: var(--schrift-daten);
  font-size: 11px;
  color: var(--tinte-3);
}
.wegmarke a { color: var(--tinte-3); text-decoration: none; }
.wegmarke a:hover { color: var(--tinte); text-decoration: underline; }
.wegmarke-trenner { opacity: .5; }
.wegmarke-hier { color: var(--tinte); }

.ordner-aktionen { display: flex; gap: 6px; align-items: center; margin: 0; }
.ordner-aktionen input[type="text"] { font-size: 13px; padding: 5px 8px; width: 190px; }
/* Das Zielfeld schmaler als das Namensfeld: darin steht ein Ordnername,
   kein Satz, und die Einrueckung braucht keine Breite */
.ordner-aktionen select { font-size: 13px; padding: 5px 8px; max-width: 190px; }

/* Ein Dokument oder ein Ordner, der gerade gezogen wird */
.akte.zieht,
.ordner-punkt.zieht { opacity: .45; }

/* Die Zeile, ueber der ein anderes Dokument haengt. Anderes Bild als beim
   Ordner: dort wird einsortiert, hier wird verknuepft -- die gestrichelte
   Kante sagt "kommt dazu", nicht "wandert hinein" */
.akte.vorgang-ziel {
  border-color: var(--akte);
  border-style: dashed;
  background: var(--karton-tief);
}

/* Dieselbe Zeile, aber es haengt eine Datei aus dem Dateimanager darueber.

   Die Zeile selbst nimmt nichts an -- sie tritt nur aus der Abdunklung
   der Zieh-Huelle heraus, damit zu sehen ist, wozu der Streifen darin
   gehoert. Ohne das staende er ueber einer grauen Flaeche und man
   wuesste nicht, welches Dokument gemeint ist. */
.akte.vorgang-ziel-datei {
  z-index: 41;
  border-color: var(--akte);
  background: var(--karton);
}

/* Der Streifen, auf dem eine Datei zum Vorgang gelegt wird.

   Die einzige Stelle, an der verknuepft wird. Ueberall sonst -- auch auf
   dem Rest der Zeile -- ist es ein gewoehnlicher Upload. Vorher nahm die
   ganze Zeile an, und weil Zeilen und Kacheln fast das ganze Fenster
   fuellen, war der gewoehnliche Upload der schwierigere Fall geworden.

   Am unteren Rand der Zeile und absolut gesetzt: das Raster der Zeile
   bleibt damit unberuehrt, und in der Kachelansicht sitzt er an
   derselben Stelle. */
.vorgang-streifen {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  font-family: var(--schrift-daten);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--akte);
  background: var(--karton);
  border-top: 1px dashed var(--akte);
  border-bottom-left-radius: var(--r);
  border-bottom-right-radius: var(--r);
  animation: einblenden .12s ease both;
}

/* Der Zeiger steht wirklich darauf */
.vorgang-streifen.bereit {
  color: var(--karton);
  background: var(--akte);
  border-top-style: solid;
}

/* Waehrend die Datei zum Server geht */
.akte.vorgang-laedt { opacity: .6; }

/* Kurzes Aufleuchten nach dem Verknuepfen. Statt eines Fensters: das
   Ziehen ist eine Geste, die man mehrmals hintereinander macht */
.akte.vorgang-verbunden { animation: verbunden 1.1s ease-out both; }
@keyframes verbunden {
  0%   { box-shadow: inset 0 0 0 2px var(--akte); }
  100% { box-shadow: inset 0 0 0 2px transparent; }
}

/* Der Vorgang in Detailansicht und Vorschau */
.vorgang-block { margin-top: 22px; }
.vorgang-name {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--tinte);
}
.vorgang-liste { margin: 0 0 14px; padding-left: 18px; font-size: 13.5px; }
.vorgang-liste li { margin-bottom: 4px; }
.vorgang-liste .wert-mono { margin-left: 6px; font-size: 11px; color: var(--tinte-3); }
.vorgang-liste .vorgang-hier { color: var(--tinte-2); }

/* Die Kurzbeschreibung unter dem Titel, wie im Prototyp: abgesetzter
   Grund, Linie in Aktenfarbe an der linken Kante. */
.zusammenfassung {
  /* Begrenzt, obwohl der Platz da wäre: über die ganze Fensterbreite
     gezogen wird ein Fließtext mühsam zu lesen, weil das Auge die
     nächste Zeile nicht findet. */
  max-width: 90ch;
  margin: 0 0 18px;
  padding: 12px 14px;
  background: var(--karton-tief);
  border-left: 2px solid var(--akte);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--tinte-2);
}
.zf-text { margin: 0; }
/* Herkunft und Knopf in einer Zeile darunter */
.zf-fuss { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; }
/* Woher sie stammt, steht klein darunter. Sie sieht sonst aus wie eine
   Angabe des Absenders, und das wäre eine Behauptung. */
.zf-quelle {
  font-family: var(--schrift-daten);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinte-3);
  white-space: nowrap;
}
.zf-weg { margin: 0; }
/* In der Vorschau ist die Spalte schmal und der Platz knapp */
.zf-vorschau { max-width: none; margin: 10px 0 0; font-size: 12.5px; }
/* In der Detailspalte ebenso: die Breitenbegrenzung greift dort nicht
   mehr, dafür darf die Schrift eine Spur kleiner sein. */
.detail-daten .zusammenfassung { max-width: none; font-size: 12.5px; }
/* Der Titelblock steht ganz oben in der Spalte und braucht keinen
   Abstand nach oben -- seine Überschrift setzt ihn selbst. Was danach
   kommt, schon. */
.detail-daten > .titelblock { margin-top: 0; }
.titelblock + .untertitel { margin-top: 20px; }

/* Der vorgeschlagene Titel. Abgesetzt, damit er nicht mit dem
   tatsächlichen Titel darunter verwechselt wird -- er ist ein Angebot,
   keine Angabe. */
/* Wie das Dokument heißt -- am Kopf der Spalte, immer. Die große
   Überschrift oben scrollt beim Lesen weg. */
.tb-titel {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tinte);
  overflow-wrap: anywhere;
}
/* Der Vorschlag sitzt darunter und eingerückt: er gehört zum Titel,
   ist aber noch keiner. */
.titelvorschlag { margin-top: 12px; }
/* Kleines Etikett statt einer eigenen Überschrift -- die Überschrift
   "Titel" steht schon darüber, und zwei Ebenen für vier Wörter wären
   zu viel. */
.tv-marke {
  margin: 0 0 4px;
  font-family: var(--schrift-daten);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--moos);
}
.tv-text {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-left: 2px solid var(--moos);
  background: var(--karton);
  font-size: 14px;
  font-weight: 500;
  color: var(--tinte);
  overflow-wrap: anywhere;
}
/* Die beiden Knöpfe sind je ein eigenes Formular -- ohne JavaScript
   geht es nicht anders, wenn beide etwas anderes tun sollen. Nebeneinander
   sehen sie trotzdem wie ein Paar aus. */
.tv-knoepfe { display: flex; gap: 8px; align-items: flex-start; }
.tv-knoepfe .formular { margin: 0; }

/* Vorschläge "Gehört vermutlich dazu". Eine Zeile je Vorschlag, Datum
   links, Titel in der Mitte, der Grund rechts -- so steht es im
   Prototyp, und so bleibt die Liste auf einen Blick lesbar. */
.verwandt { margin-top: 22px; }
/* Zwei Ebenen statt einer Reihe: oben Datum und Titel, darunter der
   Grund und der Knopf. Der Prototyp hatte alles nebeneinander, dort aber
   auch keinen Knopf -- in der 374 Pixel schmalen Spalte der
   Detailansicht blieb vom Titel sonst "2022 Anlgevermo…" übrig, und
   damit ist ein Vorschlag nicht zu beurteilen. */
.v-zeile {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "datum titel"
    "grund knopf";
  gap: 3px 10px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--linie-fein);
  font-size: 13px;
}
.v-zeile time {
  grid-area: datum;
  font-family: var(--schrift-daten);
  font-size: 11px;
  color: var(--tinte-3);
}
/* Der Titel nimmt den Rest der oberen Zeile und wird erst gekürzt, wenn
   er auch dann nicht passt. min-width: 0 ist nötig, weil eine
   Rasterspalte sonst nicht unter ihre Inhaltsbreite schrumpft und die
   Zeile aus dem Rahmen schöbe. */
.v-zeile a {
  grid-area: titel;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--akte);
  text-decoration: none;
}
.v-zeile a:hover { text-decoration: underline; }
.v-grund {
  grid-area: grund;
  font-family: var(--schrift-daten);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--moos);
  white-space: nowrap;
}
/* Ein weicher Treffer steht in Grau statt in Moos. Er ist kein Fehler,
   aber auch keine Zusage -- und das soll man sehen, ohne die Zahl zu
   lesen. */
.v-grund.weich { color: var(--tinte-3); }
.v-annehmen { grid-area: knopf; justify-self: end; margin: 0; }

.vorschau-vorgang { margin: 6px 0 0; font-size: 12.5px; }
.vorschau-vorgang a { color: var(--akte); text-decoration: none; }
.vorschau-vorgang a:hover { text-decoration: underline; }

@media (max-width: 1180px) {
  /* Nebeneinander wird es zu eng. Der Baum wandert ueber die Liste und
     scrollt mit, statt stehen zu bleiben. */
  .mit-ordnern { grid-template-columns: minmax(0, 1fr); }
  .ordner {
    position: static;
    max-height: none;
    padding: 12px 22px;
    border-right: 0;
    border-bottom: 1px solid var(--linie-fein);
  }
}

/* ---------- Kachelansicht ---------- */

/* Sechs je Zeile, wie besprochen. Unter 1500 Pixel waeren sechs Kacheln
   schmaler als der Titel, den sie tragen -- darum weiter unten weniger.
   auto-fill statt fester Zahl kam nicht in Frage: dann bestimmt die
   Fenstergroesse die Anzahl, und sechs waeren nur ein Zufall. */
/* Neun Spalten statt sechs: die Kachel wird damit um ein Drittel
   schmaler, so gewuenscht am 2026-08-20. Die Zahl der Spalten ist der
   einzige Hebel -- die Kachel hat keine eigene Breite, sie fuellt ihr
   Rasterfeld. Anderthalbmal so viele Spalten heisst zwei Drittel
   Breite. Die Innenabstaende ziehen mit, sonst waere die Kachel nicht
   kleiner, sondern nur voller. */
.kacheln {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 10px;
}

/* Beide Klassen im Selektor: .akte steht weiter unten im Stylesheet und
   gewinnt sonst mit seinem Zeilenraster. Die Kachel traegt .akte
   absichtlich mit, damit Vorschau, Doppelklick und Nachladen sie ohne
   Sonderfall erkennen. */
.akte.kachel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px;
  align-items: stretch;
}

/* Angedeutetes Blatt als Deckel, im Verhaeltnis 4:3. Ein Briefbogen
   waere hochkant richtiger, kostet in der Kachel aber die Hoehe, die
   die Angaben darunter brauchen. */
.kachel-blatt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  aspect-ratio: 4 / 3;
  padding: 10px 9px;
  background: #FBFBF8;
  border: 1px solid var(--linie);
  box-shadow: 2px 3px 0 rgba(28, 42, 43, .06);
  transition: transform .16s ease, box-shadow .16s ease;
  overflow: hidden;
}
/* Liegt ein echtes Bild vor, füllt es den Deckel. Der Innenabstand
   fällt weg -- ein Briefkopf mit Rand sähe aus wie ein Bild in einem
   Bild. */
.kachel-blatt.hat-bild { padding: 0; overflow: hidden; }
.kachel-bild {
  width: 100%;
  height: 100%;
  /* Oben ausgerichtet und beschnitten: der Briefkopf steht auf der
     ersten Seite oben, und genau der soll zu sehen sein. Ein
     eingepasstes Bild ließe die halbe Kachel leer. */
  object-fit: cover;
  object-position: top center;
  display: block;
}

.kachel:hover .kachel-blatt {
  transform: translateY(-2px);
  box-shadow: 3px 5px 0 rgba(28, 42, 43, .1);
}

/* Eingangsstempel, wie in der Zeile -- nur kleiner und ohne das Wort,
   fuer das hier kein Platz ist */
.kachel-stempel {
  position: absolute;
  top: 7px; right: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  border: 1px solid var(--stempel);
  color: var(--stempel);
  font-family: var(--schrift-daten);
  padding: 2px 4px;
  transform: rotate(-5deg);
  opacity: .78;
}
/* Zieht mit der kleineren Kachel mit. Nicht ganz um ein Drittel: unter
   acht Pixeln ist ein Datum nicht mehr zu lesen, und ein Stempel, den
   man nicht entziffern kann, ist nur noch ein Fleck auf der Vorschau. */
.kachel-stempel .tag { font-size: 8px; letter-spacing: .02em; }
.kachel-stempel .jahr { font-size: 6.5px; letter-spacing: .1em; }

/* Endung unten links auf dem Blatt */
.kachel-az {
  position: absolute;
  left: 7px; bottom: 6px;
  font-family: var(--schrift-daten);
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--tinte-3);
  background: var(--karton-tief);
  border: 1px solid var(--linie-fein);
  border-radius: 2px;
  padding: 1px 5px;
}

.kachel-titel {
  font-size: 12px;
  line-height: 1.35;
  color: var(--tinte);
  /* Zwei Zeilen, dann Auslassungspunkte: sonst haetten die Kacheln
     einer Zeile verschiedene Hoehen. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Der Absender unter dem Titel der Kachel. Eine Zeile, dann
   Auslassungspunkte: die Kacheln einer Reihe sollen gleich hoch
   bleiben, und dafuer darf keine Angabe umbrechen. Fehlt der Absender,
   fehlt auch das Element -- der Abstand kommt vom Raster der Kachel. */
.kachel-absender {
  display: block;
  font-size: 11.5px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--tinte-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Angaben unter dem Titel. Sie brechen um, statt abgeschnitten zu
   werden -- in einer schmalen Kachel passt sonst nur die Groesse. */
.kachel-angaben {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 5px;
  font-family: var(--schrift-daten);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--tinte-3);
}
.kachel-angaben .trenner { opacity: .5; }

.kachel-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid var(--linie-fein);
}
.kachel-seiten {
  font-family: var(--schrift-daten);
  font-size: 10px;
  color: var(--tinte-3);
  white-space: nowrap;
}

/* Ausgewaehlt: derselbe Strich wie an der Zeile, hier am ganzen Rand */
.akte.kachel[aria-selected="true"] { border-color: var(--akte); }

@media (max-width: 1499px) { .kacheln { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .kacheln { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.akte {
  position: relative;
  display: grid;
  /* Vier Spalten: Stempel, Miniatur, Text, Zustand. Die Miniatur steht
     immer da, auch wenn es noch kein Vorschaubild gibt -- sonst
     sprängen die Titel benachbarter Zeilen um ihre Breite gegeneinander
     und die Liste wirkte ausgefranst. */
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 14px 18px;
  background: var(--karton);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  text-align: left;
  width: 100%;
  text-decoration: none;
  overflow: hidden;
  /* Ein Doppelklick oeffnet das Dokument. Ohne das wuerde er dabei den
     Titel markieren, und die Zeile blitzte jedes Mal blau auf. */
  user-select: none;
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
/* Der Streifen am linken Rand faehrt beim Ueberfahren heraus. Er sitzt
   auf einem Pseudoelement, damit er die Zeile nicht verschiebt. */
.akte::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--akte);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .18s ease;
}
.akte:hover {
  border-color: var(--tinte-3);
  transform: translateX(2px);
  box-shadow: -2px 2px 0 var(--linie);
}
.akte:hover::before { transform: scaleY(1); }
.akte:active { transform: translateX(2px) scale(.995); }
.akte-treffer { grid-template-columns: minmax(0, 1fr) auto; }

/* Nachgeladene Zeilen blenden gestaffelt ein. Die Verzoegerung kommt
   ueber Klassen statt ueber style-Attribute: die Content-Security-Policy
   laesst keine Inline-Stile zu. */
.akte-neu { animation: einblenden .32s cubic-bezier(.2, .7, .3, 1) both; }
.verz-0 { animation-delay: 0s; }
.verz-1 { animation-delay: .04s; }
.verz-2 { animation-delay: .08s; }
.verz-3 { animation-delay: .12s; }
.verz-4 { animation-delay: .16s; }
.verz-5 { animation-delay: .20s; }
.verz-6 { animation-delay: .24s; }
.verz-7 { animation-delay: .28s; }
.verz-8 { animation-delay: .32s; }
.verz-9 { animation-delay: .36s; }

@keyframes einblenden {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Signaturelement: der Eingangsstempel */
.stempel {
  flex: none;
  width: 78px; height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--stempel);
  border-radius: 2px;
  color: var(--stempel);
  font-family: var(--schrift-daten);
  transform: rotate(-3.5deg);
  opacity: .82;
  position: relative;
  /* backwards statt both: mit both bliebe der Endzustand der Animation
     als Deklaration stehen und wuerde jede spaetere transform-Regel
     ueberstimmen -- der Stempel reagierte dann nicht mehr auf :hover. */
  animation: stempeln .5s cubic-bezier(.2, .8, .3, 1) backwards;
}
.stempel::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--stempel);
  border-radius: 1px;
  opacity: .5;
}
.stempel .wort { font-size: 8px; letter-spacing: .14em; font-weight: 600; line-height: 1; }
.stempel .tag  { font-size: 13px; font-weight: 600; line-height: 1.25; margin-top: 2px; }
.stempel .jahr { font-size: 8px; letter-spacing: .1em; line-height: 1; }
/* Beim Ueberfahren richtet sich der Stempel ein Stueck auf und wird
   kraeftiger -- als haette gerade jemand nachgedrueckt */
.akte:hover .stempel {
  opacity: 1;
  transform: rotate(-2deg) scale(1.02);
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), opacity .18s ease;
}
@keyframes stempeln {
  from { transform: rotate(-3.5deg) scale(1.5); opacity: 0; }
  to   { transform: rotate(-3.5deg) scale(1); opacity: .82; }
}

/* Die Miniatur der ersten Seite, neben dem Eingangsstempel. Hochkant im
   Verhaeltnis 3:4 und genau so hoch wie der Stempel -- zwei
   verschieden hohe Bloecke nebeneinander liessen die Zeile unruhig
   wirken. Gerade, nicht gedreht: das Schraege gehoert dem Stempel, und
   zweimal schraeg waere Zierat. */
.akte-blatt {
  width: 42px; height: 56px;
  background: #FBFBF8;
  border: 1px solid var(--linie);
  box-shadow: 1px 2px 0 rgba(28, 42, 43, .06);
  overflow: hidden;
  display: block;
}
.akte-bild {
  width: 100%;
  height: 100%;
  /* Wie in der Kachel: oben ausgerichtet und beschnitten. Der Briefkopf
     steht auf der ersten Seite oben, und genau der soll zu sehen sein. */
  object-fit: cover;
  object-position: top center;
  display: block;
}

.akte-text { min-width: 0; display: block; }
.akte-titel {
  display: block;
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.akte-zeile {
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--tinte-2);
}
.akte-zeile .az {
  font-family: var(--schrift-daten);
  font-size: 11.5px;
  background: var(--karton-tief);
  padding: 1px 6px;
  border-radius: 2px;
  color: var(--tinte-2);
}
/* Der Absender in der Aktenzeile. Etwas kräftiger als der Rest der
   Zeile: er ist die Angabe, nach der man eine Liste absucht, und stünde
   er in derselben Farbe wie Größe und Quelle, ginge er darin unter.
   Er wird abgeschnitten statt umgebrochen -- ein umbrechender Absender
   schöbe die halbe Zeile in eine zweite. */
.akte-absender {
  font-weight: 600;
  color: var(--tinte-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 26ch;
}

.trenner { color: var(--linie); }

/* Der Ablageort in der Trefferliste. Schreibmaschinenschrift wie jede
   andere Pfadangabe im Projekt -- er ist eine Ortsangabe, kein Fliesstext */
.akte-ort {
  font-family: var(--schrift-daten);
  font-size: 11.5px;
  color: var(--tinte-3);
}

/* Der Ordner unter dem Dokumenttitel im Protokoll */
.protokoll-ort {
  display: block;
  font-family: var(--schrift-daten);
  font-size: 11px;
  color: var(--tinte-3);
}

/* Einschraenkung der Suche auf einen Ordner. Steht ueber der
   Ueberschrift wie die Filterleiste der Liste, und sitzt in derselben
   Flucht wie diese */
.suchbereich {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 14px 30px 0;
  font-size: 13px;
  color: var(--tinte-2);
}
.suchbereich select { font-size: 13px; padding: 5px 8px; max-width: 260px; }
/* Meldet, dass eine Anfrage unterwegs ist. Zurueckhaltend: bei einer
   Antwort in wenigen Hundertstel waere alles andere ein Flackern */
.suche-laeuft {
  font-family: var(--schrift-daten);
  font-size: 11px;
  color: var(--tinte-3);
}
.suche-laeuft[hidden] { display: none; }

/* Das gesuchte Wort in Titel und Fundstelle.

   Kein gelber Balken: der Eingangsstempel ist das einzige kraeftige
   Farbsignal der Oberflaeche, und ein zweites daneben nimmt ihm die
   Wirkung. Die Hervorhebung traegt dieselbe Farbe wie die Akte, liegt
   auf einem blassen Grund und bleibt damit im Ton der Seite. */
mark {
  background: var(--markierung);
  color: inherit;
  font-weight: 600;
  border-radius: 2px;
  padding: 0 1px;
}
/* In der Fundstelle steht Fliesstext; dort genuegt weniger Gewicht */
.fundstelle mark { font-weight: 500; }

.fundstelle {
  display: block;
  font-size: 13px;
  color: var(--tinte-2);
  margin-bottom: 5px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.akte-rechts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: none;
}

.zustand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--schrift-daten);
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.zustand::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.z-fertig  { color: var(--moos); }
.z-wartend { color: var(--ocker); }
.z-lauf    { color: var(--akte); }
.z-fehler  { color: var(--stempel); }
/* Weder erfuellt noch fehlend: von hier aus nicht feststellbar */
.z-unbekannt { color: var(--tinte-3); }
.z-unbekannt::before { background: none; box-shadow: inset 0 0 0 1px currentColor; }

.seiten { font-family: var(--schrift-daten); font-size: 11px; color: var(--tinte-3); }

.leer {
  margin: 6px 30px 24px;
  padding: 22px;
  border: 1px dashed var(--linie);
  border-radius: var(--r);
  color: var(--tinte-3);
  font-size: 14px;
}
/* Erklaerender Vorspann, kein leerer Zustand: durchgezogener Rand.
   Die Breite steht als Elementregel da, weil das spaetere .leer im
   Breitschirmblock sonst gewinnt -- gleiche Spezifitaet, hoehere Zeile. */
p.leer-schlicht {
  border-style: solid;
  border-color: var(--linie-fein);
  color: var(--tinte-2);
  /* Abzueglich der beiden Raender: die Karten darunter stecken im
     Raster und geben ihren Rand innen ab, der Vorspann steht frei. */
  max-width: calc(var(--einstellungen-breite) - 60px);
}

/* Eine Seite, eine rechte Kante. Vorspann, Formular und Typtabellen
   enden alle hier; ohne das lief der Vorspann bis zum Fensterrand,
   waehrend die Karte darunter deutlich frueher aufhoerte. Der
   Breitschirmblock setzt den Wert spaeter auf die Zweispaltenbreite. */
.einstellungen-raster { max-width: var(--einstellungen-breite); }

/* Schalter in Formularen. Er steht in derselben Spalte wie ein
   Eingabefeld, damit die Zeilen untereinander fluchten -- die
   Beschriftung liegt links wie ueberall sonst. */
.schalter {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--karton);
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.schalter:hover { border-color: var(--tinte-3); }
.schalter input { width: 16px; height: 16px; accent-color: var(--moos); flex: none; }
/* Eingeschaltet faerbt sich der ganze Schalter, damit der Zustand auch
   aus dem Augenwinkel erkennbar ist */
.schalter:has(input:checked) {
  border-color: var(--moos);
  background: rgba(71, 102, 76, .08);
  color: var(--moos);
  font-weight: 600;
}

/* ---------- Blaettern ---------- */
.blaettern {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 30px 24px;
}
.blaettern-stand { font-family: var(--schrift-daten); font-size: 12px; color: var(--tinte-3); }

/* ---------- Nachladen beim Scrollen ---------- */
.nachladen {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 4px 30px 26px;
  font-family: var(--schrift-daten);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte-3);
  /* Gedaempft, solange nichts laeuft: der Platz bleibt reserviert, aber
     der Blick wird nicht gezogen */
  opacity: .55;
  transition: opacity .2s ease;
}
.nachladen.aktiv { opacity: 1; }

/* Der Balken laeuft, waehrend geladen wird. Er sitzt auf einer festen
   Spur, damit die Zeile beim Anlaufen nicht springt. */
.nachladen-balken {
  position: relative;
  flex: none;
  width: 92px;
  height: 2px;
  background: var(--karton-tief);
  border-radius: 2px;
  overflow: hidden;
}
.nachladen-balken::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: var(--akte);
  border-radius: 2px;
  transform: translateX(-100%);
}
.nachladen.aktiv .nachladen-balken::after {
  animation: laufbalken 1.1s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes laufbalken {
  from { transform: translateX(-100%); }
  to   { transform: translateX(250%); }
}

.nachladen-ende {
  margin: 0;
  padding: 4px 30px 26px;
  font-family: var(--schrift-daten);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte-3);
  animation: einblenden .3s ease both;
}
.nachladen-ende::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-right: 9px;
  vertical-align: middle;
  background: var(--linie);
}

/* ---------- Ablageflaeche fuer Uploads ---------- */
.ablage {
  margin: 0 30px 26px;
  padding: 20px;
  border: 1.5px dashed var(--linie);
  border-radius: var(--r);
  text-align: center;
  color: var(--tinte-3);
  font-size: 13.5px;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ablage strong { color: var(--tinte-2); font-weight: 600; }
.ablage:hover { border-color: var(--tinte-3); }
/* Waehrend etwas ueber dem Fenster haengt, tritt auch die Flaeche selbst
   hervor -- sie scheint durch die Huelle hindurch */
body.zieht .ablage {
  border-color: var(--akte);
  background: rgba(52, 70, 94, .05);
  color: var(--akte);
}
/* Waehrend der Uebertragung atmet die Flaeche leicht, damit erkennbar
   bleibt, dass noch etwas laeuft */
.ablage.sendet { border-color: var(--akte); animation: atmen 1.6s ease-in-out infinite; }
@keyframes atmen {
  0%, 100% { background: transparent; }
  50%      { background: rgba(52, 70, 94, .06); }
}
.ablage-text { margin: 0 0 12px; }
.ablage-knoepfe { margin: 0; display: flex; gap: 8px; justify-content: center; }
.ablage-bericht { margin: 12px 0 0; font-size: 13px; color: var(--tinte-2); }
.ablage-bericht .fehlgeschlagen { color: var(--stempel); display: block; }

/* ---------- Fortschritt der Uebertragung ---------- */
/* Sitzt fest am unteren Rand, nicht an der Ablageflaeche: abgelegt werden
   darf ueberall im Fenster, also muss die Rueckmeldung ueberall zu sehen
   sein -- auch wenn gerade weit unten gescrollt wird. */
.uploadstand {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 45;
  width: 330px;
  max-width: calc(100vw - 44px);
  padding: 14px 16px 16px;
  background: var(--karton);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  box-shadow: -3px 5px 0 rgba(28, 42, 43, .13);
  animation: standHerein .22s cubic-bezier(.2, .8, .3, 1) backwards;
}
@keyframes standHerein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.uploadstand-kopf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 9px;
}
.uploadstand-titel {
  font-size: 13.5px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uploadstand-zahl {
  margin-left: auto;
  flex: none;
  font-family: var(--schrift-daten);
  font-size: 11px;
  color: var(--tinte-3);
  white-space: nowrap;
}

/* <progress> laesst sich nur ueber diese Pseudoelemente gestalten, und
   jeder Browser will seine eigenen. appearance:none schaltet die
   Vorgabe des Systems ab. */
.uploadstand-balken {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 3px;
  background: var(--karton-tief);
  color: var(--akte);
  overflow: hidden;
}
.uploadstand-balken::-webkit-progress-bar {
  background: var(--karton-tief);
  border-radius: 3px;
}
.uploadstand-balken::-webkit-progress-value {
  background: var(--akte);
  border-radius: 3px;
  transition: width .15s ease;
}
.uploadstand-balken::-moz-progress-bar {
  background: var(--akte);
  border-radius: 3px;
}
/* Ohne value zeigt progress einen unbestimmten Lauf. Firefox stellt ihn
   von sich aus dar, WebKit braucht dafuer eine eigene Bewegung. */
.uploadstand-balken:not([value]) {
  background: linear-gradient(
    90deg,
    var(--karton-tief) 0%, var(--karton-tief) 35%,
    var(--akte) 50%,
    var(--karton-tief) 65%, var(--karton-tief) 100%
  );
  background-size: 250% 100%;
  animation: standLauf 1.2s linear infinite;
}
@keyframes standLauf {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

/* ---------- Dialog ---------- */
/* Eigener Dialog statt window.alert und window.confirm: die Meldungen des
   Browsers lassen sich nicht gestalten und sehen auf jedem System anders
   aus. <dialog> bringt Fokusfang, Escape und Abdunklung mit. */
.dialog {
  max-width: 460px;
  width: calc(100vw - 40px);
  padding: 26px 28px 22px;
  background: var(--karton);
  color: var(--tinte);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  box-shadow: -4px 6px 0 rgba(28, 42, 43, .16);
}
.dialog::backdrop {
  background: rgba(28, 42, 43, .42);
}
.dialog[open] { animation: dialogHerein .2s cubic-bezier(.2, .8, .3, 1) backwards; }
@keyframes dialogHerein {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dialog-titel {
  margin: 0 0 10px;
  font-family: var(--schrift-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.015em;
}
.dialog-text { margin: 0; font-size: 14px; color: var(--tinte-2); }

.dialog-liste {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
}
.dialog-liste li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 5px 0;
  border-top: 1px solid var(--linie-fein);
  font-size: 13px;
  overflow-wrap: anywhere;
}
/* Das Zeichen steckt im Pseudoelement, damit es nicht mitkopiert wird,
   wenn jemand die Liste markiert */
.dialog-liste li::before {
  flex: none;
  font-family: var(--schrift-daten);
  font-size: 12px;
}
.dialog-gut::before     { content: "✓"; color: var(--moos); }
.dialog-schlecht::before { content: "✕"; color: var(--stempel); }
.dialog-schlecht { color: var(--stempel); }

.dialog-fuss {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--linie-fein);
}

/* ---------- Huelle waehrend des Ziehens ---------- */
/* Liegt ueber dem ganzen Fenster, sobald jemand Dateien hereinzieht.
   Abgelegt werden darf ueberall, also muss auch ueberall zu sehen sein,
   dass das Fenster bereit ist. */
.zieh-huelle {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  /* Nur ein Schleier, kein Vorhang. Bei .84 verschwand die Uebersicht
     fast, und genau die braucht man jetzt: seit es den Ablagestreifen
     gibt, zielt man beim Ziehen auf ein bestimmtes Dokument. Was die
     Flaeche sagen soll -- "das ganze Fenster nimmt an" --, sagt der
     gestrichelte Rand und das Band darueber. */
  background: rgba(229, 231, 225, .5);
  /* Ohne pointer-events:none faengt die Huelle die Ziehereignisse selbst
     ab, sobald sie erscheint. Der Zaehler in dms.js zaehlte dann eine
     Ebene mit, die es vorher nicht gab, und die Anzeige bliebe haengen,
     nachdem die Datei laengst wieder draussen ist.

     SECURITY ist das nicht, aber es ist die Ursache eines Fehlers, der
     schon einmal Zeit gekostet hat: die Karte, die frueher darin lag,
     war deshalb kein Ablageziel -- der Zeiger ging hindurch und traf das
     Dokument darunter. Wer hier etwas anklickbar oder ablegbar machen
     will, braucht ein eigenes Element neben der Huelle, nicht darin. */
  pointer-events: none;
}
body.zieht .zieh-huelle { display: flex; animation: einblenden .16s ease backwards; }

/* Gestrichelter Rahmen knapp innerhalb des Fensterrands: die deutlichste
   Art zu sagen, dass die ganze Flaeche gemeint ist */
.zieh-huelle::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 2px dashed var(--akte);
  border-radius: var(--r);
  opacity: .45;
}

/* Das Ablageband ueber der Uebersicht.

   Vorher stand hier eine schwebende Karte in der Mitte des Fensters. Sie
   sah aus wie das Ziel, war aber keines: die Huelle traegt
   pointer-events: none -- sonst zaehlte sie die Ziehereignisse selbst
   mit und die Anzeige bliebe haengen --, und damit ging der Zeiger
   hindurch. Darunter lag eine Kachel mit ihrem Ablagestreifen, und die
   Datei wurde dem Dokument zugeordnet, obwohl jemand auf die Karte
   gezielt hatte.

   Das Band nimmt die Ereignisse selbst an, sitzt ueber der Uebersicht
   statt darauf und verdeckt kein Dokument. */
.zieh-band {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 42;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 20px 30px;
  text-align: center;
  background: var(--karton);
  border-bottom: 2px dashed var(--akte);
  box-shadow: 0 8px 22px rgba(26, 32, 30, .16);
  animation: bandHerein .18s cubic-bezier(.2, .8, .3, 1) backwards;
}
body.zieht .zieh-band { display: flex; }

/* Der Zeiger steht wirklich darauf */
.zieh-band.bereit { background: var(--karton-tief); border-bottom-style: solid; }

.zieh-band b {
  font-family: var(--schrift-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--akte);
}
.zieh-band span {
  max-width: 760px;
  font-size: 13px;
  color: var(--tinte-2);
}

@keyframes bandHerein {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Vorschauspalte neben der Liste ---------- */
.detail {
  background: var(--karton);
  border-left: 1px solid var(--linie);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* align-self: start ist noetig, damit sticky greift. Ohne das zieht
     das Raster die Spalte auf die volle Zeilenhoehe, und ein Element,
     das so hoch ist wie sein Behaelter, kann nirgends kleben. */
  align-self: start;
  position: sticky;
  top: 0;
  height: 100vh;
  transition: opacity .18s ease;
}
/* Waehrend geladen wird, tritt der alte Inhalt zurueck, statt zu
   verschwinden. Ein Aufblitzen von Leere waere unruhiger als das. */
.detail.laedt { opacity: .45; }

/* Ein Blatt ist eine geholte Vorschau. Mehrere stehen gleichzeitig in
   der Spalte, sichtbar ist immer nur eines -- so bleibt das <iframe>
   der zuletzt gesehenen Dokumente am Leben und die PDF darin geladen.
   Das Blatt traegt die Aufteilung, die vorher die Spalte selbst trug:
   ohne sie faende .detail-fuss sein margin-top:auto nicht mehr und
   staende nicht mehr am Fuss der Spalte. */
.vorschau-blatt {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: 0;
}
/* Ohne das gewinnt display:flex gegen die Vorgabe des Browsers fuer
   [hidden], und das versteckte Blatt stuende sichtbar da. */
.vorschau-blatt[hidden] { display: none; }

/* Ohne Auswahl gibt es die Spalte nicht. Sie steht zwar im Markup --
   das Skript braucht ein Ziel --, nimmt aber keinen Platz ein. */
.detail { display: none; }
.zeigt-vorschau .detail { display: flex; }

/* Schliessknopf, oben rechts ueber der Vorschau. Er liegt darueber
   statt daneben, damit er keine Zeile kostet. */
.vorschau-zu {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 2;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: var(--r);
  background: var(--karton);
  color: var(--tinte-3);
  cursor: pointer;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.vorschau-zu svg { width: 15px; height: 15px; }
.vorschau-zu:hover { color: var(--tinte); border-color: var(--tinte-3); background: var(--karton-tief); }
.vorschau-zu:focus-visible { outline: 2px solid var(--akte); outline-offset: 2px; }

.detail .vorschau {
  background: var(--karton-tief);
  border-bottom: 1px solid var(--linie);
  padding: 26px 24px;
  display: flex;
  justify-content: center;
  flex: none;
}
/* Waechst mit der Spalte statt bei Briefmarkengroesse zu bleiben. Das
   Seitenverhaeltnis ist das von A4 -- so steht die Vorschau nie
   verzerrt oder mit Balken da. */
.blatt-rahmen {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1.414;
  height: auto;
  border: 1px solid var(--linie);
  background: #FBFBF8;
  box-shadow: 2px 3px 0 rgba(28, 42, 43, .07);
  transition: transform .18s ease, box-shadow .18s ease;
}
.detail .vorschau:hover .blatt-rahmen {
  transform: translateY(-2px);
  box-shadow: 3px 5px 0 rgba(28, 42, 43, .1);
}

.detail-kopf { padding: 20px 24px 0; flex: none; }
.detail-kopf .kat { margin: 0; }
.detail-kopf h2 {
  margin: 8px 0 0;
  font-family: var(--schrift-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}

/* Der Absender in der Vorschau, gleich unter der Überschrift. Er darf
   hier umbrechen: die Spalte ist schmal, und abgeschnitten stünde bei
   einem langen Namen nur die Behörde ohne ihr Amt. */
.vorschau-absender {
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tinte-2);
  overflow-wrap: anywhere;
}

.vorschau-hinweis {
  margin: 12px 24px 0;
  padding: 10px 12px;
  background: var(--karton-tief);
  border-left: 2px solid var(--akte);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: 13px;
  color: var(--tinte-2);
}
.vorschau-hinweis-fehler { border-left-color: var(--stempel); color: var(--stempel); }

.detail .felder { padding: 16px 24px 0; }
.detail .detail-fuss {
  margin-top: auto;
  padding: 20px 24px 24px;
  display: flex;
  gap: 8px;
  flex: none;
}
.detail .detail-fuss .knopf { flex: 1; justify-content: center; }

/* Ausgewaehlte Zeile in der Liste */
.akte[aria-selected="true"] {
  border-color: var(--akte);
  box-shadow: -2px 2px 0 rgba(52, 70, 94, .3);
}
.akte[aria-selected="true"]::before { transform: scaleY(1); }

/* ---------- Detailansicht ---------- */
.detailraster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 20px;
  padding: 0 30px 24px;
  align-items: start;
}

.detail-vorschau {
  background: var(--karton-tief);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  min-height: 560px;
  display: flex;
}
.vorschau-rahmen { width: 100%; height: 720px; border: 0; background: var(--karton-tief); }

.vorschau-leer {
  margin: auto;
  padding: 40px 20px;
  text-align: center;
  color: var(--tinte-3);
  font-size: 13.5px;
}
.blatt {
  width: 180px; height: 250px;
  margin: 0 auto 18px;
  background: #FBFBF8;
  border: 1px solid var(--linie);
  box-shadow: 2px 3px 0 rgba(28, 42, 43, .07);
  padding: 18px 15px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.zl { height: 4px; background: var(--linie-fein); border-radius: 1px; }
.zl.kurz { width: 45%; }
.zl.mittel { width: 70%; }
.zl.kopf { height: 7px; width: 55%; background: var(--linie); margin-bottom: 5px; }
.mini-stempel {
  position: absolute;
  bottom: 16px; right: 14px;
  border: 1.5px solid var(--stempel);
  color: var(--stempel);
  font-family: var(--schrift-daten);
  font-size: 6px;
  letter-spacing: .1em;
  padding: 3px 5px;
  transform: rotate(-6deg);
  opacity: .7;
}

.detail-daten {
  background: var(--karton);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  padding: 20px 22px;
  box-shadow: -2px 2px 0 var(--linie);
}
/* Beim Ueberfahren einer Zeile tritt die Beschriftung hervor. Sehr leise
   gehalten -- es ist eine Lesehilfe, keine Schaltflaeche. */
.feld { transition: background .12s ease; }
.feld:hover { background: var(--karton-tief); }
.feld dt { transition: color .12s ease; }
.feld:hover dt { color: var(--tinte-2); }

.untertitel {
  font-family: var(--schrift-daten);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--tinte-3);
  font-weight: 500;
  margin: 0 0 10px;
}
.untertitel-klein { margin-top: 18px; }

.felder { margin: 0; }
.feld {
  display: grid;
  grid-template-columns: 106px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid var(--linie-fein);
}
.feld dt {
  font-family: var(--schrift-daten);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinte-3);
  padding-top: 2px;
}
.feld dd { margin: 0; font-size: 14px; min-width: 0; }
.wert-mono { font-family: var(--schrift-daten); font-size: 12.5px; }
.umbruch { overflow-wrap: anywhere; }
.sicher {
  display: block;
  margin-top: 4px;
  font-family: var(--schrift-daten);
  font-size: 10px;
  color: var(--tinte-3);
}

.detail-fuss { display: flex; gap: 8px; flex-wrap: wrap; padding: 18px 0 4px; }
/* Die Knopfleiste steht jetzt vor den Kerndaten und nicht mehr am Ende
   der Spalte. Was ihr folgt, braucht Luft -- sonst klebt die
   Überschrift an den Knöpfen. */
.detail-fuss + .untertitel { margin-top: 20px; }

/* ---------- Volltext ---------- */
.volltext { padding: 0 30px 30px; }
.seite {
  background: var(--karton);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  margin-bottom: 6px;
  padding: 9px 14px;
}
.seite { transition: border-color .14s ease; }
.seite:hover { border-color: var(--tinte-3); }
.seite summary {
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Eigener Pfeil statt des Standarddreiecks, damit er sich drehen kann */
.seite summary::-webkit-details-marker { display: none; }
.seite summary::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--tinte-3);
  border-bottom: 1.5px solid var(--tinte-3);
  transform: rotate(-45deg);
  transition: transform .18s ease;
}
.seite[open] summary::before { transform: rotate(45deg); }
.seite summary .sicher { display: inline; margin-left: auto; margin-top: 0; }
.seite[open] .seitentext { animation: einblenden .24s ease backwards; }
.seitentext {
  margin: 10px 0 4px;
  padding: 12px 14px;
  background: var(--karton-tief);
  border-radius: var(--r);
  font-family: var(--schrift-daten);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 420px;
  overflow-y: auto;
}

/* Aufklapper in der Detailspalte: die technischen Angaben und alles,
   was etwas ändert. Beide sehen aus wie die Seiten des Volltextes --
   dasselbe Element, dieselbe Geste, dieselbe Form. Ohne den Rahmen
   drumherum: in der schmalen Spalte stehen sie zwischen anderen
   Abschnitten und nicht als Liste untereinander. */
.technisch,
.aendern {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--linie-fein);
}
.technisch > summary,
.aendern > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  /* Wie .untertitel: die Aufklapper stehen auf derselben Ebene wie
     "Kerndaten" oder "Vorgang" und sollen sich gleich anfühlen. */
  font-family: var(--schrift-daten);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinte-3);
}
.technisch > summary::-webkit-details-marker,
.aendern > summary::-webkit-details-marker { display: none; }
.technisch > summary::before,
.aendern > summary::before {
  content: "";
  flex: none;
  width: 5px; height: 5px;
  border-right: 1.5px solid var(--tinte-3);
  border-bottom: 1.5px solid var(--tinte-3);
  transform: rotate(-45deg);
  transition: transform .18s ease;
}
.technisch[open] > summary::before,
.aendern[open] > summary::before { transform: rotate(45deg); }
.technisch > summary:hover,
.aendern > summary:hover { color: var(--tinte-2); }
.technisch[open] > dl,
.aendern[open] > form { animation: einblenden .24s ease backwards; }
.technisch > dl { margin-top: 10px; }
/* Das erste Formular im Aufklapper braucht keine Trennlinie -- die
   Zusammenfassung darüber trennt schon. */
.aendern > form:first-of-type { margin-top: 12px; }

/* ---------- Karten, Tabellen, Formulare ---------- */
.karte {
  margin: 0 30px 20px;
  padding: 18px 22px;
  background: var(--karton);
  border: 1px solid var(--linie);
  border-radius: var(--r);
}

.tabellenrahmen { overflow-x: auto; margin: 0 30px 20px; }
.karte .tabellenrahmen { margin: 0; }

.tabelle {
  width: 100%;
  border-collapse: collapse;
  background: var(--karton);
  font-size: 14px;
}
.karte .tabelle { background: transparent; }
.tabelle th, .tabelle td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--linie-fein);
  vertical-align: top;
}
.tabelle thead th {
  font-family: var(--schrift-daten);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinte-3);
  font-weight: 500;
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}
.tabelle tbody tr { transition: background .12s ease; }
.tabelle tbody tr:hover { background: var(--karton-tief); }
/* Feiner Strich am Zeilenanfang, damit beim Ueberfahren klar ist, welche
   Zeile gemeint ist -- gerade bei den langen Protokolltabellen */
.tabelle tbody tr td:first-child { box-shadow: inset 0 0 0 0 var(--akte); transition: box-shadow .14s ease; }
.tabelle tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 0 var(--akte); }
.tabelle-eng th, .tabelle-eng td { padding: 6px 10px; font-size: 13px; }
.tabelle-aktionen { display: flex; gap: 6px; align-items: center; }
.tabelle-aktionen form { margin: 0; }
.einzelheiten {
  font-family: var(--schrift-daten);
  font-size: 11.5px;
  color: var(--tinte-2);
  overflow-wrap: anywhere;
}

.marke-art {
  font-family: var(--schrift-daten);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 2px;
  background: var(--karton-tief);
  color: var(--tinte-2);
}
/* Abgeschaltete Dateitypen treten zurueck, damit auf einen Blick
   erkennbar ist, was wirklich angenommen wird */
/* Die Benutzertabelle traegt diese Klasse noch aus der Zeit, als sie
   sich die rechte Kante mit dem Formular darunter teilte. Beide nehmen
   jetzt die volle Breite; die Klasse bleibt als Angriffspunkt stehen,
   ohne etwas zu begrenzen. */

/* Festes Raster fuer die vier Pruefgruppen des Systemzustands.
   Komponente und Hinweis tragen den Text, die drei Spalten dazwischen
   sind kurz und fest. */
.tabelle-pruefung { table-layout: fixed; width: 100%; }
.tabelle-pruefung th:nth-child(1), .tabelle-pruefung td:nth-child(1) { width: 26%; }
.tabelle-pruefung th:nth-child(2), .tabelle-pruefung td:nth-child(2) { width: 8%; }
.tabelle-pruefung th:nth-child(3), .tabelle-pruefung td:nth-child(3) { width: 13%; }
.tabelle-pruefung th:nth-child(4), .tabelle-pruefung td:nth-child(4) { width: 17%; }
.tabelle-pruefung th:nth-child(5), .tabelle-pruefung td:nth-child(5) { width: 36%; }
/* Pfade und Versionen brechen lieber um, als die Spalte zu sprengen */
.tabelle-pruefung td { overflow-wrap: anywhere; }

/* Festes Raster fuer die drei Typtabellen. Die Prozente sind an der
   laengsten Kennung gemessen -- application/vnd.openxmlformats-
   officedocument.presentationml.presentation, dreiundsiebzig Zeichen --
   damit sie ohne Umbruch in ihre Spalte passt. */
.tabelle-typen { table-layout: fixed; width: 100%; }
.tabelle-typen th:nth-child(1), .tabelle-typen td:nth-child(1) { width: 30%; }
.tabelle-typen th:nth-child(2), .tabelle-typen td:nth-child(2) { width: 7%; }
.tabelle-typen th:nth-child(3), .tabelle-typen td:nth-child(3) { width: 40%; }
.tabelle-typen th:nth-child(4), .tabelle-typen td:nth-child(4) { width: 14%; }
.tabelle-typen th:nth-child(5), .tabelle-typen td:nth-child(5) { width: 9%; }
/* Der Knopf sitzt am rechten Rand der Spalte, sonst wandert er mit der
   Textbreite des Zustands mit. */
.tabelle-typen .tabelle-aktionen { justify-content: flex-end; }
/* Lange Formatnamen brechen lieber um, als die Spalte zu sprengen */
.tabelle-typen td:nth-child(1) { overflow-wrap: anywhere; }

.typ-aus td { opacity: .62; }
.typ-aus:hover td { opacity: 1; }
.typ-an td:first-child { font-weight: 500; }

.marke-aenderung { color: var(--akte); }
.marke-anmeldung { color: var(--ocker); }
.marke-lesen     { color: var(--tinte-2); }
.marke-system    { color: var(--moos); }

.formular { margin: 0; }
/* Ist das Formular selbst die Karte, gilt der Kartenrand. Die Zeile
   darueber steht spaeter als .karte und hatte ihn sonst geschluckt --
   die Karte klebte links an der Seitenleiste und unten am Nachbarn. */
.formular.karte { margin: 0 30px 20px; }
.formular-eng { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linie-fein); }
.feld-zeile { margin: 0 0 14px; display: flex; flex-direction: column; gap: 5px; }
.feld-zeile label { font-size: 13px; font-weight: 500; }
.feld-zeile > .knopf, .feld-zeile > button { align-self: flex-start; }
/* Felder nebeneinander statt untereinander -- zwei Knoepfe fuer die
   Richtung, ein Paar aus Art und Nummer beim Zeichen.

   Diese Regel MUSS nach .feld-zeile stehen: beide Selektoren wiegen
   gleich schwer (eine Klasse), und bei gleichem Gewicht gewinnt die
   spaetere. Stand sie oben bei den Absenderstilen, setzte
   "flex-direction: column" von .feld-zeile sie hier still wieder
   ausser Kraft, und die beiden Knoepfe standen untereinander. */
.feld-zeile-quer {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.feld-zeile-quer > input[type="text"] { flex: 1 1 12em; min-width: 0; }
/* Die Richtung: zwei Knoepfe nebeneinander. Eine Auswahlliste waere ein
   Klick mehr fuer zwei Moeglichkeiten, von denen beide zu sehen sein
   sollen.

   Als ".feld-zeile .wahl" und nicht als ".wahl": eine Zeile darueber
   steht ".feld-zeile label" mit font-weight 500, und das wiegt schwerer
   als eine einzelne Klasse. Ein Knopf mit halbfetter Beschriftung sieht
   aus wie eine Ueberschrift. */
.feld-zeile .wahl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--tinte-2);
  cursor: pointer;
}
/* Steht anstelle eines <label>, wo mehrere Felder in einer Zeile stehen
   und keines davon die Beschriftung fuer sich beanspruchen darf. */
.feld-beschriftung {
  flex: none;
  min-width: 8.5em;
  font-size: 13px;
  color: var(--tinte-2);
}
.formular-eng .feld-zeile:last-child { flex-direction: row; align-items: center; gap: 10px; }
.formular-eng .feld-zeile:last-child .sicher { margin-top: 0; }

/* Eingabefeld mit angehaengter Einheit */
.feld-eingabe { display: flex; align-items: center; gap: 8px; }
.feld-eingabe input { flex: 1; min-width: 0; }
.feld-einheit {
  flex: none;
  font-family: var(--schrift-daten);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinte-3);
}
.hinweis-geaendert { color: var(--ocker); }

.kennzahlen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.kennzahlen li {
  min-width: 118px;
  padding: 10px 14px;
  background: var(--karton-tief);
  border-radius: var(--r);
  transition: transform .14s ease, box-shadow .14s ease;
}
.kennzahlen li:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 0 var(--linie);
}
.kennzahl-wert {
  display: block;
  font-family: var(--schrift-daten);
  font-size: 20px;
  font-weight: 600;
}
.kennzahl-name {
  display: block;
  font-size: 11.5px;
  color: var(--tinte-2);
}

/* ---------- Fehlerseiten ---------- */
.fehlerseite { padding: 40px 30px; max-width: 560px; }
.fehler-nummer {
  margin: 0;
  font-family: var(--schrift-daten);
  font-size: 44px;
  font-weight: 600;
  color: var(--linie);
  line-height: 1;
}
.fehlerseite h1 { margin: 6px 0 12px; font-size: 24px; }
.fehler-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }

/* ---------- Schlichtes Layout: Anmeldung ---------- */
body.schlicht {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.tafel {
  width: 100%;
  max-width: 380px;
  background: var(--karton);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  padding: 28px 28px 22px;
  box-shadow: -3px 4px 0 var(--linie);
}
.tafel-marke { padding-bottom: 18px; border-bottom: 1px solid var(--linie-fein); }
.tafel-marke b {
  display: block;
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -.02em;
}
.tafel-marke span {
  display: block;
  font-family: var(--schrift-daten);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-3);
  margin-top: 3px;
}
.tafel-titel { font-size: 18px; margin: 18px 0 16px; }
.tafel .meldung { margin: 16px 0 0; }
.tafel input[type="text"], .tafel input[type="password"] { width: 100%; }
.tafel-fuss {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--linie-fein);
  font-family: var(--schrift-daten);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--tinte-3);
}

/* ---------- Web-Installer ---------- */
body.einrichtung {
  padding: 30px 20px;
  background: var(--papier);
}
.einrichtung-blatt {
  max-width: 860px;
  margin: 0 auto;
  background: var(--karton);
  border: 1px solid var(--linie);
  border-radius: var(--r);
  padding: 30px 34px 26px;
  box-shadow: -3px 4px 0 var(--linie);
}
.einrichtung-kopf { padding-bottom: 18px; border-bottom: 1px solid var(--linie-fein); }
.einrichtung-blatt h1 { font-size: 24px; margin: 22px 0 12px; }
.einrichtung-blatt h2 { font-size: 15px; }
.einrichtung-blatt p { max-width: 62ch; }
.einrichtung-inhalt .felder { margin-bottom: 18px; }
.einrichtung-inhalt .tabellenrahmen,
.einrichtung-inhalt .meldung { margin-left: 0; margin-right: 0; }
.einrichtung-inhalt .meldung { margin-top: 14px; }

/* Schrittleiste */
.schrittleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
.schritt {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 6px;
  border: 1px solid var(--linie);
  border-radius: 20px;
  font-size: 12px;
  color: var(--tinte-3);
  background: var(--papier);
}
.schritt-zahl {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--karton-tief);
  font-family: var(--schrift-daten);
  font-size: 10px;
  color: var(--tinte-2);
}
.schritt-hier {
  border-color: var(--akte);
  background: var(--akte);
  color: #F1F2EE;
  font-weight: 600;
}
.schritt-hier .schritt-zahl { background: rgba(255, 255, 255, .22); color: #F1F2EE; }
.schritt-hinter { color: var(--moos); border-color: var(--moos); }
.schritt-hinter .schritt-zahl { background: var(--moos); color: var(--karton); }

/* Befehle zum Kopieren */
.befehl {
  margin: 10px 0 16px;
  padding: 13px 15px;
  background: var(--tinte);
  color: #E5E7E1;
  border-radius: var(--r);
  font-family: var(--schrift-daten);
  font-size: 12.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  /* Ein Befehl will markiert und kopiert werden -- hier also
     ausdruecklich nicht die Auswahl unterbinden */
  user-select: text;
}
.befehl-lang { max-height: 420px; overflow-y: auto; line-height: 1.55; }

code {
  font-family: var(--schrift-daten);
  font-size: .92em;
  background: var(--karton-tief);
  padding: 1px 5px;
  border-radius: 2px;
}

.einrichtung-weiter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--linie-fein);
}
.einrichtung-fuss {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--linie-fein);
  font-size: 12px;
  color: var(--tinte-3);
}

/* ---------- Hinweise unter Eingabefeldern ---------- */
/* Bewusst NICHT .sicher: das ist die Schreibmaschinenschrift auf zehn
   Pixel, richtig fuer eine Pruefsumme oder ein Kuerzel, unlesbar fuer
   ganze Saetze. Ein erklaerender Hinweis ist Fliesstext und wird auch so
   gesetzt. */
.feld-hinweis {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tinte-2);
  max-width: 58ch;
}
.feld-hinweis strong { color: var(--tinte); font-weight: 600; }
/* Als eigener Absatz, nicht als Anhang an ein Feld */
.feld-hinweis-block { margin: 0 0 16px; max-width: 74ch; }

/* Hinweisspalte in den Pruefungstabellen -- ebenfalls Fliesstext */
.hinweis-zelle {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--tinte-2);
  max-width: 52ch;
}

/* ---------- Breite Bildschirme ---------- */
/* Zwei Fehlversuche stehen hinter dem, was jetzt hier steht, und beide
   sind lehrreich genug, um sie zu nennen:

   Erst wurden einzelne Bloecke begrenzt -- die Liste stand als schmales
   Band da, die Vorschauspalte klebte ganz rechts, dazwischen eine
   Wueste. Dann wurde der ganze Rahmen zentriert -- die Seitenleiste
   loeste sich vom Fensterrand, und links wie rechts blieb ein breites
   leeres Band. So sieht keine Anwendung aus.

   Ein Anwendungsrahmen nutzt die Fensterbreite, die Seitenleiste klebt
   am Rand. Was auf einem breiten Schirm zu viel wird, ist nicht die
   Liste -- eine Aktenzeile mit Titel links und Zustand rechts vertraegt
   Breite, so wie es jedes Mailprogramm vormacht. Zu viel wird der
   Fliesstext, und der ist bereits einzeln begrenzt.

   Der gewonnene Platz geht an die Vorschau: auf einem 4K-Schirm ist die
   PDF dann wirklich zu lesen, statt als Briefmarke dazustehen. */
@media (min-width: 1500px) {
  /* Die Vorschau nimmt gut ein Drittel. Das hat zwei Gruende: die PDF
     wird lesbar statt briefmarkengross, und die Aktenzeile daneben wird
     kuerzer -- bei ueber tausend Pixel Zeilenbreite liegt zwischen
     Titel links und Zustand rechts sonst nur Leere. */
  .rahmen-dreispaltig.zeigt-vorschau {
    grid-template-columns: 240px minmax(0, 1fr) clamp(390px, 34vw, 760px);
  }

  /* Ohne Vorschau ist die Aktenzeile ueber tausend Pixel breit. Gestapelt
     stuenden Titel und Angaben dann links in einer Ecke und der Zustand
     ganz rechts, dazwischen nichts. Nebeneinander gesetzt fuellen sie die
     Zeile -- die Angaben ruecken an den Zustand heran. Sobald die
     Vorschau aufgeht, wird es wieder eng, und es gilt wieder das
     Gestapelte darunter. */
  /* Nicht fuer die Trefferliste: dort steht zwischen Titel und Angaben
     noch die Fundstelle, also drei Kinder statt zwei. In einem
     Zweispaltenraster rutschte die Fundstelle in die zweite Spalte,
     und weil die auf "auto" steht, nahm sie sich die ganze Breite --
     vom Titel blieb eine Spalte von wenigen Pixeln. Die Trefferzeile
     bleibt gestapelt; sie traegt ohnehin mehr Text als eine Listenzeile
     und braucht die Breite nicht als Flaeche, sondern als Zeilenlaenge. */
  .rahmen-dreispaltig:not(.zeigt-vorschau) .akte:not(.kachel):not(.akte-treffer) .akte-text {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 24px;
  }
  .rahmen-dreispaltig:not(.zeigt-vorschau) .akte:not(.kachel):not(.akte-treffer) .akte-zeile {
    justify-content: flex-end;
  }

  /* Karten und Tabellen nehmen die Breite, die da ist. Ein Deckel
     brachte nichts: der Inhalt wurde schmaler, die Flaeche daneben
     blieb ungenutzt. Nur das Eingabefeld selbst bleibt begrenzt --
     dafuer sorgt die Spaltenbreite im Feldraster, nicht die Karte. */

}

/* Die Einstellungen tragen zwei Themen, die nichts voneinander wissen:
   Grenzen und Dateitypen. Nebeneinander gestellt fuellen sie den Schirm
   und ersparen das Scrollen, das entstuende, wenn beides untereinander
   in einer halb leeren Flaeche staende.

   Erst ab 2000 Pixel, und das ist gerechnet, nicht geraten: links
   braucht das dreispaltige Feldraster gut 900 Pixel, rechts stehen
   MIME-Typen mit bis zu fuenfundsiebzig Zeichen. Zwei Spalten frueher
   hiesse zwei zu enge Spalten -- dann ist untereinander besser. */
@media (min-width: 2000px) {
  /* Zwei Spalten brauchen die doppelte Kante. Eine Zahl statt vieler:
     der Vorspann darueber richtet sich nach derselben Variablen. */
  :root { --einstellungen-breite: 2600px; }

  .einstellungen-raster {
    display: grid;
    grid-template-columns: minmax(760px, 920px) minmax(0, 1fr);
    gap: 0 24px;
    align-items: start;
    /* Der Rand sitzt am Behaelter. Die Karten geben ihren eigenen ab,
       sonst klaffte zwischen den Spalten der doppelte Abstand. */
    padding: 0 30px;
  }
  .einstellungen-raster .karte,
  .einstellungen-raster .tabellenrahmen {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Beschriftung, Feld und Hinweis nebeneinander statt uebereinander.
   Gestapelt zieht ein Formular die Seite unnoetig in die Laenge,
   waehrend daneben Platz frei bleibt. */
@media (min-width: 1100px) {
  /* Nur in Karten: die Anmeldung und die Detailspalte sind schmal, dort
     waere ein dreispaltiges Raster zu eng. */
  /* Ein Formular ist kein Fliesstext und keine Tabelle: es hoert dort
     auf, wo die Hinweisspalte endet. Ohne diese Grenze lief die Karte
     bis zum Rand des Inhaltsbereichs, waehrend rechts der Hinweise
     sechshundert Pixel tote Flaeche standen -- betont noch durch die
     Trennlinien, die bis ganz nach rechts liefen. */
  .karte .feld-zeile {
    display: grid;
    grid-template-columns: minmax(180px, 260px) minmax(180px, 330px) minmax(0, 1fr);
    align-items: start;
    gap: 4px 24px;
    margin-bottom: 0;
    padding: 11px 0;
    border-bottom: 1px solid var(--linie-fein);
  }
  /* Die Hinweise duerfen die verbleibende Spalte auch fuellen */
  .karte .feld-zeile .feld-hinweis { max-width: 70ch; }
  .karte .feld-zeile:last-of-type { border-bottom: 0; }
  .karte .feld-zeile > label { padding-top: 7px; font-weight: 500; }
  .karte .feld-zeile .feld-hinweis { margin-top: 7px; }

  /* Der Absenden-Knopf braucht kein Raster */
  .karte .feld-zeile:has(> button) {
    display: block;
    border-bottom: 0;
    padding-top: 18px;
  }
}

/* ---------- Zugaenglichkeit und Mobil ---------- */
:focus-visible { outline: 2px solid var(--akte); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media (max-width: 1180px) {
  /* Fuer drei Spalten ist kein Platz mehr. Die Vorschau entfaellt, und
     ein Klick auf eine Zeile fuehrt wieder direkt zur Detailseite --
     darum fragt dms.js dieselbe Breite ab. */
  .rahmen-dreispaltig.zeigt-vorschau { grid-template-columns: 240px minmax(0, 1fr); }
  .zeigt-vorschau .detail { display: none; }

  .detailraster { grid-template-columns: minmax(0, 1fr); }
  .vorschau-rahmen { height: 560px; }
}

@media (max-width: 760px) {
  .rahmen { grid-template-columns: 1fr; }

  /* Aus der Spalte wird eine Kopfzeile: Marke links, Menüknopf rechts.
     Bis hierher stand die Navigation waagerecht in einer scrollenden
     Leiste -- die Punkte rechts waren abgeschnitten, und dass dort noch
     etwas kommt, sah man nur am Balken. Jetzt ist entweder alles zu
     sehen oder nichts. */
  .leiste {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--linie);
  }
  .marke { border: 0; padding: 0; margin: 0; flex: 1 1 auto; }
  .marke b { font-size: 17px; }

  .menue-knopf {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    padding: 7px 12px;
    border: 1px solid var(--linie);
    border-radius: var(--r);
    background: var(--karton-tief);
    font-size: 13px;
    font-weight: 500;
    color: var(--tinte);
    cursor: pointer;
    user-select: none;
  }
  .menue-knopf svg { width: 17px; height: 17px; }
  .menue-knopf:hover { border-color: var(--tinte-3); }

  /* Zu, bis das Kästchen angekreuzt ist. flex-basis:100% bringt den
     Inhalt in eine eigene Zeile unter Marke und Knopf. */
  .leiste-inhalt { display: none; flex: 0 0 100%; }
  .menue-schalter:checked ~ .leiste .leiste-inhalt { display: block; }
  .menue-schalter:checked ~ .leiste .menue-knopf { background: var(--akte); border-color: var(--akte); color: #F1F2EE; }

  /* Aufgeklappt gilt wieder das Untereinander der breiten Ansicht --
     mit Überschriften, Zählern, Verarbeitungsstand und Konto. Wer das
     Menü öffnet, hat Platz dafür; verkürzt wäre es ein zweites,
     schlechteres Menü. */
  .leiste-inhalt .nav-gruppe { padding: 0; margin: 14px 0 0; }
  .leiste-inhalt .nav-punkt { padding: 9px 10px; }
  .leiste-inhalt .lauf { margin: 16px 0 0; }
  .leiste-inhalt .konto {
    margin: 16px 0 0;
    padding: 14px 0 0;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .leiste-inhalt .konto form { margin-left: auto; }

  .suchleiste, .abschnitt, .liste, .ablage, .filterleiste,
  .volltext, .karte, .tabellenrahmen, .detailraster, .blaettern, .meldung, .leer {
    padding-left: 16px;
    padding-right: 16px;
  }
  .ablage, .karte, .tabellenrahmen, .leer, .meldung { margin-left: 16px; margin-right: 16px; }
  .stapelband { margin-left: 16px; margin-right: 16px; }

  /* Der Abschnittskopf trägt Überschrift, Anzahl und die Steuerung der
     Darstellung. Nebeneinander passt das nicht mehr: die Steuerung
     bekommt eine eigene Zeile und die volle Breite. */
  .abschnitt { padding-top: 16px; }
  .abschnitt .rechts {
    margin-left: 0;
    flex: 0 0 100%;
    flex-wrap: wrap;
    gap: 8px;
  }
  /* Sortierfeld, Richtung und Anwenden in eine Zeile: die beiden
     Auswahlfelder teilen sich, was der Knopf übrig lässt. Vorher stand
     „Anwenden" allein in einer dritten Zeile, und das für einen Knopf,
     den man selten braucht. */
  .sortierung { flex: 1 1 auto; flex-wrap: wrap; }
  .sortierung select { flex: 1 1 110px; min-width: 0; }
  .sortierung .knopf { flex: 0 0 auto; }
  .ansichtswahl { margin-right: 0; }

  /* Der Ordnerbaum klappt zu. Offen nahm er hier ein Drittel des
     Schirms, und zusammen mit Suchfeld, Filtern und Auswahlband war
     kein einziges Dokument zu sehen, bevor man scrollte. Zugeklappt
     bleibt die Kopfzeile stehen und sagt, in welchem Ordner man ist --
     die Auskunft, die der offene Baum sonst durch Hervorhebung gibt. */
  .ordner { padding: 8px 16px; }
  .ordner-kopf { margin: 0; }
  .ordner-klapp {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    padding: 6px 0;
    cursor: pointer;
  }
  .ordner-pfeil {
    display: block;
    width: 16px;
    height: 16px;
    flex: none;
    transition: transform .15s ease;
  }
  .ordner-hier {
    display: block;
    font-family: var(--schrift-grund);
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 600;
    color: var(--tinte);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ordner-liste { display: none; }
  .ordner-schalter:checked ~ .ordner .ordner-liste { display: block; padding-top: 8px; }
  .ordner-schalter:checked ~ .ordner .ordner-pfeil { transform: rotate(180deg); }
  /* Der Knopf zum Anlegen öffnet ein Formular, das im zugeklappten Baum
     steckt -- zugeklappt wäre er ein Knopf ohne sichtbare Wirkung. */
  .ordner-schalter:not(:checked) ~ .ordner .ordner-neu { display: none; }

  /* Das Band trägt fünf Bedienelemente und steht dauerhaft da -- bei
     dieser Breite darf es keine vier Zeilen hoch werden. Die Auswahlfelder
     dehnen sich, die Knöpfe bleiben schmal, und so steht jedes Feld mit
     seinem Knopf in einer Zeile statt allein. */
  .stapelband { padding: 8px 10px; gap: 6px; }
  .stapelband select { flex: 1 1 140px; min-width: 0; max-width: none; }
  .stapelband .knopf { flex: 0 0 auto; }
  .sb-alle { margin-right: 0; }

  /* Drei Spalten statt vier: Stempel, Miniatur, Text. Der Zustand
     rutscht darunter. Beides nebeneinander kostet hier Platz, den der
     Titel gut gebrauchen koennte -- so ausdruecklich entschieden am
     2026-08-20. Damit es traegt, wird die Miniatur schmaler und der
     Abstand kleiner. */
  .akte { grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; }
  .akte-blatt { width: 34px; height: 46px; }

  /* Der Stempel in seiner kurzen Form: ohne das Wort "Eingang", nur
     Tag und Jahr -- dieselbe Fassung, die die Kachel schon benutzt.
     Grund: mit dem vollen Stempel blieben neben der Miniatur 153 Pixel
     fuer den Titel, und der brach schon bei einem mittellangen Namen
     ab. So sind es rund 190. Das Wort ist der entbehrliche Teil: das
     Eingangsdatum steht zwei Zeilen weiter noch einmal als Text. */
  .stempel { width: 46px; height: 44px; }
  .stempel .wort { display: none; }
  .stempel .tag  { font-size: 11px; margin-top: 0; }
  .stempel .jahr { font-size: 7px; }
  .akte-rechts { grid-column: 3; flex-direction: row; align-items: center; gap: 12px; }
  /* Die Trefferzeile der Suche traegt dieselbe Klasse, hat aber weder
     Stempel noch Miniatur -- nur Text und Zustand. Sie braucht deshalb
     eine eigene Regel, und zwar hier: die Regeln dieser Abfrage stehen
     spaeter in der Datei und gewaennen sonst ueber die zwei Spalten,
     die sie in der breiten Ansicht hat.

     Eine einzige Spalte, der Zustand darunter. Vorher erbte sie die
     Spalten der Aktenzeile: der Text stand in einer Spalte nach
     Inhaltsbreite und nahm sie ganz ein, fuer den Zustand blieben
     0 Pixel, und "Fertig" war als "F" abgeschnitten. Nachgemessen bei
     375 Pixeln. */
  .akte-treffer { grid-template-columns: minmax(0, 1fr); }
  .akte-treffer > .akte-rechts { grid-column: 1; }

  /* Der Ablageort bekommt eine eigene Zeile, sein Trenner faellt weg.
     Die Angabenzeile bricht hier ohnehin um, und dann hing der Punkt
     am Anfang der neuen Zeile: "· Firma". Ein Trenner trennt nur
     etwas, wenn links davon noch etwas steht. */
  .akte-zeile .akte-ort { flex-basis: 100%; }
  .akte-zeile .trenner:has(+ .akte-ort) { display: none; }
  .feld { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ---------- Inhaltlich verwandte Treffer ----------
   Der zweite Abschnitt der Suchseite: was die Einbettung fand und der
   Volltext nicht. Er traegt eine eigene Klasse und nicht .verwandt --
   die gehoert dem Vorschlagsblock der Detailansicht, und zwei
   verschiedene Aufteilungen unter demselben Namen gehen schief. */
.such-verwandt { margin-top: 26px; }
.such-verwandt > .untertitel { margin-bottom: 2px; }
/* Ein schlichter Vorspann und ausdruecklich nicht .leer-schlicht: die
   Klasse traegt einen Rahmen und gehoert der Einstellungsseite. Hier
   waere er ein Kasten um einen Halbsatz. */
.such-verwandt-vorspann {
  margin: 0 0 12px;
  font-size: 13.5px;
  color: var(--tinte-2);
}
/* Die Naehe steht rechts, wo in der Trefferliste der Zustand steht. Ohne
   die feste Breite wandert sie je nach Zahl um ein paar Pixel. */
.such-verwandt .v-grund { min-width: 74px; text-align: right; }

/* ---------- Wiedervorlage ----------
   Ein Termin, der faellig ist, muss anders aussehen als einer, der noch
   Zeit hat -- sonst ist die Liste eine Datumsspalte und keine Auskunft.
   Die Farbe ist die des Eingangsstempels: sie steht in dieser Oberflaeche
   ueberall fuer "hier stimmt etwas nicht" oder "hier ist etwas zu tun". */
.wv-datum {
  font-family: var(--schrift-daten);
  font-size: 12.5px;
  color: var(--tinte-2);
  white-space: nowrap;
}
.wv-datum.faellig { color: var(--stempel); font-weight: 600; }

/* Wie weit es hin ist, unter dem Datum. Kleiner und blasser: das Datum
   ist die Angabe, der Abstand die Einordnung. */
.wv-abstand {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--tinte-3);
  text-align: right;
  white-space: nowrap;
}

/* Der Grund in der Detailansicht, hinter dem Datum */
.wv-grund { color: var(--tinte-2); }

/* Der Umschalter zwischen Faelligem und allem */
.umschalter { margin: 0 0 14px; }

/* Die faellige Zahl in der Seitenleiste traegt die Stempelfarbe. Ohne
   das saehe sie aus wie die Zahl neben "Alle Dokumente" -- und die
   bedeutet nichts weiter als eine Menge. Farbe und Fettung statt eines
   Abzeichens: dieselbe Sprache wie die Fehlerzeile der
   Verarbeitungsanzeige, und die Seitenleiste hat sonst keine Flaechen. */
.nav-punkt .zahl-faellig { color: var(--stempel); font-weight: 600; }

/* ---------- Pruefmaske ----------
   Links das Blatt, rechts das Formular. Ohne die Vorschau daneben
   muesste man fuer jede Entscheidung die Detailansicht oeffnen, und
   genau das soll die Maske ersparen. */
.pruef-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
/* Unter 1180 Pixeln untereinander: zwei Spalten von je 300 Pixeln sind
   weder als Blatt noch als Formular zu gebrauchen. */
@media (max-width: 1180px) {
  .pruef-raster { grid-template-columns: minmax(0, 1fr); }
}

.pruef-blatt .blatt-rahmen {
  width: 100%;
  max-width: none;
  aspect-ratio: 1 / 1.414;
  height: auto;
}
.pruef-wege { margin: 10px 0 0; font-size: 12.5px; color: var(--tinte-3); }

.pruef-formular { background: var(--karton); border: 1px solid var(--linie); padding: 20px 22px; }

/* Was bisher dastand, unter dem Feld. Klein und blass -- es ist der
   Vergleichswert, nicht die Angabe. */
.pruef-vorher { margin: -6px 0 14px; font-size: 12.5px; color: var(--tinte-3); }

.pruef-beschreibung {
  margin: 4px 0 10px;
  padding: 10px 12px;
  background: var(--karton-tief);
  border-left: 2px solid var(--linie);
  font-size: 13.5px;
  color: var(--tinte-2);
}

/* Ein Kaestchen mit seinem Text daneben, beides anklickbar */
.pruef-kasten {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  cursor: pointer;
  font-size: 13.5px;
}
.pruef-worte { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 16px; }

.pruef-knoepfe { margin-top: 20px; }

/* Das Ueberspringen steht abgesetzt unter dem Speichern: es ist die
   Ausnahme, nicht die zweite gleichwertige Wahl. */
.pruef-weiter {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--linie-fein);
  display: flex;
  align-items: center;
  gap: 10px;
}