/* 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): eine Spalte je Phase, 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;
}

/* Ruhend oder abgeschlossen: kein Alarm, nur Kennzeichnung. */
.chip-grau {
  background: #e4e4df;
}

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

/* Laufende Mandate auf der Startseite: Firma und Bezeichnung oben, Phase und
   Verantwortlicher grau darunter. Als Flex-Zeile wurden die drei Teile zu
   schmalen Spalten mit dem Komma vorn an der Bezeichnung; lange Bezeichnungen
   aus dem Import enden nach zwei Zeilen, der volle Text steht im Tooltip. */
.mandatzeile {
  display: block;
  text-decoration: none;
}

.mandatzeile-titel {
  text-decoration: underline;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.mandatzeile .klein {
  display: block;
}

/* Die Mandatskachel steht unter den vier Kennzahlkacheln über die volle
   Breite; ab 900 px laufen die Einträge in zwei Spalten. */
.karte--breit {
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  .mandatliste {
    display: block;
    columns: 2;
    column-gap: 2rem;
  }

  .mandatliste li {
    break-inside: avoid;
    margin-bottom: 0.4rem;
  }

  /* Ohne den negativen oberen Rand der Kennzahlzeile, sonst beginnt die
     rechte Spalte ein paar Pixel tiefer als die linke. */
  .mandatliste .kennzahlzeile {
    margin: 0 -0.4rem;
  }
}

.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. */
:is(#ansicht-tabelle:checked ~ ul.treffer, #ansicht-tabelle:checked ~ .treffer-unpruefbar > ul.treffer) {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

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

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

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

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

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

:is(#ansicht-tabelle:checked ~ ul.treffer, #ansicht-tabelle:checked ~ .treffer-unpruefbar > 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). */
:is(#ansicht-tabelle:checked ~ ul.treffer, #ansicht-tabelle:checked ~ .treffer-unpruefbar > ul.treffer) > li > .spalte-begruendung {
  max-width: 22rem;
}

:is(#ansicht-tabelle:checked ~ ul.treffer, #ansicht-tabelle:checked ~ .treffer-unpruefbar > 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. */
:is(#ansicht-tabelle:checked ~ ul.treffer, #ansicht-tabelle:checked ~ .treffer-unpruefbar > ul.treffer) > li > .spalte-warnungen {
  width: 1.8rem;
  text-align: center;
}

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

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

/* Sitz (PLZ, Kreis, Bundesland, Bilanzsumme, Issue #41): in der Karte eine
   Zeile mit Trennpunkten, in der Tabelle eine schmale Spalte mit je einer
   Zeile pro Angabe. */
.spalte-sitz > span + span::before {
  content: " · ";
  color: #b8b8b4;
}

:is(#ansicht-tabelle:checked ~ ul.treffer, #ansicht-tabelle:checked ~ .treffer-unpruefbar > ul.treffer) > li > .spalte-sitz {
  width: 11rem;
  font-size: 0.8rem;
}

:is(#ansicht-tabelle:checked ~ ul.treffer, #ansicht-tabelle:checked ~ .treffer-unpruefbar > ul.treffer) > li > .spalte-sitz > span {
  display: block;
}

:is(#ansicht-tabelle:checked ~ ul.treffer, #ansicht-tabelle:checked ~ .treffer-unpruefbar > ul.treffer) > li > .spalte-sitz > span + span::before {
  content: none;
}

/* Divisionen und Kondition werden schmalere Spalten statt eigener Zeilen. */
:is(#ansicht-tabelle:checked ~ ul.treffer, #ansicht-tabelle:checked ~ .treffer-unpruefbar > ul.treffer) > li > .spalte-divisionen,
:is(#ansicht-tabelle:checked ~ ul.treffer, #ansicht-tabelle:checked ~ .treffer-unpruefbar > 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);
}

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

/* 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). Oben rechts und immer sichtbar, auch beim Scrollen:
   unter dem Inhalt stand er auf langen Seiten außerhalb des Bildes, und ein
   Rückkanal, den man erst suchen muss, wird nicht benutzt. */
.wunschknopf {
  position: fixed;
  top: 1rem;
  right: 1.25rem;
  z-index: 40;
  max-width: min(28rem, calc(100vw - 2.5rem));
}
.wunschknopf > summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  border: none;
  border-radius: 999px;
  background: #1d6f4e;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  list-style: none;
}
.wunschknopf > summary::-webkit-details-marker {
  display: none;
}
.wunschknopf > summary::before {
  content: "✎";
  font-size: 1rem;
}
.wunschknopf > summary:hover {
  background: #17563d;
}
.wunschknopf[open] > summary {
  border-radius: 8px 8px 0 0;
}
.wunschformular {
  margin-top: 0;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid var(--linie, #d8d8d2);
  border-radius: 8px 0 8px 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
  width: min(26rem, calc(100vw - 2.5rem));
}

/* Unterhalb von 860px ist die Navigation eingeklappt und ihr Menuknopf sitzt
   in der Kopfleiste ganz rechts - genau dort, wo der fest positionierte
   Wunschknopf liegt. Er fing den Klick ab, und die Navigation ließ sich auf
   einem 800px breiten Fenster überhaupt nicht mehr öffnen. Gefunden am
   23.08.2026 mit Browserprüfung 4, die seither rot stand.

   Der Wunschknopf weicht deshalb nach unten aus, statt dass die Kopfleiste
   über ihn gelegt wird: Dann wäre er selbst nicht mehr erreichbar, und ein
   Rückkanal, den man nicht anklicken kann, ist keiner. */
@media (max-width: 859px) {
  .wunschknopf {
    top: auto;
    bottom: 1rem;
  }
  .wunschknopf[open] > summary {
    border-radius: 0 0 8px 8px;
  }
  /* Aufgeklappt öffnet das Formular nach oben, sonst stünde es außerhalb des
     Bildes. */
  .wunschknopf[open] {
    display: flex;
    flex-direction: column-reverse;
  }
  .wunschformular {
    border-radius: 8px 8px 8px 0;
  }
}

/* Auf schmalen Bildschirmen liegt der Menuknopf oben links, der Wunschknopf
   bleibt rechts daneben und schrumpft auf das Zeichen. */
@media (max-width: 700px) {
  .wunschknopf > summary {
    padding: 0.5rem 0.7rem;
    font-size: 0;
  }
  .wunschknopf > summary::before {
    font-size: 1.15rem;
  }
}
.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;
}

/* Profil: das Passwortformular schmal halten, drei Felder untereinander
   lesen sich besser als drei über die volle Breite. */
.profil-passwort {
  max-width: 26rem;
}
.profil-passwort input {
  width: 100%;
}

/* Filtermaske: drei Spalten nebeneinander, die Optionen darunter (Feedback
   Olli, 19.08.2026). Bei fünf bis sieben Möglichkeiten je Spalte sieht man
   alles auf einen Blick, und Mehrfachauswahl braucht kein Festhalten der
   Steuerungstaste, an dem regelmäßig jemand scheitert. */
.filterspalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.9rem;
  margin: 0.6rem 0 1rem;
}
.filterspalte {
  border: 1px solid var(--linie, #d8d8d2);
  border-radius: 8px;
  padding: 0.6rem 0.8rem 0.7rem;
  margin: 0;
  min-width: 0;
}
.filterspalte > legend {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b6b66;
  padding: 0 0.3rem;
}
.filteroption {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.18rem 0.2rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.93rem;
  line-height: 1.35;
}
.filteroption:hover {
  background: rgba(29, 111, 78, 0.07);
}
.filteroption input {
  margin: 0;
  flex: none;
}
.filterzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.2rem;
  align-items: end;
  margin-bottom: 0.6rem;
}
.filterfeld-breit {
  flex: 1 1 100%;
}

.filterfeld {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.filterfeld input {
  max-width: 11rem;
}

/* Partnerseite: Kopf mit den Angaben, die man beim Öffnen zuerst sucht
   (Feedback Olli, 19.08.2026). Vorher begann die Seite unmittelbar mit dem
   Bearbeitungsformular, und wer nur nachsehen wollte, wie groß das Haus ist,
   musste sich das aus den Eingabefeldern zusammensuchen. */
.partnerkopf {
  background: #fff;
  border: 1px solid var(--linie, #d8d8d2);
  border-left: 5px solid #1d6f4e;
  border-radius: 0 10px 10px 0;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.2rem;
}
.partnerkopf h1 {
  margin: 0 0 0.5rem;
  font-size: 1.55rem;
  line-height: 1.25;
}
.partnermarken {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
}
.partnermarken .marke {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.16em 0.55em;
  border-radius: 4px;
  background: #f0f0ea;
  color: #4a4a45;
}
.partnermarken .marke-typ {
  background: #e8f3ee;
  color: #1d6f4e;
}
.partnermarken .marke-reichweite {
  background: #e9f0f7;
  color: #1d5f8f;
}
.partnermarken .marke-still {
  background: #fbeaea;
  color: #8c2020;
}
.partnermarken .marke-echt {
  background: #fdf1e0;
  color: #8a4b00;
}
.partnerzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.9rem;
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linie, #e8e8e2);
}
.partnerzahlen div {
  min-width: 0;
}
.partnerzahlen dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b6b66;
  margin-bottom: 0.15rem;
}
.partnerzahlen dd {
  margin: 0;
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
}
.leerwert {
  color: #9a9a94;
  font-style: italic;
  font-size: 0.92rem;
}

/* Zugeklappte Karten (Stammdaten bearbeiten, Konzern, Verbund): zu, bis
   jemand sie braucht. */
details.karte > summary {
  cursor: pointer;
  list-style: none;
}
details.karte > summary::-webkit-details-marker {
  display: none;
}
details.karte > summary h2 {
  display: inline;
  font-size: 1.05rem;
}
details.karte > summary::before {
  content: "▸ ";
  color: #1d6f4e;
}
details.karte[open] > summary::before {
  content: "▾ ";
}

/* Die Filterspalten in der Partnerliste stehen über der ganzen Breite, nicht
   in der Werkzeugzeile neben dem Suchfeld. */
.filterspalten-form {
  width: 100%;
  margin-top: 0.7rem;
}
.filteraktionen {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  margin-top: 0.2rem;
}
.filteraktionen a {
  font-size: 0.88rem;
}

/* Schnellnotiz auf der Partnerseite: offen, direkt unter dem Kopf. */
.schnellnotiz {
  margin-bottom: 1.2rem;
}
.schnellnotiz textarea {
  width: 100%;
  margin: 0.3rem 0 0.6rem;
}

/* Namensnennung der Datenquellen. Lizenzauflage, deshalb sichtbar, aber
   leise: sie soll niemanden von der Trefferliste ablenken. */
.quellen {
  margin-top: 2.5rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--linie);
  font-size: 0.78rem;
  color: var(--grau);
}

/* Bestätigungsliste der Merkmalsvorschläge. Der Originalsatz steht neben dem
   Vorschlag, damit die Entscheidung in zwei Sekunden fällt statt in zwei
   Minuten Suchen. */
td.zitat {
  font-size: 0.85rem;
  color: var(--grau);
  max-width: 34rem;
}
td.entscheidung form {
  display: flex;
  gap: 0.4rem;
}
.knopf-still {
  background: transparent;
  color: var(--grau);
  border: 1px solid var(--linie);
}
.blaettern a {
  margin-left: 0.7rem;
}

/* Ansprechpartner mit Geschichte und Merkmale am Institut (SW-09 bis SW-11). */
details.kontakt {
  border-top: 1px solid var(--linie);
  padding: 0.6rem 0;
}
details.kontakt > summary {
  cursor: pointer;
}
.kontaktformular {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 0.2rem;
  align-items: center;
}
.kontaktformular input[type="text"] {
  flex: 1 1 9rem;
  min-width: 7rem;
}
.kontakthistorie,
.merkmalsliste {
  margin: 0.4rem 0;
  padding-left: 1.1rem;
}
.merkmalsliste li {
  margin-bottom: 0.4rem;
}
.zitat {
  color: var(--grau);
}

/* Ausgangskorb: Der Nachrichtentext wird gelesen, bevor er rausgeht. */
pre.nachrichtentext {
  white-space: pre-wrap;
  background: var(--hintergrund);
  border: 1px solid var(--linie);
  padding: 0.7rem;
  font-family: inherit;
  font-size: 0.9rem;
  margin: 0.5rem 0;
}

/* Fundstelle in der Notizsuche. Der Browserstandard ist grellgelb auf schwarz
   und sticht aus dem übrigen Blattbild heraus; hier reicht ein ruhiger Grund. */
mark {
  background: #fdf3c4;
  color: inherit;
  padding: 0 0.1em;
  border-radius: 2px;
}

/* Sammelentscheidung auf der Vorschlagsseite. Deutlich abgesetzt vom
   Filterband darüber: Ein Knopf, der 421 Datensätze schreibt, darf nicht
   aussehen wie ein Filter. */
.stapelform {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0.9rem 0 1.2rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--linie, #d8d8d2);
  border-radius: 8px;
  background: #fbfbf8;
}
.filteraktionen-zweite {
  margin-top: -0.4rem;
}

/* Mandate auf der Mandantenseite (Issue #43): das laufende Mandat als Karte,
   nicht als eine Zeile. Kein .mandat-karte, das ist die ziehbare Kanban-Karte. */
.mandatsliste {
  list-style: none;
  padding: 0;
}

.mandat-eintrag {
  background: #f5f5f4;
  border: 1px solid #dededc;
  border-radius: 4px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.6rem;
}

.mandat-eintrag p {
  margin: 0.3rem 0 0;
}

/* Bankgedächtnis (Phase 1, Issue #57): Frage in eigenen Worten, Banken mit Belegen. */
.suchleiste {
  display: flex;
  /* Die globale form-Regel stapelt in einer schmalen Spalte. Eine Suchleiste
     steht in einer Zeile und nutzt die Breite. */
  flex-direction: row;
  max-width: none;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.75rem 0;
}
.suchleiste input[type="search"] {
  flex: 1 1 18rem;
  min-width: 0;
}
.suchleiste select {
  font: inherit;
  padding: 0.5rem;
  border: 1px solid #b8b8b4;
  border-radius: 4px;
  background: var(--flaeche);
}
.wissensfrage h2 {
  margin-top: 0;
}
.wissensliste {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.wissensliste .belege {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: grid;
  gap: 0.5rem;
}
.wissensliste .belege li {
  border-left: 3px solid var(--linie);
  padding-left: 0.6rem;
  overflow-wrap: anywhere;
}

/* Verlauf einer Anfrage (Phase 1, Issue #54). */
.verlaufsliste {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0;
  display: grid;
  gap: 0.35rem;
}
.verlaufsliste li {
  border-left: 2px solid var(--linie);
  padding-left: 0.5rem;
  overflow-wrap: anywhere;
}

/* ===== Formularbasis (Issue #52) ==========================================
   Olli, 27.09.2026: Menü, Layout und Farben passen, die Eingabe- und
   Suchmasken wirken „zerrissen und lieblos". Drei Ursachen, alle hier
   behoben statt in jeder Maske einzeln:
   1. Auswahllisten und Textfelder hatten keine Gestaltung (Systemschrift,
      Mini-Höhe, Schreibmaschinenschrift im Textfeld).
   2. Jedes Formular war eine 20rem schmale Spalte, jeder Knopf so breit wie
      die Spalte, in der Suche sogar über die ganze Seite.
   3. In der Suchmaske zog `.filterraster input { width: 100% }` jedes
      Kästchen über die volle Breite, der Text rutschte darunter.
   Dieser Block steht am Ende der Datei und gewinnt damit bei gleicher
   Spezifität. */

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
select,
textarea {
  font: inherit;
  font-size: 0.95rem;
  color: var(--anthrazit);
  background: var(--flaeche);
  border: 1px solid #b8b8b4;
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  min-height: 2.5rem;
  box-sizing: border-box;
  max-width: 100%;
}

textarea {
  min-height: 5.5rem;
  line-height: 1.45;
  resize: vertical;
  width: 100%;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--hellgruen);
  outline-offset: 1px;
  border-color: var(--gruen);
}

::placeholder {
  color: #9a9a95;
}

/* Knöpfe so breit wie ihr Text. Ein Knopf über die ganze Seite liest sich
   wie ein Balken, nicht wie eine Handlung. */
form > button,
form > .knopf {
  align-self: flex-start;
  padding: 0.55rem 1.3rem;
  border-radius: 6px;
}

/* Beschriftungen einheitlich: etwas kleiner und kräftiger als der Fließtext,
   damit Feldname und Inhalt nicht verschwimmen. */
form label:not(.kasten):not(.filteroption) {
  font-size: 0.88rem;
  font-weight: 600;
  color: #3d3d3a;
}

/* Formulare in einer Karte: Beschriftung links, Feld rechts, alle Felder in
   einer Flucht. Unter 720px gestapelt, wie bisher. Nur Formulare mit
   sichtbarer Beschriftung: Eines, das nur Platzhalter hat, rückte sonst in
   die rechte Spalte, und links bliebe ein leerer Streifen. */
.karte > form {
  max-width: none;
}

@media (min-width: 720px) {
  .karte > form:has(> label:not(.kasten)):not(.suchleiste):not(.stapelform):not(.ereignis-form):not(.kontaktformular) {
    display: grid;
    grid-template-columns: minmax(9rem, 13rem) minmax(0, 32rem);
    column-gap: 1.25rem;
    row-gap: 0.65rem;
    align-items: center;
  }
  .karte > form:has(> label:not(.kasten)):not(.suchleiste):not(.stapelform):not(.ereignis-form):not(.kontaktformular) > label:not(.kasten) {
    grid-column: 1;
  }
  .karte > form:has(> label:not(.kasten)):not(.suchleiste):not(.stapelform):not(.ereignis-form):not(.kontaktformular) > :is(input, select, textarea) {
    grid-column: 2;
  }
  .karte > form:has(> label:not(.kasten)):not(.suchleiste):not(.stapelform):not(.ereignis-form):not(.kontaktformular) > :is(p, div, fieldset, details, ul, h3, label.kasten) {
    grid-column: 1 / -1;
  }
  .karte > form:has(> label:not(.kasten)):not(.suchleiste):not(.stapelform):not(.ereignis-form):not(.kontaktformular) > :is(button, .knopf) {
    grid-column: 2;
    justify-self: start;
  }
  /* Ein Textfeld ist höher als seine Beschriftung; sie gehört an den oberen
     Rand, nicht in die Mitte. */
  .karte > form:has(> label:not(.kasten)):not(.suchleiste):not(.stapelform):not(.ereignis-form):not(.kontaktformular) > label:has(+ textarea) {
    align-self: start;
    padding-top: 0.55rem;
  }
}

/* Suchmaske: Reichweite, Typ und Branche als Chips zum Anklicken statt
   Kästchen über Text. Der Zustand steht an der Farbe des Chips; das
   Kästchen selbst bleibt für Tastatur und Vorleseprogramm im Formular. */
.filterspalte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-content: flex-start;
}
.filterspalte > legend {
  flex-basis: 100%;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.88rem;
  color: #3d3d3a;
  margin-bottom: 0.3rem;
}
.filterraster label.filteroption,
.filteroption {
  display: inline-flex;
  align-items: center;
  width: auto;
  margin: 0;
  padding: 0.3rem 0.75rem;
  border: 1px solid #c9c9c4;
  border-radius: 999px;
  background: var(--flaeche);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  user-select: none;
}
.filteroption input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.filteroption:has(input:checked) {
  background: var(--gruen);
  border-color: var(--gruen);
  color: #ffffff;
}
.filteroption:has(input:focus-visible) {
  outline: 2px solid var(--hellgruen);
  outline-offset: 2px;
}
.filteroption:hover:not(:has(input:checked)) {
  border-color: var(--gruen);
  background: #eef6ea;
}
.filterraster label.kasten input {
  width: auto;
}

/* Die Abmeldung in der Seitenleiste bleibt so breit wie die Leiste. */
.sidebar form > button {
  align-self: stretch;
}

/* Projekt und Suchprofil stehen nebeneinander, aber jeder so hoch wie sein
   Inhalt: Der kurze Projektkasten zog sich sonst bis zum Ende des langen
   Suchprofils. */
.filterraster {
  align-items: start;
}

/* Die kleinen Formulare der Partnerseite (Merkmal, Kategorie, Kontakt) sind
   Zeilen: Feld, Feld, Knopf. Die globale Spaltenregel stellte sie hochkant,
   mit einer Auswahlliste mitten im Leeren. */
.kontaktformular {
  flex-direction: row;
  max-width: none;
}
.kontaktformular select {
  flex: 0 1 14rem;
}
.merkmalsliste .reihenform {
  display: inline-flex;
  margin-left: 0.5rem;
  vertical-align: middle;
}
.merkmalsliste .reihenform button {
  padding: 0.2rem 0.6rem;
  font-size: 0.82rem;
  min-height: 0;
}

/* Breite Tabellen scrollen in ihrem Rahmen, nicht die ganze Seite. Die Klasse
   stand schon in den Vorlagen, eine Regel dazu gab es nicht: Auf /vorschlaege
   lief die Seite bei 390px um 3.700px zur Seite. */
.tabellenrahmen {
  overflow-x: auto;
  max-width: 100%;
}
.tabellenrahmen td.zitat {
  min-width: 16rem;
}
.filteraktionen {
  flex-wrap: wrap;
}
main code {
  overflow-wrap: anywhere;
  white-space: normal;
}

.neues-mandat label {
  margin: 0;
}
.neues-mandat select {
  flex: 0 1 18rem;
}

/* Namenssuche oben auf jeder Seite (Bernd, 06.10.2026). Rechts bleibt Platz
   für den fest positionierten Wunschknopf; unter 860px sitzt der unten. */
.namenssuche-kopf {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  max-width: none;
  margin: 0;
  padding: 0.9rem 1.5rem 0;
}
.namenssuche-kopf input[type="search"] {
  flex: 0 1 26rem;
  min-width: 0;
}
@media (min-width: 860px) {
  .namenssuche-kopf {
    padding-right: 16rem;
  }
}
.namenstreffer ul {
  margin: 0;
  padding-left: 1.1rem;
}
.namenstreffer li {
  margin: 0.2rem 0;
}

/* Hinweis „gibt es schon“ beim Anlegen eines Mandanten. */
.hinweis-karte {
  border-left: 4px solid var(--gelb);
}

/* Gespräche in der Mandatsakte (Bernd, 05.10.2026). */
.gespraechsliste {
  list-style: none;
  padding: 0;
  margin: 0.8rem 0 0;
}
.gespraechsliste li {
  padding: 0.5rem 0;
  border-top: 1px solid var(--linie);
}
.mehrzeilig {
  white-space: pre-wrap;
}
.gespraech-bearbeiten {
  margin-top: 0.3rem;
}
.gespraech-bearbeiten > summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--grau);
}

/* Treffer mit nicht prüfbarer Angabe stehen zugeklappt unter den sicheren
   (Issue #66). */
.treffer-unpruefbar { margin-top: 1rem; }
.treffer-unpruefbar > summary { cursor: pointer; font-weight: 600; }

/* Landkreisauswahl wie ein Excel-Filter (Issue #66): Suchfeld oben, Kreise
   je Bundesland zum Anhaken. */
.kreisauswahl > summary { cursor: pointer; }
.kreisauswahl[open] { border: 1px solid var(--linie); padding: 0.5rem; border-radius: 4px; }
.kreisauswahl .kreissuche { width: 100%; margin: 0.5rem 0; }
.kreisauswahl .kreisland { border: 0; padding: 0.25rem 0; margin: 0; }
.kreisauswahl .kreisland > legend { font-weight: 600; }
/* Spezifischer als `.filterraster label.filteroption`, das sonst das
   hidden-Attribut der Suchfilterung überstimmt. */
.kreisauswahl label.kreis[hidden],
.kreisauswahl fieldset.kreisland[hidden] { display: none; }

/* Checkliste der Phase in der Mandatsakte (Issue #12): ein Punkt je Zeile,
   darunter klein, wer ihn wann abgehakt hat. */
.checkliste {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0;
}
.checkliste li {
  padding: 0.3rem 0;
}
.checkliste li > .klein {
  display: block;
  margin-left: 1.6rem;
}