/* FaHaDi, Hausdesign nach Software-Spec Kapitel 7.
   Farben aus dem echten Logo (_arbeit/assets/FH_Logo_sRGB.png).
   Hellgrün ist Akzent- und Statusfarbe, NIE Schriftfarbe auf hellem Grund.
   Systemschriften, kein Webfont: der MVP läuft offline auf einem Laptop. */

:root {
  --gruen: #00803B;
  --hellgruen: #7FBB1E;
  --anthrazit: #191918;
  --grau: #6b6b66;
  --linie: #dededc;
  --flaeche: #ffffff;
  --hintergrund: #f5f5f4;
  --rot: #a11b1b;
  --gelb: #9a6b06;
}

/* Padding zählt zur angegebenen Breite, nicht obendrauf. Ohne diese Regel war
   das <main> auf JEDER Seite und bei JEDER Fensterbreite genau 48 Pixel breiter
   als sein Elternelement: es hat width 100 Prozent und zusätzlich 2 mal 1,5rem
   Innenabstand. Die Folge war ein waagerechter Scrollbalken über die ganze
   Seite, obwohl nur die Kanban-Spalten und breite Tabellen innen scrollen
   sollen. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--anthrazit);
  background: var(--hintergrund);
  line-height: 1.5;
}

/* Sidebar statt Kopfzeilen-Navigation (Spec Kapitel 1). Mobil (unter 860px)
   ist dieselbe .sidebar eine schmale obere Leiste mit Logo + Hamburger; die
   Desktop-Spaltenform kommt erst unter der Responsive-Marke am Dateiende. */

.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.sidebar {
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  position: relative;
}

.sidebar-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
}

.sidebar-marke {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}

.sidebar-marke span {
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gruen);
}

.menuknopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: 4px;
  padding: 0.35rem;
  color: var(--anthrazit);
  cursor: pointer;
}

.menuknopf svg {
  width: 22px;
  height: 22px;
}

/* Träger von Navigation und Fuß: mobil ein Overlay unter der Leiste (nur
   sichtbar, wenn .sidebar die Klasse .offen trägt), ab 860px immer sichtbar
   und Teil der festen Spalte. */
.sidebar-koerper {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
  padding: 0.6rem 1rem 1rem;
  z-index: 30;
}

.sidebar.offen .sidebar-koerper {
  display: block;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.nav-eintrag {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  border-left: 3px solid transparent;
  color: var(--anthrazit);
  text-decoration: none;
  font-size: 0.93rem;
}

.nav-eintrag svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.nav-eintrag:hover {
  background: #f5f5f4;
}

.nav-eintrag.aktiv {
  background: #eef6ea;
  border-left-color: var(--gruen);
  font-weight: 600;
}

.sidebar-fuss {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linie);
  font-size: 0.85rem;
  color: var(--grau);
}

.hauptbereich {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Nur die Anmeldeseite: Logo ohne Navigation (Kapitel 1, unverändert
   gefordert von test_anmeldeseite_zeigt_keine_navigation). */
.anmelde-kopf {
  padding: 0.7rem 1rem;
}

/* Der Demohinweis muss auffallen. Institutsnamen und Bilanzsummen sind echt,
   alles andere erfunden; ohne diesen Streifen sähe ein Screenshot aus wie eine
   Aussage über reale Banken. Eine schmale Zeile statt Blockabsatz (Kapitel 1). */
.demoband {
  margin: 0;
  padding: 0.4rem 1.5rem;
  background: var(--hellgruen);
  color: var(--anthrazit);
  font-size: 0.85rem;
}

main {
  max-width: 76rem;
  margin: 1.6rem auto 4rem;
  padding: 0 1.5rem;
  width: 100%;
}

h1 {
  font-size: 1.45rem;
  margin-top: 0.2rem;
}

h2 {
  font-size: 1.1rem;
  margin-top: 1.8rem;
}

a {
  color: var(--gruen);
}

form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 20rem;
}

input,
button {
  font: inherit;
  padding: 0.5rem;
  border: 1px solid #b8b8b4;
  border-radius: 4px;
}

button {
  cursor: pointer;
  background: var(--gruen);
  border-color: var(--gruen);
  color: #ffffff;
  font-weight: 600;
}

button:hover {
  background: #006c32;
}

.fehler {
  color: var(--rot);
  font-weight: 600;
}

.warnung {
  color: var(--gelb);
  font-size: 0.9rem;
}

.hinweis {
  background: #eef6ea;
  border-left: 3px solid var(--hellgruen);
  padding: 0.5rem 0.8rem;
}

.klein {
  font-size: 0.85rem;
  color: var(--grau);
}

.marke {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 3px;
  background: #f0f0ee;
  font-size: 0.78rem;
}

fieldset {
  border: 1px solid #dededc;
  border-radius: 4px;
  margin: 0 0 1rem;
  padding: 0.8rem 1rem;
}

form.suche,
form.filter {
  max-width: none;
}

ul.treffer {
  list-style: none;
  padding: 0;
}

ul.treffer > li {
  border: 1px solid #dededc;
  border-radius: 4px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.6rem;
  background: #ffffff;
}

ul.treffer > li.unpruefbar {
  border-left: 3px solid var(--gelb);
}

.begruendung {
  font-size: 0.9rem;
  color: #4a4a46;
}

.grund + .grund::before {
  content: " · ";
  color: #b8b8b4;
}

/* Mandats-Kanban (Arbeitspaket 8): sechs Spalten, ziehbare Karten. */

.kanban-kopf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.kanban-kopf select {
  font: inherit;
  padding: 0.3rem;
  border: 1px solid #b8b8b4;
  border-radius: 4px;
}

.kanban {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  overflow-x: auto;
  max-width: none;
}

.kanban-spalte {
  flex: 0 0 16rem;
  background: #ffffff;
  border: 1px solid #dededc;
  border-radius: 6px;
  padding: 0.6rem 0.7rem;
}

.kanban-spalte.drag-ueber {
  border-color: #6b6b66;
  background: #f0f0ee;
}

.kanban-spalte h2 {
  font-size: 1rem;
  margin: 0 0 0.3rem;
}

.mandat-karte {
  background: #f5f5f4;
  border: 1px solid #dededc;
  border-radius: 4px;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.6rem;
  cursor: grab;
}

.mandat-karte p {
  margin: 0.2rem 0;
}

/* Formulare dürfen breiter sein als eine Spalte, sobald sie mehrere Felder
   haben. */
form.filter,
form.suchzeile,
form.jetzt-pruefen {
  max-width: none;
}

form.jetzt-pruefen {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
}

table a {
  text-decoration: none;
}

/* Bausteine (Spec Kapitel 2), wiederverwendbar für Detail-, Formular- und
   Listenseiten. */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 8px;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.knopf-sekundaer,
.knopf-gefahr {
  font: inherit;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  background: transparent;
}

.knopf-sekundaer {
  border: 1px solid var(--gruen);
  color: var(--gruen);
}

.knopf-sekundaer:hover {
  background: #eef6ea;
}

.knopf-gefahr {
  border: 1px solid var(--rot);
  color: var(--rot);
}

.knopf-gefahr:hover {
  background: #f7e6e6;
}

.chip {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--anthrazit);
}

.chip-gruen {
  background: var(--hellgruen);
}

.chip-gelb {
  background: #f3e3b8;
}

.chip-rot {
  background: #f0c9c9;
}

/* Tabellen: Kopfzeile halbfett, dezente Zeilentrenner, getönte Hover-Zeile.
   Das horizontale Scrollen unter der 860px-Grenze steht bei der
   Responsive-Marke am Dateiende. */

th {
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid var(--linie);
  padding: 0.5rem 0.6rem;
}

td {
  border-bottom: 1px solid var(--linie);
  padding: 0.5rem 0.6rem;
}

tbody tr:hover {
  background: #f7f7f5;
}

/* ===== Paket 17: Startseite (Tagesuebersicht) ===== */

.kachelraster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.kachelraster .karte h2 {
  margin-top: 0;
  font-size: 1.05rem;
}

.kennzahlliste {
  list-style: none;
  margin: 0 0 0.8rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Jede Kennzahlzeile ist ein Sprung in die gefilterte Liste. Sie ist als
   Ganzes anklickbar und nicht nur die Zahl darin, sonst zielte man auf ein
   Kästchen von 20 Pixeln Breite.

   Sie sieht aus wie ein Link, weil sie einer ist: unterstrichen und in
   Dunkelgrün, wie die Anfragenzeilen in der Kachel daneben. Eine erste Fassung
   war dezent in Anthrazit und zeigte den Link erst beim Überfahren - damit
   findet niemand, der nicht zufällig hinfährt, dass die Zahlen Sprungziele
   sind. */
.kennzahlzeile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.4rem;
  margin: -0.2rem -0.4rem;
  border-radius: 4px;
  color: var(--gruen);
}

.kennzahlzeile:hover,
.kennzahlzeile:focus-visible {
  background: #eef6ea;
}

.kennzahl-gross {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--gruen);
  margin: 0 0 0.8rem;
}

@media (min-width: 640px) {
  .kachelraster {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== Paket 18: Suche (Filterraster, Trefferansichten) ===== */

/* Die drei Filterblöcke (Projekt, Block A, Block B) nebeneinander statt
   vierzehn Felder zum Scrollen (Spec Kapitel 4). Verknüpfung und Suchknopf
   bleiben außerhalb des Rasters, eine Spalte darunter. */
.filterraster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.filterraster fieldset {
  margin: 0;
}

/* Innerhalb eines fieldset gilt normaler Fluss: <label> ist inline, <input>
   inline-block, beide landen deshalb nebeneinander in derselben Zeile. In der
   alten einspaltigen Maske fiel das kaum auf, in den jetzt schmalen Spalten
   schiebt sich die Beschriftung neben ihr Feld und der Zusammenhang geht
   verloren. Ausgenommen .kasten: dort GEHÖRT die Beschriftung neben das
   Kästchen. */
.filterraster label:not(.kasten) {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.9rem;
}

.filterraster fieldset > label:first-of-type {
  margin-top: 0;
}

.filterraster input,
.filterraster select {
  width: 100%;
}

.filterraster label.kasten {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.filterraster label.kasten input {
  width: auto;
}

@media (min-width: 960px) {
  .filterraster {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Ausschlussbericht als natives <details>, zugeklappt per Voreinstellung
   (kein open-Attribut), Kurzfassung mit den drei Zahlen im <summary>. */
details.ausschlussbericht {
  margin-top: 1rem;
}

details.ausschlussbericht summary {
  cursor: pointer;
  font-weight: 600;
}

/* Umschalter Karten-/Tabellenansicht, reines CSS über :checked auf die
   nachfolgenden Geschwister (Spec Kapitel 4, Korrektur nach Codex-Review: ein
   einziges Markup je Treffer, kein zweiter Render-Block, kein Skript für den
   Umschalter selbst). Die Radios sind versteckt, die Labels davor sichtbar. */
.ansicht-radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.ansicht-knopfe {
  display: flex;
  gap: 0.4rem;
  margin: 1rem 0 0.6rem;
}

.ansicht-knopf {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--gruen);
  border-radius: 999px;
  color: var(--gruen);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
}

#ansicht-karten:checked ~ .ansicht-knopfe label[for="ansicht-karten"],
#ansicht-tabelle:checked ~ .ansicht-knopfe label[for="ansicht-tabelle"] {
  background: var(--gruen);
  color: #ffffff;
}

/* Das Radio selbst ist unsichtbar (opacity 0), bleibt aber fokussierbar. Ohne
   diese Regel wandert der Tastaturfokus unsichtbar über den Umschalter: man
   sieht nicht, worauf die Leertaste gleich wirkt. Der Rahmen liegt deshalb auf
   dem sichtbaren Label. */
#ansicht-karten:focus-visible ~ .ansicht-knopfe label[for="ansicht-karten"],
#ansicht-tabelle:focus-visible ~ .ansicht-knopfe label[for="ansicht-tabelle"] {
  outline: 2px solid var(--anthrazit);
  outline-offset: 2px;
}

/* Kartenansicht ist die Voreinstellung: ul.treffer bleibt in ihrer
   bestehenden Kartenform (siehe die ul.treffer-Regeln weiter oben). Erst wenn
   #ansicht-tabelle gewählt ist, wird die immer gleiche Liste zur Tabelle. */
#ansicht-tabelle:checked ~ ul.treffer {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

#ansicht-tabelle:checked ~ ul.treffer > li {
  display: table-row;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  margin-bottom: 0;
}

#ansicht-tabelle:checked ~ ul.treffer > li.unpruefbar {
  border-left: none;
}

#ansicht-tabelle:checked ~ ul.treffer > li.unpruefbar > .spalte-auswahl {
  border-left: 3px solid var(--gelb);
}

#ansicht-tabelle:checked ~ ul.treffer > li > * {
  display: table-cell;
  vertical-align: top;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--linie);
}

#ansicht-tabelle:checked ~ ul.treffer > li > .spalte-auswahl {
  width: 2.4rem;
  text-align: center;
}

#ansicht-tabelle:checked ~ ul.treffer > li > .spalte-auswahl .kasten-text {
  display: none;
}

/* Begründung visuell auf zwei Zeilen verdichtet, nichts serverseitig
   gekürzt: der volle Text steht weiter im DOM und im title-Attribut. Der
   Line-Clamp sitzt auf dem inneren .begruendung-Element, weil die äußere
   Spalte selbst als Tabellenzelle gebraucht wird (-webkit-box vertragen
   sich nicht mit display:table-cell auf demselben Element). */
#ansicht-tabelle:checked ~ ul.treffer > li > .spalte-begruendung {
  max-width: 22rem;
}

#ansicht-tabelle:checked ~ ul.treffer > li > .spalte-begruendung .begruendung {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Unprüfbar-Warnhinweise verdichten sich zu genau einem Warnsymbol, auch bei
   mehreren Hinweisen: die einzelnen .warnung-Texte bleiben im DOM (Titel
   trägt jeder für sich), werden aber ausgeblendet, das Symbol kommt von der
   Spalte selbst. In der Kartenansicht (Standard) bleiben sie unverändert
   sichtbar, siehe die .warnung-Regel weiter oben. */
#ansicht-tabelle:checked ~ ul.treffer > li > .spalte-warnungen {
  width: 1.8rem;
  text-align: center;
}

#ansicht-tabelle:checked ~ ul.treffer > li > .spalte-warnungen .warnung {
  display: none;
}

#ansicht-tabelle:checked ~ ul.treffer > li > .spalte-warnungen.hat-warnung::before {
  content: "⚠";
  color: var(--gelb);
}

/* Divisionen und Kondition werden schmalere Spalten statt eigener Zeilen. */
#ansicht-tabelle:checked ~ ul.treffer > li > .spalte-divisionen,
#ansicht-tabelle:checked ~ ul.treffer > li > .spalte-kondition {
  width: 12rem;
  font-size: 0.8rem;
}

/* Suchmaske vereinfacht (Olli: "Block A und Block B, die komplett gleich
   sind, ich verstehe überhaupt nix"). Nur noch Projekt und Suchprofil 1
   stehen nebeneinander im Raster, Suchprofil 2 zieht in ein eigenes <details>
   um - diese Regel überschreibt NICHT die ursprüngliche Drei-Spalten-Regel
   weiter oben (die bleibt für andere Nutzer des Rasters unverändert stehen),
   sondern gewinnt nur durch die spätere Position in derselben Kaskadenebene. */
@media (min-width: 960px) {
  .filterraster {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Der Verknüpfungssatz zwischen den beiden Suchprofilen, anstelle des alten
   eigenen Kästchens "Verknüpfung der Blöcke" unterhalb des Rasters. */
.verknuepfungszeile {
  margin: 0 0 1rem;
  font-size: 0.95rem;
}

.verknuepfungszeile select {
  font: inherit;
  padding: 0.2rem 0.5rem;
  margin: 0 0.3rem;
}

/* Suchprofil 2 als natives <details>, zugeklappt per Voreinstellung und nur
   dann serverseitig aufgeklappt (open-Attribut), wenn es wirklich eine
   Bedingung trägt - siehe b_gefuellt in suche.html. Eigene Feld-Regeln statt
   Wiederverwendung von .filterraster oben: die Fieldset hier steht allein,
   nicht im Zweierraster mit Projekt/Suchprofil 1. */
details.suchprofil-2 {
  border: 1px solid #dededc;
  border-radius: 4px;
  padding: 0.6rem 1rem;
  margin: 0 0 1rem;
}

details.suchprofil-2 summary.suchprofil-2-titel {
  cursor: pointer;
  font-weight: 600;
}

details.suchprofil-2 fieldset {
  margin: 0.8rem 0 0;
  border: none;
  padding: 0;
}

details.suchprofil-2 label:not(.kasten) {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.9rem;
}

details.suchprofil-2 fieldset > label:first-of-type {
  margin-top: 0;
}

details.suchprofil-2 input,
details.suchprofil-2 select {
  width: 100%;
}

details.suchprofil-2 label.kasten {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

details.suchprofil-2 label.kasten input {
  width: auto;
}

/* ===== Paket 19: Kanban (Alter seit Phasenwechsel) ===== */

/* Linker Rahmen der Kanban-Karte nach Tagen seit letztem Phasenwechsel
   (Spec Kapitel 5). Ergaenzt nur die linke Kante der bestehenden Karte
   (.mandat-karte), keine Aenderung an deren sonstiger Optik. */
/* Kommt man von einer Phasenzeile der Startseite, ist diese Spalte gemeint.
   Die anderen fünf bleiben sichtbar und bleiben Ablageziele: ohne sie liesse
   sich keine Phase mehr wechseln, und genau dafür ist das Brett da. */
.kanban-spalte.hervorgehoben {
  border-color: var(--gruen);
  box-shadow: 0 0 0 2px var(--gruen);
}

.mandat-karte--gruen {
  border-left: 4px solid var(--gruen);
}

.mandat-karte--gelb {
  border-left: 4px solid var(--gelb);
}

.mandat-karte--rot {
  border-left: 4px solid var(--rot);
}

/* Kreis mit Initialen fuer "Verantwortlich" (Spec Kapitel 5). Der Volltext
   bleibt als sichtbarer Absatztext und als title-Attribut des Kreises
   erhalten, hier nur die Kurzform. */
.verantwortlich {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.verantwortlich-kreis {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--hellgruen);
  color: var(--anthrazit);
  font-size: 0.68rem;
  font-weight: 700;
}

.verantwortlich-kreis--leer {
  background: var(--hintergrund);
  border: 1px dashed var(--grau);
  color: var(--grau);
}

/* ===== Paket 20: Listen (Suche und Sortierung) ===== */

/* Echter Scroll-Container statt des reinen CSS-Tricks aus Paket 16: die
   Tabelle scrollt in sich selbst, statt die Seite in die Breite zu drücken,
   und zwar bei jeder Fensterbreite, nicht nur unter der 860px-Marke. */
.tabellenhuelle {
  overflow-x: auto;
}

.listen-werkzeuge {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.listen-werkzeuge > label {
  font-size: 0.9rem;
  color: var(--grau);
}

.listen-suche {
  max-width: 16rem;
}

.listen-leer {
  margin-top: 0.8rem;
}

/* Ein Spaltenfilter (Status, Typ, Reichweite, Phase, Verantwortlich ...)
   kommt als Label+Select-Paar aus liste.js dazu, im selben Baustein wie das
   Suchfeld. Eigene Klasse statt .filterraster label: dort gilt "display:
   block" für die eigenen Serverfilter, hier soll das Paar in der Zeile
   bleiben. */
/* Die Serverfilter einer Liste stehen in derselben Leiste wie Suche,
   Trefferzahl und Zurücksetzen. Sie sind ein eigenes <form>, weil sie einen
   Serverrundlauf brauchen - optisch darf man das aber nicht sehen, sonst wirkt
   die Seite wieder wie zwei getrennte Filterleisten. */
.listen-serverfilter {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin: 0;
  max-width: none;
}

/* Ein langer Spaltenkopf soll umbrechen statt die Tabelle zu sprengen; der
   Volltext steht im title-Attribut. */
thead th {
  white-space: normal;
}

.listen-filter {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--grau);
}

.listen-filter select {
  font: inherit;
  padding: 0.35rem 0.5rem;
  border: 1px solid #b8b8b4;
  border-radius: 4px;
}

/* Trefferzähler und Zurücksetzen-Knopf stehen erst nach den Filtern, aber
   noch in derselben Werkzeugzeile - margin-left:auto schiebt beide ans Ende,
   ohne dass die Filter selbst zentriert werden müssten. */
.listen-trefferzahl {
  margin-left: auto;
  white-space: nowrap;
}

.listen-zuruecksetzen {
  padding: 0.35rem 0.8rem;
  font-size: 0.85rem;
}

/* Umschalter Kanban/Liste bei den Mandaten: einfache Linkpaare, kein Radio-
   Trick wie bei der Suche (Paket 18) - hier trägt der Server die Auswahl im
   Pfad (?ansicht=liste), ein Linkziel ist verlinkbar und übersteht ein
   Neuladen, ein reiner CSS-Umschalter beides nicht. */
.ansicht-umschalter {
  display: flex;
  gap: 0.4rem;
  margin: 0 0 1rem;
}

.ansicht-umschalter-knopf {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--gruen);
  border-radius: 999px;
  color: var(--gruen);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

.ansicht-umschalter-knopf--aktiv {
  background: var(--gruen);
  color: #ffffff;
}

th[data-sortierbar] {
  cursor: pointer;
  user-select: none;
}

th[data-sortierbar]:hover {
  background: #f0f0ee;
}

/* Sortierrichtung als Pfeil, zusätzlich zu aria-sort für Vorlesewerkzeuge. */
th[data-sortierbar]::after {
  display: inline-block;
  width: 1em;
  margin-left: 0.3em;
  opacity: 0.4;
  content: "\2195";
}

th[data-sortierbar][aria-sort="ascending"]::after {
  opacity: 1;
  content: "\2191";
}

th[data-sortierbar][aria-sort="descending"]::after {
  opacity: 1;
  content: "\2193";
}

/* ===== Paket 22: Detail- und Formularseiten ===== */
/* Detail- und Formularseiten (Kapitel 8): bestehende Abschnitte stehen jetzt
   je einer eigenen .karte, mit Luft dazwischen statt nackter Absätze. */

main > .karte {
  margin-bottom: 1.2rem;
}

.karte h2:first-child,
.karte h3:first-child {
  margin-top: 0;
}

/* Nicht-destruktive Nebenaktionen (Verwerfen, Briefing neu erzeugen) und
   destruktive (Stilllegen) sitzen als schmale Formulare in einer Reihe statt
   in der vollen Formularbreite der Grunddefinition oben. */
form.aktionsform {
  display: inline-flex;
  max-width: none;
  flex-direction: row;
}

/* Die Stilllegen-Aktion auf der Partnerseite bleibt in der Stammdaten-Karte,
   aber sichtbar abgesetzt vom Speichern-Formular darüber. */
.aktion-trenner {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--linie);
}

.aktionsleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

/* ===== Responsive ===== */

/* Ab hier Desktop-Aufloesung der Sidebar (Kapitel 1): unter 860px bleibt die
   Basisform von oben (obere Leiste + Overlay) gueltig. */
@media (min-width: 860px) {
  .layout {
    flex-direction: row;
  }

  .sidebar {
    flex: 0 0 15rem;
    border-bottom: none;
    border-right: 1px solid var(--linie);
    display: flex;
    flex-direction: column;
    padding: 1.1rem 0.9rem;
  }

  .sidebar-kopf {
    padding: 0 0.3rem 1.2rem;
    margin-bottom: 0.6rem;
    border-bottom: 1px solid var(--linie);
  }

  .menuknopf {
    display: none;
  }

  .sidebar-koerper {
    display: flex;
    flex-direction: column;
    position: static;
    box-shadow: none;
    border-bottom: none;
    padding: 0;
    flex: 1;
  }

  .sidebar-fuss {
    margin-top: auto;
  }
}

/* Für den waagerechten Scroll breiter Tabellen sorgt .tabellenhuelle in den
   Vorlagen, nicht die Tabelle selbst.

   Hier stand vorher ein Notbehelf, der unter 860px auch thead, tbody und jede
   einzelne <tr> auf display:table setzte. Jede Zeile wurde dadurch zu einer
   eigenen Tabelle mit eigener Spaltenberechnung, und die Werte standen nicht
   mehr unter ihren Überschriften. Der Notbehelf entstand nur, weil Paket 16
   die Listenvorlagen nicht anfassen durfte; seit Paket 20 und 22 gibt es
   überall einen echten Scroll-Container, und er ist damit hinfällig. */
@media (max-width: 859px) {
  table {
    white-space: nowrap;
  }
}

/* ===== Anfragen-Kanban im Mandat ===== */

/* .kanban und .kanban-spalte kommen unverändert aus dem Mandats-Kanban
   (weiter oben in dieser Datei): dieselbe waagerechte Scrollhülle, dieselbe
   Kartenoptik. Hier nur, was die Anfragen-Karten zusätzlich brauchen - eine
   ganze Bearbeitungsform je Karte ist breiter als eine reine Statuszeile. */

/* Alle fuenf Statusspalten muessen gleichzeitig sichtbar sein. Mit einer
   festen Breite von 22rem passten nur drei ins Fenster, und "Zusage" - die
   wichtigste Spalte des ganzen Bretts - lag unsichtbar rechts ausserhalb.
   Gemessen: 5 mal 22rem sind 1760 Pixel bei rund 1160 Pixel Platz.
   Die Spalten teilen sich deshalb die Breite; erst unter der Mindestbreite
   greift der waagerechte Scroll der Huelle. */
.anfragen-kanban {
  align-items: stretch;
}

.anfragen-kanban .kanban-spalte {
  flex: 1 1 0;
  min-width: 11rem;
}

/* Die Bearbeitungsform steckt in einem zugeklappten <details>. Aufgeklappt
   sollen ihre Felder die Spaltenbreite nutzen statt sie zu sprengen. */
.anfrage-details form {
  max-width: none;
}

.anfrage-details input,
.anfrage-details select,
.anfrage-details textarea {
  width: 100%;
  box-sizing: border-box;
}

.anfragen-kanban .kanban-spalte h3 {
  font-size: 0.95rem;
  margin: 0 0 0.4rem;
}

.anfragen-spalte-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.anfrage-karte {
  cursor: grab;
}

.anfrage-karte--abgeschlossen {
  cursor: default;
  opacity: 0.75;
}

.anfrage-feedback {
  font-style: italic;
}

.anfrage-details summary {
  cursor: pointer;
  color: var(--gruen);
  font-weight: 600;
  margin-top: 0.4rem;
}

.anfrage-details form {
  margin-top: 0.5rem;
}

.anfrage-loeschen-form {
  margin-top: 0.5rem;
}

/* Klickbare Listenzeile (Issue #30). Ohne den Zeiger ist die Zeile zwar
   anklickbar, sieht aber nicht so aus, und niemand probiert es. */
tr[data-ziel] {
  cursor: pointer;
}

/* Wunschknopf (SW-62). Steht unter dem Inhalt jeder Seite, aufgeklappt wird
   ohne JavaScript über <details>. Zugeklappt soll er sichtbar, aber ruhig
   sein: er begleitet die Arbeit, er unterbricht sie nicht. */
.wunschknopf {
  margin: 2rem 0 1rem;
}
.wunschknopf > summary {
  cursor: pointer;
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--linie, #d8d8d2);
  border-radius: 6px;
  font-size: 0.9rem;
}
.wunschformular {
  margin-top: 0.8rem;
  max-width: 40rem;
}
.wunschformular textarea {
  width: 100%;
}
.wunsch-text {
  font-size: 1.05rem;
  margin: 0 0 0.4rem;
}
.wunsch-antwort {
  border-left: 3px solid var(--linie, #d8d8d2);
  padding-left: 0.8rem;
  margin: 0.6rem 0;
}
.wunsch-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: end;
  margin-top: 0.8rem;
}