/* ============================================================
   Plenum · 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.
   Plenum 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;
}

.ansicht { min-height: 100dvh; }
.ansicht[hidden] { 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); }

/* ---------- 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: Plenum ist kein Messenger,
   und der Vorgang ist ernst. Nur eine ruhige Abfolge. */
.dialog { margin-bottom: 1rem; }

/* ---------- Das Gespräch als Verlauf ---------- */
/* Links Plenum, 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 ---------- */
/* Plenums 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 {
  margin-bottom: .75rem;
  border: 1px solid var(--linie-stark);
  border-radius: 14px;
  overflow: hidden;
  background: var(--flaeche);
}

.vkachel__kopf {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  gap: .875rem;
  align-items: center;
  width: 100%;
  padding: .8125rem .9375rem .625rem;
  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__mitte { min-width: 0; }
.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; }

.vkachel__stand {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  padding: .1875rem .5625rem;
  border-radius: 7px;
  border: 1px solid;
  font-size: .71875rem;
  white-space: nowrap;
}
.vkachel__punkt { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vkachel__stand--fertig { background: #EAF4DC; border-color: #97C459; color: #3B6D11; }
.vkachel__stand--warte  { background: var(--papier); border-color: var(--linie-stark); color: var(--text-leise); }
.vkachel__stand--still  { background: var(--papier); border-color: var(--linie); color: var(--text-still); }
.vkachel__stand--tun    { background: #E6F1FB; border-color: #85B7EB; color: #185FA5; }
.vkachel__stand--bald   { background: #FAEEDA; border-color: #EF9F27; color: #854F0B; }
.vkachel__stand--spaet  { background: #FCEBEB; border-color: #F09595; color: #A32D2D; }

/* Wie weit -- grob, aber richtig herum. */
.vkachel__leiste { display: flex; align-items: center; gap: .25rem; padding: 0 .9375rem .75rem 3.375rem; }
.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.75rem minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: .6875rem .9375rem;
  border-top: 1px solid var(--linie-fein);
}
.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__bandsymbol {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  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: 2rem;
  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.75rem minmax(0, 1fr); }
  .vkachel__handlung { grid-column: 2 / 3; }
}


/* 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 Aufgabenkachel
   ============================================================
   Bei "Ihre Antraege" steht der VORGANG vorn -- man fragt: was
   ist aus meinem Antrag geworden? Hier steht die AUFGABE vorn:
   was muss ich tun?
   ============================================================ */
.akachel {
  margin-bottom: .75rem;
  border: 1px solid var(--linie-stark);
  border-radius: 14px;
  overflow: hidden;
  background: var(--flaeche);
}
.akachel--jetzt { border-color: #F09595; }

.akachel__kopf {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  gap: .875rem;
  align-items: start;
  width: 100%;
  padding: .8125rem .9375rem .5rem;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.akachel__kopf:hover { background: var(--papier); }
.akachel__mitte { min-width: 0; }
.akachel__auftrag { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.35; }
.akachel__woher   { display: block; margin-top: .1875rem; font-size: .75rem; color: var(--text-leise); }

.akachel__frist {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  padding: .1875rem .5625rem;
  border-radius: 7px;
  border: 1px solid;
  font-size: .71875rem;
  white-space: nowrap;
}
.akachel__frist--spaet { background: #FCEBEB; border-color: #F09595; color: #A32D2D; }
.akachel__frist--bald  { background: #FAEEDA; border-color: #EF9F27; color: #854F0B; }
.akachel__frist--tun   { background: #E6F1FB; border-color: #85B7EB; color: #185FA5; }
.akachel__frist--offen { background: var(--papier); border-color: var(--linie-stark); color: var(--text-leise); }

.akachel__angaben { display: flex; flex-wrap: wrap; gap: .375rem; padding: 0 .9375rem .625rem 3.875rem; }
.akachel__ang {
  padding: .1875rem .5rem;
  border-radius: 6px;
  border: 1px solid var(--linie);
  background: var(--papier);
  font-size: .71875rem;
}
.akachel__angwort { color: var(--text-leise); }

.akachel__fuss {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: .625rem .9375rem;
  border-top: 1px solid var(--linie-fein);
}
.akachel__seit { font-size: .71875rem; color: var(--text-leise); }

@media (max-width: 34rem) {
  .akachel__angaben { padding-left: .9375rem; }
}


/* ============================================================
   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--plenum { 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;
}