/* ============================================================
   Lena · Oberflaeche
   ============================================================
   Handy zuerst. Ein Defekt wird auf dem Flur gemeldet, ein
   Vorfall auf dem Pausenhof -- nicht am Schreibtisch.

   Keine Webfont: auf dem Schulflur ist das Netz schlecht, und
   eine halbe Sekunde Textflackern ist teurer als jede
   Schriftpersoenlichkeit. Systemschrift laedt sofort.

   Nur eine Farbe im ganzen Blatt, und die nur fuer Fristen.
   Lena verarbeitet Konflikte und Gewaltvorfaelle -- farbige
   Abzeichen waeren hier unangemessen.
   ============================================================ */

:root {
  /* Papier und Karte wie bei TONI, damit die beiden Anwendungen
     verwandt aussehen. Das Gelb kommt von den Registerreitern
     einer Aktenmappe, nicht aus einer Farbpalette.

     Kontrast: jede Kombination liegt ueber 4,5:1 (WCAG AA). Drei
     Werte mussten dafuer nachgeschaerft werden -- wer eine Farbe
     aendert, sollte nachrechnen. */
  --papier:        #FAF7F0;
  --flaeche:       #FFFFFF;
  --tinte:         #1F3A6E;
  --tinte-hell:    #3A557B;
  --register:      #C8891F;
  --register-blass:#FBF0DC;
  --erledigt:      #1A5C38;
  --erledigt-blass:#E8F4EC;
  --frist:         #B3261E;
  --frist-flaeche: #FBEAE8;
  --linie:         #E6E1D6;
  --linie-fein:    #F0ECE2;
  --linie-stark:   #D5CEBE;
  --text:          #17223A;
  --text-leise:    #5C6B84;
  /* 4,29:1 auf Papier war zu wenig -- nachgeschaerft auf 4,73. */
  --text-still:    #666F80;

  /* Rundungen sagen etwas: Arbeitsflaechen 14, Listenzeilen 8,
     Marken 5. Nicht vereinheitlichen -- die Rundung zeigt die
     Ebene an. */
  --radius:        14px;
  --radius-zeile:  8px;
  --radius-marke:  5px;
  --breite:        34rem;   /* Formulare und Vorgangsansicht */
  --breite-weit:   76rem;   /* Uebersichten mit mehreren Fenstern */
}

* { box-sizing: border-box; }

/* Muss vor allen display-Regeln stehen: eine eigene
   display-Angabe schlaegt sonst das hidden-Attribut, und ein
   verstecktes Overlay bleibt sichtbar und faengt jeden Klick ab. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Die Ansicht füllt den Rest des Fensters -- nicht das ganze
   Fenster. Über ihr steht die Kopfleiste (und in der
   Entwicklung der Hinweisstreifen); mit 100dvh war jede Seite
   um genau deren Höhe zu lang und liess sich ein Stück
   herunterrollen, ohne dass unten etwas stand. */
.ansicht { min-height: calc(100dvh - var(--kopf-hoehe, 4.75rem)); }
.ansicht[hidden] { display: none; }

/* Wer angemeldet ist, sieht das Anmeldeformular nie -- auch
   nicht für die zwei Bilder, die das Skript zum Anlaufen
   braucht. Die Klasse setzt ein kurzes Skript im Kopf der
   Seite, noch bevor der Rumpf gelesen wird; genommen wird sie
   in zeige('anmeldung'), also genau dann, wenn das Formular
   wirklich gebraucht wird.

   Das Gegenstück fehlt bewusst: Wer KEIN Token hat, bekommt
   die Klasse gar nicht erst -- das Formular steht dann sofort
   da, ohne leere Seite davor. */
.lena-angemeldet #ansicht-anmeldung { display: none; }

main {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 1.25rem 1.125rem 4rem;
}

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: var(--breite);
  margin: 0 auto;
  padding: .75rem 1.125rem;
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
}


.aktenzeichen {
  flex: 1;
  font-size: .875rem;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

.zurueck {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: -.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.zurueck:hover { background: #f0eee9; }

/* ---------- Typografie ---------- */
h1 { margin: 0 0 .25rem; font-size: 1.5rem; font-weight: 500; letter-spacing: -.01em; }
h2 { margin: 0 0 1rem; font-size: 1.1875rem; font-weight: 500; letter-spacing: -.005em; }

.unterzeile { margin: 0 0 1.75rem; color: var(--text-leise); font-size: .9375rem; }
.position   { margin: 0 0 .125rem; font-size: .8125rem; color: var(--text-still); }

/* ---------- Karten und Formular ---------- */
.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.5rem 1.375rem;
}
.karte--schmal { max-width: 22rem; margin: 3.5rem auto; }

label {
  display: block;
  margin: 1rem 0 .375rem;
  font-size: .875rem;
  color: var(--text-leise);
}

input[type=text], input[type=email], input[type=password],
input[type=date], input[type=datetime-local], input[type=number],
select, textarea {
  width: 100%;
  padding: .6875rem .75rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: 1rem;   /* unter 16px zoomt iOS beim Fokus hinein */
}
textarea { min-height: 6.5rem; resize: vertical; }

input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, .eintrag:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* ---------- Knoepfe ---------- */
/* Der gefuellte Knopf steht fuer die Handlung, die den Vorgang
   weiterbringt. Tinte auf Weiss statt Schwarz: es bleibt in der
   Farbfamilie und hebt sich trotzdem klar ab.

   Der Kommentar stand vorher ZWISCHEN dem Selektor und der
   naechsten Regel -- dadurch hing ".knopf" an
   ".knopf--haupt:hover", und die Grundgestaltung fehlte
   vollstaendig. Jeder Knopf war so gross wie sein Text. */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .6875rem 1.25rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
}

.knopf--haupt:hover { background: var(--tinte-hell); border-color: var(--tinte-hell); color: #fff; }
.knopf:hover { background: #f6f4f0; }
/* Ein kleiner Knopf -- fuer Kopf- und Fussleisten.
   
   Diese Klasse stand in editor.css, vorlagen.css und
   generator.css, in zwei verschiedenen Groessen. Auf Seiten,
   die keines dieser Blaetter laden, war sie wirkungslos: Die
   Knoepfe erschienen in voller Groesse und sprengten die
   Kopfzeile. Sie gehoert hierher, wo jede Seite sie findet. */
.knopf--klein {
  width: auto;
  margin: 0;
  padding: .4375rem 1rem;
  font-size: .8125rem;
}

.knopf--haupt { margin-top: 1.5rem; background: var(--text); color: var(--papier); border-color: var(--text); }
.knopf--haupt:hover { background: #3a3833; }
.knopf:disabled, .knopf--haupt:disabled { opacity: .5; cursor: default; }

.knopf-text {
  padding: .25rem;
  border: 0;
  background: none;
  color: var(--text-leise);
  font: inherit;
  font-size: .875rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Arbeitsliste ---------- */
/* Die Kante links ist keine Verzierung, sondern die Ampel. Sie
   bleibt sichtbar, wenn die Zeile schmal wird und die Marke
   rechts umbricht. */
.eintrag {
  display: flex;
  align-items: center;
  gap: .6875rem;
  width: 100%;
  margin-bottom: .5rem;
  padding: .8125rem .9375rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-zeile);
  background: var(--flaeche);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.eintrag:hover { border-color: var(--linie-stark); }
.eintrag::before {
  content: "";
  flex: none;
  width: 3px;
  align-self: stretch;
  border-radius: 8px;
  background: var(--linie-stark);
}
.eintrag--spaet::before   { background: var(--frist); }
.eintrag--offen::before   { background: var(--register); }
.eintrag--fertig::before  { background: var(--erledigt); }
.eintrag:hover { border-color: var(--linie-stark); }
/* Titel und Prozess untereinander, Aktenzeichen rechts. Alle
   drei nebeneinander zu setzen bricht die Zeile um, sobald ein
   Prozessname laenger wird -- und dann steht "KI-" ueber
   "Gespraech". */
.eintrag__haupt { flex: 1; min-width: 0; }
.eintrag__titel { display: block; font-weight: 600; }
.eintrag__prozess { display: block; margin-top: .0625rem; font-size: .8125rem; color: var(--text-leise); }
.eintrag__meta {
  flex: none;
  font-size: .75rem;
  color: var(--text-still);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.eintrag--frist {
  border-left: 3px solid var(--frist);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.eintrag--frist .eintrag__meta { color: var(--frist); }

.leer {
  padding: 2.5rem 1rem;
  border: 1px dashed var(--linie-stark);
  border-radius: var(--radius);
  text-align: center;
  color: var(--text-leise);
}
/* Die Fußleiste trägt einen Hauptknopf und daneben Verweise.
   Ohne feste Ausrichtung laufen sie auseinander, sobald ein
   Verweis dazukommt. */
.listen-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linie);
}
.listen-fuss .knopf { width: auto; margin: 0; }
.listen-fuss .knopf-text { margin: 0; }
#weitere-bereiche {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}
#weitere-bereiche a { font-size: .875rem; }
.kontext dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; }
.kontext dt { color: var(--text-leise); font-size: .875rem; }
.kontext dd { margin: 0; }

/* ---------- Verlauf ---------- */
.verlauf { margin: 0; padding: 0 0 0 1.25rem; list-style: none; border-left: 2px solid var(--linie); }
.verlauf li { position: relative; padding-bottom: 1.125rem; }
.verlauf li::before {
  content: "";
  position: absolute;
  left: -1.6875rem;
  top: .5rem;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--linie-stark);
}
.verlauf li:last-child { padding-bottom: 0; }
.verlauf__was { font-size: .9375rem; }
.verlauf__wer { display: block; margin-top: .125rem; font-size: .8125rem; color: var(--text-still); }
/* Der Grund eines Eintrags -- warum er entstanden ist.
   In dunkel.css stand die Klasse schon, hier fehlte sie: Die
   Fristenseite bringt ihre eigene aus editor.css mit, die
   Vorgangsansicht laedt die nicht. */
.verlauf__grund {
  display: block;
  margin-top: .1875rem;
  font-size: .8125rem;
  font-style: italic;
  color: var(--text-leise);
}

/* ---------- Meldungen ---------- */
.fehler {
  margin: 1rem 0 0;
  padding: .75rem .875rem;
  border-radius: var(--radius);
  background: var(--frist-flaeche);
  color: var(--frist);
  font-size: .9375rem;
}

#umgebungshinweis {
  padding: .4375rem 1.125rem;
  background: #efece5;
  border-bottom: 1px solid var(--linie);
  color: var(--text-leise);
  font-size: .8125rem;
  text-align: center;
}

.lader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(251, 250, 248, .7);
}
.lader span {
  width: 1.5rem; height: 1.5rem;
  border: 2px solid var(--linie-stark);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: dreh .7s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

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

.abschnitt { margin: 1.75rem 0 .75rem; font-size: 1rem; font-weight: 500; }

/* ---------- Rückfragedialog ---------- */
/* Bewusst keine Sprechblasen-Optik: Lena ist kein Messenger,
   und der Vorgang ist ernst. Nur eine ruhige Abfolge. */
.dialog { margin-bottom: 1rem; }

/* ---------- Das Gespräch als Verlauf ---------- */
/* Links Lena, rechts die eigene Antwort. Der Verlauf bleibt
   stehen: Bei drei bis fünf Fragen ist das der Unterschied
   zwischen einem Gespräch und einem Verhör. */
.dialog__zeile {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  margin-bottom: .75rem;
}
.dialog__zeile--ich { justify-content: flex-end; }

.dialog__zeichen {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  color: var(--text-still);
}
/* Bei einer Folge gleicher Sprecher bleibt der Platz frei,
   damit die Blasen bündig untereinander stehen. */
.dialog__zeichen--leer { visibility: hidden; }

.dialog__block { max-width: 76%; }
.dialog__zeile--ich .dialog__block { text-align: right; }

.dialog__wer {
  display: block;
  font-size: .8125rem;
  color: var(--text-leise);
  margin-bottom: .1875rem;
}
.dialog__text {
  display: inline-block;
  text-align: left;
  padding: .625rem .875rem;
  border-radius: 14px;
  border-top-left-radius: 4px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--text);
}
.dialog__zeile--ich .dialog__text {
  border-radius: 14px;
  border-top-right-radius: 4px;
  background: transparent;
  color: var(--text-leise);
}

/* ---------- Fortschritt und erfasste Angaben ---------- */
.dialog-fortschritt {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
}
.dialog-fortschritt__wort { font-size: .8125rem; color: var(--text-leise); }
.dialog-fortschritt__balken {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--linie);
  overflow: hidden;
}
.dialog-fortschritt__anteil {
  display: block;
  height: 3px;
  width: 0;
  background: var(--tinte);
}

.dialog-erfasst {
  margin: .75rem 0 1rem;
  padding: .625rem .75rem;
  border-radius: 14px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
}
.dialog-erfasst__wort {
  margin: 0 0 .5rem;
  font-size: .8125rem;
  color: var(--text-leise);
}
.dialog-erfasst__marken { display: flex; flex-wrap: wrap; gap: .375rem; }
.dialog-marke {
  font-size: .8125rem;
  padding: .1875rem .5625rem;
  border-radius: var(--radius);
  border: 1px solid var(--linie);
  color: var(--text-still);
}
.dialog-marke--steht {
  border-color: var(--gut);
  color: var(--gut);
  background: var(--gut-flaeche);
}

.dialog-eingabe { display: flex; gap: .5rem; align-items: flex-end; }
.dialog-eingabe textarea { margin: 0; resize: none; transition: background .15s; }

/* Der Senden-Knopf war so breit wie das Eingabefeld und sah
   damit wie die Hauptsache aus. Die Hauptsache ist das Tippen. */
.dialog-senden {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linie-stark);
  border-radius: 12px;
  background: transparent;
  color: var(--tinte);
  cursor: pointer;
}
.dialog-senden:hover { background: var(--flaeche); }
/* Das Zeichen darf im Flexraum nicht schrumpfen -- sonst bleibt
   vom Pfeil ein Punkt. */
.dialog-senden svg { flex: none; width: 1.25rem; height: 1.25rem; }
.dialog-senden:disabled { cursor: default; opacity: 1; }
.dialog-eingabe textarea:disabled { cursor: default; }

/* Auf dem Handy wird zusammengeschoben: schmalere Ränder,
   breitere Blasen. Sonst bleibt für den Text kaum Platz. */
@media (max-width: 30rem) {
  .dialog__block { max-width: 88%; }
  .dialog__zeile { gap: .4375rem; margin-bottom: .625rem; }
  .dialog__zeichen { width: 1.5rem; height: 1.5rem; font-size: .6875rem; }
  .dialog__text { padding: .5rem .6875rem; font-size: .875rem; }
  .dialog-erfasst { padding: .5rem .625rem; }
  .dialog-senden { width: 2.5rem; height: 2.5rem; }
}

.dialog-eingabe .knopf {
  display: block;
  width: 100%;
  margin-top: .75rem;
  padding: .8125rem 1rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-zeile);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
}
.knopf:hover { border-color: var(--tinte); color: var(--tinte); }





.zahl--warnung .zahl__label { color: var(--frist); }


/* ---------- Hilfefeld ---------- */
/* Lenas Einstieg und das einzige Farbfeld der Anwendung. Es
   steht bei allen Rollen an derselben Stelle und mit demselben
   Wortlaut -- was sich unterscheidet, sind die Vorschlaege
   darunter. */
/* Steht bei allen Rollen an derselben Stelle und mit demselben
   Wortlaut. Was sich unterscheidet, sind die Vorschläge -- sie
   zeigen, was hier überhaupt geht. */
.hilfe {
  margin-bottom: 1.75rem;
  padding: 1.1875rem 1.375rem;
  border-radius: var(--radius);
  background: var(--tinte);
  color: #fff;
}
.hilfe__titel {
  margin: 0 0 .75rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.018em;
}
.hilfe__zeile { display: flex; gap: .5625rem; }
.hilfe__zeile input {
  flex: 1;
  margin: 0;
  padding: .6875rem .875rem;
  border: 1px solid transparent;
  border-radius: 9px;
  background: #fff;
  color: var(--text);
  font-size: .90625rem;
}
.hilfe__zeile input::placeholder { color: var(--text-still); }
.hilfe__zeile .knopf {
  width: auto;
  margin: 0;
  flex: none;
  padding: .6875rem 1.25rem;
  border-color: #fff;
  background: #fff;
  color: var(--tinte);
  font-weight: 600;
}
.hilfe__zeile .knopf:hover { background: var(--register-blass); border-color: var(--register-blass); color: var(--tinte); }

.hilfe__vorschlaege { display: flex; flex-wrap: wrap; gap: .4375rem; margin-top: .6875rem; }
.hilfe__pille {
  padding: .3125rem .8125rem;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--radius-marke);
  background: rgba(255,255,255,.1);
  color: #fff;
  font: inherit;
  font-size: .78125rem;
  cursor: pointer;
}
.hilfe__pille:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.6); }
.hilfe__fuss {
  margin: .6875rem 0 0;
  font-size: .75rem;
  text-align: left;
  color: var(--text-still);
}

.hilfe__treffer {
  display: block;
  width: 100%;
  margin-top: .4375rem;
  padding: .5625rem .8125rem;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius-zeile);
  background: rgba(255,255,255,.1);
  color: #fff;
  font: inherit;
  font-size: .84375rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.hilfe__treffer:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); }
.hilfe__treffer-unter { display: block; font-size: .75rem; font-weight: 400; color: #C9D6E6; margin-top: .125rem; }

/* ---------- Marken ---------- */
.marke {
  padding: .125rem .5625rem;
  border-radius: var(--radius-marke);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
.m-spaet  { background: var(--frist-flaeche);    color: var(--frist); }
.m-offen  { background: var(--register-blass);   color: #3D2A05; }
.m-fertig { background: var(--erledigt-blass);   color: var(--erledigt); }
.m-ruht   { background: var(--linie-fein);       color: var(--text-leise); }

/* ---------- Überschriften ---------- */
h1 { letter-spacing: -.018em; }
h2, h3 { letter-spacing: -.018em; }

/* ============================================================
   Uebersichtsseiten
   ============================================================
   Ganze Breite, Inhalte in Fenstern. Ein Fenster ist die
   Grundeinheit: Kopfzeile mit Titel und Zahl, darunter eine
   Liste ohne eigene Raender. So sieht man die Ordnung, bevor
   man liest. */
body.weit main { max-width: var(--breite-weit); }
body.weit .kopf { max-width: var(--breite-weit); }

.raster-zwei {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1rem;
  align-items: start;
}
.raster-drei {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .75rem;
}

.fenster {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  overflow: hidden;
}
.fenster > header {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .875rem 1.125rem;
  border-bottom: 1px solid var(--linie-fein);
}
.fenster > header h2 {
  margin: 0;
  flex: 1;
  font-size: .96875rem;
  font-weight: 700;
  letter-spacing: -.018em;
}
.fenster__zahl {
  min-width: 1.375rem;
  padding: .0625rem .5rem;
  border-radius: var(--radius-marke);
  background: var(--linie-fein);
  color: var(--text-leise);
  font-size: .78125rem;
  font-weight: 700;
  text-align: center;
}
.fenster__zahl--spaet { background: var(--frist-flaeche); color: var(--frist); }
.fenster__inhalt { padding: .875rem 1.125rem; }

/* Listenzeilen in einem Fenster tragen keinen eigenen Rahmen --
   sie sind Zeilen, keine Karten. Die Ampelkante bleibt. */
.fenster .eintrag {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--linie-fein);
  border-radius: 0;
  padding: .8125rem 1.125rem;
}
.fenster .eintrag:last-child { border-bottom: 0; }
.fenster .eintrag:hover { background: #FCFBF8; }

.fenster__leer {
  padding: 1.5rem 1.125rem;
  text-align: center;
  color: var(--text-still);
  font-size: .875rem;
}

/* Kennzahlen */
.zahlen { display: flex; gap: .625rem; }
.zahl {
  flex: 1;
  padding: .75rem .9375rem;
  border-radius: var(--radius-zeile);
  background: var(--linie-fein);
}
.zahl--warnung { background: var(--register-blass); }
.zahl--spaet   { background: var(--frist-flaeche); }
.zahl__wert { display: block; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.zahl__label { display: block; font-size: .75rem; color: var(--text-leise); }
.zahl--warnung .zahl__label, .zahl--warnung .zahl__wert { color: #3D2A05; }
.zahl--spaet .zahl__label,   .zahl--spaet .zahl__wert   { color: var(--frist); }

/* Verteilung */
.balken { display: flex; align-items: center; gap: .625rem; margin-bottom: .5rem; }
.balken:last-child { margin-bottom: 0; }
.balken__name { width: 7.5rem; flex: none; font-size: .8125rem; }
.balken__spur { flex: 1; height: 7px; border-radius: 5px; background: var(--linie-fein); overflow: hidden; }
.balken__wert { height: 100%; background: var(--tinte); }
.balken__zahl {
  width: 1.5rem;
  flex: none;
  text-align: right;
  font-size: .78125rem;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

.ueberblick { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.ueberblick__titel {
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--text-leise);
}

/* Erledigtes hinter einem Verweis: es soll zeigen, dass der
   eigene Antrag entschieden wurde -- nicht die Liste füllen. */
.fenster__mehr {
  display: block;
  width: 100%;
  padding: .625rem 1.125rem;
  border: 0;
  border-top: 1px solid var(--linie-fein);
  background: none;
  color: var(--text-leise);
  font: inherit;
  font-size: .8125rem;
  text-align: left;
  cursor: pointer;
}
.fenster__mehr:hover { background: #FCFBF8; color: var(--tinte); }


/* ---------- Der Experte am Arbeitsplatz ---------- */
.experte {
  margin-top: .75rem;
  padding: .875rem 1rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 18px;
}
.experte__kopf {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}
.experte__name { flex: 1; font-size: .9375rem; font-weight: 600; }


/* ---------- Begründung einer Entscheidung ---------- */
/* Über den Knöpfen, nicht darunter: Wer erst entscheidet und
   dann ein Textfeld sieht, hat schon geklickt. */
.begruendung { margin: 1rem 0 1.25rem; }
.begruendung__wort {
  display: block;
  margin-bottom: .3125rem;
  font-size: .875rem;
  color: var(--text-leise);
}
.begruendung__feld {
  width: 100%;
  margin: 0;
  padding: .5625rem .75rem;
  border: 1px solid var(--linie-stark);
  border-radius: 10px;
  font: inherit;
  font-size: .9375rem;
  line-height: 1.5;
  resize: vertical;
}
.begruendung__wann { margin: .375rem 0 0; font-size: .75rem; }
.begruendung__fehlt { margin: .5rem 0 0; }


/* ============================================================
   Die Vorgangskachel
   ============================================================
   Bisher stand in der Zeile, WO ein Vorgang steht. Was seit dem
   letzten Hinsehen geschehen ist, stand im Vorgang selbst --
   hinter einem Klick und einem Verlauf mit acht Zeilen.
   ============================================================ */
.vkachel {
  /* Seit dem Umbau vom 21.09.: eine Zeile der Liste, keine
     Karte. Getrennt durch eine duenne Linie, nicht durch
     Abstand und Rahmen. */
  border-top: 1px solid var(--linie-fein);
  background: none;
}
.vkachel:first-child { border-top: 0; }

.vkachel__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: baseline;
  width: 100%;
  padding: .75rem 1.125rem .25rem;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.vkachel__kopf:hover { background: var(--papier); }

.vkachel__symbol {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 11px;
  border: 1px solid var(--linie-stark);
  font-size: .9375rem;
  font-weight: 700;
}
.vkachel__symbol svg { flex: none; }
.vkachel__symbol--blau      { background: #E6F1FB; border-color: #85B7EB; color: #185FA5; }
.vkachel__symbol--tuerkis   { background: #E1F5EE; border-color: #5DCAA5; color: #0F6E56; }
.vkachel__symbol--violett   { background: #EEEDFE; border-color: #AFA9EC; color: #534AB7; }
.vkachel__symbol--bernstein { background: #FAEEDA; border-color: #EF9F27; color: #854F0B; }
.vkachel__symbol--rosa      { background: #FBE9EF; border-color: #ED93B1; color: #993556; }
.vkachel__symbol--koralle   { background: #FCECE5; border-color: #F0A98C; color: #A2451F; }
.vkachel__symbol--gruen     { background: #EAF4DC; border-color: #97C459; color: #3B6D11; }
.vkachel__symbol--grau      { background: var(--papier); border-color: var(--linie-stark); color: var(--text-leise); }

.vkachel__titel { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.vkachel__az    { display: block; font-size: .75rem; color: var(--text-leise); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Wie weit -- grob, aber richtig herum. */
.vkachel__leiste { display: flex; align-items: center; gap: .25rem; padding: .375rem 1.125rem .75rem; }
.vkachel__stufe { flex: 1; height: 4px; border-radius: 999px; background: var(--linie); }
.vkachel__stufe--fertig { background: #97C459; }
.vkachel__stufe--jetzt  { background: #2C8FA5; }
.vkachel__stufenwort { margin-left: .375rem; font-size: .71875rem; color: var(--text-leise); white-space: nowrap; }

/* ---------- Das Band ----------
   Seine Farbe sagt, ob etwas gelungen ist, ob es wieder bei mir
   liegt, ob eine Frist läuft -- oder ob nichts zu tun ist. Das
   erkennt man beim Überfliegen, ohne ein Wort zu lesen. */
.vkachel__band {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  gap: .625rem;
  align-items: center;
  margin: .375rem 1.125rem .25rem;
  padding: .5rem .625rem;
  border-radius: 10px;
}
/* Wartet der Antrag nur, ist das Band eine schlichte Zeile
   ("Bei der Schulleitung · seit 3 Tagen") -- farbig wird es
   erst, wenn etwas geschehen ist. */
.vkachel__band--still { margin-bottom: 0; padding: 0; }
.vkachel__band:not(.vkachel__band--still) { margin-bottom: .25rem; }
.vkachel__band--ok    { background: #EAF4DC; }
.vkachel__band--rueck { background: #FAEEDA; }
.vkachel__band--frist { background: #FCEBEB; }
.vkachel__band--tun   { background: #E6F1FB; }
.vkachel__band--still { background: none; }
.vkachel__band--still .vkachel__bandsymbol { display: none; }
.vkachel__band--still { grid-template-columns: minmax(0, 1fr) auto; }
.vkachel__band--still .vkachel__bandtext { display: flex; flex-wrap: wrap; gap: 0 .375rem; }
.vkachel__band--still .vkachel__bandwer { margin-top: 0; }
.vkachel__band--still .vkachel__bandwer::before { content: "· "; }

.vkachel__bandsymbol {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
}
.vkachel__bandsymbol svg { flex: none; display: block; }
.vkachel__bandsymbol--ok    { background: #D3E8B4; color: #33610C; }
.vkachel__bandsymbol--rueck { background: #F5DEB4; color: #7A4708; }
.vkachel__bandsymbol--frist { background: #F5CFCF; color: #932727; }
.vkachel__bandsymbol--tun   { background: #CFE2F6; color: #14528F; }
.vkachel__bandsymbol--still { background: var(--papier); color: var(--text-leise); }

.vkachel__bandtext { font-size: .8125rem; line-height: 1.45; min-width: 0; }
.vkachel__bandwer  { display: block; margin-top: .125rem; font-size: .71875rem; color: var(--text-leise); }
/* Die Begründung steht im Zitat, nicht hinter einem Klick. */
.vkachel__zitat {
  display: block;
  margin-top: .375rem;
  padding-left: .625rem;
  border-left: 2px solid currentColor;
  font-size: .8125rem;
}

.vkachel__handlung { display: flex; gap: .375rem; }
.vkachel__knopf {
  display: inline-flex;
  align-items: center;
  height: 2.25rem;
  padding: 0 .875rem;
  border-radius: 9px;
  border: 1px solid;
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.vkachel__knopf--haupt { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }
.vkachel__knopf--doku  { background: #EAF4DC; border-color: #97C459; color: #3B6D11; }

@media (max-width: 34rem) {
  .vkachel__band { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .vkachel__handlung { grid-column: 2 / 3; }
  /* Das stille Band hat kein Zeichen -- sonst landete der Text
     in der 1,5rem schmalen Zeichenspalte, Wort fuer Wort. */
  .vkachel__band.vkachel__band--still { grid-template-columns: minmax(0, 1fr); }
  .vkachel__band--still .vkachel__handlung { grid-column: auto; }
}


/* Wenn die Kacheln fehlen, soll man den Grund sehen. */
.kachelfehler {
  margin: 0 0 .75rem;
  padding: .5625rem .75rem;
  border: 1px solid #EF9F27;
  border-radius: 10px;
  background: #FAEEDA;
  color: #854F0B;
  font-size: .8125rem;
  line-height: 1.45;
}


/* ============================================================
   Das Vorgangsfenster
   ============================================================
   Angaben links, Verlauf rechts -- statt zwei Seiten mit einem
   Verweis dazwischen. Beim Genehmigen braucht man beides
   zugleich: die Zahlen UND die Frage, ob der Vorgang schon
   einmal zurueckgegeben wurde.
   ============================================================ */
.vorgangsfenster {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
  max-width: var(--breite-weit);
}
/* Die Kopfzeile ist so breit wie der Inhalt darunter.
   
   Sie stand auf --breite (34rem), das Fenster auf
   --breite-weit (76rem): Das Aktenzeichen schwebte schmal und
   mittig über einem breiten Inhalt. */
#ansicht-schritt .kopf { max-width: var(--breite-weit); }

.vorgangsfenster__links { min-width: 0; }
.vorgangsfenster__rechts {
  min-width: 0;
  padding: 1rem 1.125rem;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--papier);
  position: sticky;
  top: 1rem;
}
.vorgangsfenster__ueber {
  margin: 0 0 .75rem;
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-leise);
}

/* Unter 60rem passen zwei Spalten nicht nebeneinander. Dann
   steht der Verlauf DARUNTER -- nicht nirgends.
   
   Hier stand "display: none" mit dem Gedanken, der Knopf in
   der Kopfzeile führe dorthin. Auf einem schmalen Fenster war
   der Verlauf damit einfach weg, und der Knopf führte auf eine
   Seite, die das Fenster verlässt. Untereinander ist die
   richtige Antwort auf zu wenig Breite. */
@media (max-width: 60rem) {
  .vorgangsfenster { grid-template-columns: minmax(0, 1fr); }
  .vorgangsfenster__rechts {
    border-left: 0;
    border-top: 1px solid var(--linie);
    border-radius: 0 0 12px 12px;
    position: static;
  }
}

/* Der Verlauf steht immer im Fenster -- oben rechts oder
   unten. Der Knopf hätte nichts mehr zu öffnen. */
#verlauf-oeffnen { display: none; }


/* ============================================================
   Der Vorgang als Fenster
   ============================================================
   Die Liste bleibt darunter stehen. Wer schliesst, ist wieder
   dort, wo er war -- an derselben Stelle, mit demselben
   Bildlauf. Vorher war es ein Seitenwechsel.
   ============================================================ */
body.fenster-offen { overflow: hidden; }

body.fenster-offen #ansicht-schritt {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5rem 1.25rem;
  overflow-y: auto;
  background: rgba(12, 20, 34, .55);
  min-height: 0;
}

/* Kopfzeile, Kette, Streifen und Inhalt bilden ZUSAMMEN die
   Karte.
   
   Kette und Streifen fehlten in dieser Aufzählung: Sie trugen
   ihre eigene Begrenzung, aber keine Breite -- in einem
   flex-Behälter mit align-items:center schrumpften sie auf
   ihren Inhalt und standen versetzt neben der Karte. */
body.fenster-offen #ansicht-schritt .kopf,
body.fenster-offen #ansicht-schritt .vf-kette,
body.fenster-offen #ansicht-schritt .vf-streifen,
body.fenster-offen #ansicht-schritt .vorgangsfenster {
  width: 100%;
  max-width: var(--breite-weit);
  margin: 0 auto;
  background: var(--flaeche);
  border-left: 1px solid var(--linie-stark);
  border-right: 1px solid var(--linie-stark);
}
body.fenster-offen #ansicht-schritt .vf-kette,
body.fenster-offen #ansicht-schritt .vf-streifen {
  border-radius: 0;
}
body.fenster-offen #ansicht-schritt .kopf {
  border: 1px solid var(--linie-stark);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  padding: .875rem 1.25rem;
}
body.fenster-offen #ansicht-schritt .vorgangsfenster {
  border: 1px solid var(--linie-stark);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  padding: 1.25rem;
}

/* Der Zurueckknopf wird zum Schliessen -- er sitzt rechts,
   wo man ihn an einem Fenster sucht. */
body.fenster-offen #ansicht-schritt .kopf .zurueck { order: 3; margin-left: auto; }
body.fenster-offen #ansicht-schritt .kopf .aktenzeichen { order: 1; }
body.fenster-offen #ansicht-schritt .kopf #verlauf-oeffnen { order: 2; }

@media (max-width: 60rem) {
  body.fenster-offen #ansicht-schritt { padding: 0; }
  body.fenster-offen #ansicht-schritt .kopf,
  body.fenster-offen #ansicht-schritt .vorgangsfenster {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}

/* Die schmale Verlaufsseite gehoert zum selben Fenster.
   ------------------------------------------------------------
   Sie war eine gewoehnliche Ansicht: zeige('verlauf') blendete
   die Grundansicht aus und sie ein. Seit Paket 93 macht das
   Fenster sich selbst auf und zu, und die Grundansicht bleibt
   stehen -- dann stuende der Verlauf UNTER dem Lehrerzimmer,
   ausserhalb des Bildschirms. Er liegt jetzt dort, wo auch der
   Schritt liegt. */
body.fenster-offen #ansicht-verlauf {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5rem 1.25rem;
  overflow-y: auto;
  background: rgba(12, 20, 34, .55);
  min-height: 0;
}
body.fenster-offen #ansicht-verlauf .kopf,
body.fenster-offen #ansicht-verlauf > main {
  width: 100%;
  max-width: var(--breite-weit);
  margin: 0 auto;
  background: var(--flaeche);
  border-left: 1px solid var(--linie-stark);
  border-right: 1px solid var(--linie-stark);
}
body.fenster-offen #ansicht-verlauf .kopf {
  border: 1px solid var(--linie-stark);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  padding: .875rem 1.25rem;
}
body.fenster-offen #ansicht-verlauf > main {
  border: 1px solid var(--linie-stark);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  padding: 1.25rem;
}
@media (max-width: 60rem) {
  body.fenster-offen #ansicht-verlauf { padding: 0; }
  body.fenster-offen #ansicht-verlauf .kopf,
  body.fenster-offen #ansicht-verlauf > main {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}



/* ============================================================
   Kette und Streifen im Vorgangsfenster
   ============================================================
   "Schritt 3 von 3" sagt, WIE WEIT ein Vorgang ist, aber nicht
   WO er steht und was noch kommt. Die Namen beantworten beides.
   ============================================================ */
.vf-kette {
  display: flex;
  max-width: var(--breite-weit);
  margin: 0 auto;
  padding: .25rem 1.25rem 1rem;
}
.vf-kette[hidden] { display: none; }
.vf-kette__glied { flex: 1; min-width: 0; }
.vf-kette__balken {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: var(--linie);
  margin-right: 4px;
}
.vf-kette__glied:last-child .vf-kette__balken { margin-right: 0; }
.vf-kette__balken--fertig { background: #97C459; }
.vf-kette__balken--jetzt  { background: #2C8FA5; }
.vf-kette__wort {
  display: block;
  margin-top: .4375rem;
  font-size: .71875rem;
  line-height: 1.3;
  color: var(--text-still);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vf-kette__glied--fertig .vf-kette__wort { color: var(--text-leise); }
.vf-kette__glied--jetzt  .vf-kette__wort { color: var(--tinte); font-weight: 600; }

/* Der Streifen traegt die Farbe der NACHRICHT. Der Knopf
   gehoert zu ihr -- handelt sie von einem Dokument, traegt sie
   es; sonst nicht. */
.vf-streifen {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  max-width: var(--breite-weit);
  margin: 0 auto;
  padding: .8125rem 1.25rem;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.vf-streifen[hidden] { display: none; }
.vf-streifen--ok    { background: #EAF4DC; }
.vf-streifen--still { background: var(--papier); }
.vf-streifen__symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
}
.vf-streifen__symbol svg { flex: none; display: block; }
.vf-streifen__symbol--ok    { background: #D3E8B4; color: #33610C; }
.vf-streifen__symbol--still { background: var(--flaeche); color: var(--text-leise); }
.vf-streifen__text { font-size: .84375rem; line-height: 1.45; min-width: 0; }
.vf-streifen__wer  { display: block; margin-top: .125rem; font-size: .71875rem; color: var(--text-leise); }

@media (max-width: 44rem) {
  .vf-kette__wort { display: none; }
}


/* ---------- Kopfzeile des Vorgangsfensters ----------
   Der Prozessname ist die Überschrift, das Aktenzeichen die
   Unterzeile. Umgekehrt las man "TSS-2026-0014" und musste
   raten, worum es geht. */
.vf-titelblock { min-width: 0; flex: 1; }
.vf-titel {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vf-titelblock .aktenzeichen {
  display: block;
  margin-top: .125rem;
  font-size: .75rem;
  font-weight: 400;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}
.vf-zustand {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .625rem;
  border-radius: 8px;
  border: 1px solid;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
.vf-zustand[hidden] { display: none; }
.vf-zustand--fertig { background: #EAF4DC; border-color: #97C459; color: #3B6D11; }
.vf-zustand--warte  { background: var(--papier); border-color: var(--linie-stark); color: var(--text-leise); }
.vf-zustand--still  { background: var(--papier); border-color: var(--linie); color: var(--text-still); }
.vf-zustand--tun    { background: #E6F1FB; border-color: #85B7EB; color: #185FA5; }

#schritt-position[hidden], #schritt-titel[hidden] { display: none; }


/* ---------- Zeichen im Kopf des Vorgangsfensters ---------- */
.vf-symbol { flex: none; width: 2.75rem; height: 2.75rem; font-size: 1rem; }

/* ---------- Dateien ----------
   Ein Elternbrief aus einer geprüften Vorlage ist etwas anderes
   als ein PDF, das jemand beigelegt hat. Das Zeichen links sagt
   es in einem Blick. */
#vf-dateien[hidden] { display: none; }
.vf-ueber {
  margin: 1.5rem 0 .625rem;
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.vf-datei {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 2rem;
  gap: .75rem;
  align-items: center;
  padding: .5625rem .6875rem;
  margin-bottom: .375rem;
  border: 1px solid var(--linie);
  border-radius: 11px;
  background: var(--papier);
}
.vf-datei__symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
}
.vf-datei__symbol svg, .vf-datei__laden svg { flex: none; display: block; }
.vf-datei__symbol--lena { background: #EEEDFE; color: #534AB7; }
.vf-datei__symbol--hoch { background: #E6F1FB; color: #185FA5; }
.vf-datei__mitte { min-width: 0; }
.vf-datei__name  { display: block; font-size: .84375rem; font-weight: 600; overflow-wrap: anywhere; }
.vf-datei__unter { display: block; margin-top: .125rem; font-size: .71875rem; color: var(--text-leise); }
.vf-datei__laden {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  border: 1px solid #97C459;
  background: #EAF4DC;
  color: #3B6D11;
  cursor: pointer;
}


/* ============================================================
   Die Startseite nach dem Umbau vom 21.09.2026
   ============================================================
   Zwei Spalten: die Arbeit breit, die eigenen Antraege schmal.
   Was eine Handlung verlangt, bekommt den Platz.

   In beiden Listen trennt eine duenne Linie die Eintraege --
   nicht Abstand und Rahmen. So passen neun Zeilen dorthin, wo
   vorher drei Kacheln standen, und das Auge findet trotzdem
   die Grenze.
   ============================================================ */
.raster-arbeit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

/* Jede Spalte ist so hoch wie das Fenster, abzueglich der
   Kopfleiste und etwas Luft -- alle drei gleich. Kopf und
   Filter stehen fest, darunter rollt die Liste in sich.

   dvh statt vh, wo der Browser es kennt: Am Telefon schiebt
   sich die Adressleiste ein und aus, und 100vh ist dort hoeher
   als das, was man sieht. */
.spalte {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Seit Paket 81 steht ueber den Spalten nur noch der Kopf
     "Vorgänge" -- Leiste, Kopf, Luft und (in der Entwicklungs-
     umgebung) der Hinweisstreifen zusammen 13,5rem. So enden
     alle drei im Fenster.

     Seit Paket 86 bricht die Kopfleiste bei schmalen Fenstern
     um und ist dann doppelt so hoch. Die 4,75rem darin waren
     geraten; jetzt meldet die Leiste ihre wirkliche Höhe als
     --nav-hoehe, und 8,75rem ist alles Übrige. Ohne das ragte
     die dritte Spalte unten aus dem Fenster. */
  height: calc(100vh - var(--nav-hoehe, 4.75rem) - 8.75rem);
  height: calc(100dvh - var(--nav-hoehe, 4.75rem) - 8.75rem);
  min-height: 22rem;
}
.spalte__kopf { flex: none; flex-direction: column; align-items: stretch; container-type: inline-size; }
.spalte__liste {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.spalte__unter { margin: .125rem 0 0; font-size: .8125rem; color: var(--text-leise); }
.spalte__unter[hidden] { display: none; }

/* ---------- Home (Paket 81) ----------
   Nur Begruessung, Eingabezeile und ein Hinweis, wenn etwas
   draengt. Der Block steht etwas ueber der Mitte, oben
   verankert: Waechst darunter eine Antwort des Assistenten,
   springt die Eingabezeile nicht nach oben weg. */
.home {
  display: flex;
  justify-content: center;
  padding-top: clamp(2.5rem, 22vh, 13rem);
  padding-bottom: 3rem;
}
.home__buehne {
  width: 100%;
  max-width: 52rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.home__gruss {
  margin: 0 0 1.5rem;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 780;
  letter-spacing: -.03em;
}
.home .hilfe { width: 100%; box-sizing: border-box; text-align: left; }
.home-hinweis {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .375rem .625rem;
  margin-top: 1rem;
  min-height: 2.75rem;
  box-sizing: border-box;
  padding: .375rem .5rem .375rem 1.125rem;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  color: var(--text);
  font-size: .9375rem;
  text-decoration: none;
}
.home-hinweis[hidden] { display: none; }
.home-hinweis--spaet { border-color: var(--frist); }
.home-hinweis__teil { display: inline-flex; align-items: center; gap: .5rem; }
.home-hinweis__teil--spaet { font-weight: 700; }
.home-hinweis__punkt { width: .5rem; height: .5rem; border-radius: 99px; background: var(--register); }
.home-hinweis__teil--spaet .home-hinweis__punkt { background: var(--frist); }
.home-hinweis__trenner { color: var(--text-leise); }
.home-hinweis__weiter {
  margin-left: .25rem;
  padding: .375rem .75rem;
  border-radius: 999px;
  background: var(--linie-fein);
  color: var(--tinte);
  font-size: .875rem;
  font-weight: 650;
}
.home-hinweis__weiter::after { content: " \2192"; }

/* ---------- Kopf der Vorgaenge (Paket 81) ---------- */
/* Unten nur wenig Luft: Die Spalten sollen im Fenster enden. */
#ansicht-liste > main { padding-bottom: 1rem; margin-bottom: 0; }
/* .ansicht ist mindestens fensterhoch -- zusammen mit der Leiste
   darueber rollte die Seite damit immer um deren Hoehe. Home und
   Vorgaenge brauchen das nicht: Der Grund liegt am body. */
#ansicht-liste, #ansicht-home { min-height: 0; }
.vorgaenge-kopf { align-items: center; }
.vorgaenge-kopf__titel { flex-grow: 1; }
.vorgaenge-kopf .vorgaenge-kopf__suche { width: 19rem; max-width: 100%; margin: 0; }
@media (max-width: 44rem) {
  .vorgaenge-kopf { flex-wrap: wrap; }
  .vorgaenge-kopf .vorgaenge-kopf__suche { order: 3; width: 100%; }
}

/* Unter etwa 1100 Pixeln passen drei Spalten nicht mehr
   nebeneinander. Dann untereinander, jede hoechstens 70 % des
   Fensters -- sonst verdeckte die erste die beiden anderen. */
@media (max-width: 70rem) {
  .raster-arbeit { grid-template-columns: minmax(0, 1fr); }
  .spalte { height: auto; max-height: 70vh; max-height: 70dvh; min-height: 0; }
}

.fenster__kopf { flex-wrap: wrap; row-gap: .75rem; }
.fenster__anzahl { font-weight: 500; color: var(--text-leise); }

/* ---------- Der Filter nach Frist ---------- */
.afilter {
  display: flex;
  flex-wrap: nowrap;
  gap: .125rem;
  padding: .25rem;
  border-radius: 12px;
  background: var(--linie-fein);
}
.afilter[hidden] { display: none; }
.afilter__knopf {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3125rem;
  min-height: 2.25rem;
  padding: 0 .375rem;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--text-leise);
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.afilter__knopf[aria-pressed="true"] { background: var(--tinte); color: var(--papier); }
.afilter__zahl {
  padding: .0625rem .375rem;
  border-radius: 999px;
  background: var(--linie);
  font-size: .75rem;
  font-weight: 700;
}
.afilter__knopf[aria-pressed="true"] .afilter__zahl { background: #3A5588; color: var(--papier); }

/* Steht HINTER der Grundregel von .afilter -- davor wuerde
   sie von ihr ueberschrieben (gleiche Gewichtung, spaeter
   gewinnt).

   Der Filter: eine Reihe, wenn die Spalte breit genug ist --
   sonst zwei Reihen zu je zwei Knoepfen. Entschieden wird an
   der Breite der SPALTE, nicht des Fensters: Bei 1440 Pixeln
   ist eine Spalte kaum breiter als ein Telefon. */
@container (max-width: 27rem) {
  .afilter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Eine Gruppe: ein Prozess ---------- */
.agruppe { border-top: 1px solid var(--linie); padding-bottom: .375rem; }
.agruppe:first-child { border-top: 0; }
.agruppe__kopf {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0;
  padding: .75rem 1.125rem .25rem;
  font-size: .875rem;
  font-weight: 700;
}
.agruppe__symbol { width: 1.75rem; height: 1.75rem; border-radius: 8px; font-size: .8125rem; }
.agruppe__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agruppe__zahl { font-size: .8125rem; font-weight: 500; color: var(--text-leise); white-space: nowrap; }
.agruppe__knopf {
  margin: .125rem 0 .25rem 3.125rem;
  min-height: 2.25rem;
  padding: 0 .625rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--tinte);
  font: inherit;
  font-size: .84375rem;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- Eine Zeile ----------
   Fuer ein Drittel der Breite: drei kurze Zeilen statt einer
   langen Tabellenzeile.

     Auftrag .............................. Frist
     Kernangaben
     Aktenzeichen · angelegt am ...   seit N Tagen   */
.azeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* Aktenzeichen und Anlagedatum bekommen eine Zeile fuer
     sich -- geteilt mit "seit N Tagen" wurden sie abgeschnitten. */
  grid-template-areas: "auftrag frist" "kern seit" "meta meta";
  gap: .1875rem .75rem;
  align-items: baseline;
  width: 100%;
  padding: .625rem 1.125rem .625rem 3.125rem;
  border: 0;
  border-top: 1px solid var(--linie-fein);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.agruppe__kopf + .azeile { border-top-color: transparent; }
.azeile:hover { background: #FCFBF8; }
.azeile__auftrag { grid-area: auftrag; font-size: .90625rem; font-weight: 600; min-width: 0; }
.azeile__kern {
  grid-area: kern;
  font-size: .78125rem;
  color: var(--text-leise);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.azeile__meta {
  grid-area: meta;
  min-width: 0;
  font-size: .78125rem;
  color: var(--text-leise);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.azeile__az { font-variant-numeric: tabular-nums; }
.azeile__seit { grid-area: seit; justify-self: end; font-size: .78125rem; color: var(--text-leise); white-space: nowrap; }
.azeile__seit--lange { color: #7A4708; font-weight: 600; }
.azeile__frist {
  grid-area: frist;
  justify-self: end;
  padding: .125rem .5rem;
  border-radius: 999px;
  font-size: .71875rem;
  font-weight: 600;
  white-space: nowrap;
}
.azeile__frist--spaet   { background: var(--frist-flaeche); color: var(--frist); }
.azeile__frist--woche   { background: #FAEEDA; color: #7A4708; }
.azeile__frist--spaeter { background: var(--linie-fein); color: var(--text-leise); }
/* "ohne Frist" leise, ohne Pille: Es steht an den meisten
   Zeilen und ist damit keine Nachricht. */
.azeile__frist--offen   { padding-left: 0; padding-right: 0; background: none; color: var(--text-still); font-weight: 400; }

@media (max-width: 48rem) {
  .azeile { padding-left: 1.125rem; }
  .agruppe__knopf { margin-left: .75rem; }
}

/* ---------- Ihre Antraege ----------
   Name oben, darunter Aktenzeichen und Anlagedatum, dann wo es
   steht und wie weit. Wo ich dran bin: eine kleine Marke und
   was zu tun ist -- keine eigene Karte. */
.vkachel__meta {
  padding: 0 1.125rem;
  font-size: .78125rem;
  color: var(--text-leise);
  cursor: pointer;
}
.vkachel__meta .vkachel__az { display: inline; font-size: inherit; }
.vkachel__dran {
  align-self: center;
  padding: .125rem .5rem;
  border-radius: 999px;
  background: #FAEEDA;
  color: #7A4708;
  font-size: .71875rem;
  font-weight: 700;
  white-space: nowrap;
}
.vkachel__zutun {
  display: block;
  padding: .375rem 1.125rem 0;
  font-size: .84375rem;
  font-weight: 600;
  color: #7A4708;
}
.vkachel--dran .vkachel__leiste { padding-top: .5rem; }
.vkachel--dran { background: #FFFBF3; }
/* Die gewohnte Zeile, wo keine Kachel kam: untereinander wie
   die Kacheln, nicht nebeneinander -- in einem Drittel der
   Breite brach sonst der Name Wort fuer Wort um. */
#eigene-liste .eintrag { flex-direction: column; align-items: flex-start; gap: .25rem; }
#eigene-liste .eintrag .eintrag__meta { margin-left: 0; text-align: left; }

/* ---------- Kuerzlich abgeschlossen ---------- */
.ezeile {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .75rem 1.25rem;
  border: 0;
  border-top: 1px solid var(--linie-fein);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ezeile:first-child { border-top: 0; }
.ezeile:hover { background: #FCFBF8; }
.ezeile__text { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.ezeile__titel { font-size: .875rem; font-weight: 600; }
.ezeile__unter { font-size: .78125rem; color: var(--text-leise); }
.ezeile__wie   { font-size: .78125rem; color: var(--text); }
.ezeile .vkachel__bandsymbol { align-self: flex-start; margin-top: .125rem; }
.ezeile { align-items: flex-start; }