/* ============================================================
   Plenum · Mitarbeiter
   ============================================================
   Belegschaftskacheln und die Mitarbeiterseite.

   Die Formensprache kommt aus dunkel.css: Glasflaeche, blauer
   Rand, tuerkise Ueberzeile. Hier steht nur, was dort keine
   Entsprechung hat.
   ============================================================ */

/* ---------- Belegschaft ---------- */

.ma-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: .875rem;
  margin: 1.25rem 0;
}

.ma-kachel {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .9375rem 1rem;
  border: 1px solid rgba(106,180,255,.4);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(17,54,105,.5), rgba(8,26,59,.7));
  color: inherit;
  text-decoration: none;
  transition: transform .12s ease, border-color .12s ease;
}
.ma-kachel:hover {
  transform: translateY(-2px);
  border-color: rgba(79,230,255,.7);
}

/* Das Zeichen traegt die Farbe des Mitarbeiters. Sie ist das
   einzige, was ihn auf einen Blick unterscheidbar macht --
   deshalb bekommt sie die Flaeche und nicht nur einen Rand. */
.ma-kachel__zeichen,
.ma-zeichen {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 50%;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.ma-kachel__text { min-width: 0; }
.ma-kachel__text b {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
}
.ma-kachel__text span {
  display: block;
  margin-top: .125rem;
  color: #b2c2d7;
  font-size: .8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Kopf der Mitarbeiterseite ---------- */

.ma-kopf {
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: var(--breite-weit);
  margin: 0 auto;
  padding: 1rem 1.125rem .5rem;
}
.ma-zurueck {
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 9px;
  color: #c8d8ea;
  text-decoration: none;
}
.ma-zurueck:hover { background: rgba(106,180,255,.14); }

.ma-titel b { display: block; font-size: 1.0625rem; font-weight: 650; }
.ma-titel span { display: block; color: #b2c2d7; font-size: .8125rem; }

/* ---------- Reiter ---------- */

.ma-reiter {
  display: flex;
  gap: .125rem;
  max-width: var(--breite-weit);
  margin: 0 auto;
  padding: 0 1.125rem;
  border-bottom: 1px solid rgba(137,183,234,.16);
}
.ma-reiter__knopf {
  padding: .5625rem .875rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: #9fb3cc;
  font: inherit;
  font-size: .875rem;
  cursor: pointer;
}
.ma-reiter__knopf:hover { color: #e8f2ff; }
.ma-reiter__knopf[aria-selected="true"] {
  border-bottom-color: #4fe6ff;
  color: #fff;
  font-weight: 600;
}

.ma-bereich {
  max-width: var(--breite-weit);
  margin: 0 auto;
  padding: 1.25rem 1.125rem 4rem;
}

/* ---------- Gespraech ---------- */

.ma-verlauf {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 1.25rem;
}

.ma-blase {
  max-width: min(46rem, 88%);
  padding: .75rem 1rem;
  border-radius: 16px;
  font-size: .9375rem;
  line-height: 1.65;
}
.ma-blase p { margin: 0; white-space: pre-wrap; }

.ma-blase--ich {
  align-self: flex-end;
  background: linear-gradient(90deg, rgba(40,120,255,.34), rgba(139,67,255,.3));
  border: 1px solid rgba(106,180,255,.45);
}
.ma-blase--er {
  align-self: flex-start;
  border: 1px solid rgba(106,180,255,.3);
  background: rgba(8,30,62,.66);
}
.ma-blase--wartet { color: #8fa6c2; font-style: italic; }

.ma-blase__fuss {
  display: block;
  margin-top: .5rem;
  color: #8398b8;
  font-size: .6875rem;
}

/* ---------- Eingabe ---------- */

.ma-eingabe { display: flex; flex-wrap: wrap; gap: .625rem; align-items: flex-start; }
.ma-eingabe textarea { flex: 1 1 20rem; resize: vertical; }
.ma-hinweis {
  flex-basis: 100%;
  margin: 0;
  color: #8398b8;
  font-size: .75rem;
}

/* ---------- Steckbrief ---------- */

.ma-zwei {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
}
.ma-knopfzeile { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 1.25rem; }
.ma-nurlesen, .ma-summe {
  margin: 0 0 1rem;
  color: #b2c2d7;
  font-size: .875rem;
}
.ma-bescheid {
  margin: 1rem 0 0;
  padding: .75rem 1rem;
  border: 1px solid rgba(70,236,179,.32);
  border-radius: 12px;
  background: rgba(10,60,48,.35);
  color: #d6ecf5;
  font-size: .9375rem;
}

/* ---------- Laeufe ---------- */

.ma-laeufe { margin: 0; padding: 0; list-style: none; }
.ma-lauf {
  padding: .75rem 0;
  border-bottom: 1px solid rgba(137,183,234,.14);
}
.ma-lauf b { display: block; font-size: .9375rem; font-weight: 500; }
.ma-lauf span {
  display: block;
  margin-top: .25rem;
  color: #8398b8;
  font-size: .75rem;
}
.ma-lauf em {
  display: block;
  margin-top: .375rem;
  color: #ffc9c4;
  font-size: .8125rem;
  font-style: normal;
}
.ma-lauf--fehler b { color: #ffc9c4; }

@media (max-width: 34rem) {
  .ma-blase { max-width: 96%; }
  .ma-bereich { padding: 1rem .875rem 3rem; }
  .ma-kopf, .ma-reiter { padding-left: .875rem; padding-right: .875rem; }
}

/* ---------- Ausstattung ---------- */

.ma-ausstattung {
  margin: 1.5rem 0 0;
  padding: 1rem 1.125rem 1.25rem;
  border: 1px solid rgba(106,180,255,.3);
  border-radius: 16px;
  background: rgba(8,30,62,.4);
}
.ma-ausstattung legend {
  padding: 0 .5rem;
  color: #67dcff;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Der Schalter traegt seine Begruendung mit: Was ein Werkzeug
   kostet, gehoert dorthin, wo man es einschaltet -- nicht in
   eine Abrechnung, die man erst spaeter ansieht. */
.ma-schalter {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  cursor: pointer;
}
.ma-schalter input { margin-top: .25rem; width: 1.125rem; height: 1.125rem; flex: none; }
.ma-schalter b { display: block; font-size: .9375rem; font-weight: 600; }
.ma-schalter span span {
  display: block;
  margin-top: .125rem;
  color: #b2c2d7;
  font-size: .8125rem;
}

/* ---------- Quellen unter einer Antwort ---------- */

.ma-quellen {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-top: .625rem;
  padding-top: .625rem;
  border-top: 1px solid rgba(137,183,234,.18);
}
.ma-quelle {
  max-width: 100%;
  padding: .1875rem .5rem;
  border: 1px solid rgba(106,180,255,.32);
  border-radius: 8px;
  color: #9fd4ff;
  font-size: .6875rem;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ma-quelle:hover { border-color: #4fe6ff; color: #d6f3ff; }

/* ---------- Wissensbasis ---------- */

.ma-dateien { margin: 1.25rem 0 0; padding: 0; list-style: none; }

.ma-datei {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem 0;
  border-bottom: 1px solid rgba(137,183,234,.14);
}
.ma-datei__text { flex: 1; min-width: 0; }
.ma-datei__text b {
  display: block;
  font-size: .9375rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ma-datei__text span {
  display: block;
  margin-top: .1875rem;
  color: #8398b8;
  font-size: .75rem;
}
.ma-datei__text em {
  display: block;
  margin-top: .25rem;
  color: #ffc9c4;
  font-size: .8125rem;
  font-style: normal;
}

/* Der Stand ist wichtiger als der Dateiname: Eine Datei, die
   noch verarbeitet wird, ist noch nicht durchsuchbar -- und
   genau das will man wissen. */
.ma-stand {
  flex: none;
  padding: .125rem .5rem;
  border-radius: 8px;
  font-size: .6875rem;
  font-weight: 600;
}
.ma-stand--extrahiert { background: rgba(70,236,179,.16); color: #7fe8c4; }
.ma-stand--laeuft     { background: rgba(79,230,255,.16);  color: #8fe4ff; }
.ma-stand--neu        { background: rgba(137,183,234,.14); color: #b2c2d7; }
.ma-stand--fehler     { background: rgba(255,138,128,.18); color: #ffc9c4; }

.ma-datei__weg {
  flex: none;
  padding: .25rem .5rem;
  border: 1px solid rgba(255,138,128,.3);
  border-radius: 8px;
  background: none;
  color: #ffc9c4;
  font: inherit;
  font-size: .75rem;
  cursor: pointer;
}
.ma-datei__weg:hover { border-color: #ff8a80; }

/* Wissenstreffer unter einer Antwort -- dieselbe Form wie die
   Quellen aus dem Netz, aber ohne Verweis: Sie zeigen auf eine
   Datei, nicht auf eine Adresse. */
.ma-fund {
  padding: .1875rem .5rem;
  border: 1px solid rgba(70,236,179,.3);
  border-radius: 8px;
  color: #9fe8cf;
  font-size: .6875rem;
}

/* ---------- Gedaechtnis ---------- */

.ma-suchzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}
.ma-suchzeile input[type="search"] { flex: 1 1 16rem; }
.ma-schalter--schmal { margin: 0; align-items: center; }
.ma-schalter--schmal b { font-size: .8125rem; font-weight: 500; }

.ma-erinnerungen { margin: 0; padding: 0; list-style: none; }

.ma-erinnerung {
  padding: .875rem 0;
  border-bottom: 1px solid rgba(137,183,234,.14);
}
.ma-erinnerung__kopf {
  display: flex;
  align-items: baseline;
  gap: .625rem;
}
.ma-erinnerung__kopf b { flex: 1; font-size: .9375rem; font-weight: 600; }
.ma-erinnerung p {
  margin: .375rem 0 0;
  color: #c8d8ea;
  font-size: .875rem;
  line-height: 1.6;
}
.ma-erinnerung__fuss {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  align-items: center;
  margin-top: .5rem;
}
.ma-marke {
  padding: .0625rem .4375rem;
  border-radius: 6px;
  background: rgba(137,183,234,.14);
  color: #b2c2d7;
  font-size: .6875rem;
}
.ma-erinnerung__zeit { color: #8398b8; font-size: .6875rem; }

/* Angeheftet heisst: geht bei JEDER Frage mit und kostet
   entsprechend bei jeder Frage. Das darf man sehen. */
.ma-nadel {
  padding: .125rem .5rem;
  border: 1px solid rgba(106,180,255,.35);
  border-radius: 8px;
  background: none;
  color: #9fb3cc;
  font: inherit;
  font-size: .6875rem;
  cursor: pointer;
}
.ma-nadel--an {
  border-color: #4fe6ff;
  background: rgba(79,230,255,.16);
  color: #cdf3ff;
}
.ma-erinnerung--ueberholt { opacity: .55; }
.ma-erinnerung--ueberholt b { text-decoration: line-through; }

/* ---------- Budget ---------- */

/* Der Verbrauch steht auf der Startseite, nicht in einer
   Abrechnung: Was man erst am Monatsende sieht, kann man nicht
   mehr beeinflussen. */
.ma-budget { margin: 0 0 1.25rem; }
.ma-budget__zeile {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .4375rem;
  color: #b2c2d7;
  font-size: .8125rem;
}
.ma-budget__balken {
  height: 4px;
  border-radius: 2px;
  background: rgba(137,183,234,.16);
  overflow: hidden;
}
.ma-budget__balken i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #35e8ff, #2878ff);
  transition: width .3s ease;
}
.ma-budget--warnung .ma-budget__zeile { color: #ffd9a8; }
.ma-budget--warnung .ma-budget__balken i { background: linear-gradient(90deg, #ffb865, #ff8a4c); }
.ma-budget--voll .ma-budget__zeile { color: #ffc9c4; }
.ma-budget--voll .ma-budget__balken i { background: linear-gradient(90deg, #ff8a80, #e8514a); }

/* ---------- Kostenschaetzung im Editor ---------- */

.ma-schaetzung {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 1.25rem 0 0;
  padding: .875rem 1.125rem;
  border: 1px solid rgba(106,180,255,.3);
  border-radius: 14px;
  background: rgba(8,30,62,.4);
}
.ma-schaetzung div p:first-child {
  margin: 0;
  color: #8fa6c2;
  font-size: .6875rem;
}
.ma-schaetzung div p:last-child {
  margin: .125rem 0 0;
  font-size: 1.0625rem;
  font-weight: 600;
}
.ma-schaetzung__fuss {
  flex-basis: 100%;
  margin: 0;
  color: #8398b8;
  font-size: .6875rem;
  line-height: 1.6;
}

/* ---------- Auftragstafel ---------- */

.ma-auswahl-kopf {
  margin: 1.5rem 0 .625rem;
  font-size: .8125rem;
  color: #b2c2d7;
}
.ma-auswahl-kopf span { color: #67dcff; }

.ma-auswahl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: .5rem;
}

.ma-wahl {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .625rem .75rem;
  border: 1px solid rgba(106,180,255,.28);
  border-radius: 14px;
  background: rgba(8,30,62,.4);
  cursor: pointer;
}
.ma-wahl--an { border-color: #4fe6ff; background: rgba(79,230,255,.1); }
.ma-wahl input { width: 1.0625rem; height: 1.0625rem; flex: none; }

.ma-wahl__zeichen {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: .75rem;
  font-weight: 700;
}
.ma-wahl__text { min-width: 0; }
.ma-wahl__text b { display: block; font-size: .875rem; font-weight: 600; }
.ma-wahl__text span {
  display: block;
  color: #8fa6c2;
  font-size: .75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Die Spalten sind der Kern der Ansicht: Hier wird sichtbar,
   dass mehrere gleichzeitig arbeiten. Auf schmalen Geraeten
   werden daraus gestapelte Karten -- die Gleichzeitigkeit zeigt
   dann der Stand, nicht die Anordnung. */
.ma-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: .875rem;
  margin: 1.75rem 0;
}

.ma-spalte {
  display: flex;
  flex-direction: column;
  padding: .875rem 1rem;
  border: 1px solid rgba(106,180,255,.3);
  border-radius: 16px;
  background: rgba(8,30,62,.5);
}
.ma-spalte--fehler { border-color: rgba(255,138,128,.4); }

.ma-spalte__kopf {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-bottom: .625rem;
  border-bottom: 1px solid rgba(137,183,234,.16);
}
.ma-spalte__kopf b { flex: 1; font-size: .875rem; font-weight: 600; }

.ma-spalte__stand {
  flex: none;
  padding: .125rem .4375rem;
  border-radius: 6px;
  background: rgba(137,183,234,.14);
  color: #b2c2d7;
  font-size: .6875rem;
}
.ma-spalte__stand--aktiv  { background: rgba(79,230,255,.18);  color: #8fe4ff; }
.ma-spalte__stand--wartet { background: rgba(255,184,101,.18); color: #ffd9a8; }
.ma-spalte__stand--fertig { background: rgba(70,236,179,.18);  color: #7fe8c4; }
.ma-spalte__stand--fehler { background: rgba(255,138,128,.2);  color: #ffc9c4; }

.ma-spalte__inhalt {
  flex: 1;
  margin: .75rem 0 0;
  font-size: .8125rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* ---------- Freigabe ---------- */

/* Die Karte unterbricht den Gespraechsfluss mit Absicht. Ein
   Lauf, der auf eine Entscheidung wartet, ist keine
   Statusmeldung, sondern eine Aufgabe -- und wer sie uebersieht,
   dessen Lauf steht still, ohne dass es jemand merkt. */
.ma-freigabe {
  align-self: stretch;
  margin: .25rem 0;
  padding: .875rem 1rem;
  border: 1px solid rgba(255,184,101,.45);
  border-radius: 16px;
  background: rgba(70,45,10,.4);
}
.ma-freigabe__kopf {
  margin: 0 0 .5rem;
  color: #ffd9a8;
  font-size: .875rem;
  font-weight: 700;
}
.ma-freigabe p { margin: 0 0 .5rem; font-size: .875rem; line-height: 1.6; }
.ma-freigabe__grund {
  color: #c9b596;
  font-size: .8125rem !important;
  font-style: italic;
}
.ma-freigabe .ma-knopfzeile { margin-top: .75rem; }

/* ---------- Konferenz ---------- */

.ma-konf-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.ma-konf-kopf b { display: block; font-size: 1.0625rem; font-weight: 650; }
.ma-konf-kopf span { display: block; color: #b2c2d7; font-size: .8125rem; }
.ma-konf-kopf .ma-knopfzeile { margin: 0; }

.ma-konf-verlauf {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: 1.25rem 0;
}

/* Ein Beitrag traegt die Farbe seines Mitarbeiters am Rand.
   Auf einen Blick sieht man, wer wie oft zu Wort kam. */
.ma-beitrag {
  border-left: 3px solid #2878ff;
  border-radius: 0 12px 12px 0;
  background: rgba(8,30,62,.55);
  padding: .75rem 1rem;
}
.ma-beitrag__kopf {
  margin: 0 0 .375rem;
  font-size: .75rem;
  font-weight: 600;
  color: #cfe0f2;
}
.ma-beitrag__text {
  margin: 0;
  font-size: .875rem;
  line-height: 1.65;
  white-space: pre-wrap;
}

/* Regieanweisungen der Moderation: eingerueckt, kleiner, ohne
   Farbbalken. Sie rahmen das Gespraech, sie sind nicht Teil
   davon. */
.ma-regie {
  margin-left: 1.75rem;
  padding: .5rem .875rem;
  border-radius: 10px;
  background: rgba(137,183,234,.08);
  color: #9fb3cc;
  font-size: .8125rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.ma-protokoll {
  margin-top: 1.75rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid rgba(70,236,179,.35);
  border-radius: 16px;
  background: rgba(10,60,48,.28);
}
.ma-protokoll h3 { margin: 0 0 .625rem; font-size: .9375rem; }
.ma-protokoll p {
  margin: 0;
  font-size: .875rem;
  line-height: 1.7;
  white-space: pre-wrap;
}

/* ---------- Beitrag eines hinzugezogenen Kollegen ---------- */

/* Er bekommt Namensschild, Zeichen und seine Farbe. Vorher
   verschwand sein Beitrag in der Antwort der Moderation -- man
   sah das Ergebnis, aber nicht, wer was gesagt hat. Bei einer
   moderierten Runde ist genau das die interessante
   Information.

   Die Moderation bleibt bewusst ohne Farbbalken: So sieht man
   auf einen Blick, wer die Runde fuehrt und wer beitraegt. */
.ma-kollege {
  align-self: flex-start;
  display: flex;
  gap: .625rem;
  max-width: min(46rem, 88%);
}

.ma-kollege__zeichen {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  font-size: .6875rem;
  font-weight: 700;
}

.ma-kollege__blase {
  min-width: 0;
  padding: .625rem .8125rem;
  border-left: 3px solid #2878ff;
  border-top: 1px solid rgba(106,180,255,.26);
  border-right: 1px solid rgba(106,180,255,.26);
  border-bottom: 1px solid rgba(106,180,255,.26);
  border-radius: 4px 14px 14px 4px;
  background: rgba(8,30,62,.6);
}

.ma-kollege__kopf {
  margin: 0 0 .3125rem;
  font-size: .6875rem;
  font-weight: 600;
  color: #cfe0f2;
}
.ma-kollege__kopf span { font-weight: 400; color: #8398b8; }

.ma-kollege__text {
  margin: 0;
  font-size: .875rem;
  line-height: 1.65;
  white-space: pre-wrap;
}

@media (max-width: 34rem) {
  .ma-kollege { max-width: 96%; }
}

/* ---------- Artefakte ---------- */

.ma-vorschau { margin: 1.25rem 0; }

/* Die Vorschau laeuft in einem abgeschotteten Rahmen ohne
   Skripte. Das Artefakt ist von einem Sprachmodell geschrieben;
   es einfach auszufuehren hiesse, jedem Mitarbeiter Zugriff auf
   die Sitzung des Betrachters zu geben. */
.ma-rahmen {
  width: 100%;
  height: 32rem;
  border: 1px solid rgba(106,180,255,.3);
  border-radius: 14px;
  background: #fff;
}

.ma-quelltext {
  margin: 1rem 0;
  padding: .875rem 1rem;
  max-height: 32rem;
  overflow: auto;
  border: 1px solid rgba(106,180,255,.24);
  border-radius: 14px;
  background: rgba(3,20,44,.7);
  color: #d6e6f7;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8125rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.ma-dateiwahl {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin: 1.25rem 0 0;
}

/* ---------- Woran gerade gearbeitet wird ---------- */

/* Die Bruecke ueber das fluechtige Gespraech: Sie haelt fest,
   an welchem Artefakt gearbeitet wird, auch wenn der Verlauf im
   Fenster leer ist. */
.ma-arbeitetan {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: .5625rem .875rem;
  border: 1px solid rgba(79,230,255,.3);
  border-radius: 12px;
  background: rgba(79,230,255,.08);
  font-size: .8125rem;
  color: #cdf3ff;
}
.ma-arbeitetan span { flex: 1; min-width: 0; }
.ma-arbeitetan a { text-decoration: none; }

/* ---------- Gespraechskopf ---------- */

.ma-gespraechskopf {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  align-items: center;
  margin-bottom: 1rem;
  color: #8fa6c2;
  font-size: .75rem;
}
.ma-gespraechskopf span { flex: 1; min-width: 0; }

/* Ein Lauf ist kein Eintrag in einer Liste, sondern eine Stelle
   im Gespraech. Dass man dorthin zurueck kann, muss man sehen. */
.ma-lauf--klickbar { cursor: pointer; }
.ma-lauf--klickbar:hover b { color: #8fe4ff; }
.ma-lauf--klickbar:focus-visible {
  outline: 2px solid #4fe6ff;
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---------- Werkbank ---------- */

.ma-klasse { margin: 1.75rem 0; }

/* Die Wirkungsklasse ist die wichtigste Ordnung im Katalog.
   Sie entscheidet, was ohne Rueckfrage laufen darf -- also
   gehoert sie in die Ueberschrift und nicht in eine Fussnote. */
.ma-klasse__kopf {
  margin: 0 0 .25rem;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ma-klasse__kopf--lesend    { color: #7fe8c4; }
.ma-klasse__kopf--erzeugend { color: #67dcff; }
.ma-klasse__kopf--wirkend   { color: #ffd9a8; }

.ma-klasse__text {
  margin: 0 0 .875rem;
  color: #8fa6c2;
  font-size: .8125rem;
  line-height: 1.55;
}

.ma-werkzeuge { display: flex; flex-direction: column; gap: .5rem; }

.ma-werkzeug {
  display: flex;
  gap: .875rem;
  align-items: flex-start;
  padding: .75rem .9375rem;
  border: 1px solid rgba(106,180,255,.26);
  border-radius: 14px;
  background: rgba(8,30,62,.45);
}
.ma-werkzeug--wirkend {
  border-color: rgba(255,184,101,.38);
  background: rgba(70,45,10,.32);
}
.ma-werkzeug--geplant { opacity: .55; }

.ma-werkzeug__text { flex: 1; min-width: 0; }
.ma-werkzeug__text b { display: block; font-size: .9375rem; font-weight: 600; }
.ma-werkzeug__text p {
  margin: .1875rem 0 0;
  color: #b2c2d7;
  font-size: .8125rem;
  line-height: 1.55;
}
.ma-werkzeug__text span {
  display: block;
  margin-top: .375rem;
  color: #8398b8;
  font-size: .6875rem;
}

/* Der Schalter ist ein Knopf und sieht aus wie ein Zustand --
   das ist Absicht: Man liest ab, was gilt, und aendert es an
   derselben Stelle. */
.ma-werkzeug .ma-stand {
  flex: none;
  border: 0;
  font: inherit;
  font-size: .6875rem;
  font-weight: 600;
  cursor: pointer;
  padding: .25rem .625rem;
}
.ma-werkzeug .ma-stand:disabled { cursor: default; opacity: .6; }

/* ---------- Freigabe einer wirkenden Handlung ---------- */

/* Deutlich anders als eine Kollegenfrage. Was hier freigegeben
   wird, ist nicht zurueckzuholen -- das muss man sehen, bevor
   man klickt, nicht erst danach. */
.ma-freigabe--wirkend {
  border-color: rgba(255,138,128,.5);
  background: rgba(70,18,14,.42);
}
.ma-freigabe--wirkend .ma-freigabe__kopf { color: #ffc9c4; }
.ma-freigabe--wirkend p { color: #f4d8d4; }
.ma-freigabe--wirkend .ma-freigabe__grund { color: #d4aba5; }

.ma-quelltext--probe {
  border-color: rgba(70,236,179,.3);
  background: rgba(8,44,36,.55);
  color: #cfeee2;
  max-height: 14rem;
}

/* ---------- Pflichtenheft ---------- */

/* Aenderbar, bevor es gilt. Eine Liste, die man nur abnicken
   kann, ist keine Abnahme -- und der Prozessmaster kennt das
   Vorhaben schlechter als der Mensch davor. */
.ma-pflicht { margin: .875rem 0; padding: 0; list-style: none; counter-reset: p; }

.ma-pflicht__punkt {
  display: grid;
  grid-template-columns: 1fr minmax(10rem, 1fr) auto;
  gap: .5rem;
  align-items: center;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(137,183,234,.12);
}
.ma-pflicht__punkt input { margin: 0; }
.ma-pflicht__pruefbar { font-size: .8125rem; }

@media (max-width: 44rem) {
  .ma-pflicht__punkt { grid-template-columns: 1fr; }
}

/* ---------- Lauflicht ---------- */

/* Ohne diese Zeile sieht eine arbeitende Werkstatt genauso aus
   wie eine stehengebliebene -- und man wartet auf etwas, das
   nicht mehr kommt. Sie sagt immer eines von vier Dingen:
   arbeitet, wartet auf dich, angehalten, fertig. */
.ma-lauflicht {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin: 0 0 .75rem;
  padding: .5rem .875rem;
  border-radius: 10px;
  background: rgba(137,183,234,.08);
  font-size: .8125rem;
  color: #b2c2d7;
}
.ma-lauflicht span:nth-child(2) { flex: 1; min-width: 0; }

.ma-lauflicht__punkt {
  flex: none;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: #8398b8;
}

.ma-lauflicht--arbeitet { background: rgba(79,230,255,.1); color: #cdf3ff; }
.ma-lauflicht--arbeitet .ma-lauflicht__punkt {
  background: #4fe6ff;
  animation: ma-pulsieren 1.2s ease-in-out infinite;
}

.ma-lauflicht--wartet { background: rgba(255,184,101,.12); color: #ffd9a8; }
.ma-lauflicht--wartet .ma-lauflicht__punkt { background: #ffb865; }

.ma-lauflicht--angehalten { background: rgba(255,138,128,.12); color: #ffc9c4; }
.ma-lauflicht--angehalten .ma-lauflicht__punkt { background: #ff8a80; }

.ma-lauflicht--fertig { background: rgba(70,236,179,.12); color: #9fe8cf; }
.ma-lauflicht--fertig .ma-lauflicht__punkt { background: #46ecb3; }

@keyframes ma-pulsieren {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.7); }
}

@media (prefers-reduced-motion: reduce) {
  .ma-lauflicht--arbeitet .ma-lauflicht__punkt { animation: none; }
}

/* Eigene Antworten im Konferenzverlauf. Sie sahen bisher aus
   wie Beitraege von Mitarbeitern -- man liest den Verlauf dann
   falsch. */
.ma-beitrag--mensch {
  border-left-color: #8fa6c2;
  background: rgba(40,60,95,.45);
}
.ma-regie--system {
  border-left: 2px solid rgba(255,184,101,.5);
  color: #d8c3a4;
}

/* Prompt-Bausteine in der Werkbank */
#w-promptliste .ma-werkzeug { margin-bottom: .75rem; }
#w-promptliste textarea {
  width: 100%;
  margin-top: .625rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78125rem;
  line-height: 1.6;
}

/* ---------- Themeprobe ---------- */

/* Ein Theme aus einer Liste zu waehlen, ohne es zu sehen, ist
   Raten. Die Probe ist ein verkleinertes Anmeldebild und
   benutzt dieselben Variablen wie das echte. */
.ma-themeprobe {
  display: grid;
  place-items: center;
  margin: 1rem 0 1.25rem;
  padding: 2rem 1rem;
  border-radius: 16px;
  background: var(--t-grund, #061933);
  min-height: 12rem;
}

.ma-themeprobe__karte {
  width: min(20rem, 100%);
  padding: 1.25rem 1.375rem;
  border: 1px solid var(--t-rand, rgba(106,180,255,.3));
  border-radius: var(--t-rundung, 20px);
  background: var(--t-karte, rgba(8,30,62,.72));
  color: var(--t-text, #eaf4ff);
  font-family: var(--t-schrift, inherit);
}

.ma-themeprobe__ueberzeile {
  margin: 0 0 .25rem;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--t-still, #9db5d2);
}

.ma-themeprobe__karte b {
  display: block;
  font-size: 1.0625rem;
  margin-bottom: .875rem;
}

.ma-themeprobe__feld {
  display: block;
  padding: .5rem .75rem;
  margin-bottom: .625rem;
  border: 1px solid var(--t-rand, rgba(106,180,255,.3));
  border-radius: calc(var(--t-rundung, 20px) / 2 + 2px);
  background: var(--t-feld, rgba(3,20,44,.75));
  color: var(--t-still, #9db5d2);
  font-size: .8125rem;
}

.ma-themeprobe__knopf {
  display: block;
  padding: .5rem .75rem;
  border-radius: calc(var(--t-rundung, 20px) / 2 + 2px);
  background: var(--t-akzent, linear-gradient(120deg,#2878ff,#7a3ee8));
  color: var(--t-akzenttext, #fff);
  font-size: .8125rem;
  font-weight: 600;
  text-align: center;
}

/* ============================================================
   Spaces · die Uebersicht des Betreibers
   ============================================================
   Karten statt Liste. Eine Liste beantwortet "welche gibt es",
   ein Betreiber fragt aber "welcher kostet mich gerade etwas"
   und "welcher ist tot". Dafuer brauchen Zahlen Flaeche.

   Die Farbstreifen holen sich ihre Farben aus themes.css --
   dieselben Variablen wie das echte Anmeldebild. Sie koennen
   deshalb nicht veralten.
   ============================================================ */

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

.sp-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.sp-kopf__titel h2 { margin: 0; }
.sp-kopf__titel .ma-hinweis { margin: .25rem 0 0; }

.sp-kopf__zahlen {
  display: flex;
  gap: .5rem;
}

.sp-kennzahl {
  min-width: 6.25rem;
  padding: .625rem .875rem;
  border: 1px solid rgba(106,180,255,.28);
  border-radius: 14px;
  background: rgba(8,26,59,.5);
  text-align: right;
}

.sp-kennzahl b {
  display: block;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.sp-kennzahl span {
  display: block;
  margin-top: .125rem;
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9db5d2;
}

/* Die Monatssumme ist die Zahl, wegen der man die Seite
   aufmacht. Sie darf sich das nehmen. */
.sp-kennzahl--betont {
  border-color: rgba(79,230,255,.5);
  background: linear-gradient(180deg, rgba(17,54,105,.6), rgba(8,26,59,.7));
}

/* ---------- Raster ---------- */

.sp-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.5rem;
  align-items: start;
}

.sp-karte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(106,180,255,.32);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(17,54,105,.42), rgba(8,26,59,.68));
  transition: border-color .12s ease, transform .12s ease;
}
.sp-karte:hover { border-color: rgba(79,230,255,.6); }

/* Der Farbstreifen ist das Erkennungszeichen. Er traegt
   data-theme und faerbt sich daraus selbst -- deshalb steht
   hier keine einzige Themefarbe. */
.sp-karte__band {
  height: .4375rem;
  flex: none;
  background: var(--t-akzent, linear-gradient(120deg,#2878ff,#7a3ee8));
}

.sp-karte__leib {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  padding: 1rem 1.125rem 1.125rem;
}

/* Stillgelegt heisst: da, aber nicht gemeint. Blass genug, um
   es zu merken, lesbar genug, um es zu bedienen. */
.sp-karte--still { opacity: .62; }
.sp-karte--still .sp-karte__band { filter: grayscale(1); }
.sp-karte--still:hover { opacity: 1; }

.sp-karte__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .625rem;
}

.sp-karte__titel { min-width: 0; }
.sp-karte__titel b {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.sp-karte__titel span {
  display: block;
  margin-top: .125rem;
  font-size: .8125rem;
  color: #9db5d2;
  overflow-wrap: anywhere;
}

.sp-pille {
  flex: none;
  padding: .1875rem .5rem;
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.sp-pille--aktiv {
  color: #7ef0c2;
  background: rgba(23,201,138,.16);
  border: 1px solid rgba(23,201,138,.4);
}
.sp-pille--still {
  color: #c3ccd9;
  background: rgba(150,165,185,.14);
  border: 1px solid rgba(150,165,185,.35);
}

/* ---------- Vier Zahlen ---------- */

.sp-zahlen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}

.sp-zahl {
  padding: .5rem .625rem;
  border-radius: 12px;
  background: rgba(3,20,44,.45);
}
.sp-zahl b {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.sp-zahl span {
  display: block;
  margin-top: .0625rem;
  font-size: .6875rem;
  color: #9db5d2;
}

.sp-fuss {
  margin: 0;
  font-size: .75rem;
  color: #8fa6c2;
}

/* ---------- Knoepfe ---------- */

.sp-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-top: auto;
}

.sp-knopf {
  padding: .4375rem .75rem;
  border: 1px solid rgba(106,180,255,.4);
  border-radius: 10px;
  background: rgba(8,26,59,.6);
  color: inherit;
  font: inherit;
  font-size: .8125rem;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.sp-knopf:hover { border-color: rgba(79,230,255,.7); }
.sp-knopf:disabled { opacity: .5; cursor: default; }

.sp-knopf--haupt {
  border-color: transparent;
  background: linear-gradient(120deg, #2878ff, #7a3ee8);
  font-weight: 600;
}
.sp-knopf--an { border-color: rgba(79,230,255,.8); background: rgba(17,54,105,.75); }
.sp-knopf--weg { border-color: rgba(255,120,120,.45); color: #ffb3b3; }
.sp-knopf--weg:hover { border-color: rgba(255,120,120,.8); }

/* ---------- Farbfelder ---------- */

/* Ein Theme aus einer Auswahlliste zu waehlen, ohne es zu
   sehen, ist Raten. Das Feld zeigt Grund und Akzent des Themes
   nebeneinander -- mehr braucht man fuer die Unterscheidung
   nicht. */
.sp-farbfelder {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}

.sp-farbfeld {
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  background: var(--t-grund, #061933);
  cursor: pointer;
  transition: transform .1s ease, border-color .1s ease;
}
.sp-farbfeld:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.55); }

.sp-farbfeld__akzent {
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: var(--t-akzent, linear-gradient(120deg,#2878ff,#7a3ee8));
}

.sp-farbfeld--gewaehlt {
  border-color: #4fe6ff;
  box-shadow: 0 0 0 2px rgba(79,230,255,.35);
}

.sp-aussehen {
  padding: .75rem;
  border: 1px solid rgba(106,180,255,.25);
  border-radius: 12px;
  background: rgba(3,20,44,.4);
}
.sp-aussehen__text {
  margin: .5rem 0 0;
  font-size: .75rem;
  color: #9db5d2;
  min-height: 1rem;
}

/* ---------- Loeschen ---------- */

/* Vor der Rueckfrage stehen die Zahlen. "Wird unwiderruflich
   geloescht" ohne Umfang ist keine Auskunft. */
.sp-loeschen {
  padding: .875rem;
  border: 1px solid rgba(255,120,120,.45);
  border-left-width: 3px;
  border-radius: 12px;
  background: rgba(60,18,24,.45);
  display: flex;
  flex-direction: column;
  gap: .625rem;
}

.sp-loeschen__kopf {
  margin: 0;
  font-weight: 600;
  color: #ffb3b3;
}

.sp-loeschen__umfang {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: .375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-loeschen__umfang li { font-size: .75rem; }
.sp-loeschen__umfang b {
  display: block;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
}
.sp-loeschen__umfang span { color: #d2b6b6; }

.sp-loeschen__grund {
  margin: 0;
  font-size: .75rem;
  color: #d8c3a4;
}

.sp-loeschen__feld { width: 100%; }

/* ---------- Anlegekarte ---------- */

/* Sie steht im selben Raster wie die anderen. Ein Formular
   unterhalb der Liste wird uebersehen; eine leere Karte an
   ihrem Platz nicht. */
.sp-karte--neu {
  border-style: dashed;
  background: rgba(8,26,59,.35);
}
.sp-karte--neu .sp-karte__band { opacity: .55; }

.sp-neu__ueberzeile {
  margin: 0;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #4fe6ff;
}

.sp-neu__titel {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  margin-top: -.5rem;
}

.sp-neu__feld { width: 100%; }

.sp-neu__adresse {
  margin: -.375rem 0 0;
  font-size: .75rem;
  color: #9db5d2;
  overflow-wrap: anywhere;
}

@media (max-width: 30rem) {
  .sp-kopf__zahlen { width: 100%; }
  .sp-kennzahl { flex: 1; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-karte, .sp-farbfeld { transition: none; }
  .sp-farbfeld:hover { transform: none; }
}


/* Solange der Beschriftungskasten offen ist, nimmt die Karte
   die volle Rasterbreite. Fuenfzehn Felder in einer 19-rem-
   Spalte ergaeben eine Karte von zwei Metern Laenge. */
.sp-karte--weit { grid-column: 1 / -1; }
.sp-karte--weit .sp-texte__raster {
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.sp-karte--weit .sp-texte__feld--breit { grid-column: span 2; }
.sp-karte--weit .sp-zahlen { grid-template-columns: repeat(4, 1fr); }

/* ---------- Beschriftung eines Spaces ---------- */

/* Fuenfzehn Felder sind zu viele fuer eine Spalte und zu wenige
   fuer eine eigene Seite. Drei beschriftete Gruppen im Raster
   sind der Kompromiss: Man sieht, wozu ein Feld gehoert, ohne
   die Karte zu verlassen. */
.sp-texte {
  padding: .875rem;
  border: 1px solid rgba(106,180,255,.25);
  border-radius: 12px;
  background: rgba(3,20,44,.42);
  display: flex;
  flex-direction: column;
  gap: .625rem;
}

.sp-texte__kopf { margin: 0; font-weight: 600; }

.sp-texte__hinweis {
  margin: 0;
  font-size: .75rem;
  color: #9db5d2;
  line-height: 1.5;
}

.sp-texte__gruppe {
  margin: .375rem 0 -.125rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #4fe6ff;
}

.sp-texte__raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .5rem;
}

.sp-texte__feld { display: block; }
/* Felder mit Zeilenumbruch bekommen die ganze Breite -- sonst
   steht eine zweizeilige Schlagzeile in einem Schlitz. */
.sp-texte__feld--breit { grid-column: 1 / -1; }

.sp-texte__feld > span {
  display: block;
  margin-bottom: .1875rem;
  font-size: .6875rem;
  color: #9db5d2;
}

.sp-texte__feld input,
.sp-texte__feld textarea {
  width: 100%;
  font-size: .8125rem;
}
.sp-texte__feld textarea {
  resize: vertical;
  line-height: 1.45;
}

/* ============================================================
   Vorgaenge (Faelle, Vorhaben, Anlaesse)
   ============================================================
   Die Uebersicht benutzt bewusst die Kartenstile der Spaces
   (.sp-*): Eine Liste von Behaeltern mit Kennzahlen und
   Knopfreihe ist zweimal dasselbe. Zwei Saetze beinahe gleicher
   Stile waeren zwei Saetze, die auseinander laufen.

   Hier steht nur, was die Akte selbst braucht.
   ============================================================ */

/* Zwei zusaetzliche Staende. Offen und geschlossen teilen sich
   die Pillen der Spaces. */
.fa-pille--arbeit {
  color: #ffd79a;
  background: rgba(255,170,60,.16);
  border: 1px solid rgba(255,170,60,.4);
}
.fa-pille--fertig {
  color: #b6c8ff;
  background: rgba(90,130,255,.16);
  border: 1px solid rgba(90,130,255,.42);
}

/* Der Auftrag auf der Karte. Drei Zeilen, dann Schluss -- eine
   Liste aus Aktenzeichen beantwortet nicht, worum es geht, eine
   Liste aus Absaetzen liest niemand. */
.fa-auftrag {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: #c3d3e6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Die Akte ---------- */

.fa-zurueck { margin: 0 0 .75rem; font-size: .875rem; }
.fa-zurueck a { color: #9db5d2; text-decoration: none; }
.fa-zurueck a:hover { color: #4fe6ff; }

.fa-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.fa-kopf__titel h2 { margin: 0; }
.fa-kopf__titel .ma-hinweis { margin: .25rem 0 0; }
.fa-kopf__stand { min-width: 11rem; }
.fa-kopf__stand label {
  display: block;
  margin-bottom: .1875rem;
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9db5d2;
}
.fa-kopf__stand select { width: 100%; }

.fa-block {
  margin: 1.25rem 0;
  padding: 1rem 1.125rem 1.125rem;
  border: 1px solid rgba(106,180,255,.28);
  border-radius: 16px;
  background: rgba(8,26,59,.45);
}
.fa-block h3 { margin: 0 0 .375rem; font-size: 1rem; }
.fa-block .ma-hinweis { margin: 0 0 .75rem; }
.fa-block textarea { width: 100%; }

/* Der Loeschkasten sieht anders aus als der Rest. Wer hier
   klickt, soll gemerkt haben, dass er woanders ist. */
.fa-block--ernst {
  border-color: rgba(255,120,120,.4);
  background: rgba(60,18,24,.3);
}

.fa-zwei {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1rem;
}
.fa-zwei .fa-block { margin: 0; }

.fa-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
}
.fa-zeile input[type="text"],
.fa-zeile select { flex: 1 1 8rem; min-width: 0; }
.fa-zeile input[type="file"] { flex: 1 1 12rem; min-width: 0; }

/* ---------- Listen in der Akte ---------- */

.fa-liste {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .375rem;
}

.fa-eintrag {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .75rem;
  border: 1px solid rgba(106,180,255,.22);
  border-radius: 10px;
  background: rgba(3,20,44,.42);
}

.fa-eintrag__text {
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.fa-eintrag__text b {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.fa-eintrag__text span {
  display: block;
  margin-top: .0625rem;
  font-size: .75rem;
  color: #9db5d2;
}
a.fa-eintrag__text:hover b { color: #4fe6ff; }

/* Leere Listen sagen, was zu tun ist -- nicht nur, dass nichts
   da ist. */
.fa-leer {
  padding: .625rem .75rem;
  border: 1px dashed rgba(106,180,255,.28);
  border-radius: 10px;
  font-size: .8125rem;
  color: #9db5d2;
}

/* Warum eine Datei nicht gelesen werden konnte, steht neben der
   Datei -- nicht in einer Fehlerzeile ganz oben, die beim
   naechsten Klick verschwindet. */
.fa-leer--fehler {
  border-style: solid;
  border-color: rgba(255,120,120,.45);
  background: rgba(60,18,24,.35);
  color: #ffc9c4;
  line-height: 1.5;
}

/* Fortsetzen an der Kostengrenze: wie viel mehr darf es kosten?
   Das Feld steht nur da, wenn ohne mehr Budget nichts geht.
   Auf dem Telefon rutschen Feld und Knopf unter den Text. */
.ma-lauflicht { flex-wrap: wrap; }
.ma-lauflicht span:nth-child(2) { flex: 1 1 14rem; }
.ma-zusatz {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  white-space: nowrap;
}
.ma-zusatz input {
  width: 4.5rem;
  padding: .125rem .375rem;
  font: inherit;
}

/* Die Fundstelle, an der ein Punkt abgehakt wurde. */
.ma-fundstelle {
  display: block;
  margin-top: .25rem;
  font-size: .75rem;
  font-style: italic;
  color: #8fb0d4;
  overflow-wrap: anywhere;
}

/* Warum eine Konferenz des Vorgangs steht. */
.fa-eintrag__grund {
  display: block;
  color: #ffc9c4;
  font-size: .75rem;
}

/* ============================================================
   Prüfstand: Bewertung am Artefakt und Übersicht (Migration 037)
   Vier Stufen wie im Prüfstand: gut ≥ 85 %, mittel ≥ 65 %,
   schlecht darunter, ko bei Verstoß gegen ein kritisches
   Kriterium. Farbe ist nie der einzige Träger: Zahl und Urteil
   stehen immer als Text daneben.
   ============================================================ */
.bw-form {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem .75rem;
  align-items: center;
  margin: .75rem 0 1rem;
}
.bw-form input[type="text"], .bw-form .bw-haken, .bw-form button { grid-column: 1 / -1; }
.bw-form button { justify-self: start; }
.bw-haken { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: #b2c2d7; }

.bw-kopf {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin: 1rem 0;
  padding: .875rem 1rem;
  border-radius: 12px;
  border-left: 4px solid #8398b8;
  background: rgba(137,183,234,.08);
}
.bw-kopf__zahl { font-size: 1.75rem; font-weight: 600; min-width: 5.5rem; }
.bw-kopf__text { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.bw-kopf__text span { font-size: .75rem; color: #9fb3cc; overflow-wrap: anywhere; }
.bw-notiz { font-style: italic; }
.bw-kopf--gut      { border-left-color: #46ecb3; background: rgba(70,236,179,.10); }
.bw-kopf--mittel   { border-left-color: #ffb865; background: rgba(255,184,101,.10); }
.bw-kopf--schlecht,
.bw-kopf--ko       { border-left-color: #ff8a80; background: rgba(255,138,128,.10); }

.bw-bereich { margin: 1.25rem 0 .375rem; font-size: .8125rem; font-weight: 600;
              letter-spacing: .04em; text-transform: uppercase; color: #9fb3cc; }
.bw-kriterien { margin: 0; padding: 0; list-style: none; }
.bw-k { border-bottom: 1px solid rgba(137,183,234,.12); }
.bw-k summary {
  display: grid;
  grid-template-columns: 1.5rem 2.75rem 1fr auto;
  gap: .5rem;
  align-items: baseline;
  padding: .5rem 0;
  cursor: pointer;
  list-style: none;
}
.bw-k summary::-webkit-details-marker { display: none; }
.bw-k__zeichen { text-align: center; }
.bw-k__id { font-size: .75rem; color: #9fb3cc; }
.bw-k__status { font-size: .75rem; color: #9fb3cc; white-space: nowrap; }
.bw-k--erfuellt  .bw-k__zeichen { color: #46ecb3; }
.bw-k--teilweise .bw-k__zeichen { color: #ffb865; }
.bw-k--verfehlt  .bw-k__zeichen,
.bw-k--verstoss  .bw-k__zeichen { color: #ff8a80; }
.bw-k--verstoss  .bw-k__titel { color: #ffc9c4; }
.bw-k__inhalt { padding: 0 0 .75rem 4.75rem; font-size: .8125rem; }
.bw-k__inhalt p { margin: .25rem 0; }
.bw-k__inhalt q { display: block; margin-top: .125rem; color: #9fb3cc; font-style: italic; overflow-wrap: anywhere; }
.bw-unbelegt { color: #ffb865; }
.bw-hinweis { color: #8398b8; }
/* Ausgabe einer Pruefdatei des Pruefstands (Softwarefaelle) */
.bw-ausgabe { margin: .25rem 0; padding: .5rem .625rem; background: #0f1926;
              border-radius: 6px; color: #9fb3cc; font-size: .75rem;
              white-space: pre-wrap; overflow-wrap: anywhere; max-height: 14rem; overflow: auto; }

.bw-zeile { border-left: 3px solid #8398b8; padding-left: .75rem; }
.bw-zeile--gut { border-left-color: #46ecb3; }
.bw-zeile--mittel { border-left-color: #ffb865; }
.bw-zeile--schlecht, .bw-zeile--ko { border-left-color: #ff8a80; }

.bw-marke { display: block; margin-top: .25rem; font-size: .75rem; }
.bw-marke--gut { color: #7fe8c4; }
.bw-marke--mittel { color: #ffd9a8; }
.bw-marke--schlecht, .bw-marke--ko { color: #ffc9c4; }

/* Matrix: Kriterien × Bewertungen */
.ps-matrix-rahmen { overflow-x: auto; }
.ps-matrix { border-collapse: collapse; font-size: .8125rem; min-width: 100%; }
.ps-matrix th, .ps-matrix td { padding: .375rem .5rem; border-bottom: 1px solid rgba(137,183,234,.12); }
.ps-matrix__k { text-align: left; font-weight: 400; min-width: 16rem; }
.ps-matrix__k b { color: #9fb3cc; font-weight: 500; }
.ps-matrix__b { text-align: center; white-space: nowrap; }
.ps-matrix__b a { color: inherit; font-weight: 600; }
.ps-matrix__b small { display: block; font-weight: 400; font-size: .6875rem; color: #8398b8; }
.ps-stufe--gut a { color: #7fe8c4; }
.ps-stufe--mittel a { color: #ffd9a8; }
.ps-stufe--schlecht a, .ps-stufe--ko a { color: #ffc9c4; }
.ps-zelle { text-align: center; }
.ps-zelle--erfuellt { color: #46ecb3; }
.ps-zelle--teilweise { color: #ffb865; }
.ps-zelle--verfehlt, .ps-zelle--verstoss { color: #ff8a80; }
.ps-zelle--offen { color: #56657a; }

@media (max-width: 600px) {
  .bw-k summary { grid-template-columns: 1.5rem 2.5rem 1fr; }
  .bw-k__status { grid-column: 3; white-space: normal; }
  .bw-k__inhalt { padding-left: 0; }
  .bw-kopf { flex-direction: column; align-items: flex-start; }
}

/* Befunde der Gegenprüfung (Migration 038) */
.bf { border-left: 3px solid #8398b8; padding-left: .75rem; }
.bf span { display: block; }
.bf--kritisch.bf--offen   { border-left-color: #ff8a80; }
.bf--wesentlich.bf--offen { border-left-color: #ffb865; }
.bf--hinweis              { border-left-color: #8fb0d4; }
.bf--erledigt { border-left-color: #46ecb3; opacity: .8; }
.bf--verworfen { opacity: .7; }
.bf--verworfen.bf--kritisch { border-left-color: #ff8a80; border-left-style: dashed; opacity: 1; }
.bf__entscheidung { font-size: .75rem; color: #9fe8cf; }
.bf--verworfen .bf__entscheidung { color: #ffd9a8; }

/* ---------- Quellen (Migration 039) ---------- */

/* Was ein Beitrag vor sich hatte. Zugeklappt, denn es ist zum
   Nachsehen da, nicht zum Mitlesen. */
.ma-quellen {
  margin-top: .5rem;
  font-size: .75rem;
  color: #8fb0d4;
}
.ma-quellen summary {
  cursor: pointer;
  width: fit-content;
}
.ma-quellen ul {
  margin: .375rem 0 0;
  padding-left: 1rem;
}
.ma-quellen li {
  margin: .125rem 0;
  overflow-wrap: anywhere;
}
.ma-quellen b { font-weight: 600; color: #cfe0f2; }

/* Knoepfe an einer Datei: Kuerzel, Neu zerlegen, Entfernen.
   Auf dem Telefon rutschen sie unter den Namen. */
.ma-datei { flex-wrap: wrap; }
.ma-datei .ma-datei__text { flex: 1 1 12rem; }
.ma-datei__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  flex: none;
  margin-left: auto;
}
.ma-datei__knopf {
  padding: .25rem .5rem;
  border: 1px solid rgba(137,183,234,.3);
  border-radius: 8px;
  background: none;
  color: #cfe0f2;
  font: inherit;
  font-size: .75rem;
  cursor: pointer;
}
.ma-datei__knopf:hover { border-color: #4fe6ff; }
.ma-datei__knopf:disabled { opacity: .5; cursor: default; }
.ma-datei__knopf--weg { border-color: rgba(255,138,128,.3); color: #ffc9c4; }
.ma-datei__knopf--weg:hover { border-color: #ff8a80; }

/* Kein Fehler, aber wissenswert: gekappt, vor 039 zerlegt. */
.ma-datei__text .ma-datei__hinweis {
  color: #ffd98a;
}
.ma-datei__text b .ma-datei__kuerzel {
  display: inline-block;
  margin-top: 0;
  vertical-align: .0625rem;
  margin-right: .375rem;
  padding: 0 .375rem;
  border-radius: 6px;
  background: rgba(79,230,255,.14);
  color: #8fe4ff;
  font-size: .6875rem;
  font-weight: 600;
}

/* ---------- Nachweisarten (Migration 041) ---------- */

/* Woran eine Aufgabe haengt: Test und Messung laufen von selbst,
   alles andere braucht ein Urteil. Der Unterschied gehoert ins
   Auge, nicht in die Fussnote. */
.ma-lauf b .ma-nachweis,
.ma-nachweis {
  display: inline-block;
  width: auto;
  margin-right: .375rem;
  padding: 0 .375rem;
  border-radius: 6px;
  background: rgba(137,183,234,.16);
  color: #b2c2d7;
  font-size: .6875rem;
  font-weight: 600;
  vertical-align: .0625rem;
}
.ma-nachweis--test    { background: rgba(70,236,179,.16); color: #7fe8c4; }
.ma-nachweis--messung { background: rgba(79,230,255,.16); color: #8fe4ff; }
.ma-nachweis--beleg   { background: rgba(255,217,138,.16); color: #ffd98a; }

.ma-nachweisstand--gruen { color: #7fe8c4; font-style: normal; }
.ma-nachweisstand--rot   { color: #ffc9c4; font-style: normal; }

.ma-testausgabe {
  margin: .25rem 0 0;
  padding: .375rem .5rem;
  border-radius: 8px;
  background: rgba(3,22,46,.6);
  color: #8fb0d4;
  font-size: .75rem;
  white-space: pre-wrap;
  overflow-x: auto;
}