/* ═══════════════════════════════════════════════════════════════════════════
   IMBISS · biss.css, gekürzt aus BISS-WEB/baukasten/biss.css (Design: Simon Rolland)
   Tokens, Basis, Shell, die genutzten Komponenten, Overlays, Mobil. Alles
   andere aus dem Baukasten ist hier bewusst nicht enthalten. Erzeugt mit
   scripts/trim-biss-css.py; Ergänzungen stehen in imbiss.css.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ─── 1 · Fonts: Archivo lokal, offline lauffähig, kein FOUT ─── */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: block;
  src: url(fonts/archivo-latin.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: block;
  src: url(fonts/archivo-latin-ext.woff2) format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ─── 2 · Tokens: Farben und Abstände kommen NUR hier her ─── */
:root {
  --bg: #eff4ef;
  --surface: #ffffff;
  --ink: #22352a;
  --muted: #5d6f63;
  --line: #22352a;
  --line-soft: #a9bfaf;
  --green: #2e4a3c;
  --green-mid: #48685a;
  --green-soft: #d8e4da;
  --band: #f3e9bc;
  --band-ink: #5a4e17;
  --band-edge: #d9c453;
  --gold: #c9a227;
  --alert: #a63b22;
  --shadow: 4px 4px 0 #c9d8cc;
  --sb: 264px;
  --pad: 28px;
  --sec: 24px;
  --gap: 16px;
}
/* ─── 3 · Basis. Radius 0 ist Gesetz; Fokus immer 3px Gold. ─── */
* {
  box-sizing: border-box;
  margin: 0;
  border-radius: 0 !important;
}
html {
  overflow-y: scroll;
}
/* konstanter Scrollbar-Gutter: kein 15px-Ruck zwischen Seiten */
body {
  font:
    14px/1.5 "Archivo",
    system-ui,
    sans-serif;
  background: var(--bg);
  color: var(--ink);
}
/* kein min-width: schmale Fenster fängt Sektion 8 ab, nicht ein Scrollbalken */
a {
  color: var(--green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 0;
}
kbd {
  font:
    700 11px/1 "Archivo",
    sans-serif;
  color: var(--green);
  background: #fff;
  border: 2px solid var(--green);
  padding: 2.5px 6px;
}
button {
  font: inherit;
  cursor: pointer;
}
/* ═══ 4 · Shell: Kopfzeile ════════════════════════════════════════════════ */
header {
  display: grid;
  grid-template-columns: var(--sb) 1fr;
  height: 60px;
  background: var(--green);
  color: #fff;
  border-bottom: 2px solid var(--line);
}
.hz1 {
  display: flex;
  align-items: center;
  padding: 0 16px;
}
.mark {
  font-weight: 800;
  font-size: 19px;
}
.mark span {
  color: var(--band-edge);
}
.tenant {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  color: #fff;
  font:
    700 12.5px "Archivo",
    sans-serif;
  cursor: pointer;
}
.hz2 {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 0 var(--pad);
  min-width: 0;
}
.search {
  flex: 1;
  max-width: 640px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 2px solid var(--line);
  padding: 6px 11px;
  color: var(--muted);
}
.search kbd {
  border-width: 1.5px;
}
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0;
  font:
    400 13px/1.5 "Archivo",
    system-ui,
    sans-serif;
  color: var(--ink);
}
.search input::placeholder {
  color: var(--muted);
  font-weight: 400;
  opacity: 1;
}
.search.hasq input {
  font-weight: 800;
}
.search:focus-within {
  outline: 3px solid var(--gold);
}
.cluster {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex: none;
  font-weight: 700;
  font-size: 12.5px;
}
.cluster .n {
  background: var(--band-edge);
  color: var(--band-ink);
  padding: 5px 9px;
  font-weight: 800;
  border: 0;
}
/* ─── Shell: Grundraster (Sidebar links, Inhalt rechts) ─── */
.layout {
  display: grid;
  grid-template-columns: var(--sb) 1fr;
  min-height: calc(100vh - 62px);
}
main {
  padding: var(--sec) var(--pad);
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* ─── Shell: Sidebar als Karten-Stapel. Aktive Zeile grün gefüllt (.on),
       Unterpunkte (.ckids) mit Winkelhaken, Zähler-Chips (.cnt). ─── */
aside {
  background: var(--bg);
  border-right: 2px solid var(--line);
  display: flex;
  flex-direction: column;
  padding-top: 12px;
}
.card {
  margin: 0 12px 12px;
  border: 2px solid var(--line);
  background: #fff;
  box-shadow: 3px 3px 0 #c9d8cc;
}
.chead {
  background: var(--band);
  color: var(--band-ink);
  border-bottom: 2px solid var(--line);
  border-left: 4px solid var(--band-edge);
  padding: 4px 10px 4px 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.crow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.crow:hover {
  background: var(--bg);
}
.crow + .crow {
  border-top: 1.5px solid var(--green-soft);
}
aside a.crow {
  color: var(--ink);
  text-decoration: none;
}
.ico {
  width: 16px;
  height: 16px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--green);
}
.crow .cnt {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 800;
  padding: 1.5px 0;
  min-width: 30px;
  text-align: center;
  border: 1.5px solid var(--green-mid);
  color: var(--green);
}
.crow .cnt.alert {
  background: var(--alert);
  border-color: var(--alert);
  color: #fff;
}
.crow.on {
  background: var(--green);
  color: #fff;
  font-weight: 800;
}
.crow.on .ico {
  color: var(--band-edge);
}
.crow.on .cnt {
  border-color: #fff;
  color: #fff;
}
.crow.on .cnt.alert {
  background: #fff;
  color: var(--alert);
  border-color: #fff;
}
aside .foot {
  margin-top: auto;
  border-top: 2px solid var(--line-soft);
  background: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 700;
}
aside .foot .avatar {
  width: 30px;
  height: 30px;
  background: var(--band);
  color: var(--band-ink);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 11.5px;
  border: 2px solid var(--band-edge);
}
/* ─── Shell: Statuszeile unten, kbd-Hints links, URL rechts. Steht auf JEDER Seite. ─── */
.hints {
  margin-top: auto;
  border-top: 2px solid var(--line);
  padding-top: 13px;
  display: flex;
  gap: 22px;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
  align-items: center;
}
.hints span {
  display: flex;
  gap: 7px;
  align-items: center;
}
.hints .url {
  margin-left: auto;
  font-weight: 700;
}
.hints .msg {
  font-size: 12px;
  font-weight: 800;
  color: var(--band-ink);
  background: var(--band);
  border-left: 4px solid var(--band-edge);
  padding: 2px 8px;
}
.hints .msg:empty {
  display: none;
}
/* Zwillingsfeld der Statuszeile, nur für Vorlesesoftware. Die sichtbare
   Statuszeile steht im Inhaltsbereich; mobil deckt das Akte-Blatt sie zu und
   der Bereich ist während eines Overlays inert — von dort wird nichts mehr
   angesagt. Dieses Feld steht außerhalb und meldet weiter. Nicht per
   display:none verstecken, sonst schweigt es ebenfalls. */
.sr-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* ═══ 5 · Seiten-Layouts ═══════════════════════════════════════════════════ */
/* Seitenkopf: h1 + Unterzeile + Datum rechts (Quelle: alle Listen-Mockups) */
.hello {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: var(--sec);
}
.hello h1 {
  font-size: 23px;
  font-weight: 800;
}
.hello p {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}
.hello p b {
  color: var(--alert);
}
.hello .date {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
/* Der Block: 2px-Rahmen + Offset-Schatten. Band + Korpus = EIN Block. */
.block {
  border: 2px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.block + .block {
  margin-top: var(--gap);
}
/* gestapelte Blöcke (Akte-Sektionen) rücken auseinander … */
.cols > .block + .block {
  margin-top: 0;
}
/* Akten-/Detailkopf: grüner Balken mit Titel, Chips, Aktionen.
   Basis = Kundenakte; .compact = Vorgang-Detail (kleiner, enger) */
.ahead {
  border: 2px solid var(--line);
  background: var(--green);
  color: #fff;
  box-shadow: var(--shadow);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.ahead h1 {
  font-size: 22px;
  font-weight: 800;
}
.ahead.compact {
  padding: 14px 20px;
  gap: 14px;
}
.ahead.compact h1 {
  font-size: 19px;
}
.ahead .num {
  font-size: 14px;
  font-weight: 800;
  color: var(--band-edge);
}
.ahead .chips {
  display: flex;
  gap: 8px;
  margin-left: 6px;
}
.ahead .customer {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
}
.ahead .customer a {
  color: #fff;
}
.ahead .act {
  margin-left: auto;
  display: flex;
  gap: 10px;
}
.ahead .customer + .act,
.ahead .customer ~ .act {
  margin-left: 0;
}
/* wenn .kunde rechts steht, rückt .act daneben */
.ahead .act button {
  background: #fff;
  border: 2px solid var(--line);
  font-weight: 800;
  font-size: 12.5px;
  padding: 7px 12px;
  color: var(--green);
}
.ahead .act button.ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
/* Spaltenraster unter dem Kopf:
   .cols.rail    = Inhalt links, schmale Spalte rechts (Kundenakte, 1fr 380px)
   .cols.rowgrid = Sonderfall der Vorgangsseite: fünf FEST benannte Bereiche,
                   damit beide Spalten sich drei Schlusslinien teilen. Nur
                   nehmen, wenn die Seite genau diese fünf Blöcke hat — ein
                   Block ohne a-*-Klasse landet sonst an unvorhersehbarer
                   Stelle im Raster. Für eine Detailseite mit anderem
                   Blockschnitt gehört hierher eine eigene Variante; sie wird
                   gebaut, wenn es die Seite gibt, nicht auf Vorrat. */
.cols {
  display: grid;
  gap: var(--gap);
  margin-top: var(--sec);
}
/* ═══ 6 · Komponenten ══════════════════════════════════════════════════════ */
/* ─── Kartenkopf-Band: gelber Kopf mit Gold-Kante, sitzt IMMER auf einem Block.
       Rechts: .r für Zusatztext/Links · .cnt2 als Zähler ─── */
.bandrow {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--band);
  color: var(--band-ink);
  border-left: 5px solid var(--band-edge);
  border-bottom: 2px solid var(--line);
  padding: 8px 16px 8px 11px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.bandrow .r {
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  font-size: 12.5px;
}
.bandrow > a {
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--band-ink);
}
/* ─── Tabelle: das Arbeitslisten-Muster. Immer class="table" setzen.
       .dense = kompakte Variante für Akten-Sektionen (kleiner, ohne Kopfzeile) ─── */
table.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.table th {
  text-align: left;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 9px 16px;
  border-bottom: 2px solid var(--line);
}
.table td {
  padding: 10px 16px;
  border-bottom: 1.5px solid var(--green-soft);
  vertical-align: middle;
}
.table tr:last-child td {
  border-bottom: 0;
}
/* Nur Zeilen mit data-row sind bedienbar. Ohne diese Einschränkung sähen auch
   reine Anzeigezeilen (Verträge, Dokumente in der Akte) klickbar aus. */
.table tbody tr[data-row] {
  cursor: pointer;
}
.table tbody tr[data-row]:hover {
  background: var(--bg);
}
/* Die gewählte Zeile. Gilt auch für Karten-Zeilen (Suchtreffer): dieselbe
   Auswahl, dieselbe Optik — der Wert steht deshalb nur an einer Stelle. */
.table tbody tr[aria-current] {
  background: #fbf6e0;
  box-shadow: inset 3px 0 0 var(--band-edge);
}
.table tbody tr:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
}
table.table.dense {
  font-size: 13px;
}
.table.dense td {
  padding: 9px 16px;
}
/* Zellen-Bausteine */
.table .num {
  font-weight: 800;
  white-space: nowrap;
}
.table .subject b {
  font-weight: 700;
}
.table .subject small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.table .customer {
  white-space: nowrap;
}
.table .customer a {
  color: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-decoration-color: var(--line-soft);
}
.table td.who {
  color: var(--muted);
  font-weight: 600;
}
/* ─── Status-Flag: kleines Rechteck mit 2px-Rahmen.
       Varianten: offen · wv/warn (gelb) · alert (rot) · done (grau) · aktiv (grün gefüllt)
       .big = Kachel-Format (Launcher) ─── */
.flag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border: 2px solid;
  white-space: nowrap;
}
.flag.open {
  color: var(--green);
  border-color: var(--green-mid);
  background: #fff;
}
.flag.alert {
  color: #fff;
  background: var(--alert);
  border-color: var(--alert);
}
.flag.wv,
.flag.warn {
  color: var(--band-ink);
  background: var(--band);
  border-color: var(--band-edge);
}
.flag.done {
  color: var(--muted);
  border-color: var(--line-soft);
  background: #fff;
}
.flag.active {
  color: #fff;
  background: var(--green);
  border-color: var(--green);
}
.flag.big {
  font-size: 11px;
  padding: 2.5px 8px;
  margin-top: 8px;
  width: fit-content;
}
/* ─── Chip: Status-Anzeige auf grünem Grund (Akten-/Panel-Kopf) ─── */
.chip {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2.5px 8px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: #fff;
}
.chip.gold {
  border-color: var(--band-edge);
  color: var(--band-edge);
}
.chip.alert {
  background: var(--alert);
  border-color: var(--alert);
}
/* ─── Schlüssel-Wert-Liste: dl.kv = 4-spaltig (Stammdaten) ·
       dl.kv.narrow = 2-spaltig (schmale Blöcke, z. B. Kunde im Vorgang) ─── */
dl.kv {
  display: grid;
  grid-template-columns: 150px 1fr 150px 1fr;
  gap: 0 18px;
  padding: 12px 16px;
}
dl.kv div {
  display: contents;
}
dl.kv dt {
  color: var(--muted);
  font-size: 12.5px;
  padding: 6.5px 0;
  border-bottom: 1.5px solid var(--green-soft);
  font-weight: 600;
}
dl.kv dd {
  font-weight: 600;
  font-size: 13px;
  padding: 6.5px 0;
  border-bottom: 1.5px solid var(--green-soft);
}
dl.kv.narrow {
  grid-template-columns: 120px 1fr;
  padding: 10px 16px;
  flex: 1;
  align-content: start;
}
dl.kv.narrow dt,
dl.kv.narrow dd {
  padding: 5px 0;
}
.pbody dl.kv {
  padding: 0;
}
/* ─── Dichtes Formular: Label links (150px), Feld rechts, inline editierbar, kein Modal ─── */
.form {
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 150px 1fr 150px 1fr;
  gap: 8px 18px;
  align-items: center;
  flex: 1;
  align-content: start;
}
.form label {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}
.form input[type="text"],
.form select,
.form textarea,
dl.kv dd input[type="text"] {
  font:
    600 13px "Archivo",
    sans-serif;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--line-soft);
  padding: 6px 9px;
  width: 100%;
}
.form input:hover,
.form select:hover,
.form textarea:hover,
dl.kv dd input[type="text"]:hover {
  border-color: var(--green-mid);
}
dl.kv dd input[type="text"] {
  padding: 2px 6px;
}
/* Inline-Edit in der kv-Liste: flacher */
.form .checks {
  grid-column: 1/5;
  display: flex;
  gap: 22px;
  padding: 4px 0;
  border-top: 1.5px solid var(--green-soft);
  margin-top: 4px;
}
.ck {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ck input {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--green-mid);
  background: #fff;
  margin: 0;
}
.ck input:checked {
  background: var(--green);
  box-shadow: inset 0 0 0 2.5px #fff;
}
/* ─── Historie-Eintrag: Zeit · Kürzel-Quadrat · Text · Modul-Tag ─── */
/* ─── Filter-Chips (Historie-Rail der Akte) ───
       Die Chips sind <button type="button">: Enter UND Leertaste müssen
       schalten, und der Screenreader soll „Schaltfläche" melden. Die
       background-Angabe nimmt dem Knopf sein Grau, sonst sähe er anders aus
       als früher der <span>. ─── */
.filters {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  border-bottom: 1.5px solid var(--green-soft);
  flex-wrap: wrap;
}
.filters .f {
  font-size: 11px;
  font-weight: 800;
  border: 1.5px solid var(--line-soft);
  color: var(--muted);
  padding: 2.5px 8px;
  cursor: pointer;
  background: transparent;
}
.filters .f.on {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
/* ─── Leerzustand: sagt, WARUM nichts da ist ─── */
.empty {
  padding: 16px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}
.empty b {
  color: var(--green);
}
/* ─── Modul-Kachel (Launcher): grüner Kopf, große Zahl, Öffnen-Knopf ─── */
.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin-top: var(--gap);
}
.tile {
  background: var(--surface);
  border: 2px solid var(--line);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-height: 196px;
  cursor: pointer;
}
a.tile {
  color: inherit;
  text-decoration: none;
}
.tile:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 #c9d8cc;
}
.tile .head {
  display: flex;
  align-items: center;
  background: var(--green);
  color: #fff;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 13px;
  border-bottom: 2px solid var(--line);
}
.tile .live {
  width: 8px;
  height: 8px;
  background: var(--band-edge);
  margin-left: auto;
}
.tile .body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.tile .count {
  font-size: 33px;
  font-weight: 800;
  line-height: 1.05;
}
.tile .count small {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-left: 5px;
}
.tile .status {
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500;
  min-height: 19px;
}
.tile .body footer {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
}
/* Öffnen-Knopf der Kachel. Heißt bewusst NICHT .open, denn das ist die
   Zustandsklasse des offenen Akte-Blatts am <body>. */
.open-btn {
  background: #fff;
  border: 2px solid var(--line);
  color: var(--green);
  font:
    800 12.5px "Archivo",
    sans-serif;
  padding: 6px 16px;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
}
.tile:hover .open-btn {
  background: var(--green);
  color: #fff;
}
.modhead {
  margin-top: var(--sec);
}
/* Ein Band als einziger Inhalt seines Blocks („Module" über den Kacheln):
   ohne Korpus darunter träfe seine Unterkante auf die Blockkante und beide
   Linien lägen doppelt aufeinander. */
.block > .bandrow:last-child {
  border-bottom: 0;
}
/* ─── Entwurfs-Karte („Weitermachen“) ─── */
/* ═══ 7 · Overlays ═════════════════════════════════════════════════════════ */
/* ─── Akte-Blatt: gleitet rechts herein, blockiert nichts. Hauchzarter
       Schleier (.scrim) fokussiert das Blatt; Klick daneben oder Esc schließt. ─── */
.scrim {
  position: fixed;
  inset: 62px 0 0 0;
  background: rgba(34, 53, 42, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
  z-index: 9;
}
body.open .scrim {
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .scrim {
    transition: none;
  }
}
/* visibility hält das zugeklappte Blatt aus der Tab-Reihenfolge;
   die Verzögerung erhält die Slide-out-Animation */
.panel {
  position: fixed;
  top: 86px;
  right: 28px;
  bottom: 24px;
  width: 580px;
  background: var(--surface);
  border: 2px solid var(--line);
  box-shadow: var(--shadow);
  transform: translateX(calc(100% + 40px));
  transition:
    transform 0.2s ease,
    visibility 0s 0.2s;
  display: flex;
  flex-direction: column;
  z-index: 10;
  visibility: hidden;
}
body.open .panel {
  transform: none;
  visibility: visible;
  transition: transform 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .panel {
    transition: none;
  }
}
.phead {
  background: var(--green);
  color: #fff;
  padding: 16px 20px;
  border-bottom: 2px solid var(--line);
}
.phead .row1 {
  display: flex;
  align-items: center;
  gap: 12px;
}
.phead h2 {
  font-size: 19px;
  font-weight: 800;
}
.phead .num {
  font-size: 13px;
  font-weight: 700;
  color: var(--band-edge);
}
.phead .x {
  margin-left: auto;
  background: none;
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font-weight: 800;
  padding: 3px 9px;
}
.phead .chips {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.pbody {
  flex: 1;
  overflow: auto;
  padding: 18px 20px;
}
.sect {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--band-ink);
  background: var(--band);
  border-left: 4px solid var(--band-edge);
  padding: 5px 10px;
  margin: 18px 0 10px;
}
.sect:first-child {
  margin-top: 0;
}
.pfoot {
  border-top: 2px solid var(--line);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
}
.pfoot a {
  margin-left: auto;
}
/* ─── Such-Dropdown (Strg+K): Ergebnisse hängen direkt am Feld ─── */
.pal {
  position: fixed;
  top: 56px;
  left: calc(264px + 28px);
  width: 644px;
  z-index: 21;
  background: var(--surface);
  border: 2px solid var(--line);
  box-shadow: 6px 6px 0 rgba(34, 53, 42, 0.18);
}
.pgrp {
  background: var(--band);
  color: var(--band-ink);
  border-left: 4px solid var(--band-edge);
  padding: 4px 12px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.pr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  font-size: 13.5px;
  cursor: pointer;
}
a.pr {
  color: inherit;
  text-decoration: none;
  font-weight: 400;
}
.pr:hover {
  background: var(--bg);
}
.pr.on {
  background: #fbf6e0;
  box-shadow: inset 3px 0 0 var(--band-edge);
}
.pr .ic {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--green-mid);
  color: var(--green);
  font-size: 10.5px;
  font-weight: 800;
}
.pr b {
  font-weight: 700;
}
.pr b mark {
  background: var(--band);
  color: inherit;
  padding: 0 1px;
}
.pr small {
  color: var(--muted);
  font-weight: 500;
}
.pr .go {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  gap: 6px;
  align-items: center;
}
/* Weiterführende Wege als eigene Zeilen unter den Treffern */
.pr.act {
  border-top: 2px solid var(--line);
  text-decoration: none;
  color: inherit;
  font-weight: 400;
}
.pr.act + .pr.act {
  border-top: 1.5px solid var(--green-soft);
}
.pal .pfoot2 {
  display: flex;
  gap: 18px;
  align-items: center;
  border-top: 2px solid var(--line);
  padding: 9px 16px;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
}
.pal-scrim {
  position: fixed;
  inset: 62px 0 0 0;
  background: rgba(34, 53, 42, 0.1);
  z-index: 20;
}
.pal[hidden],
.pal-scrim[hidden] {
  display: none;
}
/* ═══ 8 · Mobil ════════════════════════════════════════════════════════════
   Zwei Stufen, beide Desktop-first:
     ≤1199  Mehrspalter stapeln. Die Shell bleibt, wie sie ist.
     ≤899   Die Shell wird umgebaut: Kopf zu einer Flex-Zeile, Sidebar zum
            Drawer, Akte-Blatt zum Bottom-Sheet, Tabellen zu Karten.
   Der Seitenbauer tut dafür nichts. Er braucht im Kopf nur den Burger, den
   Suchknopf und den Nav-Schleier (stehen in jeder vorlage-*.html), und an
   Tabellenzellen ihre Klassen — die tragen unten das Kartenlayout.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Die drei mobilen Bedienelemente sind am Desktop nicht vorhanden, nicht nur
   unsichtbar: display:none hält sie aus Tab-Reihenfolge und Vorlesereihenfolge. */
.burger,
.searchbtn,
.nav-scrim {
  display: none;
}
.searchbtn .i-close {
  display: none;
}
/* ─── ≤1199 · Stapeln. Nur Raster, keine Shell. ───
   screen, nicht all: eine Druckseite ist oft schmaler als 900px und bekäme
   sonst Drawer, Karten-Tabellen und ausgeblendete Tabellenköpfe. */
@media screen and (max-width: 1199px) {
  .form,
  dl.kv {
    grid-template-columns: 150px 1fr;
  }
  .form .checks {
    grid-column: 1/3;
  }
  /* sonst zeigt die Reihe ins Leere */
  .tiles {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}
/* ─── ≤899 · Die mobile Shell ─── */
@media screen and (max-width: 899px) {
  :root {
    --pad: 14px;
    --sec: 18px;
    --gap: 14px;
    --ctl: 36px;
    --headh: 60px;
  }
  html {
    overflow-y: auto;
  }
  /* ─── Kopfzeile ───────────────────────────────────────────────────────────
     .hz1/.hz2 verschwinden als Container. Alle Bedienelemente werden direkte
     Flex-Kinder des Headers: EINE Ausrichtung, EIN Abstand, EIN Höhenmaß.
     align-content:flex-start statt center: die erste Zeile hängt am oberen
     Rand und bleibt beim Aufklappen der Suche exakt stehen. Zentriert würde
     sie hochrutschen, sobald die zweite Zeile dazukommt. */
  header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: 8px;
    padding: 12px;
    height: var(--headh);
    position: sticky;
    top: 0;
    z-index: 12;
  }
  .hz1,
  .hz2 {
    display: contents;
  }
  .burger,
  .searchbtn,
  .tenant,
  .cluster .n {
    height: var(--ctl);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font:
      800 11px/1 "Archivo",
      sans-serif;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    color: #fff;
    padding: 0 10px;
  }
  .burger,
  .searchbtn {
    width: var(--ctl);
    padding: 0;
  }
  /* Der Mandantenname ist das einzige beliebig lange Element im Kopf. Er darf
     schrumpfen und kürzen, aber niemals einen Umbruch erzwingen: bräche die
     erste Zeile um, stimmte --headh nicht mehr und Drawer, Schleier und
     Dropdown säßen alle falsch. */
  .tenant {
    gap: 5px;
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cluster .n {
    background: var(--band-edge);
    color: var(--band-ink);
    border-color: var(--band-edge);
  }
  /* Reihenfolge: ☰ · BISS. → 🔍 · 3 NEU · Mandant ganz rechts.
     Das Markup bleibt unangetastet, order sortiert nur die Anzeige. */
  .burger {
    order: 1;
  }
  .mark {
    order: 2;
    font-size: 16px;
    margin-right: auto;
  }
  .searchbtn {
    order: 3;
  }
  .cluster {
    display: contents;
  }
  .cluster .n {
    order: 4;
  }
  .cluster > span {
    display: none;
  }
  /* der ausgeschriebene Name kostet hier zu viel Platz */
  .tenant {
    order: 5;
    margin-left: 0;
  }
  /* ─── Suche: zugeklappt weg, aufgeklappt als ZWEITE ZEILE ────────────────
     Die erste Zeile bleibt vollständig stehen — Marke, Meldungen und Mandant
     werden nicht verdeckt. Das Feld bekommt flex-basis 100 % und rutscht damit
     von selbst in eine zweite Zeile; der Kopf wächst mit (--headh), und alle
     Offsets darunter folgen automatisch, weil sie an diesem Token hängen. */
  .search {
    display: none;
  }
  body.ov-search {
    --headh: 108px;
  }
  /* 12 + 36 (Zeile 1, unverrückt) + 8 + 40 + 12 */
  body.ov-search .search {
    display: flex;
    order: 6;
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
    height: 40px;
    padding: 0 11px;
    gap: 9px;
  }
  body.ov-search .search input {
    font-size: 13.5px;
  }
  body.ov-search .search kbd {
    display: none;
  }
  body.ov-search .searchbtn {
    background: #fff;
    border-color: var(--line);
    color: var(--green);
  }
  body.ov-search .searchbtn .i-search {
    display: none;
  }
  body.ov-search .searchbtn .i-close {
    display: block;
  }
  /* Das Ergebnis-Dropdown hängt am Feld und nimmt die volle Breite */
  .pal {
    top: calc(var(--headh) + 2px);
    left: 0;
    right: 0;
    width: auto;
    z-index: 21;
    max-height: calc(100dvh - var(--headh) - 2px);
    overflow: auto;
    border-width: 0 0 2px 0;
  }
  .pal-scrim {
    inset: calc(var(--headh) + 2px) 0 0 0;
    z-index: 20;
  }
  /* ─── Navigation: die Sidebar wird zum Drawer ─────────────────────────────
     #sidebar, NICHT aside: das Akte-Blatt ist ebenfalls ein <aside>. Ein
     Selektor `body.ov-nav aside` hätte (0,2,1) und würde `.panel` (0,1,0)
     schlagen — dann führe das Blatt beim Öffnen des Drawers mit heraus. */
  .layout {
    grid-template-columns: 1fr;
    min-height: calc(100dvh - var(--headh) - 2px);
  }
  #sidebar {
    position: fixed;
    top: calc(var(--headh) + 2px);
    bottom: 0;
    left: 0;
    width: min(304px, 86vw);
    z-index: 15;
    overflow: auto;
    visibility: hidden;
    transform: translateX(-102%);
    transition:
      transform 0.2s ease,
      visibility 0s 0.2s;
    box-shadow: 5px 0 0 rgba(34, 53, 42, 0.14);
  }
  body.ov-nav #sidebar {
    transform: none;
    visibility: visible;
    transition: transform 0.2s ease;
  }
  .nav-scrim {
    display: block;
    position: fixed;
    inset: calc(var(--headh) + 2px) 0 0 0;
    background: rgba(34, 53, 42, 0.1);
    z-index: 14;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
  }
  body.ov-nav .nav-scrim {
    opacity: 1;
    pointer-events: auto;
  }
  .crow {
    padding: 13px 12px;
    font-size: 14px;
  }
  /* Liegt ein Overlay über der Seite, scrollt der Hintergrund nicht mit.
     Nur hier: am Desktop ist „das Akte-Blatt blockiert nichts" Gesetz.
     Die Suchleiste bleibt frei — bei leerem Feld liegt nichts über der Seite. */
  html:has(body.ov-nav),
  html:has(body.open) {
    overflow: hidden;
  }
  /* ─── Inhalt ─── */
  .hello {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .hello h1 {
    font-size: 21px;
    overflow-wrap: anywhere;
  }
  .hello .date {
    margin-left: 0;
  }
  .bandrow,
  .ahead,
  .hints,
  .form .checks {
    flex-wrap: wrap;
  }
  /* ─── Tabelle wird Karte ──────────────────────────────────────────────────
     Die Karte entsteht allein aus den Zellklassen, die der Baukasten ohnehin
     setzt — kein neues Attribut, kein Mehraufwand beim Seitenbauer. */
  .table thead {
    display: none;
  }
  table.table,
  .table tbody {
    display: block;
  }
  .table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 10px;
    padding: 13px 14px;
    border-bottom: 2px solid var(--line);
  }
  .table tbody tr:last-child {
    border-bottom: 0;
  }
  /* order:6 ist Standard UND die Position von .muted: Spalten ohne eigene
     Klasse sind Beiwerk (Termin, Fälligkeit) und gehören in die Fußzeile der
     Karte, nicht zwischen Betreff und Kunde. Deshalb braucht .muted hier
     keine eigene Regel. */
  .table td {
    display: block;
    padding: 0;
    border: 0;
    order: 6;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
  }
  .table td:empty {
    display: none;
  }
  /* leere Zelle reißt keine Lücke */
  .table td.num {
    order: 1;
    flex: 1 1 auto;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
  }
  .table td:has(.flag) {
    order: 2;
    flex: none;
  }
  .table td.subject {
    order: 3;
    flex: 1 1 100%;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
    overflow-wrap: anywhere;
  }
  .table td.subject small {
    display: block;
    font-size: 12px;
    font-weight: 500;
    margin-top: 2px;
  }
  .table td.customer {
    order: 5;
    flex: 1 1 100%;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    overflow-wrap: anywhere;
  }
  .table td.who {
    order: 7;
    margin-left: auto;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
  }
  /* gewählte Zeile: Balken statt Füllung, damit der Text seinen Kontrast behält */
  .table tbody tr[aria-current] {
    box-shadow: inset 4px 0 0 var(--band-edge);
  }
  /* ─── Akte-Blatt als Bottom-Sheet, Griff ohne Markup ─────────────────────
     max-height deckelt die 88dvh am Kopf: quer liegend wäre das Blatt sonst
     höher als der freie Platz und verschwände unter dem Sticky-Header
     (Blatt z-index 10, Kopf 12). */
  .panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: 88dvh;
    max-height: calc(100dvh - var(--headh) - 2px);
    border-width: 2px 0 0 0;
    box-shadow: none;
    transform: translateY(100%);
    transition:
      transform 0.22s ease,
      visibility 0s 0.22s;
  }
  body.open .panel {
    transform: none;
    visibility: visible;
    transition: transform 0.22s ease;
  }
  .panel::before {
    content: "";
    flex: none;
    width: 46px;
    height: 4px;
    margin: 9px auto 5px;
    background: var(--line-soft);
  }
  .scrim {
    inset: 0;
  }
  body.open .scrim {
    opacity: 1;
    pointer-events: auto;
  }
  .pbody {
    padding: 14px;
  }
  .pfoot,
  .phead {
    padding-left: 14px;
    padding-right: 14px;
  }
  .pfoot {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  /* „Blockiert nichts, Esc schließt" gilt nur am Desktop: mobil ist das Blatt
     modal. Gleiche Regel wie in der Statuszeile — Tastaturhinweise ohne Tastatur. */
  .pfoot span:has(kbd) {
    display: none;
  }
  .hints {
    gap: 10px;
    font-size: 11.5px;
  }
  .hints span:has(kbd) {
    display: none;
  }
  /* Tastaturhinweise ohne Tastatur */
  .hints .url {
    margin-left: 0;
    flex: 1 1 100%;
    overflow-wrap: anywhere;
  }
  dl.kv dd {
    overflow-wrap: anywhere;
  }
}
/* ─── ≤599 · Label über Feld ──────────────────────────────────────────────
   Diese Ansichten kamen in der abgenommenen Mobil-Vorlage nicht vor: die
   zeigte nur die Arbeitsliste. Zweispaltig blieben bei 360px rechnerisch
   128px fürs Eingabefeld — zu wenig für Datum, E-Mail oder Versichertennr.
   Deshalb stapeln Formular und kv-Liste hier, nach demselben Muster. */
@media screen and (max-width: 599px) {
  .form,
  dl.kv,
  dl.kv.narrow {
    grid-template-columns: 1fr;
  }
  .form {
    gap: 2px 0;
  }
  .form label {
    margin-top: 9px;
  }
  /* trennt die Paare, ohne Label und Feld zu spreizen */
  .form label:first-child {
    margin-top: 0;
  }
  .form .checks {
    grid-column: 1/2;
  }
  /* Die Trennlinie gehört jetzt unter das Paar, nicht zwischen Schlüssel und Wert */
  dl.kv dt,
  dl.kv.narrow dt {
    border-bottom: 0;
    padding: 7px 0 0;
  }
  dl.kv dd,
  dl.kv.narrow dd {
    padding: 1px 0 7px;
  }
}
/* ─── ≤359 · Die Kopfzeile enger schnüren ─────────────────────────────────
   Bei 320px passen Burger, Marke, Suchknopf, Meldungs-Chip und Mandant nicht
   mehr in 296px. Statt Text abzuschneiden wird proportional zugezogen: das
   spart rund 22px und hält alles in einer Reihe. --headh rechnet mit. */
@media screen and (max-width: 359px) {
  :root {
    --ctl: 34px;
    --headh: 54px;
  }
  /* 10 + 34 + 10 */
  header {
    padding: 10px;
    gap: 6px;
  }
  .mark {
    font-size: 15px;
  }
  .tenant,
  .cluster .n {
    padding: 0 7px;
    font-size: 10.5px;
  }
  body.ov-search {
    --headh: 100px;
  }
}
/* Muss hinter dem 899-Block stehen: die mobilen .panel-Regeln deklarieren
   transition neu und würden die Abschaltung aus Sektion 7 sonst aufheben. */
@media (prefers-reduced-motion: reduce) {
  #sidebar,
  body.ov-nav #sidebar,
  .panel,
  body.open .panel,
  .nav-scrim {
    transition: none;
  }
}