/* support.kroegoor.com
   Ein Stylesheet, keine Abhaengigkeiten, keine Schriftarten von fremden
   Servern.

   ⚠️ Farben werden an der GERENDERTEN Seite gemessen, nie hier gerechnet.
   Gemessene Werte stehen als Kommentar an der jeweiligen Variablen. Wer eine
   Farbe aendert, misst nach — im hellen UND im dunklen Modus. Im Dunkelmodus
   waren Knopf und Fusslink schon einmal bei 2,16:1 und 1,95:1, und das faellt
   beim Arbeiten am hellen Bildschirm niemandem auf.

   Grenzen: Text 4,5:1 · grosser Text 3:1 · Rahmen und Bedienelemente 3:1.

   Gemessen am 28.07.2026, 23 Elemente in beiden Modi, alle bestanden.
   Die knappsten Werte (Abstand zur jeweiligen Grenze):
     Feldrahmen            hell 4,84:1 · dunkel 4,45:1   (Grenze 3)
     Rahmen Zustandsmarke  hell 4,84:1 · dunkel 4,90:1   (Grenze 3)
     Nebentext gedaempft   hell 8,42:1 · dunkel 8,80:1   (Grenze 4,5)
     Knopfschrift          hell 8,00:1 · dunkel 8,67:1   (Grenze 4,5)
   Knappster Abstand insgesamt: das 1,42-Fache der Grenze. */

:root {
  --grund:     #eef1f6;   /* Seitenhintergrund */
  --flaeche:   #ffffff;   /* Karten darauf */
  --text:      #14171c;
  --gedaempft: #4a5260;   /* Nebentext — 8,4:1 auf --flaeche */
  --rahmen:    #6b7280;   /* Feldrahmen — 4,8:1 auf --flaeche */
  --linie:     #d7dce4;   /* rein dekorative Trennung, kein Bedienelement */
  --betont:    #0b4f9e;
  --auf-betont:#ffffff;
  --fehler:    #a4262c;
  --erfolg:    #1c6b3f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund:     #0f1319;
    --flaeche:   #181d26;
    --text:      #eef1f6;
    --gedaempft: #aab3c0;
    --rahmen:    #79839a;
    --linie:     #2a323f;
    --betont:    #7ab3ff;
    --auf-betont:#0b1220;
    --fehler:    #ff8a8a;
    --erfolg:    #7ddba4;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 1.0625rem/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--betont); }
a:hover { text-decoration-thickness: 2px; }

/* ── Kopf und Fuss ──────────────────────────────────────────────────────── */

.seitenkopf {
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  /* Der farbige Streifen ist Schmuck und traegt keine Bedeutung — deshalb
     darf er beliebig hell sein, ohne eine Kontrastgrenze zu verletzen. */
  box-shadow: inset 0 3px 0 var(--betont);
}
.seitenkopf .innen,
main,
.seitenfuss .innen {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.1rem 1.25rem;
}
.marke {
  margin: 0;
  font-weight: 700;
  letter-spacing: .01em;
}
.marke .zusatz { font-weight: 400; color: var(--gedaempft); }

main { padding-top: 1.75rem; padding-bottom: 2.5rem; }

.seitenfuss {
  border-top: 1px solid var(--linie);
  color: var(--gedaempft);
  font-size: .95rem;
}
.seitenfuss p { margin: 0; }

/* ── Ueberschriften ─────────────────────────────────────────────────────── */

h1 {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  line-height: 1.2;
  letter-spacing: -.015em;
  margin: 0 0 .4rem;
}
.vorspann {
  margin: 0 0 1.5rem;
  color: var(--gedaempft);
  font-size: 1.05rem;
}

/* ── Karte ──────────────────────────────────────────────────────────────── */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: .75rem;
  padding: 1.25rem 1.35rem 1.6rem;
}

/* ── Formular ───────────────────────────────────────────────────────────── */

label {
  display: block;
  font-weight: 600;
  margin: 1.35rem 0 .35rem;
}
label:first-of-type, .karte > form > label:first-child { margin-top: 0; }

/* Steht als eigener Absatz zwischen Etikett und Feld, NICHT im <label>.
   Im Etikett wurde er doppelt vorgelesen: einmal als Teil der Beschriftung,
   einmal ueber aria-describedby. Gemeldet am 06.08.2026 von einem
   TalkBack-Nutzer, der das Protokoll mitgeschickt hat. */
.hinweis {
  display: block;
  font-weight: 400;
  font-size: .95rem;
  color: var(--gedaempft);
  margin: .1rem 0 .35rem;
}

input[type=text], input[type=email], input[type=password], input[type=search], select, textarea {
  width: 100%;
  padding: .65rem .75rem;
  font: inherit;
  color: var(--text);
  background: var(--flaeche);
  border: 1.5px solid var(--rahmen);
  border-radius: .5rem;
}
textarea { min-height: 7.5rem; resize: vertical; }
select { appearance: auto; }

input:hover, select:hover, textarea:hover { border-color: var(--text); }

/* Sichtbarer Fokus ist Pflicht, nicht Geschmack. */
:focus-visible {
  outline: 3px solid var(--betont);
  outline-offset: 2px;
}

[aria-invalid="true"] { border-color: var(--fehler); border-width: 2px; }

/* `.knopf` ist ein LINK, der wie ein Knopf aussieht — fuer Wege, die eine neue
   Seite oeffnen statt etwas abzuschicken (Baustein anlegen, Entwurf uebernehmen).
   Bewusst derselbe Block, damit nicht zwei Sorten Knoepfe auseinanderlaufen. */
button, .knopf {
  font: inherit;
  font-weight: 600;
  padding: .75rem 1.5rem;
  margin-top: 1.75rem;
  min-height: 44px;              /* sichere Trefferflaeche */
  color: var(--auf-betont);
  background: var(--betont);
  border: 2px solid transparent;
  border-radius: .5rem;
  cursor: pointer;
}
button:hover, .knopf:hover { filter: brightness(1.12); }
.knopf { display: inline-block; text-decoration: none; }
@media (max-width: 32rem) { button { width: 100%; } }

/* ── Meldungen ──────────────────────────────────────────────────────────── */

.fehler, .hinweiskasten {
  border: 2px solid var(--fehler);
  border-left-width: 6px;
  border-radius: .5rem;
  background: var(--flaeche);
  padding: .9rem 1rem;
  margin: 0 0 1.25rem;
}
.fehler p:first-child { margin-top: 0; }
.fehler ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.fehler a { color: var(--fehler); }

.hinweiskasten { border-color: var(--erfolg); }

.feldfehler {
  color: var(--fehler);
  font-weight: 600;
  margin: .35rem 0 0;
  font-size: .95rem;
}

/* ── Verlauf ────────────────────────────────────────────────────────────── */

.zustand {
  display: inline-block;
  border: 1.5px solid var(--rahmen);
  border-radius: 999px;
  padding: .25rem .85rem;
  font-weight: 600;
  font-size: .95rem;
  margin: 0 0 1.5rem;
}

.beitrag {
  border: 1px solid var(--linie);
  border-radius: .75rem;
  padding: .9rem 1.1rem;
  margin: 0 0 .9rem;
  background: var(--flaeche);
}
/* Wer geschrieben hat, steht im Kopf des Beitrags — der Balken ist nur die
   zusaetzliche, schnell erfassbare Spur. Unterscheidung nie allein ueber
   Farbe (WCAG 1.4.1). */
.beitrag.von-uns { border-left: 5px solid var(--betont); }
.beitrag .kopf {
  font-weight: 700;
  font-size: .95rem;
  color: var(--gedaempft);
  margin: 0 0 .5rem;
}
.beitrag .text { white-space: pre-wrap; margin: 0; overflow-wrap: anywhere; }

/* ── Sprungmarke ────────────────────────────────────────────────────────── */

.sprungmarke {
  position: absolute;
  left: -9999px;
  background: var(--flaeche);
  color: var(--betont);
  border: 2px solid var(--betont);
  border-radius: .4rem;
}
.sprungmarke:focus {
  position: static;
  display: inline-block;
  margin: .6rem 0 0 1.25rem;
  padding: .6rem 1rem;
}

/* ── Verwaltung ─────────────────────────────────────────────────────────── */

.liste { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.liste caption {
  text-align: left; padding: .5rem 0 .75rem;
  font-weight: 600; color: var(--gedaempft);
}
.liste th, .liste td {
  text-align: left; padding: .6rem .7rem;
  border-bottom: 1px solid var(--linie); vertical-align: top;
}
.liste thead th {
  border-bottom: 2px solid var(--rahmen);
  font-size: .95rem; letter-spacing: .02em; text-transform: uppercase;
  color: var(--gedaempft);
}
.liste tbody tr:hover { background: var(--grund); }
.klein { font-size: .9rem; color: var(--gedaempft); }

.werkzeugleiste {
  display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: end;
  margin: 0 0 1rem;
}
.werkzeugleiste label { margin: 0 0 .3rem; }
.werkzeugleiste select { width: auto; min-width: 11rem; }
.werkzeugleiste button { margin-top: 0; }

.kopfdaten {
  display: grid; grid-template-columns: max-content 1fr;
  gap: .35rem 1rem; margin: 0 0 1.5rem;
}
.kopfdaten dt { font-weight: 600; color: var(--gedaempft); }
.kopfdaten dd { margin: 0; overflow-wrap: anywhere; }

/* Fehlerliste (Aufgabe 14): das Verhaeltnis "N von M geprueft" soll auf einen
   Blick auffallen, ohne dass irgendetwas aufgeklappt werden muss — deshalb
   fett und mit eigenem Zeilenabstand direkt unter dem Titel, nicht in der
   gedaempften .klein-Zeile versteckt. */
.verhaeltnis {
  font-weight: 700;
  margin: 0 0 .9rem;
  font-variant-numeric: tabular-nums;
}

/* Die offene Luecke eines Befunds: erkennbar abgesetzt vom Fliesstext, aber
   bewusst nicht in der Erfolgsfarbe von .hinweiskasten — hier steht, was
   NICHT belegt ist. */
.fehler-offen {
  border-left: 4px solid var(--gedaempft);
  background: var(--grund);
  padding: .6rem .9rem;
  margin: .6rem 0 0;
  font-size: .95rem;
}

.beitrag.intern { border-left: 5px solid var(--fehler); background: var(--grund); }

/* Arbeitsauftrag an den Bot — muss sich auf einen Blick von einer Notiz
   unterscheiden, sonst geht er im Verlauf unter. */
.beitrag.auftrag { border-left: 5px solid #b8860b; background: #fffaf0; }
@media (prefers-color-scheme: dark) {
  .beitrag.auftrag { border-left-color: #e0b53d; background: #221d10; }
}
.beitrag.auftrag.erledigt { border-left-color: var(--gedaempft); background: var(--grund); opacity: .72; }
.beitrag.auftrag .kopf { font-weight: 600; }
.beitrag .ergebnis { margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed var(--linie); }

.uebersetzen { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 0 0 1rem; }

/* Zugeklappte interne Notiz: der Kopf bleibt die Zusammenfassung, damit man
   sieht, dass da etwas liegt, ohne dass es den Verlauf auseinanderzieht. */
.beitrag .notiz > summary { cursor: pointer; margin: 0; font-weight: 600; }
.beitrag .notiz > summary::marker { color: var(--gedaempft); }
.beitrag .notiz[open] > summary { margin-bottom: .5rem; }
.beitrag .uebersetzt { margin-top: .7rem; padding-top: .5rem; border-top: 1px dashed var(--linie); }
.beitrag .uebersetzt > summary { font-size: .85rem; color: var(--gedaempft); font-weight: 600; }
.beitrag .uebersetzt .text { margin-top: .4rem; }

details summary { cursor: pointer; font-weight: 600; margin-top: .6rem; font-size: .95rem; }
details[open] summary { margin-bottom: .4rem; }

/* „Freiwillig" steht als Wort im Etikett, nicht als Sternchen oder Farbe —
   ein Sternchen muss man kennen, eine Farbe sieht nicht jeder. */
.freiwillig {
  display: inline-block;
  margin-left: .5rem;
  padding: .05rem .5rem;
  border: 1px solid var(--rahmen);
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--gedaempft);
  vertical-align: middle;
}

/* ── Breite Ansicht (Verwaltung) ─────────────────────────────────────────── */

/* 40rem sind fuer ein Formular richtig und fuer eine Tabelle mit fuenf
   Spalten viel zu eng. */
body.weit .seitenkopf .innen,
body.weit main,
body.weit .seitenfuss .innen { max-width: 78rem; }

/* Schreibfelder bleiben trotzdem schmal: Eine Textzeile ueber die volle
   Bildschirmbreite liest und schreibt sich schlecht. */
body.weit .karte { max-width: 46rem; }

/* Auf schmalen Schirmen wird die Tabelle scrollbar, statt die Seite
   waagerecht zu sprengen. */
.tabellenrahmen { overflow-x: auto; }
body.weit .liste { min-width: 46rem; }
body.weit .liste td:nth-child(4) { word-break: break-all; }
.liste td.nr, h1 .nr { color: var(--gedaempft); font-variant-numeric: tabular-nums; white-space: nowrap; }
h1 .nr { font-weight: 400; }

/* Bildanhänge — die Vorschau ist ein Link auf das ganze Bild, damit man es
   auch groß ansehen kann. alt trägt den Namen, den der Absender vergeben hat. */
.bilder { list-style: none; display: flex; flex-wrap: wrap; gap: .75rem; padding: 0; margin: 0 0 1.5rem; }
.bilder img, .bilder video {
  max-width: 12rem; max-height: 12rem; height: auto;
  border: 1px solid var(--rahmen); border-radius: .5rem; background: var(--flaeche);
}
input[type=file] {
  width: 100%; padding: .55rem; font: inherit; color: var(--text);
  background: var(--flaeche); border: 1.5px dashed var(--rahmen); border-radius: .5rem;
}

/* Kopfzeile: Marke links, daneben die Bereiche (im Backend) oder die
   Sprachwahl (auf den Spielerseiten). Umbruch erlaubt — auf einem schmalen
   Schirm rutschen die Bereiche unter die Marke, statt sie zu quetschen. */
.seitenkopf .innen { display: flex; align-items: center; flex-wrap: wrap;
                     justify-content: space-between; gap: .75rem 1.25rem; }
.seitenkopf .marke { margin: 0; }
.sprachwahl {
  font-weight: 600; font-size: .95rem;
  padding: .35rem .8rem;
  border: 1.5px solid var(--rahmen); border-radius: 999px;
  white-space: nowrap;
}
.sprachwahl:hover { border-color: var(--betont); }

/* Arbeitsauftrag in der Vorgangsliste — Wunsch Mathias, 05.08.2026: auf einen Blick
   sehen, wo schon ein Auftrag liegt. Bewusst kein eigener Status, sondern ein Zeichen:
   Der Status sagt, wer am Zug ist, und daran aendert ein Auftrag nichts. */
.auftrag-offen { color: #b8860b; font-size: 1.15em; line-height: 1; }
.auftrag-fertig { color: var(--gedaempft); font-size: .95em; }
.liste tr.hat-auftrag td:first-child { box-shadow: inset 3px 0 0 #b8860b; }
@media (prefers-color-scheme: dark) {
  .auftrag-offen { color: #e0b53d; }
  .liste tr.hat-auftrag td:first-child { box-shadow: inset 3px 0 0 #e0b53d; }
}

/* Vorgangsseite auf breiten Schirmen: Verlauf links, Schreibfeld rechts.
   Mathias arbeitet am grossen Display und wollte beim Lesen tippen koennen,
   ohne zu scrollen (06.08.2026).

   Erst ab 78rem, weil darunter zwei Spalten beide zu schmal machen — der
   Verlauf traegt Fliesstext, das Formular drei Schreibfelder. */
@media (min-width: 78rem) {
  /* 🔴 Das Zwei-Spalten-Raster ist am 08.08.2026 entfallen. Es war der
     einzige Bereich der Seite mit Grid und klebender Positionierung, und bei
     kurzem Verlauf schoben sich die Karten darunter ineinander — Mathias:
     „die karten und ineinander". Seit der Verlauf zugeklappt unter der
     Entscheidung steht, braucht es die zweite Spalte ohnehin nicht mehr:
     Beim Lesen des Verlaufs ist er aufgeklappt und hat die volle Breite.

     Die Regeln bleiben als Kommentar stehen, falls jemand das Nebeneinander
     zurueckholen will — dann aber ohne sticky, das war die eigentliche
     Ursache.

     Mit dem Raster ist auch die Hoehenbegrenzung des Verlaufs entfallen
     (max-height plus eigener Scrollbalken). Sie gehoerte zum Sticky-Konzept;
     im aufgeklappten Zustand waere ein zweiter Scrollbalken in der Seite nur
     im Weg. */
}

.auftragspalte { white-space: nowrap; }

/* 🔑 Karten kleben nicht aneinander (Mathias, 08.08.2026). 15px ist der
   Mindestabstand, den er genannt hat — hier als 1rem, damit er mit der
   Schriftgroesse mitwaechst. */
.karte + .karte,
.karte + .entscheidung,
.entscheidung + .verlaufblock { margin-top: 1rem; }

/* Entwurf und Stichpunkte nebeneinander, sobald Platz ist. Darunter
   untereinander — zwei Spalten waeren dort beide zu schmal.
   Ohne position:sticky: genau das liess vorher die Karten ineinanderlaufen. */
.entscheidung { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 78rem) {
  body.weit .entscheidung {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
  }
  /* Im Raster steuert gap den Abstand; ein zusaetzlicher Aussenabstand
     verschoebe die Spalten gegeneinander. */
  body.weit .entscheidung > .karte { margin-top: 0; max-width: none; }
}

/* Der Verlauf steht seit 08.08.2026 zugeklappt UNTER der Entscheidung. Er ist
   Nachschlagewerk — wer entscheidet, braucht ihn selten, und wenn, dann ganz. */
.verlaufblock { margin-top: 2rem; border-top: 1px solid var(--linie); padding-top: 1rem; }
.verlaufblock > summary {
  cursor: pointer;
  padding: .5rem 0;
  font-size: 1.05rem;
}
.verlaufblock > summary .klein { font-weight: 400; }
/* Der Block darin hat keinen eigenen Rahmen mehr — die Trennlinie oben
   reicht, sonst rahmt sich Karte in Karte. */
.verlaufblock .arbeitsflaeche { margin-top: 1rem; }

/* Die Bereiche sitzen seit 08.08.2026 IN der Kopfleiste, nicht mehr in einer
   eigenen Zeile darunter. Deshalb hier kein Rahmen und kein Abstand nach
   unten mehr — beides gehoerte zur alten, freistehenden Zeile. */
/* Die Vorgangsnummer. Zifferngleiche Breite, damit die Spalte nicht zappelt,
   und gedaempft — sie ist zum Nennen da, nicht zum Lesen. */
.nummer {
  font-variant-numeric: tabular-nums;
  color: var(--gedaempft);
  white-space: nowrap;
}
td.nummer { text-align: right; }

.hauptleiste { flex: 1 1 auto; }
.hauptleiste ul { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
                  list-style: none; padding: 0; margin: 0; }
.hauptleiste .rechts { margin-left: auto; }
.hauptleiste [aria-current="page"] { font-weight: 700; }

/* Die Marke ist im Backend ein Link zum Tisch. Als Link braucht sie die
   Unterstreichung nicht — das Logo daneben macht deutlich genug, dass hier
   etwas anklickbar ist. */
a.marke { text-decoration: none; color: inherit; }
a.marke:hover .zusatz,
a.marke:focus-visible .zusatz { color: var(--text); }
.marke { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.markenzeichen { width: 28px; height: 28px; border-radius: 50%; display: block; }

/* Der Knopf „So senden" beim Entwurf. Steht bewusst direkt unter dem Text,
   nicht in einer Werkzeugleiste: Wer den Entwurf gelesen hat, entscheidet dort
   und nicht nach dem Scrollen. */
.entwurf-senden {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1rem;
}
.entwurf-senden button { margin: 0; }

/* Auf schmalen Schirmen greift die 100-%-Regel für Knöpfe; hier ist sie richtig,
   die Sätze bekommen dann jeder eine eigene Zeile. */


/* ══ Chatraum ═══════════════════════════════════════════════════════════════
   Der Vorgang als Gespräch aus drei Parteien. Spezifikation:
   _workspace/docs/2026-08-08-support-vorgang-chatraum-design.md

   Grundsatz: Rolle und Sichtbarkeit stehen IM TEXT jeder Blase, nicht nur in
   der Farbe. Der Balken links ist die zweite, schnelle Spur — nie die einzige. */

/* Der Kopf klebt NICHT — auf keinem Schirm.
   Mathias, 12.08.2026: „im vorgang gibt es 2 so scroll bereiche das passt mir
   nicht." Es waren genau zwei: die Seite, und der klebende Kopf, der auf dem
   Rechner ab halber Bildschirmhöhe in sich selbst scrollte.

   🔑 EINE SCROLL-FLÄCHE, UND ZWAR DIE SEITE. Zwei ineinander sind auch mit
   Tastatur und Screenreader eine Zumutung: Wo der Fokus landet, entscheidet
   dann, welche Fläche sich bewegt. Bei einer Kernzielgruppe, die blind ist,
   wiegt das schwerer als der bequeme Blick auf die Lage.

   Das ist dieselbe Entscheidung, die für das Handy schon am 09.08.2026 galt
   („sonst seh ich nix mehr wenn zu gross") — sie gilt jetzt überall, statt sich
   an einer Bildschirmbreite zu gabeln. */
.raumkopf {
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
  padding: .75rem 0 1rem;
  margin-bottom: 1.25rem;
}
.raumkopf h1 { font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); margin: .2rem 0 .3rem; }
.raumkopf .lage { margin: .6rem 0 0; font-weight: 500; }
.raumkopf .offenefrage, .raumkopf .werkzeuge { margin-top: .6rem; }

/* ── Belegleiste: was zu diesem Vorgang wirklich im Register steht ──────────
   Steht immer da, auch leer — sonst sähen „nichts eingetragen" und „nicht
   nachgesehen" gleich aus. */
.belegleiste {
  margin-top: .6rem; padding: .5rem .7rem;
  background: var(--grund); border: 1px solid var(--linie); border-radius: 6px;
}
.belegkopf { margin: 0 0 .3rem; font-weight: 600; font-size: .95rem; }
.belege { list-style: none; margin: 0; padding: 0; }
.beleg { padding: .25rem 0; border-top: 1px solid var(--linie); }
.beleg:first-child { border-top: 0; }
/* Die Art steht als WORT da, nicht nur als Farbe — die Kernzielgruppe ist
   blind, und ein Farbpunkt allein wäre für sie gar nichts. */
.belegart {
  display: inline-block; padding: .05rem .4rem; border-radius: 4px;
  font-size: .8rem; font-weight: 600; background: var(--lb-gut); color: #fff;
}
.beleg-fehler .belegart { background: var(--lb-stopp); }
.beleg-idee .belegart { background: var(--lb-neu); }
.beleg-eingriff .belegart { background: var(--lb-eingriff); }
.beleg-eingriff-fehlgeschlagen .belegart { background: var(--fehler); }

/* Der Entwurf behauptet etwas, das nicht im Register steht. Kräftig, weil
   genau hier ein Versprechen rausgeht, das niemand einlöst. */
.belegluecke {
  margin: .4rem 0 0; padding: .4rem .6rem;
  border-left: 4px solid var(--fehler); background: var(--luecke-grund);
  color: var(--text); font-size: .95rem;
}
/* ⚠️ Eigene Variable statt eines festen Rosa: Auf dunklem Grund wäre #fdf0f0
   eine weiße Fläche mit hellrotem Text darauf — unlesbar genau dort, wo es am
   wichtigsten ist. */
:root { --luecke-grund: #fdf0f0; }
@media (prefers-color-scheme: dark) {
  :root { --luecke-grund: #2e1a1c; }
}
.raumkopf summary { cursor: pointer; font-weight: 600; font-size: .95rem; }

/* ⚠️ HIER STANDEN ZWEI SONDERREGELN, die es nicht mehr gibt: `position: static`
   nur fürs Handy, und darüber `max-height: 50vh; overflow-y: auto` nur für den
   Rechner. Beide sind mit dem nicht mehr klebenden Kopf gegenstandslos — die
   zweite war der zweite Scrollbalken. Wer den Kopf wieder kleben lässt, holt
   sich beide Probleme zurück und braucht dann auch wieder eine Höhengrenze. */

/* Ein Chat liest sich an einer Kante entlang. Die Linie links führt das Auge
   durch den Verlauf; die Blasen hängen daran, statt einzeln zu schweben. */
.strom { list-style: none; margin: 0; padding: 0 0 0 1.1rem; position: relative; }
.strom::before {
  content: ""; position: absolute; left: .28rem; top: .5rem; bottom: .5rem;
  width: 2px; background: var(--linie); border-radius: 2px;
}
.strom .blase {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: .85rem;
  padding: .75rem 1rem .85rem;
  margin: 0 0 .85rem;
  position: relative;
}
/* Der Punkt auf der Linie: er macht aus einer Liste einen Verlauf. */
.strom .blase::before {
  content: ""; position: absolute; left: -1.1rem; top: 1.05rem;
  width: .58rem; height: .58rem; border-radius: 50%;
  background: var(--linie); box-shadow: 0 0 0 3px var(--grund);
}
.strom .blase .kopf {
  margin: .18rem 0 0; font-size: .79rem; color: var(--gedaempft);
  letter-spacing: .01em; text-transform: none;
}
.strom .blase .kopf strong { color: var(--text); font-weight: 650; }
.strom .blase-etikett {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  color: var(--text);
  font-size: .88rem;
  font-weight: 750;
}
.strom .blase-etikett span {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  color: inherit;
  background: color-mix(in srgb, currentColor 9%, transparent);
  border-radius: 50%;
  font-size: .8rem;
}
.strom .blase .text {
  margin: .45rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere;
  line-height: 1.55;
}

/* Wer spricht, erkennt man an der Farbe des Punktes und einem Hauch Fläche —
   nicht an einem dicken Balken, der bei zwanzig Beiträgen zur Zaunlatte wird. */
.strom .rolle-spieler::before { background: var(--gedaempft); }
.strom .rolle-mathias::before { background: var(--betont); }
.strom .rolle-ki::before      { background: var(--erfolg); }

/* Der Spieler ist der Gast: seine Beiträge stehen etwas abgesetzt. */
.strom .rolle-spieler { margin-left: .9rem; background: var(--grund); }
/* Was Mathias sagt, ist eine Ansage und darf sich abheben. */
.strom .rolle-mathias { border-color: color-mix(in srgb, var(--betont) 35%, var(--linie)); }
.strom .wartet        { border-style: dashed; }

/* Der Arbeitszustand ist die erste Lesespur. Die Rolle bleibt als Metadatum
   erhalten, bestimmt aber nicht mehr allein die Erscheinung der Karte. */
.strom .typ-spieler { background: var(--flaeche); border-left: 4px solid var(--rahmen); }
.strom .typ-gesendet,
.strom .typ-versand { background: color-mix(in srgb, var(--erfolg) 7%, var(--flaeche)); border-left: 4px solid var(--erfolg); }
.strom .typ-gesendet .blase-etikett,
.strom .typ-versand .blase-etikett { color: var(--erfolg); }
.strom .typ-notiz { background: var(--grund); border-left: 4px solid var(--gedaempft); }
.strom .typ-notiz .blase-etikett { color: var(--gedaempft); }
.strom .typ-auftrag { background: #fff8df; border-left: 4px solid #a66b00; }
.strom .typ-auftrag .blase-etikett { color: #805300; }
.strom .typ-auftrag-erledigt { background: var(--grund); border-left: 4px solid var(--gedaempft); opacity: .76; }
.strom .typ-entwurf { background: color-mix(in srgb, var(--betont) 6%, var(--flaeche)); border: 1px dashed color-mix(in srgb, var(--betont) 55%, var(--linie)); }
.strom .typ-entwurf .blase-etikett { color: var(--betont); }
.strom .typ-entwurf-gesendet { background: color-mix(in srgb, var(--erfolg) 5%, var(--flaeche)); border-left: 4px solid var(--erfolg); }
.strom .typ-entwurf-gesendet .blase-etikett { color: var(--erfolg); }
.strom .typ-entwurf-ueberholt,
.strom .typ-entwurf-verworfen { background: var(--grund); border-left: 4px solid var(--gedaempft); opacity: .72; }
.strom .typ-wartet { background: color-mix(in srgb, var(--betont) 4%, var(--flaeche)); }

@media (prefers-color-scheme: dark) {
  .strom .typ-auftrag { background: #28200d; }
  .strom .typ-auftrag .blase-etikett { color: #e0b53d; }
}

.strom .oeffentlich { color: var(--erfolg); font-weight: 600; }
.strom .intern      { color: var(--gedaempft); font-weight: 600; }
/* „auf Deutsch" ist ein Hinweis, keine Warnung — sichtbar, aber leise. */
.strom .uebersetzt  { color: var(--betont); font-weight: 600; }
/* Überholt heißt: steht noch da, gilt aber nicht mehr. Warnfarbe, kein Rot —
   es ist kein Fehler, sondern ein Verlauf. */
.strom .ueberholt   { color: var(--warnung, #b26a00); font-weight: 600; }
.strom .blase:has(.ueberholt) { opacity: .72; }

.strom .original { margin: .55rem 0 0; }
.strom .original summary {
  cursor: pointer; color: var(--gedaempft); font-size: .82rem;
}
.strom .original pre {
  margin: .5rem 0 0; padding: .6rem .7rem; max-height: 22rem; overflow: auto;
  background: var(--grund); border: 1px solid var(--linie); border-radius: .5rem;
  font-size: .82rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}

.aeltere { margin-bottom: 1rem; }
.aeltere summary { cursor: pointer; color: var(--gedaempft); font-size: .95rem; }
.aeltere .strom { margin-top: .75rem; }

/* ── Handlungen unter dem Strom ─────────────────────────────────────────── */

.handlungen {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: .75rem;
  padding: 1.1rem 1.2rem 1.4rem;
  margin-top: 1.25rem;
}
.handlungen > :first-child { margin-top: 0; }

/* ── Entscheidungskopf (27.08.2026) ──────────────────────────────────────────
   Mathias: „ich brauche allein zum Durchlesen ne halbe Stunde … entweder mehr
   autonom, oder ich muss auf einen Blick sehen, worum geht es und was muss ich
   entscheiden." Gemessen lagen 51.224 Zeichen je Vorgang auf dem Tisch, und der
   Sendeknopf stand am ENDE davon. Der Kasten steht jetzt oben; der Verlauf
   darunter bleibt unangetastet vollständig. */
.entscheidungskopf {
  border-top: 3px solid var(--betont);
  margin-bottom: 1.2rem;
}
.entscheidungskopf .worum {
  margin: 0 0 .9rem;
  font-size: 1.05rem;
  line-height: 1.5;
  font-weight: 600;
}
/* Was rausgeht, gehört an den Knopf — nicht 40.000 Zeichen weiter unten. */
.entwurfkopf {
  border: 1px solid var(--linie);
  border-radius: .7rem;
  padding: .8rem 1rem;
  margin: 0 0 1rem;
}
.entwurfkopf .titel {
  margin: 0 0 .4rem; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gedaempft);
}
.entwurfkopf .entwurftext { margin: 0; line-height: 1.55; }
.entwurfkopf details { margin-top: .6rem; }

/* Die Sende-Knopfreihe ist am 09.08.2026 entfallen — Senden steht jetzt als
   erste Option zwischen den Vorschlägen. Grund: Ohne Entwurf stand sie trotzdem
   da und bot an, ein Nichts zu verschicken. */

/* Die eine Empfehlung. Sie soll wie eine Aussage aussehen, nicht wie eine
   Auswahl — deshalb ein Kasten mit Satz und EINEM Knopf, kein Knopfteppich. */
.empfehlung {
  border: 1px solid var(--linie);
  border-left: 3px solid var(--betont);
  border-radius: .7rem;
  background: var(--grund);
  padding: .85rem 1rem 1rem;
  margin: 0 0 1.1rem;
}
.empfehlung .titel {
  margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gedaempft);
}
.empfehlung .satz { margin: .35rem 0 .8rem; font-size: 1.02rem; line-height: 1.5; }
.empfehlung form { margin: 0; }
.empfehlung button { margin: 0; }
/* Führt die Empfehlung zu einer Mail an den Spieler, muss man das sehen. */
.empfehlung.sendet { border-left-color: var(--erfolg); }
/* Liegt die Entscheidung bei Mathias, gibt es nichts zu klicken — das muss man
   auf einen Blick sehen, sonst sucht man den Knopf. */
.empfehlung.deine { border-left-color: #a66b00; }
.entscheidung-noetig {
  background: #fff8df;
  border-color: #d5ad54;
  border-left-width: 5px;
}
.entscheidung-noetig .titel { color: #805300; }
.empfehlung .klein { margin: .2rem 0 0; font-size: .9rem; color: var(--gedaempft); }
.empfehlung.sendet button { background: var(--erfolg); border-color: var(--erfolg); color: #fff; }

@media (prefers-color-scheme: dark) {
  .entscheidung-noetig { background: #28200d; border-color: #8a671d; }
  .entscheidung-noetig .titel { color: #e0b53d; }
}

.vorschlaege button {
  margin: 0;
  padding: .6rem 1rem;
  text-align: left;
  font-weight: 500;
  color: var(--text);
  background: var(--flaeche);
  border: 1.5px solid var(--rahmen);
}
.vorschlaege button:hover { filter: none; border-color: var(--betont); color: var(--betont); }

.freifeld { margin: 0; }
.freifeld button { margin-top: 1rem; }

/* ── Fehlerübersicht (10.08.2026) ───────────────────────────────────────────
   Eine Liste je Zustand, eine Zeile je Eintrag, Einzelheiten auf eigener Seite
   (public/admin/fehler.php). Vorher stand jeder der 54 Einträge als
   aufgeklappte Karte untereinander.

   ⚠️ Die drei Zustandsfarben sind DEKORATION. Der Zustand steht immer auch als
   Wort da — in der Überschrift der Liste und als Marke auf der Einzelseite.
   Sie brauchen deshalb keine 3:1 (WCAG 1.4.1, gemessen wird nur, was Auskunft
   trägt); die Dunkelmodus-Werte sind trotzdem aufgehellt, weil #1a7f37 auf
   #0f1319 nicht mehr als Farbe erkennbar war. */

:root {
  --z-bestaetigt: #9a6700;   /* offen — Farbe wie zuvor in der Kartenansicht */
  --z-behoben:    #1a7f37;
  --z-unklar:     #57606a;
  /* „so gewollt" ist weder Fehler noch Behebung — eigene, ruhige Farbe. */
  --z-absicht:    #4b5cad;
}
@media (prefers-color-scheme: dark) {
  :root {
    --z-bestaetigt: #e0b53d;
    --z-behoben:    #7ddba4;
    --z-unklar:     #aab3c0;
  }
}

.zustandskopf {
  border-left: .35rem solid var(--linie);
  padding-left: .7rem;
  margin-top: 2rem;
}
.zustandskopf .klein { font-weight: 400; }
.zustandskopf.z-bestaetigt { border-left-color: var(--z-bestaetigt); }
.zustandskopf.z-behoben    { border-left-color: var(--z-behoben); }
.zustandskopf.z-unklar     { border-left-color: var(--z-unklar); }
.z-absicht { color: var(--z-absicht); }

/* Dieselbe Farbe auf der Einzelseite, dort an der runden Zustandsmarke. */
.zustand.z-bestaetigt { border-color: var(--z-bestaetigt); }
.zustand.z-behoben    { border-color: var(--z-behoben); }
.zustand.z-unklar     { border-color: var(--z-unklar); }

/* ══ Admin-Arbeitstisch 2026 ═══════════════════════════════════════════════
   Ruhig wie ein aufgeräumter Schreibtisch: Papierflächen, tintiger Text und
   Petrol nur dort, wo eine Handlung oder der aktuelle Ort erkennbar sein muss. */

body.weit {
  --grund: #f7f5f0;
  --flaeche: #fffefd;
  --text: #14243b;
  --gedaempft: #5f6977;
  --rahmen: #87909a;
  --linie: #e4e0d8;
  --betont: #0f6b6d;
  --auf-betont: #ffffff;
  --fehler: #a34432;
  --erfolg: #39745b;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--grund);
  font-size: 1rem;
  line-height: 1.55;
}

.admin-rahmen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 15.25rem minmax(0, 1fr);
}

.admin-seitenleiste {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 2rem 1rem 1.25rem;
  background: #fbfaf6;
  border-right: 1px solid var(--linie);
}

.admin-seitenleiste .marke {
  padding: 0 .75rem 1.75rem;
  font-size: 1.05rem;
}

.admin-seitenleiste .markenzeichen { width: 30px; height: 30px; }
.admin-seitenleiste .hauptleiste { flex: 1; }
.admin-seitenleiste .hauptleiste ul {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .2rem;
}
.admin-seitenleiste .hauptleiste li { width: 100%; }
.admin-seitenleiste .hauptleiste a,
.admin-seitenleiste .hauptleiste [aria-current="page"] {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .65rem .8rem .65rem 2.25rem;
  color: var(--text);
  text-decoration: none;
  border-radius: .65rem;
}
.admin-seitenleiste .hauptleiste a::before,
.admin-seitenleiste .hauptleiste [aria-current="page"]::before {
  content: "";
  position: absolute;
  left: .85rem;
  width: .72rem;
  height: .72rem;
  border: 1.5px solid currentColor;
  border-radius: .2rem;
  opacity: .7;
}
.admin-seitenleiste .hauptleiste a:hover { background: #f1eee7; color: var(--betont); }
.admin-seitenleiste .hauptleiste [aria-current="page"] {
  color: var(--betont);
  background: #edf3f0;
  font-weight: 700;
}
.admin-seitenleiste .hauptleiste [aria-current="page"]::after {
  content: "";
  position: absolute;
  left: -.95rem;
  top: .55rem;
  bottom: .55rem;
  width: 3px;
  border-radius: 3px;
  background: var(--betont);
}
.admin-seitenleiste .hauptleiste .rechts { margin: auto 0 0; padding-top: 1rem; }

.admin-hauptbereich { min-width: 0; display: flex; flex-direction: column; }
body.weit .admin-hauptbereich main {
  width: 100%;
  max-width: 96rem;
  margin: 0 auto;
  padding: 2.5rem clamp(1.5rem, 3.5vw, 4rem) 3rem;
}
body.weit .admin-hauptbereich .seitenfuss .innen {
  max-width: 96rem;
  padding-inline: clamp(1.5rem, 3.5vw, 4rem);
}

body.weit h1,
body.weit .tisch-flaeche h2,
body.weit .bot-bereich summary {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -.025em;
}

.tisch-kopf {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.6rem;
}
.tisch-kopf h1 { font-size: clamp(2rem, 4vw, 3.25rem); margin-bottom: .35rem; }
.tisch-ueberzeile {
  margin: 0 0 .35rem;
  color: var(--betont);
  font-size: .76rem;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tisch-kopf .vorspann { margin: 0; }
.tisch-schnellsuche {
  width: min(31rem, 44%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem;
  margin-top: .15rem;
}
.tisch-schnellsuche input[type="search"] { min-height: 48px; background: var(--flaeche); }
.tisch-schnellsuche button { min-height: 48px; margin: 0; padding: .6rem 1rem; }

.visuell-versteckt {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.tisch-kennzahlen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.kennzahl {
  min-height: 9.8rem;
  display: flex;
  flex-direction: column;
  padding: 1.15rem 1.25rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: .8rem;
  box-shadow: 0 8px 24px rgb(20 36 59 / 3%);
}
.kennzahl > span { font-weight: 650; }
.kennzahl strong {
  margin: .25rem 0 auto;
  color: var(--betont);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.7rem;
  line-height: 1.1;
  font-weight: 500;
}
.kennzahl .status { display: inline-flex; align-items: center; gap: .45rem; color: var(--gedaempft); }
.kennzahl .status::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.status-entscheidung { color: #99650c !important; }
.status-arbeit { color: var(--betont) !important; }
.status-fertig { color: var(--erfolg) !important; }
.status-eingriff { color: var(--fehler) !important; }

.tisch-flaeche,
.bot-bereich {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: .9rem;
  box-shadow: 0 10px 32px rgb(20 36 59 / 3%);
}
.tisch-flaeche { padding: 1.4rem 1.4rem .5rem; }
.tisch-abschnittskopf { display: flex; justify-content: space-between; align-items: end; gap: 1.25rem; }
.tisch-flaeche h2 { margin: 0; font-size: clamp(1.65rem, 2.5vw, 2.2rem); }
.tisch-flaeche h2 span,
.bot-bereich summary span {
  display: inline-flex;
  min-width: 1.8rem;
  min-height: 1.8rem;
  justify-content: center;
  align-items: center;
  margin-left: .35rem;
  padding: .1rem .45rem;
  color: var(--text);
  background: #f1efea;
  border-radius: .45rem;
  font: 650 .82rem/1 system-ui, sans-serif;
  vertical-align: middle;
}

.tisch-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: .5rem; }
.tisch-werkzeuge label { position: absolute; left: -9999px; }
.tisch-werkzeuge select,
.tisch-werkzeuge input { width: auto; min-height: 42px; padding: .45rem .65rem; font-size: .9rem; }
.tisch-werkzeuge input { width: 13rem; }
.tisch-werkzeuge button { min-height: 42px; margin: 0; padding: .45rem .85rem; font-size: .9rem; }
.tisch-werkzeuge a { padding: .45rem; font-size: .9rem; }

.tisch-flaeche .tabellenrahmen { margin-top: 1.25rem; }
body.weit .vorgangsliste { min-width: 70rem; margin-top: 0; }
.vorgangsliste th,
.vorgangsliste td { padding: .9rem .65rem; }
.vorgangsliste thead th {
  border-bottom: 1px solid var(--linie);
  font-size: .72rem;
  letter-spacing: .045em;
}
.vorgangsliste tbody tr { position: relative; cursor: pointer; transition: background-color .15s ease; }
.vorgangsliste tbody tr:hover { background: #faf8f4; }
.vorgangsliste tbody tr:focus-within { box-shadow: inset 0 0 0 3px var(--betont); }
.vorgangsliste tbody td a { text-decoration: none; }
.vorgangsliste th:nth-child(2),
.vorgangsliste td:nth-child(2) { min-width: 13rem; max-width: 17rem; overflow-wrap: anywhere; }
.vorgangsliste th:nth-child(3),
.vorgangsliste td:nth-child(3) { min-width: 8rem; }
.vorgangsliste td:nth-child(4) { min-width: 24rem; word-break: normal !important; }
.vorgangsliste .alter { white-space: nowrap; color: var(--gedaempft); font-size: .88rem; }

/* Warum ein Vorgang auf dem Tisch liegt — steht unter der Zusammenfassung, nicht
   in einer eigenen Spalte: Die Tabelle hat schon sechs, und der Grund gehoert zum
   Fall, nicht daneben. */
.tisch-warum {
  display: block;
  margin-top: .3rem;
  color: var(--gedaempft);
  font-size: .85rem;
  line-height: 1.35;
}
/* „Grund veraltet" ist der Hinweis, der den zweiten Blick lohnt: Das Gate lief
   beim Anlegen, seine Gruende sind eingefroren — dieser hier gaebe es heute nicht
   mehr. Deshalb faellt er auf, waehrend der normale Grund gedaempft bleibt. */
.tisch-veraltet {
  display: inline-block;
  margin-top: .3rem;
  padding: .12rem .45rem;
  border-radius: 999px;
  background: #fdf3d6;
  color: #7a5a12;
  font-size: .78rem;
  font-weight: 600;
  cursor: help;
}
.mobile-vorgang .tisch-warum { margin-top: .2rem; }

/* Das Etikett „was gebraucht wird" — seit dem 19.08.2026 die eine Liste statt
   zweier Bloecke: Entwurf absegnen, Vorschlag entscheiden, Vorlage beantworten.
   Drei ruhige Farben, damit die Sorte Arbeit auf einen Blick erkennbar ist,
   ohne dass die Tabelle bunt wird. */
.tisch-etikett {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}
.etikett-entwurf   { background: #e3edf9; color: #1e4e79; }
.etikett-vorschlag { background: #e8f3e3; color: #2e5d1e; }
.etikett-vorlage   { background: #f4e8f5; color: #6b2470; }
/* Die Knoepfe unter dem Etikett in der Tabellenzelle etwas enger. */
.vorgangsliste .vorschlag-knoepfe { margin-top: .35rem; }
.vorgangsliste .luecke-knoepfe { margin: .35rem 0 0; }
.produktmarke {
  display: inline-block;
  padding: .22rem .55rem;
  border-radius: .4rem;
  color: #31557f;
  background: #eaf0f7;
  font-size: .78rem;
  font-weight: 650;
  white-space: nowrap;
}
.produktmarke.produkt-paketheld { color: #875812; background: #fbf0dc; }
.zeilenpfeil {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--text);
  text-decoration: none;
  border-radius: 50%;
  font-size: 1.3rem;
}
.zeilenpfeil:hover { background: #edf3f0; color: var(--betont); }
.zeilenpfeil::after { content: ""; position: absolute; inset: 0; }
.tisch-leer { padding: 2rem 0; color: var(--gedaempft); }
.mobile-vorgangsliste { display: none; }

.bot-bereich { margin-top: 1.25rem; padding: 0 1.4rem; }
.bot-bereich > summary { min-height: 64px; display: flex; align-items: center; font-size: 1.3rem; }
.bot-bereich > summary::marker { color: var(--betont); }
.bot-bereich ul { padding-bottom: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .vorgangsliste tbody tr { transition: none; }
}

@media (max-width: 72rem) {
  .admin-rahmen { grid-template-columns: 12.5rem minmax(0, 1fr); }
  .tisch-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tisch-kopf { flex-direction: column; gap: 1rem; }
  .tisch-schnellsuche { width: 100%; }
  .tisch-abschnittskopf { align-items: start; flex-direction: column; }
  .tisch-werkzeuge { justify-content: start; }
}

@media (max-width: 48rem) {
  .admin-rahmen { display: block; }
  .admin-seitenleiste {
    position: static;
    width: 100%;
    height: auto;
    padding: .8rem 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--linie);
  }
  .admin-seitenleiste .marke { padding: 0 0 .65rem; }
  .admin-seitenleiste .hauptleiste ul {
    height: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: .25rem;
  }
  .admin-seitenleiste .hauptleiste li { width: auto; flex: 0 0 auto; }
  .admin-seitenleiste .hauptleiste a,
  .admin-seitenleiste .hauptleiste [aria-current="page"] { padding: .55rem .8rem; }
  .admin-seitenleiste .hauptleiste a::before,
  .admin-seitenleiste .hauptleiste [aria-current="page"]::before,
  .admin-seitenleiste .hauptleiste [aria-current="page"]::after { display: none; }
  .admin-seitenleiste .hauptleiste .rechts { margin: 0; padding: 0; }
  body.weit .admin-hauptbereich main { padding: 1.5rem 1rem 2rem; }
  .tisch-kennzahlen { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .kennzahl { min-height: 8.5rem; padding: .9rem; }
  .kennzahl strong { font-size: 2.15rem; }
  .tisch-flaeche { padding: 1rem .9rem .3rem; }
  .tisch-werkzeuge { width: 100%; }
  .tisch-werkzeuge select,
  .tisch-werkzeuge input { width: 100%; }
  body.weit .vorgangsliste-rahmen { display: none !important; }
  .mobile-vorgangsliste { display: grid; gap: .7rem; }
  .mobile-vorgang {
    position: relative;
    min-width: 0;
    padding: .85rem 2.6rem .85rem .9rem;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: .7rem;
    box-shadow: 0 5px 16px rgb(20 36 59 / 3%);
  }
  .mobile-vorgang-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .4rem;
  }
  .mobile-vorgang-link {
    display: block;
    overflow-wrap: anywhere;
    font-weight: 700;
    text-decoration: none;
  }
  .mobile-vorgang-link::after { content: ""; position: absolute; inset: 0; }
  .mobile-vorgang p { margin: .35rem 0 .45rem; line-height: 1.45; }
  .mobile-vorgang .alter { color: var(--gedaempft); font-size: .85rem; }
  .mobile-vorgang-pfeil { position: absolute; right: .9rem; top: 50%; color: var(--betont); font-size: 1.25rem; transform: translateY(-50%); }
}

@media (prefers-color-scheme: dark) {
  body.weit {
    --grund: #111820;
    --flaeche: #19232e;
    --text: #eef3f3;
    --gedaempft: #b2bec4;
    --rahmen: #809098;
    --linie: #35414b;
    --betont: #76c5c3;
    --auf-betont: #102224;
    --fehler: #ff9b83;
    --erfolg: #83c9a6;
  }
  .admin-seitenleiste { background: #151e27; }
  .admin-seitenleiste .hauptleiste a:hover,
  .admin-seitenleiste .hauptleiste [aria-current="page"],
  .zeilenpfeil:hover { background: #21343a; }
  .tisch-flaeche h2 span,
  .bot-bereich summary span { background: #27323c; color: var(--text); }
  .vorgangsliste tbody tr:hover { background: #1d2933; }
  .produktmarke { color: #c5dcf5; background: #27394c; }
  .produktmarke.produkt-paketheld { color: #f0d19a; background: #44361f; }
}

/* Der Filter: Links, keine Knöpfe — der Zustand steht damit in der URL und ist
   ein Lesezeichen wert. */
.zustandsfilter { margin: 1.5rem 0 0; }
.zustandsfilter ul {
  display: flex; flex-wrap: wrap; gap: .5rem .75rem;
  list-style: none; padding: 0; margin: 0;
}
.zustandsfilter a, .zustandsfilter [aria-current] {
  display: inline-block;
  padding: .35rem .8rem;
  border: 1.5px solid var(--rahmen);
  border-radius: 999px;
  text-decoration: none;
  font-size: .95rem;
}
.zustandsfilter a:hover { border-color: var(--betont); }
.zustandsfilter [aria-current] {
  background: var(--betont); border-color: var(--betont); color: var(--auf-betont);
  font-weight: 600;
}
.zustandsfilter [aria-current] .klein { color: var(--auf-betont); }

/* Zahlenspalten: nicht umbrechen und nicht mitten in der Zahl trennen — die
   allgemeine Regel für die vierte Spalte (break-all) gilt hier nicht. */
.liste td.verhaeltniszelle, .liste td.melderzelle {
  white-space: nowrap; word-break: normal; font-variant-numeric: tabular-nums;
}

/* Ein Fix je Plattform. Ohne Aufzählungspunkte und ohne Einzug: Es sind zwei,
   höchstens drei Zeilen, und der Punkt davor sähe nach Fließtext aus. */
.fixliste { list-style: none; margin: 0; padding: 0; }
.fixliste li { margin: 0 0 .15rem; }
.fixliste li:last-child { margin-bottom: 0; }

.brotkrume { margin: 0 0 .5rem; font-size: .95rem; }
.brotkrume a { text-decoration: none; }
.brotkrume a:hover { text-decoration: underline; }

/* Das Anlegeformular ist länger als jede der Listen und stand vorher als Wand
   darunter. */
.anlegen { margin-top: 2.5rem; border-top: 1px solid var(--linie); padding-top: 1rem; }
.anlegen > summary { font-size: 1.05rem; }

/* ── Logbuch ────────────────────────────────────────────────────────────────
   Eine Zeitleiste zum ÜBERFLIEGEN. Eine Zeile je Ereignis, feste Spalten,
   damit das Auge senkrecht laufen kann statt jede Zeile neu zu suchen.

   🔑 Der Textauszug ist BEIWERK. Die erste Fassung gab ihm eine eigene Zeile in
   voller Breite und normaler Größe — damit führte das Unwichtigste die Seite an
   und zweihundert Einträge wurden zu einer endlosen Bahn. Er hängt jetzt hinten
   dran, gedämpft, und wird abgeschnitten.

   ⚠️ Farbe ist Dekoration. Die Art steht immer auch als Wort da. */

:root {
  --lb-ein:      #0f6b6d;
  --lb-aus:      #65717d;
  --lb-auto:     #315f68;   /* autonom gesendet — deswegen macht man die Seite auf */
  --lb-gut:      #39745b;
  --lb-stopp:    #a34432;
  --lb-neu:      #9a681c;
  --lb-eingriff: #8f563d;
  --lb-auf:      #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --lb-ein:      #76c5c3;
    --lb-aus:      #aab5bc;
    --lb-auto:     #8fbfc5;
    --lb-gut:      #83c9a6;
    --lb-stopp:    #ff9b83;
    --lb-neu:      #e2bd6a;
    --lb-eingriff: #dca087;
    --lb-auf:      #102224;
  }
}

.lb-tag {
  margin: 1.8rem 0 .3rem;
  font-size: .95rem;
  letter-spacing: .02em;
  position: sticky;
  top: 0;
  background: var(--grund);
  padding: .45rem 0 .35rem;
  border-bottom: 2px solid var(--linie);
  z-index: 2;
}
.lb-tag .klein { font-weight: 400; }

.lb-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: .75rem;
  overflow: hidden;
  box-shadow: 0 6px 20px rgb(20 36 59 / 2.5%);
}

/* Feste Spalten: Zeit · Art · Vorgang · Produkt · Auszug.
   `minmax(0, 1fr)` ist Pflicht, sonst weigert sich die letzte Spalte zu
   schrumpfen und das Abschneiden greift nie. */
.lb-eintrag {
  display: grid;
  grid-template-columns: 3.2rem 6.2rem 3.2rem 2.2rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0 .7rem;
  padding: .18rem .4rem .18rem .55rem;
  border-left: .3rem solid transparent;
  line-height: 1.45;
  font-size: .95rem;
}
.lb-eintrag + .lb-eintrag { border-top: 1px solid var(--linie); }
.lb-eintrag:hover { background: var(--flaeche); }

.lb-zeit {
  font-variant-numeric: tabular-nums;
  color: var(--gedaempft);
  font-size: .85rem;
}

/* Die Art: gefüllte Fläche statt Umriss — ein Umriss in Randfarbe verschwand
   auf dem Seitengrund. */
.lb-art {
  font-size: .78rem;
  font-weight: 600;
  text-align: center;
  padding: .05rem .35rem;
  border-radius: .3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-vorgang { font-variant-numeric: tabular-nums; text-align: right; }
.lb-produkt {
  font-size: .78rem;
  color: var(--gedaempft);
  font-variant-numeric: tabular-nums;
}

/* Der Auszug: eine Zeile, abgeschnitten, gedämpft. */
.lb-text {
  color: var(--gedaempft);
  text-decoration: none;
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.lb-eintrag:hover .lb-text { color: var(--text); }

/* Je Art: Balken links und Fläche der Marke. */
.lb-eintrag.ein      { border-left-color: var(--lb-ein); }
.lb-eintrag.ein      .lb-art { background: var(--lb-ein); color: var(--lb-auf); }
.lb-eintrag.aus      { border-left-color: var(--lb-aus); }
.lb-eintrag.aus      .lb-art { background: var(--lb-aus); color: var(--lb-auf); }
.lb-eintrag.auto     { border-left-color: var(--lb-auto); }
.lb-eintrag.auto     .lb-art { background: var(--lb-auto); color: var(--lb-auf); }
.lb-eintrag.gut      { border-left-color: var(--lb-gut); }
.lb-eintrag.gut      .lb-art { background: var(--lb-gut); color: var(--lb-auf); }
.lb-eintrag.stopp    { border-left-color: var(--lb-stopp); }
.lb-eintrag.stopp    .lb-art { background: var(--lb-stopp); color: var(--lb-auf); }
.lb-eintrag.neu      { border-left-color: var(--lb-neu); }
.lb-eintrag.neu      .lb-art { background: var(--lb-neu); color: var(--lb-auf); }
.lb-eintrag.eingriff { border-left-color: var(--lb-eingriff); }
.lb-eintrag.eingriff .lb-art { background: var(--lb-eingriff); color: var(--lb-auf); }

/* 🔑 Die leisen Arten — Notiz, Melder, verworfener Entwurf — sind die HÄUFIGSTEN
   (an einem Tag 60 Notizen gegen 6 autonome Sendungen). Sie treten deutlich
   zurück: keine gefüllte Marke, dünnerer Balken, blasser. Sonst erschlagen sie
   genau die Zeilen, wegen derer man die Seite aufmacht. */
.lb-eintrag.leise { border-left-width: .12rem; }
.lb-eintrag.leise .lb-art {
  background: transparent;
  color: var(--gedaempft);
  border: 1px solid var(--linie);
  font-weight: 400;
}
.lb-eintrag.leise .lb-zeit,
.lb-eintrag.leise .lb-text { opacity: .65; }

/* 🔴 Die zwei lautesten Fälle: etwas ist autonom an einen echten Spieler
   gegangen, oder an einem Konto wurde etwas verändert. Sie bekommen als
   einzige eine getönte Fläche über die ganze Zeile. */
.lb-eintrag.auto,
.lb-eintrag.eingriff { background: color-mix(in srgb, var(--flaeche) 88%, var(--lb-auto)); }
.lb-eintrag.eingriff { background: color-mix(in srgb, var(--flaeche) 88%, var(--lb-eingriff)); }
.lb-eintrag.auto .lb-text,
.lb-eintrag.eingriff .lb-text { color: var(--text); }

/* Schmale Bildschirme: Produkt und Auszug fallen weg, sie sind Beiwerk. */
@media (max-width: 46rem) {
  .lb-eintrag { grid-template-columns: 3.2rem 6.2rem 1fr; }
  .lb-produkt, .lb-text { display: none; }
}

/* Der Filter oben: eine Zeile, die sich umbricht. */
.lb-filter {
  display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: end;
  margin-bottom: .5rem;
}
.lb-filter label { font-size: .9rem; color: var(--gedaempft); display: block; }

/* ══ Gemeinsames System der Admin-Unterseiten ══════════════════════════════ */

.admin-seite:not(.admin-seite-index) main > h1 {
  max-width: 58rem;
  margin: 0 0 .45rem;
  font-size: clamp(2.15rem, 4vw, 3.15rem);
  color: var(--text);
}
.admin-seite:not(.admin-seite-index) main > h1::before {
  content: "Support · Verwaltung";
  display: block;
  margin-bottom: .35rem;
  color: var(--betont);
  font: 750 .74rem/1.4 system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.admin-seite:not(.admin-seite-index) main > h1 + p {
  max-width: 54rem;
  margin-top: 0;
  color: var(--gedaempft);
  font-size: 1.02rem;
}
.admin-seite main > h2 {
  margin: 2.2rem 0 .85rem;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.25;
}

.admin-seite article.karte {
  max-width: none;
  margin-bottom: .8rem !important;
  padding: 1.05rem 1.2rem 1.15rem;
  border-color: var(--linie);
  box-shadow: 0 6px 20px rgb(20 36 59 / 2.5%);
}
.admin-seite article.karte > h2:first-child {
  margin-top: 0 !important;
  font-size: 1.08rem !important;
  line-height: 1.35;
}
.admin-seite article.karte > p:last-child { margin-bottom: 0; }
.admin-seite article.karte details {
  margin-top: .8rem;
  padding-top: .7rem;
  border-top: 1px solid var(--linie);
}

.admin-seite .werkzeugleiste,
.admin-seite .lb-filter {
  gap: .65rem;
  margin: 1.25rem 0 1.4rem;
  padding: .85rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: .75rem;
  box-shadow: 0 6px 20px rgb(20 36 59 / 2.5%);
}
.admin-seite .werkzeugleiste input,
.admin-seite .werkzeugleiste select,
.admin-seite .lb-filter input,
.admin-seite .lb-filter select { min-height: 42px; }
.admin-seite .werkzeugleiste button,
.admin-seite .lb-filter button { min-height: 42px; margin-top: 0; padding: .5rem .9rem; }

.admin-seite .kopfdaten {
  max-width: 58rem;
  padding: 1rem 1.1rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: .75rem;
}

.admin-seite .tabellenrahmen,
.admin-seite div[style*="overflow-x:auto"] {
  border: 1px solid var(--linie);
  border-radius: .75rem;
  background: var(--flaeche);
}
.admin-seite .tabellenrahmen .liste,
.admin-seite div[style*="overflow-x:auto"] table { margin-top: 0; }
.admin-seite .liste tbody tr:last-child td { border-bottom: 0; }

.admin-seite form.karte {
  border-color: var(--linie);
  box-shadow: 0 8px 28px rgb(20 36 59 / 3%);
}
.admin-seite details.anlegen {
  max-width: 50rem;
  margin-top: 2rem;
  padding: 1rem 1.1rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: .75rem;
}
.admin-seite details.anlegen > summary { color: var(--betont); font-size: 1rem; }
.admin-seite details.anlegen form.karte { margin-top: 1rem; border: 0; box-shadow: none; padding-inline: 0; }

.admin-seite-ki .admin-hauptbereich,
.admin-seite-ki main { min-width: 0; }
.admin-seite-ki main > .liste {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: .75rem;
}

.admin-seite-vorgang .raumkopf {
  border: 1px solid var(--linie);
  border-radius: .85rem;
  padding: 1rem 1.15rem;
  background: color-mix(in srgb, var(--flaeche) 94%, var(--betont));
  box-shadow: 0 8px 24px rgb(20 36 59 / 3%);
}
.admin-seite-vorgang .handlungen { box-shadow: 0 8px 24px rgb(20 36 59 / 3%); }
body.weit.admin-seite-vorgang .admin-hauptbereich main { max-width: 84rem; }

@media (min-width: 72rem) {
  .admin-seite-wissen article.karte,
  .admin-seite-ideen article.karte,
  .admin-seite-schreibregeln article.karte,
  .admin-seite-agent-inhalte article.karte,
  .admin-seite-eingriffe article.karte { max-width: 68rem; }
}

@media (max-width: 48rem) {
  .admin-seite:not(.admin-seite-index) main > h1 { font-size: 2rem; }
  .admin-seite .werkzeugleiste,
  .admin-seite .lb-filter { align-items: stretch; }
  .admin-seite .werkzeugleiste > *,
  .admin-seite .lb-filter > * { width: 100%; }
  .admin-seite .werkzeugleiste select,
  .admin-seite .werkzeugleiste input,
  .admin-seite .lb-filter select,
  .admin-seite .lb-filter input { width: 100%; }
  .admin-seite .kopfdaten { grid-template-columns: 1fr; gap: .15rem; }
  .admin-seite .kopfdaten dd { margin-bottom: .65rem; }
}

/* Ideen: breite Übersicht, kompakte Bearbeitung. Die Beschreibung darf den
   Arbeitsraum nutzen; ein einzeiliges Notizfeld soll ihn nicht ausfüllen. */
.admin-seite-ideen article.karte { max-width: none; }
.admin-seite-ideen .ideen-statusformular {
  display: grid;
  grid-template-columns: 11rem minmax(16rem, 30rem) auto;
  grid-template-rows: auto auto;
  align-items: end;
  justify-content: start;
  gap: .25rem .75rem;
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--linie);
}
.ideen-statusformular label { margin: 0; font-size: .85rem; color: var(--gedaempft); }
.ideen-statusformular label[for^="z"] { grid-column: 1; grid-row: 1; }
.ideen-statusformular select { grid-column: 1; grid-row: 2; width: 100%; min-height: 42px; }
.ideen-statusformular label[for^="n"] { grid-column: 2; grid-row: 1; }
.ideen-statusformular input[name="notiz"] { grid-column: 2; grid-row: 2; width: 100%; min-height: 42px; }
.ideen-statusformular button { grid-column: 3; grid-row: 2; min-height: 42px; margin: 0; padding: .5rem .9rem; }
body.weit .ideen-neuformular { max-width: 40rem; }

@media (max-width: 42rem) {
  .admin-seite-ideen .ideen-statusformular { grid-template-columns: 1fr; grid-template-rows: auto; }
  .ideen-statusformular label,
  .ideen-statusformular label[for^="z"],
  .ideen-statusformular label[for^="n"],
  .ideen-statusformular select,
  .ideen-statusformular input[name="notiz"],
  .ideen-statusformular button { grid-column: 1; grid-row: auto; }
  .ideen-statusformular label[for^="n"] { margin-top: .5rem; }
  .ideen-statusformular button { margin-top: .65rem; width: 100%; }
}

/* Wissen: Die Übersicht ist zum Finden da, die Detailseite zum Lesen und
   Ändern. Deshalb keine langen Aussagekarten mehr in der Liste. */
body.weit .wissen-liste { min-width: 58rem; margin-top: 0; }
.wissen-liste tbody tr { position: relative; cursor: pointer; }
.wissen-liste tbody tr:hover { background: #faf8f4; }
.wissen-liste tbody tr:focus-within { box-shadow: inset 0 0 0 3px var(--betont); }
.wissen-liste td:nth-child(1) { min-width: 20rem; }
.wissen-auszug {
  display: block;
  max-width: 44rem;
  margin-top: .18rem;
  overflow: hidden;
  color: var(--gedaempft);
  font-size: .87rem;
  font-weight: 400;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wissen-liste td:nth-child(2),
.wissen-liste td:nth-child(3),
.wissen-liste td:nth-child(4) { min-width: 8rem; }
.wissen-liste td:nth-child(5),
.wissen-liste td:nth-child(6) { width: 6rem; white-space: nowrap; }
.wissen-liste .ist-veraltet { box-shadow: inset 4px 0 0 #9a681c; }
.wissen-alt { color: #8b5c12; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.wissen-oeffnen {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--text);
  text-decoration: none;
  border-radius: 50%;
  font-size: 1.3rem;
}
.wissen-oeffnen::after { content: ""; position: absolute; inset: 0; }
.wissen-zeile { position: relative; }
/* Tabellenzeilen dürfen kein <a> um <tr> tragen. Der echte Link wird deshalb
   auf Zellenbreite erweitert; die Zeile reagiert zusätzlich auf Fokus. */
.wissen-zeile td:last-child { position: static; }

.wissen-detail {
  max-width: 72rem;
  padding: 1.4rem 1.5rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: .9rem;
  box-shadow: 0 10px 32px rgb(20 36 59 / 3%);
}
.wissen-detailkopf { display: flex; align-items: start; justify-content: space-between; gap: 1.5rem; }
.wissen-detailkopf h2 { margin: 0; font: 500 clamp(1.55rem, 2.5vw, 2.15rem)/1.2 Georgia, serif; }
.wissen-sichtbarkeit {
  flex: 0 0 auto;
  padding: .3rem .65rem;
  border: 1px solid var(--rahmen);
  border-radius: 999px;
  color: var(--gedaempft);
  font-size: .82rem;
  font-weight: 650;
}
.wissen-aussage {
  margin: 1.35rem 0;
  padding: 1rem 1.1rem;
  background: var(--grund);
  border-left: 4px solid var(--betont);
  border-radius: .45rem;
  font-size: 1.08rem;
  line-height: 1.65;
}
.wissen-detail .kopfdaten { max-width: none; border: 0; padding: 0; }
.wissen-verlauf { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
.wissen-verlauf blockquote { margin: 1rem 0; padding: .8rem 1rem; background: var(--grund); border-radius: .5rem; }
.wissen-detail + h2,
.wissen-detail ~ form.karte { max-width: 46rem; }
.wissen-neu { margin-top: 1.5rem; }

@media (max-width: 48rem) {
  .wissen-detail { padding: 1rem; }
  .wissen-detailkopf { flex-direction: column; gap: .75rem; }
  .wissen-sichtbarkeit { align-self: flex-start; }
}

/* Schreibregeln folgen derselben Grammatik wie Wissen: Liste zum Scannen,
   Detailfläche zum Verstehen und Bearbeiten. */
body.weit .regeln-liste { min-width: 54rem; margin-top: 0; }
.regeln-liste tbody tr { position: relative; cursor: pointer; }
.regeln-liste tbody tr:hover { background: #faf8f4; }
.regeln-liste tbody tr:focus-within { box-shadow: inset 0 0 0 3px var(--betont); }
.regeln-liste td:first-child { min-width: 25rem; }
.regel-auszug {
  display: block;
  max-width: 48rem;
  margin-top: .18rem;
  overflow: hidden;
  color: var(--gedaempft);
  font-size: .87rem;
  font-weight: 400;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.regel-oeffnen {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--text);
  text-decoration: none;
  border-radius: 50%;
  font-size: 1.3rem;
}
.regel-oeffnen::after { content: ""; position: absolute; inset: 0; }
.regel-detail {
  max-width: 72rem;
  padding: 1.4rem 1.5rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: .9rem;
  box-shadow: 0 10px 32px rgb(20 36 59 / 3%);
}
.regel-detail h2 { margin: 0; font: 500 clamp(1.55rem, 2.5vw, 2.15rem)/1.2 Georgia, serif; }
.regel-status {
  flex: 0 0 auto;
  padding: .3rem .65rem;
  border: 1px solid var(--rahmen);
  border-radius: 999px;
  color: var(--gedaempft);
  font-size: .82rem;
  font-weight: 650;
}
.regel-beschreibung {
  margin: 1.35rem 0;
  padding: 1rem 1.1rem;
  background: var(--grund);
  border-left: 4px solid var(--betont);
  border-radius: .45rem;
  font-size: 1.08rem;
  line-height: 1.65;
}
.regel-detail .kopfdaten { max-width: none; border: 0; padding: 0; }
.regel-verlauf { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
.regel-verlauf blockquote { margin: 1rem 0; padding: .8rem 1rem; background: var(--grund); border-radius: .5rem; }
.regel-deaktivieren {
  max-width: 40rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linie);
}
.regel-deaktivieren button { background: var(--fehler); }
.regel-detail + h2,
.regel-detail ~ form.karte { max-width: 46rem; }
.regeln-neu { margin-top: 1.5rem; }

@media (max-width: 48rem) {
  .regel-detail { padding: 1rem; }
  .regel-deaktivieren { max-width: none; }
}

/* ── Bot-Anzeige in der Kopfleiste ──────────────────────────────────────────
   🔴 Drei Zustände, nicht zwei. „Still" heißt ausdrücklich: kann eine ruhige
   Phase sein oder ein Stillstand — das lässt sich am Herzschlag allein nicht
   unterscheiden, also behauptet die Anzeige es nicht.

   ⚠️ Die Farbe ist nicht die einzige Auskunft. Neben dem Punkt steht das Wort
   („Bot läuft", „Bot still", „Bot steht") und darunter, wie alt der letzte
   Herzschlag ist. */

:root {
  --bot-laeuft: #1a7f37;
  --bot-still:  #9a6700;
  --bot-steht:  #cf222e;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bot-laeuft: #7ddba4;
    --bot-still:  #e0b53d;
    --bot-steht:  #ff8087;
  }
}

.bot-punkt {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  text-decoration: none;
  padding: .2rem .55rem;
  border: 1.5px solid var(--linie);
  border-radius: 999px;
  font-size: .9rem;
  white-space: nowrap;
}
.bot-punkt:hover { border-color: var(--betont); }

.bot-leuchte {
  width: .6rem; height: .6rem;
  border-radius: 50%;
  flex: none;
  background: var(--gedaempft);
}
.bot-punkt.laeuft    .bot-leuchte { background: var(--bot-laeuft); }
.bot-punkt.still     .bot-leuchte { background: var(--bot-still); }
.bot-punkt.steht     .bot-leuchte { background: var(--bot-steht); }
.bot-punkt.unbekannt .bot-leuchte { background: var(--gedaempft); }

.bot-punkt.laeuft { border-color: var(--bot-laeuft); }
.bot-punkt.steht  { border-color: var(--bot-steht); }

.bot-alter { color: var(--gedaempft); }

/* Woran der Bot gerade arbeitet — eine Zeile unter dem Punkt, bewusst schmal.
   Sie soll beim Vorbeigehen lesbar sein, nicht die Navigation verdrängen. */
.bot-tut {
  /* ⚠️ Der Abstand NACH UNTEN ist der wichtigere: ohne ihn klebt der Satz am
     ersten Menüpunkt und liest sich wie dessen Beschriftung. */
  margin: .35rem 0 .9rem;
  padding-left: .55rem;
  border-left: 2px solid var(--linie);
  font-size: .78rem;
  line-height: 1.3;
  color: var(--gedaempft);
  /* Lange Sätze umbrechen statt die Leiste zu sprengen. */
  overflow-wrap: anywhere;
}
/* Die Zeile, an der der Bot gerade arbeitet. Bewusst zurückhaltend: Sie ist eine
   Auskunft, keine Warnung — hier ist nichts zu tun. */
.liste tr.bot-dran { background: var(--bot-dran-grund); }
/* Auftragsvorschläge des Bots: noch keine Aufträge — sie warten auf einen Klick.
   Deshalb eigene Farbe, deutlich von den erteilten Aufträgen unterschieden. */
.hinweiskasten.vorschlaege { border-color: var(--betont); margin-top: 1.4rem; }
.vorschlag { margin: .6rem 0 0; padding-top: .5rem; border-top: 1px solid var(--linie); }
.vorschlag:first-of-type { border-top: 0; padding-top: 0; }
.vorschlag .text { margin: .2rem 0 .4rem; }
.vorschlag-knoepfe { display: flex; gap: .5rem; flex-wrap: wrap; }
.vorschlag-knoepfe button { padding: .3rem .8rem; font-size: .9rem; }
/* Verwerfen ist die seltenere Wahl und soll nicht wie die Hauptaktion aussehen. */
.vorschlag-knoepfe button.leise {
  background: transparent; color: var(--gedaempft); border: 1px solid var(--rahmen);
}

/* Einordnungsvorschläge: eigene Farbe, weil hier keine Handlung entschieden wird,
   sondern eine Einstufung — an ihr hängen Sichtbarkeit und Antwortspielraum. */
.hinweiskasten.einordnungen { border-color: var(--z-unklar); margin-top: 1.4rem; }
.hinweiskasten.einordnungen .produktmarke { vertical-align: baseline; }

/* Offene Aufträge: Mathias' eigene Anordnungen. Sie stehen weit oben, weil ein
   offener Auftrag seit dem 12.08.2026 auch Eingriffe freigibt — was Vollmacht
   erteilt, darf nicht zugeklappt in der Ecke liegen. */
.auftragsliste > summary { font-weight: 600; }
.auftragsliste td[data-label="Auftrag"] { max-width: 46ch; }

/* Offene Zusagen: verbindlicher als ein Entwurf — ein Mensch wartet darauf. */
/* ⚠️ Eigener Abstand nach oben: Der Kasten folgt direkt auf eine Tabelle und
   klebte sonst an deren Rand. */
.hinweiskasten.zusagen { border-color: var(--z-bestaetigt); margin-top: 1.4rem; }
.hinweiskasten.zusagen ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.hinweiskasten.zusagen li { margin-bottom: .2rem; }

/* Vorgelegt ohne Entwurf (12.08.2026). Bewusst dieselbe Flaeche wie „Wartet auf
   dich" — es ist dieselbe Sorte Arbeit. Jede Zeile traegt zwei Zeilen Text
   (Fall + Grund), deshalb mehr Luft als bei den Zusagen. */
/* ⚠️ Eigener Abstand nach oben — Mathias, 12.08.2026: „das klebt oben dran".
   Die Flaeche folgt direkt auf „Wartet auf dich" und stiess ohne diese Zeile
   an deren Rand. Dieselbe Stelle wie beim Zusagenkasten. */
.vorgelegt-flaeche { margin-top: 1.4rem; }

.vorgelegt-liste { list-style: none; margin: .6rem 0 0; padding: 0; }
.vorgelegt-liste li {
  padding: .6rem .8rem;
  margin-bottom: .5rem;
  border-left: 3px solid var(--z-wartet, #c8912a);
  background: var(--flaeche-still, rgba(0, 0, 0, .03));
  border-radius: 0 4px 4px 0;
}
/* Der Weg zur Antwort muss im Kasten stehen, nicht erst auf der Vorgangsseite
   gesucht werden — Mathias: „ich weiss nicht wie ich da rein schaue in die
   auftraege um anweisungen zu geben". */
.vorgelegt-liste .auftrag-sprung {
  display: inline-block;
  margin-top: .45rem;
  font-weight: 600;
}

.bot-marke {
  display: inline-block;
  margin-left: .35rem;
  padding: .05rem .4rem;
  border-radius: 4px;
  background: var(--bot-laeuft);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}
:root { --bot-dran-grund: #eef7f1; }
@media (prefers-color-scheme: dark) {
  :root { --bot-dran-grund: #16261d; }
}

.bot-tut a { color: var(--betont); text-decoration: none; font-weight: 600; }
.bot-tut a:hover { text-decoration: underline; }

/* In der schmalen Seitenleiste bricht die Zeile ohnehin um; dort reicht Punkt
   und Wort, das Alter tritt weg. */
@media (max-width: 60rem) {
  .bot-alter { display: none; }
}

/* Der Bot-Punkt in der Seitenleiste sitzt direkt unter der Marke — die Frage
   „läuft er?" stellt man beim Aufmachen, nicht am Ende der Liste. */
.admin-seitenleiste .bot-punkt {
  display: flex;
  margin: .6rem 0 .2rem;
  width: 100%;
  box-sizing: border-box;
}
.admin-seitenleiste .bot-punkt .bot-alter { margin-left: auto; }

/* KI ist ein Kontrollzentrum: Zustand und Ergebnis zuerst, die selten
   benötigte Konfiguration bleibt erreichbar, ohne den Alltag zu dominieren. */
.ki-betrieb {
  display: grid;
  grid-template-columns: minmax(10rem, .55fr) minmax(18rem, 1.45fr);
  align-items: center;
  gap: 1.5rem;
  margin: 1rem 0 1.25rem;
  padding: 1.15rem 1.35rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 5px solid var(--betont);
  border-radius: .85rem;
  box-shadow: 0 10px 32px rgb(20 36 59 / 4%);
}
.ki-betrieb.ist-sicher { border-left-color: var(--erfolg); }
.ki-betrieb.ist-aktiv { border-left-color: var(--fehler); }
.ki-betrieb h2 { margin: .1rem 0 0; font: 500 1.4rem/1.2 Georgia, serif; }
.ki-betrieb p { margin: 0; line-height: 1.55; }
.ki-betrieb .tisch-ueberzeile { color: var(--gedaempft); font-size: .75rem; }

.ki-kennzahlen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem;
  margin-bottom: 2rem;
}
.ki-kennzahlen article {
  min-width: 0;
  padding: 1rem 1.1rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: .75rem;
}
.ki-kennzahlen span,
.ki-kennzahlen small { display: block; color: var(--gedaempft); }
.ki-kennzahlen span { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ki-kennzahlen strong { display: block; margin: .25rem 0 .15rem; font: 500 1.8rem/1.1 Georgia, serif; }
.ki-kennzahlen small { overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }

body.weit .ki-qualitaet { min-width: 62rem; }
body.weit .ki-verlauf { min-width: 68rem; }
.ki-qualitaet tbody td:nth-child(n+3) { font-variant-numeric: tabular-nums; }

.ki-einstellungen {
  max-width: 72rem;
  margin: 2rem 0;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: .85rem;
  box-shadow: 0 10px 32px rgb(20 36 59 / 3%);
}
.ki-einstellungen summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.6rem;
  padding: .25rem 1.2rem;
  cursor: pointer;
  list-style: none;
}
.ki-einstellungen summary::-webkit-details-marker { display: none; }
.ki-einstellungen summary::after { content: "+"; color: var(--betont); font-size: 1.45rem; }
.ki-einstellungen[open] summary::after { content: "−"; }
.ki-einstellungen summary span { font: 500 1.15rem/1.2 Georgia, serif; }
.ki-einstellungen summary small { margin-left: auto; color: var(--gedaempft); }
.ki-einstellungen form.karte {
  max-width: none;
  margin: 0;
  padding: .25rem 1.2rem 1.3rem;
  border: 0;
  border-top: 1px solid var(--linie);
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 48rem) {
  .ki-betrieb { grid-template-columns: 1fr; gap: .65rem; }
  .ki-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ki-einstellungen summary small { display: none; }
}

/* Agent-Inhalte: Inhaltsverzeichnis statt ausgeschriebener Dokumentstapel. */
.agent-kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; max-width: 54rem; margin: 1rem 0 1.5rem; }
.agent-kennzahlen article { padding: .85rem 1rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: .75rem; }
.agent-kennzahlen span, .agent-kennzahlen small { display: block; color: var(--gedaempft); }
.agent-kennzahlen span { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.agent-kennzahlen strong { display: block; margin: .2rem 0; font: 500 1.65rem/1.1 Georgia, serif; }
.agent-kennzahlen small { font-size: .8rem; }
body.weit .agent-liste { min-width: 58rem; }
.agent-liste tbody tr { position: relative; }
.agent-liste tbody tr:hover { background: #faf8f4; }
.agent-liste td:first-child { min-width: 24rem; }
.agent-zeilenlink { color: var(--text); text-decoration: none; }
.agent-zeilenlink::after { content: ""; position: absolute; inset: 0; }
.agent-zeilenlink strong { color: var(--betont); }
.agent-auszug, .agent-kennung { display: block; margin-top: .2rem; color: var(--gedaempft); font-size: .82rem; font-weight: 400; }
.agent-auszug { max-width: 42rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-status { display: inline-block; padding: .2rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.agent-status.ist-aktiv { color: var(--erfolg); background: color-mix(in srgb, var(--erfolg) 10%, transparent); }
.agent-status.ist-inaktiv { color: var(--gedaempft); background: var(--grund); }
.agent-pfeil { color: var(--betont); font-size: 1.2rem; }
.agent-detail { max-width: 72rem; margin-top: 2rem; padding: 1.4rem 1.5rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: .9rem; }
.agent-detail h2 { margin: .1rem 0 1.2rem; font: 500 clamp(1.45rem, 2.5vw, 2rem)/1.2 Georgia, serif; }
.agent-detail form.karte { max-width: 52rem; margin: 0; padding: 0; border: 0; box-shadow: none; }
.agent-versionen { max-width: 72rem; margin-top: 1rem; padding: .9rem 1.1rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: .75rem; }
.agent-versionen summary { cursor: pointer; font-weight: 700; }

@media (max-width: 48rem) {
  .agent-kennzahlen { grid-template-columns: 1fr; }
  .agent-detail { padding: 1rem; }
}

/* Eingriffe: Positivliste als Sicherheitsinstrument, nicht als Kartenwand. */
.eingriff-kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin: 1rem 0 2rem; }
.eingriff-kennzahlen article { padding: 1rem 1.1rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: .75rem; }
.eingriff-kennzahlen span, .eingriff-kennzahlen small { display: block; color: var(--gedaempft); }
.eingriff-kennzahlen span { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.eingriff-kennzahlen strong { display: block; margin: .22rem 0; font: 500 1.75rem/1.1 Georgia, serif; }
.eingriff-kennzahlen small { font-size: .8rem; }
body.weit .eingriff-liste { min-width: 68rem; }
body.weit .eingriff-protokoll { min-width: 72rem; }
.eingriff-liste tbody tr { position: relative; }
.eingriff-liste tbody tr:hover { background: #faf8f4; }
.eingriff-liste td:first-child { min-width: 24rem; }
.eingriff-zeilenlink { color: var(--text); text-decoration: none; }
.eingriff-zeilenlink::after { content: ""; position: absolute; inset: 0; }
.eingriff-zeilenlink strong { color: var(--betont); }
.eingriff-auszug { display: block; max-width: 40rem; margin-top: .2rem; overflow: hidden; color: var(--gedaempft); font-size: .83rem; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.eingriff-status { display: inline-block; padding: .2rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.eingriff-status.ist-autonom { color: var(--erfolg); background: color-mix(in srgb, var(--erfolg) 10%, transparent); }
.eingriff-status.ist-gesperrt { color: #8a5a00; background: #fff5d6; }
.eingriff-nebenzeile { display: block; color: var(--gedaempft); font-size: .78rem; }
.eingriff-pfeil { color: var(--betont); font-size: 1.2rem; }
.eingriff-editor { max-width: 52rem; }
.eingriff-loeschen { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: 52rem; margin: 1rem 0 2rem; padding: 1rem 1.2rem; background: var(--flaeche); border: 1px solid color-mix(in srgb, var(--fehler) 35%, var(--linie)); border-radius: .75rem; }
.eingriff-loeschen p { margin: 0; }
.eingriff-loeschen button { flex: 0 0 auto; background: var(--fehler); }

@media (max-width: 48rem) {
  .eingriff-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eingriff-loeschen { align-items: stretch; flex-direction: column; }
}

/* Auftragsfeld auf der Vorgangsseite — zugeklappt, bis man es braucht
   (Mathias, 12.08.2026). Das Grundstyling fuer `details summary` steht weiter
   oben; hier nur der Abstand, damit das aufgeklappte Feld nicht am Summary
   klebt. */
.auftragsfeld { margin: .9rem 0; }
.auftragsfeld[open] > summary { margin-bottom: .6rem; }

/* Das Ergebnis einer Ansage — Gegenstück zu `.typ-auftrag-erledigt` darüber.
   Bis zum 13.08.2026 gab es diesen Punkt nicht: Das Ergebnis lag in
   `ticket_nachricht.ergebnis` und wurde nirgends gezeigt. Der Bot hat deshalb
   in einer Runde 25 Minuten Recherche wiederholt, die schon abgelegt war.
   Gedämpft wie die erledigte Ansage, aber mit der Kante des Bots statt der
   von Mathias — es sind zwei Aussagen von zwei Seiten. */
.strom .typ-auftrag-ergebnis {
  background: var(--grund);
  border-left: 4px solid var(--lb-gut, var(--betont));
}

/* Anklickbare Optionen an einer Vorlage (13.08.2026).
   Der Bot schrieb seinen Vorschlag bisher in den Fließtext; jetzt steht er als
   Knopf da. Bewusst schlicht und untereinander: Die Liste wird auch mit
   Screenreader gelesen, und nebeneinanderliegende Knöpfe ohne Trennung sind
   dort eine Kette gleichklingender Schaltflächen. */
.luecke-knoepfe { margin: .5rem 0 .2rem; display: flex; flex-direction: column; gap: .35rem; }
.luecke-knoepfe form { margin: 0; }
.luecke-knopf {
  width: 100%; text-align: left; cursor: pointer;
  padding: .45rem .7rem; border-radius: 6px;
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--text);
  font-size: .95rem; line-height: 1.35;
}
.luecke-knopf:hover { border-color: var(--betont); }
/* Schließen ist die stillste Handlung — sie schickt nichts und nimmt nur weg. */
.luecke-schliessen { border-left: 4px solid var(--gedaempft); }
/* Ein Auftrag gibt den Vorgang an den Bot zurück; das ist die aktive Wahl. */
.luecke-auftrag { border-left: 4px solid var(--lb-gut, var(--betont)); }
/* Kein Knopf: eine Frage, die nur Mathias beantworten kann. */
.luecke-hinweis {
  margin: .35rem 0; padding: .4rem .6rem;
  border-left: 4px solid var(--warnung, #b26a00);
  background: var(--grund); font-size: .95rem;
}

/* Block 4: offene Zusagen (13.08.2026).
   Bewusst dieselben Knöpfe wie bei den Vorlagen — es ist derselbe Handgriff,
   nur an anderem Material. Wer zwei Bedienlogiken auf einer Seite hat, benutzt
   die zweite seltener. */
.zusagen-liste { list-style: none; margin: 0; padding: 0; }
.zusage-eintrag {
  padding: .6rem .7rem; margin-bottom: .5rem;
  border: 1px solid var(--linie); border-radius: .5rem; background: var(--flaeche);
}
/* Ab 24 Stunden auffällig — ein gesetzter Anfangswert, keine Messung. Die
   älteste Zusage war beim Einbau 23,8 Stunden alt; die Zahl ist zum Ändern da. */
.zusage-alt { border-left: 4px solid var(--warnung, #b26a00); }
/* Streichen ist die schwerere Handlung: Sie löst nichts ein, sie hört auf
   nachzuhalten. Deshalb die Warnfarbe und nicht die stille Kante. */
.luecke-streichen { border-left: 4px solid var(--fehler); }

/* Interne Notizen zugeklappt (19.08.2026): Kopfzeile sichtbar, Wortlaut per
   Klick. Die Vorschau in der summary traegt die ersten Worte. */
.notiz-klapp summary {
  cursor: pointer;
  color: var(--gedaempft);
  font-size: .9rem;
  line-height: 1.4;
}
.notiz-klapp[open] summary { margin-bottom: .4rem; }
/* Der Anlass — die erste Spielernachricht — steht immer oben, vor der Faltung. */
.strom-anlass { margin-bottom: .3rem; }

/* ── Chat-Optik (Mathias, 19.08. 09:56: „so ein bisschen wie Chat aufbauen") ──
   Das SICHTBARE Gespraech liegt auf zwei Seiten: der Spieler links, was an ihn
   rausging rechts — wie in jedem Messenger. Interne Schritte (Notizen,
   Vorlagen, Vorschlaege, Entwuerfe) bleiben schmal in der Mitte und gedaempft:
   Sie sind Regieanweisungen, nicht Gespraech. Die Zeitlinie links bleibt. */
.strom .blase { max-width: 78%; }
.strom .typ-spieler {
  margin-right: auto;
  background: var(--grund);
  border-top-left-radius: .25rem;
}
.strom .typ-gesendet, .strom .typ-versand {
  margin-left: auto;
  margin-right: 0;
  border-top-right-radius: .25rem;
  background: color-mix(in srgb, var(--erfolg) 7%, var(--flaeche));
  border-color: color-mix(in srgb, var(--erfolg) 30%, var(--linie));
}
/* Interne Schritte: mittig, schmaler, leiser. */
.strom .typ-notiz, .strom .typ-vorlage, .strom .typ-vorschlag-offen,
.strom .typ-vorschlag-erledigt, .strom .typ-entwurf, .strom .typ-entwurf-gesendet,
.strom .typ-entwurf-ueberholt, .strom .typ-entwurf-verworfen,
.strom .typ-auftrag, .strom .typ-auftrag-erledigt, .strom .typ-auftrag-ergebnis,
.strom .typ-ereignis, .strom .faltschritt, .strom .typ-wartet {
  max-width: 88%;
  margin-left: auto;
  margin-right: auto;
  font-size: .95em;
  background: color-mix(in srgb, var(--flaeche) 60%, var(--grund));
}
/* Offene Entscheidungen (Vorschlag/Vorlage) duerfen trotzdem auffallen. */
.strom .typ-vorschlag-offen, .strom .typ-vorlage {
  border-color: color-mix(in srgb, var(--betont) 45%, var(--linie));
}
/* Der Faltschritt ist ein Zwischenglied, keine Blase mit Inhalt. */
.strom .faltschritt { padding: .45rem .9rem; }
.strom .faltschritt summary { cursor: pointer; font-weight: 650; color: var(--gedaempft); }
.strom .faltschritt .strom { padding-left: .9rem; margin-top: .6rem; }
.strom .faltschritt .strom .blase { max-width: 100%; }
@media (max-width: 720px) { .strom .blase { max-width: 100%; } }

/* Einheitliche Abstaende zwischen den Flaechen (Mathias, 19.08. 10:15) und die
   eingeklappte Zusagen-Wachliste. */
.tisch-flaeche { margin-bottom: 1.6rem; }
.zusagen-klapp > summary { cursor: pointer; list-style: revert; }
.zusagen-klapp[open] > summary { margin-bottom: .6rem; }

/* „Warum bei dir" — die Zeile, die den Tisch erklaert (27.08.2026). Sie steht
   direkt unter der Zusammenfassung und vor allen Knoepfen. */
.entscheidungskopf .warum-du {
  margin: .35rem 0 .75rem;
  padding: .5rem .7rem;
  border-left: 3px solid currentColor;
  opacity: .85;
  font-size: .95em;
}
.entscheidungskopf .warum-du .klein { opacity: .75; }

/* Der Verlauf klappt zu (27.08.2026) — ein Klick, und er ist ganz da. Die
   Zusammenfassung oben kann falsch sein; deshalb darf die Akte nie mehr als
   einen Klick entfernt sein. */
.verlauf-falte > summary {
  cursor: pointer;
  padding: .6rem .8rem;
  margin: 1rem 0 .5rem;
  border: 1px solid currentColor;
  border-radius: 6px;
  opacity: .8;
  font-weight: 600;
}
.verlauf-falte > summary:hover { opacity: 1; }
.verlauf-falte[open] > summary { margin-bottom: 1rem; }

/* ── Reihenfolge: die tägliche Arbeitsliste ─────────────────────────────────
   Karten statt Fließtext, damit ein Fall auf einen Blick vom nächsten zu
   trennen ist (Wunsch Mathias, 28.08.2026).

   ⚠️ NUR VORHANDENE FARBVARIABLEN. Die Kontrastwerte oben im Kopf gelten für
   diese Werte; eine neue Farbe müsste in beiden Modi nachgemessen werden.

   ⚠️ DIE ART STEHT IMMER ALS WORT DA. Der farbige Balken links ist die
   zusätzliche, schnell erfassbare Spur — nie die einzige (WCAG 1.4.1),
   dieselbe Regel wie bei .beitrag. */

.reihenfolge {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  counter-reset: rang;
}

.reihenfolge > .posten {
  counter-increment: rang;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 6px solid var(--rahmen);
  border-radius: .75rem;
  padding: 1rem 1.2rem 1.1rem;
  margin: 0 0 .9rem;
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  column-gap: 1rem;
  align-items: start;
}

/* Die Rangzahl ist die Leseordnung — sie steht groß und ruhig links.
   Über ::before erzeugt, damit sie nicht vorgelesen wird: Der Screenreader
   liest die <ol> ohnehin als nummerierte Liste. */
.reihenfolge > .posten::before {
  content: counter(rang);
  grid-row: 1 / span 4;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--gedaempft);
  text-align: right;
  padding-top: .1rem;
}

.posten-kopf {
  margin: 0 0 .15rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
}

.posten-kopf .marke-art {
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
}

.posten-kopf .punkte {
  border: 1.5px solid var(--rahmen);
  border-radius: 999px;
  padding: .05rem .6rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--gedaempft);
}

.posten-kopf .zustand {
  margin: 0;
  padding: .05rem .6rem;
  font-size: .85rem;
  font-weight: 400;
  color: var(--gedaempft);
}

.posten-titel {
  margin: 0 0 .5rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.posten .warum {
  margin: 0 0 .6rem;
  padding-left: 1.1rem;
  color: var(--gedaempft);
  font-size: .95rem;
}
.posten .warum li { margin: .1rem 0; }

.posten .schritt {
  margin: 0;
  padding-top: .55rem;
  border-top: 1px solid var(--linie);
  font-weight: 600;
  font-size: .95rem;
}

/* Die Balkenfarbe folgt der Art. Reine Zugabe — das Wort steht daneben. */
.posten-fehler     { border-left-color: var(--fehler); }
.posten-vorgang    { border-left-color: var(--betont); }
.posten-zusage     { border-left-color: var(--erfolg); }
.posten-langlieger { border-left-color: var(--gedaempft); }
.posten-idee       { border-left-color: var(--linie); }

/* Ein Posten, der aus dem Parken zurückkommt, ist etwas anderes als einer, der
   nie weg war — deshalb sichtbar abgesetzt. */
.posten.war-geparkt { border-style: dashed; border-left-style: solid; }

/* ── Die Einschätzung, die oben steht ──────────────────────────────────── */

.empfehlung {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 6px solid var(--betont);
  border-radius: .75rem;
  padding: 1.1rem 1.35rem 1.25rem;
  margin: 0 0 1.75rem;
}
.empfehlung h2 { margin: 0 0 .35rem; font-size: 1.15rem; }
.empfehlung .empfehlung-satz {
  margin: 0 0 .6rem;
  font-size: 1.15rem;
  font-weight: 700;
}
.empfehlung .empfehlung-grund { margin: 0 0 .75rem; }
.empfehlung .empfehlung-fuss {
  margin: 0;
  padding-top: .6rem;
  border-top: 1px solid var(--linie);
  font-size: .9rem;
  color: var(--gedaempft);
}
/* Eine alte Einschätzung soll sich alt ANFÜHLEN, nicht nur alt lesen. */
.empfehlung.veraltet { border-left-color: var(--fehler); }
.empfehlung .warnung { margin: .6rem 0 0; color: var(--fehler); font-weight: 600; }
.empfehlung.leer { border-left-color: var(--linie); color: var(--gedaempft); }

/* ── Geparkt ───────────────────────────────────────────────────────────── */

.geparkt {
  background: var(--grund);
  border: 1px dashed var(--rahmen);
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
}
.geparkt h2 { margin: 0 0 .3rem; font-size: 1.05rem; }
.geparkt ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.geparkt li { margin: .4rem 0; }

.gewichtung { margin-top: 1.5rem; color: var(--gedaempft); }
.gewichtung summary { cursor: pointer; font-weight: 600; }
.gewichtung table { border-collapse: collapse; margin: .75rem 0; }
.gewichtung th, .gewichtung td {
  border: 1px solid var(--linie);
  padding: .3rem .7rem;
  text-align: left;
}

@media (max-width: 34rem) {
  .reihenfolge > .posten { grid-template-columns: 2.25rem 1fr; column-gap: .7rem; }
  .reihenfolge > .posten::before { font-size: 1.4rem; }
}

/* Produktpille im Kopf einer Karte (Wunsch Mathias, 28.08.2026).
   ⚠️ Der Produktname steht als TEXT in der Pille — der Rahmen ist Form, nicht
   Bedeutung. Keine neuen Farben: --rahmen und --gedaempft sind im Kopf dieser
   Datei in beiden Modi vermessen. */
.pille-produkt {
  display: inline-block;
  border: 1.5px solid var(--rahmen);
  border-radius: 999px;
  padding: .05rem .7rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--gedaempft);
  white-space: nowrap;
}
/* ── Support V2: Mathias sieht Entscheidungen, nicht das Inventar ───────── */
.anmeldeseite {
  --grund: #f7f5f0;
  --flaeche: #fffefd;
  --text: #14243b;
  --gedaempft: #5f6977;
  --rahmen: #87909a;
  --linie: #e4e0d8;
  --betont: #0f6b6d;
  --auf-betont: #ffffff;
  --fehler: #a34432;
  --erfolg: #39745b;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--grund);
  font-size: 1rem;
  line-height: 1.55;
}

.anmeldeseite .seitenkopf {
  background: #fbfaf6;
  box-shadow: none;
}

.anmeldeseite .seitenkopf .innen,
.anmeldeseite main,
.anmeldeseite .seitenfuss .innen {
  width: 100%;
  max-width: 74rem;
}

.anmeldeseite .seitenkopf .innen {
  min-height: 5.25rem;
  padding-block: 1.25rem;
}

.anmeldeseite .marke {
  font-size: 1.05rem;
}

.anmeldeseite main {
  display: grid;
  align-items: center;
  padding: clamp(2rem, 6vw, 5rem) 1.25rem;
}

.anmeldung-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 28rem);
  align-items: center;
  gap: clamp(2.5rem, 8vw, 7rem);
}

.anmeldung-einleitung h1 {
  max-width: 12ch;
  margin: 0 0 .9rem;
  font: 500 clamp(2.6rem, 7vw, 4.8rem)/1.02 Georgia, "Times New Roman", serif;
  letter-spacing: -.04em;
}

.anmeldung-einleitung .vorspann {
  max-width: 34rem;
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.6;
}

.anmeldung-karte {
  padding: clamp(1.4rem, 4vw, 2.2rem);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--betont);
  border-radius: 1rem;
  background: var(--flaeche);
  box-shadow: 0 .8rem 2.5rem rgb(30 24 16 / .08);
}

.anmeldung-ueberzeile {
  margin: 0 0 .25rem;
  color: var(--gedaempft);
  font-size: .76rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.anmeldung-karte h2 {
  margin: 0 0 1.5rem;
  font: 500 clamp(1.65rem, 4vw, 2.15rem)/1.2 Georgia, "Times New Roman", serif;
  letter-spacing: -.025em;
}

.anmeldung-formular label { margin-top: 0; }
.anmeldung-formular input { min-height: 3.25rem; }
.anmeldung-formular button { width: 100%; margin-top: 1.25rem; }
.anmeldung-karte .fehler { margin-bottom: 1.25rem; }
.anmeldung-karte .fehler p { margin: 0; }

.anmeldung-hinweis {
  margin: 1rem 0 0;
  color: var(--gedaempft);
  font-size: .88rem;
}

@media (max-width: 46rem) {
  .anmeldeseite .seitenkopf .innen { min-height: auto; }
  .anmeldeseite main { align-items: start; padding-block: 2.25rem 3rem; }
  .anmeldung-layout { grid-template-columns: 1fr; gap: 2rem; }
  .anmeldung-einleitung h1 { font-size: clamp(2.35rem, 12vw, 3.4rem); }
  .anmeldung-einleitung .vorspann { font-size: 1.02rem; }
}

@media (prefers-color-scheme: dark) {
  .anmeldeseite {
    --grund: #111820;
    --flaeche: #19232e;
    --text: #eef3f3;
    --gedaempft: #b2bec4;
    --rahmen: #809098;
    --linie: #35414b;
    --betont: #76c5c3;
    --auf-betont: #102224;
    --fehler: #ff9b83;
    --erfolg: #83c9a6;
  }

  .anmeldeseite .seitenkopf { background: #151e27; }
  .anmeldung-karte { box-shadow: 0 .8rem 2.5rem rgb(0 0 0 / .2); }
}

.admin-ruhig .admin-hauptbereich {
  background: var(--grund);
}

.admin-ruhig .admin-hauptbereich main {
  max-width: 54rem;
  margin-inline: auto;
}

.entscheidungskopf {
  margin: 1.5rem 0 2rem;
}

.entscheidungskopf h1 {
  max-width: 18ch;
  margin-bottom: .65rem;
}

.ruhige-lage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  margin: 0 0 2rem;
}

.ruhige-lage div {
  padding: 1rem 1.1rem;
  border: 1px solid var(--linie);
  border-radius: .9rem;
  background: var(--flaeche);
}

.ruhige-lage strong,
.ruhige-lage span {
  display: block;
}

.ruhige-lage strong {
  font-size: 1.7rem;
  line-height: 1;
  margin-bottom: .35rem;
}

.ruhige-lage span {
  color: var(--gedaempft);
  font-size: .9rem;
}

.entscheidung-karte,
.entscheidung-leer {
  padding: clamp(1.1rem, 3vw, 2rem);
  margin: .5rem 0 1.25rem;
  border: 1px solid var(--linie);
  border-radius: 1rem;
  background: var(--flaeche);
  box-shadow: 0 .35rem 1.4rem rgb(30 24 16 / .06);
}

.entscheidung-karte.ist-naechste {
  border-color: color-mix(in srgb, var(--betont) 45%, var(--linie));
}

.entscheidung-meta {
  margin: 0 0 .45rem;
  color: var(--gedaempft);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.entscheidung-karte h2 {
  margin: 0 0 1.2rem;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
}

.entscheidung-karte h3 {
  margin: 0 0 .3rem;
  font-size: .9rem;
}

.entscheidung-karte p {
  max-width: 68ch;
}

.entscheidung-abschnitt,
.entscheidung-empfehlung {
  margin: 1rem 0;
}

.entscheidung-entwurf {
  margin: 1.1rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--betont) 38%, var(--linie));
  border-radius: .65rem;
  background: color-mix(in srgb, var(--betont) 4%, var(--flaeche));
}

.entscheidung-entwurf-hinweis {
  margin: 0 0 .75rem;
  color: var(--gedaempft);
  font-size: .82rem;
}

.entscheidung-entwurf-text {
  max-width: 72ch;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.55;
}

.entscheidung-lesefassung {
  margin-top: 1rem;
  border-top: 1px solid var(--linie);
  padding-top: .75rem;
}

.entscheidung-lesefassung summary {
  cursor: pointer;
  font-weight: 700;
}

.entscheidung-empfehlung {
  padding: 1rem 1.1rem;
  border-left: .28rem solid var(--betont);
  border-radius: .35rem;
  background: color-mix(in srgb, var(--betont) 8%, var(--flaeche));
}

.entscheidung-wirkung {
  color: var(--gedaempft);
}

.entscheidung-karte .knopf {
  display: inline-block;
  padding: .72rem 1rem;
  border: 0;
  border-radius: .55rem;
  background: var(--betont);
  color: var(--auf-betont);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}

.entscheidung-aktionen {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: .8rem 1rem;
  margin-top: 1.25rem;
}

.entscheidung-aktionen form {
  margin: 0;
}

.entscheidung-anders {
  min-width: min(100%, 24rem);
}

.entscheidung-anders > summary {
  cursor: pointer;
  padding: .7rem 0;
  color: var(--gedaempft);
  font-weight: 700;
}

.entscheidung-anders[open] {
  flex-basis: 100%;
  padding-top: .35rem;
}

.entscheidung-anders label,
.entscheidung-anders textarea {
  display: block;
  width: 100%;
}

.entscheidung-anders label {
  max-width: 42rem;
  font-weight: 700;
}

.entscheidung-anders textarea {
  margin: .45rem 0 .8rem;
  padding: .75rem;
  border: 1px solid var(--linie);
  border-radius: .55rem;
  background: var(--flaeche);
  color: inherit;
  font: inherit;
  resize: vertical;
}

.entscheidung-karte .knopf-sekundaer {
  background: color-mix(in srgb, var(--betont) 85%, var(--text));
}

.weitere-entscheidungen {
  margin: 1.5rem 0;
}

.weitere-entscheidungen > summary {
  cursor: pointer;
  padding: .85rem 0;
  font-weight: 700;
}

.entscheidung-leer {
  text-align: center;
  padding-block: 3rem;
}

.entscheidung-leer p {
  max-width: 38rem;
  margin-inline: auto;
}

.entscheidung-haken {
  font-size: 2.5rem;
  line-height: 1;
  color: var(--erfolg);
}

.ruhiger-fuss {
  margin: 2.5rem 0 1rem;
  font-size: .9rem;
  text-align: center;
}

.archiv-kopf h1 {
  max-width: 22ch;
}

.archiv-suche {
  max-width: 48rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  margin: 0 0 2rem;
  border: 1px solid var(--linie);
  border-radius: 1rem;
  background: var(--flaeche);
}

.archiv-suche > label {
  display: block;
  margin-bottom: .55rem;
  font-weight: 700;
}

.archiv-suche > div {
  display: flex;
  gap: .55rem;
}

.archiv-suche input {
  flex: 1 1 auto;
  min-width: 0;
}

.archiv-suche .klein {
  margin: .55rem 0 0;
}

.archiv-treffer {
  max-width: 58rem;
  margin: 2rem 0;
}

.archiv-treffer ul {
  display: grid;
  gap: .5rem;
  padding: 0;
  list-style: none;
}

.archiv-treffer a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1rem;
  border: 1px solid var(--linie);
  border-radius: .7rem;
  background: var(--flaeche);
  color: inherit;
  text-decoration: none;
}

.archiv-treffer a:hover,
.archiv-treffer a:focus-visible {
  border-color: var(--betont);
}

.archiv-treffer span {
  flex: 0 0 auto;
  color: var(--gedaempft);
  font-size: .88rem;
  text-align: right;
}

.archiv-expertenzugang {
  max-width: 48rem;
  margin: 3rem 0 1rem;
  color: var(--gedaempft);
  font-size: .9rem;
}

.archiv-expertenzugang summary {
  cursor: pointer;
  font-weight: 700;
}

/* ── Schlanke V2-Register: aktuelle Signale, nicht der Altbestand ──────── */
.register-kopf {
  margin-bottom: 1.25rem;
}

.register-kopf h1 {
  max-width: none;
}

.register-umschalter {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1rem;
}

.register-umschalter a {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  padding: .65rem .85rem;
  border: 1px solid var(--linie);
  border-radius: .65rem;
  background: var(--flaeche);
  color: inherit;
  text-decoration: none;
}

.register-umschalter a[aria-current="page"] {
  border-color: var(--betont);
  background: color-mix(in srgb, var(--betont) 8%, var(--flaeche));
}

.register-umschalter strong {
  font-size: 1.05rem;
}

.register-archivhinweis {
  max-width: 48rem;
  padding: .85rem 1rem;
  margin: 0 0 1rem;
  border-left: .25rem solid var(--linie);
  color: var(--gedaempft);
  background: color-mix(in srgb, var(--linie) 16%, transparent);
}

.register-suche {
  max-width: 38rem;
  margin: 0 0 1.5rem;
}

.register-suche label {
  display: block;
  margin-bottom: .4rem;
  font-weight: 700;
}

.register-suche > div {
  display: flex;
  gap: .5rem;
}

.register-suche input {
  flex: 1 1 auto;
  min-width: 0;
}

.register-liste ul {
  display: grid;
  gap: .55rem;
  padding: 0;
  list-style: none;
}

.register-liste a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1rem;
  border: 1px solid var(--linie);
  border-radius: .7rem;
  background: var(--flaeche);
  color: inherit;
  text-decoration: none;
}

.register-liste a:hover,
.register-liste a:focus-visible {
  border-color: var(--betont);
}

.register-liste span,
.register-liste small {
  display: block;
}

.register-liste small {
  margin-top: .25rem;
  color: var(--gedaempft);
}

.register-liste em,
.register-status {
  flex: 0 0 auto;
  padding: .3rem .5rem;
  border-radius: 99rem;
  background: color-mix(in srgb, var(--betont) 9%, var(--flaeche));
  color: var(--gedaempft);
  font-size: .82rem;
  font-style: normal;
  white-space: nowrap;
}

.register-detail {
  padding: clamp(1rem, 3vw, 1.7rem);
  border: 1px solid var(--linie);
  border-radius: 1rem;
  background: var(--flaeche);
}

.register-detail h2 {
  max-width: 34ch;
}

.register-langtext {
  max-width: 72ch;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .ruhige-lage {
    grid-template-columns: 1fr;
  }

  .archiv-suche > div,
  .archiv-treffer a,
  .register-suche > div,
  .register-liste a {
    align-items: stretch;
    flex-direction: column;
  }

  .archiv-treffer span {
    text-align: left;
  }

  .register-liste em {
    align-self: flex-start;
  }
}

/* ── Neubau: Zuordnen-Knöpfe an Fällen in „Neu" ──────────────────────────── */
.zuordnen-leiste {
  background: #f1eee7;
  border: 1px solid var(--linie);
  border-radius: .65rem;
  padding: .7rem 1rem .8rem;
  margin: 1.1rem 0 1.4rem;
}
.zuordnen-titel {
  margin: 0 0 .45rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--betont);
}
.zuordnen-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0;
}
.zuordnen-knopf {
  margin: 0; /* die globale button-Regel gibt 28px oben — hier unerwünscht */
  cursor: pointer;
  padding: .28rem .8rem;
  border: 1.5px solid var(--rahmen);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--gedaempft);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
}
.zuordnen-knopf:hover { border-color: var(--betont); color: var(--betont); }

/* Die Stationstabellen nutzen die volle Breite des Hauptbereichs. */
.admin-seite .tabellenrahmen .liste { width: 100%; }

/* ── Produkt-Reiter auf der In-Arbeit-Seite ─────────────────────────────── */
.produkt-reiter {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  border-bottom: 1px solid var(--linie);
  margin: 0 0 1.25rem;
}
.produkt-reiter a,
.produkt-reiter [aria-current="page"] {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .9rem;
  margin-bottom: -1px;
  text-decoration: none;
  color: var(--gedaempft);
  font-weight: 600;
  font-size: .95rem;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.produkt-reiter a:hover { color: var(--betont); }
.produkt-reiter [aria-current="page"] {
  color: var(--betont);
  border-bottom-color: var(--betont);
}
.reiter-zahl {
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.4;
  padding: 0 .5rem;
  border-radius: 999px;
  background: var(--grund);
  border: 1px solid var(--linie);
  color: var(--gedaempft);
}
.produkt-reiter [aria-current="page"] .reiter-zahl {
  border-color: var(--betont);
  color: var(--betont);
}

/* Rote Unklar-Pille hinter dem Betreff in der Neu-Liste; der Grund liegt
   als title-Tooltip auf der Pille und steht in der Notizspur. */
.unklar-pille {
  display: inline-block;
  margin-left: .35rem;
  padding: .02rem .55rem;
  border-radius: 999px;
  background: #fdecea;
  border: 1px solid #c0392b;
  color: #c0392b;
  font-size: .75rem;
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap;
}

/* Blocküberschriften auf der In-Arbeit-Seite (Priorisiert / Weitere). */
.arbeit-block {
  margin: 1.4rem 0 .5rem;
  font-size: 1.05rem;
}

/* Eingabefelder in den Leisten (Spieler verknüpfen, Zahler-Beleg). */
.spieler-feld {
  margin: 0;
  padding: .28rem .7rem;
  border: 1.5px solid var(--rahmen);
  border-radius: 999px;
  background: var(--flaeche);
  font: inherit;
  font-size: .85rem;
  min-width: 16rem;
}
.spieler-zeile { margin: .1rem 0 .5rem; }

/* Aufklappbares Original unter einer übersetzten Nachricht. */
.original-klapp { margin-top: .6rem; }
.original-klapp summary {
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
  color: var(--gedaempft);
}
.original-klapp summary:hover { color: var(--betont); }
.original-klapp p {
  margin-top: .5rem;
  padding-left: .8rem;
  border-left: 3px solid var(--linie);
  color: var(--gedaempft);
}

/* Antwortformular auf der Vorgangsseite. */
.antwort-formular textarea {
  width: 100%;
  margin: 0;
  padding: .6rem .8rem;
  border: 1.5px solid var(--rahmen);
  border-radius: .5rem;
  background: var(--flaeche);
  font: inherit;
  resize: vertical;
}
.antwort-formular .antwort-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem;
  margin: .5rem 0 0;
  font-size: .9rem;
}

/* Bernsteinfarbene Verdachts-Pille des Agenten („Fehler?") in der In-Arbeit-Liste. */
.verdacht-pille {
  display: inline-block;
  margin-left: .35rem;
  padding: .02rem .55rem;
  border-radius: 999px;
  background: #fdf3e2;
  border: 1px solid #b26a00;
  color: #b26a00;
  font-size: .75rem;
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap;
}